今日は、Node.js と NPM の基本について説明します。これには、一般的な Web 向けの開発方法に関する説明も含まれます。前もっての注意: 基本的な Web 開発と NPM に精通している場合は、この記事をスキップして、非常に便利な NPX の詳細をここで学ぶことができます。
わかりました！はじめましょう！
Node.js
これを読んでいるということは、すでに Node.js + NPM をダウンロードしており、Javascript の世界に足を踏み入れていることでしょう。しかし、最初のステップはすでに怖いように思えるかもしれません: 「Javascript で小さなプログラムを書きたいだけなのに、なぜ他のすべてのものが必要なのですか?」.それは理解できますが、実際には大したことではありません。
最初から始めましょう: 「.js」サフィックスで示されるように、コンピューターのどこにでも Javascript ファイルを作成するだけです。このファイルには任意の方法でコードを入力できますが、1 つ足りないことがあります。それは、プログラムを実際にどのように実行するのかということです。そこで Node.js の出番です。
Node.js は、明示的に Javascript 用のランタイム環境です。説明が示すように、Node は Node 自体が提供する特定の環境で Javascript コードを実行できます。プロセスは常に同じです。最初に Node.js を起動し、Node がスピンアップしたとき (つまり、起動が完了したことを意味します)、Javascript コードを提供できます。
Javascript を Node に入力として提供するには、次の 2 つの方法があります。
- 実行中のノード プロセスに直接、1 行ずつ、ファイルは含まれません
- 行ごとの入力なしで、どの Javascript ファイルをロードするかを Node に伝えることによって
node
1行ずつ
Node.js を正常にインストールしたら (インストーラーをダウンロードして実行するだけです。説明は Node の Web サイトにあります)、ターミナル (macOS/Linux) または PowerShell (Windows) のどこからでも Node.js を起動できます。 .コマンドはこんな感じ。
ええ、それだけです！ Node の起動に成功しました!これがどれほど速く起こったかに気づきましたか？ Node.js が非常に人気がある理由の 1 つは、(とりわけ) 非常に高速な起動のためです。
Node が稼働中になったので、Javascript-app を 1 行ずつ定義できます。各入力は処理され、メモリに保存されます。ここで少し例を示します。
(Hit enter after every line end)
const greet = (name) => console.log("Hello, " + name);
greet("Tom"); let x = 10; x = x + 5;
(enter the following line to terminate node)
.exit
これで問題ありませんが、より大きなアプリを作成するには、Node.js にフィードする前に、まずそれらをファイルにドラフトする必要があります。次の章をお願いします！
ファイルによる入力
この例では、テキスト エディターが必要です。基本的に、テキストを操作できるすべてのプログラムを使用できます (macOS の TextEdit や Windows の Editor など)。 Microsoft のオープン ソース VS Code をお勧めしますが、人間工学に最も適したものを選択できます。
入力としてファイルを提供するには、ファイルを作成するだけです。名前に接尾辞「js」を付けたプレーンテキストファイルを作成するだけです。ファイルに app.js という名前を付けます。次に、選択したコマンド プロンプト (最初の例で使用したもの) を開きます。ファイルが保存されているディレクトリから開いていることを確認してください。これは重要です。
VS Code を使用している場合は、組み込みのコマンド プロンプトを使用できます。エクスプローラー ビューで右クリックして [コードで開く] (Windows の場合) を呼び出すか、ファイルを含むディレクトリをドラッグ アンド ドロップします。 Dock (macOS) の VS Code アイコン。次に、ここで説明されているように、ターミナルを開くことができます。
ターミナルの準備ができたら、次のコマンドを入力するだけです。
node app.js
ご覧のとおり、いくつかのことが起こりました。
- ノードは直接開始され、ユーザー入力は利用できません
- ノードは、最後に到達するまでファイル全体を上から下に実行しました
- ファイルの終わりもそのプロセスの終わりを示しているため、ノード自体が終了しました
Node.js の基本的な紹介は以上です。 Node をダウンロードし、コマンド プロンプトを使用して独自の Javascript アプリを行単位またはファイルから起動する方法を初めて体験したら、あなたは正式に Javascript 開発者です!クラブへようこそ！
ここで、NPM の中心的な概念について説明します。次の章の後、Node.js、NPM、および Web 開発の間の接続を簡単に見ていきます。 Node.js について詳しく知りたい場合は、Javascript、ツールチェーン、およびすべてのコーディング関連の記事をこちらでご覧ください。この記事の最後には、さらに多くのことを学ぶための役立つリソースもいくつかリンクしています。
よし、一つ動かしてみよう！
NPM、ノード パッケージ マネージャー
これまで見てきたように、独自のコードを管理することはそれほど難しくありません。アプリはファイルに保存でき、適用した変更はそのまま残ります。しかし、暗号化ライブラリや画像操作ライブラリなど、他の誰かのコードを使用したい場合はどうでしょうか?どういうわけか、そのコードを自分のコードの隣に置き、アプリケーションで使用できるようにし、すべてを管理しやすくする必要があります。
素朴なアプローチは、外部コードをソースから直接ダウンロードすることです。 Github に移動し、ライブラリをファイルごとに独自のプロジェクトにコピーします。しかし、それはいくつかの問題につながります:
- この外部コードをどのように更新するのが最善ですか?手でコピーすることは最善の解決策ではありません。
- 外部のすべてのコードをどのように追跡しますか?
- この外部コード自体が、プロジェクトにインストールされていないライブラリに依存している場合はどうなるでしょうか?
これらすべての課題は、Node.js のパッケージ マネージャーである NPM によって対処されます。基本的に、パッケージ マネージャーの仕事は、依存関係とも呼ばれる外部コードを追加、追跡、および削除する方法に関する堅牢なソリューションを提供することです。実際の NPM の例をいくつか示します。
npm install serve-static npm remove serve-static
当然、このマネージャーは、プロジェクト内のすべての依存関係を追跡するために、いくつかの特別なファイル自体を必要とします。そのため、NPM を使用するアプリケーションには、package.json と package-lock.json の少なくとも 2 つのファイルがあります。次のコマンドを呼び出して、新しい NPM パッケージをすばやく作成できます。
npm init -y
注: この記事の最初の部分で説明したように、NPM は Node.js や Javascript を使用する必要はありません。その焦点は、依存関係を管理することです。それ以上でもそれ以下でもありません。 NPM を介して、npmjs.com で公開されているコードをダウンロードできます。これらの外部モジュールはすべて、プロジェクト内の node_modules という特別なディレクトリに保存されます。このディレクトリは NPM によって完全に管理されているため、実質的に変更する必要はありません。
package.json は、プロジェクトで現在使用されている依存関係についての洞察を提供します。 package-lock.json は、package.json ファイルまたは node_modules ディレクトリに関するミューテーションに関するメタデータを格納する特別なファイルであり、今のところ無視できます。
NPM の核となる概念、それが何を行い、どのようなファイル/ディレクトリを自動的に生成するかについての説明を締めくくろうと思います。詳細情報は、記事の最後にリンクされています。
Arc から Web 開発者へ
これで、Node.js と NPM の基礎を理解できました。しかし、独自の最新の Web サイトの作成を開始したいだけなのに、なぜこれらすべてを学ぶ必要があるのでしょうか?
先ほど見たように、NPM を使用すると、膨大な数のライブラリ (正確には現存する最大のもの) からコードをダウンロードできます。 Web 開発の場合、Web アプリをホスト (つまり、提供) できるサーバーが必要になります。 Web サイト プロジェクトをアップロードし、サーバーを含む既存のインフラストラクチャを使用して、Web サイトを Web 上で利用できるようにするサービスはたくさんあります。
また、ローカル開発の場合、ローカル ファイルをロードして、開発中に自分のデバイスで自分だけが利用できるようにするサーバーも必要です。 Node.js のおかげで、いわゆるローカルホスト経由で Web サイトをローカルで利用できるようにするだけで済みます。 Node.js には、ローカル サーバーを起動するために必要なツールが組み込まれていますが、NPM を使用すると、非常に大規模なサービスを短時間で作成するのに役立つ実戦テスト済みのコンポーネントでアプリケーションを強化できます。
もちろん、これはほんの始まりに過ぎません。NPM は、複雑なサーバーだけでなく、最新の Web アプリ (PWA、「プログレッシブ Web アプリ」として知られている) を構築するための非常に多くのコードをホストしています。でも初めての紹介なので、その説明でいいと思います。
Node.js と NPM を理解する手助けになれば幸いです。最初のステップは常に最も難しいものですが、開発の最初の数日を噛み砕いて (多くの) 学習することで、最新の Web アプリケーションの開発にスキルを拡大し、思い通りに構築できるようになります。
