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

Node.js を使用するのがまったく初めての場合、いくつかの基本事項から始めるとき、このガイドが役に立ちます。

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

前提条件

• Windows または Linux 用 Windows サブシステムでの Node.js のインストール

初心者が初めて Node.js を試す場合は、Windows に直接インストールすることをお勧めします。 詳細については、「Windows または Linux 用 Windows サブシステムのどちらにインストールする必要がありますか」を参照してください。

Visual Studio Code で NodeJS を試す

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

1. コマンド ラインを開き、新しいディレクトリを作成してからmkdir HelloNodeそのディレクトリに移動します。cd HelloNode

2. "app.js" という名前の JavaScript ファイルを作成し、"msg" という名前の変数を中に入れます (echo var msg > app.js)。

3. コマンドを使用して、VS Code でディレクトリと app.js ファイルを開きます (code .)。

4. 簡単な文字列変数 ("Hello World") を追加し、"app.js" ファイルに次を入力し、コンソールに文字列コンテンツを送信します。

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

5. Node.js で "app.js" ファイルを実行するには、 [表示] から [ターミナル] を選択し (あるいは Ctrl を押しながらバックティック文字 ` を選択し)、VS Code 内でターミナルを起動します。 既定のターミナルを変更する必要がある場合、ドロップダウン メニューを選択し、[既定のシェルの選択] を選択します。

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

注意

"app.js" ファイルに「console」と入力すると、console オブジェクト関連でサポートされているオプションが VS Code に表示されることに注目してください。このオプションは IntelliSense 使用時に選択できます。 他の JavaScript オブジェクトを使用し、Intellisense をいろいろ試してみてください。

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

Express は最小限で柔軟かつ合理化された Node.js フレームワークであり、GET、PUT、POST、DELETE など、さまざまな種類の要求を処理できる Web アプリを簡単に開発できます。 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 を使用すれば、インストールされているパッケージの一覧を表示できます。 深さ (奥の方に入れ子になっているディレクトリの数) 別に一覧表示されます。 自分でインストールしたパッケージの深度は 0 になります。 そのパッケージに依存するものの深度が 1 で、それにさらに依存するものの深度が 2 というふうに続きます。 詳細については、StackOverflow の[Difference between npx and npm?]\(npx と npm の違いとは?\) を参照してください。

4. VS Code でプロジェクトを開き、Express で追加されたファイルとフォルダーを調べます (code .)。

   Express によって生成されたファイルからは Web アプリが生成されますが、そのアプリで使用されるアーキテクチャは、初めは少し圧倒的に見えるかもしれません。 次のファイルとフォルダーが生成されたことが VS Code Explorer ウィンドウでわかります (Ctrl + Shift + E で表示)。

   • bin] の順にクリックします。 アプリを起動する実行可能ファイルが含まれます。 (代替が指定されていない場合、ポート 3000 で) サーバーが起動し、基本的なエラー処理がセットアップされます。
   • public] の順にクリックします。 JavaScript ファイル、CSS スタイルシート、フォント ファイル、画像、人が Web サイトに接続するときに必要となるその他のアセットなど、誰でもアクセスできるファイルがすべて含まれます。
   • routes] の順にクリックします。 アプリケーションのルート ハンドラーがすべて含まれます。 このフォルダーには index.js と users.js という 2 つのファイルが自動生成され、アプリケーションのルート構成を区別する方法の例として役立ちます。
   • views] の順にクリックします。 テンプレート エンジンによって使用されたファイルが含まれます。 Express は、レンダー メソッドが呼び出されたとき、一致するビューを探すように構成されています。 既定のテンプレート エンジンは Jade ですが、Jade は Pug を優先するために非推奨となっています。そのため、--view フラグを使用し、ビュー (テンプレート) エンジンを変更しました。 express --help を使用すると、--view フラグ オプションやその他が表示されます。
   • 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 から入手できるさまざまなツールもあります。 これらのモジュールはさまざまなタスクで役立ちます。

ツール	用途
gm、sharp	編集、サイズ変更、圧縮など、JavaScript コードで直接、画像を操作する
PDFKit	PDF 生成
validator.js	文字列検証
imagemin、UglifyJS2	縮小
spritesmith	スプライト シート生成
winston	Logging
commander.js	コマンド ライン アプリケーションの作成

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

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

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、Linux、SunOS の場合は darwin/.sh などとなります (たとえば var isWin = process.platform === "win32";)。