path: root/files/ja/learn/server-side/express_nodejs/skeleton_website/index.html

---
title: 'Express チュートリアル Part 2: スケルトン Web サイトの作成'
slug: Learn/Server-side/Express_Nodejs/skeleton_website
tags:
  - CodingScripting
  - Express
  - Node
  - イントロダクション
  - サーバサイド
  - 初心者
  - 学習
  - 開発環境
translation_of: Learn/Server-side/Express_Nodejs/skeleton_website
---
<div>{{LearnSidebar}}</div>

<p>{{PreviousMenuNext("Learn/Server-side/Express_Nodejs/Tutorial_local_library_website", "Learn/Server-side/Express_Nodejs/mongoose", "Learn/Server-side/Express_Nodejs")}}</p>

<p class="summary">この <a href="/ja/docs/Learn/Server-side/Express_Nodejs/Tutorial_local_library_website">Express チュートリアル</a>の2回目の記事では、どのようにして "スケルトン" Web サイトプロジェクトを作成し、サイト固有のルート、テンプレート/ビュー、およびデータベース呼び出しを追加するかを説明します。</p>

<table class="learn-box standard-table">
 <tbody>
  <tr>
   <th scope="row">前提条件:</th>
   <td><a href="/ja/docs/Learn/Server-side/Express_Nodejs/development_environment">Node 開発環境を設定します</a>。Express チュートリアルを確認してください。</td>
  </tr>
  <tr>
   <th scope="row">目標:</th>
   <td>Express Application Generator を使用して独自の新しい Web サイトプロジェクトを開始できるようにする。</td>
  </tr>
 </tbody>
</table>

<h2 id="概要">概要</h2>

<p>この記事では <a href="https://expressjs.com/ja/starter/generator.html">Express Application Generator</a> ツールを使用して "スケルトン" Web サイトを作成する方法を説明します。このツールには、サイト固有のルート、ビュー/テンプレート、およびデータベース呼び出しを追加できます。この場合は、このツールを使用して<a href="/ja/docs/Learn/Server-side/Express_Nodejs/Tutorial_local_library_website">ローカルライブラリ Web サイト</a>用のフレームワークを作成し、後でそのサイトに必要な他のすべてのコードを追加します。プロセスは非常に単純で、必要に応じてサイトのテンプレートエンジンと CSS ジェネレータを指定して、新しいプロジェクト名を指定してコマンドラインでジェネレータを呼び出すだけです。</p>

<p>次のセクションでは、アプリケーションジェネレータを呼び出す方法を示し、さまざまな ビュー/CSS オプションについて簡単に説明します。また、スケルトン Web サイトの構造についても説明します。最後に、Web サイトを実行してそれが機能することを確認する方法を紹介します。</p>

<div class="note">
<p><span style="line-height: 1.5;"><strong>メモ</strong>: </span>Express アプリケーションジェネレータは、Express アプリケーション用の唯一のジェネレータというわけではありません。また、生成されたプロジェクトはファイルやディレクトリを構造化する唯一実行可能な方法というわけではありません。しかしながら、生成されたサイトは、拡張と理解が容易なモジュール構造を持っています。最小限の Express アプリケーションについては、<a href="https://expressjs.com/ja/starter/hello-world.html">Hello world の例</a> (Express ドキュメント) を参照してください。</p>
</div>

<h2 id="アプリケーションジェネレータを使用する">アプリケーションジェネレータを使用する</h2>

<p><a href="/ja/docs/Learn/Server-side/Express_Nodejs/development_environment">Node 開発環境の設定</a>の一部として、ジェネレータをすでにインストールしているはずです。念のため、NPM パッケージマネージャを使用して、サイト全体にジェネレータツールをインストールします。</p>

<pre class="brush: bash"><code>npm install express-generator -g</code></pre>

<p>ジェネレータにはいくつかのオプションがあり、それらは <code>--help</code> (または <code>-h</code>) コマンドを使用してコマンドラインで表示できます。</p>

<pre class="brush: bash">&gt; express --help

  Usage: express [options] [dir]

  Options:

    -h, --help           output usage information
        --version        output the version number
    -e, --ejs            add ejs engine support
        --pug            add pug engine support
        --hbs            add handlebars engine support
    -H, --hogan          add hogan.js engine support
    -v, --view &lt;engine&gt;  add view &lt;engine&gt; support (ejs|hbs|hjs|jade|pug|twig|vash) (defaults to jade)
    -c, --css &lt;engine&gt;   add stylesheet &lt;engine&gt; support (less|stylus|compass|sass) (defaults to plain css)
        --git            add .gitignore
    -f, --force          force on non-empty directory
</pre>

<p>Jade ビューエンジンとプレーン CSS を使用して、<code>express</code> を指定するだけで現在のディレクトリ内にプロジェクトを作成できます (ディレクトリ名を指定すると、プロジェクトはその名前のサブフォルダに作成されます)。</p>

<pre class="brush: bash"><code>express</code></pre>

<p><code>--view</code> を使用してビュー (テンプレート) エンジンを選択したり、<code>--css</code> を使用して CSS 生成エンジンを選択したりすることもできます。</p>

<div class="note">
<p><strong>メモ:</strong> テンプレートエンジンを選択するためのその他のオプション (<code>--hogan</code>、<code>--ejs</code>、<code>--hbs</code> など) は推奨されません。<code>--view</code> (または <code>-v</code>)を使用してください。</p>
</div>

<h3 id="どのビューエンジンを使うべきですか？">どのビューエンジンを使うべきですか？</h3>

<p>Express Application Generator を使用すると、<a href="https://www.npmjs.com/package/ejs">EJS</a>、<a href="http://github.com/donpark/hbs">Hbs</a>、<a href="https://pugjs.org/api/getting-started.html">Pug</a> (Jade)、<a href="https://www.npmjs.com/package/twig">Twig</a>、<a href="https://www.npmjs.com/package/vash">Vash</a> など、一般的なビュー/テンプレートエンジンを多数設定できます。ただし、ビューオプションを指定しない場合はデフォルトで Jade が選択されます。 Express 自体は、<a href="https://github.com/expressjs/express/wiki#template-engines">一般的な</a>他のテンプレート言語の多くをサポートすることができます。</p>

<div class="note">
<p><strong>メモ:</strong> ジェネレータでサポートされていないテンプレートエンジンを使用したい場合は、<a href="https://expressjs.com/ja/guide/using-template-engines.html">Express でテンプレートエンジンを使用する</a> (Express ドキュメント) およびターゲットビューエンジンのドキュメントを参照してください。</p>
</div>

<p>一般的に、あなたが必要とするすべての機能を提供し、あなたがより早く生産的になることを可能にするテンプレートエンジンを選ぶべきです ー もしくは言い換えれば、同じ方法で、他のコンポーネントを選択するということです。テンプレートエンジンを比較する際に考慮すべき点がいくつかあります。</p>

<ul>
 <li>生産的になるための時間 - あなたのチームがすでにテンプレート言語の経験があるのならlその言語を使うことでより速く生産的になるでしょう。そうでない場合は、候補のテンプレートエンジンの相対的な学習曲線を検討する必要があります</li>
 <li>人気度とアクティビティ - エンジンの人気度と、活発なコミュニティがあるかどうかを確認します。あなたがウェブサイトの生涯にわたって問題を抱えているときにエンジンのサポートを受けることができることが重要です</li>
 <li>スタイル － テンプレートエンジンの中には、"通常の" HTML 内に挿入されたコンテンツを示すために特定のマークアップを使用するものもあれば、別の構文を使用して HTML を構成するものもあります (たとえば、インデントとブロック名を使用)</li>
 <li>パフォーマンス/レンダリング時間</li>
 <li>機能 - あなたが見ているエンジンが利用可能な以下の機能を持っているかどうかを考慮する必要があります。
  <ul>
   <li>レイアウトの継承：ベーステンプレートを定義してから、特定のページに対して異なる部分だけを "継承" することができます。これは通常、必要なコンポーネントを多数含めるか、毎回テンプレートを最初から作成することによってテンプレートを作成するよりも優れた方法です</li>
   <li>"Include" のサポート：他のテンプレートを含めることでテンプレートを構築することを可能にします</li>
   <li>簡潔な変数およびループ制御構文</li>
   <li>テンプレートレベルで変数値をフィルタリングする機能 (例えば、変数を大文字にする、または日付値をフォーマットする)</li>
   <li>HTML 以外の出力フォーマット (JSON や XML など) を生成する機能</li>
   <li>非同期操作とストリーミングのサポート</li>
   <li>サーバだけでなくクライアントでも使用できます。テンプレートエンジンをクライアント上で使用できる場合、これによりデータを提供し、レンダリングの全部または大部分をクライアント側で行うことができます</li>
  </ul>
 </li>
</ul>

<div class="note">
<p><strong>Tip:</strong> インターネット上には、さまざまなオプションを比較するのに役立つ多くのリソースがあります。</p>
</div>

<p>このプロジェクトでは、<a href="https://pugjs.org/api/getting-started.html">Pug</a> テンプレートエンジン (これは最近名前が変更された Jade エンジンです) を使用します。これは最も一般的な Express/JavaScript テンプレート言語の1つで、ジェネレータによってそのままサポートされているためです。</p>

<h3 id="どの_CSS_スタイルシートエンジンを使うべきですか？">どの CSS スタイルシートエンジンを使うべきですか？</h3>

<p>Express Application Generator を使用すると、最も一般的なCSSスタイルシートエンジン (<a href="http://lesscss.org/">LESS</a>、<a href="http://sass-lang.com/">SASS</a>、<a href="http://compass-style.org/">Compass</a>、<a href="http://stylus-lang.com/">Stylus</a>) を使用するように構成されたプロジェクトを作成できます。</p>

<div class="note">
<p><strong>メモ: </strong>CSS にはいくつかの制限があり、特定のタスクを困難にします。CSS スタイルシートエンジンを使用すると、CSS を定義するためのより強力な構文を使用してから、ブラウザで使用するためにその定義を通常の CSS にコンパイルできます。</p>
</div>

<p>テンプレートエンジンと同様に、チームを最も生産的にすることができるスタイルシートエンジンを使用する必要があります。このプロジェクトでは、CSS 要件が他のものを使用することを正当化するのに十分に複雑ではないため、通常のCSS (デフォルト) を使用します。</p>

<h3 id="どのデータベースを使うべきですか？">どのデータベースを使うべきですか？</h3>

<p>生成されたコードはデータベースを一切使用しません。 Express アプリケーションは、Node によってサポートされている任意の<a href="https://expressjs.com/ja/guide/database-integration.html">データベースメカニズム</a>を使用できます (Express自体はデータベース管理のための特定の追加の動作や要件を定義していません)。</p>

<p>データベースと統合する方法については、後の記事で説明します。</p>

<h2 id="プロジェクトを作成する">プロジェクトを作成する</h2>

<p>これから作成するサンプルのローカルライブラリアプリでは、Pug テンプレートライブラリを使用し、CSS スタイルシートエンジンを使用しないで、express-locallibrary-tutorial という名前のプロジェクトを作成します。</p>

<p>まず、プロジェクトを作成する場所に移動し、次に示すようにコマンドプロンプトで Express Application Generator を実行します。</p>

<pre class="brush: bash">express express-locallibrary-tutorial --view=pug
</pre>

<p>ジェネレータはプロジェクトのファイルを作成 (そして一覧表示) します。</p>

<pre class="brush: bash">   create : express-locallibrary-tutorial
   create : express-locallibrary-tutorial/package.json
   create : express-locallibrary-tutorial/app.js
   create : express-locallibrary-tutorial/public/images
   create : express-locallibrary-tutorial/public
   create : express-locallibrary-tutorial/public/stylesheets
   create : express-locallibrary-tutorial/public/stylesheets/style.css
   create : express-locallibrary-tutorial/public/javascripts
   create : express-locallibrary-tutorial/routes
   create : express-locallibrary-tutorial/routes/index.js
   create : express-locallibrary-tutorial/routes/users.js
   create : express-locallibrary-tutorial/views
   create : express-locallibrary-tutorial/views/index.pug
   create : express-locallibrary-tutorial/views/layout.pug
   create : express-locallibrary-tutorial/views/error.pug
   create : express-locallibrary-tutorial/bin
   create : express-locallibrary-tutorial/bin/www

   install dependencies:
     &gt; cd express-locallibrary-tutorial &amp;&amp; npm install

   run the app:
     &gt; SET DEBUG=express-locallibrary-tutorial:* &amp; npm start</pre>

<p>出力の最後に、ジェネレータは依存関係をどのようにインストールするか (<strong>package.json</strong> ファイルにリストされているとおり)、次にアプリケーションを実行する方法についての指示を提供します (上記の手順は Windows 用です。Linux/ macOS では若干異なります)。</p>

<h2 id="スケルトン_Web_サイトを実行する">スケルトン Web サイトを実行する</h2>

<p>これで、完全なスケルトンプロジェクトが完成しました。 ウェブサイトは実際にはそれほど多くは行っていませんが、それがどのように機能するかを示すために実行する価値があります。</p>

<ol>
 <li>まず、依存関係をインストールします (<code>install</code> コマンドはプロジェクトの <strong>package.json</strong> ファイルにリストされているすべての依存関係パッケージを取得します)

  <pre class="brush: bash">cd express-locallibrary-tutorial
npm install</pre>
 </li>
 <li>その後、アプリケーションを実行します
  <ul>
   <li>Windows では、次のコマンドを使用します
    <pre class="brush: bash">SET DEBUG=express-locallibrary-tutorial:* &amp; npm start</pre>
   </li>
   <li>macOS または Linux では、次のコマンドを使用します
    <pre class="brush: bash">DEBUG=express-locallibrary-tutorial:* npm start
</pre>
   </li>
  </ul>
 </li>
 <li>その後、ブラウザに <a href="http://localhost:3000/">http://localhost:3000/</a> をロードしてアプリにアクセスします</li>
</ol>

<p>次のようなブラウザページが表示されるはずです。</p>

<p><img alt="Browser for default Express app generator website" src="https://mdn.mozillademos.org/files/14375/ExpressGeneratorSkeletonWebsite.png" style="display: block; height: 403px; margin: 0px auto; width: 576px;"></p>

<p>自分自身で <em>localhost:3000 </em>に提供している、動作する Express アプリケーションがあります。</p>

<div class="note">
<p><strong>メモ:</strong> <code>npm start</code> コマンドを使用してアプリを起動することもできます。示されているように DEBUG 変数を指定すると、コンソールロギング/デバッグが有効になります。たとえば、上記のページにアクセスすると、次のようなデバッグ出力が表示されます。</p>

<pre class="brush: bash">&gt;SET DEBUG=express-locallibrary-tutorial:* &amp; npm start

&gt; express-locallibrary-tutorial@0.0.0 start D:\express-locallibrary-tutorial
&gt; node ./bin/www

  express-locallibrary-tutorial:server Listening on port 3000 +0ms
GET / 200 288.474 ms - 170
GET /stylesheets/style.css 200 5.799 ms - 111
GET /favicon.ico 404 34.134 ms - 1335</pre>
</div>

<h2 id="ファイルの変更時にサーバの再起動を有効にする">ファイルの変更時にサーバの再起動を有効にする</h2>

<p>Express Web サイトに加えた変更は、現在のサーバを再起動するまで表示されません。変更を加えるたびにサーバを停止して再起動する必要があることはすぐに非常に苛立たしいものになるため、必要に応じてサーバの再起動を自動化することに時間をかける価値があります。</p>

<p>この目的のための最も簡単なツールの1つが <a href="https://github.com/remy/nodemon">nodemon</a> です。 これは通常 "ツール" としてグローバルにインストールされますが、ここでは開発者の依存関係としてローカルにインストールして使用するので、プロジェクトを操作する開発者はアプリケーションをインストールするときに自動的に取得されます。スケルトンプロジェクトのルートディレクトリで次のコマンドを使用します。</p>

<pre class="brush: bash">npm install --save-dev nodemon</pre>

<p>プロジェクトの <strong>package.json</strong> ファイルだけでなく、自分のマシンにグローバルに <a href="https://github.com/remy/nodemon">nodemon</a> をインストールする場合は、次のようにします。</p>

<pre class="brush: bash">npm install -g nodemon</pre>

<p>プロジェクトの <strong>package.json</strong> ファイルを開くと、この依存関係を持つ新しいセクションが表示されます。</p>

<pre class="brush: json">  "devDependencies": {
    "nodemon": "^1.14.11"
  }
</pre>

<p>このツールはグローバルにはインストールされていないので (パスに追加しない限り) コマンドラインから起動することはできませんが、NPM はインストールされているパッケージをすべて知っているので、NPM スクリプトから呼び出すことができます。package.json の <code>scripts</code> セクションを見つけます。最初は <code>"start"</code> で始まる1行が含まれています。その行の末尾にカンマを入れて、以下に見られる <code>"devstart"</code> 行を追加することによってそれを更新します。</p>

<pre class="brush: json">  "scripts": {
    "start": "node ./bin/www"<strong>,</strong>
<strong>    "devstart": "nodemon ./bin/www"</strong>
  },
</pre>

<p><code>devstart</code> コマンドを指定して、以前とほぼ同じ方法でサーバーを起動することができます。</p>

<ul>
 <li>Windows では、次のコマンドを使用してください
  <pre class="brush: bash">SET DEBUG=express-locallibrary-tutorial:* &amp; npm <strong>run devstart</strong></pre>
 </li>
 <li>macOS または Linux では、次のコマンドを使用してください
  <pre class="brush: bash">DEBUG=express-locallibrary-tutorial:* npm <strong>run devstart</strong>
</pre>
 </li>
</ul>

<div class="note">
<p><strong>メモ:</strong> プロジェクト内のファイルを編集した場合は、サーバが再起動します (またはコマンドプロンプトで <code>rs</code> と入力していつでも再起動できます)。あなたはまだページを更新するためにブラウザを再読み込みする必要があるでしょう。</p>

<p>"start" は実際には名前付きスクリプトにマップされた NPM コマンドなので、ここでは単に <code>npm start</code> ではなく  "<code>npm run <em>&lt;scriptname&gt;</em></code>" を呼び出す必要があります。起動スクリプトのコマンドを置き換えることもできますが、開発中は nodemon を使用するだけなので、新しいスクリプトコマンドを作成するのが理にかなっています。</p>
</div>

<h2 id="生成されたプロジェクト">生成されたプロジェクト</h2>

<p>今作成したプロジェクトを見てみましょう。</p>

<h3 id="ディレクトリ構造">ディレクトリ構造</h3>

<p>生成されたプロジェクトは、依存関係をインストールしたので、次のようなファイル構造になります (ファイルは "/" が前に付いて<strong>いない</strong>項目です)。<strong>package.json</strong> ファイルは、アプリケーションの依存関係とその他の情報を定義します。また、アプリケーションのエントリポイントである JavaScript ファイル <strong>/bin/www</strong> を呼び出す起動スクリプトも定義されています。これにより、アプリケーションのエラー処理がいくつか設定され、その後 <strong>app.js</strong> が読み込まれて残りの作業が行われます。 アプリのルートは <strong>routes/</strong> ディレクトリの下の別々のモジュールに格納されています。 テンプレートは /<strong>views</strong> ディレクトリの下に格納されています。</p>

<pre>/express-locallibrary-tutorial
    <strong>app.js</strong>
    /bin
        <strong>www</strong>
    <strong>package.json</strong>
    /node_modules
        [about 4,500 subdirectories and files]
    /public
        /images
        /javascripts
        /stylesheets
            <strong>style.css</strong>
    /routes
        <strong>index.js</strong>
        <strong>users.js</strong>
    /views
        <strong>error.pug</strong>
        <strong>index.pug</strong>
        <strong>layout.pug</strong>

</pre>

<p>次のセクションでは、ファイルについてもう少し詳しく説明します。</p>

<h3 id="package.json">package.json</h3>

<p><strong>package.json </strong>ファイルは、アプリケーションの依存関係とその他の情報を定義します。</p>

<pre class="brush: json">{
  "name": "express-locallibrary-tutorial",
  "version": "0.0.0",
  "private": true,
  "scripts": {
    "start": "node ./bin/www",
    "devstart": "nodemon ./bin/www"
  },
  "dependencies": {
    "cookie-parser": "~1.4.3",
    "debug": "~2.6.9",
    "express": "~4.16.2",
    "morgan": "~1.9.0",
    "pug": "~2.0.0-rc.4",
    "serve-favicon": "~2.4.5"
  },
  "devDependencies": {
    "nodemon": "^1.14.11"
  }
}
</pre>

<p>依存関係には、express パッケージと選択したビューエンジン (pug) 用のパッケージが含まれます。さらに、多くの Web アプリケーションで役立つ次のパッケージがあります。</p>

<ul>
 <li><a href="https://www.npmjs.com/package/cookie-parser">cookie-parser</a>: Cookie ヘッダーを解析し、<code>req.cookies</code> を生成するために使用されます (基本的に Cookie 情報にアクセスするための便利な方法を提供します)</li>
 <li><a href="https://www.npmjs.com/package/debug">debug</a>: 小さなノードデバッグユーティリティは、Node コアのデバッグ技術をモデルにしています</li>
 <li><a href="https://www.npmjs.com/package/morgan">morgan</a>: Node 用の HTTP リクエストロガーミドルウェア</li>
 <li><a href="https://www.npmjs.com/package/serve-favicon">serve-favicon</a>: <a href="https://ja.wikipedia.org/wiki/Favicon">ファビコン</a>を提供するためのノードミドルウェア (これはブラウザタブ内のサイト、ブックマークなどを表すために使用されるアイコンです)</li>
</ul>

<p>scripts セクションは "start" スクリプトを定義します。これは、<code>npm start</code> を呼び出してサーバを起動するときに呼び出すスクリプトです。スクリプトの定義から、これは実際に JavaScript ファイル <strong>./bin/www</strong> with node を開始することがわかります。また、"devstart" スクリプトも定義しています。これは、代わりに <code>npm run devstart</code> を呼び出すときに呼び出されます。これは同じ <strong>./bin/www</strong> ファイルを開始しますが、node ではなく nodemon を使用します。</p>

<pre class="brush: json">  "scripts": {
    "start": "node ./bin/www",
    "devstart": "nodemon ./bin/www"
  },
</pre>

<h3 id="www_ファイル">www ファイル</h3>

<p>ファイル <strong>/bin/www</strong> がアプリケーションのエントリポイントです。 これが最初に行うことは、<code><a href="http://expressjs.com/ja/api.html">express()</a></code> アプリケーションオブジェクトを設定して返す "本物の" アプリケーションエントリポイント (プロジェクトルート内の <strong>app.js</strong>) である<code>require()</code> です。</p>

<pre class="brush: js">#!/usr/bin/env node

/**
 * Module dependencies.
 */

<strong>var app = require('../app');</strong>
</pre>

<div class="note">
<p><strong>メモ:</strong> <code>require()</code> は、現在のファイルにモジュールをインポートするために使われるグローバル Node 関数です。 ここでは相対パスを使用し、オプションの (.<strong>js</strong>) ファイル拡張子を省略して <strong>app.js</strong> モジュールを指定します。</p>
</div>

<p>このファイルのコードの残りの部分では、特定のポート (環境変数で定義されているか、変数が定義されていない場合は 3000 で定義されている) に設定された <code>app</code> を使用してNode HTTP サーバをセットアップします。 今のところ、コードについて他に何も知る必要はありません (このファイル内のすべてが "定型句" です) が、興味があればお気軽にレビューしてください。</p>

<h3 id="app.js">app.js</h3>

<p>このファイルは、<code>express</code> アプリケーションオブジェクト (慣例では <code>app</code> という名前) を作成し、さまざまな設定とミドルウェアを使用してアプリケーションを設定してから、モジュールからアプリケーションをエクスポートします。以下のコードは、アプリオブジェクトを作成およびエクスポートするファイルの一部だけを示しています。</p>

<pre class="brush: js"><code>var express = require('express');
var app = express();
...
</code>module.exports = app;
</pre>

<p>上記の <strong>www</strong> エントリポイントファイルに戻ると、このファイルがインポートされたときに呼び出し元に渡されるのは、この <code>module.exports</code> オブジェクトです。</p>

<p><strong>app.js</strong> ファイルを詳しく見ていきましょう。まず、NPM を使用してアプリケーション用に以前にダウンロードしたexpress、serve-favicon、morgan、cookie-parser など、<code>require()</code> を使用していくつかの便利な Node ライブラリをファイルにインポートします。path は、ファイルとディレクトリのパスを解析するためのコア Node ライブラリです。</p>

<pre class="brush: js">var express = require('express');
var path = require('path');
var favicon = require('serve-favicon');
var logger = require('morgan');
var cookieParser = require('cookie-parser');
</pre>

<p>それからroutesディレクトリから <code>require()</code> モジュールを呼び出します。これらのモジュール/ファイルには、関連する "ルート" (URL パス) の特定のセットを処理するためのコードが含まれています。たとえばライブラリ内のすべての本をリストするためにスケルトンアプリケーションを拡張するときは、本関連のルートを処理するための新しいファイルを追加します。</p>

<pre class="brush: js">var indexRouter = require('./routes/index');
var usersRouter = require('./routes/users');
</pre>

<div class="note">
<p><strong>メモ:</strong> この時点で、モジュールをインポートしたばかりです。 実際にはまだそのルートを使用していません (これはファイルの少し下まで行われます)。</p>
</div>

<p>次に、インポートした Express モジュールを使ってアプリオブジェクトを作成し、それを使ってビュー (テンプレート) エンジンを設定します。エンジンの設定には2つの部分があります。まず、 '<code>views</code>' の値を設定して、テンプレートが保存されるフォルダを指定します (この場合はサブフォルダの <strong>/views</strong>)。それから '<code>view engine</code>' の値を設定してテンプレートライブラリ (この場合は "pug") を指定します。</p>

<pre class="brush: js">var app = express();

// view engine setup
app.set('views', path.join(__dirname, 'views'));
app.set('view engine', 'pug');
</pre>

<p>次の一連の関数は <code>app.use()</code> を呼び出してミドルウェアライブラリをリクエスト処理チェーンに追加します。以前インポートしたサードパーティのライブラリに加えて、Express がプロジェクトルートの <strong>/public</strong> ディレクトリにあるすべての静的ファイルを処理するようにするために、<code>express.static</code> ミドルウェアを使用します。</p>

<pre class="brush: js">// uncomment after placing your favicon in /public
//app.use(favicon(path.join(__dirname, 'public', 'favicon.ico')));
app.use(logger('dev'));
app.use(express.json());
app.use(express.urlencoded({ extended: false }));
app.use(cookieParser());
<strong>app.use(express.static(path.join(__dirname, 'public')));</strong>
</pre>

<p>他のすべてのミドルウェアがセットアップされたので、(以前にインポートした) ルート処理コードをリクエスト処理チェーンに追加します。 インポートされたコードは、サイトのさまざまな部分に特定のルートを定義します。</p>

<pre class="brush: js">app.use('/', indexRouter);
app.use('/users', usersRouter);
</pre>

<div class="note">
<p><strong>メモ:</strong> 上記で指定されたパス ('/' と '<code>/users'</code>) は、インポートされたファイルで定義されているルートの接頭辞として扱われます。たとえば、インポートされたユーザーモジュールが <code>/profile</code> のルートを定義している場合は、<code>/users/profile</code> でそのルートにアクセスします。 ルートの詳細については後の記事で説明します。</p>
</div>

<p>ファイルの最後のミドルウェアは、エラーと HTTP 404 レスポンス用のハンドラメソッドを追加します。</p>

<pre class="brush: js">// catch 404 and forward to error handler
app.use(function(req, res, next) {
  var err = new Error('Not Found');
  err.status = 404;
  next(err);
});

// error handler
app.use(function(err, req, res, next) {
  // set locals, only providing error in development
  res.locals.message = err.message;
  res.locals.error = req.app.get('env') === 'development' ? err : {};

  // render the error page
  res.status(err.status || 500);
  res.render('error');
});
</pre>

<p>Express アプリケーションオブジェクト (app) が完全に設定されました。最後のステップはそれをモジュールのエクスポートに追加することです (これは <strong>/bin/www</strong> によってインポートされることを可能にするものです)。</p>

<pre class="brush: js">module.exports = app;</pre>

<h3 id="ルート">ルート</h3>

<p>ルートファイル <strong>/routes/users.js</strong> を以下に示します (ルートファイルは同様の構造を共有しているので、<strong>index.js</strong> も表示する必要はありません)。まず、express モジュールをロードし、それを使って <code>express.Router</code> オブジェクトを取得します。それからそのオブジェクトのルートを指定し、最後にモジュールからルーターをエクスポートします (これがファイルが <strong>app.js</strong> にインポートされることを可能にするものです)。</p>

<pre class="brush: js">var express = require('express');
var router = express.Router();

/* GET users listing. */
<strong>router.get('/', function(req, res, next) {
  res.send('respond with a resource');
});</strong>

module.exports = router;
</pre>

<p>このルートは、正しいパターンの HTTP <code>GET</code> リクエストが検出されたときに必ず呼び出されるコールバックを定義します。一致パターンは、モジュールのインポート時に指定された経路 ('<code>/users</code>') と、このファイルで定義されているもの ('<code>/</code>') です。 つまり、このルートは <code>/users/</code> の URL が受信されたときに使用されます。</p>

<div class="note">
<p><strong>Tip:</strong> これを試すには、node を使用してサーバを実行し、ブラウザの URL (<a href="http://localhost:3000/users/">http://localhost:3000/users/</a>) にアクセスしてください。「リソースで応答してください」というメッセージが表示されます。</p>
</div>

<p>上記の関心事の1つは、コールバック関数が3番目の引数 '<code>next</code>' を持ち、したがって単純なルートコールバックではなくミドルウェア関数であることです。このコードでは現在 <code>next</code> 引数を使用していませんが、<code>'/'</code> ルートパスに複数のルートハンドラを追加したい場合、将来的には役に立つかもしれません。</p>

<h3 id="ビュー_(テンプレート)">ビュー (テンプレート)</h3>

<p>ビュー (テンプレート) は <strong>/views</strong> ディレクトリ (<strong>app.js</strong> で指定されている) に保存され、ファイル拡張子 <strong>.pug</strong> が与えられます。<code><a href="http://expressjs.com/ja/4x/api.html#res.render">Response.render()</a></code> メソッドは、オブジェクトに渡された名前付き変数の値とともに指定されたテンプレートをレンダリングし、その結果をレスポンスとして送信するために使用されます。以下の <strong>/routes/index.js</strong> のコードでは、テンプレート変数 "title" を渡した "index" テンプレートを使用して、そのルートがどのようにレスポンスをレンダリングするかを確認できます。</p>

<pre class="brush: js">/* GET home page. */
router.get('/', function(req, res) {
  res.render('index', { title: 'Express' });
});
</pre>

<p>上記のルートに対応するテンプレートを以下に示します(<strong>index.pug</strong>)。構文については後で詳しく説明します。今のところ知る必要があるのは、(変数 <code>'Express'</code> を持つ) <code>title</code>変数がテンプレートの指定された場所に挿入されることだけです。</p>

<pre>extends layout

block content
  h1= title
  p Welcome to #{title}
</pre>

<h2 id="自分自身で挑戦">自分自身で挑戦</h2>

<p><strong>/routes/users.js</strong> に新しいルートを作成し、URL <code>/users/cool/</code> に "You're so cool" というテキストを表示します。 サーバーを実行し、ブラウザで <a href="http://localhost:3000/users/cool/">http://localhost:3000/users/cool/</a> にアクセスしてテストしてください。</p>

<ul>
</ul>

<h2 id="まとめ">まとめ</h2>

<p>これで、<a href="/ja/docs/Learn/Server-side/Express_Nodejs/Tutorial_local_library_website">ローカルライブラリ</a>用のスケルトン Web サイトプロジェクトを作成し、それが Node を使用して実行されることを確認しました。最も重要なのは、プロジェクトの構造も理解しているので、ローカルライブラリのルートとビューを追加するために変更を加える必要がある場所をよく理解していることです。</p>

<p>次に、図書館の Web サイトとして機能するようにスケルトンを変更します。</p>

<h2 id="あわせて参照">あわせて参照</h2>

<ul>
 <li><a href="https://expressjs.com/en/starter/generator.html">Express application generator</a> (Express ドキュメント)</li>
 <li><a href="https://expressjs.com/en/guide/using-template-engines.html">Using template engines with Express</a> (Express ドキュメント)</li>
</ul>

<p>{{PreviousMenuNext("Learn/Server-side/Express_Nodejs/Tutorial_local_library_website", "Learn/Server-side/Express_Nodejs/mongoose", "Learn/Server-side/Express_Nodejs")}}</p>

<h2 id="このモジュール">このモジュール</h2>

<ul>
 <li><a href="https://developer.mozilla.org/ja/docs/Learn/Server-side/Express_Nodejs/Introduction">Express/Node のイントロダクション</a></li>
 <li><a href="https://developer.mozilla.org/ja/docs/Learn/Server-side/Express_Nodejs/development_environment">Node 開発環境の設定</a></li>
 <li><a href="https://developer.mozilla.org/ja/docs/Learn/Server-side/Express_Nodejs/Tutorial_local_library_website">Express チュートリアル: 地域図書館の Web サイト</a></li>
 <li><a href="https://developer.mozilla.org/ja/docs/Learn/Server-side/Express_Nodejs/skeleton_website">Express チュートリアル Part 2: スケルトン Web サイトの作成</a></li>
 <li><a href="https://developer.mozilla.org/ja/docs/Learn/Server-side/Express_Nodejs/mongoose">Express チュートリアル Part 3: データベースを使う (Mongoose を使用)</a></li>
 <li><a href="https://developer.mozilla.org/ja/docs/Learn/Server-side/Express_Nodejs/routes">Express チュートリアル Part 4: ルートとコントローラ</a></li>
 <li><a href="https://developer.mozilla.org/ja/docs/Learn/Server-side/Express_Nodejs/Displaying_data">Express チュートリアル Part 5: ライブラリデータの表示</a></li>
 <li><a href="https://developer.mozilla.org/ja/docs/Learn/Server-side/Express_Nodejs/forms">Express チュートリアル Part 6: フォームの操作</a></li>
 <li><a href="https://developer.mozilla.org/ja/docs/Learn/Server-side/Express_Nodejs/deployment">Express チュートリアル Part 7: プロダクションへのデプロイ</a></li>
</ul>