initial commit

23 files changed, 5371 insertions, 0 deletions

diff --git a/files/ja/learn/server-side/express_nodejs/deployment/index.html b/files/ja/learn/server-side/express_nodejs/deployment/index.html
new file mode 100644
index 0000000000..6f8b60f094
--- /dev/null
+++ b/files/ja/learn/server-side/express_nodejs/deployment/index.html
@@ -0,0 +1,525 @@
+---
+title: 'Express チュートリアル Part 7: プロダクションへのデプロイ'
+slug: Learn/Server-side/Express_Nodejs/deployment
+tags:
+  - CodingScripting
+  - Express
+  - Node
+  - heroku
+  - サーバサイド
+  - デプロイ
+  - 初心者
+  - 学習
+translation_of: Learn/Server-side/Express_Nodejs/deployment
+---
+<div>{{LearnSidebar}}</div>
+
+<div>{{PreviousMenu("Learn/Server-side/Express_Nodejs/forms", "Learn/Server-side/Express_Nodejs")}}</div>
+
+<p class="summary">これで素晴らしい<a href="/ja/docs/Learn/Server-side/Express_Nodejs/Tutorial_local_library_website">地域図書館</a> Web サイトを作成 (およびテスト) したので、公共の Web サーバーにインストールして、図書館のスタッフとメンバーがインターネット経由でアクセスできるようにします。この記事では Web サイトをデプロイするためのホストを見つける方法、およびサイトを運用に向けて準備するために必要な作業の概要について説明します。</p>
+
+<table class="learn-box standard-table">
+ <tbody>
+  <tr>
+   <th scope="row">前提条件:</th>
+   <td><a href="/ja/docs/Learn/Server-side/Express_Nodejs/forms">Express チュートリアル Part 6: フォームの操作</a>を含む、これまでのチュートリアルのトピックをすべて完了してください。</td>
+  </tr>
+  <tr>
+   <th scope="row">目標:</th>
+   <td>Express アプリケーションをプロダクションにデプロイする場所と方法を学ぶ。</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Overview">Overview</h2>
+
+<p>Once your site is finished (or finished "enough" to start public testing) you're going to need to host it somewhere more public and accessible than your personal development computer.</p>
+
+<p>Up to now, you've been working in a <a href="/en-US/docs/Learn/Server-side/Express_Nodejs/development_environment">development environment</a>, using Express/Node as a web server to share your site to the local browser/network, and running your website with (insecure) development settings that expose debugging and other private information. Before you can host a website externally you're first going to have to:</p>
+
+<ul>
+ <li>Choose an environment for hosting the Express app.</li>
+ <li>Make a few changes to your project settings.</li>
+ <li>Set up a production-level infrastructure for serving your website.</li>
+</ul>
+
+<p>This tutorial provides some guidance on your options for choosing a hosting site, a brief overview of what you need to do in order to get your Express app ready for production, and a worked example of how to install the LocalLibrary website onto the <a href="https://www.heroku.com/">Heroku</a> cloud hosting service.</p>
+
+<p>Bear in mind that you don't have to use Heroku — there are other hosting services available. We've also provided a separate tutorial to show how to <a href="/en-US/docs/Learn/Server-side/Express_Nodejs/Installing_on_PWS_Cloud_Foundry">Install LocalLibrary on PWS/Cloud Foundry</a>.</p>
+
+<h2 id="What_is_a_production_environment">What is a production environment?</h2>
+
+<p>The production environment is the environment provided by the server computer where you will run your website for external consumption. The environment includes:</p>
+
+<ul>
+ <li>Computer hardware on which the website runs.</li>
+ <li>Operating system (e.g. Linux or Windows).</li>
+ <li>Programming language runtime and framework libraries on top of which your website is written.</li>
+ <li>Web server infrastructure, possibly including a web server, reverse proxy, load balancer, etc.</li>
+ <li>Databases on which your website is dependent.</li>
+</ul>
+
+<p>The server computer could be located on your premises and connected to the Internet by a fast link, but it is far more common to use a computer that is hosted "in the cloud". What this actually means is that your code is run on some remote computer (or possibly a "virtual" computer) in your hosting company's data center(s). The remote server will usually offer some guaranteed level of computing resources (e.g. CPU, RAM, storage memory, etc.) and Internet connectivity for a certain price.</p>
+
+<p>This sort of remotely accessible computing/networking hardware is referred to as <em>Infrastructure as a Service (IaaS)</em>. Many IaaS vendors provide options to preinstall a particular operating system, onto which you must install the other components of your production environment. Other vendors allow you to select more fully-featured environments, perhaps including a complete Node setup.</p>
+
+<div class="note">
+<p><strong>Note:</strong> Pre-built environments can make setting up your website very easy because they reduce the configuration, but the available options may limit you to an unfamiliar server (or other components) and may be based on an older version of the OS. Often it is better to install components yourself so that you get the ones that you want, and when you need to upgrade parts of the system, you have some idea of where to start!</p>
+</div>
+
+<p>Other hosting providers support Express as part of a <em>Platform as a Service</em> (<em>PaaS</em>) offering. When using this sort of hosting you don't need to worry about most of your production environment (servers, load balancers, etc.) as the host platform takes care of those for you. That makes deployment quite easy because you just need to concentrate on your web application and not any other server infrastructure.</p>
+
+<p>Some developers will choose the increased flexibility provided by IaaS over PaaS, while others will appreciate the reduced maintenance overhead and easier scaling of PaaS. When you're getting started, setting up your website on a PaaS system is much easier, so that is what we'll do in this tutorial.</p>
+
+<div class="note">
+<p><strong>Tip:</strong> If you choose a Node/Express-friendly hosting provider they should provide instructions on how to set up an Express website using different configurations of web server, application server, reverse proxy, etc. For example, there are many step-by-step guides for various configurations in the <a href="https://www.digitalocean.com/community/tutorials?q=node">Digital Ocean Node community docs</a>.</p>
+</div>
+
+<h2 id="Choosing_a_hosting_provider">Choosing a hosting provider</h2>
+
+<p>There are numerous hosting providers that are known to either actively support or work well with <em>Node</em> (and <em>Express</em>). These vendors provide different types of environments (IaaS, PaaS), and different levels of computing and network resources at different prices.</p>
+
+<div class="note">
+<p><strong>Tip:</strong> There are a lot of hosting solutions, and their services and pricing can change over time. While we introduce a few options below, it is worth performing your own Internet search before selecting a hosting provider.</p>
+</div>
+
+<p>Some of the things to consider when choosing a host:</p>
+
+<ul>
+ <li>How busy your site is likely to be and the cost of data and computing resources required to meet that demand.</li>
+ <li>Level of support for scaling horizontally (adding more machines) and vertically (upgrading to more powerful machines) and the costs of doing so.</li>
+ <li>Where the supplier has data centers, and hence where access is likely to be the fastest.</li>
+ <li>The host's historical uptime and downtime performance.</li>
+ <li>Tools provided for managing the site — are they easy to use and are they secure (e.g. SFTP vs FTP).</li>
+ <li>Inbuilt frameworks for monitoring your server.</li>
+ <li>Known limitations. Some hosts will deliberately block certain services (e.g. email). Others offer only a certain number of hours of "live time" in some price tiers, or only offer a small amount of storage.</li>
+ <li>Additional benefits. Some providers will offer free domain names and support for SSL certificates that you would otherwise have to pay for.</li>
+ <li>Whether the "free" tier you're relying on expires over time, and whether the cost of migrating to a more expensive tier means you would have been better off using some other service in the first place!</li>
+</ul>
+
+<p>The good news when you're starting out is that there are quite a few sites that provide computing environments for "free", albeit with some conditions. For example, <a href="https://www.heroku.com/">Heroku</a> provides a free but resource-limited <em>PaaS</em> environment "forever", while <a href="http://docs.aws.amazon.com/awsaccountbilling/latest/aboutv2/billing-free-tier.html">Amazon Web Services</a>, <a href="https://azure.microsoft.com/en-us/pricing/details/app-service/">Microsoft Azure</a>, and the open source option <a href="/en-US/docs/Learn/Server-side/Express_Nodejs/Installing_on_PWS_Cloud_Foundry">PWS/Cloud Foundry</a> provide free credit when you first join.</p>
+
+<p>Many providers also have a "basic" tier that provides more useful levels of computing power and fewer limitations. <a href="https://www.digitalocean.com/">Digital Ocean</a> is an example of a popular hosting provider that offers a relatively inexpensive basic computing tier (in the $5 per month lower range at time of writing).</p>
+
+<div class="note">
+<p><strong>Note:</strong> Remember that price is not the only selection criterion. If your website is successful, it may turn out that scalability is the most important consideration.</p>
+</div>
+
+<h2 id="Getting_your_website_ready_to_publish">Getting your website ready to publish</h2>
+
+<p>The main things to think about when publishing your website are web security and performance. At the bare minimum, you will want to remove the stack traces that are included on error pages during development, tidy up your logging, and set the appropriate headers to avoid many common security threats.</p>
+
+<p>In the following subsections, we outline the most important changes that you should make to your app.</p>
+
+<div class="note">
+<p><strong>Tip:</strong> There are other useful tips in the Express docs — see <a href="https://expressjs.com/en/advanced/best-practice-performance.html">Production best practices: performance and reliability</a> and <a href="https://expressjs.com/en/advanced/best-practice-security.html">Production Best Practices: Security</a>.</p>
+</div>
+
+<h3 id="Set_NODE_ENV_to_'production'">Set NODE_ENV to 'production'</h3>
+
+<p>We can remove stack traces in error pages by setting the <code>NODE_ENV</code> environment variable to <em>production</em> (it is set to '<em>development</em>' by default). In addition to generating less-verbose error messages, setting the variable to <em>production</em> caches view templates and CSS files generated from CSS extensions. Tests indicate that setting <code>NODE_ENV</code> to <em>production</em> can improve app performance by a factor of three!</p>
+
+<p>This change can be made either by using export or an environment file or using the OS initialization system.  </p>
+
+<div class="note">
+<p><strong>Note:</strong> This is actually a change you make in your environment setup rather than your app, but important enough to note here! We'll show how this is set for our hosting example below. </p>
+</div>
+
+<h3 id="Log_appropriately">Log appropriately</h3>
+
+<p>Logging calls can have an impact on a high-traffic website. In a production environment, you may need to log website activity (e.g. tracking traffic or logging API calls) but you should attempt to minimize the amount of logging added for debugging purposes.</p>
+
+<p>One way to minimize "debug" logging in production is to use a module like <a href="https://www.npmjs.com/package/debug">debug </a>that allows you to control what logging is performed by setting an environment variable. For example, the code fragment below shows how you might set up "author" logging. The debug variable is declared with the name 'author', and the prefix "author" will be automatically displayed for all logs from this object.</p>
+
+<pre class="brush: js"><strong>var debug = require('debug')('author');</strong>
+
+// Display Author update form on GET
+exports.author_update_get = function(req, res, next) {
+
+    req.sanitize('id').escape().trim();
+    Author.findById(req.params.id, function(err, author) {
+        if (err) {
+<strong>            debug('update error:' + err);</strong>
+            return next(err);
+        }
+        //On success
+        res.render('author_form', { title: 'Update Author', author: author });
+    });
+
+};</pre>
+
+<p>You can then enable a particular set of logs by specifying them as a comma-separated list in the <code>DEBUG</code> environment variable. You can set the variables for displaying author and book logs as shown (wildcards are also supported).</p>
+
+<pre class="brush: bash">#Windows
+set DEBUG=author,book
+
+#Linux
+export DEBUG="author,book"
+</pre>
+
+<div class="note">
+<p><strong>Challenge:</strong> Calls to <code>debug</code> can replace logging you might previously have done using <code>console.log()</code> or <code>console.error()</code>. Replace any <code>console.log()</code> calls in your code with logging via the <a href="https://www.npmjs.com/package/debug">debug </a>module. Turn the logging on and off in your development environment by setting the DEBUG variable and observe the impact this has on logging.</p>
+</div>
+
+<p>If you need to log website activity you can use a logging library like <em>Winston</em> or <em>Bunyan</em>. For more information on this topic see: <a href="https://expressjs.com/en/advanced/best-practice-performance.html">Production best practices: performance and reliability</a>.</p>
+
+<h3 id="Use_gzipdeflate_compression_for_responses">Use gzip/deflate compression for responses</h3>
+
+<p>Web servers can often compress the HTTP response sent back to a client, significantly reducing the time taken to for the client to get and load the page. The compression method used will depend on what decompression methods the client says that it supports in the request (if no compression methods are supported the response will be sent uncompressed).</p>
+
+<p>You can add this to your site using <a href="https://www.npmjs.com/package/compression">compression</a> middleware. Install this to your project by running the following command at the root of the project.</p>
+
+<pre class="brush: bash">npm install compression</pre>
+
+<p>Open <strong>./app.js</strong> and require the compression library as shown. Add the compression library to the middleware chain with the <code>use()</code> method (this should appear before any routes that you want compressed — in this case, all of them!)</p>
+
+<pre class="brush: js">var catalogRouter = require('./routes/catalog'); //Import routes for "catalog" area of site
+<strong>var compression = require('compression');</strong>
+
+// Create the Express application object
+var app = express();
+
+...
+
+<strong>app.use(compression()); //Compress all routes</strong>
+
+app.use(express.static(path.join(__dirname, 'public')));
+
+app.use('/', indexRouter);
+app.use('/users', usersRouter);
+app.use('/catalog', catalogRouter);  // Add catalog routes to middleware chain.
+
+...
+</pre>
+
+<div class="note">
+<p><strong>Note</strong>: For a high-traffic website in production you wouldn't use this middleware. Instead, you would use a reverse proxy like <em>Nginx</em>.</p>
+</div>
+
+<h3 id="Use_Helmet_to_protect_against_well_known_vulnerabilities">Use Helmet to protect against well known vulnerabilities</h3>
+
+<p><a href="https://www.npmjs.com/package/helmet">Helmet</a> is a middleware package that can help protect your app from some well-known web vulnerabilities by setting appropriate HTTP headers (see the <a href="https://helmetjs.github.io/docs/">docs</a> for more information on what headers it sets/vulnerabilities it protects against). </p>
+
+<p>Install this to your project by running the following command at the root of the project.</p>
+
+<pre class="brush: bash">npm install helmet
+</pre>
+
+<p>Open <strong>./app.js</strong> and require the <em>helmet</em> library as shown. Then add the module to the middleware chain with the <code>use()</code> method.</p>
+
+<pre class="brush: js">var compression = require('compression');
+<strong>var helmet = require('helmet');
+</strong>
+// Create the Express application object
+var app = express();
+
+<strong>app.use(helmet())</strong>;
+...</pre>
+
+<div class="note">
+<p id="production-best-practices-performance-and-reliability"><strong>Note:</strong> The command above adds the <em>subset</em> of available headers that makes sense for most sites. You can add/disable specific headers as needed by following the instructions on <a href="https://www.npmjs.com/package/helmet">npm</a>.</p>
+</div>
+
+<h2 id="Example_Installing_LocalLibrary_on_Heroku">Example: Installing LocalLibrary on Heroku</h2>
+
+<p>This section provides a practical demonstration of how to install <em>LocalLibrary</em> on the <a href="http://heroku.com">Heroku PaaS cloud</a>.</p>
+
+<h3 id="Why_Heroku">Why Heroku?</h3>
+
+<p>Heroku is one of the longest-running and popular cloud-based PaaS services. It originally supported only Ruby apps, but now can be used to host apps from many programming environments, including Node (and hence Express)!</p>
+
+<p>We are choosing to use Heroku for several reasons:</p>
+
+<ul>
+ <li>Heroku has a <a href="https://www.heroku.com/pricing">free tier</a> that is <em>really</em> free (albeit with some limitations).</li>
+ <li>As a PaaS, Heroku takes care of a lot of the web infrastructure for us. This makes it much easier to get started because you don't worry about servers, load balancers, reverse proxies, restarting your website on a crash, or any of the other web infrastructure that Heroku provides for us under the hood.</li>
+ <li>While it does have some limitations, these will not affect this particular application. For example:
+  <ul>
+   <li>Heroku provides only short-lived storage so user-uploaded files cannot safely be stored on Heroku itself.</li>
+   <li>The free tier will sleep an inactive web app if there are no requests within a half hour period. The site may then take several seconds to respond when it is woken up.</li>
+   <li>The free tier limits the time that your site is running to a certain amount of hours every month (not including the time that the site is "asleep"). This is fine for a low use/demonstration site, but will not be suitable if 100% uptime is required.</li>
+   <li>Other limitations are listed in <a href="https://devcenter.heroku.com/articles/limits">Limits</a> (Heroku docs).</li>
+  </ul>
+ </li>
+ <li>Mostly it just works, and if you end up loving it and want to upgrade, scaling your app is very easy.</li>
+</ul>
+
+<p>While Heroku is perfect for hosting this demonstration it may not be perfect for your real website. Heroku makes things easy to set up and scale, at the cost of being less flexible, and potentially a lot more expensive once you get out of the free tier.</p>
+
+<h3 id="How_does_Heroku_work">How does Heroku work?</h3>
+
+<p>Heroku runs websites within one or more "<a href="https://devcenter.heroku.com/articles/dynos">Dynos</a>", which are isolated, virtualized Unix containers that provide the environment required to run an application. The dynos are completely isolated and have an <em>ephemeral</em> file system (a short-lived file system that is cleaned/emptied every time the dyno restarts). The only thing that dynos share by default are application <a href="https://devcenter.heroku.com/articles/config-vars">configuration variables</a>. Heroku internally uses a load balancer to distribute web traffic to all "web" dynos. Since nothing is shared between them, Heroku can scale an app horizontally by adding more dynos (though of course, you may also need to scale your database to accept additional connections).</p>
+
+<p>Because the file system is ephemeral you can't install the services required by your application directly (e.g. databases, queues, caching systems, storage, email services, etc). Instead, Heroku web applications use backing services provided as independent "add-ons" by Heroku or 3rd parties. Once attached to your web application, the add-on services are accessed in your web application via environment variables.</p>
+
+<p>In order to execute your application Heroku needs to be able to set up the appropriate environment and dependencies, and also understand how it is launched. For Node apps, all the information it needs is obtained from your <strong>package.json</strong> file.</p>
+
+<p>Developers interact with Heroku using a special client app/terminal, which is much like a Unix bash script. This allows you to upload code that is stored in a git repository, inspect the running processes, see logs, set configuration variables, and much more!</p>
+
+<p>In order to get our application to work on Heroku, we'll need to put our Express web application into a git repository and make some minor changes to the package.json. Once we've done that we can set up a Heroku account, get the Heroku client, and use it to install our website.</p>
+
+<p>That's all the overview you need in order to get started (see <a href="https://devcenter.heroku.com/articles/getting-started-with-nodejs">Getting Started on Heroku with Node.js</a> for a more comprehensive guide).</p>
+
+<h3 id="Creating_an_application_repository_in_Github">Creating an application repository in Github</h3>
+
+<p>Heroku is closely integrated with the <strong>git</strong> source code version control system, using it to upload/synchronize any changes you make to the live system. It does this by adding a new Heroku "remote" repository named <em>heroku</em> pointing to a repository for your source on the Heroku cloud. During development, you use git to store changes on your "master" repository. When you want to deploy your site, you sync your changes to the Heroku repository.</p>
+
+<div class="note">
+<p><strong>Note:</strong> If you're used to following good software development practices you are probably already using git or some other SCM system. If you already have a git repository, then you can skip this step.</p>
+</div>
+
+<p>There are a lot of ways of to work with git, but one of the easiest is to first set up an account on <a href="https://github.com/">GitHub</a>, create the repository there, and then sync to it locally:</p>
+
+<ol>
+ <li>Visit <a href="https://github.com/">https://github.com/</a> and create an account.</li>
+ <li>Once you are logged in, click the <strong>+</strong> link in the top toolbar and select <strong>New repository</strong>.</li>
+ <li>Fill in all the fields on this form. While these are not compulsory, they are strongly recommended.
+  <ul>
+   <li>Enter a new repository name (e.g. <em>express-locallibrary-tutorial</em>), and description (e.g. "Local Library website written in Express (Node)".</li>
+   <li>Choose <strong>Node</strong> in the <em>Add .gitignore</em> selection list.</li>
+   <li>Choose your preferred license in the <em>Add license</em> selection list.</li>
+   <li>Check <strong>Initialize this repository with a README</strong>.</li>
+  </ul>
+ </li>
+ <li>Press <strong>Create repository</strong>.</li>
+ <li>Click the green "<strong>Clone or download</strong>" button on your new repo page.</li>
+ <li>Copy the URL value from the text field inside the dialog box that appears (it should be something like: <strong>https://github.com/<em>&lt;your_git_user_id&gt;</em>/express-locallibrary-tutorial.git</strong>).</li>
+</ol>
+
+<p>Now the repository ("repo") is created we are going to want to clone it on our local computer:</p>
+
+<ol>
+ <li>Install <em>git</em> for your local computer (you can find versions for different platforms <a href="https://git-scm.com/downloads">here</a>).</li>
+ <li>Open a command prompt/terminal and clone your repository using the URL you copied above:
+  <pre class="brush: bash">git clone https://github.com/<strong><em>&lt;your_git_user_id&gt;</em></strong>/express-locallibrary-tutorial.git
+</pre>
+  This will create the repository below the current point.</li>
+ <li>Navigate into the new repo.
+  <pre class="brush: bash">cd express-locallibrary-tutorial</pre>
+ </li>
+</ol>
+
+<p>The final step is to copy in your application and then add the files to your repo using git:</p>
+
+<ol>
+ <li>Copy your Express application into this folder (excluding <strong>/node_modules</strong>, which contains dependency files that you should fetch from NPM as needed).</li>
+ <li>Open a command prompt/terminal and use the <code>add</code> command to add all files to git.</li>
+ <li>
+  <pre class="brush: bash">git add -A
+</pre>
+ </li>
+ <li>Use the status command to check all files that you are about to add are correct (you want to include source files, not binaries, temporary files etc.). It should look a bit like the listing below.
+  <pre>&gt; git status
+On branch master
+Your branch is up-to-date with 'origin/master'.
+Changes to be committed:
+  (use "git reset HEAD &lt;file&gt;..." to unstage)
+
+        new file:   ...</pre>
+ </li>
+ <li>When you're satisfied commit the files to your local repository:
+  <pre class="brush: bash">git commit -m "First version of application moved into github"</pre>
+ </li>
+ <li>Then synchronize your local repository to the Github website, using the following:
+  <pre>git push origin master</pre>
+ </li>
+</ol>
+
+<p>When this operation completes, you should be able to go back to the page on Github where you created your repo, refresh the page, and see that your whole application has now been uploaded. You can continue to update your repository as files change using this add/commit/push cycle.</p>
+
+<div class="note">
+<p><strong>Tip:</strong> This is a good point to make a backup of your "vanilla" project — while some of the changes we're going to be making in the following sections might be useful for deployment on any platform (or development) others might not.</p>
+
+<p>The <em>best</em> way to do this is to use <em>git</em> to manage your revisions. With <em>git</em> you can not only go back to a particularly old version, but you can maintain this in a separate "branch" from your production changes and cherry-pick any changes to move between production and development branches. <a href="https://help.github.com/articles/good-resources-for-learning-git-and-github/">Learning Git</a> is well worth the effort, but is beyond the scope of this topic.</p>
+
+<p>The <em>easiest</em> way to do this is to just copy your files into another location. Use whichever approach best matches your knowledge of git!</p>
+</div>
+
+<h3 id="Update_the_app_for_Heroku">Update the app for Heroku</h3>
+
+<p>This section explains the changes you'll need to make to our <em>LocalLibrary</em> application to get it to work on Heroku.</p>
+
+<h4 id="Set_node_version">Set node version </h4>
+
+<p>The <strong>package.json</strong> contains everything needed to work out your application dependencies and what file should be launched to start your site. Heroku detects the presence of this file, and will use it to provision your app environment.</p>
+
+<p>The only useful information missing in our current <strong>package.json</strong> is the version of node. We can find the version of node we're using for development by entering the command:</p>
+
+<pre class="brush: bash">&gt;node --version
+v8.9.1</pre>
+
+<p>Open <strong>package.json</strong>, and add this information as an <strong>engines &gt; node</strong> section as shown (using the version number for your system).</p>
+
+<pre class="brush: json">{
+  "name": "express-locallibrary-tutorial",
+  "version": "0.0.0",
+<strong>  "engines": {
+    "node": "8.9.1"
+  },</strong>
+  "private": true,
+  ...
+</pre>
+
+<h4 id="Database_configuration">Database configuration</h4>
+
+<p>So far in this tutorial, we've used a single database that is hard-coded into <strong>app.js</strong>. Normally we'd like to be able to have a different database for production and development, so next we'll modify the LocalLibrary website to get the database URI from the OS environment (if it has been defined), and otherwise use our development database.</p>
+
+<p>Open <strong>app.js</strong> and find the line that sets the MongoDB connection variable. It will look something like this:</p>
+
+<pre class="brush: js">var mongoDB = 'mongodb://your_user_id:your_password@ds119748.mlab.com:19748/local_library';</pre>
+
+<p>Replace the line with the following code that uses <code>process.env.MONGODB_URI</code> to get the connection string from an environment variable named <code>MONGODB_URI</code> if has been set (use your own database URL instead of the placeholder below.)</p>
+
+<pre class="brush: js">var mongoDB = <strong>process.env.MONGODB_URI</strong> || 'mongodb://your_user_id:your_password@ds119748.mlab.com:19748/local_library';
+</pre>
+
+<h4 id="Get_dependencies_and_re-test">Get dependencies and re-test</h4>
+
+<p>Before we proceed, let's test the site again and make sure it wasn't affected by any of our changes. </p>
+
+<p>First, we will need to fetch our dependencies (you will recall we didn't copy the <strong>node_modules</strong> folder into our git tree). You can do this by running the following command in your terminal at the root of the project:</p>
+
+<pre class="brush: bash">npm install
+</pre>
+
+<p>Now run the site (see <a href="/en-US/docs/Learn/Server-side/Express_Nodejs/routes#Testing_the_routes">Testing the routes</a> for the relevant commands) and check that the site still behaves as you expect.</p>
+
+<h4 id="Save_changes_to_Github">Save changes to Github</h4>
+
+<p>Next, let's save all our changes to Github. In the terminal (whilst inside our repository), enter the following commands:</p>
+
+<pre class="brush: bash">git add -A
+git commit -m "Added files and changes required for deployment to heroku"
+git push origin master</pre>
+
+<p>We should now be ready to start deploying <em>LocalLibrary</em> on Heroku.</p>
+
+<h3 id="Get_a_Heroku_account">Get a Heroku account</h3>
+
+<p>To start using Heroku you will first need to create an account (skip ahead to <a href="#Create_and_upload_the_website">Create and upload the website</a> if you've already got an account and installed the Heroku client):</p>
+
+<ul>
+ <li>Go to <a href="https://www.heroku.com/">www.heroku.com</a> and click the <strong>SIGN UP FOR FREE</strong> button.</li>
+ <li>Enter your details and then press <strong>CREATE FREE ACCOUNT</strong>. You'll be asked to check your account for a sign-up email.</li>
+ <li>Click the account activation link in the signup email. You'll be taken back to your account on the web browser.</li>
+ <li>Enter your password and click <strong>SET PASSWORD AND LOGIN</strong>.</li>
+ <li>You'll then be logged in and taken to the Heroku dashboard: <a href="https://dashboard.heroku.com/apps">https://dashboard.heroku.com/apps</a>.</li>
+</ul>
+
+<h3 id="Install_the_client">Install the client</h3>
+
+<p>Download and install the Heroku client by following the <a href="https://devcenter.heroku.com/articles/getting-started-with-python#set-up">instructions on Heroku here</a>.</p>
+
+<p>After the client is installed you will be able to run commands. For example to get help on the client:</p>
+
+<pre class="brush: bash">heroku help
+</pre>
+
+<h3 id="Create_and_upload_the_website">Create and upload the website</h3>
+
+<p>To create the app we run the "create" command in the root directory of our repository. This creates a git remote ("pointer to a remote repository") named <em>heroku</em> in our local git environment.</p>
+
+<pre class="brush: bash">heroku create</pre>
+
+<div class="note">
+<p><strong>Note:</strong> You can name the remote if you like by specifying a value after "create". If you don't then you'll get a random name. The name is used in the default URL.</p>
+</div>
+
+<p>We can then push our app to the Heroku repository as shown below. This will upload the app, get all its dependencies, package it in a dyno, and start the site.</p>
+
+<pre class="brush: bash">git push heroku master</pre>
+
+<p>If we're lucky, the app is now "running" on the site. To open your browser and run the new website, use the command:</p>
+
+<pre class="brush: bash">heroku open</pre>
+
+<div class="note">
+<p><strong>Note</strong>: The site will be running using our development database. Create some books and other objects, and check out whether the site is behaving as you expect. In the next section, we'll set it to use our new database.</p>
+</div>
+
+<h3 id="Setting_configuration_variables">Setting configuration variables</h3>
+
+<p>You will recall from a preceding section that we need to <a href="#NODE_ENV">set NODE_ENV to 'production'</a> in order to improve our performance and generate less-verbose error messages. We do this by entering the following command:</p>
+
+<pre class="brush: bash">&gt;heroku config:set NODE_ENV='production'
+Setting NODE_ENV and restarting limitless-tor-18923... done, v13
+NODE_ENV: production
+</pre>
+
+<p>We should also use a separate database for production, setting its URI in the <strong>MONGODB_URI</strong>  environment variable. You can set up a new database and database-user exactly <a href="https://developer.mozilla.org/en-US/docs/Learn/Server-side/Express_Nodejs/mongoose#Setting_up_the_MongoDB_database">as we did originally</a>, and get its URI. You can set the URI as shown (obviously, using your own URI!)</p>
+
+<pre class="brush: bash">&gt;heroku config:set <strong>MONGODB_URI</strong>='mongodb://your_user:your_password@ds139278.mlab.com:39278/local_library_production'
+Setting MONGODB_URI and restarting limitless-tor-18923... done, v13
+MONGODB_URI: mongodb://your_user:your_password@ds139278.mlab.com:39278/local_library_production
+</pre>
+
+<p>You can inspect your configuration variables at any time using the <code>heroku config</code> command — try this now:</p>
+
+<pre class="brush: bash">&gt;heroku config
+=== limitless-tor-18923 Config Vars
+MONGODB_URI: mongodb://your_user:your_password@ds139278.mlab.com:39278/local_library_production
+NODE_ENV:    production
+</pre>
+
+<p>Heroku will restart your app when it updates the variables. If you check the home page now it should show zero values for your object counts, as the changes above mean that we're now using a new (empty) database.</p>
+
+<h3 id="Managing_addons">Managing addons</h3>
+
+<p>Heroku uses independent add-ons to provide backing services to apps — for example, email or database services. We don't use any addons in this website, but they are an important part of working with Heroku, so you may want to check out the topic <a href="https://devcenter.heroku.com/articles/managing-add-ons">Managing Add-ons</a> (Heroku docs).</p>
+
+<h3 id="Debugging">Debugging</h3>
+
+<p>The Heroku client provides a few tools for debugging:</p>
+
+<pre class="brush: bash">heroku logs  # Show current logs
+heroku logs --tail # Show current logs and keep updating with any new results
+heroku ps   #Display dyno status
+</pre>
+
+<ul>
+</ul>
+
+<h2 id="まとめ">まとめ</h2>
+
+<p>これで、本番環境での Express アプリケーションの設定に関するこのチュートリアル、および Express を使用した作業に関する一連のチュートリアルは終了です。それらが役に立つことを願っています。完全に完成したバージョンの <a href="https://github.com/mdn/express-locallibrary-tutorial">Github のソースコードをここで</a>チェックすることができます。</p>
+
+<h2 id="あわせて参照">あわせて参照</h2>
+
+<ul>
+ <li id="production-best-practices-performance-and-reliability"><a href="https://expressjs.com/en/advanced/best-practice-performance.html">Production best practices: performance and reliability</a> (Express docs)</li>
+ <li><a href="https://expressjs.com/en/advanced/best-practice-security.html">Production Best Practices: Security</a> (Express docs)</li>
+ <li>Heroku
+  <ul>
+   <li><a href="https://devcenter.heroku.com/articles/getting-started-with-nodejs">Getting Started on Heroku with Node.js</a> (Heroku docs)</li>
+   <li><a href="https://devcenter.heroku.com/articles/deploying-nodejs">Deploying Node.js Applications on Heroku</a> (Heroku docs)</li>
+   <li><a href="https://devcenter.heroku.com/articles/nodejs-support">Heroku Node.js Support</a> (Heroku docs)</li>
+   <li><a href="https://devcenter.heroku.com/articles/node-concurrency">Optimizing Node.js Application Concurrency</a> (Heroku docs)</li>
+   <li><a href="https://devcenter.heroku.com/articles/how-heroku-works">How Heroku works</a> (Heroku docs)</li>
+   <li><a href="https://devcenter.heroku.com/articles/dynos">Dynos and the Dyno Manager</a> (Heroku docs)</li>
+   <li><a href="https://devcenter.heroku.com/articles/config-vars">Configuration and Config Vars</a> (Heroku docs)</li>
+   <li><a href="https://devcenter.heroku.com/articles/limits">Limits</a> (Heroku docs)</li>
+  </ul>
+ </li>
+ <li>Digital Ocean
+  <ul>
+   <li><a href="https://www.digitalocean.com/community/tutorials?q=express">Express</a> tutorials</li>
+   <li><a href="https://www.digitalocean.com/community/tutorials?q=node.js">Node.js</a> tutorials </li>
+  </ul>
+ </li>
+</ul>
+
+<p>{{PreviousMenu("Learn/Server-side/Express_Nodejs/forms", "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>
diff --git a/files/ja/learn/server-side/express_nodejs/development_environment/index.html b/files/ja/learn/server-side/express_nodejs/development_environment/index.html
new file mode 100644
index 0000000000..7bfa26bb88
--- /dev/null
+++ b/files/ja/learn/server-side/express_nodejs/development_environment/index.html
@@ -0,0 +1,410 @@
+---
+title: Node 開発環境の設定
+slug: Learn/Server-side/Express_Nodejs/development_environment
+tags:
+  - CodingScripting
+  - Express
+  - Intro
+  - Learn
+  - Node
+  - nodejs
+  - npm
+  - server-side
+  - イントロダクション
+  - サーバサイド
+  - 初心者
+  - 学習
+  - 開発環境
+translation_of: Learn/Server-side/Express_Nodejs/development_environment
+---
+<div>{{LearnSidebar}}</div>
+
+<div>{{PreviousMenuNext("Learn/Server-side/Express_Nodejs/Introduction", "Learn/Server-side/Express_Nodejs/Tutorial_local_library_website", "Learn/Server-side/Express_Nodejs")}}</div>
+
+<p class="summary">Express の目的が理解できたので、Windows、Linux (Ubuntu)、および macOS 上で Node/Express 開発環境をセットアップしてテストする方法を説明します。どのような一般的な OS を使用していても、この記事では Express アプリケーションの開発を開始するために必要なものを提供します。</p>
+
+<table class="learn-box standard-table">
+ <tbody>
+  <tr>
+   <th scope="row">前提条件:</th>
+   <td>端末/コマンドラインを開く方法を知っている。開発用コンピューターの OS にソフトウェアパッケージをインストールする方法を知っている。</td>
+  </tr>
+  <tr>
+   <th scope="row">目標:</th>
+   <td>コンピューター上に Express (X.XX) 用の開発環境をセットアップします。</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Express_開発環境概要">Express 開発環境概要</h2>
+
+<p>Node と Express のおかげでウェブアプリケーションの開発を始めるためにコンピューターをセットアップすることが非常に簡単になります。このセクションでは必要なツールの概要、Ubuntu、macOS、および Windows に Node (および Express) をインストールするための最も簡単な方法について説明し、インストールをテストする方法を示します。</p>
+
+<h3 id="Express_開発環境とは何か">Express 開発環境とは何か?</h3>
+
+<p><em>Express</em> 開発環境には <em>Nodejs</em>、<em>NPM</em> パッケージマネージャー、および (オプションで) ローカルコンピューターに <em>Express Application Generator</em> がインストールされています。</p>
+
+<p><em>Node</em> と <em>NPM</em> パッケージマネージャーは、準備されたバイナリパッケージ、インストーラー、オペレーティングシステムのパッケージマネージャー、またはソースから一緒にインストールされます (次のセクションを参照)。 <em>Express</em> は、<em>NPM</em> によって、個々の <em>Express</em> ウェブアプリケーションの依存関係として (テンプレートエンジン、データベースドライバー、認証ミドルウェア、静的ファイルを提供するためのミドルウェアなどの他のライブラリと共に) インストールされます。</p>
+
+<p><em>NPM</em> は <a href="https://developer.mozilla.org/ja/docs/Glossary/MVC">MVC パターン</a>に従ったスケルトンの <em>Express</em> ウェブアプリケーションを作成するための便利なツールである <em>Express Application Generator</em>を (グローバルに) インストールするためにも使用できます。Express を使用するアプリを作成したり、同じアーキテクチャ上のレイアウトや依存関係を持つ Express アプリを構築したりするためにこのツールを使用する必要はないため、アプリケーションジェネレーターはオプションです。ただし、使い始めるのがはるかに簡単になり、モジュール式のアプリケーション構造が促進されるため、これを使用します。</p>
+
+<div class="note">
+<p><strong>メモ:</strong> 他のウェブフレームワークとは異なり、開発環境には独立した開発用の ウェブサーバーは含まれていません。<em>Node/Express</em> では、ウェブアプリケーションが独自のウェブサーバーを作成して実行します。</p>
+</div>
+
+<p><a href="/ja/docs/Learn/Common_questions/Available_text_editors">テキストエディタ</a>やコード編集用の IDE、コードの異なるバージョンを安全に管理するための <a href="https://git-scm.com/">Git</a> などのソース管理マネジメントツールなど、一般的な開発環境の一部である他の周辺ツールもあります。これらの種類のツール (特にテキストエディタ) が既にインストールされていると仮定しています。</p>
+
+<h3 id="どのオペレーティングシステムがサポートされていますか？">どのオペレーティングシステムがサポートされていますか？</h3>
+
+<p><em>Node </em>は Windows、macOS、Linux の多くの「フレーバー」、Docker などで実行できます (nodejs の<a href="https://nodejs.org/ja/download/">ダウンロード</a>ページに完全なリストがあります)。ほとんどのパーソナルコンピューターは開発中に Node を実行するのに必要な性能を持っているはずです。<em>Express</em> は <em>Node</em> 環境で実行されるため、<em>Node</em> を実行する任意のプラットフォームで実行できます。</p>
+
+<p>この記事では Windows、macOS、および Ubuntu Linux のセットアップ手順を説明します。</p>
+
+<h3 id="どのバージョンの_NodeExpress_を使用すべきですか？">どのバージョンの Node/Express を使用すべきですか？</h3>
+
+<p>たくさんの <a href="https://nodejs.org/ja/blog/release/">Node のリリース</a>があります - 新しいリリースにはバグ修正、ECMAScript (JavaScript) 標準のより最新のバージョンのサポート、そして Node API の改良が含まれています。</p>
+
+<p>一般的には最新の <em>LTS </em>(長期サポート) リリースを使用するべきです。比較的最新の機能を持ちながら (そして現在も積極的にメンテナンスされています)、"最新の" リリースより安定しているからです。LTS バージョンに存在しない機能が必要な場合は、<em>最新版</em>リリースを使用してください。</p>
+
+<p><em>Express </em>は常に最新のバージョンを使うべきです。</p>
+
+<h3 id="データベースやその他の依存関係についてはどうですか？">データベースやその他の依存関係についてはどうですか？</h3>
+
+<p>データベースドライバー、テンプレートエンジン、認証エンジンなどのその他の依存関係はアプリケーションの一部であり、NPM パッケージマネージャーを使用してアプリケーション環境にインポートされます。それらについては、後のアプリ固有の記事で説明します。</p>
+
+<h2 id="Node_のインストール">Node のインストール</h2>
+
+<p><em>Express </em>を使用するには、まず <em>Nodejs </em>と <a href="https://docs.npmjs.com/">Node Package Manager (NPM)</a> をオペレーティングシステムにインストールする必要があります。以下のセクションでは Ubuntu Linux 18.04、macOS、および Windows 10 に Long Term Supported (LTS) バージョンの Nodejs をインストールする最も簡単な方法について説明します。</p>
+
+<div class="note">
+<p><strong>Tip:</strong> 以下のセクションは、ターゲット OS プラットフォームに <em>Node </em>と <em>NPM </em>をインストールする最も簡単な方法を示しています。他の OS を使用している場合、または現在のプラットフォームで他の方法を使用したい場合は、<a href="https://nodejs.org/ja/download/package-manager/">パッケージマネージャーによる Node.js のインストール</a> (nodejs.org) を参照してください。</p>
+</div>
+
+<h3 id="macOS_および_Windows">macOS および Windows</h3>
+
+<p>Windows と macOS への <em>Node </em>と <em>NPM </em>のインストールは、提供されているインストーラーを使用することができるため、簡単です。</p>
+
+<ol>
+ <li>必要なインストーラーをダウンロードします
+  <ol>
+   <li><a href="https://nodejs.org/ja/">https://nodejs.org/ja/</a> に進みます</li>
+   <li>"ほとんどのユーザーに推奨" である LTS ビルドをダウンロードするためのボタンを選択してください。</li>
+  </ol>
+ </li>
+ <li>ダウンロードしたファイルをダブルクリックし、インストールの指示に従って Node をインストールします。</li>
+</ol>
+
+<h3 id="Ubuntu_18.04">Ubuntu 18.04</h3>
+
+<p>Node 10.x の最新の LTS バージョンをインストールする最も簡単な方法は、<a href="https://nodejs.org/en/download/package-manager/#debian-and-ubuntu-based-linux-distributions">パッケージマネージャー</a>を使ってそれを Ubuntu <em>バイナリ配布</em>リポジトリーから入手することです。これはあなたの端末で以下の2つのコマンドを実行することによって非常に簡単に行うことができます。</p>
+
+<pre class="brush: bash"><code>curl -sL https://deb.nodesource.com/setup_10.x | sudo -E bash -
+sudo apt-get install -y nodejs</code>
+</pre>
+
+<div class="warning">
+<p><strong>警告:</strong> それらは非常に古いバージョンの Node を含んでいるので、通常の Ubuntu リポジトリーから直接インストールしないでください。</p>
+</div>
+
+<ol>
+</ol>
+
+<h3 id="Nodejs_および_NPM_インストールのテスト">Nodejs および NPM インストールのテスト</h3>
+
+<p>Node がインストールされていることをテストする最も簡単な方法は、ターミナル/コマンドプロンプトで "version" コマンドを実行し、バージョン文字列が返されることを確認することです。</p>
+
+<pre class="brush: bash">&gt;node -v
+v10.16.0</pre>
+
+<p><em>Nodejs </em>パッケージマネージャー <em>NPM</em> もインストールされているはずで、同じ方法でテストできます。</p>
+
+<pre class="brush: bash">&gt;npm -v
+6.9.0</pre>
+
+<p>もう少し刺激的なテストとして、ブラウザーで正しい URL にアクセスしたときにブラウザーに「Hello World」を単純に出力する、非常に基本的な "純粋な Node" サーバーを作成しましょう。</p>
+
+<ol>
+ <li>次のテキストを <strong>hellonode.js</strong> というファイルにコピーします。これは純粋な Node 関数 (Express からは何もしていません) といくつかの ES6 構文を使用します。
+
+  <pre class="brush: js">//HTTP モジュールを読み込む
+const http = require("http");
+<code>const hostname = '127.0.0.1';
+const port = 3000;
+
+//HTTP サーバーを作成し、3000 番ポートでリクエストを待機します。
+const server = http.createServer((req, res) =&gt; {
+
+  //HTTP ステータスとコンテンツタイプを持つ応答 HTTP ヘッダーを設定します。
+  res.statusCode = 200;
+  res.setHeader('Content-Type', 'text/plain');
+  res.end('Hello World\n');
+});
+
+//3000 番ポートでリクエストを待機し、受信したときにログ出力するコールバック関数
+server.listen(port, hostname, () =&gt; {
+  console.log(`Server running at http://${hostname}:${port}/`);
+});</code>
+
+</pre>
+
+  <p>このコードは "http" モジュールをインポートし、それを使用して 3000 番ポートで HTTP リクエストを待機するサーバーを作成 (<code>createServer()</code>) します。次に、スクリプトはサーバーをテストするために使用できるブラウザー URL についてのメッセージをコンソールに出力します。 <code>createServer()</code> 関数は、HTTP リクエストを受信したときに呼び出されるコールバック関数を引数として取ります。これは HTTP ステータスコード 200 ("OK") とプレーンテキスト "Hello World" のレスポンスを返します。</p>
+
+  <div class="note">
+  <p><strong>メモ:</strong>  このコードが何をしているのか正確に理解できなくても心配しないでください。Express を使い始めたら、コードについて詳しく説明します。</p>
+  </div>
+ </li>
+ <li>コマンドプロンプトで <code>hellonode.js</code> ファイルと同じディレクトリに移動し、次のようにスクリプト名とともに <code>node</code> を呼び出してサーバーを起動します。
+  <pre class="brush: bash">&gt;node hellonode.js
+Server running at http://127.0.0.1:3000/
+</pre>
+ </li>
+ <li>http://127.0.0.1:3000 の URL に移動します。すべてがうまくいったら、ブラウザーは単に文字列 "Hello World" を表示するはずです。</li>
+</ol>
+
+<h2 id="NPM_の使用">NPM の使用</h2>
+
+<p>Node 自体の次に、<a href="https://docs.npmjs.com/">NPM</a> は Node アプリケーションを操作するための最も重要なツールです。NPM は、アプリケーションが開発、テスト、および/または運用に必要なパッケージ(JavaScript ライブラリ) を取得するために使用されます。また、開発プロセスで使用されるテストやツールを実行するために使用されることもあります。</p>
+
+<div class="note">
+<p><strong>メモ:</strong> Node の観点からすると、Express は NPM を使用してインストールしてから独自のコードで必要とするもう1つのパッケージです。</p>
+</div>
+
+<p>手動で NPM を使用して、必要な各パッケージを別々に取り出すことができます。通常、代わりに <a href="https://docs.npmjs.com/files/package.json">package.json</a> というプレーンテキストの定義ファイルを使用して依存関係を管理します。このファイルにはパッケージの名前、バージョン、説明、実行する初期ファイル、プロダクション依存関係、開発依存関係、それが動作可能な <em>Node </em>のバージョンなど、特定のJavaScript "package" に対するすべての依存関係が一覧表示されます。<strong>package.json</strong> ファイルには、NPM がアプリケーションを取得して実行するために必要なものがすべて含まれている必要があります (再利用可能なライブラリを作成している場合は、この定義を使用してパッケージを npm リポジトリーにアップロードし、他のユーザが利用できるようにします)。</p>
+
+<h3 id="依存関係の追加">依存関係の追加</h3>
+
+<p>次の手順では NPM を使用してパッケージをダウンロードし、それをプロジェクトの依存関係に保存してから、それを Node アプリケーションで要求する方法を示します。</p>
+
+<div class="note">
+<p><strong>メモ:</strong> ここでは Express パッケージを取得してインストールするための手順を示します。後で、このパッケージなどが Express Application Generator を使用してすでにどのように指定されているかを示します。このセクションは NPM がどのように機能するのか、および Application Generator によって何が作成されているのかを理解するのに役立ちます。</p>
+</div>
+
+<ol>
+ <li>
+  <p>まず、新しいアプリケーション用のディレクトリーを作成し、そこに移動します。</p>
+
+  <pre class="brush: bash">mkdir myapp
+cd myapp</pre>
+ </li>
+ <li>
+  <p>アプリケーション用の <strong>package.json</strong> ファイルを作成するには、npm <code>init</code> コマンドを使用します。このコマンドはアプリケーションの名前とバージョン、初期エントリポイントファイルの名前 (デフォルトでは <strong>index.js</strong>) など、さまざまなことを要求します。今のところ、デフォルトをそのまま使用します。</p>
+
+  <pre class="brush: bash">npm init</pre>
+
+  <p><strong>package.json</strong> ファイル (<code>cat package.json</code>) を表示すると、受け入れたデフォルトが表示され、最後にライセンスが表示されます。</p>
+
+  <pre class="brush: json">{
+  "name": "myapp",
+  "version": "1.0.0",
+  "description": "",
+  "main": "index.js",
+  "scripts": {
+    "test": "echo \"Error: no test specified\" &amp;&amp; exit 1"
+  },
+  "author": "",
+  "license": "ISC"
+}
+</pre>
+ </li>
+ <li>
+  <p><code>myapp</code> ディレクトリーに Express をインストールし、それをあなたの package.json ファイルの依存関係リストに保存してください。</p>
+
+  <pre class="brush: bash">  npm install express --save
+</pre>
+ </li>
+ <li>
+  <p><strong>package.json</strong> の依存関係セクションが <strong>package.json</strong> ファイルの最後に表示され、Express が含まれます。</p>
+
+  <pre class="brush: json">{
+  "name": "myapp",
+  "version": "1.0.0",
+  "description": "",
+  "main": "index.js",
+  "scripts": {
+    "test": "echo \"Error: no test specified\" &amp;&amp; exit 1"
+  },
+  "author": "",
+  "license": "ISC",
+<strong>  "dependencies": {
+    "express": "^4.16.3"
+  }</strong>
+}
+</pre>
+ </li>
+ <li>このライブラリを使用するには、index.js ファイルで以下に示すように <code>require()</code> 関数を呼び出します。"myapp" アプリケーションディレクトリーのルートにファイルを作り、以下の内容を記述します。
+  <pre><code><strong>const express = require('express')</strong>
+const app = express();
+
+app.get('/', (req, res) =&gt; {
+  res.send('Hello World!')
+});
+
+app.listen(</code>8000<code>, () =&gt; {
+  console.log('Example app listening on port </code>8000<code>!')
+});</code>
+</pre>
+
+  <p>このコードは、最小限の「HelloWorld」Express ウェブアプリケーションを示しています。これは「express」モジュールをインポートし、それを使用して 8000 番ポートで HTTP リクエストを待機するサーバ ー(<code>app</code>) を作成し、サーバーをテストするために使用できるブラウザー URL を説明するメッセージをコンソールに出力します。 <code>app.get()</code> 関数は、指定された URLパス ('/') で HTTP <code>GET</code> リクエストにのみ応答します。この場合、関数を呼び出して <em>Hello World!</em> メッセージを送信します。</p>
+ </li>
+ <li>コマンドプロンプトでスクリプトを使用して node を呼び出すことでサーバーを起動できます。
+  <pre class="brush: bash">&gt;node index.js
+Example app listening on port 8000
+</pre>
+ </li>
+ <li>URL (<a href="http://127.0.0.1:8000/">http://127.0.0.1:8000/</a>) に移動します。すべてがうまくいったら、ブラウザーは単に文字列 "Hello World!" を表示するはずです。</li>
+</ol>
+
+<h3 id="開発の依存関係">開発の依存関係</h3>
+
+<p>依存関係が開発中にのみ使用される場合は、代わりに "開発依存関係" として保存する必要があります (パッケージユーザーが本番環境にインストールする必要がないようにするため)。たとえば、一般的な JavaScript Linting ツールの <a href="http://eslint.org/">eslint</a> を使用するには、次のように NPM を呼び出します。</p>
+
+<pre class="brush: bash"><code>npm install eslint --save-dev</code></pre>
+
+<p>次のエントリがアプリケーションの <strong>package.json</strong> に追加されます。</p>
+
+<pre class="brush: js">  "devDependencies": {
+    "eslint": "^4.12.1"
+  }
+</pre>
+
+<div class="note">
+<p><strong>メモ:</strong> "<a href="https://en.wikipedia.org/wiki/Lint_(software)">Lint</a>" は一連のコーディングのベストプラクティスに準拠しているかどうかを認識して報告するために、ソフトウェアで静的分析を実行するツールです。</p>
+</div>
+
+<h3 id="タスクの実行">タスクの実行</h3>
+
+<p>依存関係の定義と取得に加えて、<strong>package.json</strong> ファイルに名前付きスクリプトを定義し、NPM を呼び出してそれらを <a href="https://docs.npmjs.com/cli/run-script">run-script</a> コマンドで実行することもできます。このアプローチは、実行中のテストや開発の一部を自動化したり、ツールチェーン (たとえば JavaScript の縮小、画像の縮小、コードの LINT/分析などのツールの実行) を構築したりするためによく使用されます。</p>
+
+<div class="note">
+<p><strong>メモ:</strong> <a href="http://gulpjs.com/">Gulp</a> や <a href="http://gruntjs.com/">Grunt</a> のようなタスクランナーもテストや他の外部ツールを実行するために使うことができます。</p>
+</div>
+
+<p>たとえば、前のセクションで指定した eslint 開発依存関係を実行するためのスクリプトを定義するには、次のスクリプトブロックを <strong>package.json</strong> ファイルに追加します (アプリケーションソースが /src/js フォルダにあると仮定します)。</p>
+
+<pre class="brush: js">"scripts": {
+  ...
+  "lint": "eslint src/js"
+  ...
+}
+</pre>
+
+<p>もう少し詳しく説明すると、<code>eslint src/js</code> は、app ディレクトリー内の <code>src/js</code> ディレクトリーに含まれる JavaScript ファイルに対して <code>eslint</code> を実行するために terminal/command 行に入力できるコマンドです。アプリの package.json ファイル内に上記を含めると、このコマンドのショートカット - つまり <code>lint</code> が提供されます。</p>
+
+<p>こうすれば、NPM を使って eslint を実行することができます。</p>
+
+<pre class="brush: bash"><code>npm run-script lint
+# OR (using the alias)
+npm run lint</code>
+</pre>
+
+<p>この例は元のコマンドより短く見えないかもしれませんが、複数のコマンドのチェーンを含めて、npm スクリプト内にもっと大きなコマンドを含めることができます。一度にすべてのテストを実行する単一の npm スクリプトを指定できます。</p>
+
+<h2 id="Express_Application_Generator_のインストール">Express Application Generator のインストール</h2>
+
+<p><a href="https://expressjs.com/ja/starter/generator.html">Express Application Generator</a> ツールは Express アプリケーションの「スケルトン」を生成します。次に示すように、NPM を使用してジェネレーターをインストールします (<code>-g</code> フラグを指定すると、ツールをグローバルにインストールして、どこからでも呼び出すことができます)。</p>
+
+<pre><code>npm install express-generator -g</code></pre>
+
+<p>デフォルト設定で "helloworld" という名前の Express アプリを作成するには、作成する場所に移動して、図のようにアプリを実行します。</p>
+
+<pre class="brush: bash">express helloworld</pre>
+
+<div class="note">
+<p><strong>注記: </strong>利用するテンプレートライブラリ等の他の設定を指定することもできます。すべてのオプションを見るには、<code>help</code> コマンドを使用してください。</p>
+
+<pre class="brush: bash">express --help
+</pre>
+</div>
+
+<p>NPM は現在の場所のサブフォルダーに新しい Express アプリケーションを作成し、コンソールにビルドの進行状況を表示します。完了すると、Node の依存関係をインストールしてアプリを起動するために入力する必要があるコマンドがツールに表示されます。</p>
+
+<div class="note">
+<p>新しいアプリには、そのルートディレクトリーに <strong>package.json</strong> ファイルがあります。これを開くと、Express やテンプレートライブラリ Jade など、インストールされている依存関係を確認できます。</p>
+
+<pre class="brush: js">{
+  "name": "helloworld",
+  "version": "0.0.0",
+  "private": true,
+  "scripts": {
+    "start": "node ./bin/www"
+  },
+  "dependencies": {
+    "body-parser": "~1.18.2",
+    "cookie-parser": "~1.4.3",
+    "debug": "~2.6.9",
+    "express": "~4.15.5",
+    "jade": "~1.11.0",
+    "morgan": "~1.9.0",
+    "serve-favicon": "~2.4.5"
+  }
+}</pre>
+
+
+</div>
+
+<p>次に示すように、NPM を使用して helloworld アプリのすべての依存関係をインストールします。</p>
+
+<pre class="brush: bash">cd helloworld
+npm install
+</pre>
+
+<p>次に、以下のようにアプリを実行します (コマンドは Windows と Linux/macOS で若干異なります)。</p>
+
+<pre class="brush: bash">#  Windows のコマンドプロンプトで helloworld を実行
+SET DEBUG=helloworld:* &amp; npm start
+
+# Windows の PowerShell で helloworld を実行
+SET DEBUG=helloworld:* | npm start
+
+# Linux/macOS で helloworld を実行
+DEBUG=helloworld:* npm start
+</pre>
+
+<p>DEBUG コマンドは有用なロギングを作成し、その結果、以下に示すような出力が得られます。</p>
+
+<pre class="brush: bash">&gt;SET DEBUG=helloworld:* &amp; npm start
+
+&gt; helloworld@0.0.0 start D:\Github\expresstests\helloworld
+&gt; node ./bin/www
+
+  helloworld:server Listening on port 3000 +0ms</pre>
+
+<p>ブラウザーを開いて http://127.0.0.1:3000/ に移動し、デフォルトの Express ウェルカムページを表示します。</p>
+
+<p><img alt="Express - Generated App Default Screen" src="https://mdn.mozillademos.org/files/14331/express_default_screen.png" style="border-style: solid; border-width: 1px; display: block; height: 301px; margin: 0px auto; width: 675px;"></p>
+
+<p>スケルトンアプリケーションの生成に関する記事にアクセスしたら、生成されたアプリケーションについて詳しく説明します。</p>
+
+<ul>
+</ul>
+
+<h2 id="まとめ">まとめ</h2>
+
+<p>これで、Express ウェブアプリケーションを作成するために使用できる Node 開発環境がコンピューター上で稼働しています。また、NPM を使用して Express をアプリケーションにインポートする方法、および Express Application Generator ツールを使用してアプリケーションを作成して実行する方法についても説明しました。</p>
+
+<p>次の記事では、この環境と関連ツールを使って完全なウェブアプリケーションを構築するためのチュートリアルを始めます。</p>
+
+<h2 id="あわせて参照">あわせて参照</h2>
+
+<ul>
+ <li><a href="https://nodejs.org/ja/download/">ダウンロード</a> ページ (nodejs.org)</li>
+ <li><a href="https://nodejs.org/ja/download/package-manager/">パッケージマネージャを利用した Node.js のインストール</a> (nodejs.org)</li>
+ <li><a href="http://expressjs.com/ja/starter/installing.html">Express のインストール</a> (expressjs.com)</li>
+ <li><a href="https://expressjs.com/ja/starter/generator.html">Express Application Generator</a> (expressjs.com)</li>
+</ul>
+
+<p>{{PreviousMenuNext("Learn/Server-side/Express_Nodejs/Introduction", "Learn/Server-side/Express_Nodejs/Tutorial_local_library_website", "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 チュートリアル: 地域図書館のウェブサイト</a></li>
+ <li><a href="https://developer.mozilla.org/ja/docs/Learn/Server-side/Express_Nodejs/skeleton_website">Express チュートリアル Part 2: スケルトンウェブサイトの作成</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>
diff --git a/files/ja/learn/server-side/express_nodejs/displaying_data/author_detail_page/index.html b/files/ja/learn/server-side/express_nodejs/displaying_data/author_detail_page/index.html
new file mode 100644
index 0000000000..5c4acc7193
--- /dev/null
+++ b/files/ja/learn/server-side/express_nodejs/displaying_data/author_detail_page/index.html
@@ -0,0 +1,89 @@
+---
+title: 著者詳細ページ
+slug: Learn/Server-side/Express_Nodejs/Displaying_data/Author_detail_page
+translation_of: Learn/Server-side/Express_Nodejs/Displaying_data/Author_detail_page
+---
+<p>著者詳細ページには、指定された <code>Author</code> に関する情報を、その (自動的に生成された) <code>_id</code> フィールド値を使用して識別し、その <code>Author</code> に関連するすべての <code>Book</code> オブジェクトのリストを表示する必要があります。</p>
+
+<h2 id="Controller">Controller</h2>
+
+<p>Open <strong>/controllers/authorController.js</strong>.</p>
+
+<p>Add the following lines to the top of the file to import the <em>async</em> and <em>Book</em> modules (these are needed for our author detail page).</p>
+
+<pre class="brush: js">var async = require('async');
+var Book = require('../models/book');</pre>
+
+<p>Find the exported <code>author_detail()</code> controller method and replace it with the following code.</p>
+
+<pre class="brush: js">// Display detail page for a specific Author.
+exports.author_detail = function(req, res, next) {
+
+<strong>    async.parallel({
+        author: function(callback) {
+            Author.findById(req.params.id)
+              .exec(callback)
+        },
+        authors_books: function(callback) {
+          Book.find({ 'author': req.params.id },'title summary')
+          .exec(callback)
+        },
+    }, function(err, results) {
+        if (err) { return next(err); } // Error in API usage.
+        if (results.author==null) { // No results.
+            var err = new Error('Author not found');
+            err.status = 404;
+            return next(err);
+        }
+        // Successful, so render.
+        res.render('author_detail', { title: 'Author Detail', author: results.author, author_books: results.authors_books } );
+    });</strong>
+
+};
+</pre>
+
+<p>The method uses <code>async.parallel()</code> to query the <code>Author</code> and their associated <code>Book</code> instances in parallel, with the callback rendering the page when (if) both requests complete successfully. The approach is exactly the same as described for the <em>Genre detail page</em> above.</p>
+
+<h2 id="View">View</h2>
+
+<p>Create <strong>/views/author_detail.pug</strong> and copy in the following text.</p>
+
+<pre class="brush: js">extends layout
+
+block content
+
+<strong>  h1 Author: #{author.name}</strong>
+  p #{author.date_of_birth} - #{author.date_of_death}
+
+  div(style='margin-left:20px;margin-top:20px')
+
+    h4 Books
+
+    dl
+      each book in author_books
+        dt
+          a(href=book.url) #{book.title}
+        dd #{book.summary}
+
+      else
+        p This author has no books.
+</pre>
+
+<p>Everything in this template has been demonstrated in previous sections.</p>
+
+<h2 id="What_does_it_look_like">What does it look like?</h2>
+
+<p>Run the application and open your browser to <a href="http://localhost:3000/">http://localhost:3000/</a>. Select the <em>All Authors</em> link, then select one of the authors. If everything is set up correctly, your site should look something like the following screenshot.</p>
+
+<p><img alt="Author Detail Page - Express Local Library site" src="https://mdn.mozillademos.org/files/14466/LocalLibary_Express_Author_Detail.png" style="border-style: solid; border-width: 1px; display: block; height: 422px; margin: 0px auto; width: 1000px;"></p>
+
+<div class="note">
+<p><strong>Note:</strong> The appearance of the author <em>lifespan </em>dates is ugly! We'll address that in the final challenge in this article.</p>
+</div>
+
+<h2 id="Next_steps">Next steps</h2>
+
+<ul>
+ <li>Return to <a href="/en-US/docs/Learn/Server-side/Express_Nodejs/Displaying_data">Express Tutorial Part 5: Displaying library data</a>.</li>
+ <li>Proceed to final subarticle of part 5 : <a href="/en-US/docs/Learn/Server-side/Express_Nodejs/Displaying_data/BookInstance_detail_page_and_challenge">BookInstance detail page and challenge</a>.</li>
+</ul>
diff --git a/files/ja/learn/server-side/express_nodejs/displaying_data/author_list_page/index.html b/files/ja/learn/server-side/express_nodejs/displaying_data/author_list_page/index.html
new file mode 100644
index 0000000000..f738902bfb
--- /dev/null
+++ b/files/ja/learn/server-side/express_nodejs/displaying_data/author_list_page/index.html
@@ -0,0 +1,85 @@
+---
+title: 著者リストページとジャンルリストページのチャレンジ
+slug: Learn/Server-side/Express_Nodejs/Displaying_data/Author_list_page
+translation_of: Learn/Server-side/Express_Nodejs/Displaying_data/Author_list_page
+---
+<p>The author list page needs to display a list of all authors in the database, with each author name linked to its associated author detail page. The date of birth and date of death should be listed after the name on the same line.</p>
+
+<h2 class="highlight-spanned" id="Controller"><span class="highlight-span">Controller</span></h2>
+
+<p>The author list controller function needs to get a list of all <code>Author</code> instances, and then pass these to the template for rendering.</p>
+
+<p>Open <strong>/controllers/authorController.js</strong>. Find the exported <code>author_list()</code> controller method near the top of the file and replace it with the following code (the changed code is shown in bold).</p>
+
+<pre class="brush: js line-numbers  language-js"><code class="language-js"><span class="comment token">// Display list of all Authors.</span>
+exports<span class="punctuation token">.</span>author_list <span class="operator token">=</span> <span class="keyword token">function</span><span class="punctuation token">(</span>req<span class="punctuation token">,</span> res<span class="punctuation token">,</span> next<span class="punctuation token">)</span> <span class="punctuation token">{</span>
+
+  Author<span class="punctuation token">.</span><span class="function token">find</span><span class="punctuation token">(</span><span class="punctuation token">)</span>
+    <span class="punctuation token">.</span><span class="function token">sort</span><span class="punctuation token">(</span><span class="punctuation token">[</span><span class="punctuation token">[</span><span class="string token">'family_name'</span><span class="punctuation token">,</span> <span class="string token">'ascending'</span><span class="punctuation token">]</span><span class="punctuation token">]</span><span class="punctuation token">)</span>
+    <span class="punctuation token">.</span><span class="function token">exec</span><span class="punctuation token">(</span><span class="keyword token">function</span> <span class="punctuation token">(</span>err<span class="punctuation token">,</span> list_authors<span class="punctuation token">)</span> <span class="punctuation token">{</span>
+      <span class="keyword token">if</span> <span class="punctuation token">(</span>err<span class="punctuation token">)</span> <span class="punctuation token">{</span> <span class="keyword token">return</span> <span class="function token">next</span><span class="punctuation token">(</span>err<span class="punctuation token">)</span><span class="punctuation token">;</span> <span class="punctuation token">}</span>
+      <span class="comment token">//Successful, so render</span>
+      res<span class="punctuation token">.</span><span class="function token">render</span><span class="punctuation token">(</span><span class="string token">'author_list'</span><span class="punctuation token">,</span> <span class="punctuation token">{</span> title<span class="punctuation token">:</span> <span class="string token">'Author List'</span><span class="punctuation token">,</span> author_list<span class="punctuation token">:</span> list_authors <span class="punctuation token">}</span><span class="punctuation token">)</span><span class="punctuation token">;</span>
+    <span class="punctuation token">}</span><span class="punctuation token">)</span><span class="punctuation token">;</span>
+
+<span class="punctuation token">}</span><span class="punctuation token">;</span></code></pre>
+
+<p>The method uses the model's <code>find()</code>, <code>sort()</code> and <code>exec()</code> functions to return all <code>Author</code> objects sorted by <code>family_name</code> in alphabetic order. The callback passed to the <code>exec()</code> method is called with any errors (or <code>null</code>) as the first parameter, or a list of all authors on success. If there is an error it calls the next middleware function with the error value, and if not it renders the <strong>author_list</strong>(.pug) template, passing the page <code>title</code> and the list of authors (<code>author_list</code>).</p>
+
+<h2 class="highlight-spanned" id="View"><span class="highlight-span">View</span></h2>
+
+<p>Create <strong>/views/author_list.pug</strong> and replace its content with the text below.</p>
+
+<pre class="brush: js line-numbers  language-js"><code class="language-js"><span class="keyword token">extends</span> <span class="class-name token">layout</span>
+
+block content
+  h1<span class="operator token">=</span> title
+
+  ul
+    each author <span class="keyword token">in</span> author_list
+      li
+        <span class="function token">a</span><span class="punctuation token">(</span>href<span class="operator token">=</span>author<span class="punctuation token">.</span>url<span class="punctuation token">)</span> #<span class="punctuation token">{</span>author<span class="punctuation token">.</span>name<span class="punctuation token">}</span>
+        <span class="operator token">|</span>  <span class="punctuation token">(</span>#<span class="punctuation token">{</span>author<span class="punctuation token">.</span>date_of_birth<span class="punctuation token">}</span> <span class="operator token">-</span> #<span class="punctuation token">{</span>author<span class="punctuation token">.</span>date_of_death<span class="punctuation token">}</span><span class="punctuation token">)</span>
+
+    <span class="keyword token">else</span>
+      li There are no authors<span class="punctuation token">.</span></code></pre>
+
+<p>The view follows exactly the same pattern as our other templates.</p>
+
+<h2 class="highlight-spanned" id="What_does_it_look_like"><span class="highlight-span">What does it look like?</span></h2>
+
+<p>Run the application and open your browser to <a class="external external-icon" href="http://localhost:3000/" rel="noopener">http://localhost:3000/</a>. Then select the <em>All authors </em>link. If everything is set up correctly, the page should look something like the following screenshot.</p>
+
+<p><img alt="Author List Page - Express Local Library site" src="https://mdn.mozillademos.org/files/14468/LocalLibary_Express_Author_List.png" style="display: block; height: 453px; margin: 0px auto; width: 1200px;"></p>
+
+<div class="note">
+<p><strong>Note:</strong> The appearance of the author <em>lifespan </em>dates is ugly! You can improve this using the <a href="https://developer.mozilla.org/en-US/docs/Learn/Server-side/Express_Nodejs/Displaying_data#date_formatting">same approach</a> as we used for the <code>BookInstance</code> list (adding the virtual property for the lifespan to the <code>Author</code> model). This time, however, there are missing dates, and references to nonexistent properties are ignored unless strict mode is in effect. <code>moment()</code> returns the current time, and you don't want missing dates to be formatted as if they were today. One way to deal with this is to define the body of the function that returns a formatted date so it returns a blank string unless the date actually exists. For example:</p>
+
+<p><code>return this.date_of_birth ? moment(this.date_of_birth).format('YYYY-MM-DD') : '';</code></p>
+</div>
+
+<h2 id="Genre_list_page—challenge!Edit">Genre list page—challenge!<a class="button section-edit only-icon" href="https://developer.mozilla.org/en-US/docs/Learn/Server-side/Express_Nodejs/Displaying_data$edit#Genre_list_page—challenge!" rel="nofollow, noindex"><span>Edit</span></a></h2>
+
+<p>In this section you should implement your own genre list page. The page should display a list of all genres in the database, with each genre linked to its associated detail page. A screenshot of the expected result is shown below.</p>
+
+<p><img alt="Genre List - Express Local Library site" src="https://mdn.mozillademos.org/files/14460/LocalLibary_Express_Genre_List.png" style="border-style: solid; border-width: 1px; display: block; height: 346px; margin: 0px auto; width: 600px;"></p>
+
+<p>The genre list controller function needs to get a list of all <code>Genre</code> instances, and then pass these to the template for rendering.</p>
+
+<ol>
+ <li>You will need to edit <code>genre_list()</code> in <strong>/controllers/genreController.js</strong>. </li>
+ <li>The implementation is almost exactly the same as the <code>author_list()</code> controller.
+  <ul>
+   <li>Sort the results by name, in ascending order.</li>
+  </ul>
+ </li>
+ <li>The template to be rendered should be named <strong>genre_list.pug</strong>.</li>
+ <li>The template to be rendered should be passed the variables <code>title</code> ('Genre List') and <code>genre_list</code> (the list of genres returned from your <code>Genre.find()</code> callback.</li>
+ <li>The view should match the screenshot/requirements above (this should have a very similar structure/format to the Author list view, except for the fact that genres do not have dates).</li>
+</ol>
+
+<h2 id="Next_steps">Next steps</h2>
+
+<p>Return to <a href="/en-US/docs/Learn/Server-side/Express_Nodejs/Displaying_data">Express Tutorial Part 5: Displaying library data</a>.</p>
+
+<p>Proceed to the next subarticle of part 5: <a href="/en-US/docs/Learn/Server-side/Express_Nodejs/Displaying_data/Genre_detail_page">Genre detail page</a>.</p>
diff --git a/files/ja/learn/server-side/express_nodejs/displaying_data/book_detail_page/index.html b/files/ja/learn/server-side/express_nodejs/displaying_data/book_detail_page/index.html
new file mode 100644
index 0000000000..f2080e6109
--- /dev/null
+++ b/files/ja/learn/server-side/express_nodejs/displaying_data/book_detail_page/index.html
@@ -0,0 +1,112 @@
+---
+title: 本の詳細ページ
+slug: Learn/Server-side/Express_Nodejs/Displaying_data/Book_detail_page
+translation_of: Learn/Server-side/Express_Nodejs/Displaying_data/Book_detail_page
+---
+<p>The <em>Book detail page</em> needs to display the information for a specific <code>Book</code>, identified using its (automatically generated) <code>_id</code> field value, along with information about each associated copy in the libary (<code>BookInstance</code>). Wherever we display an author, genre, or book instance, these should be linked to the associated detail page for that item.</p>
+
+<h2 id="Controller">Controller</h2>
+
+<p>Open <strong>/controllers/bookController.js</strong>. Find the exported <code>book_detail()</code> controller method and replace it with the following code.</p>
+
+<pre class="brush: js">// Display detail page for a specific book.
+exports.book_detail = function(req, res, next) {
+
+<strong>    async.parallel({
+        book: function(callback) {
+
+            Book.findById(req.params.id)
+              .populate('author')
+              .populate('genre')
+              .exec(callback);
+        },
+        book_instance: function(callback) {
+
+          BookInstance.find({ 'book': req.params.id })
+          .exec(callback);
+        },
+    }, function(err, results) {
+        if (err) { return next(err); }
+        if (results.book==null) { // No results.
+            var err = new Error('Book not found');
+            err.status = 404;
+            return next(err);
+        }
+        // Successful, so render.
+        res.render('book_detail', { title: 'Title', book: results.book, book_instances: results.book_instance } );
+    });</strong>
+
+};
+
+</pre>
+
+<div class="note">
+<p><strong>Note:</strong> We don't need to require <em>async</em> and <em>BookInstance</em>, as we already imported those modules when we implemented the home page controller.</p>
+</div>
+
+<p>The method uses <code>async.parallel()</code> to find the <code>Book</code> and its associated copies (<code>BookInstances</code>) in parallel. The approach is exactly the same as described for the <em>Genre detail page</em> above.</p>
+
+<h2 id="View">View</h2>
+
+<p>Create <strong>/views/book_detail.pug</strong> and add the text below.</p>
+
+<pre class="brush: js">extends layout
+
+block content
+  h1 #{title}: #{book.title}
+
+  p #[strong Author:]
+    a(href=book.author.url) #{book.author.name}
+  p #[strong Summary:] #{book.summary}
+  p #[strong ISBN:] #{book.isbn}
+  p #[strong Genre:]&amp;nbsp;
+    each val, index in book.genre
+      a(href=val.url) #{val.name}
+      if index &lt; book.genre.length - 1
+        |,
+
+  div(style='margin-left:20px;margin-top:20px')
+    h4 Copies
+
+    each val in book_instances
+      hr
+      if val.status=='Available'
+        <strong>p.text-success</strong> #{val.status}
+      else if val.status=='Maintenance'
+        p.text-danger #{val.status}
+      else
+        p.text-warning #{val.status}
+      p #[strong Imprint:] #{val.imprint}
+      if val.status!='Available'
+        p #[strong Due back:] #{val.due_back}
+      p #[strong Id:]&amp;nbsp;
+        a(href=val.url) #{val._id}
+
+    else
+      p There are no copies of this book in the library.
+</pre>
+
+<p>Almost everything in this template has been demonstrated in previous sections.</p>
+
+<div class="note">
+<p><strong>Note:</strong> The list of genres associated with the book is implemented in the template as below. This adds a comma after every genre associated with the book except for the last one.</p>
+
+<pre>  p #[strong Genre:]
+    each val, index in book.genre
+      a(href=val.url) #{val.name}
+      if index &lt; book.genre.length - 1
+        |, </pre>
+</div>
+
+<h2 id="What_does_it_look_like">What does it look like?</h2>
+
+<p>Run the application and open your browser to <a href="http://localhost:3000/">http://localhost:3000/</a>. Select the <em>All books</em> link, then select one of the books. If everything is set up correctly, your page should look something like the following screenshot.</p>
+
+<p><img alt="Book Detail Page - Express Local Library site" src="https://mdn.mozillademos.org/files/14470/LocalLibary_Express_Book_Detail.png" style="border-style: solid; border-width: 1px; display: block; height: 616px; margin: 0px auto; width: 1200px;"></p>
+
+<h2 id="Next_steps">Next steps</h2>
+
+<ul>
+ <li>Return to <a href="/en-US/docs/Learn/Server-side/Express_Nodejs/Displaying_data">Express Tutorial Part 5: Displaying library data</a>.</li>
+ <li>Proceed to the next subarticle of part 5: <a href="/en-US/docs/Learn/Server-side/Express_Nodejs/Displaying_data/Author_detail_page">Author detail page</a>.</li>
+</ul>
diff --git a/files/ja/learn/server-side/express_nodejs/displaying_data/book_list_page/index.html b/files/ja/learn/server-side/express_nodejs/displaying_data/book_list_page/index.html
new file mode 100644
index 0000000000..4dfc9c5a5e
--- /dev/null
+++ b/files/ja/learn/server-side/express_nodejs/displaying_data/book_list_page/index.html
@@ -0,0 +1,68 @@
+---
+title: ブックリストページ
+slug: Learn/Server-side/Express_Nodejs/Displaying_data/Book_list_page
+translation_of: Learn/Server-side/Express_Nodejs/Displaying_data/Book_list_page
+---
+<p>Next we'll implement our book list page. This page needs to display a list of all books in the database along with their author, with each book title being a hyperlink to its associated book detail page.</p>
+
+<h2 class="highlight-spanned" id="Controller"><span class="highlight-span">Controller</span></h2>
+
+<p>The book list controller function needs to get a list of all <code>Book</code> objects in the database, and then pass these to the template for rendering.</p>
+
+<p>Open <strong>/controllers/bookController.js</strong>. Find the exported <code>book_list()</code> controller method and replace it with the following code.</p>
+
+<pre class="brush: js line-numbers  language-js"><code class="language-js"><span class="comment token">// Display list of all Books.</span>
+exports<span class="punctuation token">.</span>book_list <span class="operator token">=</span> <span class="keyword token">function</span><span class="punctuation token">(</span>req<span class="punctuation token">,</span> res<span class="punctuation token">,</span> next<span class="punctuation token">)</span> <span class="punctuation token">{</span>
+
+  Book<span class="punctuation token">.</span><span class="function token">find</span><span class="punctuation token">(</span><span class="punctuation token">{</span><span class="punctuation token">}</span><span class="punctuation token">,</span> <span class="string token">'title author'</span><span class="punctuation token">)</span>
+    <span class="punctuation token">.</span><span class="function token">populate</span><span class="punctuation token">(</span><span class="string token">'author'</span><span class="punctuation token">)</span>
+    <span class="punctuation token">.</span><span class="function token">exec</span><span class="punctuation token">(</span><span class="keyword token">function</span> <span class="punctuation token">(</span>err<span class="punctuation token">,</span> list_books<span class="punctuation token">)</span> <span class="punctuation token">{</span>
+      <span class="keyword token">if</span> <span class="punctuation token">(</span>err<span class="punctuation token">)</span> <span class="punctuation token">{</span> <span class="keyword token">return</span> <span class="function token">next</span><span class="punctuation token">(</span>err<span class="punctuation token">)</span><span class="punctuation token">;</span> <span class="punctuation token">}</span>
+      <span class="comment token">//Successful, so render</span>
+      res<span class="punctuation token">.</span><span class="function token">render</span><span class="punctuation token">(</span><span class="string token">'book_list'</span><span class="punctuation token">,</span> <span class="punctuation token">{</span> title<span class="punctuation token">:</span> <span class="string token">'Book List'</span><span class="punctuation token">,</span> book_list<span class="punctuation token">:</span> list_books <span class="punctuation token">}</span><span class="punctuation token">)</span><span class="punctuation token">;</span>
+    <span class="punctuation token">}</span><span class="punctuation token">)</span><span class="punctuation token">;</span>
+
+<span class="punctuation token">}</span><span class="punctuation token">;</span></code></pre>
+
+<p>The method uses the model's <code>find()</code> function to return all <code>Book</code> objects, selecting to return only the <code>title</code> and <code>author</code> as we don't need the other fields (it will also return the <code>_id</code> and virtual fields). Here we also call <code>populate()</code> on <code>Book</code>, specifying the <code>author</code> field—this will replace the stored book author id with the full author details.</p>
+
+<p>On success, the callback passed to the query renders the <strong>book_list</strong>(.pug) template, passing the <code>title</code> and <code>book_list</code> (list of books with authors) as variables.</p>
+
+<h2 class="highlight-spanned" id="View"><span class="highlight-span">View</span></h2>
+
+<p>Create <strong>/views/book_list.pug</strong> and copy in the text below.</p>
+
+<pre class="brush: js line-numbers  language-js"><code class="language-js"><span class="keyword token">extends</span> <span class="class-name token">layout</span>
+
+block content
+  h1<span class="operator token">=</span> title
+
+  ul
+    each book <span class="keyword token">in</span> book_list
+      li
+        <span class="function token">a</span><span class="punctuation token">(</span>href<span class="operator token">=</span>book<span class="punctuation token">.</span>url<span class="punctuation token">)</span> #<span class="punctuation token">{</span>book<span class="punctuation token">.</span>title<span class="punctuation token">}</span>
+        <span class="operator token">|</span>  <span class="punctuation token">(</span>#<span class="punctuation token">{</span>book<span class="punctuation token">.</span>author<span class="punctuation token">.</span>name<span class="punctuation token">}</span><span class="punctuation token">)</span>
+
+    <span class="keyword token">else</span>
+      li There are no books<span class="punctuation token">.</span></code></pre>
+
+<p>The view extends the <strong>layout.pug</strong> base template and overrides the <code>block</code> named '<strong>content</strong>'. It displays the <code>title</code> we passed in from the controller (via the <code>render()</code> method) and then iterates through the <code>book_list</code> variable using the <code>each</code>-<code>in</code>-<code>else</code> syntax. A list item is created for each book displaying the book title as a link to the book's detail page followed by the author name. If there are no books in the <code>book_list</code> then the <code>else</code> clause is executed, and displays the text 'There are no books.'</p>
+
+<div class="note">
+<p><strong>Note:</strong> We use <code>book.url</code> to provide the link to the detail record for each book (we've implemented this route, but not the page yet). This is a virtual property of the <code>Book</code> model which uses the model instance's <code>_id</code> field to produce a unique URL path.</p>
+</div>
+
+<p>Of interest here is that each book is defined as two lines, using the pipe for the second line (highlighted above). This approach is needed because if the author name were on the previous line then it would be part of the hyperlink.</p>
+
+<h2 class="highlight-spanned" id="What_does_it_look_like"><span class="highlight-span">What does it look like?</span></h2>
+
+<p>Run the application (see <a href="https://developer.mozilla.org/en-US/docs/Learn/Server-side/Express_Nodejs/routes#Testing_the_routes">Testing the routes</a> for the relevant commands) and open your browser to <a class="external external-icon" href="http://localhost:3000/" rel="noopener">http://localhost:3000/</a>. Then select the <em>All books </em>link. If everything is set up correctly, your site should look something like the following screenshot.</p>
+
+<p><img alt="Book List Page - Express Local Library site" src="https://mdn.mozillademos.org/files/14464/LocalLibary_Express_Book_List.png" style="border-style: solid; border-width: 1px; display: block; height: 387px; margin: 0px auto; width: 918px;"></p>
+
+<h2 id="Next_steps">Next steps</h2>
+
+<ul>
+ <li>Return to <a href="/en-US/docs/Learn/Server-side/Express_Nodejs/Displaying_data">Express Tutorial Part 5: Displaying library data</a>.</li>
+ <li>Proceed to the next subarticle of part 5: <a href="/en-US/docs/Learn/Server-side/Express_Nodejs/Displaying_data/BookInstance_list_page">BookInstance list page</a>.</li>
+</ul>
diff --git a/files/ja/learn/server-side/express_nodejs/displaying_data/bookinstance_detail_page_and_challenge/index.html b/files/ja/learn/server-side/express_nodejs/displaying_data/bookinstance_detail_page_and_challenge/index.html
new file mode 100644
index 0000000000..3c6cace6a5
--- /dev/null
+++ b/files/ja/learn/server-side/express_nodejs/displaying_data/bookinstance_detail_page_and_challenge/index.html
@@ -0,0 +1,91 @@
+---
+title: ブックインスタンス詳細ページとチャレンジ
+slug: >-
+  Learn/Server-side/Express_Nodejs/Displaying_data/BookInstance_detail_page_and_challenge
+translation_of: >-
+  Learn/Server-side/Express_Nodejs/Displaying_data/BookInstance_detail_page_and_challenge
+---
+<h2 id="BookInstance_detail_page">BookInstance detail page</h2>
+
+<p>The <code>BookInstance</code> detail page needs to display the information for each <code>BookInstance</code>, identified using its (automatically generated) <code>_id</code> field value. This will include the <code>Book</code> name (as a link to the <em>Book detail page</em>) along with other information in the record.</p>
+
+<h3 id="Controller">Controller</h3>
+
+<p>Open <strong>/controllers/bookinstanceController.js</strong>. Find the exported <code>bookinstance_detail()</code> controller method and replace it with the following code.</p>
+
+<pre class="brush: js">// Display detail page for a specific BookInstance.
+exports.bookinstance_detail = function(req, res, next) {
+
+<strong>    BookInstance.findById(req.params.id)
+    .populate('book')
+    .exec(function (err, bookinstance) {
+      if (err) { return next(err); }
+      if (bookinstance==null) { // No results.
+          var err = new Error('Book copy not found');
+          err.status = 404;
+          return next(err);
+        }
+      // Successful, so render.
+      res.render('bookinstance_detail', { title: 'Book:', bookinstance:  bookinstance});
+    })</strong>
+
+};
+</pre>
+
+<p>The method calls <code>BookInstance.findById()</code> with the ID of a specific book instance extracted from the URL (using the route), and accessed within the controller via the request parameters: <code style="font-style: normal; font-weight: normal;">req.params.id</code>). It then calls <code>populate()</code> to get the details of the associated <code>Book</code>.</p>
+
+<h3 id="View">View</h3>
+
+<p>Create <strong>/views/bookinstance_detail.pug</strong> and copy in the content below.</p>
+
+<pre class="brush: js">extends layout
+
+block content
+
+<strong>  h1 ID: #{bookinstance._id}</strong>
+
+  p #[strong Title:]
+    a(href=bookinstance.book.url) #{bookinstance.book.title}
+  p #[strong Imprint:] #{bookinstance.imprint}
+
+  p #[strong Status:]
+    if bookinstance.status=='Available'
+      span.text-success #{bookinstance.status}
+    else if bookinstance.status=='Maintenance'
+      span.text-danger #{bookinstance.status}
+    else
+      span.text-warning #{bookinstance.status}
+
+  if bookinstance.status!='Available'
+    p #[strong Due back:] #{bookinstance.due_back}
+</pre>
+
+<p>Everything in this template has been demonstrated in previous sections.</p>
+
+<h3 id="What_does_it_look_like">What does it look like?</h3>
+
+<p>Run the application and open your browser to <a href="http://localhost:3000/">http://localhost:3000/</a>. Select the <em>All book-instances</em> link, then select one of the items. If everything is set up correctly, your site should look something like the following screenshot.</p>
+
+<p><img alt="BookInstance Detail Page - Express Local Library site" src="https://mdn.mozillademos.org/files/14472/LocalLibary_Express_BookInstance_Detail.png" style="border-style: solid; border-width: 1px; display: block; height: 362px; margin: 0px auto; width: 1000px;"></p>
+
+<h2 id="Challenge">Challenge</h2>
+
+<p>Currently most <em>dates</em> displayed on the site use the default JavaScript format (e.g. <em>Tue Dec 06 2016 15:49:58 GMT+1100 (AUS Eastern Daylight Time)</em>. The challenge for this article is to improve the appearance of the date display for <code>Author</code> lifespan information (date of death/birth) and for <em>BookInstance detail</em> pages to use the format: December 6th, 2016.</p>
+
+<div class="note">
+<p><strong>Note:</strong> You can use the <a href="#date_formatting">same approach</a> as we used for the <em>Book Instance List</em> (adding the virtual property for the lifespan to the <code>Author</code> model and use <a href="https://www.npmjs.com/package/moment">moment</a> to format the date strings).</p>
+</div>
+
+<p>The requirements to meet this challenge:</p>
+
+<ol>
+ <li>Replace the variable <code>due_back</code> with <code>due_back_formatted</code> in the <em>BookInstance detail</em> page.</li>
+ <li>Update the <font face="Consolas, Liberation Mono, Courier, monospace">Author</font> module to add a lifespan virtual property. The lifespan should look like: <em>date_of_birth - date_of_death</em>, where both values have the same date format as <code>BookInstance.due_back_formatted</code>.</li>
+ <li>Use <code>Author.lifespan</code> in all views where you currently explicitly use <code>date_of_birth</code> and <code>date_of_death</code>.</li>
+</ol>
+
+<h2 id="Next_steps">Next steps</h2>
+
+<ul>
+ <li>Return to <a href="/en-US/docs/Learn/Server-side/Express_Nodejs/Displaying_data">Express Tutorial Part 5: Displaying library data</a>.</li>
+</ul>
diff --git a/files/ja/learn/server-side/express_nodejs/displaying_data/bookinstance_list_page/index.html b/files/ja/learn/server-side/express_nodejs/displaying_data/bookinstance_list_page/index.html
new file mode 100644
index 0000000000..9bc7ee305f
--- /dev/null
+++ b/files/ja/learn/server-side/express_nodejs/displaying_data/bookinstance_list_page/index.html
@@ -0,0 +1,69 @@
+---
+title: ブックインスタンスリストページ
+slug: Learn/Server-side/Express_Nodejs/Displaying_data/BookInstance_list_page
+translation_of: Learn/Server-side/Express_Nodejs/Displaying_data/BookInstance_list_page
+---
+<p>Next we'll implement our list of all book copies (<code>BookInstance</code>) in the library. This page needs to include the title of the <code>Book</code> associated with each <code>BookInstance</code> (linked to its detail page) along with other information in the <code>BookInstance</code> model, including the status, imprint, and unique id of each copy. The unique id text should be linked to the <code>BookInstance</code> detail page.</p>
+
+<h2 class="highlight-spanned" id="Controller"><span class="highlight-span">Controller</span></h2>
+
+<p>The <code>BookInstance</code> list controller function needs to get a list of all book instances, populate the associated book information, and then pass the list to the template for rendering.</p>
+
+<p>Open <strong>/controllers/bookinstanceController.js</strong>. Find the exported <code>bookinstance_list()</code> controller method and replace it with the following code (the changed code is shown in bold).</p>
+
+<pre class="brush: js line-numbers  language-js"><code class="language-js"><span class="comment token">// Display list of all BookInstances.</span>
+exports<span class="punctuation token">.</span>bookinstance_list <span class="operator token">=</span> <span class="keyword token">function</span><span class="punctuation token">(</span>req<span class="punctuation token">,</span> res<span class="punctuation token">,</span> next<span class="punctuation token">)</span> <span class="punctuation token">{</span>
+
+  <strong>BookInstance<span class="punctuation token">.</span><span class="function token">find</span><span class="punctuation token">(</span><span class="punctuation token">)</span>
+    <span class="punctuation token">.</span><span class="function token">populate</span><span class="punctuation token">(</span><span class="string token">'book'</span><span class="punctuation token">)</span>
+    <span class="punctuation token">.</span><span class="function token">exec</span><span class="punctuation token">(</span><span class="keyword token">function</span> <span class="punctuation token">(</span>err<span class="punctuation token">,</span> list_bookinstances<span class="punctuation token">)</span> <span class="punctuation token">{</span>
+      <span class="keyword token">if</span> <span class="punctuation token">(</span>err<span class="punctuation token">)</span> <span class="punctuation token">{</span> <span class="keyword token">return</span> <span class="function token">next</span><span class="punctuation token">(</span>err<span class="punctuation token">)</span><span class="punctuation token">;</span> <span class="punctuation token">}</span>
+      <span class="comment token">// Successful, so render</span>
+      res<span class="punctuation token">.</span><span class="function token">render</span><span class="punctuation token">(</span><span class="string token">'bookinstance_list'</span><span class="punctuation token">,</span> <span class="punctuation token">{</span> title<span class="punctuation token">:</span> <span class="string token">'Book Instance List'</span><span class="punctuation token">,</span> bookinstance_list<span class="punctuation token">:</span> list_bookinstances <span class="punctuation token">}</span><span class="punctuation token">)</span><span class="punctuation token">;</span>
+    <span class="punctuation token">}</span><span class="punctuation token">)</span><span class="punctuation token">;</span></strong>
+
+<span class="punctuation token">}</span><span class="punctuation token">;</span></code></pre>
+
+<p>The method uses the model's <code>find()</code> function to return all <code>BookInstance</code> objects. It then daisy-chains a call to <code>populate()</code> with the <code>book</code> field—this will replace the book id stored for each <code>BookInstance</code> with a full <code>Book</code> document.</p>
+
+<p>On success, the callback passed to the query renders the <strong>bookinstance_list</strong>(.pug) template, passing the <code>title</code> and <code>bookinstance_list</code> as variables.</p>
+
+<h2 class="highlight-spanned" id="View"><span class="highlight-span">View</span></h2>
+
+<p>Create <strong>/views/bookinstance_list.pug</strong> and copy in the text below.</p>
+
+<pre class="brush: js line-numbers  language-js"><code class="language-js"><span class="keyword token">extends</span> <span class="class-name token">layout</span>
+
+block content
+  h1<span class="operator token">=</span> title
+
+  ul
+    each val <span class="keyword token">in</span> bookinstance_list
+      li
+        <span class="function token">a</span><span class="punctuation token">(</span>href<span class="operator token">=</span>val<span class="punctuation token">.</span>url<span class="punctuation token">)</span> #<span class="punctuation token">{</span>val<span class="punctuation token">.</span>book<span class="punctuation token">.</span>title<span class="punctuation token">}</span> <span class="punctuation token">:</span> #<span class="punctuation token">{</span>val<span class="punctuation token">.</span>imprint<span class="punctuation token">}</span> <span class="operator token">-</span>
+        <span class="keyword token">if</span> val<span class="punctuation token">.</span>status<span class="operator token">==</span><span class="string token">'Available'</span>
+          span<span class="punctuation token">.</span>text<span class="operator token">-</span>success #<span class="punctuation token">{</span>val<span class="punctuation token">.</span>status<span class="punctuation token">}</span>
+        <span class="keyword token">else</span> <span class="keyword token">if</span> val<span class="punctuation token">.</span>status<span class="operator token">==</span><span class="string token">'Maintenance'</span>
+          span<span class="punctuation token">.</span>text<span class="operator token">-</span>danger #<span class="punctuation token">{</span>val<span class="punctuation token">.</span>status<span class="punctuation token">}</span>
+        <span class="keyword token">else</span>
+          span<span class="punctuation token">.</span>text<span class="operator token">-</span>warning #<span class="punctuation token">{</span>val<span class="punctuation token">.</span>status<span class="punctuation token">}</span>
+        <span class="keyword token">if</span> val<span class="punctuation token">.</span>status<span class="operator token">!=</span><span class="string token">'Available'</span>
+          span <span class="function token"> </span><span class="punctuation token">(</span>Due<span class="punctuation token">:</span> #<span class="punctuation token">{</span>val<span class="punctuation token">.</span>due_back<span class="punctuation token">}</span> <span class="punctuation token">)</span>
+
+    <span class="keyword token">else</span>
+      li There are no book copies <span class="keyword token">in</span> <span class="keyword token">this</span> library<span class="punctuation token">.</span></code></pre>
+
+<p>This view is much the same as all the others. It extends the layout, replacing the <em>content</em> block, displays the <code>title</code> passed in from the controller, and iterates through all the book copies in <code>bookinstance_list</code>. For each copy we display its status (colour coded) and if the book is not available, its expected return date. One new feature is introduced—we can use dot notation after a tag to assign a class. So <code>span.text-success</code> will be compiled to <code>&lt;span class="text-success"&gt;</code> (and might also be written in Pug as <code>span(class="text-success")</code>.</p>
+
+<h2 class="highlight-spanned" id="What_does_it_look_like"><span class="highlight-span">What does it look like?</span></h2>
+
+<p>Run the application, open your browser to <a class="external external-icon" href="http://localhost:3000/" rel="noopener">http://localhost:3000/</a>, then select the <em>All book-instances </em>link. If everything is set up correctly, your site should look something like the following screenshot.</p>
+
+<p><img alt="BookInstance List Page - Express Local Library site" src="https://mdn.mozillademos.org/files/14474/LocalLibary_Express_BookInstance_List.png" style="border-style: solid; border-width: 1px; display: block; height: 322px; margin: 0px auto; width: 1200px;"></p>
+
+<h2 id="Next_steps">Next steps</h2>
+
+<ul>
+ <li>Return to <a href="/en-US/docs/Learn/Server-side/Express_Nodejs/Displaying_data">Express Tutorial Part 5: Displaying library data</a>.</li>
+ <li>Proceed to the next subarticle of part 5: <a href="/en-US/docs/Learn/Server-side/Express_Nodejs/Displaying_data/Date_formatting_using_moment">Date formatting using moment</a>.</li>
+</ul>
diff --git a/files/ja/learn/server-side/express_nodejs/displaying_data/date_formatting_using_moment/index.html b/files/ja/learn/server-side/express_nodejs/displaying_data/date_formatting_using_moment/index.html
new file mode 100644
index 0000000000..58851991b5
--- /dev/null
+++ b/files/ja/learn/server-side/express_nodejs/displaying_data/date_formatting_using_moment/index.html
@@ -0,0 +1,60 @@
+---
+title: moment を使用した日付のフォーマット
+slug: Learn/Server-side/Express_Nodejs/Displaying_data/Date_formatting_using_moment
+translation_of: Learn/Server-side/Express_Nodejs/Displaying_data/Date_formatting_using_moment
+---
+<p>The default rendering of dates from our models is very ugly: <em>Tue Dec 06 2016 15:49:58 GMT+1100 (AUS Eastern Daylight Time)</em>. In this section we'll show how you can update the <em>BookInstance List</em> page from the previous section to present the <code>due_date</code> field in a more friendly format: December 6th, 2016. </p>
+
+<p>The approach we will use is to create a virtual property in our <code>BookInstance</code> model that returns the formatted date. We'll do the actual formatting using <a class="external external-icon" href="https://www.npmjs.com/package/moment" rel="noopener">moment</a>, a lightweight JavaScript date library for parsing, validating, manipulating, and formatting dates.</p>
+
+<div class="note">
+<p><strong>Note:</strong> It is possible to use <em>moment</em> to format the strings directly in our Pug templates, or we could format the string in a number of other places. Using a virtual property allows us to get the formatted date in exactly the same way as we get the <code>due_date</code> currently. </p>
+</div>
+
+<h2 class="highlight-spanned" id="Install_moment"><span class="highlight-span">Install moment</span></h2>
+
+<p>Enter the following command in the root of the project:</p>
+
+<pre class="brush: bash line-numbers  language-bash"><code class="language-bash">npm install moment</code></pre>
+
+<h2 class="highlight-spanned" id="Create_the_virtual_property"><span class="highlight-span">Create the virtual property</span></h2>
+
+<ol>
+ <li>Open <strong>./models/bookinstance.js</strong>.</li>
+ <li>At the top of the page, import <em>moment</em>.
+  <pre class="brush: js line-numbers  language-js"><code class="language-js"><span class="keyword token">var</span> moment <span class="operator token">=</span> <span class="function token">require</span><span class="punctuation token">(</span><span class="string token">'moment'</span><span class="punctuation token">)</span><span class="punctuation token">;</span></code></pre>
+ </li>
+</ol>
+
+<p>Add the virtual property <code>due_back_formatted</code> just after the url property.</p>
+
+<pre class="brush: js line-numbers  language-js"><code class="language-js">BookInstanceSchema
+<span class="punctuation token">.</span><span class="function token">virtual</span><span class="punctuation token">(</span><span class="string token">'due_back_formatted'</span><span class="punctuation token">)</span>
+<span class="punctuation token">.</span><span class="keyword token">get</span><span class="punctuation token">(</span><span class="keyword token">function</span> <span class="punctuation token">(</span><span class="punctuation token">)</span> <span class="punctuation token">{</span>
+  <span class="keyword token">return</span> <span class="function token">moment</span><span class="punctuation token">(</span><span class="keyword token">this</span><span class="punctuation token">.</span>due_back<span class="punctuation token">)</span><span class="punctuation token">.</span><span class="function token">format</span><span class="punctuation token">(</span><span class="string token">'MMMM Do, YYYY'</span><span class="punctuation token">)</span><span class="punctuation token">;</span>
+<span class="punctuation token">}</span><span class="punctuation token">)</span><span class="punctuation token">;</span></code></pre>
+
+<div class="note">
+<p><strong>Note:</strong> The format method can display a date using almost any pattern. The syntax for representing different date components can be found in the <a class="external external-icon" href="http://momentjs.com/docs/#/displaying/" rel="noopener">moment documentation</a>.</p>
+</div>
+
+<h2 class="highlight-spanned" id="Update_the_view"><span class="highlight-span">Update the view</span></h2>
+
+<p>Open <strong>/views/bookinstance_list.pug</strong> and replace <code>due_back</code> with <code>due_back_formatted</code>.</p>
+
+<pre class="brush: js line-numbers  language-js"><code class="language-js">      <span class="keyword token">if</span> val<span class="punctuation token">.</span>status<span class="operator token">!=</span><span class="string token">'Available'</span>
+        <span class="comment token">//span  (Due: #{val.due_back} )</span>
+        span <span class="function token"> </span><span class="punctuation token">(</span>Due<span class="punctuation token">:</span> #<span class="punctuation token">{</span>val<span class="punctuation token">.</span>due_back_formatted<span class="punctuation token">}</span> <span class="punctuation token">)</span>       </code></pre>
+
+<p>That's it. If you go to <em>All book-instances</em> in the sidebar, you should now see all the due dates are far more attractive!</p>
+
+<p> </p>
+
+<h2 id="Next_steps">Next steps</h2>
+
+<ul>
+ <li>Return to <a href="/en-US/docs/Learn/Server-side/Express_Nodejs/Displaying_data">Express Tutorial Part 5: Displaying library data</a>.</li>
+ <li>Proceed to the next subarticle of part 5: <a href="/en-US/docs/Learn/Server-side/Express_Nodejs/Displaying_data/Author_list_page">Author list page and Genre list page challenge</a>.</li>
+</ul>
+
+<p> </p>
diff --git a/files/ja/learn/server-side/express_nodejs/displaying_data/flow_control_using_async/index.html b/files/ja/learn/server-side/express_nodejs/displaying_data/flow_control_using_async/index.html
new file mode 100644
index 0000000000..0639f79bc3
--- /dev/null
+++ b/files/ja/learn/server-side/express_nodejs/displaying_data/flow_control_using_async/index.html
@@ -0,0 +1,137 @@
+---
+title: async を使用した非同期フロー制御
+slug: Learn/Server-side/Express_Nodejs/Displaying_data/flow_control_using_async
+translation_of: Learn/Server-side/Express_Nodejs/Displaying_data/flow_control_using_async
+---
+<p> </p>
+
+<p>ローカルライブラリのいくつかのコントローラは、特定の順序、あるいは平行して要求される複数の非同期リクエストに依存しています。一般的に、操作の流れを制御し、必要となるすべての情報を取得したときにページを表示するために、<a href="https://www.npmjs.com/package/async">async</a>モジュール が使用されます。</p>
+
+<div class="note">
+<p><strong>註:</strong> この方法以外にも、近年 JavaScript に導入された Promise などの非同期的な振る舞いや操作の流れを制御する方法があります。</p>
+</div>
+
+<p>Async はいくつもの有用なメソッドを持っています (この<a href="http://caolan.github.io/async/docs.html">ドキュメント</a>を参照してください)。 主要なメソッドをいくつか紹介します。:</p>
+
+<ul>
+ <li><code><a class="external external-icon" href="http://caolan.github.io/async/docs.html#parallel" rel="noopener">async.parallel()</a></code> は平行して行われる操作を実行します。</li>
+ <li><code><a class="external external-icon" href="http://caolan.github.io/async/docs.html#series" rel="noopener">async.series()</a></code> は非同期操作を特定の順序で実行することを保証する必要があるときに使用します。</li>
+ <li><code><a class="external external-icon" href="http://caolan.github.io/async/docs.html#waterfall" rel="noopener">async.waterfall()</a></code> はそれぞれの操作がそれ以前の操作の結果に依存していて、特定の順序で実行する必要がある場合に使用します。</li>
+</ul>
+
+<h2 class="highlight-spanned" id="Why_is_this_needed"><span class="highlight-span">Why is this needed?</span></h2>
+
+<p>Most of the methods we use in <em>Express</em> are asynchronous—you specify an operation to perform, passing a callback. The method returns immediately, and the callback is invoked when the requested operation completes. By convention in <em>Express</em>, callback functions pass an <em>error</em> value as the first parameter (or <code>null</code> on success) and the results from the function (if there are any) as the second parameter.</p>
+
+<p>If a controller only needs to <em>perform <strong>one </strong>asynchronous operation</em> to get the information required to render a page then the implementation is easy—we simply render the template in the callback. The code fragment below shows this for a function that renders the count of a model <code>SomeModel</code> (using the Mongoose <code><a class="external external-icon" href="http://mongoosejs.com/docs/api.html#model_Model.count" rel="noopener">count()</a></code> method):</p>
+
+<pre class="brush: js"><code>exports.some_model_count = function(req, res, next) {
+
+</code>  SomeModel.count({ a_model_field: 'match_value' }, function (err, count) {
+    // ... do something if there is an err
+
+    // On success, render the result by passing count into the render function (here, as the variable 'data').
+    res.render('the_template', { data: count } );
+  });
+<code>}</code>
+</pre>
+
+<p>However what if you need to make <strong>multiple </strong>asynchronous queries, and you can't render the page until all the operations have completed? A naive implementation could "daisy chain" the requests, kicking off subsequent requests in the callback of a previous request, and rendering the response in the final callback. The problem with this approach is that our requests would have to be run in series, even though it might be more efficient to run them in parallel. This could also result in complicated nested code, commonly referred to as <a class="external external-icon" href="http://callbackhell.com/" rel="noopener">callback hell</a>.</p>
+
+<p>A much better solution would be to execute all the requests in parallel and then have a single callback that executes when all of the queries have completed. This is the sort of flow operation that the <em>Async</em> module makes easy!</p>
+
+<h2 class="highlight-spanned" id="Asynchronous_operations_in_parallel"><span class="highlight-span">Asynchronous operations in parallel</span></h2>
+
+<p>The method <code><a class="external external-icon" href="http://caolan.github.io/async/docs.html#parallel" rel="noopener">async.parallel()</a></code> is used to run multiple asynchronous operations in parallel.</p>
+
+<p>The first argument to <code>async.parallel()</code> is a collection of the asynchronous functions to run (an array, object or other iterable). Each function is passed a <code>callback(err, result)</code> which it must call on completion with an error <code>err</code> (which can be <code>null</code>) and an optional <code>results</code> value.</p>
+
+<p>The optional second argument to  <code>async.parallel()</code> is a callback that will be run when all the functions in the first argument have completed. The callback is invoked with an error argument and a result collection that contains the results of the individual asynchronous operations. The result collection is of the same type as the first argument (i.e. if you pass an array of asynchronous functions, the final callback will be invoked with an array of results). If any of the parallel functions reports an error the callback is invoked early (with the error value).</p>
+
+<p>The example below shows how this works when we pass an object as the first argument. As you can see, the results are <em>returned</em> in an object with the same property names as the original functions that were passed in.</p>
+
+<pre class="brush: js line-numbers  language-js"><code class="language-js"><span class="keyword token">async</span><span class="punctuation token">.</span><span class="function token">parallel</span><span class="punctuation token">(</span><span class="punctuation token">{</span>
+  one<span class="punctuation token">:</span> <span class="keyword token">function</span><span class="punctuation token">(</span>callback<span class="punctuation token">)</span> <span class="punctuation token">{</span> <span class="punctuation token">.</span><span class="punctuation token">.</span><span class="punctuation token">.</span> <span class="punctuation token">}</span><span class="punctuation token">,</span>
+  two<span class="punctuation token">:</span> <span class="keyword token">function</span><span class="punctuation token">(</span>callback<span class="punctuation token">)</span> <span class="punctuation token">{</span> <span class="punctuation token">.</span><span class="punctuation token">.</span><span class="punctuation token">.</span> <span class="punctuation token">}</span><span class="punctuation token">,</span>
+  <span class="punctuation token">.</span><span class="punctuation token">.</span><span class="punctuation token">.</span>
+  something_else<span class="punctuation token">:</span> <span class="keyword token">function</span><span class="punctuation token">(</span>callback<span class="punctuation token">)</span> <span class="punctuation token">{</span> <span class="punctuation token">.</span><span class="punctuation token">.</span><span class="punctuation token">.</span> <span class="punctuation token">}</span>
+  <span class="punctuation token">}</span><span class="punctuation token">,</span>
+  <span class="comment token">// optional callback</span>
+  <span class="keyword token">function</span><span class="punctuation token">(</span>err<span class="punctuation token">,</span> results<span class="punctuation token">)</span> <span class="punctuation token">{</span>
+    <span class="comment token">// 'results' is now equal to: {one: 1, two: 2, ..., something_else: some_value}</span>
+  <span class="punctuation token">}</span>
+<span class="punctuation token">)</span><span class="punctuation token">;</span></code></pre>
+
+<p>If you instead pass an array of functions as the first argument, the results will be an array (the array order results will match the original order that the functions were declared—not the order in which they completed).</p>
+
+<h2 class="highlight-spanned" id="Asynchronous_operations_in_series"><span class="highlight-span">Asynchronous operations in series</span></h2>
+
+<p>The method <code><a class="external external-icon" href="http://caolan.github.io/async/docs.html#series" rel="noopener">async.series()</a></code> is used to run multiple asynchronous operations in sequence, when subsequent functions do not depend on the output of earlier functions. It is essentially declared and behaves in the same way as <code>async.parallel()</code>.</p>
+
+<pre class="brush: js line-numbers  language-js"><code class="language-js"><span class="keyword token">async</span><span class="punctuation token">.</span><span class="function token">series</span><span class="punctuation token">(</span><span class="punctuation token">{</span>
+  one<span class="punctuation token">:</span> <span class="keyword token">function</span><span class="punctuation token">(</span>callback<span class="punctuation token">)</span> <span class="punctuation token">{</span> <span class="punctuation token">.</span><span class="punctuation token">.</span><span class="punctuation token">.</span> <span class="punctuation token">}</span><span class="punctuation token">,</span>
+  two<span class="punctuation token">:</span> <span class="keyword token">function</span><span class="punctuation token">(</span>callback<span class="punctuation token">)</span> <span class="punctuation token">{</span> <span class="punctuation token">.</span><span class="punctuation token">.</span><span class="punctuation token">.</span> <span class="punctuation token">}</span><span class="punctuation token">,</span>
+  <span class="punctuation token">.</span><span class="punctuation token">.</span><span class="punctuation token">.</span>
+  something_else<span class="punctuation token">:</span> <span class="keyword token">function</span><span class="punctuation token">(</span>callback<span class="punctuation token">)</span> <span class="punctuation token">{</span> <span class="punctuation token">.</span><span class="punctuation token">.</span><span class="punctuation token">.</span> <span class="punctuation token">}</span>
+  <span class="punctuation token">}</span><span class="punctuation token">,</span>
+  <span class="comment token">// optional callback after the last asynchronous function completes.</span>
+  <span class="keyword token">function</span><span class="punctuation token">(</span>err<span class="punctuation token">,</span> results<span class="punctuation token">)</span> <span class="punctuation token">{</span>
+    <span class="comment token">// 'results' is now equals to: {one: 1, two: 2, ..., something_else: some_value} </span>
+  <span class="punctuation token">}</span>
+<span class="punctuation token">)</span><span class="punctuation token">;</span></code></pre>
+
+<div class="note">
+<p><strong>Note:</strong> The ECMAScript (JavaScript) language specification states that the order of enumeration of an object is undefined, so it is possible that the functions will not be called in the same order as you specify them on all platforms. If the order really is important, then you should pass an array instead of an object, as shown below.</p>
+</div>
+
+<pre class="brush: js line-numbers  language-js"><code class="language-js"><span class="keyword token">async</span><span class="punctuation token">.</span><span class="function token">series</span><span class="punctuation token">(</span><span class="punctuation token">[</span>
+  <span class="keyword token">function</span><span class="punctuation token">(</span>callback<span class="punctuation token">)</span> <span class="punctuation token">{</span>
+    <span class="comment token">// do some stuff ...</span>
+    <span class="function token">callback</span><span class="punctuation token">(</span><span class="keyword token">null</span><span class="punctuation token">,</span> <span class="string token">'one'</span><span class="punctuation token">)</span><span class="punctuation token">;</span>
+  <span class="punctuation token">}</span><span class="punctuation token">,</span>
+  <span class="keyword token">function</span><span class="punctuation token">(</span>callback<span class="punctuation token">)</span> <span class="punctuation token">{</span>
+    <span class="comment token">// do some more stuff ... </span>
+    <span class="function token">callback</span><span class="punctuation token">(</span><span class="keyword token">null</span><span class="punctuation token">,</span> <span class="string token">'two'</span><span class="punctuation token">)</span><span class="punctuation token">;</span>
+  <span class="punctuation token">}</span>
+ <span class="punctuation token">]</span><span class="punctuation token">,</span>
+  <span class="comment token">// optional callback</span>
+  <span class="keyword token">function</span><span class="punctuation token">(</span>err<span class="punctuation token">,</span> results<span class="punctuation token">)</span> <span class="punctuation token">{</span>
+  <span class="comment token">// results is now equal to ['one', 'two'] </span>
+  <span class="punctuation token">}</span>
+<span class="punctuation token">)</span><span class="punctuation token">;</span></code></pre>
+
+<h2 class="highlight-spanned" id="Dependent_asynchronous_operations_in_series"><span class="highlight-span">Dependent asynchronous operations in series</span></h2>
+
+<p>The method <code><a class="external external-icon" href="http://caolan.github.io/async/docs.html#waterfall" rel="noopener">async.waterfall()</a></code> is used to run multiple asynchronous operations in sequence when each operation is dependent on the result of the previous operation.</p>
+
+<p>The callback invoked by each asynchronous function contains <code>null</code> for the first argument and results in subsequent arguments. Each function in the series takes the results arguments of the previous callback as the first parameters, and then a callback function. When all operations are complete, a final callback is invoked with the result of the last operation. The way this works is more clear when you consider the code fragment below (this example is from the <em>async</em> documentation):</p>
+
+<pre class="brush: js line-numbers  language-js"><code class="language-js"><span class="keyword token">async</span><span class="punctuation token">.</span><span class="function token">waterfall</span><span class="punctuation token">(</span><span class="punctuation token">[</span>
+  <span class="keyword token">function</span><span class="punctuation token">(</span>callback<span class="punctuation token">)</span> <span class="punctuation token">{</span>
+    <span class="function token">callback</span><span class="punctuation token">(</span><span class="keyword token">null</span><span class="punctuation token">,</span> <span class="string token">'one'</span><span class="punctuation token">,</span> <span class="string token">'two'</span><span class="punctuation token">)</span><span class="punctuation token">;</span>
+  <span class="punctuation token">}</span><span class="punctuation token">,</span>
+  <span class="keyword token">function</span><span class="punctuation token">(</span>arg1<span class="punctuation token">,</span> arg2<span class="punctuation token">,</span> callback<span class="punctuation token">)</span> <span class="punctuation token">{</span>
+    <span class="comment token">// arg1 now equals 'one' and arg2 now equals 'two' </span>
+    <span class="function token">callback</span><span class="punctuation token">(</span><span class="keyword token">null</span><span class="punctuation token">,</span> <span class="string token">'three'</span><span class="punctuation token">)</span><span class="punctuation token">;</span>
+  <span class="punctuation token">}</span><span class="punctuation token">,</span>
+  <span class="keyword token">function</span><span class="punctuation token">(</span>arg1<span class="punctuation token">,</span> callback<span class="punctuation token">)</span> <span class="punctuation token">{</span>
+    <span class="comment token">// arg1 now equals 'three'</span>
+    <span class="function token">callback</span><span class="punctuation token">(</span><span class="keyword token">null</span><span class="punctuation token">,</span> <span class="string token">'done'</span><span class="punctuation token">)</span><span class="punctuation token">;</span>
+  <span class="punctuation token">}</span>
+<span class="punctuation token">]</span><span class="punctuation token">,</span> <span class="keyword token">function</span> <span class="punctuation token">(</span>err<span class="punctuation token">,</span> result<span class="punctuation token">)</span> <span class="punctuation token">{</span>
+  <span class="comment token">// result now equals 'done'</span>
+<span class="punctuation token">}</span>
+<span class="punctuation token">)</span><span class="punctuation token">;</span></code></pre>
+
+<h2 class="highlight-spanned" id="Installing_async"><span class="highlight-span">Installing async</span></h2>
+
+<p>Install the async module using the NPM package manager so that we can use it in our code. You do this in the usual way, by opening a prompt in the root of the <em>LocalLibrary</em> project and enter the following command:</p>
+
+<pre class="brush: bash line-numbers  language-bash"><code class="language-bash">npm install async</code></pre>
+
+<h2 id="Next_steps">Next steps</h2>
+
+<ul>
+ <li>Return to <a href="/en-US/docs/Learn/Server-side/Express_Nodejs/Displaying_data">Express Tutorial Part 5: Displaying library data</a>.</li>
+ <li>Proceed to the next subarticle of Part 5: <a href="/en-US/docs/Learn/Server-side/Express_Nodejs/Displaying_data/Template_primer">Template primer</a>.</li>
+</ul>
diff --git a/files/ja/learn/server-side/express_nodejs/displaying_data/genre_detail_page/index.html b/files/ja/learn/server-side/express_nodejs/displaying_data/genre_detail_page/index.html
new file mode 100644
index 0000000000..40770c5ef2
--- /dev/null
+++ b/files/ja/learn/server-side/express_nodejs/displaying_data/genre_detail_page/index.html
@@ -0,0 +1,121 @@
+---
+title: ジャンル詳細ページ
+slug: Learn/Server-side/Express_Nodejs/Displaying_data/Genre_detail_page
+translation_of: Learn/Server-side/Express_Nodejs/Displaying_data/Genre_detail_page
+---
+<p>The genre <em>detail</em> page needs to display the information for the particular genre instance using its automatically generated <code>_id</code> field value as the identifier. The page should display the genre name, and a list of all books in the genre with links to each book's details page.</p>
+
+<h2 id="Controller">Controller</h2>
+
+<p>Open <strong>/controllers/genreController.js</strong> and import the <em>async</em> and <em>Book</em> modules at the top of the file.</p>
+
+<pre class="brush: js">var Book = require('../models/book');
+var async = require('async');
+</pre>
+
+<p>Find the exported <code>genre_detail</code><code>()</code> controller method and replace it with the following code.</p>
+
+<pre class="brush: js">// Display detail page for a specific Genre.
+exports.genre_detail = function(req, res, next) {
+
+<strong>    async.parallel({
+        genre: function(callback) {
+            Genre.findById(req.params.id)
+              .exec(callback);
+        },
+
+        genre_books: function(callback) {
+          Book.find({ 'genre': req.params.id })
+          .exec(callback);
+        },
+
+    }, function(err, results) {
+        if (err) { return next(err); }
+        if (results.genre==null) { // No results.
+            var err = new Error('Genre not found');
+            err.status = 404;
+            return next(err);
+        }
+        // Successful, so render
+        res.render('genre_detail', { title: 'Genre Detail', genre: results.genre, genre_books: results.genre_books } );
+    });</strong>
+
+};
+</pre>
+
+<p>The method uses <code>async.parallel()</code> to query the genre name and its associated books in parallel, with the callback rendering the page when (if) both requests complete successfully.</p>
+
+<p>The ID of the required genre record is encoded at the end of the URL and extracted automatically based on the route definition (<strong>/genre/:id</strong>). The ID is accessed within the controller via the request parameters: <code style="font-style: normal; font-weight: normal;">req.params.id</code>. It is used in <code style="font-style: normal; font-weight: normal;">Genre.findById()</code> to get the current genre. It is also used to get all <code>Book</code> objects that have the genre ID in their <code>genre</code> field: <code>Book.find({ 'genre': req.params.id })</code>.</p>
+
+<div class="note">
+<p><strong>Note:</strong> If the genre does not exist in the database (i.e. it may have been deleted) then <code>findById()</code>  will return successfully with no results. In this case we want to display a "not found" page, so we create an <code>Error</code> object and pass it to the <code>next</code> middleware function in the chain. </p>
+
+<pre class="brush: js"><strong>if (results.genre==null) { // No results.
+    var err = new Error('Genre not found');
+    err.status = 404;
+    return next(err);
+}</strong>
+</pre>
+
+<p>The message will then propagate through to our error handling code (this was set up when we <a href="https://developer.mozilla.org/en-US/docs/Learn/Server-side/Express_Nodejs/skeleton_website#error_handling">generated the app skeleton</a> - for more information see <a href="https://developer.mozilla.org/en-US/docs/Learn/Server-side/Express_Nodejs/Introduction#Handling_errors">Handling Errors</a>).</p>
+</div>
+
+<p>The rendered view is <strong>genre_detail</strong> and it is passed variables for the <code>title</code>, <code>genre</code> and the list of books in this genre (<code>genre_books</code>).</p>
+
+<h2 id="View">View</h2>
+
+<p>Create <strong>/views/genre_detail.pug</strong> and fill it with the text below:</p>
+
+<pre class="brush: js">extends layout
+
+block content
+
+  <strong>h1 Genre: #{genre.name}</strong>
+
+  div(style='margin-left:20px;margin-top:20px')
+
+    h4 Books
+
+    dl
+    each book in genre_books
+      dt
+        a(href=book.url) #{book.title}
+      dd #{book.summary}
+
+    else
+      p This genre has no books
+</pre>
+
+<p>The view is very similar to all our other templates. The main difference is that we don't use the <code>title</code> passed in for the first heading (though it is used in the underlying <strong>layout.pug</strong> template to set the page title).</p>
+
+<h2 id="What_does_it_look_like">What does it look like?</h2>
+
+<p>Run the application and open your browser to <a href="http://localhost:3000/">http://localhost:3000/</a>. Select the <em>All genres</em> link, then select one of the genres (e.g. "Fantasy"). If everything is set up correctly, your page should look something like the following screenshot.</p>
+
+<p><img alt="Genre Detail Page - Express Local Library site" src="https://mdn.mozillademos.org/files/14462/LocalLibary_Express_Genre_Detail.png" style="border-style: solid; border-width: 1px; display: block; height: 523px; margin: 0px auto; width: 1000px;"></p>
+
+<div class="note">
+<p>You might get an error similar to this:</p>
+
+<pre class="brush: bash">Cast to ObjectId failed for value " 59347139895ea23f9430ecbb" at path "_id" for model "Genre"
+</pre>
+
+<p>This is a mongoose error coming from the <strong>req.params.id</strong>. To solve this problem, first you need to require mongoose on the <strong>genreController.js</strong> page like this:</p>
+
+<pre class="brush: js"> var mongoose = require('mongoose');
+</pre>
+
+<p>Then use <strong>mongoose.Types.ObjectId() </strong>to convert the id to a that can be used. For example:</p>
+
+<pre class="brush: js">exports.genre_detail = function(req, res, next) {
+    var id = mongoose.Types.ObjectId(req.params.id);
+    ...
+</pre>
+</div>
+
+<h2 id="Next_steps">Next steps</h2>
+
+<ul>
+ <li>Return to <a href="/en-US/docs/Learn/Server-side/Express_Nodejs/Displaying_data">Express Tutorial Part 5: Displaying library data</a>.</li>
+ <li>Proceed to the next subarticle of part 5: <a href="/en-US/docs/Learn/Server-side/Express_Nodejs/Displaying_data/Book_detail_page">Book detail page</a>.</li>
+</ul>
diff --git a/files/ja/learn/server-side/express_nodejs/displaying_data/home_page/index.html b/files/ja/learn/server-side/express_nodejs/displaying_data/home_page/index.html
new file mode 100644
index 0000000000..3e2f337370
--- /dev/null
+++ b/files/ja/learn/server-side/express_nodejs/displaying_data/home_page/index.html
@@ -0,0 +1,133 @@
+---
+title: ホームページ
+slug: Learn/Server-side/Express_Nodejs/Displaying_data/Home_page
+translation_of: Learn/Server-side/Express_Nodejs/Displaying_data/Home_page
+---
+<p>The first page we'll create will be the website home page, which is accessible from either the site (<code>'/'</code>) or catalog (<code>catalog/</code>) root. This will display some static text describing the site, along with dynamically calculated "counts" of different record types in the database.</p>
+
+<p>We've already created a route for the home page. In order to complete the page we need to update our controller function to fetch "counts" of records from the database, and create a view (template) that we can use to render the page.</p>
+
+<h2 id="Route">Route</h2>
+
+<p>We created our index page routes in a <a href="https://developer.mozilla.org/en-US/docs/Learn/Server-side/Express_Nodejs/routes">previous tutorial.</a> As a reminder, all the route functions are defined in <strong>/routes/catalog.js</strong>:</p>
+
+<pre class="brush: js ">// GET catalog home page.
+router.get('/', book_controller.index);  //This actually maps to /catalog/ because we import the route with a /catalog prefix</pre>
+
+<p>Where the callback function parameter (<code>book_controller.index</code>) is defined in <strong>/controllers/bookController.js</strong>:</p>
+
+<pre class="brush: js">exports.index = function(req, res, next) {
+    res.send('NOT IMPLEMENTED: Site Home Page');
+}</pre>
+
+<p>It is this controller function that we extend to get information from our models and then render it using a template (view).</p>
+
+<h2 id="Controller">Controller</h2>
+
+<p>The index controller function needs to fetch information about how many <code>Book</code>, <code>BookInstance</code>, available <code>BookInstance</code>, <code>Author</code>, and <code>Genre</code> records we have in the database, render this data in a template to create an HTML page, and then return it in an HTTP response.</p>
+
+<div class="note">
+<p><strong>Note:</strong> We use the <code><a class="external external-icon" href="http://mongoosejs.com/docs/api.html#model_Model.countDocuments" rel="noopener">countDocuments()</a></code> method to get the number of instances of each model. This is called on a model with an optional set of conditions to match against in the first argument and a callback in the second argument (as discussed in <a href="https://developer.mozilla.org/en-US/docs/Learn/Server-side/Express_Nodejs/mongoose">Using a Database (with Mongoose)</a>, and you can also return a <code>Query</code> and then execute it with a callback later. The callback will be returned when the database returns the count, with an error value (or <code>null</code>) as the first parameter and the count of records (or null if there was an error) as the second parameter.</p>
+
+<pre class="brush: js ">SomeModel.countDocuments({ a_model_field: 'match_value' }, function (err, count) {
+ // ... do something if there is an err
+ // ... do something with the count if there was no error
+ });</pre>
+</div>
+
+<p>Open <strong>/controllers/bookController.js</strong>. Near the top of the file you should see the exported <code>index()</code> function.</p>
+
+<pre class="brush: python ">var Book = require('../models/book')
+
+exports.index = function(req, res, next) {
+ res.send('NOT IMPLEMENTED: Site Home Page');
+}</pre>
+
+<p>Replace all the code above with the following code fragment. The first thing this does is import (<code>require()</code>) all the models (highlighted in bold). We need to do this because we'll be using them to get our counts of records. It then imports the <em>async</em> module.</p>
+
+<pre class="brush: js ">var Book = require('../models/book');
+var Author = require('../models/author');
+var Genre = require('../models/genre');
+var BookInstance = require('../models/bookinstance');
+
+var async = require('async');
+
+exports.index = function(req, res) {
+
+    async.parallel({
+        book_count: function(callback) {
+            Book.countDocuments({}, callback); // Pass an empty object as match condition to find all documents of this collection
+        },
+        book_instance_count: function(callback) {
+            BookInstance.countDocuments({}, callback);
+        },
+        book_instance_available_count: function(callback) {
+            BookInstance.countDocuments({status:'Available'}, callback);
+        },
+        author_count: function(callback) {
+            Author.countDocuments({}, callback);
+        },
+        genre_count: function(callback) {
+            Genre.countDocuments({}, callback);
+        }
+    }, function(err, results) {
+        res.render('index', { title: 'Local Library Home', error: err, data: results });
+    });
+};</pre>
+
+<p>The <code>async.parallel()</code> method is passed an object with functions for getting the counts for each of our models. These functions are all started at the same time. When all of them have completed the final callback is invoked with the counts in the results parameter (or an error).</p>
+
+<p>On success the callback function calls <code><a class="external external-icon" href="http://expressjs.com/en/4x/api.html#res.render" rel="noopener">res.render()</a></code>, specifying a view (template) named '<strong>index</strong>' and an object containing the data that is to be inserted into it (this includes the results object that contains our model counts). The data is supplied as key-value pairs, and can be accessed in the template using the key.</p>
+
+<div class="note">
+<p><strong>Note:</strong> The callback function from <code>async.parallel()</code> above is a little unusual in that we render the page whether or not there was an error (normally you might use a separate execution path for handling the display of errors).</p>
+</div>
+
+<h2 id="View">View</h2>
+
+<p>Open <strong>/views/index.pug</strong> and replace its content with the text below.</p>
+
+<pre class="brush: js ">extends layout
+
+block content
+  h1= title
+  p Welcome to #[em LocalLibrary], a very basic Express website developed as a tutorial example on the Mozilla Developer Network.
+
+  h1 Dynamic content
+
+  if error
+    p Error getting dynamic content.
+  else
+    p The library has the following record counts:
+
+    ul
+      li #[strong Books:] !{data.book_count}
+      li #[strong Copies:] !{data.book_instance_count}
+      li #[strong Copies available:] !{data.book_instance_available_count}
+      li #[strong Authors:] !{data.author_count}
+      li #[strong Genres:] !{data.genre_count}</pre>
+
+<p>The view is straightforward. We extend the <strong>layout.pug</strong> base template, overriding the <code>block</code> named '<strong>content</strong>'. The first <code>h1</code> heading will be the escaped text for the <code>title</code> variable that was passed into the <code>render()</code> function—note the use of the '<code>h1=</code>' so that the following text is treated as a JavaScript expression. We then include a paragraph introducing the LocalLibrary.</p>
+
+<p>Under the <em>Dynamic content</em> heading we check whether the error variable passed in from the <code>render()</code> function has been defined. If so, we note the error. If not, we get and list the number of copies of each model from the <code>data</code> variable.</p>
+
+<div class="note">
+<p><strong>Note:</strong> We didn't escape the count values (i.e. we used the <code>!{}</code> syntax) because the count values are calculated. If the information was supplied by end-users then we'd escape the variable for display.</p>
+</div>
+
+<h2 id="What_does_it_look_like">What does it look like?</h2>
+
+<p>At this point we should have created everything needed to display the index page. Run the application and open your browser to <a class="external external-icon" href="http://localhost:3000/" rel="noopener">http://localhost:3000/</a>. If everything is set up correctly, your site should look something like the following screenshot.</p>
+
+<p><img alt="Home page - Express Local Library site" src="https://mdn.mozillademos.org/files/14458/LocalLibary_Express_Home.png" style="display: block; height: 440px; margin: 0px auto; width: 1000px;"></p>
+
+<div class="note">
+<p><strong>Note:</strong> You won't be able to use the sidebar links yet because the urls, views, and templates for those pages haven't been defined. If you try you'll get errors like "NOT IMPLEMENTED: Book list" for example, depending on the link you click on.  These string literals (which will be replaced with proper data) were specified in the different controllers that live inside your "controllers" file.</p>
+</div>
+
+<h2 id="Next_steps">Next steps</h2>
+
+<ul>
+ <li>Return to <a href="/en-US/docs/Learn/Server-side/Express_Nodejs/Displaying_data">Express Tutorial Part 5: Displaying library data</a>.</li>
+ <li>Proceed to the next subarticle of part 5: <a href="/en-US/docs/Learn/Server-side/Express_Nodejs/Displaying_data/Book_list_page">Book list page</a>.</li>
+</ul>
diff --git a/files/ja/learn/server-side/express_nodejs/displaying_data/index.html b/files/ja/learn/server-side/express_nodejs/displaying_data/index.html
new file mode 100644
index 0000000000..5726b6c0e1
--- /dev/null
+++ b/files/ja/learn/server-side/express_nodejs/displaying_data/index.html
@@ -0,0 +1,92 @@
+---
+title: 'Express チュートリアル Part 5: ライブラリデータの表示'
+slug: Learn/Server-side/Express_Nodejs/Displaying_data
+tags:
+  - Express
+  - nodejs
+  - pug
+  - コントローラ
+  - テンプレート
+  - ビュー
+  - 初心者
+  - 学習
+translation_of: Learn/Server-side/Express_Nodejs/Displaying_data
+---
+<div>{{LearnSidebar}}</div>
+
+<div>{{PreviousMenuNext("Learn/Server-side/Express_Nodejs/routes", "Learn/Server-side/Express_Nodejs/forms", "Learn/Server-side/Express_Nodejs")}}</div>
+
+<p class="summary">これで<a href="/ja/docs/Learn/Server-side/Express_Nodejs/Tutorial_local_library_website">地域図書館</a>の Web サイトの書籍やその他のデータを表示するページを追加する準備が整いました。このページには、各モデルタイプのレコード数と、すべてのモデルのリストおよび詳細ページを示すホームページが含まれます。その過程で、データベースからレコードを取得したり、テンプレートを使用したりする際の実際的な経験を積むことになります。</p>
+
+<table class="learn-box standard-table">
+ <tbody>
+  <tr>
+   <th scope="row">前提条件:</th>
+   <td>以前のチュートリアルのトピック (<a href="/ja/docs/Learn/Server-side/Express_Nodejs/routes">Express チュートリアル Part 4: ルートとコントローラ</a>を含む) を完了してください。</td>
+  </tr>
+  <tr>
+   <th scope="row">目標:</th>
+   <td>async モジュールと Pug テンプレート言語の使い方、そしてコントローラ関数の URL からデータを取得する方法を理解すること。</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="概要">概要</h2>
+
+<p>前回のチュートリアル記事では、データベースとやり取りするために使用できる <a href="/ja/docs/Learn/Server-side/Express_Nodejs/mongoose">Mongoose モデル</a>を定義し、いくつかの初期ライブラリレコードを作成しました。その後、LocalLibrary Web サイトに必要な<a href="/ja/docs/Learn/Server-side/Express_Nodejs/routes">すべてのルートを作成しました</a>が、"ダミーコントローラ" 関数 (ページにアクセスすると "未実装" のメッセージを返すだけのスケルトンコントローラ関数) を使用しました。</p>
+
+<p>次のステップは、私たちの図書館情報を表示するページに適切な実装をすることです (後の記事で情報を作成、更新、または削除するフォームを特徴とする実装ページを見ます)。これには、モデルを使用してレコードを取得するためのコントローラ機能の更新、およびこの情報をユーザに表示するためのテンプレートの定義が含まれます。</p>
+
+<p>はじめに、コントローラ関数で非同期操作を管理する方法と Pug を使用してテンプレートを作成する方法を説明する概要/入門トピックを提供します。それから、主要な "読み取り専用" ページのそれぞれに、それらが使用する特別な機能や新しい機能についての簡単な説明を付けて実装を提供します。</p>
+
+<p>この記事が終わるときには、ルート、非同期関数、ビュー、およびモデルが実際にどのように機能するのかについてのエンドツーエンドの理解が十分にあるはずです。</p>
+
+<h2 id="ライブラリデータチュートリアルサブ記事の表示">ライブラリデータチュートリアルサブ記事の表示</h2>
+
+<p>次のサブ記事では、必要な Web サイトページを表示するために必要なさまざまな機能を追加するプロセスについて説明します。次のものに進む前に、順番にこれらのそれぞれを読み、作業する必要があります。</p>
+
+<ol>
+ <li><a href="/ja/docs/Learn/Server-side/Express_Nodejs/Displaying_data/flow_control_using_async">async を使用した非同期フロー制御</a></li>
+ <li><a href="/ja/docs/Learn/Server-side/Express_Nodejs/Displaying_data/Template_primer">テンプレートプライマー</a></li>
+ <li><a href="/ja/docs/Learn/Server-side/Express_Nodejs/Displaying_data/LocalLibrary_base_template">LocalLibrary 基本テンプレート</a></li>
+ <li><a href="/ja/docs/Learn/Server-side/Express_Nodejs/Displaying_data/Home_page">ホームページ</a></li>
+ <li><a href="/ja/docs/Learn/Server-side/Express_Nodejs/Displaying_data/Book_list_page">ブックリストページ</a></li>
+ <li><a href="/ja/docs/Learn/Server-side/Express_Nodejs/Displaying_data/BookInstance_list_page">ブックインスタンスリストページ</a></li>
+ <li><a href="/ja/docs/Learn/Server-side/Express_Nodejs/Displaying_data/Date_formatting_using_moment">moment を使用した日付のフォーマット</a></li>
+ <li><a href="/ja/docs/Learn/Server-side/Express_Nodejs/Displaying_data/Author_list_page">著者リストページとジャンルリストページのチャレンジ</a></li>
+ <li><a href="/ja/docs/Learn/Server-side/Express_Nodejs/Displaying_data/Genre_detail_page">ジャンル詳細ページ</a></li>
+ <li><a href="/ja/docs/Learn/Server-side/Express_Nodejs/Displaying_data/Book_detail_page">本の詳細ページ</a></li>
+ <li><a href="/ja/docs/Learn/Server-side/Express_Nodejs/Displaying_data/Author_detail_page">著者詳細ページ</a></li>
+ <li><a href="/ja/docs/Learn/Server-side/Express_Nodejs/Displaying_data/BookInstance_detail_page_and_challenge">ブックインスタンス詳細ページとチャレンジ</a></li>
+</ol>
+
+<h2 id="まとめ">まとめ</h2>
+
+<p>これで、サイトのすべての "読み取り専用" ページを作成しました。各モデルのインスタンスの数を表示するホームページ、および書籍、書籍のインスタンス、作家、ジャンルのリストと詳細ページです。その過程でコントローラ、非同期操作を使用したときのフロー制御の管理、Pug を使用したビューの作成、モデルを使用したデータベースの照会、ビューからテンプレートへの情報の受け渡し方法などについて多くの基礎知識を得て、そしてテンプレートを作成および拡張しました。チャレンジを完了した人たちはまた、moment を使った日付処理について少し学んだことでしょう。</p>
+
+<p>次回の記事では、サイトに格納されているデータの変更を開始するための HTML フォームとフォーム処理コードを作成して、私たちの知識に基づいて構築します。</p>
+
+<h2 id="あわせて参照">あわせて参照</h2>
+
+<ul>
+ <li><a href="http://caolan.github.io/async/docs.html">Async module</a> (Async ドキュメント)</li>
+ <li><a href="https://expressjs.com/en/guide/using-template-engines.html">Using Template engines with Express</a> (Express ドキュメント)</li>
+ <li><a href="https://pugjs.org/api/getting-started.html">Pug</a> (Pug ドキュメント)</li>
+ <li><a href="http://momentjs.com/docs/">Moment</a> (Moment ドキュメント)</li>
+</ul>
+
+<p>{{PreviousMenuNext("Learn/Server-side/Express_Nodejs/routes", "Learn/Server-side/Express_Nodejs/forms", "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>
diff --git a/files/ja/learn/server-side/express_nodejs/displaying_data/locallibrary_base_template/index.html b/files/ja/learn/server-side/express_nodejs/displaying_data/locallibrary_base_template/index.html
new file mode 100644
index 0000000000..a97c536eb2
--- /dev/null
+++ b/files/ja/learn/server-side/express_nodejs/displaying_data/locallibrary_base_template/index.html
@@ -0,0 +1,69 @@
+---
+title: LocalLibrary 基本テンプレート
+slug: Learn/Server-side/Express_Nodejs/Displaying_data/LocalLibrary_base_template
+translation_of: Learn/Server-side/Express_Nodejs/Displaying_data/LocalLibrary_base_template
+---
+<p>Now that we understand how to extend templates using Pug, let's start by creating a base template for the project. This will have a sidebar with links for the pages we hope to create across the tutorial articles (e.g. to display and create books, genres, authors, etc.) and a main content area that we'll override in each of our individual pages.</p>
+
+<p>Open<strong> /views/layout.pug</strong> and replace the content with the code below.</p>
+
+<pre class="brush: html line-numbers  language-html"><code class="language-html">doctype html
+html(lang='en')
+  head
+    title= title
+    meta(charset='utf-8')
+    meta(name='viewport', content='width=device-width, initial-scale=1')
+    link(rel='stylesheet', href='https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css')
+    script(src='https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js')
+    script(src='https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js')
+    link(rel='stylesheet', href='/stylesheets/style.css')
+  body
+    div(class='container-fluid')
+      div(class='row')
+        div(class='col-sm-2')
+          block sidebar
+            ul(class='sidebar-nav')
+              li
+                a(href='/catalog') Home
+              li
+                a(href='/catalog/books') All books
+              li
+                a(href='/catalog/authors') All authors
+              li
+                a(href='/catalog/genres') All genres
+              li
+                a(href='/catalog/bookinstances') All book-instances
+              li
+                hr
+              li
+                a(href='/catalog/author/create') Create new author
+              li
+                a(href='/catalog/genre/create') Create new genre
+              li
+                a(href='/catalog/book/create') Create new book
+              li
+                a(href='/catalog/bookinstance/create') Create new book instance (copy)
+
+        div(class='col-sm-10')
+          block content</code></pre>
+
+<p>The template uses (and includes) JavaScript and CSS from <a class="external external-icon" href="http://getbootstrap.com/" rel="noopener">Bootstrap</a> to improve the layout and presentation of the HTML page. Using Bootstrap or another client-side web framework is a quick way to create an attractive page that can scale well on different browser sizes, and it also allows us to deal with the page presentation without having to get into any of the details—we just want to focus on the server-side code here!</p>
+
+<p>The layout should be fairly obvious if you've read our above <a href="https://developer.mozilla.org/en-US/docs/Learn/Server-side/Express_Nodejs/Displaying_data#Template_primer">Template primer</a>. Note the use of <code>block content</code> as a placeholder for where the content for our individual pages will be placed.</p>
+
+<p>The base template also references a local css file (<strong>style.css</strong>) that provides a little additional styling. Open <strong>/public/stylesheets/style.css</strong> and replace its content with the following CSS code:</p>
+
+<pre class="brush: css line-numbers  language-css"><code class="language-css"><span class="selector token"><span class="class token">.sidebar-nav</span> </span><span class="punctuation token">{</span>
+    <span class="property token">margin-top</span><span class="punctuation token">:</span> <span class="number token">20</span>px<span class="punctuation token">;</span>
+    <span class="property token">padding</span><span class="punctuation token">:</span> <span class="number token">0</span><span class="punctuation token">;</span>
+    <span class="property token">list-style</span><span class="punctuation token">:</span> none<span class="punctuation token">;</span>
+<span class="punctuation token">}</span></code></pre>
+
+<p>When we get round to running our site, we should see the sidebar appear! In the next sections we will use the above layout to define the individual pages.</p>
+
+<h2 id="Next_steps">Next steps</h2>
+
+<ul>
+ <li>Return to <a href="/en-US/docs/Learn/Server-side/Express_Nodejs/Displaying_data">Express Tutorial Part 5: Displaying library data</a>.</li>
+ <li>Proceed to the next subarticle of part 5: <a href="/en-US/docs/Learn/Server-side/Express_Nodejs/Displaying_data/Home_page">Home page</a>.</li>
+</ul>
diff --git a/files/ja/learn/server-side/express_nodejs/displaying_data/template_primer/index.html b/files/ja/learn/server-side/express_nodejs/displaying_data/template_primer/index.html
new file mode 100644
index 0000000000..a68921a6a7
--- /dev/null
+++ b/files/ja/learn/server-side/express_nodejs/displaying_data/template_primer/index.html
@@ -0,0 +1,149 @@
+---
+title: テンプレートプライマー
+slug: Learn/Server-side/Express_Nodejs/Displaying_data/Template_primer
+translation_of: Learn/Server-side/Express_Nodejs/Displaying_data/Template_primer
+---
+<p>A template is a text file defining the <em>structure</em> or layout of an output file, with placeholders used to represent where data will be inserted when the template is rendered (in <em>Express</em>, templates are referred to as <em>views</em>).</p>
+
+<h2 id="Express_template_choices">Express template choices</h2>
+
+<p>Express can be used with many different <a class="external external-icon" href="https://expressjs.com/en/guide/using-template-engines.html" rel="noopener">template rendering engines</a>. In this tutorial we use <a class="external external-icon" href="https://pugjs.org/api/getting-started.html" rel="noopener">Pug</a> (formerly known as <em>Jade</em>) for our templates. This is the most popular Node template language, and describes itself as a "clean, whitespace-sensitive syntax for writing HTML, heavily influenced by <a class="external external-icon" href="http://haml.info/" rel="noopener">Haml</a>".</p>
+
+<p>Different template languages use different approaches for defining the layout and marking placeholders for data—some use HTML to define the layout while others use different markup formats that can be compiled to HTML. Pug is of the second type; it uses a <em>representation </em>of HTML where the first word in any line usually represents an HTML element, and indentation on subsequent lines is used to represent any content nested within those elements. The result is a page definition that translates directly to HTML, but is arguably more concise and easier to read.</p>
+
+<div class="note">
+<p><strong>Note:</strong> The downside of using <em>Pug</em> is that it is sensitive to indentation and whitespace (if you add an extra space in the wrong place you may get an unhelpful error code). However once you have your templates in place, they are very easy to read and maintain.</p>
+</div>
+
+<h2 class="highlight-spanned" id="Template_configuration"><span class="highlight-span">Template configuration</span></h2>
+
+<p>The <em>LocalLibrary</em> was configured to use <a class="external external-icon" href="https://pugjs.org/api/getting-started.html" rel="noopener">Pug</a> when we <a href="https://developer.mozilla.org/en-US/docs/Learn/Server-side/Express_Nodejs/skeleton_website">created the skeleton website</a>. You should see the pug module included as a dependency in the website's <strong>package.json</strong> file, and the following configuration settings in the <strong>app.js</strong> file. The settings tell us that we're using pug as the view engine, and that <em>Express</em> should search for templates in the <strong>/views</strong> subdirectory.</p>
+
+<pre class="brush: js line-numbers  language-js"><code class="language-js"><span class="comment token">// View engine setup.</span>
+app<span class="punctuation token">.</span><span class="keyword token">set</span><span class="punctuation token">(</span><span class="string token">'views'</span><span class="punctuation token">,</span> path<span class="punctuation token">.</span><span class="function token">join</span><span class="punctuation token">(</span>__dirname<span class="punctuation token">,</span> <span class="string token">'views'</span><span class="punctuation token">)</span><span class="punctuation token">)</span><span class="punctuation token">;</span>
+app<span class="punctuation token">.</span><span class="keyword token">set</span><span class="punctuation token">(</span><span class="string token">'view engine'</span><span class="punctuation token">,</span> <span class="string token">'pug'</span><span class="punctuation token">)</span><span class="punctuation token">;</span></code></pre>
+
+<p>If you look in the views directory you will see the .pug files for the project's default views. These include the view for the home page (<strong>index.pug</strong>) and base template (<strong>layout.pug</strong>) that we will need to replace with our own content.</p>
+
+<pre><code>/express-locallibrary-tutorial  //the project root
+  /views
+    error.pug
+    <strong>index.pug</strong>
+    layout.pug</code>
+</pre>
+
+<h2 class="highlight-spanned" id="Template_syntax"><span class="highlight-span">Template syntax</span></h2>
+
+<p>The example template file below shows off many of Pug's most useful features.</p>
+
+<p>The first thing to notice is that the file maps the structure of a typical HTML file, with the first word in (almost) every line being an HTML element, and indentation being used to indicate nested elements. So for example, the <code>body</code> element is inside an <code>html</code> element, and paragraph elements (<code>p</code>) are within the <code>body</code> element, etc. Non-nested elements (e.g. individual paragraphs) are on separate lines.</p>
+
+<pre class="brush: html line-numbers  language-html"><code class="language-html">doctype html
+html(lang="en")
+  head
+    title= title
+    script(type='text/javascript').
+  body
+    h1= title
+
+    p This is a line with #[em some emphasis] and #[strong strong text] markup.
+    p This line has un-escaped data: !{'<span class="tag token"><span class="tag token"><span class="punctuation token">&lt;</span>em</span><span class="punctuation token">&gt;</span></span> is emphasised<span class="tag token"><span class="tag token"><span class="punctuation token">&lt;/</span>em</span><span class="punctuation token">&gt;</span></span>'} and escaped data: #{'<span class="tag token"><span class="tag token"><span class="punctuation token">&lt;</span>em</span><span class="punctuation token">&gt;</span></span> is not emphasised<span class="tag token"><span class="tag token"><span class="punctuation token">&lt;/</span>em</span><span class="punctuation token">&gt;</span></span>'}.
+      | This line follows on.
+    p= 'Evaluated and <span class="tag token"><span class="tag token"><span class="punctuation token">&lt;</span>em</span><span class="punctuation token">&gt;</span></span>escaped expression<span class="tag token"><span class="tag token"><span class="punctuation token">&lt;/</span>em</span><span class="punctuation token">&gt;</span></span>:' + title
+
+    <span class="comment token">&lt;!-- You can add HTML comments directly --&gt;</span>
+    // You can add single line JavaScript comments and they are generated to HTML comments
+    //- Introducing a single line JavaScript comment with "//-" ensures the comment isn't rendered to HTML
+
+    p A line with a link
+      a(href='/catalog/authors') Some link text
+      |  and some extra text.
+
+    #container.col
+      if title
+        p A variable named "title" exists.
+      else
+        p A variable named "title" does not exist.
+      p.
+        Pug is a terse and simple template language with a
+        strong focus on performance and powerful features.
+
+    h2 Generate a list
+
+    ul
+      each val in [1, 2, 3, 4, 5]
+        li= val</code></pre>
+
+<p>Element attributes are defined in parentheses after their associated element. Inside the parentheses, the attributes are defined in comma- or whitespace- separated lists of the pairs of attribute names and attribute values, for example:</p>
+
+<ul>
+ <li><code>script(type='text/javascript')</code>, <code>link(rel='stylesheet', href='/stylesheets/style.css')</code></li>
+ <li><code>meta(name='viewport' content='width=device-width initial-scale=1')</code></li>
+</ul>
+
+<p>The values of all attributes are <em>escaped</em> (e.g. characters like "<code>&gt;</code>" are converted to their HTML code equivalents like "<code>&amp;gt;"</code>) to prevent injection of JavaScript/cross-site scripting attacks.</p>
+
+<p>If a tag is followed by the equals sign, the following text is treated as a JavaScript <em>expression</em>. So for example, in the first line below, the content of the <code>h1</code> tag will be <em>variable</em> <code>title</code> (either defined in the file or passed into the template from Express). In the second line the paragraph content is a text string concatented with the <code>title</code> variable. In both cases the default behaviour is to <em>escape</em> the line.</p>
+
+<pre class="brush: html line-numbers  language-html"><code class="language-html">h1= title
+p= 'Evaluated and <span class="tag token"><span class="tag token"><span class="punctuation token">&lt;</span>em</span><span class="punctuation token">&gt;</span></span>escaped expression<span class="tag token"><span class="tag token"><span class="punctuation token">&lt;/</span>em</span><span class="punctuation token">&gt;</span></span>:' + title</code></pre>
+
+<p>If there is no equals symbol after the tag then the content is treated as plain text. Within the plain text you can insert escaped and unescaped data using the <code>#{}</code> and<code> !{}</code> syntax, as shown below. You can also add raw HTML within the plain text.</p>
+
+<pre class="brush: html line-numbers  language-html"><code class="language-html">p This is a line with #[em some emphasis] and #[strong strong text] markup.
+p This line has an un-escaped string: !{'<span class="tag token"><span class="tag token"><span class="punctuation token">&lt;</span>em</span><span class="punctuation token">&gt;</span></span> is emphasised<span class="tag token"><span class="tag token"><span class="punctuation token">&lt;/</span>em</span><span class="punctuation token">&gt;</span></span>'}, an escaped string: #{'<span class="tag token"><span class="tag token"><span class="punctuation token">&lt;</span>em</span><span class="punctuation token">&gt;</span></span> is not emphasised<span class="tag token"><span class="tag token"><span class="punctuation token">&lt;/</span>em</span><span class="punctuation token">&gt;</span></span>'}, and escaped variables: #{title}.</code></pre>
+
+<div class="note">
+<p><strong>Tip:</strong> You will almost always want to escape data from users (via the <strong><code>#{}</code></strong> syntax). Data that can be trusted (e.g. generated counts of records, etc.) may be displayed without escaping the values.</p>
+</div>
+
+<p>You can use the pipe ('<strong>|</strong>') character at the beginning of a line to indicate "<a class="external external-icon" href="https://pugjs.org/language/plain-text.html" rel="noopener">plain text</a>". For example, the additional text shown below will be displayed on the same line as the preceding anchor, but will not be linked.</p>
+
+<pre class="brush: html line-numbers  language-html"><code class="language-html">a(href='http://someurl/') Link text
+| Plain text</code></pre>
+
+<p>Pug allows you to perform conditional operations using <code>if</code>, <code>else</code> , <code>else if</code> and <code>unless</code>—for example:</p>
+
+<pre class="brush: html line-numbers  language-html"><code class="language-html">if title
+  p A variable named "title" exists
+else
+  p A variable named "title" does not exist</code></pre>
+
+<p>You can also perform loop/iteration operations using <code>each-in</code> or <code>while</code> syntax. In the code fragment below we've looped through an array to display a list of variables (note the use of the 'li=' to evaluate the "val" as a variable below. The value you iterate across can also be passed into the template as a variable!</p>
+
+<pre class="brush: html line-numbers  language-html"><code class="language-html">ul
+  each val in [1, 2, 3, 4, 5]
+    li= val</code></pre>
+
+<p>The syntax also supports comments (that can be rendered in the output—or not—as you choose), mixins to create reusable blocks of code, case statements, and many other features. For more detailed information see <a class="external external-icon" href="https://pugjs.org/api/getting-started.html" rel="noopener">The Pug docs</a>.</p>
+
+<h2 class="highlight-spanned" id="Extending_templates"><span class="highlight-span">Extending templates</span></h2>
+
+<p>Across a site, it is usual for all pages to have a common structure, including standard HTML markup for the head, footer, navigation, etc. Rather than forcing developers to duplicate this "boilerplate" in every page, <em>Pug</em> allows you to declare a base template and then extend it, replacing just the bits that are different for each specific page.</p>
+
+<p>For example, the base template <strong>layout.pug</strong> created in our <a href="https://developer.mozilla.org/en-US/docs/Learn/Server-side/Express_Nodejs/skeleton_website">skeleton project</a> looks like this:</p>
+
+<pre class="brush: html line-numbers  language-html"><code class="language-html">doctype html
+html
+  head
+    title= title
+    link(rel='stylesheet', href='/stylesheets/style.css')
+  body
+    block content</code></pre>
+
+<p>The <code>block</code> tag is used to mark up sections of content that may be replaced in a derived template (if the block is not redefined then its implementation in the base class is used).</p>
+
+<p>The default <strong>index.pug</strong> (created for our skeleton project) shows how we override the base template. The <code>extends</code> tag identifies the base template to use, and then we use <code>block <em>section_name</em></code> to indicate the new content of the section that we will override.</p>
+
+<pre class="brush: html line-numbers  language-html"><code class="language-html">extends layout
+
+block content
+  h1= title
+  p Welcome to #{title}</code></pre>
+
+<h2 id="Next_steps">Next steps</h2>
+
+<ul>
+ <li>Return to <a href="/en-US/docs/Learn/Server-side/Express_Nodejs/Displaying_data">Express Tutorial Part 5: Displaying library data</a>.</li>
+ <li>Proceed to the next subarticle of part 5: <a href="/en-US/docs/Learn/Server-side/Express_Nodejs/Displaying_data/LocalLibrary_base_template">The LocalLibrary base template</a>.</li>
+</ul>
diff --git a/files/ja/learn/server-side/express_nodejs/forms/index.html b/files/ja/learn/server-side/express_nodejs/forms/index.html
new file mode 100644
index 0000000000..ea3d378895
--- /dev/null
+++ b/files/ja/learn/server-side/express_nodejs/forms/index.html
@@ -0,0 +1,263 @@
+---
+title: 'Express チュートリアル Part 6: フォームの操作'
+slug: Learn/Server-side/Express_Nodejs/forms
+translation_of: Learn/Server-side/Express_Nodejs/forms
+---
+<div>{{LearnSidebar}}</div>
+
+<div>{{PreviousMenuNext("Learn/Server-side/Express_Nodejs/Displaying_data", "Learn/Server-side/Express_Nodejs/deployment", "Learn/Server-side/Express_Nodejs")}}</div>
+
+<p class="summary">このチュートリアルでは、Pug を使用して Express で HTML フォームを操作する方法、特にデータベースからドキュメントを作成、更新、削除するためのフォームを作成する方法を説明します。</p>
+
+<table class="learn-box standard-table">
+ <tbody>
+  <tr>
+   <th scope="row">前提条件:</th>
+   <td><a href="/ja/docs/Learn/Server-side/Express_Nodejs/Displaying_data">Express チュートリアル Part 5: ライブラリデータの表示</a>など、これまでのチュートリアルのトピックをすべて完了してください。</td>
+  </tr>
+  <tr>
+   <th scope="row">目標:</th>
+   <td>ユーザからデータを取得するためのフォームの作成方法を理解し、このデータでデータベースを更新する。</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="概要">概要</h2>
+
+<p><a href="/ja/docs/Web/Guide/HTML/Forms">HTMLフォーム</a>とは、サーバーに送信するためにユーザーから情報を収集するために使用できる Web ページ上の 1 つ以上のフィールド/ウィジェットのグループのことです。テキストボックス、チェックボックス、ラジオボタン、日付選択など、さまざまなタイプのデータを入力するのに適したフォーム入力が用意されているので、フォームを使えばユーザーからの入力を柔軟に収集することが出来ます。また、フォームはサーバとデータを共有するための比較的安全な方法でもあり、クロスサイトリクエストフォージェリ保護機能を使ってPOSTリクエストでデータを送信することができます。</p>
+
+<p>フォームを扱うのは複雑です。開発者はフォーム用の HTML を書き、サーバー上で入力されたデータを検証して特殊文字を置換し、無効なフィールドをユーザーに知らせるためにエラーメッセージを表示してフォームを再度表示し、送信が成功したときにデータを処理し、最後に成功を示す何らかの方法でユーザーに応答しなければなりません。</p>
+
+<p>このチュートリアルでは、上記の操作をExpressで実行する方法を紹介します。途中で、サンプルとして地域図書館のウェブサイトを拡張して、ユーザーがライブラリからアイテムを作成、編集、削除できるようにします。</p>
+
+<div class="note">
+<p><strong>Note: </strong>サンプルとして準備されている地域図書館のウェブサイトは認証済みユーザのみに閲覧を制限する方法については書いてないので、現時点ではどのユーザでもデータベースに変更を加えることができます。</p>
+</div>
+
+<h3 id="HTMLフォーム">HTMLフォーム</h3>
+
+<p>最初に<a href="/ja/docs/Web/Guide/HTML/Forms">HTMLフォーム</a>の簡単な概要を説明します。ある「チーム」の名前とそれに関連するラベルを入力するための単一のテキストフィールドを持つシンプルな HTML フォームを考えてみましょう。</p>
+
+<p><img alt="Simple name field example in HTML form" src="https://mdn.mozillademos.org/files/14117/form_example_name_field.png" style="border-style: solid; border-width: 1px; display: block; height: 44px; margin: 0px auto; width: 399px;"></p>
+
+<p>フォームは HTML で <code>&lt;form&gt;...&lt;/form&gt;</code> タグ内の要素の集合として定義され、<code>type="submit" </code>の<code>input</code>要素を少なくとも 1 つ含みます。</p>
+
+<pre class="brush: html notranslate">&lt;form action="/team_name_url/" method="post"&gt;
+    &lt;label for="team_name"&gt;名前を入力してください: &lt;/label&gt;
+    &lt;input id="team_name" type="text" name="name_field" value="デフォルトのチーム名."&gt;
+    &lt;input type="submit" value="OK"&gt;
+&lt;/form&gt;</pre>
+
+<p>ここではチーム名を入力するための1つのテキストフィールドだけを含んでいますが、フォームは他の入力要素とそれに関連したラベルをいくつでも含むことができます。フィールドの<code>type</code>属性はどのような種類のウィジェットが表示されるかを定義します。フィールドの<code>name</code>と<code>id</code>はJavaScript/CSS/HTMLでフィールドを識別するために使われ、<code>value</code>はフィールドが最初に表示されるときの初期値を定義します。マッチングするチームのラベルは、<code>label</code>タグ（上記の「名前を入力してください」を参照）を使用して指定され、<code>for</code>フィールドには関連する<code>input</code>タグの<code>id</code>値が含まれます。</p>
+
+<p><code>submit</code> inputタグは標準ではボタンとして表示されます。このボタンは、他の<code>input</code>要素に含まれるデータをサーバーにアップロードするためにユーザーが押すことができます(この例だと<code>team_name</code>だけ)。フォーム属性はデータを送信するために使用されるHTTP <code>method</code>とサーバー上のデータの送信先(<code>action</code>)を定義します。</p>
+
+<ul>
+ <li><code>action</code>: フォームが送信されたときに処理のためにデータが送信されるURLです。これが設定されていない場合(または空の文字列が設定されている場合)、フォームは現在のページURLに戻って送信されます。</li>
+ <li><code>method</code>: データを送信するために使用される HTTP メソッド: <code>POST</code> または <code>GET</code>.
+  <ul>
+   <li><code>POST</code>メソッドは、データがサーバのデータベースに変更をもたらす場合は、常に使用されるべきです。なぜならクロスサイトフォージェリ要求攻撃に対してより耐性を持たせることができるからです。</li>
+   <li><code>GET</code>メソッドは、ユーザーデータを変更しないフォーム（検索フォームなど）にのみ使用してください。URLをブックマークや共有できるようにしたい場合におすすめです。</li>
+  </ul>
+ </li>
+</ul>
+
+<h3 id="フォーム処理工程">フォーム処理工程</h3>
+
+<p>フォームの処理はモデルに関する情報を表示するために学んだのと同じテクニックをすべて使います: ルートはリクエストをコントローラ関数に送り、モデルからのデータの読み込みを含む必要なデータベースアクションを実行し、HTMLページを生成して返します。さらに複雑なのは、サーバーがユーザーによって提供されたデータを処理し、何か問題があればエラー情報とともにフォームを再表示する必要があるということです。</p>
+
+<p>フォームを含むページのリクエスト（緑色で示されている）から始まる、フォームリクエストを処理するためのプロセスフローチャートを以下に示す。<img alt="" src="https://mdn.mozillademos.org/files/14478/Web%20server%20form%20handling.png" style="height: 649px; width: 800px;"></p>
+
+<p>上の図のように、フォーム処理のコードが必要とする主なものは以下の通りです。</p>
+
+<ol>
+ <li>ユーザーが最初に要求したときにデフォルトのフォームを表示します。
+  <ul>
+   <li>フォームには空白のフィールドが含まれていたり (新しいレコードを作成している場合など)、初期値があらかじめ入力されていたり (レコードを変更している場合や、デフォルトの初期値がある場合など) します。</li>
+  </ul>
+ </li>
+ <li>ユーザーから送信されたデータを、通常はHTTP <code>POST</code>リクエストで受信します。</li>
+ <li>データを検証し、ハッキング防止のために特殊文字を置換(サニタイズ)します。</li>
+ <li>データが無効な場合は、ユーザーが入力した値と問題のあるフィールドのエラーメッセージをフォームに再表示します。</li>
+ <li>すべてのデータが有効な場合、必要なアクションを実行します（例：データベースにデータを保存する、通知メールを送信する、検索結果を返す、ファイルをアップロードするなど）。</li>
+ <li>すべてのアクションが完了したら、ユーザーを別のページにリダイレクトします。</li>
+</ol>
+
+<p>多くの場合、フォーム処理コードは、フォームの初期表示のための<code>GET</code>ルートと、フォームデータの検証と処理のための同じパスへの<code>POST</code>ルートを使用して実装されています。これがこのチュートリアルで使用されるアプローチです。</p>
+
+<p>Express 自体はフォーム操作のための特別なサポートを提供していませんが、ミドルウェアを使用してフォームからの <code>POST</code> や <code>GET </code>パラメータを処理したり、それらの値を検証/サニタイズしたりすることができます。</p>
+
+<h3 id="検証とサニタイズ">検証とサニタイズ</h3>
+
+<p>フォームからのデータが保存される前に、それは検証され、サニタイズされなければなりません。</p>
+
+<ul>
+ <li>入力された値が各フィールドに対して適切であるか（正しい範囲、フォーマットなど）、およびすべての必須フィールドに対して値が提供されているかどうかを確認します。</li>
+ <li>サニタイズは、悪意のあるコンテンツをサーバーに送信するために使用される可能性のあるデータ内の文字を削除したり、置換したりします。</li>
+</ul>
+
+<p>このチュートリアルでは、人気のある express-validator モジュールを使ってフォームデータの検証とサニタイズを行います。</p>
+
+<h4 id="インストール">インストール</h4>
+
+<p>プロジェクトのルートで以下のコマンドを実行してモジュールをインストールします。</p>
+
+<pre class="brush: bash notranslate">npm install express-validator
+</pre>
+
+<h4 id="express-validatorの使用">express-validatorの使用</h4>
+
+<div class="note">
+<p><strong>Note:</strong> Githubの<a href="https://github.com/ctavan/express-validator#express-validator">express-validator</a>ガイドにAPIの概要が書かれています。(カスタムバリデータの作成を含む) すべての機能を知るには、これを読むことをお勧めします。以下では、サンプルの「地域図書館」にとって有用なサブセットだけを取り上げます。</p>
+</div>
+
+<p>コントローラでバリデータを使うには、以下のように <strong>'express-validator/check'</strong> と <strong>'express-validator/filter'</strong>モジュールから使いたい関数を要求(require)しなければなりません。</p>
+
+<pre class="brush: js notranslate">const { body,validationResult } = require('express-validator/check');
+const { sanitizeBody } = require('express-validator/filter');
+</pre>
+
+<p>多くの関数が用意されており、リクエストパラメータ、body、ヘッダー、Cookieなどのデータをチェックしてサニタイズすることができますし、一度にすべてのデータをチェックしてサニタイズすることもできます。このチュートリアルでは、主に<code>body</code>、<code>sanitizeBody</code>、<code>validationResult</code>を使用します。</p>
+
+<p>機能は以下のように定義されています。</p>
+
+<ul>
+ <li><code><a href="https://github.com/ctavan/express-validator#bodyfields-message">body(fields[, message])</a></code>: テストに失敗した場合に表示されるオプションのエラーメッセージとともに検証するリクエストボディ (<code>POST</code>パラメータ) のフィールドのセットを指定します。検証基準は、<code>body()</code>メソッドにデイジーチェーンで接続されています。例えば、以下の最初のチェックでは「name」フィールドが空でないことをテストし、空の場合は「Empty name」というエラーメッセージを設定します。2 番目のテストでは、年齢フィールドが有効な日付であるかどうかをチェックし、<code>optional()</code> を使用して null や空の文字列を指定しても検証に失敗しないようにしています。
+
+  <pre class="brush: js notranslate">body('name', 'Empty name').isLength({ min: 1 }),
+body('age', 'Invalid age').optional({ checkFalsy: true }).isISO8601(),
+</pre>
+  また、異なるバリデータをデイジーチェーン化して、前のバリデータが真の場合に表示されるメッセージを追加することもできます。<br>
+
+  <pre class="brush: js notranslate">body('name').isLength({ min: 1 }).trim().withMessage('Name empty.')
+    .isAlpha().withMessage('Name must be alphabet letters.'),
+</pre>
+
+  <div class="note">
+  <p><strong>Note:</strong> また、上記のように <code>trim()</code> のようなインラインサニタイザーを追加することもできます。しかし、ここで適用されるサニタイザは検証ステップにのみ適用されます。最終的な出力をサニタイザ処理したい場合は、以下のように別のサニタイザメソッドを使用する必要があります。</p>
+  </div>
+ </li>
+ <li><code><a href="https://github.com/ctavan/express-validator#sanitizebodyfields">sanitizeBody(fields)</a></code>: サニタイズするフィールドを指定します。サニタイズ操作は、このメソッドにデイジーチェーン接続されます。例えば、以下の <code>escape()</code> サニタイズ操作は、JavaScript のクロスサイトスクリプティング攻撃で使用される可能性のある HTML 文字（例えば「'」、「"」、「&amp;」など）を name 変数から削除します。
+  <pre class="brush: js notranslate">sanitizeBody('name').trim().escape(),
+sanitizeBody('date').toDate(),</pre>
+ </li>
+ <li><code><a href="https://github.com/ctavan/express-validator#validationresultreq">validationResult(req)</a></code>: Runs the validation, making errors available in the form of a <code>validation</code> result object. This is invoked in a separate callback, as shown below:
+  <pre class="brush: js notranslate">(req, res, next) =&gt; {
+    // Extract the validation errors from a request.
+    const errors = validationResult(req);
+
+    if (!errors.isEmpty()) {
+        // There are errors. Render form again with sanitized values/errors messages.
+        // Error messages can be returned in an array using `errors.array()`.
+        }
+    else {
+        // Data from form is valid.
+    }
+}</pre>
+  We use the validation result's <code>isEmpty()</code> method to check if there were errors, and its <code>array()</code> method to get the set of error messages. See the <a href="https://github.com/ctavan/express-validator#validation-result-api">Validation Result API</a> for more information.</li>
+</ul>
+
+<p>The validation and sanitization chains are middleware that should be passed to the Express route handler (we do this indirectly, via the controller). When the middleware runs, each validator/sanitizer is run in the order specified.</p>
+
+<p>We'll cover some real examples when we implement the <em>LocalLibrary</em> forms below.</p>
+
+<h3 id="Form_design">Form design</h3>
+
+<p>Many of the models in the library are related/dependent—for example, a <code>Book</code> <em>requires</em> an <code>Author</code>, and <em>may</em> also have one or more <code>Genres</code>. This raises the question of how we should handle the case where a user wishes to:</p>
+
+<ul>
+ <li>Create an object when its related objects do not yet exist (for example, a book where the author object hasn't been defined).</li>
+ <li>Delete an object that is still being used by another object (so for example, deleting a <code>Genre</code> that is still being used by a <code>Book</code>).</li>
+</ul>
+
+<p>For this project we will simplify the implementation by stating that a form can only:</p>
+
+<ul>
+ <li>Create an object using objects that already exist (so users will have to create any required <code>Author</code> and <code>Genre</code> instances before attempting to create any <code>Book</code> objects).</li>
+ <li>Delete an object if it is not referenced by other objects (so for example, you won't be able to delete a <code>Book</code> until all associated <code>BookInstance</code> objects have been deleted).</li>
+</ul>
+
+<div class="note">
+<p><strong>Note:</strong> A more "robust" implementation might allow you to create the dependent objects when creating a new object, and delete any object at any time (for example, by deleting dependent objects, or by removing references to the deleted object from the database).</p>
+</div>
+
+<h3 id="Routes">Routes</h3>
+
+<p>In order to implement our form handling code, we will need two routes that have the same URL pattern. The first (<code>GET</code>) route is used to display a new empty form for creating the object. The second route (<code>POST</code>) is used for validating data entered by the user, and then saving the information and redirecting to the detail page (if the data is valid) or redisplaying the form with errors (if the data is invalid).</p>
+
+<p>We have already created the routes for all our model's create pages in <strong>/routes/catalog.js</strong> (in a <a href="https://developer.mozilla.org/en-US/docs/Learn/Server-side/Express_Nodejs/routes">previous tutorial</a>). For example, the genre routes are shown below:</p>
+
+<pre class="brush: js notranslate">// GET request for creating a Genre. NOTE This must come before route that displays Genre (uses id).
+router.get('/genre/create', genre_controller.genre_create_get);
+
+// POST request for creating Genre.
+router.post('/genre/create', genre_controller.genre_create_post);
+</pre>
+
+<h2 id="Express_forms_subarticles">Express forms subarticles</h2>
+
+<p>The following sub articles will take us through the process of adding the required forms to our example application. You need to read and work through each one in turn, before moving on to the next one.</p>
+
+<ol>
+ <li><a href="/en-US/docs/Learn/Server-side/Express_Nodejs/forms/Create_genre_form">Create Genre form</a> — Defining a page to create <code>Genre</code> objects.</li>
+ <li><a href="/en-US/docs/Learn/Server-side/Express_Nodejs/forms/Create_author_form">Create Author form</a> — Defining a page to create <code>Author</code> objects.</li>
+ <li><a href="/en-US/docs/Learn/Server-side/Express_Nodejs/forms/Create_book_form">Create Book form</a> — Defining a page/form to create <code>Book</code> objects.</li>
+ <li><a href="/en-US/docs/Learn/Server-side/Express_Nodejs/forms/Create_BookInstance_form">Create BookInstance form</a> — Defining a page/form to create <code>BookInstance</code> objects.</li>
+ <li><a href="/en-US/docs/Learn/Server-side/Express_Nodejs/forms/Delete_author_form">Delete Author form</a> — Defining a page to delete <code>Author</code> objects.</li>
+ <li><a href="/en-US/docs/Learn/Server-side/Express_Nodejs/forms/Update_Book_form">Update Book form</a> — Defining page to update <code>Book</code> objects.</li>
+</ol>
+
+<h2 id="Challenge_yourself">Challenge yourself</h2>
+
+<p>Implement the delete pages for the <code>Book</code>, <code>BookInstance</code>, and <code>Genre</code> models, linking them from the associated detail pages in the same way as our <em>Author delete </em>page. The pages should follow the same design approach:</p>
+
+<ul>
+ <li>If there are references to the object from other objects, then these other objects should be displayed along with a note that this record can't be deleted until the listed objects have been deleted.</li>
+ <li>If there are no other references to the object then the view should prompt to delete it. If the user presses the <strong>Delete</strong> button, the record should then be deleted.</li>
+</ul>
+
+<p>A few tips:</p>
+
+<ul>
+ <li>Deleting a <code>Genre</code> is just like deleting an <code>Author</code> as both objects are dependencies of <code>Book</code> (so in both cases you can delete the object only when the associated books are deleted).</li>
+ <li>Deleting a <code>Book</code> is also similar, but you need to check that there are no associated <code>BookInstances</code>.</li>
+ <li>Deleting a <code>BookInstance</code> is the easiest of all because there are no dependent objects. In this case, you can just find the associated record and delete it.</li>
+</ul>
+
+<p>Implement the update pages for the <code>BookInstance</code>, <code>Author</code>, and <code>Genre</code> models, linking them from the associated detail pages in the same way as our <em>Book update </em>page.</p>
+
+<p>A few tips:</p>
+
+<ul>
+ <li>The <em>Book update page</em> we just implemented is the hardest! The same patterns can be used for the update pages for the other objects.</li>
+ <li>The <code>Author</code> date of death and date of birth fields and the <code>BookInstance</code> due_date field are the wrong format to input into the date input field on the form (it requires data in form "YYYY-MM-DD"). The easiest way to get around this is to define a new virtual property for the dates that formats the dates appropriately, and then use this field in the associated view templates.</li>
+ <li>If you get stuck, there are examples of the update pages in <a href="https://github.com/mdn/express-locallibrary-tutorial">the example here</a>.</li>
+</ul>
+
+<h2 id="まとめ">まとめ</h2>
+
+<p>NPM の Express、Node、およびサードパーティのパッケージは、Web サイトにフォームを追加するために必要なすべてを提供します。この記事では、Pug を使用してフォームを作成する方法、express-validator を使用して入力を検証およびサニタイズする方法、およびデータベース内のレコードを追加、削除、および変更する方法を学びました。</p>
+
+<p>これで、基本的なフォームとフォーム処理コードを自分の Node Web サイトに追加する方法を理解したはずです。</p>
+
+<h2 id="あわせて参照">あわせて参照</h2>
+
+<ul>
+ <li><a href="https://www.npmjs.com/package/express-validator">express-validator</a> (npm ドキュメント).</li>
+</ul>
+
+<p>{{PreviousMenuNext("Learn/Server-side/Express_Nodejs/Displaying_data", "Learn/Server-side/Express_Nodejs/deployment", "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>
diff --git a/files/ja/learn/server-side/express_nodejs/index.html b/files/ja/learn/server-side/express_nodejs/index.html
new file mode 100644
index 0000000000..a7ddf93fe5
--- /dev/null
+++ b/files/ja/learn/server-side/express_nodejs/index.html
@@ -0,0 +1,79 @@
+---
+title: Express Web フレームワーク (Node.js/JavaScript)
+slug: Learn/Server-side/Express_Nodejs
+tags:
+  - Beginner
+  - CodingScripting
+  - Express
+  - Express.js
+  - Intro
+  - JavaScript
+  - Learn
+  - Node
+  - Server-side programming
+  - node.js
+  - イントロダクション
+  - サーバサイドプログラミング
+  - 初心者
+  - 学習
+translation_of: Learn/Server-side/Express_Nodejs
+---
+<div>{{LearnSidebar}}</div>
+
+<p class="summary">Express は、JavaScript で書かれ、Node.js 実行環境内でホストされている、人気の指図しないウェブフレームワークです。このモジュールでは、このフレームワークの主な利点、開発環境の設定方法、一般的なウェブ開発と配置作業の実行方法について説明します。</p>
+
+<h2 id="Prerequisites" name="Prerequisites">前提条件</h2>
+
+<p>このモジュールを始める前に、サーバーサイドのウェブプログラミングとウェブフレームワークが何かを理解する必要があります。理想的なのは<a href="/ja/docs/Learn/Server-side/First_steps">サーバーサイドのウェブサイトプログラミングの第一歩</a>モジュールのトピックを読むことです。プログラミングの概念と <a href="/ja/docs/Web/JavaScript">JavaScript</a> の一般的な知識があることを強くお勧めしますが、中核となる概念を理解するために不可欠ではありません。</p>
+
+<div class="note">
+<p><strong>メモ</strong>: このウェブサイトには、クライアントサイド開発のコンテキストで JavaScript を学習するための多くの有用なリソースがあります。<a href="/docs/Web/JavaScript">JavaScript</a>、<a href="/docs/Web/JavaScript/Guide">JavaScript ガイド</a>、<a href="/docs/Learn/Getting_started_with_the_web/JavaScript_basics">JavaScript の基本</a>、<a href="/docs/Learn/JavaScript">JavaScript </a>(学習)。JavaScript のコアとなる言語と概念は、Node.js でのサーバーサイド開発と同じであり、この資料は関連性があります。Node.js は、ブラウザーレス環境で役立つ機能をサポートするための<a href="https://nodejs.org/dist/latest-v10.x/docs/api/">追加の API</a> を提供します (たとえば、HTTP サーバーを作成してファイルシステムにアクセスするため。ただし、ブラウザーおよび DOM を操作するための JavaScript API はサポートしません)。</p>
+
+<p>このガイドは Node.js と Express を使った作業についての情報を提供します。インターネットや本には他にもたくさんの優れたリソースがあります。これらのうち一部は <a href="http://stackoverflow.com/a/5511507/894359">How do I get started with Node.js</a> (StackOverflow) と <a href="https://www.quora.com/What-are-the-best-resources-for-learning-Node-js?">What are the best resources for learning Node.js?</a> (Quora) からリンクされています。</p>
+</div>
+
+<h2 id="Guides" name="Guides">ガイド</h2>
+
+<dl>
+ <dt><a href="/ja/docs/Learn/Server-side/Express_Nodejs/Introduction">Express/Node の入門</a></dt>
+ <dd>この最初の Express 記事では、"Node とは何ですか？"、"Express とは何ですか？" という質問に答えます。Express ウェブフレームワークが特別になった理由の概要を説明します。主な機能の概要を説明し、Express アプリケーションの主な構成要素をいくつか紹介します (ただし、現時点ではテスト用の開発環境はまだありません)。</dd>
+ <dt><a href="/ja/docs/Learn/Server-side/Express_Nodejs/development_environment">Node (Express) 開発環境の設定</a></dt>
+ <dd>Express の目的がわかったので、Windows、Linux (Ubuntu)、および Mac OS X 上で Node/Express 開発環境を設定およびテストする方法を説明します。この記事は、オペレーティングシステム共通の、Express アプリの開発を始めるために必要なものを提供します。</dd>
+ <dt><a href="/ja/docs/Learn/Server-side/Express_Nodejs/Tutorial_local_library_website">Express チュートリアル: 地域図書館のウェブサイト</a></dt>
+ <dd>私たちの実用的なチュートリアルシリーズの最初の記事はあなたが何を学ぶかについて説明して、それを通して研究し、そしてその後の記事で進化するであろう "地域図書館" の例のウェブサイトの概要を提供します。</dd>
+ <dt><a href="/ja/docs/Learn/Server-side/Express_Nodejs/skeleton_website">Express チュートリアル Part 2: スケルトンウェブサイトの作成</a></dt>
+ <dd>この記事ではどのようにして "スケルトン"ウェブサイトプロジェクトを作成し、その後サイト固有のルート、テンプレート/ビュー、およびデータベースを追加するかを説明します。</dd>
+ <dt><a href="/ja/docs/Learn/Server-side/Express_Nodejs/mongoose">Express チュートリアル Part 3: データベースの使用 (Mongoose を使用)</a></dt>
+ <dd>この記事では、Node/Express 用のデータベースについて簡単に紹介します。続いて、<a href="http://mongoosejs.com/">Mongoose</a> を使用して「地域図書館」ウェブサイトへのデータベースアクセスを提供する方法を説明します。オブジェクトスキーマとモデルの宣言方法、主なフィールドタイプ、および基本的な検証について説明します。また、モデルデータにアクセスするための主な方法のいくつかについても簡単に説明します。</dd>
+ <dt><a href="/ja/docs/Learn/Server-side/Express_Nodejs/routes">Express チュートリアル Part 4: ルートとコントローラー</a></dt>
+ <dd>このチュートリアルでは、「地域図書館」ウェブサイトで最終的に必要なすべてのリソースエンドポイントに対して、"ダミー" ハンドラ関数を使用してルート (URL 処理コード) を設定します。完成したら、次の記事で実際のハンドラ関数を使って拡張できるように、ルート処理コードのためのモジュール構造を作ります。Express を使用してモジュラールートを作成する方法についても、非常によく理解できるでしょう。</dd>
+ <dt><a href="/ja/docs/Learn/Server-side/Express_Nodejs/Displaying_data">Express チュートリアル Part 5: ライブラリデータの表示</a></dt>
+ <dd>これで、「地域図書館」のウェブサイトの書籍やその他のデータを表示するページを追加する準備が整いました。このページには、各モデルタイプのレコード数と、すべてのモデルのリストおよび詳細ページを示すホームページが含まれます。その過程で、データベースからレコードを取得したりテンプレートを使用したりする実際的な経験を積むことになります。</dd>
+ <dt><a href="/ja/docs/Learn/Server-side/Express_Nodejs/forms">Express チュートリアル Part 6: フォームの操作</a></dt>
+ <dd>このチュートリアルでは Pug を使用して Express で <a href="/ja/docs/Learn/HTML/Forms">HTML フォーム</a>を操作する方法、特にデータベースからドキュメントを作成、更新、削除するためのフォームを作成する方法を説明します。</dd>
+ <dt><a href="/ja/docs/Learn/Server-side/Express_Nodejs/deployment">Express チュートリアル Part 7: プロダクションへのデプロイ</a></dt>
+ <dd>これで素晴らしい「地域図書館」ウェブサイトを作成したので、それを公共のウェブサーバーにインストールして、図書館のスタッフとメンバーがインターネットを介してアクセスできるようにします。この記事では、ウェブサイトをデプロイするためのホストを見つける方法、およびサイトを運用に向けて準備するために必要な作業の概要について説明します。</dd>
+</dl>
+
+<h2 id="See_also" name="See_also">関連情報</h2>
+
+<dl>
+ <dt><a href="/ja/docs/Learn/Server-side/Express_Nodejs/Installing_on_PWS_Cloud_Foundry">PWS/Cloud Foundry に LocalLibrary をインストールする</a></dt>
+ <dd>この記事では、<a href="http://run.pivotal.io/">Pivotal Web サービスの PaaS クラウド</a>に「地域図書館」をインストールする方法の実際的なデモンストレーションを行います。これは、上記のチュートリアルの第7部で使用されている PaaS クラウドサービスである Heroku に代わるフル機能のオープンソースです。PWS/Cloud Foundry は、Heroku (または別の PaaS クラウドサービス) に代わるものを探している場合、または単に何か違うことを試したい場合には、絶対にチェックする価値があります。</dd>
+</dl>
+
+<h2 id="Adding_more_tutorials" name="Adding_more_tutorials">チュートリアルを追加する</h2>
+
+<div>
+<p>既存のチュートリアル記事は以上となります。あなたがそれを拡張したいならば、カバーする他の興味深いトピックは以下の通りです：</p>
+
+<ul>
+ <li>セッションの使用</li>
+ <li>ユーザー認証</li>
+ <li>ユーザーの認可と権限</li>
+ <li>Express ウェブアプリケーションをテストする</li>
+ <li>Express ウェブアプリケーションの Web セキュリティ</li>
+</ul>
+
+<p>そしてもちろん、評価作業を行うのは素晴らしいことです。</p>
+</div>
diff --git a/files/ja/learn/server-side/express_nodejs/installing_on_pws_cloud_foundry/index.html b/files/ja/learn/server-side/express_nodejs/installing_on_pws_cloud_foundry/index.html
new file mode 100644
index 0000000000..f3a62d8b6e
--- /dev/null
+++ b/files/ja/learn/server-side/express_nodejs/installing_on_pws_cloud_foundry/index.html
@@ -0,0 +1,242 @@
+---
+title: PWS/Cloud Foundry に LocalLibrary をインストールする
+slug: Learn/Server-side/Express_Nodejs/Installing_on_PWS_Cloud_Foundry
+translation_of: Learn/Server-side/Express_Nodejs/Installing_on_PWS_Cloud_Foundry
+---
+<div>{{LearnSidebar}}</div>
+
+<p class="summary">この記事では Pivotal Web Services の PaaS クラウドに<em>地域図書館</em>をインストールする方法の実際的なデモンストレーションを提供します。これは、チュートリアルのパート7で使用されている PaaS クラウドサービスである Heroku のフル機能のオープンソース代替です。PWS/Cloud Foundry は、Heroku (または別の PaaS クラウドサービス) に代わるものを探している場合、または単に何か違うことを試したい場合には、絶対にチェックする価値があります。</p>
+
+<h2 id="Why_PWS">Why PWS?</h2>
+
+<p>Pivotal Web Services is a public instance of the <a href="https://www.cloudfoundry.org/">Open Source Cloud Foundry Platform</a>. It is a polyglot platform supporting many different languages including Node.js, Java, PHP, Python, Staticfiles, and Ruby. It has a introductory free trial and is incredibly efficient for running Node applications! As Node and Express are open source projects, there is consistency with working with an open deployment platform such as Cloud Foundry. You can get under the <a href="https://github.com/cloudfoundry">hood</a> and see how an application is hosted.</p>
+
+<p>There are multiple reasons to use PWS!</p>
+
+<ul>
+ <li>PWS has a <a href="https://run.pivotla.io/pricing">flexible pricing</a> that is extremely well tuned for small runtimes such as node. It's possible to run a redundant pair of your app for less than $5 per month. That includes a standby failover system to take over running your app if the main server fails at any point.</li>
+ <li>As a PaaS, PWS takes care of a lot of the web infrastructure for us. This makes it much easier to get started, because you don't worry about servers, load balancers, reverse proxies, restarting your website on a crash, or any of the other web infrastructure that PWS provides for us under the hood.</li>
+ <li>Because PWS is using Cloud Foundry, an open platform. You can therefore easily deploy your application to other Cloud Foundry providers such as <a href="https://www.ibm.com/cloud-computing/bluemix/">IBM BlueMix</a>, <a href="https://www.anynines.com/">AnyNines</a> and <a href="https://www.swisscom.ch/en/business/enterprise/offer/cloud-data-center-services/paas/application-cloud.html">Swisscomm Application Cloud</a>. The below instructions will work with any standard Cloud Foundry deployment with minor modifications.</li>
+ <li>While it does have some limitations, these will not affect this particular application. For example:
+  <ul>
+   <li>PWS and Cloud Foundry provide only short-lived storage so user-uploaded files cannot safely be stored on PWS itself.</li>
+   <li>The free trial is good for a year and only up to $87 of app usage. For a typical Node app that means you can run an app for an entire year.</li>
+  </ul>
+ </li>
+ <li>Mostly it just works, and if you end up loving it and want to upgrade, scaling your app is very easy.</li>
+ <li>PWS and other Cloud Foundry applications are used for production apps. </li>
+</ul>
+
+<h2 id="How_does_PWS_work_2">How does PWS work?</h2>
+
+<p>PWS runs websites and applications using containers and has been for many years. Cloud Foundry started using a container technology called Warden and is now using a container system called Garden. These are very similar to the popular Docker container and in fact, many installations of Cloud Foundry support deploying Docker containers.</p>
+
+<p>One of the advantages of using Cloud Foundry is that you do not need to create the container spec, as Cloud Foundry's buildpacks will manufacture them based on the latest components. Apps on Cloud Foundry should follow 12 Factor guidelines as the containers deployed are ephemeral and may be cleaned up at anytime and redeployed somewhere else in the cloud. This ensures that your apps and platform have the latest software. An application can consist of multiple instances where the application is placed into redundant containers that enable high availability of your app. Cloud Foundry will automatically handle all the load balancing between identical instances. This allows you to scale your application for performance and availability</p>
+
+<p>Since the file system is ephemeral any temporary storage or services should be located elsewhere using backing services. This can be done using marketplace services available on different providers or by bringing your own via <a href="https://docs.run.pivotal.io/devguide/services/user-provided.html">User Provided Services</a>.</p>
+
+<h2 id="What_do_we_cover_below">What do we cover below?</h2>
+
+<p>This post covers how to modify the LocalLibrary application from the tutorial for deployment on PWS and Cloud Foundry. In doing so, it covers the basics of deploying any node.js application to PWS with the following steps.</p>
+
+<ul>
+ <li>Configuring the package.json file to run with the engines available on PWS.</li>
+ <li>Adding and installing the<a href="https://github.com/cloudfoundry-community/node-cfenv"> 'cfenv' node module</a> to make working with services easier.</li>
+ <li>Using the cfenv module to connect to a MongoDB instance from mLab that was created and bound using the PWS marketplace.</li>
+ <li>Using the <a href="https://github.com/cloudfoundry/cli">cf CLI</a> tool to create a new mongoDB service instance and bind it to the local library application.</li>
+ <li>How to set environment variables for Node using the cf CLI.</li>
+ <li>How to look at logs, again using the cf CLI tool.</li>
+</ul>
+
+<p>So let's get started. You have two options, you can go through the tutorial from the <a href="&lt;https://developer.mozilla.org/en-US/docs/Learn/Server-side/Express_Nodejs/Tutorial_local_library_website>">beginning</a> or you can just download the completed project and modify it from there for use on PWS. To do the latter, you can do the following from a terminal:</p>
+
+<pre class="brush: bash"><code>git clone https://github.com/mdn/express-locallibrary-tutorial</code></pre>
+
+<p>You'll then need to follow the preparation steps listed in the <a href="/en-US/docs/Learn/Server-side/Express_Nodejs/deployment#Getting_your_website_ready_to_publish">Getting your website ready to publish</a> section of <a href="/en-US/docs/Learn/Server-side/Express_Nodejs/deployment">Express Tutorial Part 7: Deploying to production</a>, before then following the steps listed below.</p>
+
+<div class="note">
+<p><strong>Note</strong>: This work flow is based on the <a href="/en-US/docs/Learn/Server-side/Express_Nodejs/deployment#Example_Installing_LocalLibrary_on_Heroku">Mozilla Heroku work flow in the main Express/Node tutorial series</a> for consistency, to help readers compare and contrast. </p>
+</div>
+
+<h2 id="Modifying_the_LocalLibrary_for_PWS">Modifying the LocalLibrary for PWS</h2>
+
+<p id="How_does_PWS_work">Deployment of a Node application on Cloud Foundry takes the following steps. Using the downloaded 'cf' CLI tool on your environment, your source code and supporting metadata files are uploaded to Cloud Foundry which will assemble and package the components of your application. Note that your files need to be located on your system to deploy or as a zip archive somewhere accessible on the internet. We'll assume the former.</p>
+
+<p>This means, no assumptions about which source control system is used. As long as you have a complete source tree in your local file system you can deploy the app. There are some things you have to make available to ensure the correctly assembly of your Node application. First Cloud Foundry cf CLI will look for the presence of the 'package.json' file to determine the dependencies and download the necessary components. The rules of this assembly are defined in Cloud Foundry's <a href="http://docs.run.pivotal.io/buildpacks/node/">nodejs buildpack</a>. An optional cloud foundry manifest file can specify information about your application such as name, size and start command if non-standard. In addition to deploying the application, the cf CLI tool can also configure services, set environment variables and view logs. That's all the overview you need in order to get started (see <a href="https://docs.run.pivotal.io">Getting Started on Pivotal Web Services</a> for a more comprehensive guide). Let's start making the changes so you'll need to deploy the <em>LocalLibrary</em> application to  PWS.</p>
+
+<h3 id="Set_node_version">Set node version</h3>
+
+<p>The <strong>package.json</strong> contains everything needed to work out your application dependencies and what file should be launched to start your site. Cloud Foundry and PWS detects the presence of this file, and will use it to provision your app environment. The only useful information missing in our current <strong>package.json</strong> is the version of node. We can find the version of node we're using for development by entering the command:</p>
+
+<pre class="brush: bash">node --version
+# <em>will return version e.g. v6.10.3</em></pre>
+
+<p>Open <strong>package.json</strong> with a text editor, and add this information as an <strong>engines &gt; node</strong> section as shown (using the version number retrieved above).</p>
+
+<pre class="brush: json">{
+  "name": "express-locallibrary-tutorial",
+  "version": "0.0.0",
+<strong>  "engines": {
+    "node": "6.10.3"
+  },</strong>
+  "private": true,
+  ...
+</pre>
+
+<h3 id="Database_configuration">Database configuration</h3>
+
+<p>So far in this tutorial we've used a single database that is hard coded into the <strong>app.js </strong>file. Normally we'd like to be able to have a different database for production and development, so next we'll modify the LocalLibrary website to get the database URI from the OS environment, and otherwise use our development database that we added manually earlier. Cloud Foundry has a very flexible services model that enables multiple services of the same type to exist in the environment. It stores all services related configurations in a single parseable JSON object called <code>VCAP_SERVICES</code>. A typical <code>VCAP_SERVICES</code> variable looks like this:</p>
+
+<pre class="brush: json">{
+ "VCAP_SERVICES": {
+  "mlab": [
+   {
+    "credentials": {
+     "uri": "mongodb://CloudFoundry_test_dev:somecr8zypassw0rd@dbhost.mlab.com:57971/CloudFoundry_dbname"
+    },
+    "label": "mlab",
+    "name": "node-express-tutorial-mongodb",
+    "plan": "sandbox",
+    "provider": null,
+    "syslog_drain_url": null,
+    "tags": [
+     "Cloud Databases",
+     "Developer Tools",
+     "Web-based",
+     "Data Store",
+    ],
+    "volume_mounts": []
+   }
+  ]
+ }
+}
+
+</pre>
+
+<p>Writing the code to extract and parse this environment variable is not hard, but it doesn't add a lot of value when others have written libraries to do this. In this case, there is a node.js package we can use called <a href="https://github.com/cloudfoundry-community/node-cfenv"><em>cfenv</em></a>.</p>
+
+<p>This will download the cfenv module and its dependencies, and modify the package.json file as required. Open <strong>app.js</strong> and find the block with all the 'requires' that load the modules into your application. In this example look for the line that looks something like this:</p>
+
+<pre class="brush: js">var expressValidator = require('express-validator');</pre>
+
+<p>If you cannot find that exact line, look for the blocks of 'requires' and look for the last one. Add the following text after it:</p>
+
+<pre class="brush: js">var cfenv = require('cfenv');</pre>
+
+<ol>
+ <li>
+  <p>To install the package, go to your terminal and make sure you are in the directory where the <code>package.json</code> file for LocalLibrary is. From the command line, type:</p>
+
+  <pre class="brush: bash">npm install cfenv</pre>
+ </li>
+ <li>
+  <p>Now that you have loaded the module, this next line will instantiate an object that will contain the app and services information required for deployment. Add the following after the line that contains <code>app.use(helmet());</code></p>
+
+  <pre class="brush: js">// Set up CF environment variables
+var appEnv = cfenv.getAppEnv();
+</pre>
+
+  <p>When this line executes, all the Cloud Foundry application environment information will become available to the application in the <code>appEnv</code> object.</p>
+ </li>
+ <li>
+  <p>Now it is time to update the application to use the database configured by the platform. Find the line that sets the mongoDB connection variable. It will look something like this:</p>
+
+  <pre class="brush: js">var mongoDB = process.env.MONGODB_URI || dev_db_url;</pre>
+ </li>
+ <li>
+  <p>You will now modify the line with the following code  <code>appEnv.getServiceURL('node-express-tutorial-mongodb')</code> to get the connection string from an environment variable that is being managed by the <code>cfenv</code>  module. If no service has been created and bound it will use your own database URL you created as part of the tutorial instead of the one from the environment. So replace the line above with the following:</p>
+
+  <pre class="brush: js">var mongoDB = appEnv.getServiceURL('node-express-tutorial-mongodb') || dev_db_url;
+</pre>
+ </li>
+ <li>
+  <p>Now run the site locally (see <a href="https://developer.mozilla.org/en-US/docs/Learn/Server-side/Express_Nodejs/routes#Testing_the_routes">Testing the routes</a> for the relevant commands) and check that the site still behaves as you expect. At this point your app is ready to use with Cloud Foundry and Pivotal Web Services.</p>
+ </li>
+</ol>
+
+<h2 id="Get_a_Pivotal_Web_Services_account">Get a Pivotal Web Services account</h2>
+
+<p>To start using Pivotal Web Services you will first need to create an account (skip ahead to <a href="#Create_and_upload_the_website">Create and upload the website</a> if you've already got an account and have already installed the PWS cf CLI client).</p>
+
+<ul>
+ <li>Go to <a href="https://run.pivotal.io">https://run.pivotal.io</a> and click the <strong>SIGN UP FOR FREE</strong> button.</li>
+ <li>Enter your details and then press <strong>CREATE FREE ACCOUNT</strong>. You'll be asked to check your email for a sign-up email.</li>
+ <li>Click the account activation link in the signup email. You'll be taken back to your account on the web browser and you will complete the registration.</li>
+ <li>You will set your password and go through the rest of the new user sign up and how to claim your free trial account. Note you need a mobile phone to confirm your account. You will receive an "org" account funded with $87 of application usage credit. Note your email account can be in multiple orgs on PWS. This is similar to your user account on services like GitHub.</li>
+ <li>Go to <a href="https://login.run.pivotal.io">https://console.run.pivotal.io</a> and login in. You'll then be logged in and taken to the PWS dashboard: <a href="https://console.run.pivotal.io">https://console.run.pivotal.io</a>.</li>
+</ul>
+
+<h2 id="Install_the_cf_CLI_client">Install the cf CLI client</h2>
+
+<p>The cf CLI client is a software tool for managing and deploying your application. Download and install the PWS cf CLI client by following the <a href="https://console.run.pivotal.io/tools">instructions on Pivotal Web Services</a> or downloading directly from <a href="https://github.com/cloudfoundry/cli">GIthub</a>. Be sure to download the correct version for your computer. After the client is installed you will be able run commands, for example to get help on the client:</p>
+
+<pre class="brush: bash">cf help
+</pre>
+
+<p>We'll now go through the steps to login to PWS using the CLI and deploy — or in Cloud Foundry parlance "push" your app.</p>
+
+<h2 id="Create_and_upload_the_website">Create and upload the website</h2>
+
+<p>To create the app we navigate to the directory where our modified files are. This is the same directory where the LocalLibrary package.json file is located. First, let's tell the cf CLI which Cloud Foundry instance you want to use. We need to do this, since the cf CLI tool can be used with any standard Cloud Foundry system, so this command indicates which specific Cloud Foundry you are using. Enter the following terminal command now:</p>
+
+<pre class="brush: bash">cf api api.run.pivotal.io</pre>
+
+<p>Next login using the following command (enter your email and password when prompted):</p>
+
+<pre class="brush: bash">cf login
+Email: enter your email
+Password: enter your password</pre>
+
+<p>We can now push our app to PWS. In the below example. replace 'some-unique-name' with something you can remember that is likely to be unique. If it isn't unique, the system will let you know. The reason this name has to be unique to the PWS system is it is the address we will use to to access your LocalLibrary application. I used <em>mozilla-express-tutorial-xyzzy</em>. You should use something else.</p>
+
+<pre class="brush: bash">cf push some-unique-name -m 256MB</pre>
+
+<p>Note the <code>-m</code> flag we added is not required. We just included it so that we only use 256MB of memory to run the app. Node apps typically can run in 128 MB, but we are being safe. If we didn't specify the memory, the CLI would use the default 1 GB of memory, but we want to make sure your trial lasts longer. You should now see a bunch of text on the screen. It will indicate that the CLI is uploading all your files, that it's using the node buildpack, and it will start the app. If we're lucky, the app is now "running" on the site at the URL <code>https://some-unique-name.cfapps.io</code>. Open your browser and run the new website by going to that URL.</p>
+
+<div class="note"><strong>Note</strong>: The site will be running using our hardcoded development database at this time. Create some books and other objects, and check out whether the site is behaving as you expect. In the next section we'll set it to use our new database.</div>
+
+<h2 id="Setting_configuration_variables">Setting configuration variables</h2>
+
+<p>You will recall from a preceding section that we need to <a href="#NODE_ENV">set NODE_ENV to 'production'</a> in order to improve our performance and generate less-verbose error messages.</p>
+
+<ol>
+ <li>
+  <p>Do this by entering the following command:</p>
+
+  <pre class="brush: bash">cf set-env some-unique-name NODE_ENV production
+</pre>
+ </li>
+ <li>
+  <p>We should also use a separate database for production. Cloud Foundry can take advantage of a marketplace to create a new service and automatically bind it to your app. Bind means place the service database credentials in the environment variable space of the container running your application for you to access. Enter the following commands:</p>
+
+  <pre class="brush: bash">cf create-service mlab sandbox node-express-tutorial-mongodb
+cf bind-service some-unique-name node-express-tutorial-mongodb
+</pre>
+ </li>
+ <li>
+  <p>You can inspect your configuration variables at any time using the <code>cf env some-unique-name</code> command — try this now:</p>
+
+  <pre class="brush: bash">cf env some-unique-name
+</pre>
+ </li>
+ <li>
+  <p>In order for your applications to use the new credentials you will have to restage your application, meaning that it will restart and apply the new environment variables. This can be done using the following — enter this command now:</p>
+
+  <pre class="brush: bash">cf restage some-unique-name
+</pre>
+ </li>
+ <li>
+  <p>If you check the home page now it should show zero values for your object counts, as the changes above mean that we're now using a new (empty) database.</p>
+ </li>
+</ol>
+
+<h2 id="Debugging">Debugging</h2>
+
+<p>The PWS cf client provides a few tools for debugging:</p>
+
+<pre class="brush: bash">&gt;cf logs some-unique-name --recent  # Show current logs
+&gt;cf logs some-unique-name # Show current logs and keep updating with any new results</pre>
+
+<h2 id="Summary">Summary</h2>
+
+<p>If you followed the above steps, you should have now deployed the LocalLibrary app to PWS. Well done! If the deployment wasn't successful, double check all the steps.</p>
diff --git a/files/ja/learn/server-side/express_nodejs/introduction/index.html b/files/ja/learn/server-side/express_nodejs/introduction/index.html
new file mode 100644
index 0000000000..c194cff772
--- /dev/null
+++ b/files/ja/learn/server-side/express_nodejs/introduction/index.html
@@ -0,0 +1,528 @@
+---
+title: Express/Node のイントロダクション
+slug: Learn/Server-side/Express_Nodejs/Introduction
+tags:
+  - Beginner
+  - CodingScripting
+  - Express
+  - Learn
+  - Node
+  - nodejs
+  - server-side
+  - サーバーサイド
+  - 初心者
+translation_of: Learn/Server-side/Express_Nodejs/Introduction
+---
+<div>{{LearnSidebar}}</div>
+
+<div>{{NextMenu("Learn/Server-side/Express_Nodejs/development_environment", "Learn/Server-side/Express_Nodejs")}}</div>
+
+<p class="summary">Express の最初の記事では ”Node って何だろう？”、”Express って何だろう？”という疑問に答え、なぜ Express ウェブフレームワークが特別なのかについて概要を説明します。主な特徴、Express アプリケーションの主な基本要素(テスト開発環境についてはここではまだ触れません) を大まかに説明します。</p>
+
+<table class="learn-box standard-table">
+ <tbody>
+  <tr>
+   <th scope="row">前提条件</th>
+   <td>基本的なコンピューターリテラシー。<a href="/ja/docs/Learn/Server-side/First_steps">サーバーサイドのウェブサイトプログラミング</a>の一般的な理解、特に<a href="/ja/docs/Learn/Server-side/First_steps/Client-Server_overview">ウェブサイトにおけるクライアントとサーバーのやりとり</a>の仕組み。</td>
+  </tr>
+  <tr>
+   <th scope="row">目標</th>
+   <td>Express の特徴、Node との適合性、提供する機能、Express アプリケーションの主要な基本要素に慣れてください。</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Node_の紹介"><span class="short_text" id="result_box" lang="ja"><span>Node の紹介</span></span></h2>
+
+<p><a href="https://nodejs.org/">Node</a><span class="short_text" id="result_box" lang="ja"><span> (正式には Node.js) </span></span><span id="result_box" lang="ja"><span>はオープンソースのクロスプラットフォーム、実行環境で、開発者はあらゆるサーバーサイドのツールやアプリケーションを <a href="ja/docs/Glossary/JavaScript">JavaScript</a> で作成することができます。この実行環境はブラウザーコンテキスト外での使用 (すなわち、コンピューターまたはサーバー OS 上での直接実行) を目的としています。そのため、クライアントサイドではブラウザー固有の JavaScript API が省略され、HTTP やファイルシステムライブラリを含む従来の OS API がサポートされます</span></span><span lang="ja"><span>。</span></span></p>
+
+<p>ウェブサーバー開発の観点から Node には多くの利点があります。</p>
+
+<ul>
+ <li>素晴らしいパフォーマンス！ Node はウェブアプリケーションのスループットとスケーラビリティを最適化するように設計されており、多くの一般的なウェブ開発の問題 (リアルタイムウェブアプリケーションなど) に非常に適しています</li>
+ <li>コードは "plain old JavaScript" で書かれています。つまり、ブラウザーとウェブサーバーの両方のコードを記述しているときに、言語間の "コンテキストシフト" に費やす時間が短くなります</li>
+ <li>JavaScript は比較的新しいプログラミング言語であり、他の従来の ウェブサーバー言語 (Python、PHPなど) と比較して言語設計の改善のメリットがあります。CoffeeScript、ClosureScript、Scala、LiveScript などを使用できるように、新しく普及している多くの言語が JavaScript にコンパイル/変換されます。</li>
+ <li>Node パッケージマネージャー (NPM) は、何十万もの再利用可能なパッケージへのアクセスを提供します。クラス最高の依存関係解決機能もあり、ほとんどのビルドツールチェーンの自動化にも使用できます。</li>
+ <li>Node.js は移植可能です。Microsoft Windows、macOS、Linux、Solaris、FreeBSD、OpenBSD、WebOS、および NonStop OS で利用できます。さらに、多くの ウェブホスティングプロバイダが、Node サイトをホスティングするための特定のインフラストラクチャとドキュメントが提供しています。</li>
+ <li>非常に活発な第三者のエコシステムと開発者コミュニティがあり、多くの方々が 快く協力しています。</li>
+</ul>
+
+<p>Node HTTP パッケージを使用することで、Node.js で簡単な ウェブサーバーを作成できます。</p>
+
+<h3 id="Hello_Node.js">Hello Node.js</h3>
+
+<p>次の例では、URL <code>http://127.0.0.1:8000/</code> にあるあらゆる種類の HTTP リクエストを待ち受ける ウェブサーバーを作成します。リクエストが受信されると、スクリプトは "Hello World" という文字列でレスポンスします。すでに Node をインストールしている場合は、次の手順に従ってこの例を試すことができます。</p>
+
+<ol>
+ <li>ターミナルを開きます (Windows ではコマンドラインユーティリティを開きます)。</li>
+ <li>プログラムを保存するフォルダ (たとえば "test-node") を作成し、端末に次のコマンドを入力して移動します。</li>
+</ol>
+
+<pre class="line-numbers  language-html"><code class="language-html">cd test-node</code></pre>
+
+<ol start="3">
+ <li>好きなテキストエディタを使って "hello.js" というファイルを作成し、次のコードを貼り付けます。</li>
+</ol>
+
+<pre class="brush: js">// HTTPモジュールの読み込み
+var http = require("http");
+
+//  <span id="result_box" lang="ja"><span>HTTPサーバーを作成し、ポート8000でリクエスト</span></span>を行う
+http.createServer(function(request, response) {
+
+   // HTTP ステータスとコンテントタイプを持つ HTTP ヘッダのレスポンスを設定
+   response.writeHead(200, {'Content-Type': 'text/plain'});
+
+   // レスポンスボディー"Hello World"を送信
+   response.end('Hello World\n');
+}).listen(8000);
+
+//  <span class="short_text" id="result_box" lang="ja"><span>サーバーにアクセスするための URL を出力</span></span>
+console.log('Server running at http://127.0.0.1:8000/');</pre>
+
+<ol start="4">
+ <li>上記で作成したフォルダにファイルを保存します。</li>
+ <li>ターミナルに戻り、次のコマンドを入力します。</li>
+</ol>
+
+<pre class="brush: bash line-numbers  language-bash"><code class="language-bash">node "hello.js"</code></pre>
+
+<p>最後に、ウェブブラウザーで <code>"http://localhost:8000"</code> に移動します。テキスト以外は空の ウェブページの左上に "Hello World" というテキストが表示されます。</p>
+
+<h2 id="ウェブフレームワーク">ウェブフレームワーク</h2>
+
+<p>その他の一般的なウェブ開発タスクは、Node 自体では直接サポートされていません。異なる HTTP 動詞 (<code>GET</code>, <code>POST</code>, <code>DELETE</code> など) に特定の処理を追加したい場合、別々の URL パス ("routes") でリクエストを個別に処理したり、静的ファイルを提供したり、テンプレートを使用してレスポンスを動的に作成したり、あなた自身でコードを書く必要があります。そうしない場合はウェブフレームワークを使用して、車輪の再発明を避けることができます。</p>
+
+<h2 id="Express_のイントロダクション">Express のイントロダクション</h2>
+
+<p><a href="https://expressjs.com/ja/">Express</a> は最も一般的な Node ウェブフレームワークであり、他の多くの一般的な <a href="https://expressjs.com/en/resources/frameworks.html">Node ウェブフレームワーク</a>の基礎となるライブラリです。それは以下のメカニズムを提供します：</p>
+
+<ul>
+ <li>異なる URL のパス (ルート) で異なる HTTP 動詞を使用してリクエストのハンドラを作成します。</li>
+ <li>テンプレートにデータを挿入してレスポンスを生成するために、「ビュー」レンダリングエンジンと統合します。</li>
+ <li>接続に使用するポートやレスポンスのレンダリングに使用されるテンプレートの場所などの一般的なウェブアプリケーション設定値を設定します。</li>
+ <li>リクエスト処理パイプライン内の任意の時点で、追加のリクエスト処理「ミドルウェア」を追加します。</li>
+</ul>
+
+<p>Express 自体はかなりシンプルですが、開発者はほぼすべてのウェブ開発問題に対応する互換性のあるミドルウェアパッケージを作成しています。Cookie、セッション、ユーザーログイン、URL パラメータ、POST データ、セキュリティヘッダーなどを扱うライブラリがあります。Express チームが管理するミドルウェア・パッケージのリストは、<a href="http://expressjs.com/en/resources/middleware.html">Express Middleware</a> (一般的なサード・パーティ・パッケージのリストとともに) にあります。</p>
+
+<div class="note">
+<p><strong>注:</strong> この柔軟性は両刃の剣です。ほぼすべての問題や要件に対応するミドルウェアパッケージがありますが、適切なパッケージを使用して作業することは時には挑戦になることがあります。アプリケーションを構造化する「正しい方法」もなく、インターネット上で見つかる多くの例は最適ではないし、ウェブアプリケーションを開発するために必要なことのほんの一部を示しているだけです。</p>
+</div>
+
+<h2 id="Node_と_Express_はどこから来たのですか？">Node と Express はどこから来たのですか？</h2>
+
+<p>Node は 2009 年に Linux 用に最初にリリースされました。NPM パッケージマネージャは 2010 年にリリースされ、ネイティブ Windows サポートは 2012 年に追加されました。現在の LTS リリースは Node v10.13.0 で、最新のリリースは Node 11.2.0 です。これは、豊かな歴史の小さなスナップショットです。もっと知りたいのであれば、<a href="https://en.wikipedia.org/wiki/Node.js#History">Wikipedia</a> を掘り下げてみてください。</p>
+
+<p>Express は 2010 年 11 月に最初にリリースされ、現在 API のバージョンが 4.16.3 になっています。現在のリリースの変更点については<a href="https://expressjs.com/en/changelog/4x.html">更新履歴</a>を、詳細な履歴リリースノートについては <a href="https://github.com/expressjs/express/blob/master/History.md">GitHub</a> を参照してください。</p>
+
+<h2 id="Node_と_Express_はどれくらい普及していますか？">Node と Express はどれくらい普及していますか？</h2>
+
+<p>ウェブフレームワークの普及は、それが維持されるかどうかの指標であり、ドキュメンテーション、アドオンライブラリ、テクニカルサポートの面でどのようなリソースが利用される可能性が高いかという点で重要です。</p>
+
+<p>サーバー側のフレームワークの普及率 (<a href="http://hotframeworks.com/">Hot Frameworks</a> のようなサイトでは、GitHub プロジェクトの数や各プラットフォームの StackOverflow の質問数などの仕組みを使って人気を評価しようとしています) は、すぐに利用可能で決定的なものではありません。より良い質問は、人気のないプラットフォームの問題を避けるために Node と Express が「人気がある」かどうかです。それらは進化し続けていますか？あなたがそれを必要としたら助けを得ることができますか？あなたが Express を学ぶならば、あなたは職を得る機会がありますか？</p>
+
+<p>Express を使用している<a href="https://expressjs.com/en/resources/companies-using-express.html">有名企業</a>の数、コードベースに貢献している人の数、および無料と有料の両方でサポートを提供している人の数に基づけば、Express は一般的なフレームワークです。</p>
+
+<h2 id="Expressは指図をしたがりますか？">Expressは指図をしたがりますか？</h2>
+
+<p>ウェブフレームワークはしばしば自身を「指図をしたがる」または「指図をしない」ものと称します。</p>
+
+<p>指図をしたがるフレームワークは、特定のタスクを扱うのに「正しい方法」があるという考えを持っています。何であれ正しい方法であれば普通よく理解され細かく文書化されているため、（特定のタイプの問題を解決するような）特定の領域における素早い開発をサポートします。しかしながら、彼らが主眼とする領域の外にある問題を解決するにあたっては柔軟性に劣り、利用できるコンポーネントやアプローチの選択肢が限られたものになりがちです。</p>
+
+<p>一方、指図をしないフレームワークは、目的の達成のためにコンポーネントをつなぎ合わせる最善の方法や、どのコンポーネントを使うかにさえも、あまり制約を設けません。<br>
+ 開発者は、コンポーネントを自分自身で探す必要があるという手間をかければ、特定のタスクを完了させるのに最適なツールの利用をより容易にします。</p>
+
+<p>Express は指図をしません。リクエストを処理するチェインの中で、互換性のある好きなミドルウェアを、好きな順番で挿し込むことができます。1 つのファイルまたは複数のファイル、任意のディレクトリ構造を使ってアプリケーションを構成できます。<br>
+ ときに選択肢が多すぎるようにも感じられるでしょう！</p>
+
+<h2 id="Expressコードはどのように見えますか？">Expressコードはどのように見えますか？</h2>
+
+<p>従来のデータ駆動型ウェブサイトでは、ウェブアプリケーションはウェブブラウザー (または他のクライアント) からの HTTP リクエストを待機します。リクエストが受信されると、アプリケーションは URL パターンと、<code>POST</code> データまたは <code>GET</code> データに含まれる可能性のある関連情報に基づいて、必要なアクションを実行します。必要に応じて、データベースから情報を読み書きしたり、リクエストを満たすために必要な他のタスクを実行することができます。アプリケーションはウェブブラウザーにレスポンスを返し、検索されたデータを HTML テンプレートのプレースホルダに挿入することによってブラウザーが表示する HTML ページを動的に作成することがよくあります。</p>
+
+<p>Express は特定の HTTP 動詞 (<code>GET</code>, <code>POST</code>, <code>SET</code> など) と URL パターン ("Route") に対してどの関数が呼び出されるかを指定するメソッドと、どのテンプレート ("view") エンジンが使用されるかを指定するメソッドを提供します。テンプレートエンジンを使用するには、レスポンスをレンダリングするためのテンプレートファイルを配置します。Express ミドルウェアを使用して、Cookie、セッション、およびユーザー、<code>POST</code>/<code>GET</code> パラメーターなどのサポートを追加することができます。Node がサポートするデータベース・メカニズムを使用できます (Express はデータベース関連の動作を定義しません)。</p>
+
+<p>次のセクションでは、Express およびノー​​ド・コードを使用して作業するときに表示される一般的な事項について説明します。</p>
+
+<h3 id="Helloworld_Express">Helloworld Express</h3>
+
+<p>最初に、標準の Express の <a href="https://expressjs.com/ja/starter/hello-world.html">Hello World</a> の例を考えてみましょう (これについては、以下の各セクションで説明します)。</p>
+
+<div class="note">
+<p><strong>Tip:</strong> Node と Express がすでにインストールされている場合 (または<a href="/ja/docs/Learn/Server-side/Express_Nodejs/development_environment">次の記事</a>のようにインストールする場合) は、このコードを <strong>app.js</strong> というテキストファイルに保存し、bash コマンドプロンプトで次のように呼び出して実行できます。</p>
+
+<p><strong><code>node ./app.js</code></strong></p>
+</div>
+
+<pre class="brush: js line-numbers  language-js"><code class="language-js"><span class="keyword token">var</span> express <span class="operator token">=</span> <span class="function token">require</span><span class="punctuation token">(</span><span class="string token">'express'</span><span class="punctuation token">)</span><span class="punctuation token">;</span>
+<span class="keyword token">var</span> app <span class="operator token">=</span> <span class="function token">express</span><span class="punctuation token">(</span><span class="punctuation token">)</span><span class="punctuation token">;</span>
+
+app<span class="punctuation token">.</span><span class="keyword token">get</span><span class="punctuation token">(</span><span class="string token">'/'</span><span class="punctuation token">,</span> <span class="keyword token">function</span><span class="punctuation token">(</span>req<span class="punctuation token">,</span> res<span class="punctuation token">)</span> <span class="punctuation token">{</span>
+  res<span class="punctuation token">.</span><span class="function token">send</span><span class="punctuation token">(</span><span class="string token">'Hello World!'</span><span class="punctuation token">)</span><span class="punctuation token">;</span>
+<span class="punctuation token">}</span><span class="punctuation token">)</span><span class="punctuation token">;</span>
+
+app<span class="punctuation token">.</span><span class="function token">listen</span><span class="punctuation token">(</span><span class="number token">3000</span><span class="punctuation token">,</span> <span class="keyword token">function</span><span class="punctuation token">(</span><span class="punctuation token">)</span> <span class="punctuation token">{</span>
+  console<span class="punctuation token">.</span><span class="function token">log</span><span class="punctuation token">(</span><span class="string token">'Example app listening on port 3000!'</span><span class="punctuation token">)</span><span class="punctuation token">;</span>
+<span class="punctuation token">}</span><span class="punctuation token">)</span><span class="punctuation token">;</span></code></pre>
+
+<p>最初の2行は <code>require()</code> で express モジュールをインポートして <a href="https://expressjs.com/ja/4x/api.html#app">Express アプリケーション</a>を作成します。このオブジェクトは伝統的に <code>app</code> と呼ばれ、HTTP リクエストのルーティング、ミドルウェアの設定、HTML ビューのレンダリング、テンプレートエンジンの登録、アプリケーションの動作を制御する<a href="https://expressjs.com/ja/4x/api.html#app.settings.table">アプリケーション設定</a>の変更 (環境モード、ルート定義の大文字と小文字の区別など) のためのメソッドがあります。</p>
+
+<p>コードの中央部分 (<code>app.get</code> で始まる3行) はルート定義を示しています。<code>app.get()</code> メソッドは、サイトルートからの相対パス (<code>'/'</code>) を持つ HTTP <code>GET</code> リクエストがあるたびに呼び出されるコールバック関数を指定します。コールバック関数はリクエストとレスポンスオブジェクトを引数として取り、レスポンスに対して単に <code><a href="https://expressjs.com/ja/4x/api.html#res.send">send()</a></code> を呼び出して文字列 "Hello World!" を返します。</p>
+
+<p>最後のブロックは3000番ポートでサーバーを起動し、コンソールにログコメントを出力します。 サーバーが稼働している場合は、ブラウザーの <code>localhost:3000</code> にアクセスして、レスポンスの例を確認することができます。</p>
+
+<h3 id="モジュールのインポートと作成">モジュールのインポートと作成</h3>
+
+<p>モジュールは Node の <code>require()</code> 関数を使って他のコードにインポートできる JavaScript ライブラリ/ファイルです。 Express 自体はモジュールです。Express アプリケーションで使用するミドルウェアおよびデータベースライブラリも同様です。</p>
+
+<p>以下のコードは、例として Express フレームワークを使用して、モジュールを名前でインポートする方法を示しています。 最初に <code style="font-style: normal; font-weight: normal;">require()</code> 関数を呼び出し、モジュールの名前を文字列 (<code>'express'</code>) として指定し、返されたオブジェクトを呼び出して <a href="https://expressjs.com/ja/4x/api.html#app.settings.table">Express アプリケーション</a>を作成します。その後、アプリケーションオブジェクトのプロパティと機能にアクセスできます。</p>
+
+<pre class="brush: js line-numbers  language-js"><code class="language-js"><span class="keyword token">var</span> express <span class="operator token">=</span> <span class="function token">require</span><span class="punctuation token">(</span><span class="string token">'express'</span><span class="punctuation token">)</span><span class="punctuation token">;</span>
+<span class="keyword token">var</span> app <span class="operator token">=</span> <span class="function token">express</span><span class="punctuation token">(</span><span class="punctuation token">)</span><span class="punctuation token">;</span></code></pre>
+
+<p>独自のモジュールを作成して、同じ方法でインポートすることもできます。</p>
+
+<div class="note">
+<p><strong>メモ:</strong> あなたは自身のモジュールを作成したいと思うでしょう、これはあなたが自身のコードを管理しやすい部品に分けることを可能にします 。ちなみに、モノリシックな単一ファイルのアプリケーションは理解し維持するのが難しいです。モジュールを使用すると、明示的にエクスポートした変数のみがインポートされるため、モジュールを使用すると名前空間を管理するのにも役立ちます。</p>
+</div>
+
+<p>オブジェクトをモジュールの外部で利用可能にするには、それらを <code>exports</code> オブジェクトの追加プロパティとして公開するだけです。たとえば、以下の <strong>square.js</strong> モジュールは <code>area()</code> メソッドと <code>perimeter()</code> メソッドをエクスポートしたファイルです。</p>
+
+<pre class="brush: js line-numbers  language-js"><code class="language-js">exports<span class="punctuation token">.</span>area <span class="operator token">=</span> <span class="keyword token">function</span><span class="punctuation token">(</span>width<span class="punctuation token">)</span> <span class="punctuation token">{</span> <span class="keyword token">return</span> width <span class="operator token">*</span> width<span class="punctuation token">;</span> <span class="punctuation token">}</span><span class="punctuation token">;</span>
+exports<span class="punctuation token">.</span>perimeter <span class="operator token">=</span> <span class="keyword token">function</span><span class="punctuation token">(</span>width<span class="punctuation token">)</span> <span class="punctuation token">{</span> <span class="keyword token">return</span> <span class="number token">4</span> <span class="operator token">*</span> width<span class="punctuation token">;</span> <span class="punctuation token">}</span><span class="punctuation token">;</span></code></pre>
+
+<p><code>require()</code> を使ってこのモジュールをインポートし、次に示すようにエクスポートされたメソッドを呼び出すことができます。</p>
+
+<pre class="brush: js line-numbers  language-js"><code class="language-js"><span class="keyword token">var</span> square <span class="operator token">=</span> <span class="function token">require</span><span class="punctuation token">(</span><span class="string token">'./square'</span><span class="punctuation token">)</span><span class="punctuation token">;</span> <span class="comment token">//  require() にはファイル拡張子を除いたファイル名を引数に指定します。</span>
+console<span class="punctuation token">.</span><span class="function token">log</span><span class="punctuation token">(</span><span class="string token">'The area of a square with a width of 4 is '</span> <span class="operator token">+</span> square<span class="punctuation token">.</span><span class="function token">area</span><span class="punctuation token">(</span><span class="number token">4</span><span class="punctuation token">)</span><span class="punctuation token">)</span><span class="punctuation token">;</span></code></pre>
+
+<div class="note">
+<p><strong>メモ:</strong> モジュールへの絶対パス (または最初に行ったように名前) を指定することもできます。</p>
+</div>
+
+<p>一度に1つのプロパティを構築するのではなく、1つの割り当てで完全なオブジェクトをエクスポートする場合は、次のように <code>module.exports</code> に割り当てます (これを実行して、エクスポートオブジェクトのルートをコンストラクタまたは他の関数にすることもできます)。</p>
+
+<pre class="brush: js line-numbers  language-js"><code class="language-js">module<span class="punctuation token">.</span>exports <span class="operator token">=</span> <span class="punctuation token">{</span>
+  area<span class="punctuation token">:</span> <span class="keyword token">function</span><span class="punctuation token">(</span>width<span class="punctuation token">)</span> <span class="punctuation token">{</span>
+    <span class="keyword token">return</span> width <span class="operator token">*</span> width<span class="punctuation token">;</span>
+  <span class="punctuation token">}</span><span class="punctuation token">,</span>
+
+  perimeter<span class="punctuation token">:</span> <span class="keyword token">function</span><span class="punctuation token">(</span>width<span class="punctuation token">)</span> <span class="punctuation token">{</span>
+    <span class="keyword token">return</span> <span class="number token">4</span> <span class="operator token">*</span> width<span class="punctuation token">;</span>
+  <span class="punctuation token">}</span>
+<span class="punctuation token">}</span><span class="punctuation token">;</span></code></pre>
+
+<div class="note">
+<p><strong>Note:</strong> あなたは <code>exports</code> を与えられたモジュール内の <code>module.exports</code> への<a href="https://nodejs.org/api/modules.html#modules_exports_shortcut">ショートカット</a>として考えることができます。実際、<code>exports</code> は、モジュールが評価される前に <code>module.exports</code> の値に初期化される単なる変数です。 その値はオブジェクト (この場合は空のオブジェクト) への参照です。これは、<code>exports</code> が <code>module.exports</code> によって参照されるのと同じオブジェクトへの参照を保持することを意味します。また、エクスポートに別の値を代入することで、<code>module.exports</code> にバインドされなくなることも意味します。</p>
+</div>
+
+<p>モジュールの詳細については、<a href="https://nodejs.org/api/modules.html#modules_modules">モジュール</a> (Node API のドキュメント) を参照してください。</p>
+
+<h3 id="非同期_API_の使用">非同期 API の使用</h3>
+
+<p>JavaScriptコードでは、操作に同期APIよりも非同期APIが頻繁に使用されるため、処理に時間がかかることがあります。 同期APIは、各操作を完了してから次の操作を開始できるAPIです。 たとえば、次のログ関数は同期的で、テキストをコンソールに順番に印刷します(First、Second)。</p>
+
+<pre class="brush: js line-numbers  language-js"><code class="language-js">console<span class="punctuation token">.</span><span class="function token">log</span><span class="punctuation token">(</span><span class="string token">'First'</span><span class="punctuation token">)</span><span class="punctuation token">;</span>
+console<span class="punctuation token">.</span><span class="function token">log</span><span class="punctuation token">(</span><span class="string token">'Second'</span><span class="punctuation token">)</span><span class="punctuation token">;</span></code></pre>
+
+<p>対照的に、非同期 API は、API が操作を開始してすぐに (操作が完了する前に) 戻るものです。操作が終了すると、API は何かのメカニズムを使用して追加の実行を行います。例えば、次のコードでは最初に <code>setTimeout()</code> メソッドが呼び出されてすぐに返されても、操作が数秒間完了しないため、 "Second, First" が出力されます。</p>
+
+<pre class="brush: js line-numbers  language-js"><code class="language-js"><span class="function token">setTimeout</span><span class="punctuation token">(</span><span class="keyword token">function</span><span class="punctuation token">(</span><span class="punctuation token">)</span> <span class="punctuation token">{</span>
+   console<span class="punctuation token">.</span><span class="function token">log</span><span class="punctuation token">(</span><span class="string token">'First'</span><span class="punctuation token">)</span><span class="punctuation token">;</span>
+   <span class="punctuation token">}</span><span class="punctuation token">,</span> <span class="number token">3000</span><span class="punctuation token">)</span><span class="punctuation token">;</span>
+console<span class="punctuation token">.</span><span class="function token">log</span><span class="punctuation token">(</span><span class="string token">'Second'</span><span class="punctuation token">)</span><span class="punctuation token">;</span></code></pre>
+
+<p>Node はシングルスレッドのイベント駆動型実行環境であるため、ノンブロッキングの非同期 API を使用することは、ブラウザーよりも Node にとってさらに重要です。シングルスレッドとは、サーバーへのすべてのリクエストが (別々のプロセスに分割されるのではなく) 同じスレッドで実行されることを意味します。このモデルは速度とサーバーリソースの点で非常に効率的です。しかし、完了に時間がかかる同期メソッドを呼び出す関数があると、それらは現在のリクエストだけでなく、他のすべてのリクエストがウェブアプリケーションによって処理されることをブロックします。</p>
+
+<p>非同期 API がアプリケーションに完了したことを通知するにはいくつかの方法があります。最も一般的な方法は、非同期 API を呼び出すときにコールバック関数を登録することです。これは、操作が完了したときにコールバックされます。 これが上記で使用されているアプローチです。</p>
+
+<div class="note">
+<p><strong>Tip:</strong> コールバックを使用することは、順番に実行しなければならない一連の従属非同期操作がある場合、かなり "面倒" になる可能性があります。これは、複数レベルのネストされたコールバックをもたらすためです。この問題は一般に「コールバック地獄」として知られています。この問題は、優れたコーディング方法 ( <a href="http://callbackhell.com/">http://callbackhell.com/</a> を参照)、<a href="https://www.npmjs.com/package/async">async</a> などのモジュールの使用、または <a href="/ja/docs/Web/JavaScript/Reference/Global_Objects/Promise">Promise</a> などの ES6 機能への移行によっても軽減できます。</p>
+</div>
+
+<div class="note">
+<p><strong>メモ:</strong> Node と Express の一般的な規約は、エラー優先コールバックを使うことです。この規約では、コールバック関数の最初の値はエラー値ですが、後続の引数には成功データが含まれます。 なぜこのアプローチがこのブログで役に立つのかについての良い説明があります：<a href="http://fredkschott.com/post/2014/03/understanding-error-first-callbacks-in-node-js">Node.jsの方法 - エラーファーストコールバックについて</a> (fredkschott.com)。</p>
+</div>
+
+<h3 id="ルートハンドラの作成">ルートハンドラの作成</h3>
+
+<p>上記の Hello World Express の例では、サイトルート (<code>'/'</code>) への HTTP <code>GET</code> リクエストに対して(callback)ルートハンドラ関数を定義しました。</p>
+
+<pre class="brush: js line-numbers  language-js"><code class="language-js">app<span class="punctuation token">.</span><span class="keyword token">get</span><span class="punctuation token">(</span><span class="string token">'/'</span><span class="punctuation token">,</span> <span class="keyword token">function</span><span class="punctuation token">(</span>req<span class="punctuation token">,</span> res<span class="punctuation token">)</span> <span class="punctuation token">{</span>
+  res<span class="punctuation token">.</span><span class="function token">send</span><span class="punctuation token">(</span><span class="string token">'Hello World!'</span><span class="punctuation token">)</span><span class="punctuation token">;</span>
+<span class="punctuation token">}</span><span class="punctuation token">)</span><span class="punctuation token">;</span></code></pre>
+
+<p>コールバック関数はリクエストとレスポンスオブジェクトを引数として取ります。 この場合、メソッドは単にレスポンスに対して <code><a href="https://expressjs.com/en/4x/api.html#res.send">send()</a></code> を呼び出して、文字列 "Hello World!" を返します。リクエスト/レスポンスサイクルを終了するための<a href="https://expressjs.com/ja/guide/routing.html#response-methods">レスポンスメソッドは他にも多数</a>あります。たとえば、JSONレスポンスを送信するために <code><a href="https://expressjs.com/en/4x/api.html#res.json">res.json()</a></code> を呼び出し、ファイルを送信するために <code><a href="https://expressjs.com/en/4x/api.html#res.sendFile">res.sendFile()</a></code> を呼び出すことができます。</p>
+
+<div class="note">
+<p><strong>JavaScript tip:</strong> コールバック関数で好きな引数名を使うことができます。 コールバックが呼び出されると、最初の引数は常にリクエストになり、2番目の引数は常にレスポンスになります。 コールバックの本体で作業しているオブジェクトを識別できるようにそれらの名前を付けることは意味があります。</p>
+</div>
+
+<p>Express アプリケーションオブジェクトには、他のすべての HTTP 動詞のルートハンドラを定義するためのメソッドもあります。これらのメソッドはほとんど同じ方法で使用されます。</p>
+
+<p><code>checkout()</code>, <code>copy()</code>, <strong><code>delete()</code></strong>, <strong><code>get()</code></strong>, <code>head()</code>, <code>lock()</code>, <code>merge()</code>, <code>mkactivity()</code>, <code>mkcol()</code>, <code>move()</code>, <code>m-search()</code>, <code>notify()</code>, <code>options()</code>, <code>patch()</code>, <strong><code>post()</code></strong>, <code>purge()</code>, <strong><code>put()</code></strong>, <code>report()</code>, <code>search()</code>, <code>subscribe()</code>, <code>trace()</code>, <code>unlock()</code>, <code>unsubscribe()</code>.</p>
+
+<p><code>app.all()</code> という特別なルーティングメソッドがあります。これはあらゆる HTTP メソッドにレスポンスして呼び出されます。これはすべてのリクエストメソッドの特定のパスにミドルウェア機能をロードするために使用されます。次の例　(Express の資料から) は、使用される HTTP 動詞に関係なく、 <code>/secret</code> へのリクエストに対して実行されるハンドラを示しています(<a href="https://nodejs.org/api/http.html#http_http_methods">http モジュール</a>でサポートされている場合)。</p>
+
+<pre class="brush: js line-numbers  language-js"><code class="language-js">app<span class="punctuation token">.</span><span class="function token">all</span><span class="punctuation token">(</span><span class="string token">'/secret'</span><span class="punctuation token">,</span> <span class="keyword token">function</span><span class="punctuation token">(</span>req<span class="punctuation token">,</span> res<span class="punctuation token">,</span> next<span class="punctuation token">)</span> <span class="punctuation token">{</span>
+  console<span class="punctuation token">.</span><span class="function token">log</span><span class="punctuation token">(</span><span class="string token">'Accessing the secret section ...'</span><span class="punctuation token">)</span><span class="punctuation token">;</span>
+  <span class="function token">next</span><span class="punctuation token">(</span><span class="punctuation token">)</span><span class="punctuation token">;</span> <span class="comment token">// 次のハンドラに制御を渡します。</span>
+<span class="punctuation token">}</span><span class="punctuation token">)</span><span class="punctuation token">;</span></code></pre>
+
+<p>ルートを使用すると、URL 内の特定のパターンの文字を照合し、URL からいくつかの値を抽出し、それらをパラメータとしてルートハンドラに渡すことができます(パラメータとして渡されるリクエストオブジェクトの属性として)。</p>
+
+<p>多くの場合、サイトの特定の部分のルートハンドラをまとめて、共通のルートプレフィックスを使用してそれらにアクセスすると便利です (たとえば、Wiki のあるサイトでは、1つのファイルにすべての Wiki 関連ルートがあり、ルートプレフィックス <em>/wiki/</em> を使用してアクセスすることがあります)。 Expressでは、これは <code><a href="http://expressjs.com/ja/guide/routing.html#express-router">express.Router</a></code> オブジェクトを使用して実現されます。たとえば、<strong>wiki.js</strong> という名前のモジュールで Wiki ルートを作成してから、次に示すように <code>Router</code> オブジェクトをエクスポートできます。</p>
+
+<pre class="brush: js line-numbers  language-js"><code class="language-js"><span class="comment token">// wiki.js - Wiki ルートモジュール</span>
+
+<span class="keyword token">var</span> express <span class="operator token">=</span> <span class="function token">require</span><span class="punctuation token">(</span><span class="string token">'express'</span><span class="punctuation token">)</span><span class="punctuation token">;</span>
+<span class="keyword token">var</span> router <span class="operator token">=</span> express<span class="punctuation token">.</span><span class="function token">Router</span><span class="punctuation token">(</span><span class="punctuation token">)</span><span class="punctuation token">;</span>
+
+<span class="comment token">// ホームページルート</span>
+router<span class="punctuation token">.</span><span class="keyword token">get</span><span class="punctuation token">(</span><span class="string token">'/'</span><span class="punctuation token">,</span> <span class="keyword token">function</span><span class="punctuation token">(</span>req<span class="punctuation token">,</span> res<span class="punctuation token">)</span> <span class="punctuation token">{</span>
+  res<span class="punctuation token">.</span><span class="function token">send</span><span class="punctuation token">(</span><span class="string token">'Wiki home page'</span><span class="punctuation token">)</span><span class="punctuation token">;</span>
+<span class="punctuation token">}</span><span class="punctuation token">)</span><span class="punctuation token">;</span>
+
+<span class="comment token">// about ページルート</span>
+router<span class="punctuation token">.</span><span class="keyword token">get</span><span class="punctuation token">(</span><span class="string token">'/about'</span><span class="punctuation token">,</span> <span class="keyword token">function</span><span class="punctuation token">(</span>req<span class="punctuation token">,</span> res<span class="punctuation token">)</span> <span class="punctuation token">{</span>
+  res<span class="punctuation token">.</span><span class="function token">send</span><span class="punctuation token">(</span><span class="string token">'About this wiki'</span><span class="punctuation token">)</span><span class="punctuation token">;</span>
+<span class="punctuation token">}</span><span class="punctuation token">)</span><span class="punctuation token">;</span>
+
+module<span class="punctuation token">.</span>exports <span class="operator token">=</span> router<span class="punctuation token">;</span></code></pre>
+
+<div class="note">
+<p><strong>メモ:</strong> <code>Router</code> オブジェクトにルートを追加することは、(前述のように) <code>app</code> オブジェクトにルートを追加するのと同じです。</p>
+</div>
+
+<p>メインアプリケーションファイルでルーターを使用するには、ルートモジュール (<strong>wiki.js</strong>) を <code>require()</code> してから、Express アプリケーションで <code>use()</code> を呼び出してミドルウェア処理パスにルーターを追加します。 2つの経路は <code style="font-style: normal; font-weight: normal;">/wiki/</code> と <code style="font-style: normal; font-weight: normal;">/wiki/about/</code> からアクセス可能になります。</p>
+
+<pre class="brush: js line-numbers  language-js"><code class="language-js"><span class="keyword token">var</span> wiki <span class="operator token">=</span> <span class="function token">require</span><span class="punctuation token">(</span><span class="string token">'./wiki.js'</span><span class="punctuation token">)</span><span class="punctuation token">;</span>
+<span class="comment token">// ...</span>
+app<span class="punctuation token">.</span><span class="function token">use</span><span class="punctuation token">(</span><span class="string token">'/wiki'</span><span class="punctuation token">,</span> wiki<span class="punctuation token">)</span><span class="punctuation token">;</span></code></pre>
+
+<p>ルートを扱うことについて、そして特に <code>Router</code> を使うことについてもっとより多くのことがあります。それらについては、リンクされたセクション、<a href="/ja/docs/Learn/Server-side/Express_Nodejs/routes">ルートとコントローラ</a>で説明します。</p>
+
+<h3 id="ミドルウェアの使用">ミドルウェアの使用</h3>
+
+<p>ミドルウェアは静的ファイルの提供からエラー処理、HTTP レスポンスの圧縮まで、Express アプリケーションで広く使用されています。ルート関数は HTTP クライアントにレスポンスを返すことで HTTP リクエスト - レスポンスサイクルを終了しますが、ミドルウェア関数は通常、リクエストまたはレスポンスに対して何らかの操作を実行してから、「スタック」内の次の機能を呼び出します。これは、より多くのミドルウェアまたはルートハンドラの場合があります。ミドルウェアが呼び出される順序はアプリ開発者次第です。</p>
+
+<div class="note">
+<p><strong>Note:</strong> ミドルウェアは任意の操作を実行し、任意のコードを実行し、リクエストおよびレスポンスオブジェクトに変更を加えることができ、またリクエスト - レスポンスサイクルを終了することもできます。サイクルが終了しない場合は、<code>next()</code> を呼び出して次のミドルウェア機能に制御を渡す必要があります (そうでない場合、リクエストは中断されたままになります)。</p>
+</div>
+
+<p>Cookie の操作、セッション、ユーザ認証、リクエスト <code>POST</code> および JSON データへのアクセス、ロギングなどの一般的なウェブ開発タスクを簡素化するために、ほとんどのアプリはサードパーティ製ミドルウェアを使用します。<a href="http://expressjs.com/ja/resources/middleware.html">Express チームが管理するミドルウェアパッケージのリスト</a>を見つけることができます。(他の人気のあるサードパーティのパッケージも含みます)。他の Express パッケージは NPM パッケージマネージャーで入手できます。</p>
+
+<p>サードパーティのミドルウェアを使用するには、まず NPM を使用してそれをアプリにインストールする必要があります。たとえば、 <a href="http://expressjs.com/en/resources/middleware/morgan.html">morgan</a> という HTTP リクエストロガーミドルウェアをインストールするには、次のようにします。</p>
+
+<pre class="brush: bash"><code>$ npm install morgan
+</code></pre>
+
+<p>次に、Express アプリケーションオブジェクトで <code>use()</code> を呼び出してミドルウェアをスタックに追加できます。</p>
+
+<pre class="brush: js">var express = require('express');
+<strong>var logger = require('morgan');</strong>
+var app = express();
+<strong>app.use(logger('dev'));</strong>
+...</pre>
+
+<div class="note">
+<p><strong>メモ:</strong> ミドルウェアおよびルーティング機能は、宣言されている順序で呼び出されます。ミドルウェアによっては、順序が重要です (たとえば、セッションミドルウェアが cookie ミドルウェアに依存している場合は、最初に cookie ハンドラを追加する必要があります)。ほとんどの場合、ミドルウェアはルートを設定する前に呼び出されます。そうでないとルートハンドラがミドルウェアによって追加された機能にアクセスすることはできません。</p>
+</div>
+
+<p>あなたは自身のミドルウェア機能を書くことができ、そうする必要があるでしょう (エラー処理コードを作成するためだけの場合)。ミドルウェア関数とルートハンドラコールバックの<strong>唯一の</strong>違いは、ミドルウェア関数が次に <code>next</code> 引数を持つことです。ミドルウェア関数はリクエストサイクルを完了させるものではない場合に呼び出されます (ミドルウェア関数が呼び出されるとき、その中には呼び出される next 関数が含まれていなければなりません)。</p>
+
+<p>ミドルウェアをすべてのレスポンスに適用するのか、特定の HTTP 動詞を含むレスポンス (<code>GET</code>、<code>POST</code> など) に適用するのかに応じて、 <code>app.use()</code> または <code>app.add()</code> のいずれかを使用してミドルウェア機能を処理チェーンに追加できます)。 <code>app.use()</code> を呼び出すときの経路はオプションですが、どちらの場合も同じ経路を指定します。</p>
+
+<p>以下の例は、ルートの有無に関わらず、両方の方法を使用してミドルウェア関数を追加する方法を示しています。</p>
+
+<pre class="brush: js">var express = require('express');
+var app = express();
+
+// ミドルウェア関数の例
+var a_middleware_function = function(req, res, <em>next</em>) {
+  // ... perform some operations
+  next(); // next() を呼ぶことで Express はチェイン中の次のミドルウェア関数を呼びます。
+
+// すべてのルートと動詞に対して use() で関数を追加します。
+app.use(a_middleware_function);
+
+// 指定ルートに対して use() でミドルウェア関数を追加します。
+app.use('/someroute', a_middleware_function);
+
+// 指定の HTTP 動詞とルートに対してミドルウェア関数を追加します。
+app.get('/', a_middleware_function);
+
+app.listen(3000);</pre>
+
+<div class="note">
+<p><strong>JavaScript Tip:</strong> 上記ではミドルウェア関数を別々に宣言してからコールバックとして設定しています。以前のルートハンドラ関数では、使用時にコールバック関数を宣言しました。JavaScript では、どちらの方法も有効です。</p>
+</div>
+
+<p>Express の資料には、Express ミドルウェアの<a href="https://expressjs.com/ja/guide/using-middleware.html">使用</a>および<a href="http://expressjs.com/ja/guide/writing-middleware.html">作成</a>に関するより優れた資料があります。</p>
+
+<h3 id="静的ファイルの提供">静的ファイルの提供</h3>
+
+<p><a href="http://expressjs.com/ja/4x/api.html#express.static">express.static</a> ミドルウェアを使用して、画像、CSS、JavaScript などの静的ファイルを提供できます (<code>static()</code> は、実際には Express の<strong>一部</strong>である唯一のミドルウェア関数です)。 たとえば、node を呼び出す場所と同じレベルで、'<strong>public</strong>' という名前のディレクトリーから画像、CSS ファイル、および JavaScript ファイルを配信するには、次の行を使用します。</p>
+
+<pre class="brush: js line-numbers  language-js"><code class="language-js">app<span class="punctuation token">.</span><span class="function token">use</span><span class="punctuation token">(</span>express<span class="punctuation token">.</span><span class="keyword token">static</span><span class="punctuation token">(</span><span class="string token">'public'</span><span class="punctuation token">)</span><span class="punctuation token">)</span><span class="punctuation token">;</span></code></pre>
+
+<p>public ディレクトリー内のファイルはすべて、ベース URL にそのファイル名 (ベースの "public" ディレクトリーに対する相対パス) を追加することによって提供されます。そのため、例えば：</p>
+
+<pre><code>http://localhost:3000/images/dog.jpg
+http://localhost:3000/css/style.css
+http://localhost:3000/js/app.js
+http://localhost:3000/about.html
+</code></pre>
+
+<p><code>static()</code> を複数回呼び出して、複数のディレクトリーを扱うことができます。ファイルが1つのミドルウェア関数で見つからない場合は、そのファイルは後続のミドルウェアに単純に渡されます (ミドルウェアが呼び出される順序は宣言の順序に基づいています)。</p>
+
+<pre class="brush: js line-numbers  language-js"><code class="language-js">app<span class="punctuation token">.</span><span class="function token">use</span><span class="punctuation token">(</span>express<span class="punctuation token">.</span><span class="keyword token">static</span><span class="punctuation token">(</span><span class="string token">'public'</span><span class="punctuation token">)</span><span class="punctuation token">)</span><span class="punctuation token">;</span>
+app<span class="punctuation token">.</span><span class="function token">use</span><span class="punctuation token">(</span>express<span class="punctuation token">.</span><span class="keyword token">static</span><span class="punctuation token">(</span><span class="string token">'media'</span><span class="punctuation token">)</span><span class="punctuation token">)</span><span class="punctuation token">;</span></code></pre>
+
+<p>ファイルをベース URL に追加するのではなく、静的 URL の仮想プレフィックスを作成することもできます。たとえば、ここではファイルがプレフィックス "/media" でロードされるように<a href="http://expressjs.com/ja/4x/api.html#app.use">マウントパスを指定</a>します。</p>
+
+<pre class="brush: js line-numbers  language-js"><code class="language-js">app<span class="punctuation token">.</span><span class="function token">use</span><span class="punctuation token">(</span><span class="string token">'/media'</span><span class="punctuation token">,</span> express<span class="punctuation token">.</span><span class="keyword token">static</span><span class="punctuation token">(</span><span class="string token">'public'</span><span class="punctuation token">)</span><span class="punctuation token">)</span><span class="punctuation token">;</span></code></pre>
+
+<p>これで、<code>public</code> ディレクトリーにあるファイルを <code>/media</code> パスプレフィックスから読み込むことができます。</p>
+
+<pre><code>http://localhost:3000/media/images/dog.jpg
+http://localhost:3000/media/video/cat.mp4
+http://localhost:3000/media/cry.mp3</code>
+</pre>
+
+<p>詳しくは、<a href="/ja/docs/Learn/Server-side/Express_Nodejs/Serving static files in Express">Expressでの静的ファイルの提供</a>を参照してください。</p>
+
+<h3 id="エラーの処理">エラーの処理</h3>
+
+<p>エラーは、通常の3つの引数ではなく、4つの引数 <code>(err、req、res、next)</code> を持つ1つ以上の特別なミドルウェア関数によって処理されます。例えば：</p>
+
+<pre class="brush: js line-numbers  language-js"><code class="language-js">app<span class="punctuation token">.</span><span class="function token">use</span><span class="punctuation token">(</span><span class="keyword token">function</span><span class="punctuation token">(</span>err<span class="punctuation token">,</span> req<span class="punctuation token">,</span> res<span class="punctuation token">,</span> next<span class="punctuation token">)</span> <span class="punctuation token">{</span>
+  console<span class="punctuation token">.</span><span class="function token">error</span><span class="punctuation token">(</span>err<span class="punctuation token">.</span>stack<span class="punctuation token">)</span><span class="punctuation token">;</span>
+  res<span class="punctuation token">.</span><span class="function token">status</span><span class="punctuation token">(</span><span class="number token">500</span><span class="punctuation token">)</span><span class="punctuation token">.</span><span class="function token">send</span><span class="punctuation token">(</span><span class="string token">'Something broke!'</span><span class="punctuation token">)</span><span class="punctuation token">;</span>
+<span class="punctuation token">}</span><span class="punctuation token">)</span><span class="punctuation token">;</span></code></pre>
+
+<p>これらは必要なコンテンツを返すことができますが、他のすべての <code>app.use()</code> および呼び出しをルーティングした後に呼び出して、リクエスト処理プロセスの最後のミドルウェアになるようにする必要があります。</p>
+
+<p>Express にはエラーハンドラが組み込まれています。これは、アプリで発生する可能性がある残りのエラーを処理します。 このデフォルトのエラー処理ミドルウェア関数は、ミドルウェア関数スタックの最後に追加されます。<code>next()</code> にエラーを渡し、それをエラーハンドラで処理しなかった場合、それは組み込みエラーハンドラによって処理されます。エラーはスタックトレースとともにクライアントに書き込まれます。</p>
+
+<div class="note">
+<p><strong>メモ:</strong> スタックトレースは実稼働環境に含まれていません。プロダクションモードで実行するには、環境変数 <code>NODE_ENV</code> を '<code>production</code>' に設定する必要があります。</p>
+</div>
+
+<div class="note">
+<p><strong>メモ:</strong> HTTP 404 およびその他の "エラー" ステータスコードはエラーとして扱われません。これらを処理したい場合は、ミドルウェア関数を追加して処理することができます。詳しくは <a href="http://expressjs.com/ja/starter/faq.html#how-do-i-handle-404-responses">FAQ</a> を見てください。</p>
+</div>
+
+<p>詳しくは<a href="http://expressjs.com/ja/guide/error-handling.html">エラー処理</a> (Express ドキュメント) を参照してください。</p>
+
+<h3 id="データベースの使用">データベースの使用</h3>
+
+<p>Express アプリケーションは、Node によってサポートされている任意のデータベースメカニズムを使用できます (Express 自体はデータベース管理のための特定の追加の動作や要件を定義していません)。PostgreSQL、MySQL、Redis、SQLite、MongoDB などを含む多くのオプションがあります。</p>
+
+<p>これらを使用するには、まず NPM を使用してデータベースドライバをインストールする必要があります。たとえば、一般的な NoSQL MongoDB 用のドライバをインストールするには、次のコマンドを使用します。</p>
+
+<pre class="brush: bash"><code>$ npm install mongodb
+</code></pre>
+
+<p>データベース自体はローカルにインストールすることも、クラウドサーバーにインストールすることもできます。Express コードではドライバが必要で、データベースへの接続から、作成、参照、更新、削除 (CRUD) 操作を実行します。以下の (Express ドキュメントからの) 例は、MongoDB を使ってどのように「哺乳類の」レコードを見つけることができるかを示しています。</p>
+
+<pre class="brush: js line-numbers  language-js"><code class="language-js"><span class="comment token">// これは mongodb バージョン 2.2.33 までの古いバージョンで動作します</span>
+<span class="keyword token">var</span> MongoClient <span class="operator token">=</span> <span class="function token">require</span><span class="punctuation token">(</span><span class="string token">'mongodb'</span><span class="punctuation token">)</span><span class="punctuation token">.</span>MongoClient<span class="punctuation token">;</span>
+
+MongoClient<span class="punctuation token">.</span><span class="function token">connect</span><span class="punctuation token">(</span><span class="string token">'mongodb://localhost:27017/animals'</span><span class="punctuation token">,</span> <span class="keyword token">function</span><span class="punctuation token">(</span>err<span class="punctuation token">,</span> db<span class="punctuation token">)</span> <span class="punctuation token">{</span>
+  <span class="keyword token">if</span> <span class="punctuation token">(</span>err<span class="punctuation token">)</span> <span class="keyword token">throw</span> err<span class="punctuation token">;</span>
+
+  db<span class="punctuation token">.</span><span class="function token">collection</span><span class="punctuation token">(</span><span class="string token">'mammals'</span><span class="punctuation token">)</span><span class="punctuation token">.</span><span class="function token">find</span><span class="punctuation token">(</span><span class="punctuation token">)</span><span class="punctuation token">.</span><span class="function token">toArray</span><span class="punctuation token">(</span><span class="keyword token">function</span> <span class="punctuation token">(</span>err<span class="punctuation token">,</span> result<span class="punctuation token">)</span> <span class="punctuation token">{</span>
+    <span class="keyword token">if</span> <span class="punctuation token">(</span>err<span class="punctuation token">)</span> <span class="keyword token">throw</span> err<span class="punctuation token">;</span>
+
+    console<span class="punctuation token">.</span><span class="function token">log</span><span class="punctuation token">(</span>result<span class="punctuation token">)</span><span class="punctuation token">;</span>
+  <span class="punctuation token">}</span><span class="punctuation token">)</span><span class="punctuation token">;</span>
+<span class="punctuation token">}</span><span class="punctuation token">)</span><span class="punctuation token">;</span>
+
+
+<span class="comment token">// mongodb バージョン 3.0 以上のためのコード</span>
+<span class="keyword token">let</span> MongoClient <span class="operator token">=</span> <span class="function token">require</span><span class="punctuation token">(</span><span class="string token">'mongodb'</span><span class="punctuation token">)</span><span class="punctuation token">.</span>MongoClient<span class="punctuation token">;</span>
+MongoClient<span class="punctuation token">.</span><span class="function token">connect</span><span class="punctuation token">(</span><span class="string token">'mongodb://localhost:27017/animals'</span><span class="punctuation token">,</span> <span class="keyword token">function</span><span class="punctuation token">(</span>err<span class="punctuation token">,</span> client<span class="punctuation token">)</span><span class="punctuation token">{</span>
+   <span class="keyword token">if</span><span class="punctuation token">(</span>err<span class="punctuation token">)</span> <span class="keyword token">throw</span> err<span class="punctuation token">;</span>
+
+   <span class="keyword token">let</span> db <span class="operator token">=</span> client<span class="punctuation token">.</span><span class="function token">db</span><span class="punctuation token">(</span><span class="string token">'animals'</span><span class="punctuation token">)</span><span class="punctuation token">;</span>
+   db<span class="punctuation token">.</span><span class="function token">collection</span><span class="punctuation token">(</span><span class="string token">'mammals'</span><span class="punctuation token">)</span><span class="punctuation token">.</span><span class="function token">find</span><span class="punctuation token">(</span><span class="punctuation token">)</span><span class="punctuation token">.</span><span class="function token">toArray</span><span class="punctuation token">(</span><span class="keyword token">function</span><span class="punctuation token">(</span>err<span class="punctuation token">,</span> result<span class="punctuation token">)</span><span class="punctuation token">{</span>
+     <span class="keyword token">if</span><span class="punctuation token">(</span>err<span class="punctuation token">)</span> <span class="keyword token">throw</span> err<span class="punctuation token">;</span>
+     console<span class="punctuation token">.</span><span class="function token">log</span><span class="punctuation token">(</span>result<span class="punctuation token">)</span><span class="punctuation token">;</span>
+     client<span class="punctuation token">.</span><span class="function token">close</span><span class="punctuation token">(</span><span class="punctuation token">)</span><span class="punctuation token">;</span>
+   <span class="punctuation token">}</span><span class="punctuation token">)</span><span class="punctuation token">;</span>
+<span class="punctuation token">}</span><span class="punctuation token">)</span><span class="punctuation token">;</span></code></pre>
+
+<p>もう1つの一般的な方法は、Object Relational Mapper ( "ORM") を介して間接的にデータベースにアクセスすることです。このアプローチではデータを「オブジェクト」または「モデル」として定義し、ORM はそれらを基礎となるデータベース形式にマッピングします。このアプローチには、開発者としてデータベースのセマンティクスではなく JavaScript オブジェクトの観点から考え続けることができ、受信データの検証とチェックを実行するための明らかな場所があるという利点があります。データベースについての詳細は、後の記事で説明します。</p>
+
+<p>詳しくは<a href="https://expressjs.com/ja/guide/database-integration.html">データベース統合</a> (Express ドキュメント) を参照してください。</p>
+
+<h3 id="データのレンダリング_ビュー">データのレンダリング (ビュー)</h3>
+
+<p>テンプレートエンジン (Express では「ビューエンジン」と呼ばれます) を使用すると、ページの生成時に埋められるデータのプレースホルダを使用して、テンプレート内の出力ドキュメントの構造を指定できます。テンプレートは HTML の作成によく使用されますが、他の種類の文書も作成できます。 Express は<a href="https://github.com/expressjs/express/wiki#template-engines">いくつかのテンプレートエンジン</a>をサポートしています。ここでは、より人気の高いエンジンの便利な比較ができます。<a href="https://strongloop.com/strongblog/compare-javascript-templates-jade-mustache-dust/">JavaScript テンプレートエンジンの比較：Jade、Moustache、Dustなど</a></p>
+
+<p>次に示すように、アプリケーション設定コードで、使用するテンプレートエンジンと、Express が 'ビュー' および 'ビューエンジン' 設定を使用してテンプレートを探す場所を設定します (テンプレートライブラリを含むパッケージもインストールする必要があります！)</p>
+
+<pre class="brush: js line-numbers  language-js"><code class="language-js"><span class="keyword token">var</span> express <span class="operator token">=</span> <span class="function token">require</span><span class="punctuation token">(</span><span class="string token">'express'</span><span class="punctuation token">)</span><span class="punctuation token">;</span>
+<span class="keyword token">var</span> app <span class="operator token">=</span> <span class="function token">express</span><span class="punctuation token">(</span><span class="punctuation token">)</span><span class="punctuation token">;</span>
+
+<span class="comment token">// ('views') テンプレートを含むディレクトリーを設定</span>
+app<span class="punctuation token">.</span><span class="keyword token">set</span><span class="punctuation token">(</span><span class="string token">'views'</span><span class="punctuation token">,</span> path<span class="punctuation token">.</span><span class="function token">join</span><span class="punctuation token">(</span>__dirname<span class="punctuation token">,</span> <span class="string token">'views'</span><span class="punctuation token">)</span><span class="punctuation token">)</span><span class="punctuation token">;</span>
+
+<span class="comment token">// 利用するビューエンジン、この場合は 'some_template_engine_name' を設定</span>
+app<span class="punctuation token">.</span><span class="keyword token">set</span><span class="punctuation token">(</span><span class="string token">'view engine'</span><span class="punctuation token">,</span> <span class="string token">'some_template_engine_name'</span><span class="punctuation token">)</span><span class="punctuation token">;</span></code></pre>
+
+<p>テンプレートの外観は使用するエンジンによって異なります。"title" および "message" という名前のデータ変数のプレースホルダを含む "index.&lt;テンプレート拡張子&gt;" という名前のテンプレートファイルがあると仮定すると、ルートハンドラ関数で <code><a href="http://expressjs.com/ja/4x/api.html#res.render">Response.render()</a></code> を呼び出して HTML レスポンスを作成し、送信することになります。</p>
+
+<pre class="brush: js line-numbers  language-js"><code class="language-js">app<span class="punctuation token">.</span><span class="keyword token">get</span><span class="punctuation token">(</span><span class="string token">'/'</span><span class="punctuation token">,</span> <span class="keyword token">function</span><span class="punctuation token">(</span>req<span class="punctuation token">,</span> res<span class="punctuation token">)</span> <span class="punctuation token">{</span>
+  res<span class="punctuation token">.</span><span class="function token">render</span><span class="punctuation token">(</span><span class="string token">'index'</span><span class="punctuation token">,</span> <span class="punctuation token">{</span> title<span class="punctuation token">:</span> <span class="string token">'About dogs'</span><span class="punctuation token">,</span> message<span class="punctuation token">:</span> <span class="string token">'Dogs rock!'</span> <span class="punctuation token">}</span><span class="punctuation token">)</span><span class="punctuation token">;</span>
+<span class="punctuation token">}</span><span class="punctuation token">)</span><span class="punctuation token">;</span></code></pre>
+
+<p>詳しくは <a href="http://expressjs.com/ja/guide/using-template-engines.html">Express でのテンプレートエンジンの使用</a> (Express ドキュメント) を参照してください。</p>
+
+<h3 id="ファイル構造">ファイル構造</h3>
+
+<p>Express は、構造や使用するコンポーネントに関しては何も想定していません。ルート、ビュー、静的ファイル、およびその他のアプリケーション固有のロジックは、任意のディレクトリー構造を持つ任意の数のファイルに存在できます。 Express アプリケーション全体を1つのファイルにまとめることは完全に可能ですが、通常は機能 (アカウント管理、ブログ、ディスカッション掲示板など) およびアーキテクチャ上の問題のドメイン (<a href="/ja/docs/Web/Apps/Build/Modern_web_app_architecture/MVC_architecture">MVC アーキテクチャ</a>を使用している場合は、モデル、ビュー、コントローラーなど) に基づいてアプリケーションをファイルに分割します。</p>
+
+<p>後のトピックでは、ウェブアプリケーションを作成するために簡単に拡張できるモジュール式のアプリケーションスケルトンを作成する Express Application Generator を使用します。</p>
+
+<ul>
+</ul>
+
+<h2 id="まとめ">まとめ</h2>
+
+<p>おめでとうございます、Express/Node の旅の最初のステップを完了しました。これで Express と Node の主な利点と、Express アプリケーションの主要部分がどのように見えるか (ルート、ミドルウェア、エラー処理、およびテンプレートコード) をおおまかに理解できています。また、Express は指図しないフレームワークであるため、これらの部分をどのようにまとめるかやどのライブラリを使用するかは、ほとんどあなた次第です。</p>
+
+<p>もちろん、Express は意図的に非常に軽量なウェブアプリケーションフレームワークであるため、その利点と可能性の多くはサードパーティのライブラリと機能からもたらされています。以下の記事でそれらをより詳しく見ていきます。次回の記事では、Node 開発環境のセットアップについて見ていきます。そうすれば、いくつかの Express コードが実際に動作しているところを見始めることができます。</p>
+
+<h2 id="関連情報">関連情報</h2>
+
+<ul>
+ <li><a href="https://medium.com/@ramsunvtech/manage-multiple-node-versions-e3245d5ede44">Venkat.R - Manage Multiple Node versions</a></li>
+ <li><a href="https://nodejs.org/api/modules.html#modules_modules">Modules</a> (Node API docs)</li>
+ <li><a href="https://expressjs.com/ja">Express</a> (home page)</li>
+ <li><a href="http://expressjs.com/ja/starter/basic-routing.html">Basic routing</a> (Express ドキュメント)</li>
+ <li><a href="http://expressjs.com/ja/guide/routing.html">Routing guide</a> (Express ドキュメント)</li>
+ <li><a href="http://expressjs.com/ja/guide/using-template-engines.html">Using template engines with Express</a> (Express ドキュメント)</li>
+ <li><a href="https://expressjs.com/ja/guide/using-middleware.html">Using middleware</a> (Express ドキュメント)</li>
+ <li><a href="http://expressjs.com/ja/guide/writing-middleware.html">Writing middleware for use in Express apps</a> (Express ドキュメント)</li>
+ <li><a href="https://expressjs.com/ja/guide/database-integration.html">Database integration</a> (Express ドキュメント)</li>
+ <li><a href="http://expressjs.com/ja/starter/static-files.html">Serving static files in Express</a> (Express ドキュメント)</li>
+ <li><a href="http://expressjs.com/ja/guide/error-handling.html">Error handling</a> (Express ドキュメント)</li>
+</ul>
+
+<div>{{NextMenu("Learn/Server-side/Express_Nodejs/development_environment", "Learn/Server-side/Express_Nodejs")}}</div>
+
+<h2 id="このモジュール">このモジュール</h2>
+
+<ul>
+ <li><a href="/ja/docs/Learn/Server-side/Express_Nodejs/Introduction">Express/Node のイントロダクション</a></li>
+ <li><a href="/ja/docs/Learn/Server-side/Express_Nodejs/development_environment">Node 開発環境の設定</a></li>
+ <li><a href="/ja/docs/Learn/Server-side/Express_Nodejs/Tutorial_local_library_website">Express チュートリアル: 地域図書館のウェブサイト</a></li>
+ <li><a href="/ja/docs/Learn/Server-side/Express_Nodejs/skeleton_website">Express チュートリアル Part 2: スケルトンウェブサイトの作成</a></li>
+ <li><a href="/ja/docs/Learn/Server-side/Express_Nodejs/mongoose">Express チュートリアル Part 3: データベースを使う (Mongoose を使用)</a></li>
+ <li><a href="/ja/docs/Learn/Server-side/Express_Nodejs/routes">Express チュートリアル Part 4: ルートとコントローラ</a></li>
+ <li><a href="/ja/docs/Learn/Server-side/Express_Nodejs/Displaying_data">Express チュートリアル Part 5: ライブラリデータの表示</a></li>
+ <li><a href="/ja/docs/Learn/Server-side/Express_Nodejs/forms">Express チュートリアル Part 6: フォームの操作</a></li>
+ <li><a href="/ja/docs/Learn/Server-side/Express_Nodejs/deployment">Express チュートリアル Part 7: プロダクションへのデプロイ</a></li>
+</ul>
diff --git a/files/ja/learn/server-side/express_nodejs/mongoose/index.html b/files/ja/learn/server-side/express_nodejs/mongoose/index.html
new file mode 100644
index 0000000000..e6eecb4496
--- /dev/null
+++ b/files/ja/learn/server-side/express_nodejs/mongoose/index.html
@@ -0,0 +1,799 @@
+---
+title: 'Express チュートリアル Part 3: データベースの使用 (Mongoose を使用)'
+slug: Learn/Server-side/Express_Nodejs/mongoose
+translation_of: Learn/Server-side/Express_Nodejs/mongoose
+---
+<div>{{LearnSidebar}}</div>
+
+<div>{{PreviousMenuNext("Learn/Server-side/Express_Nodejs/skeleton_website", "Learn/Server-side/Express_Nodejs/routes", "Learn/Server-side/Express_Nodejs")}}</div>
+
+<p class="summary">この記事ではデータベースと、それらを Node/Express アプリケーションで使用する方法について簡単に紹介します。続いて、<a href="https://mongoosejs.com/">Mongoose</a> を使用して<a href="/ja/docs/Learn/Server-side/Express_Nodejs/Tutorial_local_library_website">地域図書館</a> Web サイトへのデータベースアクセスを提供する方法を説明します。 オブジェクトスキーマとモデルの宣言方法、主なフィールドタイプ、および基本的な検証について説明します。また、モデルデータにアクセスするための主な方法についても簡単に説明します。</p>
+
+<table class="learn-box standard-table">
+ <tbody>
+  <tr>
+   <th scope="row">前提条件:</th>
+   <td><a href="/ja/docs/Learn/Server-side/Express_Nodejs/skeleton_website">Express チュートリアル Part 2: スケルトン Web サイトの作成 </a></td>
+  </tr>
+  <tr>
+   <th scope="row">目標:</th>
+   <td>Mongoose を使用して独自のモデルを設計および作成できるようになる。</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="概要">概要</h2>
+
+<p>図書館職員は本と借り手についての情報を保存するためにローカルライブラリ Web サイトを使いますが、図書館員は本をブラウズして検索し、利用可能なコピーがあるかどうかを調べ、そしてそれらを予約または借りるために使います。情報を効率的に保存および取得するために、データベースに保存します。</p>
+
+<p>Express アプリケーションはさまざまなデータベースを使用できます。作成、読み取り、更新、削除 (CRUD) 操作を実行するために使用できるいくつかのアプローチがあります。 このチュートリアルではいくつかの利用可能なオプションの簡単な概要を説明し、次に選択された特定のメカニズムを詳細に表示します。</p>
+
+<h3 id="どのデータベースを使用できますか？">どのデータベースを使用できますか？</h3>
+
+<p>Express アプリは Node でサポートされている任意のデータベースを使用できます (Express 自体はデータベース管理のための特定の追加の動作や要件を定義していません)。 PostgreSQL、MySQL、Redis、SQLite、MongoDB など、<a href="https://expressjs.com/en/guide/database-integration.html">多くの一般的なオプション</a>があります。</p>
+
+<p>データベースを選択するときは、生産性/学習時間の曲線、パフォーマンス、複製/バックアップの容易さ、コスト、コミュニティサポートなどのことを考慮する必要があります。「最高の」データベースは1つもありませんが、ほとんどの一般的なソリューションは、ローカルライブラリのような中小規模のサイトでは十分条件を満たしているはずです。</p>
+
+<p>オプションの詳細については、<a href="https://expressjs.com/ja/guide/database-integration.html">データベース統合</a> (Express ドキュメント) を参照してください。</p>
+
+<h3 id="データベースを利用するための最良の方法は何ですか？">データベースを利用するための最良の方法は何ですか？</h3>
+
+<p>データベースにインタラクティブにアプローチするには2つの方法があります。</p>
+
+<ul>
+ <li>データベースのネイティブクエリ言語 (例：SQL)を使用する</li>
+ <li>オブジェクトデータモデル ("ODM")／オブジェクトリレーショナルモデル ("ORM") を使用する。ODM/ORM は Web サイトのデータを JavaScript オブジェクトとして表し、それが基になるデータベースにマッピングされます。一部の ORM は特定のデータベースに関連付けられていますが、他のデータベースはデータベースに依存しないバックエンドを提供しています</li>
+</ul>
+
+<p>SQL、またはデータベースでサポートされているクエリ言語を使用すると、最高のパフォーマンスが得られます。ODM は、変換コードを使用してオブジェクトとデータベース形式の間のマッピングを行うため、処理が遅くなることが多く、最も効率的なデータベースクエリが使用されない可能性があります (これは、ODM がさまざまなデータベースバックエンドをサポートしている場合に特に当てはまります。サポートされているデータベース機能に関して、さらに妥協する必要があります)。</p>
+
+<p>ORM を使用する利点は、プログラマがデータベースのセマンティクスではなく JavaScript オブジェクトの観点から考え続けることができることです。これは、同じデータベースまたは異なる Web サイトで異なるデータベースを扱う必要がある場合に特に当てはまります。またデータの検証とチェックを実行するための明らかな場所を提供します。</p>
+
+<div class="note">
+<p><strong>Tip:</strong>  ODM/ORM を使用すると、多くの場合、開発と保守のコストが削減されます。ネイティブのクエリ言語に精通しているかパフォーマンスが最優先であるのでなければ、ODM の使用を積極的に検討するべきです。</p>
+</div>
+
+<h3 id="どの_ORMODM_を使うべきですか？">どの ORM/ODM を使うべきですか？</h3>
+
+<p>NPM パッケージマネージャのサイトには、多数の ODM/ORM ソリューションがあります (サブセットの <a href="https://www.npmjs.com/browse/keyword/odm">odm</a> タグおよび <a href="https://www.npmjs.com/browse/keyword/orm">orm</a> タグを調べてください)。</p>
+
+<p>執筆時点で一般的だったいくつかの解決策は、次のとおりです。</p>
+
+<ul>
+ <li><a href="https://www.npmjs.com/package/mongoose">Mongoose</a>: Mongoose は、非同期環境で動作するように設計された <a href="https://www.mongodb.org/">MongoDB</a> オブジェクトモデリングツールです</li>
+ <li><a href="https://www.npmjs.com/package/waterline">Waterline</a>: Express ベースの <a href="http://sailsjs.com/">Sails</a> Web フレームワークから抽出された ORM。Redis、MySQL、LDAP、MongoDB、Postgres など、さまざまなデータベースにアクセスするための統一された API を提供します</li>
+ <li><a href="https://www.npmjs.com/package/bookshelf">Bookshelf</a>: Promise ベースおよび従来の callback インターフェイスの両方を備え、トランザクションのサポート、熱心な/入れ子になったリレーションの読み込み、多態的な関連付け、および1対1、1対多、および多対多のリレーションのサポートを提供します。PostgreSQL、MySQL、および SQLite3 で動作します</li>
+ <li><a href="https://www.npmjs.com/package/objection">Objection</a>: SQL とその基盤となるデータベースエンジン (SQLite 3、Postgres、および MySQL をサポート) の全機能を使用することを可能な限り簡単にします</li>
+ <li><a href="https://www.npmjs.com/package/sequelize">Sequelize</a> は Node.js と io.js のための Promise ベースの ORM です。PostgreSQL、MySQL、MariaDB、SQLite、および MSSQL のダイアレクトをサポートし、堅実なトランザクションサポート、リレーション、リードレプリケーションなどを備えています</li>
+ <li><a href="https://node-orm.readthedocs.io/en/latest/">Node ORM2</a> は NodeJS のオブジェクトリレーションマネージャです。MySQL、SQLite、Progres をサポートし、オブジェクト指向のアプローチを使用してデータベースを操作するのを助けます</li>
+ <li>
+  <p><a href="http://1602.github.io/jugglingdb/" rel="nofollow">JugglingDB</a> は NodeJS 用のクロスDB ORM で、最も一般的なデータベースフォーマットにアクセスするための共通インターフェイスを提供します。現在 MySQL、SQLite3、Postgres、MongoDB、Redis および js-memory-storage をサポートしています (テスト用の自己記述エンジンのみ)</p>
+ </li>
+</ul>
+
+<p>原則として、解決策を選択する際には、提供されている機能と "コミュニティ活動" (ダウンロード、コントリビュート、バグレポート、ドキュメントの品質など) の両方を考慮する必要があります。この記事を書いている時点では、Mongoose は最も人気のある ODM であり、データベースに MongoDB を使用している場合は妥当な選択です。</p>
+
+<h3 id="ローカルライブラリに_Mongoose_と_MongoDB_を使用する">ローカルライブラリに Mongoose と MongoDB を使用する</h3>
+
+<p>ローカルライブラリの例 (およびこのトピックの残りの部分) では、<a href="https://www.npmjs.com/package/mongoose">Mongoose ODM</a> を使用してライブラリデータにアクセスします。Mongoose は、ドキュメント指向のデータモデルを使用するオープンソースの <a href="https://en.wikipedia.org/wiki/NoSQL">NoSQL</a> データベースである <a href="https://www.mongodb.com/what-is-mongodb">MongoDB</a> のフロントエンドとして機能します。MongoDB データベースの "ドキュメント" の "コレクション" は、リレーショナルデータベースの "行" の "テーブル" <a href="https://docs.mongodb.com/manual/core/databases-and-collections/#collections">に似ています</a>。</p>
+
+<p>この ODM とデータベースの組み合わせは、Node コミュニティで非常に人気があります。これは、ドキュメントの保存とクエリのシステムが JSON に非常に似ているため、JavaScript 開発者にはよく知られているためです。</p>
+
+<div class="note">
+<p><strong>Tip:</strong> Mongoose を使用するために MongoDB を知っている必要はありませんが、<a href="http://mongoosejs.com/docs/guide.html">Mongoose のドキュメント</a>の一部は、MongoDB に慣れている方が使いやすく理解しやすいものです。</p>
+</div>
+
+<p>このチュートリアルの残りの部分では、<a href="/ja/docs/Learn/Server-side/Express_Nodejs/Tutorial_local_library_website">ローカルライブラリ Web サイト</a>の例の Mongoose スキーマとモデルを定義してアクセスする方法を示します。</p>
+
+<h2 id="ローカルライブラリモデルの設計">ローカルライブラリモデルの設計</h2>
+
+<p>いきなりモデルのコーディングを始める前に、格納する必要があるデータと、さまざまなオブジェクト間の関係について検討することをお勧めします。</p>
+
+<p>書籍に関する情報 (タイトル、概要、著者、ジャンル、ISBN) を保存する必要があること、および複数のコピーが利用可能であること (グローバルに一意の ID、利用状況など) があることを知っています。著者の名前だけではなく、著者に関するより多くの情報を格納する必要があるかもしれません。また、同じ名前または類似の名前を持つ著者が複数いる可能性があります。書籍のタイトル、著者、ジャンル、およびカテゴリに基づいて情報を並べ替えることができるようにします。</p>
+
+<p>モデルを設計するときは、すべての "オブジェクト" (関連情報のグループ) ごとに別々のモデルを用意するのが合理的です。 この場合、明らかなオブジェクトは本、本のインスタンス、および作者です。</p>
+
+<p>Web サイト自体に選択肢をハードコーディングするのではなく、モデルを使用して選択肢の選択肢 (たとえば選択肢のドロップダウンリストなど) を表すこともできます - すべてのオプションが事前にわかっていない場合や変更される可能性がある場合は、これをお勧めします。このタイプのモデルの明らかな候補は本のジャンルです (例：サイエンスフィクション、フランス詩など)。</p>
+
+<p>モデルとフィールドを決めたら、それらの関係について考える必要があります。</p>
+
+<p>そのことを念頭に置いて、以下の UML 関連図は、この場合に定義するモデルを (ボックスとして) 示しています。上記で説明したように、本のモデル (本の一般的な詳細)、本のインスタンス (システムで利用可能な本の特定の物理コピーのステータス)、および作成者のモデルを作成しました。また、値を動的に作成できるように、ジャンルのモデルを用意することにしました。<code>BookInstance:status</code> のモデルを使用しないことにしました - 許容値は変更しないと考えられるので、許容値をハードコードします。各ボックス内には、モデル名、フィールド名と型、そしてメソッドとその戻り型が表示されます。</p>
+
+<p>この図には、モデル間の関係 (それらの多重度も含む) も示されています。多重度は、関係内に存在する可能性がある各モデルの番号 (最大および最小) を示す図上の番号です。たとえば、ボックス間の接続線は、<code>Book</code> と <code>Genre</code> が関連していることを示しています。<code>Book</code> モデルに近い数字は、ジャンルに0個以上の <font face="consolas, Liberation Mono, courier, monospace"><span style="background-color: rgba(220, 220, 220, 0.5);">Book</span></font> がある必要があることを示しており、線のもう一方の端にある<code>Genre</code> の隣の数字は、本に0個以上の関連する<code>Genre</code>があることを示しています。</p>
+
+<div class="note">
+<p><strong>メモ</strong>: 下記の <a href="#">Mongoose 入門書</a>で説明されているように、1つのモデルだけで documents/models 間の関係を定義するフィールドがあるほうがよいでしょう (他のモデルで関連する <code>_id</code> を検索することによって逆の関係を見つけることができます)。以下では、Book スキーマの Book/Genre と Book/Author の関係、および BookInstance スキーマの Book/BookInstance の関係を定義します。この選択は多少恣意的でした - 他のスキーマでも同じようにフィールドを持つことができました。</p>
+</div>
+
+<p><img alt="Mongoose Library Model  with correct cardinality" src="https://mdn.mozillademos.org/files/15645/Library%20Website%20-%20Mongoose_Express.png" style="height: 620px; width: 737px;"></p>
+
+<div class="note">
+<p><strong>メモ</strong>: 次のセクションでは、モデルの定義方法と使用方法を説明する基本的な入門書を提供します。お読みになったところで、上の図の各モデルをどのように構築するかを検討してください。</p>
+</div>
+
+<h2 id="Mongoose_入門書">Mongoose 入門書</h2>
+
+<p>このセクションでは、Mongoose を MongoDB データベースに接続する方法、スキーマとモデルを定義する方法、そして基本的なクエリを作成する方法の概要を説明します。</p>
+
+<div class="note">
+<p><strong>メモ:</strong> この入門書は、npm の <a href="https://www.npmjs.com/package/mongoose">Mongoose クイックスタート</a>と<a href="http://mongoosejs.com/docs/guide.html">公式ドキュメント</a>に "大きく影響を受けています"。</p>
+</div>
+
+<h3 id="Mongoose_と_MongoDB_のインストール">Mongoose と MongoDB のインストール</h3>
+
+<p>Mongoose は他の依存関係と同じようにあなたのプロジェクト (<strong>package.json</strong>) にインストールされます。つまり NPM を使用します。インストールするには、プロジェクトフォルダ内で次のコマンドを使用します。</p>
+
+<pre class="brush: bash notranslate"><code>npm install mongoose</code>
+</pre>
+
+<p>Mongoose をインストールすると、MongoDB データベースドライバを含むすべての依存関係が追加されますが、MongoDB 自体はインストールされません。 MongoDB サーバをインストールする場合は、さまざまな OS 用の<a href="https://www.mongodb.com/download-center">インストーラをここからダウンロード</a>してローカルにインストールできます。クラウドベースの MongoDB インスタンスを使用することもできます。</p>
+
+<div class="note">
+<p><strong>メモ:</strong> このチュートリアルでは、mLab クラウドベースのDatabase as a Service <a href="https://mlab.com/plans/pricing/">サンドボックス層</a>として使用してデータベースを提供します。これは開発に適しており、オペレーティングシステムの "インストール" に依存しないため (database-as-a-service も本番データベースに使用することができる1つのアプローチです)、チュートリアルに適しています。</p>
+</div>
+
+<h3 id="MongoDB_への接続">MongoDB への接続</h3>
+
+<p>MongooseはMongoDBデータベースへの接続を必要とします。以下のように、<code>require()</code> して <code>mongoose.connect()</code> でローカルにホストされているデータベースに接続することができます。</p>
+
+<pre class="brush: js notranslate">//Import the mongoose module
+var mongoose = require('mongoose');
+
+//Set up default mongoose connection
+var mongoDB = 'mongodb://127.0.0.1/my_database';
+mongoose.connect(mongoDB);
+// Get Mongoose to use the global promise library
+mongoose.Promise = global.Promise;
+//Get the default connection
+var db = mongoose.connection;
+
+//Bind connection to error event (to get notification of connection errors)
+db.on('error', console.error.bind(console, 'MongoDB connection error:'));</pre>
+
+<p>デフォルトの <code>Connection</code> オブジェクトは <code>mongoose.connection</code> で取得できます。接続されると、open イベントが <code>Connection</code> インスタンスで発生します。</p>
+
+<div class="note">
+<p><strong>Tip:</strong> 追加のコネクションを作成する必要がある場合は、<code>mongoose.createConnection()</code> を使用できます。 これは <code>connect()</code> と同じ形式のデータベース URI (ホスト、データベース、ポート、オプションなど) を取り、<code>Connection</code> オブジェクトを返します。</p>
+</div>
+
+<h3 id="モデルの定義と作成">モデルの定義と作成</h3>
+
+<p>モデルは <code>Schema</code> インターフェイスを使用して定義されます。スキーマを使用すると、各ドキュメントに格納されているフィールドとその検証要件およびデフォルト値を定義できます。さらに、データ型や他のフィールドと同じように使用できるが実際にはデータベースに格納されていない仮想プロパティも扱いやすいように、静的メソッドおよびインスタンスヘルパーメソッドを定義できます。(もう少し後で説明します)。</p>
+
+<p>その後、スキーマは <code>mongoose.model()</code> メソッドを使用してモデルに "コンパイル" されます。モデルを作成したら、それを使用して特定のタイプのオブジェクトを検索、作成、更新、および削除できます。</p>
+
+<div class="note">
+<p><strong>メモ:</strong> 各モデルは MongoDB データベース内のドキュメントのコレクションにマップされます。ドキュメントはモデル <code>Schema</code> で定義されたフィールド/スキーマタイプを含みます。</p>
+</div>
+
+<h4 id="スキーマの定義">スキーマの定義</h4>
+
+<p>以下のコードは、単純なスキーマを定義する方法を示しています。最初に mongoose を <code>require()</code> し、次に Schema コンストラクタを使用して新しいスキーマインスタンスを作成し、コンストラクタの object パラメータで内部のさまざまなフィールドを定義します。</p>
+
+<pre class="brush: js notranslate">//Require Mongoose
+var mongoose = require('mongoose');
+
+//Define a schema
+var Schema = mongoose.Schema;
+
+var SomeModelSchema = new Schema({
+  a_string: String,
+  a_date: Date
+});
+</pre>
+
+<p>上記の場合、文字列と日付の2つのフィールドしかありません。次のセクションでは、他のフィールドタイプ、検証、その他の方法について説明します。</p>
+
+<h4 id="モデルを作成する">モデルを作成する</h4>
+
+<p>モデルは、<code>mongoose.model()</code> メソッドを使用してスキーマから作成されます。</p>
+
+<pre class="brush: js notranslate">// Define schema
+var Schema = mongoose.Schema;
+
+var SomeModelSchema = new Schema({
+  a_string: String,
+  a_date: Date
+});
+
+<strong>// Compile model from schema
+var SomeModel = mongoose.model('SomeModel', SomeModelSchema );</strong></pre>
+
+<p>最初の引数はあなたのモデル用に作成されるコレクションの単数形の名前です (Mongoose は上記の SomeModel モデル用のデータベースコレクションを作成します)、そして2番目の引数はモデルの作成に使用したいスキーマです。</p>
+
+<div class="note">
+<p><strong>メモ:</strong> モデルクラスを定義したら、それらを使用してレコードを作成、更新、または削除し、クエリを実行してすべてのレコードまたは特定のレコードのサブセットを取得できます。これを行う方法を<a href="#">モデルの使用</a>セクションで、そしてビューを作成するときに示します。</p>
+</div>
+
+<h4 id="スキーマ型_フィールド">スキーマ型 (フィールド)</h4>
+
+<p>スキーマには任意の数のフィールドを含めることができます。各フィールドは MongoDB に格納されているドキュメント内のフィールドを表します。一般的なフィールド型の多くとその宣言方法を示すスキーマの例を以下に示します。</p>
+
+<pre class="brush: js notranslate">var schema = new Schema(
+{
+  name: <strong>String</strong>,
+  binary: <strong>Buffer</strong>,
+  living: <strong>Boolean</strong>,
+  updated: { type: <strong>Date</strong>, default: Date.now() },
+  age: { type: <strong>Number</strong>, min: 18, max: 65, required: true },
+  mixed: <strong>Schema.Types.Mixed</strong>,
+  _someId: <strong>Schema.Types.ObjectId</strong>,
+  array: <strong>[]</strong>,
+  ofString: [<strong>String</strong>], // 他の型でも配列にすることができます。
+  nested: { stuff: { type: <strong>String</strong>, lowercase: true, trim: true } }
+})</pre>
+
+<p>ほとんどのスキーム型("type:"やフィールド名で記述されるもの)はその名のとおりです。例外は以下のようなものがあります:</p>
+
+<ul>
+ <li><code>ObjectId</code>: データベースのモデルを示すインスタンスです。例えば、本は著者オブジェクトを示すためにこれを使います。一つ一つにはユニークなID (<code>_id</code>) が割り当てられています。必要があれば<code>populate()</code>メソッドで関連情報を呼び出すことができます。</li>
+ <li><a href="http://mongoosejs.com/docs/schematypes.html#mixed">Mixed</a>: 任意のスキーム型。</li>
+ <li><font face="Consolas, Liberation Mono, Courier, monospace">[]</font>: 項目の配列。このモデルにはJavaScriptの配列オペレーション(push, pop, unshift, その他。)をオペレートすることができます。上記の例は特別な型なしに<code>String</code>オブジェクトの配列を示しています。また、他の型のオブジェクトに対しても配列で持つことはできます。</li>
+</ul>
+
+<p>このコードはフィールドを宣言する2つのやり方も示しています:</p>
+
+<ul>
+ <li>フィールドの<em>name</em> と <em>type</em>をkey-valueペアのように書く (例えば<code>name</code>, <code>binary <font face="Arial, x-locale-body, sans-serif"><span style="background-color: #ffffff;">,</span></font></code><code>living</code>のように）.</li>
+ <li><code>type</code>定義するオブジェクトが続くフィールド名、およびフィールドの他のオプション。オプションには次のようなものがあります:
+  <ul>
+   <li>初期値.</li>
+   <li>ビルドインのバリデータ (例えば最大値/最小値) それからカスタマイズしたバリデーション機能.</li>
+   <li>そのヒールドが必須かどうか</li>
+   <li><code>String</code> のフィールドは自動的に大文字か、小文字にするか、前後の空白を取り除く（trim）するか？ (例えば:<code>{ type: <strong>String</strong>, lowercase: true, trim: true }</code>)記載することができる）</li>
+  </ul>
+ </li>
+</ul>
+
+<p>もっとオプションについて見たいなら<a href="http://mongoosejs.com/docs/schematypes.html">SchemaTypes</a> (Mongoose docs)を見てみてください.</p>
+
+<h4 id="バリデーション">バリデーション</h4>
+
+<p>Mongooseはビルドインもしくはカスマイズしたバリデータや同期的もしくは非同期的なバリデータを提供しています。 バリデータはすべての場合において、許容範囲または値と検証失敗のエラーメッセージの両方を指定できます。</p>
+
+<p>ビルドインのバリデータには:</p>
+
+<ul>
+ <li>すべての <a href="http://mongoosejs.com/docs/schematypes.html">SchemaTypes</a> に <a href="http://mongoosejs.com/docs/api.html#schematype_SchemaType-required">required</a> があります。 これはドキュメントを保存するために必要なフィールドを指定するために使われます。</li>
+ <li><a href="http://mongoosejs.com/docs/api.html#schema-number-js">Numbers</a> に <a href="http://mongoosejs.com/docs/api.html#schema_number_SchemaNumber-min">min</a>（最小値を指定） と <a href="http://mongoosejs.com/docs/api.html#schema_number_SchemaNumber-max">max</a>（最大値を指定） バリデータがあります。</li>
+ <li><a href="http://mongoosejs.com/docs/api.html#schema-string-js">Strings</a> には以下のバリデータがあります:
+  <ul>
+   <li><a href="http://mongoosejs.com/docs/api.html#schema_string_SchemaString-enum">enum</a>: フィールドに利用可能な値の配列を指定します。</li>
+   <li><a href="http://mongoosejs.com/docs/api.html#schema_string_SchemaString-match">match</a>: マッチさせる正規表現を指定します。</li>
+   <li><a href="http://mongoosejs.com/docs/api.html#schema_string_SchemaString-maxlength">maxlength</a> と <a href="http://mongoosejs.com/docs/api.html#schema_string_SchemaString-minlength">minlength</a>: 文字数の最大値と最小値を指定します。</li>
+  </ul>
+ </li>
+</ul>
+
+<p>以下の例（Mongooseドキュメントから少し変更しています）では、いくつかのバリデータタイプとエラーメッセージを指定する方法を示しています:</p>
+
+<pre class="brush: js notranslate"><code>
+    var breakfastSchema = new Schema({
+      eggs: {
+        type: Number,
+        min: [6, 'Too few eggs'],
+        max: 12,
+        required: [true, 'Why no eggs?']
+      },
+      drink: {
+        type: String,
+        enum: ['Coffee', 'Tea', 'Water',]
+      }
+    });
+</code></pre>
+
+<p>詳しくは <a href="http://mongoosejs.com/docs/validation.html">Validation</a> (Mongoose docs) を見てみてください。</p>
+
+<h4 id="Virtual_properties">Virtual properties</h4>
+
+<p>Virtual properties are document properties that you can get and set but that do not get persisted to MongoDB. The getters are useful for formatting or combining fields, while setters are useful for de-composing a single value into multiple values for storage. The example in the documentation constructs (and deconstructs) a full name virtual property from a first and last name field, which is easier and cleaner than constructing a full name every time one is used in a template.</p>
+
+<div class="note">
+<p><strong>Note:</strong> We will use a virtual property in the library to define a unique URL for each model record using a path and the record's <code>_id</code> value.</p>
+</div>
+
+<p>For more information see <a href="http://mongoosejs.com/docs/guide.html#virtuals">Virtuals</a> (Mongoose documentation).</p>
+
+<h4 id="Methods_and_query_helpers">Methods and query helpers</h4>
+
+<p>A schema can also have <a href="http://mongoosejs.com/docs/guide.html#methods">instance methods</a>, <a href="http://mongoosejs.com/docs/guide.html#statics">static methods</a>, and <a href="http://mongoosejs.com/docs/guide.html#query-helpers">query helpers</a>. The instance and static methods are similar, but with the obvious difference that an instance method is associated with a particular record and has access to the current object. Query helpers allow you to extend mongoose's <a href="http://mongoosejs.com/docs/queries.html">chainable query builder API</a> (for example, allowing you to add a query "byName" in addition to the <code>find()</code>, <code>findOne()</code> and <code>findById()</code> methods).</p>
+
+<h3 id="Using_models">Using models</h3>
+
+<p>Once you've created a schema you can use it to create models. The model represents a collection of documents in the database that you can search, while the model's instances represent individual documents that you can save and retrieve.</p>
+
+<p>We provide a brief overview below. For more information see: <a href="http://mongoosejs.com/docs/models.html">Models</a> (Mongoose docs).</p>
+
+<h4 id="Creating_and_modifying_documents">Creating and modifying documents</h4>
+
+<p>To create a record you can define an instance of the model and then call <code>save()</code>. The examples below assume SomeModel is a model (with a single field "name") that we have created from our schema.</p>
+
+<pre class="brush: js notranslate"><code>// Create an instance of model SomeModel
+var awesome_instance = new </code>SomeModel<code>({ name: 'awesome' });
+
+// Save the new model instance, passing a callback
+awesome_instance.save(function (err) {
+  if (err) return handleError(err);
+  // saved!
+});
+</code></pre>
+
+<p>Creation of records (along with updates, deletes, and queries) are asynchronous operations — you supply a callback that is called when the operation completes. The API uses the error-first argument convention, so the first argument for the callback will always be an error value (or null). If the API returns some result, this will be provided as the second argument.</p>
+
+<p>You can also use <code>create()</code> to define the model instance at the same time as you save it. The callback will return an error for the first argument and the newly-created model instance for the second argument.</p>
+
+<pre class="brush: js notranslate">SomeModel<code>.create({ name: 'also_awesome' }, function (err, awesome_instance) {
+  if (err) return handleError(err);
+  // saved!
+});</code></pre>
+
+<p>Every model has an associated connection (this will be the default connection when you use <code>mongoose.model()</code>). You create a new connection and call <code>.model()</code> on it to create the documents on a different database.</p>
+
+<p>You can access the fields in this new record using the dot syntax, and change the values. You have to call <code>save()</code> or <code>update()</code> to store modified values back to the database.</p>
+
+<pre class="brush: js notranslate">// Access model field values using dot notation
+console.log(<code>awesome_instance.name</code>); //should log '<code>also_awesome</code>'
+
+// Change record by modifying the fields, then calling save().
+<code>awesome_instance</code>.name="New cool name";
+<code>awesome_instance.save(function (err) {
+   if (err) return handleError(err); // saved!
+   });</code>
+</pre>
+
+<h4 id="Searching_for_records">Searching for records</h4>
+
+<p>You can search for records using query methods, specifying the query conditions as a JSON document. The code fragment below shows how you might find all athletes in a database that play tennis, returning just the fields for athlete <em>name</em> and <em>age</em>. Here we just specify one matching field (sport) but you can add more criteria, specify regular expression criteria, or remove the conditions altogether to return all athletes.</p>
+
+<pre class="brush: js notranslate"><code>var Athlete = mongoose.model('Athlete', yourSchema);
+
+// find all athletes who play tennis, selecting the 'name' and 'age' fields
+Athlete.find({ 'sport': 'Tennis' }, 'name age', function (err, athletes) {
+  if (err) return handleError(err);
+  // 'athletes' contains the list of athletes that match the criteria.
+})</code></pre>
+
+<p>If you specify a callback, as shown above, the query will execute immediately. The callback will be invoked when the search completes.</p>
+
+<div class="note">
+<p><strong>Note:</strong> All callbacks in Mongoose use the pattern <code>callback(error, result)</code>. If an error occurs executing the query, the <code>error</code> parameter will contain an error document and <code>result</code> will be null. If the query is successful, the <code>error</code> parameter will be null, and the <code>result</code> will be populated with the results of the query.</p>
+</div>
+
+<p>If you don't specify a callback then the API will return a variable of type <a href="http://mongoosejs.com/docs/api.html#query-js">Query</a>. You can use this query object to build up your query and then execute it (with a callback) later using the <code>exec()</code> method.</p>
+
+<pre class="brush: js notranslate"><code>// find all athletes that play tennis
+var query = Athlete.find({ 'sport': 'Tennis' });
+
+// selecting the 'name' and 'age' fields
+query.select('name age');
+
+// limit our results to 5 items
+query.limit(5);
+
+// sort by age
+query.sort({ age: -1 });
+
+// execute the query at a later time
+query.exec(function (err, athletes) {
+  if (err) return handleError(err);
+  // athletes contains an ordered list of 5 athletes who play Tennis
+})</code></pre>
+
+<p>Above we've defined the query conditions in the <code>find()</code> method. We can also do this using a <code>where()</code> function, and we can chain all the parts of our query together using the dot operator (.) rather than adding them separately. The code fragment below is the same as our query above, with an additional condition for the age.</p>
+
+<pre class="notranslate"><code>Athlete.
+  find().
+  where('sport').equals('Tennis').
+  where('age').gt(17).lt(50).  //Additional where query
+  limit(5).
+  sort({ age: -1 }).
+  select('name age').
+  exec(callback); // where callback is the name of our callback function.</code></pre>
+
+<p>The <a href="http://mongoosejs.com/docs/api.html#query_Query-find">find()</a> method gets all matching records, but often you just want to get one match. The following methods query for a single record:</p>
+
+<ul>
+ <li><code><a href="http://mongoosejs.com/docs/api.html#model_Model.findById">findById()</a></code>: Finds the document with the specified <code>id</code> (every document has a unique <code>id</code>).</li>
+ <li><code><a href="http://mongoosejs.com/docs/api.html#query_Query-findOne">findOne()</a></code>: Finds a single document that matches the specified criteria.</li>
+ <li><code><a href="http://mongoosejs.com/docs/api.html#model_Model.findByIdAndRemove">findByIdAndRemove()</a></code>, <code><a href="http://mongoosejs.com/docs/api.html#model_Model.findByIdAndUpdate">findByIdAndUpdate()</a></code>, <code><a href="http://mongoosejs.com/docs/api.html#query_Query-findOneAndRemove">findOneAndRemove()</a></code>, <code><a href="http://mongoosejs.com/docs/api.html#query_Query-findOneAndUpdate">findOneAndUpdate()</a></code>: Finds a single document by <code>id</code> or criteria and either update or remove it. These are useful convenience functions for updating and removing records.</li>
+</ul>
+
+<div class="note">
+<p><strong>Note:</strong> There is also a <code><a href="http://mongoosejs.com/docs/api.html#model_Model.count">count()</a></code> method that you can use to get the number of items that match conditions. This is useful if you want to perform a count without actually fetching the records.</p>
+</div>
+
+<p>There is a lot more you can do with queries. For more information see: <a href="http://mongoosejs.com/docs/queries.html">Queries</a> (Mongoose docs).</p>
+
+<h4 id="Working_with_related_documents_—_population">Working with related documents — population</h4>
+
+<p>You can create references from one document/model instance to another using the <code>ObjectId</code> schema field, or from one document to many using an array of <code>ObjectIds</code>. The field stores the id of the related model. If you need the actual content of the associated document, you can use the <code><a href="http://mongoosejs.com/docs/api.html#query_Query-populate">populate()</a></code> method in a query to replace the id with the actual data.</p>
+
+<p>For example, the following schema defines authors and stories. Each author can have multiple stories, which we represent as an array of <code>ObjectId</code>. Each story can have a single author. The "ref" (highlighted in bold below) tells the schema which model can be assigned to this field.</p>
+
+<pre class="brush: js notranslate"><code>var mongoose = require('mongoose')
+  , Schema = mongoose.Schema
+
+var authorSchema = Schema({
+  name    : String,
+  stories : [{ type: Schema.Types.ObjectId, <strong>ref</strong>: 'Story' }]
+});
+
+var storySchema = Schema({
+  author : { type: Schema.Types.ObjectId, <strong>ref</strong>: 'Author' },
+  title    : String
+});
+
+var Story  = mongoose.model('Story', storySchema);
+var Author = mongoose.model('Author', authorSchema);</code></pre>
+
+<p>We can save our references to the related document by assigning the <code>_id</code> value. Below we create an author, then a story, and assign the author id to our stories author field.</p>
+
+<pre class="brush: js notranslate"><code>var bob = new Author({ name: 'Bob Smith' });
+
+bob.save(function (err) {
+  if (err) return handleError(err);
+
+  //Bob now exists, so lets create a story
+  var story = new Story({
+    title: "Bob goes sledding",
+    author: bob._id    // assign the _id from the our author Bob. This ID is created by default!
+  });
+
+  story.save(function (err) {
+    if (err) return handleError(err);
+    // Bob now has his story
+  });
+});</code></pre>
+
+<p>Our story document now has an author referenced by the author document's ID. In order to get the author information in the story results we use <code>populate()</code>, as shown below.</p>
+
+<pre class="brush: js notranslate"><code>Story
+.findOne({ title: 'Bob goes sledding' })
+.populate('author') //This populates the author id with actual author information!
+.exec(function (err, story) {
+  if (err) return handleError(err);
+  console.log('The author is %s', story.author.name);
+  // prints "The author is Bob Smith"
+});</code></pre>
+
+<div class="note">
+<p><strong>Note:</strong> Astute readers will have noted that we added an author to our story, but we didn't do anything to add our story to our author's <code>stories</code> array. How then can we get all stories by a particular author? One way would be to add our author to the stories array, but this would result in us having two places where the information relating authors and stories needs to be maintained.</p>
+
+<p>A better way is to get the <code>_id</code> of our <em>author</em>, then use <code>find()</code> to search for this in the author field across all stories.</p>
+
+<pre class="brush: js notranslate"><code>Story
+.find({ author : bob._id })
+.exec(function (err, stories) {
+  if (err) return handleError(err);
+  // returns all stories that have Bob's id as their author.
+});</code>
+</pre>
+</div>
+
+<p>This is almost everything you need to know about working with related items<em> for this tutorial</em>. For more detailed information see <a href="http://mongoosejs.com/docs/populate.html">Population</a> (Mongoose docs).</p>
+
+<h3 id="One_schemamodel_per_file">One schema/model per file</h3>
+
+<p>While you can create schemas and models using any file structure you like, we highly recommend defining each model schema in its own module (file), exporting the method to create the model. This is shown below:</p>
+
+<pre class="brush: js notranslate"><code>// File: ./models/somemodel.js
+
+//Require Mongoose
+var mongoose = require('mongoose');
+
+//Define a schema
+var Schema = mongoose.Schema;
+
+var SomeModelSchema = new Schema({
+  a_string          : String,
+  a_date            : Date,
+});
+
+<strong>//Export function to create "SomeModel" model class
+module.exports = mongoose.model('SomeModel', SomeModelSchema );</strong></code></pre>
+
+<p>You can then require and use the model immediately in other files. Below we show how you might use it to get all instances of the model.</p>
+
+<pre class="brush: js notranslate"><code>//Create a SomeModel model just by requiring the module
+var SomeModel = require('../models/somemodel')
+
+// Use the SomeModel object (model) to find all SomeModel records
+SomeModel.find(callback_function);</code></pre>
+
+<h2 id="Setting_up_the_MongoDB_database">Setting up the MongoDB database</h2>
+
+<p>Now that we understand something of what Mongoose can do and how we want to design our models, it's time to start work on the <em>LocalLibrary</em> website. The very first thing we want to do is set up a MongoDb database that we can use to store our library data.</p>
+
+<p>For this tutorial, we're going to use <a href="https://mlab.com/welcome/">mLab</a>'s free cloud-hosted "<a href="https://mlab.com/plans/pricing/">sandbox</a>" database. This database tier is not considered suitable for production websites because it has no redundancy, but it is great for development and prototyping. We're using it here because it is free and easy to set up, and because mLab is a popular <em>database as a service</em> vendor that you might reasonably choose for your production database (other popular choices at the time of writing include <a href="https://www.compose.com/">Compose</a>, <a href="https://scalegrid.io/pricing.html">ScaleGrid</a> and <a href="https://www.mongodb.com/cloud/atlas">MongoDB Atlas</a>).</p>
+
+<div class="note">
+<p><strong>Note:</strong> If you prefer you can set up a MongoDb database locally by downloading and installing the <a href="https://www.mongodb.com/download-center">appropriate binaries for your system</a>. The rest of the instructions in this article would be similar, except for the database URL you would specify when connecting.</p>
+</div>
+
+<p>You will first need to <a href="https://mlab.com/signup/">create an account</a> with mLab (this is free, and just requires that you enter basic contact details and acknowledge their terms of service). </p>
+
+<p>After logging in, you'll be taken to the <a href="https://mlab.com/home">home</a> screen:</p>
+
+<ol>
+ <li>Click <strong>Create New</strong> in the <em>MongoDB Deployments</em> section.<img alt="" src="https://mdn.mozillademos.org/files/14446/mLabCreateNewDeployment.png" style="height: 415px; width: 1000px;"></li>
+ <li>This will open the <em>Cloud Provider Selection </em>screen.<br>
+  <img alt="MLab - screen for new deployment" src="https://mdn.mozillademos.org/files/15661/mLab_new_deployment_form_v2.png" style="height: 931px; width: 1297px;"><br>
+
+  <ul>
+   <li>Select the SANDBOX (Free) plan from the Plan Type section. </li>
+   <li>Select any provider from the <em>Cloud Provider </em>section. Different providers offer different regions (displayed below the selected plan type).</li>
+   <li>Click the <strong>Continue</strong> button.</li>
+  </ul>
+ </li>
+ <li>This will open the <em>Select Region</em> screen.
+  <p><img alt="Select new region screen" src="https://mdn.mozillademos.org/files/15662/mLab_new_deployment_select_region_v2.png" style="height: 570px; width: 1293px;"></p>
+
+  <ul>
+   <li>
+    <p>Select the region closest to you and then <strong>Continue</strong>.</p>
+   </li>
+  </ul>
+ </li>
+ <li>
+  <p>This will open the <em>Final Details</em> screen.<br>
+   <img alt="New deployment database name" src="https://mdn.mozillademos.org/files/15663/mLab_new_deployment_final_details.png" style="height: 569px; width: 1293px;"></p>
+
+  <ul>
+   <li>
+    <p>Enter the name for the new database as <code>local_library</code> and then select <strong>Continue</strong>.</p>
+   </li>
+  </ul>
+ </li>
+ <li>
+  <p>This will open the <em>Order Confirmation</em> screen.<br>
+   <img alt="Order confirmation screen" src="https://mdn.mozillademos.org/files/15664/mLab_new_deployment_order_confirmation.png" style="height: 687px; width: 1290px;"></p>
+
+  <ul>
+   <li>
+    <p>Click <strong>Submit Order</strong> to create the database.</p>
+   </li>
+  </ul>
+ </li>
+ <li>
+  <p>You will be returned to the home screen. Click on the new database you just created to open its details screen. As you can see the database has no collections (data).<br>
+   <img alt="mLab - Database details screen" src="https://mdn.mozillademos.org/files/15665/mLab_new_deployment_database_details.png" style="height: 700px; width: 1398px;"><br>
+    <br>
+   The URL that you need to use to access your database is displayed on the form above (shown for this database circled above). In order to use this you need to create a database user that you can specify in the URL.</p>
+ </li>
+ <li>Click the <strong>Users</strong> tab and select the <strong>Add database user</strong> button.</li>
+ <li>Enter a username and password (twice), and then press <strong>Create</strong>. Do not select <em>Make read only</em>.<br>
+  <img alt="" src="https://mdn.mozillademos.org/files/14454/mLab_database_users.png" style="height: 204px; width: 600px;"></li>
+</ol>
+
+<p>You have now created the database, and have an URL (with username and password) that can be used to access it. This will look something like: <code>mongodb://your_user_namer:your_password@ds119748.mlab.com:19748/local_library</code>.</p>
+
+<h2 id="Install_Mongoose">Install Mongoose</h2>
+
+<p>Open a command prompt and navigate to the directory where you created your <a href="/en-US/docs/Learn/Server-side/Express_Nodejs/skeleton_website">skeleton Local Library website</a>. Enter the following command to install Mongoose (and its dependencies) and add it to your <strong>package.json</strong> file, unless you have already done so when reading the <a href="#Installing_Mongoose_and_MongoDB">Mongoose Primer</a> above.</p>
+
+<pre class="brush: bash notranslate">npm install mongoose
+</pre>
+
+<h2 id="Connect_to_MongoDB">Connect to MongoDB</h2>
+
+<p>Open <strong>/app.js</strong> (in the root of your project) and copy the following text below where you declare the <em>Express application object</em> (after the line <code>var app = express();</code>). Replace the database url string ('<em>insert_your_database_url_here</em>') with the location URL representing your own database (i.e. using the information <a href="#Setting_up_the_MongoDB_database">from mLab</a>).</p>
+
+<pre class="brush: js notranslate">//Set up mongoose connection
+var mongoose = require('mongoose');
+var mongoDB = '<em>insert_your_database_url_here</em>';
+mongoose.connect(mongoDB);
+mongoose.Promise = global.Promise;
+var db = mongoose.connection;
+db.on('error', console.error.bind(console, 'MongoDB connection error:'));</pre>
+
+<p>As discussed <a href="#Connecting_to_MongoDB">in the Mongoose primer above</a>, this code creates the default connection to the database and binds to the error event (so that errors will be printed to the console). </p>
+
+<h2 id="Defining_the_LocalLibrary_Schema">Defining the LocalLibrary Schema</h2>
+
+<p>We will define a separate module for each model, as <a href="#One_schemamodel_per_file">discussed above</a>. Start by creating a folder for our models in the project root (<strong>/models</strong>) and then create separate files for each of the models:</p>
+
+<pre class="notranslate">/express-locallibrary-tutorial  //the project root
+  <strong>/models</strong>
+    <strong>author.js</strong>
+    <strong>book.js</strong>
+    <strong>bookinstance.js</strong>
+    <strong>genre.js</strong>
+</pre>
+
+<h3 id="Author_model">Author model</h3>
+
+<p>Copy the <code>Author</code> schema code shown below and paste it into your <strong>./models/author.js</strong> file. The scheme defines an author has having <code>String</code> SchemaTypes for the first and family names, that are required and have a maximum of 100 characters, and <code>Date</code> fields for the date of birth and death.</p>
+
+<pre class="brush: js notranslate">var mongoose = require('mongoose');
+
+var Schema = mongoose.Schema;
+
+var AuthorSchema = new Schema(
+  {
+    first_name: {type: String, required: true, max: 100},
+    family_name: {type: String, required: true, max: 100},
+    date_of_birth: {type: Date},
+    date_of_death: {type: Date},
+  }
+);
+
+<strong>// Virtual for author's full name
+AuthorSchema
+.virtual('name')
+.get(function () {
+  return this.family_name + ', ' + this.first_name;
+});
+
+// Virtual for author's lifespan
+AuthorSchema
+</strong>.virtual('lifespan')
+.get(function () {
+  return (this.date_of_death.getYear() - this.date_of_birth.getYear()).toString();
+});
+
+// Virtual for author's URL
+AuthorSchema
+.virtual('url')
+.get(function () {
+  return '/catalog/author/' + this._id;
+});
+
+//Export model
+module.exports = mongoose.model('Author', AuthorSchema);
+
+</pre>
+
+<p>We've also declared a <a href="#Virtual_properties">virtual</a> for the AuthorSchema named "url" that returns the absolute URL required to get a particular instance of the model — we'll use the property in our templates whenever we need to get a link to a particular author.</p>
+
+<div class="note">
+<p><strong>Note:</strong> Declaring our URLs as a virtual in the schema is a good idea because then the URL for an item only ever needs to be changed in one place.<br>
+ At this point, a link using this URL wouldn't work, because we haven't got any routes handling code for individual model instances. We'll set those up in a later article!</p>
+</div>
+
+<p>At the end of the module, we export the model.</p>
+
+<h3 id="Book_model">Book model</h3>
+
+<p>Copy the <code>Book</code> schema code shown below and paste it into your <strong>./models/book.js</strong> file. Most of this is similar to the author model — we've declared a schema with a number of string fields and a virtual for getting the URL of specific book records, and we've exported the model.</p>
+
+<pre class="brush: js notranslate">var mongoose = require('mongoose');
+
+var Schema = mongoose.Schema;
+
+var BookSchema = new Schema(
+  {
+    title: {type: String, required: true},
+  <strong>  author: {type: Schema.Types.ObjectId, ref: 'Author', required: true},</strong>
+    summary: {type: String, required: true},
+    isbn: {type: String, required: true},
+  <strong>  genre: [{type: Schema.Types.ObjectId, ref: 'Genre'}]</strong>
+  }
+);
+
+// Virtual for book's URL
+BookSchema
+.virtual('url')
+.get(function () {
+  return '/catalog/book/' + this._id;
+});
+
+//Export model
+module.exports = mongoose.model('Book', BookSchema);
+</pre>
+
+<p>The main difference here is that we've created two references to other models:</p>
+
+<ul>
+ <li>author is a reference to a single <code>Author</code> model object, and is required.</li>
+ <li>genre is a reference to an array of <code>Genre</code> model objects. We haven't declared this object yet!</li>
+</ul>
+
+<h3 id="BookInstance_model">BookInstance model</h3>
+
+<p>Finally, copy the <code>BookInstance</code> schema code shown below and paste it into your <strong>./models/bookinstance.js</strong> file. The <code>BookInstance</code> represents a specific copy of a book that someone might borrow and includes information about whether the copy is available or on what date it is expected back, "imprint" or version details.</p>
+
+<pre class="brush: js notranslate">var mongoose = require('mongoose');
+
+var Schema = mongoose.Schema;
+
+var BookInstanceSchema = new Schema(
+  {
+    book: { type: Schema.Types.ObjectId, ref: 'Book', required: true }, //reference to the associated book
+    imprint: {type: String, required: true},
+    status: {type: String, required: true, <strong>enum: ['Available', 'Maintenance', 'Loaned', 'Reserved']</strong>, <strong>default: 'Maintenance'</strong>},
+    due_back: {type: Date, <strong>default: Date.now</strong>}
+  }
+);
+
+// Virtual for bookinstance's URL
+BookInstanceSchema
+.virtual('url')
+.get(function () {
+  return '/catalog/bookinstance/' + this._id;
+});
+
+//Export model
+module.exports = mongoose.model('BookInstance', BookInstanceSchema);</pre>
+
+<p>The new things we show here are the field options:</p>
+
+<ul>
+ <li><code>enum</code>: This allows us to set the allowed values of a string. In this case, we use it to specify the availability status of our books (using an enum means that we can prevent mis-spellings and arbitrary values for our status)</li>
+ <li><code>default</code>: We use default to set the default status for newly created bookinstances to maintenance and the default <code>due_back</code> date to <code>now</code> (note how you can call the Date function when setting the date!)</li>
+</ul>
+
+<p>Everything else should be familiar from our previous schema.</p>
+
+<h3 id="Genre_model_-_challenge!">Genre model - challenge!</h3>
+
+<p>Open your <strong>./models/genre.js</strong> file and create a schema for storing genres (the category of book, e.g. whether it is fiction or non-fiction, romance or military history, etc).</p>
+
+<p>The definition will be very similar to the other models:</p>
+
+<ul>
+ <li>The model should have a <code>String</code> SchemaType called <code>name</code> to describe the genre.</li>
+ <li>This name should be required and have between 3 and 100 characters.</li>
+ <li>Declare a <a href="#Virtual_properties">virtual</a> for the genre's URL, named <code>url</code>.</li>
+ <li>Export the model.</li>
+</ul>
+
+<h2 id="Testing_—_create_some_items">Testing — create some items</h2>
+
+<p>That's it. We now have all models for the site set up!</p>
+
+<p>In order to test the models (and to create some example books and other items that we can use in our next articles) we'll now run an <em>independent</em> script to create items of each type:</p>
+
+<ol>
+ <li>Download (or otherwise create) the file <a href="https://raw.githubusercontent.com/hamishwillee/express-locallibrary-tutorial/master/populatedb.js">populatedb.js</a> inside your <em>express-locallibrary-tutorial</em> directory (in the same level as <code>package.json</code>).
+
+  <div class="note">
+  <p><strong>Note:</strong> You don't need to know how <a href="https://raw.githubusercontent.com/hamishwillee/express-locallibrary-tutorial/master/populatedb.js">populatedb.js</a> works; it just adds sample data into the database.</p>
+  </div>
+ </li>
+ <li>Enter the following commands in the project root to install the <em>async</em> module that is required by the script (we'll discuss this in later tutorials, )
+  <pre class="brush: bash notranslate">npm install async</pre>
+ </li>
+ <li>Run the script using node in your command prompt, passing in the URL of your <em>MongoDB</em> database (the same one you replaced the <em>insert_your_database_url_here </em>placeholder with, inside <code>app.js</code> earlier):
+  <pre class="brush: bash notranslate">node populatedb &lt;your mongodb url&gt;​​​​</pre>
+ </li>
+ <li>The script should run through to completion, displaying items as it creates them in the terminal.</li>
+</ol>
+
+<div class="note">
+<p><strong>Tip:</strong> Go to your database on <a href="https://mlab.com/home">mLab</a>. You should now be able to drill down into individual collections of Books, Authors, Genres and BookInstances, and check out individual documents.</p>
+</div>
+
+<h2 id="まとめ">まとめ</h2>
+
+<p>この記事では、Node/Express 上のデータベースと ORM について、また Mongoose のスキーマとモデルの定義方法について多くのことを学びました。次に、この情報を使用して、ローカルライブラリ Web サイト用の <code>Book</code>、<code>BookInstance</code>、<code>Author</code>、および <code>Genre</code> を設計および実装しました。</p>
+
+<p>最後に、(スタンドアロンスクリプトを使用して) 多数のインスタンスを作成することによってモデルをテストしました。次の記事では、これらのオブジェクトを表示するためのページの作成について見ていきます。</p>
+
+<h2 id="あわせて参照">あわせて参照</h2>
+
+<ul>
+ <li><a href="https://expressjs.com/en/guide/database-integration.html">Database integration</a> (Express ドキュメント)</li>
+ <li><a href="http://mongoosejs.com/">Mongoose website</a> (Mongoose ドキュメント)</li>
+ <li><a href="http://mongoosejs.com/docs/guide.html">Mongoose Guide</a> (Mongoose ドキュメント)</li>
+ <li><a href="http://mongoosejs.com/docs/validation.html">Validation</a> (Mongoose ドキュメント)</li>
+ <li><a href="http://mongoosejs.com/docs/schematypes.html">Schema Types</a> (Mongoose ドキュメント)</li>
+ <li><a href="http://mongoosejs.com/docs/models.html">Models</a> (Mongoose ドキュメント)</li>
+ <li><a href="http://mongoosejs.com/docs/queries.html">Queries</a> (Mongoose ドキュメント)</li>
+ <li><a href="http://mongoosejs.com/docs/populate.html">Population</a> (Mongoose ドキュメント)</li>
+</ul>
+
+<p>{{PreviousMenuNext("Learn/Server-side/Express_Nodejs/skeleton_website", "Learn/Server-side/Express_Nodejs/routes", "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>
diff --git a/files/ja/learn/server-side/express_nodejs/routes/index.html b/files/ja/learn/server-side/express_nodejs/routes/index.html
new file mode 100644
index 0000000000..bb3e21898b
--- /dev/null
+++ b/files/ja/learn/server-side/express_nodejs/routes/index.html
@@ -0,0 +1,640 @@
+---
+title: 'Express チュートリアル Part 4: ルートとコントローラ'
+slug: Learn/Server-side/Express_Nodejs/routes
+translation_of: Learn/Server-side/Express_Nodejs/routes
+---
+<div>{{LearnSidebar}}</div>
+
+<div>{{PreviousMenuNext("Learn/Server-side/Express_Nodejs/mongoose", "Learn/Server-side/Express_Nodejs/Displaying_data", "Learn/Server-side/Express_Nodejs")}}</div>
+
+<p class="summary">このチュートリアルでは、地域図書館 Web サイトで最終的に必要となるすべてのリソースエンドポイントに対して、"ダミー" ハンドラ関数を使用してルート (URL 処理コード) を設定します。完成すると、ルート処理コードのためのモジュール構造が得られます。これは、次の記事の実際のハンドラ関数で拡張できます。Express を使ってモジュラールートを作成する方法についても、非常によく理解しています。</p>
+
+<table class="learn-box standard-table">
+ <tbody>
+  <tr>
+   <th scope="row">前提条件</th>
+   <td><a href="/ja/docs/Learn/Server-side/Express_Nodejs/Introduction">Express/Node のイントロダクション</a>を読んでください。 これまでのチュートリアルのトピック (<a href="/ja/docs/Learn/Server-side/Express_Nodejs/mongoose">Express チュートリアル Part 3: データベースを使う (Mongoose を使用)</a>を含む) を完了してください。</td>
+  </tr>
+  <tr>
+   <th scope="row">目標:</th>
+   <td>単純なルートを作成する方法を理解する。すべての URL エンドポイントを設定します。</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Overview">Overview</h2>
+
+<p>In the <a href="/en-US/docs/Learn/Server-side/Express_Nodejs/mongoose">last tutorial article</a> we defined <em>Mongoose</em> models to interact with the database, and used a (standalone) script to create some initial library records. We can now write the code to present that information to users. The first thing we need to do is determine what information we want to be able to display in our pages, and then define appropriate URLs for returning those resources. Then we're going to need to create the routes (URL handlers) and views (templates) to display those pages.</p>
+
+<p>The diagram below is provided as a reminder of the main flow of data and things that need to be implemented when handling an HTTP request/response. In addition to the views and routes the diagram shows "controllers" — functions that separate out the code to route requests from the code that actually processes requests.</p>
+
+<p>As we've already created the models, the main things we'll need to create are:</p>
+
+<ul>
+ <li>"Routes" to forward the supported requests (and any information encoded in request URLs) to the appropriate controller functions.</li>
+ <li>Controller functions to get the requested data from the models, create an HTML page displaying the data, and return it to the user to view in the browser.</li>
+ <li>Views (templates) used by the controllers to render the data.</li>
+</ul>
+
+<p><img alt="" src="https://mdn.mozillademos.org/files/14456/MVC%20Express.png" style="height: 460px; width: 800px;"></p>
+
+<p>Ultimately we might have pages to show lists and detail information for books, genres, authors and bookinstances, along with pages to create, update, and delete records. That's a lot to document in one article. Therefore most of this article will concentrate on setting up our routes and controllers to return "dummy" content. We'll extend the controller methods in our subsequent articles to work with model data.</p>
+
+<p>The first section below provides a brief "primer" on how to use the Express <a href="http://expressjs.com/en/4x/api.html#router">Router</a> middleware. We'll then use that knowledge in the following sections when we set up the LocalLibrary routes.</p>
+
+<h2 id="Routes_primer">Routes primer</h2>
+
+<p>A route is a section of Express code that associates an HTTP verb (<code>GET</code>, <code>POST</code>, <code>PUT</code>, <code>DELETE</code>, etc.), an URL path/pattern, and a function that is called to handle that pattern.</p>
+
+<p>There are several ways to create routes. For this tutorial we're going to use the <code><a href="http://expressjs.com/en/guide/routing.html#express-router">express.Router</a></code> middleware as it allows us to group the route handlers for a particular part of a site together and access them using a common route-prefix. We'll keep all our library-related routes in a "catalog" module, and, if we add routes for handling user accounts or other functions, we can keep them grouped separately.</p>
+
+<div class="note">
+<p><strong>Note:</strong> We discussed Express application routes briefly in our <a href="https://developer.mozilla.org/en-US/docs/Learn/Server-side/Express_Nodejs/Introduction#Creating_route_handlers">Express Introduction &gt; Creating route handlers</a>. Other than providing better support for modularization (as discussed in the first subsection below), using <em>Router</em> is very similar to defining routes directly on the <em>Express application object</em>.</p>
+</div>
+
+<p>The rest of this section provides an overview of how the <code>Router</code> can be used to define the routes.</p>
+
+<h3 id="Defining_and_using_separate_route_modules">Defining and using separate route modules</h3>
+
+<p>The code below provides a concrete example of how we can create a route module and then use it in an <em>Express</em> application.</p>
+
+<p>First we create routes for a wiki in a module named <strong>wiki.js</strong>. The code first imports the Express application object, uses it to get a <code>Router</code> object and then adds a couple of routes to it using the <code>get()</code> method. Last of all the module exports the <code>Router</code> object.</p>
+
+<pre class="brush: js"><code>// wiki.js - Wiki route module.
+
+var express = require('express');
+var router = express.Router();
+
+// Home page route.
+router.get('/', function (req, res) {
+  res.send('Wiki home page');
+})
+
+// About page route.
+router.get('/about', function (req, res) {
+  res.send('About this wiki');
+})
+
+module.exports = router;</code>
+
+</pre>
+
+<div class="note">
+<p><strong>Note:</strong> Above we are defining our route handler callbacks directly in the router functions. In the LocalLibrary we'll define these callbacks in a separate controller module.</p>
+</div>
+
+<p>To use the router module in our main app file we first <code>require()</code> the route module (<strong>wiki.js</strong>). We then call <code>use()</code> on the <em>Express</em> application to add the Router to the middleware handling path, specifying an URL path of 'wiki'.</p>
+
+<pre class="brush: js"><code>var wiki = require('./wiki.js');
+// ...
+app.use('/wiki', wiki);</code></pre>
+
+<p>The two routes defined in our wiki route module are then accessible from <code>/wiki/</code> and <code>/wiki/about/</code>.</p>
+
+<h3 id="Route_functions">Route functions</h3>
+
+<p>Our module above defines a couple of typical route functions. The "about" route (reproduced below) is defined using the <code>Router.get()</code> method, which responds only to HTTP GET requests. The first argument to this method is the URL path while the second is a callback function that will be invoked if an HTTP GET request with the path is received.</p>
+
+<pre class="brush: js"><code>router.get('/about', function (req, res) {
+  res.send('About this wiki');
+})</code>
+</pre>
+
+<p>The callback takes three arguments (usually named as shown: <code>req</code>, <code>res</code>, <code>next</code>), that will contain the HTTP Request object, HTTP response, and the <em>next</em> function in the middleware chain.</p>
+
+<div class="note">
+<p><strong>Note:</strong> Router functions are <a href="https://developer.mozilla.org/en-US/docs/Learn/Server-side/Express_Nodejs/Introduction#Using_middleware">Express middleware</a>, which means that they must either complete (respond to) the request or call the <code>next</code> function in the chain. In the case above we complete the request using <code>send()</code>, so the <code>next</code> argument is not used (and we choose not to specify it).</p>
+
+<p>The router function above takes a single callback, but you can specify as many callback arguments as you want, or an array of callback functions. Each function is part of the middleware chain, and will be called in the order it is added to the chain (unless a preceding function completes the request).</p>
+</div>
+
+<p>The callback function here calls <code><a href="https://expressjs.com/en/4x/api.html#res.send">send()</a></code> on the response to return the string "About this wiki" when we receive a GET request with the path ('<code>/about'</code>). There are a <a href="https://expressjs.com/en/guide/routing.html#response-methods">number of other response methods</a> for ending the request/response cycle. For example, you could call <code><a href="https://expressjs.com/en/4x/api.html#res.json">res.json()</a></code> to send a JSON response or <code><a href="https://expressjs.com/en/4x/api.html#res.sendFile">res.sendFile()</a></code> to send a file. The response method that we'll be using most often as we build up the library is <a href="https://expressjs.com/en/4x/api.html#res.render">render()</a>, which creates and returns HTML files using templates and data—we'll talk a lot more about that in a later article!</p>
+
+<h3 id="HTTP_verbs">HTTP verbs</h3>
+
+<p>The example routes above use the <code>Router.get()</code> method to respond to HTTP GET requests with a certain path.</p>
+
+<p>The <code>Router</code> also provides route methods for all the other HTTP verbs, that are mostly used in exactly the same way: <code>post()</code>, <code>put()</code>, <code>delete()</code>, <code>options()</code>, <code>trace()</code>, <code>copy()</code>, <code>lock()</code>, <code>mkcol()</code>, <code>move()</code>, <code>purge()</code>, <code>propfind()</code>, <code>proppatch()</code>, <code>unlock()</code>, <code>report()</code>, <code>mkactivity()</code>, <code>checkout()</code>, <code>merge()</code>, <code>m-</code><code>search()</code>, <code>notify()</code>, <code>subscribe()</code>, <code>unsubscribe()</code>, <code>patch()</code>, <code>search()</code>, and <code>connect()</code>.</p>
+
+<p>For example, the code below behaves just like the previous <code>/about</code> route, but only responds to HTTP POST requests.</p>
+
+<pre class="brush: js"><code>router.post('/about', function (req, res) {
+  res.send('About this wiki');
+})</code></pre>
+
+<h3 id="Route_paths">Route paths</h3>
+
+<p>The route paths define the endpoints at which requests can be made. The examples we've seen so far have just been strings, and are used exactly as written: '/', '/about', '/book', '/any-random.path'.</p>
+
+<p>Route paths can also be string patterns. String patterns use a subset of regular expression syntax to define <em>patterns</em> of endpoints that will be matched. The subset is listed below (note that the hyphen (<code>-</code>) and the dot (<code>.</code>) are interpreted literally by string-based paths):</p>
+
+<ul>
+ <li>? : The endpoint must have 0 or 1 of the preceding character. E.g. a route path of <code>'/ab?cd'</code> will match endpoints <code>acd</code> or <code>abcd</code>.</li>
+ <li>+ : The endpoint must have 1 or more of the preceding character. E.g. a route path of <code>'/ab+cd'</code> will match endpoints <code>abcd</code>, <code>abbcd</code>, <code>abbbcd</code>, and so on.</li>
+ <li>* : The endpoint may have an arbitrary string where the * character is placed. E.g. a route path of <code>'ab\*cd'</code> will match endpoints <code>abcd</code>, <code>abXcd</code>, <code>abSOMErandomTEXTcd</code>, and so on.</li>
+ <li>() : Grouping match on a set of characters to perform another operation on. E.g. <code>'/ab(cd)?e'</code> will peform a ? match on (cd) —it will match <code>abe</code> and <code>abcde</code>.</li>
+</ul>
+
+<p>The route paths can also be JavaScript <a href="/en-US/docs/Web/JavaScript/Guide/Regular_Expressions">regular expressions</a>. For example, the route path below will match <code>catfish </code>and <code>dogfish</code>, but not <code>catflap</code>, <code>catfishhead</code>, and so on. Note that the path for a regular expression uses regular expression syntax (it is not a quoted string as in the previous cases).</p>
+
+<pre class="brush: js"><code>app.get(/.*fish$/, function (req, res) {
+  ...
+})</code></pre>
+
+<div class="note">
+<p><strong>Note:</strong> Most of our routes for the LocalLibrary will simply use strings and not string patterns and regular expressions. We'll also use route parameters as discussed in the next section.</p>
+</div>
+
+<h3 id="Route_parameters">Route parameters</h3>
+
+<p>Route parameters are <em>named URL segments</em> used to capture the values specified at their position in the URL. The named segments are prefixed with a colon and then the name (e.g. <code>/<strong>:</strong>your_parameter_name/</code>. The captured values are stored in the <code>req.params</code> object using the parameter names as keys (e.g. <code>req.params.your_parameter_name</code>).</p>
+
+<p>So for example, consider a URL encoded to contain information about users and books: <code>http://localhost:3000/users/34/books/8989</code>. We can extract this information as shown below, with the <code>userId</code> and <code>bookId</code> path parameters:</p>
+
+<pre><code>app.get('/users/:userId/books/:bookId', function (req, res) {
+  // Access userId via: req.params.userId
+  // Access bookId via: req.params.bookId
+  res.send(req.params);
+})
+</code></pre>
+
+<p>The names of route parameters must be made up of “word characters” (A-Z, a-z, 0-9, and _).</p>
+
+<div class="note">
+<p><strong>Note:</strong> The URL <em>/book/create</em> will be matched by a route like <code>/book/:bookId</code> (which will extract a "bookId" value of '<code>create</code>'). The first route that matches an incoming URL will be used, so if you want to process <code>/book/create</code> URLs separately, their route handler must be defined before your <code>/book/:bookId</code> route.</p>
+</div>
+
+<p>That's all you need to get started with routes - if needed you can find more information in the Express docs: <a href="http://expressjs.com/en/starter/basic-routing.html">Basic routing</a> and <a href="http://expressjs.com/en/guide/routing.html">Routing guide</a>. The following sections show how we'll set up our routes and controllers for the LocalLibrary.</p>
+
+<h2 id="Routes_needed_for_the_LocalLibrary">Routes needed for the LocalLibrary</h2>
+
+<p>The URLs that we're ultimately going to need for our pages are listed below, where <em>object</em> is replaced by the name of each of our models (book, bookinstance, genre, author), <em>objects</em> is the plural of object, and <em>id</em> is the unique instance field (<code>_id</code>) that is given to each Mongoose model instance by default.</p>
+
+<ul>
+ <li><code>catalog/</code> — The home/index page.</li>
+ <li><code>catalog/&lt;objects&gt;/</code> — The list of all books, bookinstances, genres, or authors (e.g. /<code>catalog/books/</code>, /<code>catalog/genres/</code>, etc.)</li>
+ <li><code>catalog/&lt;object&gt;/<em>&lt;id&gt;</em></code> — The detail page for a specific book, bookinstance, genre, or author with the given <code><em>_id</em></code> field value (e.g. <code>/catalog/book/584493c1f4887f06c0e67d37)</code>.</li>
+ <li><code>catalog/&lt;object&gt;/create</code> — The form to create a new book, bookinstance, genre, or author (e.g. <code>/catalog/book/create)</code>.</li>
+ <li><code>catalog/&lt;object&gt;/<em>&lt;id&gt;</em>/update</code> — The form to update a specific book, bookinstance, genre, or author with the given <code><em>_id</em></code> field value (e.g. <code>/catalog/book/584493c1f4887f06c0e67d37/update)</code>.</li>
+ <li><code>catalog/&lt;object&gt;/<em>&lt;id&gt;</em>/delete</code> — The form to delete a specific book, bookinstance, genre, author with the given <code><em>_id</em></code> field value (e.g. <code>/catalog/book/584493c1f4887f06c0e67d37/delete)</code>.</li>
+</ul>
+
+<p>The first home page and list pages don't encode any additional information. While the results returned will depend on the model type and the content in the database, the queries run to get the information will always be the same (similarly the code run for object creation will always be similar).</p>
+
+<p>By contrast the other URLs are used to act on a specific document/model instance—these encode the identity of the item in the URL (shown as <code><em>&lt;id&gt;</em></code> above). We'll use path parameters to extract the encoded information and pass it to the route handler (and in a later article we'll use this to dynamically determine what information to get from the database). By encoding the information in our URL we only need one route for every resource of a particular type (e.g. one route to handle the display of every single book item).</p>
+
+<div class="note">
+<p><strong>Note</strong>: Express allows you to construct your URLs any way you like — you can encode information in the body of the URL as shown above or use URL <code>GET</code> parameters (e.g. <code>/book/?id=6</code>). Whichever approach you use, the URLs should be kept clean, logical and readable (<a href="https://www.w3.org/Provider/Style/URI">check out the W3C advice here</a>).</p>
+</div>
+
+<p>Next we create our route handler callback functions and route code for all the above URLs.</p>
+
+<h2 id="Create_the_route-handler_callback_functions">Create the route-handler callback functions</h2>
+
+<p>Before we define our routes, we'll first create all the dummy/skeleton callback functions that they will invoke. The callbacks will be stored in separate "controller" modules for Books, BookInstances, Genres, and Authors (you can use any file/module structure, but this seems an appropriate granularity for this project).</p>
+
+<p>Start by creating a folder for our controllers in the project root (<strong>/controllers</strong>) and then create separate controller files/modules for handling each of the models:</p>
+
+<pre>/express-locallibrary-tutorial  //the project root
+  <strong>/controllers</strong>
+    <strong>authorController.js</strong>
+    <strong>bookController.js</strong>
+    <strong>bookinstanceController.js</strong>
+    <strong>genreController.js</strong></pre>
+
+<h3 id="Author_controller">Author controller</h3>
+
+<p>Open the <strong>/controllers/authorController.js</strong> file and type in the following code:</p>
+
+<pre class="brush: js">var Author = require('../models/author');
+
+// Display list of all Authors.
+exports.author_list = function(req, res) {
+    res.send('NOT IMPLEMENTED: Author list');
+};
+
+// Display detail page for a specific Author.
+exports.author_detail = function(req, res) {
+    res.send('NOT IMPLEMENTED: Author detail: ' + req.params.id);
+};
+
+// Display Author create form on GET.
+exports.author_create_get = function(req, res) {
+    res.send('NOT IMPLEMENTED: Author create GET');
+};
+
+// Handle Author create on POST.
+exports.author_create_post = function(req, res) {
+    res.send('NOT IMPLEMENTED: Author create POST');
+};
+
+// Display Author delete form on GET.
+exports.author_delete_get = function(req, res) {
+    res.send('NOT IMPLEMENTED: Author delete GET');
+};
+
+// Handle Author delete on POST.
+exports.author_delete_post = function(req, res) {
+    res.send('NOT IMPLEMENTED: Author delete POST');
+};
+
+// Display Author update form on GET.
+exports.author_update_get = function(req, res) {
+    res.send('NOT IMPLEMENTED: Author update GET');
+};
+
+// Handle Author update on POST.
+exports.author_update_post = function(req, res) {
+    res.send('NOT IMPLEMENTED: Author update POST');
+};
+</pre>
+
+<p>The module first requires the model that we'll later be using to access and update our data. It then exports functions for each of the URLs we wish to handle (the create, update and delete operations use forms, and hence also have additional methods for handling form post requests — we'll discuss those methods in the "forms article" later on).</p>
+
+<p>All the functions have the standard form of an <em>Express middleware function</em>, with arguments for the request, response, and the <code>next</code> function to be called if the method does not complete the request cycle (in all these cases it does!). The methods simply return a string indicating that the associated page has not yet been created. If a controller function is expected to receive path parameters, these are output in the message string (see <code>req.params.id</code> above).</p>
+
+<h4 id="BookInstance_controller">BookInstance controller</h4>
+
+<p>Open the <strong>/controllers/bookinstanceController.js</strong> file and copy in the following code (this follows an identical pattern to the <code>Author</code> controller module):</p>
+
+<pre class="brush: js">var BookInstance = require('../models/bookinstance');
+
+// Display list of all BookInstances.
+exports.bookinstance_list = function(req, res) {
+    res.send('NOT IMPLEMENTED: BookInstance list');
+};
+
+// Display detail page for a specific BookInstance.
+exports.bookinstance_detail = function(req, res) {
+    res.send('NOT IMPLEMENTED: BookInstance detail: ' + req.params.id);
+};
+
+// Display BookInstance create form on GET.
+exports.bookinstance_create_get = function(req, res) {
+    res.send('NOT IMPLEMENTED: BookInstance create GET');
+};
+
+// Handle BookInstance create on POST.
+exports.bookinstance_create_post = function(req, res) {
+    res.send('NOT IMPLEMENTED: BookInstance create POST');
+};
+
+// Display BookInstance delete form on GET.
+exports.bookinstance_delete_get = function(req, res) {
+    res.send('NOT IMPLEMENTED: BookInstance delete GET');
+};
+
+// Handle BookInstance delete on POST.
+exports.bookinstance_delete_post = function(req, res) {
+    res.send('NOT IMPLEMENTED: BookInstance delete POST');
+};
+
+// Display BookInstance update form on GET.
+exports.bookinstance_update_get = function(req, res) {
+    res.send('NOT IMPLEMENTED: BookInstance update GET');
+};
+
+// Handle bookinstance update on POST.
+exports.bookinstance_update_post = function(req, res) {
+    res.send('NOT IMPLEMENTED: BookInstance update POST');
+};
+</pre>
+
+<h4 id="Genre_controller">Genre controller</h4>
+
+<p>Open the <strong>/controllers/genreController.js</strong> file and copy in the following text (this follows an identical pattern to the <code>Author</code> and <code>BookInstance</code> files):</p>
+
+<pre class="brush: js">var Genre = require('../models/genre');
+
+// Display list of all Genre.
+exports.genre_list = function(req, res) {
+    res.send('NOT IMPLEMENTED: Genre list');
+};
+
+// Display detail page for a specific Genre.
+exports.genre_detail = function(req, res) {
+    res.send('NOT IMPLEMENTED: Genre detail: ' + req.params.id);
+};
+
+// Display Genre create form on GET.
+exports.genre_create_get = function(req, res) {
+    res.send('NOT IMPLEMENTED: Genre create GET');
+};
+
+// Handle Genre create on POST.
+exports.genre_create_post = function(req, res) {
+    res.send('NOT IMPLEMENTED: Genre create POST');
+};
+
+// Display Genre delete form on GET.
+exports.genre_delete_get = function(req, res) {
+    res.send('NOT IMPLEMENTED: Genre delete GET');
+};
+
+// Handle Genre delete on POST.
+exports.genre_delete_post = function(req, res) {
+    res.send('NOT IMPLEMENTED: Genre delete POST');
+};
+
+// Display Genre update form on GET.
+exports.genre_update_get = function(req, res) {
+    res.send('NOT IMPLEMENTED: Genre update GET');
+};
+
+// Handle Genre update on POST.
+exports.genre_update_post = function(req, res) {
+    res.send('NOT IMPLEMENTED: Genre update POST');
+};
+</pre>
+
+<h4 id="Book_controller">Book controller</h4>
+
+<p>Open the <strong>/controllers/bookController.js</strong> file and copy in the following code. This follows the same pattern as the other controller modules, but additionally has an <code>index()</code> function for displaying the site welcome page:</p>
+
+<pre class="brush: js">var Book = require('../models/book');
+
+<strong>exports.index = function(req, res) {
+    res.send('NOT IMPLEMENTED: Site Home Page');
+};</strong>
+
+// Display list of all books.
+exports.book_list = function(req, res) {
+    res.send('NOT IMPLEMENTED: Book list');
+};
+
+// Display detail page for a specific book.
+exports.book_detail = function(req, res) {
+    res.send('NOT IMPLEMENTED: Book detail: ' + req.params.id);
+};
+
+// Display book create form on GET.
+exports.book_create_get = function(req, res) {
+    res.send('NOT IMPLEMENTED: Book create GET');
+};
+
+// Handle book create on POST.
+exports.book_create_post = function(req, res) {
+    res.send('NOT IMPLEMENTED: Book create POST');
+};
+
+// Display book delete form on GET.
+exports.book_delete_get = function(req, res) {
+    res.send('NOT IMPLEMENTED: Book delete GET');
+};
+
+// Handle book delete on POST.
+exports.book_delete_post = function(req, res) {
+    res.send('NOT IMPLEMENTED: Book delete POST');
+};
+
+// Display book update form on GET.
+exports.book_update_get = function(req, res) {
+    res.send('NOT IMPLEMENTED: Book update GET');
+};
+
+// Handle book update on POST.
+exports.book_update_post = function(req, res) {
+    res.send('NOT IMPLEMENTED: Book update POST');
+};
+</pre>
+
+<h2 id="Create_the_catalog_route_module">Create the catalog route module</h2>
+
+<p>Next we create <em>routes</em> for all the URLs <a href="#local_libary_routes">needed by the LocalLibrary website</a>, which will call the controller functions we defined in the previous section.</p>
+
+<p>The skeleton already has a <strong>./routes</strong> folder containing routes for the <em>index</em> and <em>users</em>. Create another route file — <strong>catalog.js</strong> — inside this folder, as shown.</p>
+
+<pre>/express-locallibrary-tutorial //the project root
+  /routes
+    index.js
+    users.js
+    <strong>catalog.js</strong></pre>
+
+<p>Open <strong>/routes/</strong><strong>catalog.js</strong> and copy in the code below:</p>
+
+<pre class="brush: js"><strong>var express = require('express');
+var router = express.Router();
+</strong>
+// Require controller modules.
+var book_controller = require('../controllers/bookController');
+var author_controller = require('../controllers/authorController');
+var genre_controller = require('../controllers/genreController');
+var book_instance_controller = require('../controllers/bookinstanceController');
+
+/// BOOK ROUTES ///
+
+// GET catalog home page.
+router.get('/', book_controller.index);
+
+// GET request for creating a Book. NOTE This must come before routes that display Book (uses id).
+router.get('/book/create', book_controller.book_create_get);
+
+// POST request for creating Book.
+router.post('/book/create', book_controller.book_create_post);
+
+// GET request to delete Book.
+router.get('/book/:id/delete', book_controller.book_delete_get);
+
+// POST request to delete Book.
+router.post('/book/:id/delete', book_controller.book_delete_post);
+
+// GET request to update Book.
+router.get('/book/:id/update', book_controller.book_update_get);
+
+// POST request to update Book.
+router.post('/book/:id/update', book_controller.book_update_post);
+
+// GET request for one Book.
+router.get('/book/:id', book_controller.book_detail);
+
+// GET request for list of all Book items.
+router.get('/books', book_controller.book_list);
+
+/// AUTHOR ROUTES ///
+
+// GET request for creating Author. NOTE This must come before route for id (i.e. display author).
+router.get('/author/create', author_controller.author_create_get);
+
+// POST request for creating Author.
+router.post('/author/create', author_controller.author_create_post);
+
+// GET request to delete Author.
+router.get('/author/:id/delete', author_controller.author_delete_get);
+
+// POST request to delete Author.
+router.post('/author/:id/delete', author_controller.author_delete_post);
+
+// GET request to update Author.
+router.get('/author/:id/update', author_controller.author_update_get);
+
+// POST request to update Author.
+router.post('/author/:id/update', author_controller.author_update_post);
+
+// GET request for one Author.
+router.get('/author/:id', author_controller.author_detail);
+
+// GET request for list of all Authors.
+router.get('/authors', author_controller.author_list);
+
+/// GENRE ROUTES ///
+
+// GET request for creating a Genre. NOTE This must come before route that displays Genre (uses id).
+router.get('/genre/create', genre_controller.genre_create_get);
+
+//POST request for creating Genre.
+router.post('/genre/create', genre_controller.genre_create_post);
+
+// GET request to delete Genre.
+router.get('/genre/:id/delete', genre_controller.genre_delete_get);
+
+// POST request to delete Genre.
+router.post('/genre/:id/delete', genre_controller.genre_delete_post);
+
+// GET request to update Genre.
+router.get('/genre/:id/update', genre_controller.genre_update_get);
+
+// POST request to update Genre.
+router.post('/genre/:id/update', genre_controller.genre_update_post);
+
+// GET request for one Genre.
+router.get('/genre/:id', genre_controller.genre_detail);
+
+// GET request for list of all Genre.
+router.get('/genres', genre_controller.genre_list);
+
+/// BOOKINSTANCE ROUTES ///
+
+// GET request for creating a BookInstance. NOTE This must come before route that displays BookInstance (uses id).
+router.get('/bookinstance/create', book_instance_controller.bookinstance_create_get);
+
+// POST request for creating BookInstance.
+router.post('/bookinstance/create', book_instance_controller.bookinstance_create_post);
+
+// GET request to delete BookInstance.
+router.get('/bookinstance/:id/delete', book_instance_controller.bookinstance_delete_get);
+
+// POST request to delete BookInstance.
+router.post('/bookinstance/:id/delete', book_instance_controller.bookinstance_delete_post);
+
+// GET request to update BookInstance.
+router.get('/bookinstance/:id/update', book_instance_controller.bookinstance_update_get);
+
+// POST request to update BookInstance.
+router.post('/bookinstance/:id/update', book_instance_controller.bookinstance_update_post);
+
+// GET request for one BookInstance.
+router.get('/bookinstance/:id', book_instance_controller.bookinstance_detail);
+
+// GET request for list of all BookInstance.
+router.get('/bookinstances', book_instance_controller.bookinstance_list);
+
+<strong>module.exports = router;</strong>
+</pre>
+
+<p>The module requires Express and then uses it to create a <code>Router</code> object. The routes are all set up on the router, which is then exported.</p>
+
+<p>The routes are defined either using <code>.get()</code> or <code>.post()</code> methods on the router object. All the paths are defined using strings (we don't use string patterns or regular expressions). Routes that act on some specific resource (e.g. book) use path parameters to get the object id from the URL.</p>
+
+<p>The handler functions are all imported from the controller modules we created in the previous section.</p>
+
+<h3 id="Update_the_index_route_module">Update the index route module</h3>
+
+<p>We've set up all our new routes, but we still have a route to the original page. Let's instead redirect this to the new index page that we've created at the path '/catalog'.</p>
+
+<p>Open <strong>/routes/index.js</strong> and replace the existing route with the function below.</p>
+
+<pre class="brush: js">// GET home page.
+router.get('/', function(req, res) {
+  res.redirect('/catalog');
+});</pre>
+
+<div class="note">
+<p><strong>Note:</strong> This is our first use of the <a href="https://expressjs.com/en/4x/api.html#res.redirect">redirect()</a> response method. This redirects to the specified page, by default sending HTTP status code "302 Found". You can change the status code returned if needed, and supply either absolute or relative paths.</p>
+</div>
+
+<h3 id="Update_app.js">Update app.js</h3>
+
+<p>The last step is to add the routes to the middleware chain. We do this in <code>app.js</code>.</p>
+
+<p>Open <strong>app.js</strong> and require the catalog route below the other routes (add the third line shown below, underneath the other two):</p>
+
+<pre class="brush: js">var indexRouter = require('./routes/index');
+var usersRouter = require('./routes/users');
+<strong>var catalogRouter = require('./routes/catalog');  //Import routes for "catalog" area of site</strong></pre>
+
+<p>Next, add the catalog route to the middleware stack below the other routes (add the third line shown below, underneath the other two):</p>
+
+<pre class="brush: js">app.use('/', indexRouter);
+app.use('/users', usersRouter);
+<strong>app.use('/catalog', catalogRouter);  // Add catalog routes to middleware chain.</strong></pre>
+
+<div class="note">
+<p><strong>Note:</strong> We have added our catalog module at a path <code>'/catalog'</code>. This is prepended to all of the paths defined in the catalog module. So for example, to access a list of books, the URL will be: <code>/catalog/books/</code>.</p>
+</div>
+
+<p>That's it. We should now have routes and skeleton functions enabled for all the URLs that we will eventually support on the LocalLibrary website.</p>
+
+<h3 id="Testing_the_routes">Testing the routes</h3>
+
+<p>To test the routes, first start the website using your usual approach</p>
+
+<ul>
+ <li>The default method
+  <pre class="brush: bash"><code>// Windows
+SET DEBUG=express-locallibrary-tutorial:* &amp; npm start
+
+// macOS or Linux
+DEBUG=express-locallibrary-tutorial:* npm start</code>
+</pre>
+ </li>
+ <li>If you previously set up <a href="/en-US/docs/Learn/Server-side/Express_Nodejs/skeleton_website">nodemon</a>, you can instead use:
+  <pre><code>// Windows
+SET DEBUG=express-locallibrary-tutorial:* &amp; npm <strong>run devstart</strong>
+
+// macOS or Linux
+</code>DEBUG=express-locallibrary-tutorial:* npm <strong style="font-family: inherit; font-size: 1rem;">run devstart</strong>
+</pre>
+ </li>
+</ul>
+
+<p>Then navigate to a number of LocalLibrary URLs, and verify that you don't get an error page (HTTP 404). A small set of URLs are listed below for your convenience:</p>
+
+<ul>
+ <li><a href="http://localhost:3000/">http://localhost:3000/</a></li>
+ <li><a href="http://localhost:3000/catalog">http://localhost:3000/catalog</a></li>
+ <li><a href="http://localhost:3000/catalog/books">http://localhost:3000/catalog/books</a></li>
+ <li><a href="http://localhost:3000/catalog/bookinstances/">http://localhost:3000/catalog/bookinstances/</a></li>
+ <li><a href="http://localhost:3000/catalog/authors/">http://localhost:3000/catalog/authors/</a></li>
+ <li><a href="http://localhost:3000/catalog/genres/">http://localhost:3000/catalog/genres/</a></li>
+ <li><a href="http://localhost:3000/catalog/book/5846437593935e2f8c2aa226/">http://localhost:3000/catalog/book/5846437593935e2f8c2aa226</a></li>
+ <li><a href="http://localhost:3000/catalog/book/create">http://localhost:3000/catalog/book/create</a></li>
+</ul>
+
+<h2 id="まとめ">まとめ</h2>
+
+<p>これでサイトのすべてのルートを、後の記事で完全な実装を追加することができるダミーのコントローラ関数もあわせて作成しました。その過程で、Express ルートについての多くの基本的な情報、そしてルートとコントローラを構築するためのいくつかのアプローチを学びました。</p>
+
+<p>次の記事では、モデルに格納されているビュー (テンプレート) と情報を使用して、サイト用の適切なウェルカムページを作成します。</p>
+
+<h2 id="あわせて参照">あわせて参照</h2>
+
+<ul>
+ <li><a href="http://expressjs.com/ja/starter/basic-routing.html">Basic routing</a> (Express ドキュメント)</li>
+ <li><a href="http://expressjs.com/ja/guide/routing.html">Routing guide</a> (Express ドキュメント)</li>
+</ul>
+
+<p>{{PreviousMenuNext("Learn/Server-side/Express_Nodejs/mongoose", "Learn/Server-side/Express_Nodejs/Displaying_data", "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>
diff --git a/files/ja/learn/server-side/express_nodejs/skeleton_website/index.html b/files/ja/learn/server-side/express_nodejs/skeleton_website/index.html
new file mode 100644
index 0000000000..5b0acfecd2
--- /dev/null
+++ b/files/ja/learn/server-side/express_nodejs/skeleton_website/index.html
@@ -0,0 +1,512 @@
+---
+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>
diff --git a/files/ja/learn/server-side/express_nodejs/tutorial_local_library_website/index.html b/files/ja/learn/server-side/express_nodejs/tutorial_local_library_website/index.html
new file mode 100644
index 0000000000..9e4dc43e1e
--- /dev/null
+++ b/files/ja/learn/server-side/express_nodejs/tutorial_local_library_website/index.html
@@ -0,0 +1,98 @@
+---
+title: 'Express チュートリアル: 地域図書館の Web サイト'
+slug: Learn/Server-side/Express_Nodejs/Tutorial_local_library_website
+tags:
+  - Beginner
+  - CodingScripting
+  - Express
+  - Intro
+  - Learn
+  - Node
+  - Tutorial
+  - nodejs
+  - イントロダクション
+  - サーバサイド
+  - 初心者
+  - 学習
+translation_of: Learn/Server-side/Express_Nodejs/Tutorial_local_library_website
+---
+<div>{{LearnSidebar}}</div>
+
+<div>{{PreviousMenuNext("Learn/Server-side/Express_Nodejs/development_environment", "Learn/Server-side/Express_Nodejs/skeleton_website", "Learn/Server-side/Express_Nodejs")}}</div>
+
+<p class="summary">実用的なチュートリアルシリーズの最初の記事では、これから学ぶことについて説明します。そして、私たちがこれから取り組んでいき、その後の記事で進化していく「地域図書館」のサンプルウェブサイトの概要を説明します。</p>
+
+<table class="learn-box standard-table">
+ <tbody>
+  <tr>
+   <th scope="row">前提条件:</th>
+   <td><a href="/ja/docs/Learn/Server-side/Express_Nodejs/Introduction">Express のイントロダクション</a>を読んでください。以下の記事では、<a href="/ja/docs/Learn/Server-side/Express_Nodejs/development_environment">Node 開発環境を設定する</a>必要もあります。</td>
+  </tr>
+  <tr>
+   <th scope="row">目標:</th>
+   <td>このチュートリアルで使用されているサンプルアプリケーションを紹介し、どのトピックがカバーされるのかを読者が理解できるようにします。</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="概要">概要</h2>
+
+<p>MDN "Local Library" Express (Node) チュートリアルへようこそ。このチュートリアルでは、地域図書館の目録を管理するために使用される可能性があるウェブサイトを開発します。</p>
+
+<p>この一連のチュートリアル記事では、次のことを行います。</p>
+
+<ul>
+ <li>Express Application Generator ツールを使用して、スケルトンウェブサイトとアプリケーションを作成します。</li>
+ <li>Node ウェブサーバーを起動および停止します。</li>
+ <li>データベースを使用してアプリケーションのデータを保存します。</li>
+ <li>さまざまな情報を要求するためのルートを作成し、ブラウザーに表示するデータを HTML としてレンダリングするためのテンプレート ("ビュー" )を作成します</li>
+ <li>フォームを操作します。</li>
+ <li>アプリケーションを運用環境にデプロイします。</li>
+</ul>
+
+<p>あなたはすでにこれらのトピックのいくつかについて学び、他のものについても簡単に触れました。チュートリアルシリーズの最後までに、簡単な Express アプリケーションを自分で開発するのに十分な知識があるはずです。</p>
+
+<h2 id="LocalLibrary_ウェブサイト">LocalLibrary ウェブサイト</h2>
+
+<p><em>LocalLibrary</em> は、この一連のチュートリアルの過程で作成および進化するウェブサイトの名前です。ご想像のとおり、この ウェブサイトの目的は利用できる書籍を閲覧したり自分のアカウントを管理したりできる、地元の小さな図書館用のオンライン目録を提供することです。</p>
+
+<p>この例は慎重に選択されています。必要なだけ詳細を表示することも、ほとんどすべての Express 機能を見せるために使用することもできるためです。さらに重要なことに、それはどんなウェブサイトでも必要とする機能性への<em>ガイド付きの</em>道筋を提供することができます：</p>
+
+<ul>
+ <li>最初のいくつかのチュートリアル記事では、図書館のメンバーがどの本が利用できるかを調べるために使用できる簡単な<em>ブラウズ専用</em>ライブラリを定義します。これにより、ほぼすべての ウェブサイトに共通の操作、つまりデータベースからのコンテンツの読み取りと表示を探ることができます。</li>
+ <li>先へ進むにつれて、図書館の例は自然に拡張され、より高度な ウェブサイト機能を実演します。たとえば、新しい本を作成できるようにライブラリを拡張し、これを使用してフォームの使用方法を示し、ユーザ認証をサポートすることができます。</li>
+</ul>
+
+<p>これは非常に拡張可能な例ですが、<em><strong>Local</strong>Library</em> と呼ばれる理由があります。私たちは Express をすぐに使い始めるための最小限の情報を示すことを望んでいます。その結果、私たちは本に関する情報、本のコピー、作者、その他の重要な情報を保存します。ただし、図書館が貸し出す可能性のある他のアイテムに関する情報を保存したり、複数の図書館サイトやその他の "大きな図書館" 機能をサポートするために必要なインフラストラクチャを提供することはしません。</p>
+
+<h2 id="私は立ち往生しています、どこでソースを入手できますか？">私は立ち往生しています、どこでソースを入手できますか？</h2>
+
+<p>チュートリアルを進めていくうちに、適切なコードスニペットを各ポイントにコピーして貼り付けることができます。また、他のコードも (ある程度の手引きを付けて) 自身で拡張することを望んでいます。</p>
+
+<p>すべてのコードスニペットをコピーして貼り付けるのではなく、それらを入力してみてください。次回同様のコードを書くときに、コードに慣れ親しんでいることになるので、長期的に役に立ちます。</p>
+
+<p>あなたが立ち往生したならば、<a href="https://github.com/mdn/express-locallibrary-tutorial">Github のここ</a>で ウェブサイトの完全に開発されたバージョンを見つけることができます。</p>
+
+<div class="note">
+<p><strong>メモ:</strong> この文書でテストされた Node、Express、および他のモジュールの特定のバージョンは、プロジェクト <a href="https://github.com/mdn/express-locallibrary-tutorial/blob/master/package.json">package.json</a> にリストされています。</p>
+</div>
+
+<h2 id="まとめ">まとめ</h2>
+
+<p><em>LocalLIbrary</em> ウェブサイトと、これから学ぶことについて少し知りました。今度は私たちの例を含む<a href="/ja/docs/Learn/Server-side/Express_Nodejs/skeleton_website">スケルトンプロジェクト</a>の作成を開始します。</p>
+
+<p>{{PreviousMenuNext("Learn/Server-side/Express_Nodejs/development_environment", "Learn/Server-side/Express_Nodejs/skeleton_website", "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 チュートリアル: 地域図書館のウェブサイト</a></li>
+ <li><a href="https://developer.mozilla.org/ja/docs/Learn/Server-side/Express_Nodejs/skeleton_website">Express チュートリアル Part 2: スケルトンウェブサイトの作成</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>