チュートリアル: 初心者向けの Node.js

Node.jsを初めて使用する場合、このガイドは基本を始める手助けをします。

• Visual Studio Code で Node.js を使用してみてください
• Express を使用して初めての Node.js Web アプリを作成する
• Node.js モジュールの使用を試す

[前提条件]

• Windows 上の Node.js、または Windows Subsystem for Linux へのインストール

Visual Studio Code で NodeJS を試す

Visual Studio Code をまだインストールしていない場合は、上記の前提条件セクションに戻り、Windows または WSL にリンクされているインストール手順に従います。

1. コマンド ラインを開き、新しいディレクトリを作成します。 mkdir HelloNode、ディレクトリを入力します。 cd HelloNode

2. 次のコマンドを使用して VS Code でディレクトリを開きます。 code .

3. "app.js" という名前のファイルを作成する

4. msgという名前の変数に単純な文字列 "Hello World" を追加し、"app.js" ファイルに入力して、文字列の内容をコンソールに送信します。

   var msg = 'Hello World';
   console.log(msg);
   

5. Node.jsで "app.js" ファイルを実行するには VS Code 内でターミナルを開くには、 View>Terminal (または backtick 文字を使用して Ctrl + ') を選択します。 既定のターミナルを変更する必要がある場合は、ドロップダウンメニューを選択し、既定のシェルを選択します。

6. ターミナルで、「 node app.js」と入力します。 "Hello World" という出力が表示されます。

注

'app.js' ファイルに console を入力すると、INTELLISense の使用から選択できるように、 console オブジェクトに関連するサポートされているオプションが VS Code に表示されます。 他の JavaScript オブジェクトを使用して Intellisense を試してみてください。

Express を使用して初めての NodeJS Web アプリを作成する

Express は、GET、PUT、POST、DELETE などの複数の種類の要求を処理できる Web アプリの開発を容易にする、最小限の柔軟性と合理化された Node.js フレームワークです。 Express には、アプリのファイル アーキテクチャを自動的に作成するアプリケーション ジェネレーターが付属しています。

Express.jsを使用してプロジェクトを作成するには:

1. コマンド ライン (コマンド プロンプト、Powershell など) を開きます。

2. 新しいプロジェクト フォルダーを作成します: mkdir ExpressProjects し、そのディレクトリを入力します。 cd ExpressProjects

3. Express を使用して HelloWorld プロジェクト テンプレートを作成する: npx express-generator HelloWorld --view=pug

   注

   ここでは、 npx コマンドを使用して、Express.js Node パッケージを実際にインストールせずに実行します (または、考え方に応じて一時的にインストールします)。 express コマンドを使用しようとした場合、または次のコマンドを使用してインストールされている Express のバージョン express --versionを確認しようとすると、Express が見つからないという応答が表示されます。 何度も繰り返し使用するように Express をグローバルにインストールする場合は、 npm install -g express-generatorを使用します。 npm listを使用して、npm によってインストールされたパッケージの一覧を表示できます。 これらは、深さ (入れ子になったディレクトリの数) で一覧表示されます。 インストールしたパッケージは、深さ 0 になります。 そのパッケージの依存関係は、深度 1、さらに深さ 2 の依存関係などになります。 詳細については、StackOverflow の「npx と npm の違い」を参照してください。

4. VS Code でプロジェクトを開いて Express に含まれているファイルとフォルダーを確認します。次のコマンドを使用します。 code .

   Express が生成するファイルは、最初は少し圧倒的に見えるアーキテクチャを使用する Web アプリを作成します。 VS Code エクスプローラー ウィンドウ (Ctrl + Shift + E キーを押して表示) に、次のファイルとフォルダーが生成されたことが表示されます。

   • bin。 アプリを起動する実行可能ファイルが含まれています。 サーバーを起動し (代替手段がない場合はポート 3000 で)、基本的なエラー処理を設定します。
   • public。 JavaScript ファイル、CSS スタイルシート、フォント ファイル、画像、ユーザーが Web サイトに接続するときに必要なその他の資産など、パブリックにアクセスされるすべてのファイルが含まれます。
   • routes。 アプリケーションのすべてのルート ハンドラーが含まれています。 このフォルダーには、 index.js と users.jsの 2 つのファイルが自動的に生成され、アプリケーションのルート構成を分離する方法の例として機能します。
   • views。 テンプレート エンジンで使用されるファイルを格納します。 Express は、レンダー メソッドが呼び出されたときに一致するビューを検索するように構成されています。 既定のテンプレート エンジンは Jade ですが、Jade は Pug を優先して非推奨になったため、 --view フラグを使用してビュー (テンプレート) エンジンを変更しました。 --viewを使用すると、express --help フラグ オプションなどを確認できます。
   • app.js。 アプリのスタート地点。 すべてを読み込み、ユーザー要求の提供を開始します。 それは基本的にすべての部品を一緒に保持する接着剤です。
   • package.json。 プロジェクトの説明、スクリプト マネージャー、アプリ マニフェストが含まれています。 主な目的は、アプリの依存関係とそれぞれのバージョンを追跡することです。

5. ここで、HelloWorld Express アプリをビルドして実行するために Express が使用する依存関係をインストールする必要があります ( package.json ファイルで定義されているサーバーの実行などのタスクに使用されるパッケージ)。 VS Code 内で、表示>ターミナル を選択してターミナルを開くか、バックティック ( ` ) 文字を使用して Ctrl + ` を押して開き、必ず "HelloWorld" プロジェクトディレクトリ内にいることを確認してください。 次のコマンドを使用して Express パッケージの依存関係をインストールします。

   npm install
   

6. この時点で、さまざまな API と HTTP ユーティリティメソッドとミドルウェアにアクセスできる複数ページ Web アプリ用にフレームワークが設定され、堅牢な API を簡単に作成できます。 次のように入力して、仮想サーバーで Express アプリを起動します。

   npx cross-env DEBUG=HelloWorld:* npm start
   

   ヒント

   上記のコマンドの DEBUG=myapp:* 部分は、デバッグ目的でログ記録を有効にすることを Node.js に指示していることを意味します。 "myapp" は必ずアプリ名に置き換えてください。 アプリ名は、 package.json ファイルの "name" プロパティにあります。 npx cross-envを使用すると、任意のターミナルでDEBUG環境変数が設定されますが、ターミナル固有の方法で設定することもできます。 npm start コマンドは、package.json ファイルでスクリプトを実行するように npm に指示しています。

7. Web ブラウザーを開き、localhost:3000 に移動して、実行中のアプリを表示できるようになりました。

   

8. HelloWorld Express アプリがブラウザーでローカルで実行されたので、プロジェクト ディレクトリの 'views' フォルダーを開き、'index.pug' ファイルを選択して変更を行ってみてください。 開いたら、 h1= title を h1= "Hello World!" に変更し、[ 保存] (Ctrl + S) を選択します。 Web ブラウザーで localhost:3000 URL を更新して、変更を表示します。

9. Express アプリの実行を停止するには、ターミナルで Ctrl + C キーを押します。

Node.js モジュールの使用を試す

Node.js には、サーバー側の Web アプリの開発に役立つツールが用意されています。一部は npm を介して組み込まれており、さらに多くのアプリを利用できます。 これらのモジュールは、多くのタスクに役立ちます。

道具	使用目的
グラム、シャープ	JavaScript コードで直接、編集、サイズ変更、圧縮などを含む画像操作
PDFKit	PDF の生成
validator.js	文字列の検証
imagemin、UglifyJS2	縮小
spritesmith	スプライト シートの生成
ウィンストン	ロギング（記録）
commander.js	コマンド ライン アプリケーションの作成

組み込みの OS モジュールを使用して、コンピューターのオペレーティング システムに関する情報を取得してみましょう。

1. コマンド ラインで、Node.js CLI を開きます。 入力後に Node.js を使用していることを通知する > プロンプトが表示されます。 node

2. 現在使用しているオペレーティング システムを識別するには (Windows を使用していることを知らせる応答を返す必要があります)、次のように入力します。 os.platform()

3. CPU のアーキテクチャを確認するには、次のように入力します。 os.arch()

4. システムで使用可能な CPU を表示するには、次のように入力します。 os.cpus()

5. .exit入力するか、Ctrl + C キーを 2 回選択して、Node.js CLI のままにします。

   ヒント

   Node.js OS モジュールを使用して、プラットフォームを確認し、プラットフォーム固有の変数を返すことができます。Windows 開発用の Win32/.bat、Mac/unix 用の.sh、Linux、SunOS など ( var isWin = process.platform === "win32";など)。