Lesson 1

はじめに

Lesson 1 Chapter 1
Node.jsとは

この教材では、Node.jsを使用したWebアプリケーションの開発手法を学びます。

Node.jsを使えば、JavaScriptをRubyやPHP、Pythonと同じバックエンドの言語として記述できます。開発コストを下げ、エンジニアの負担を減らす上で、フロントエンドとサーバーサイドの言語を一本化できることは大きなメリットです。

教材の前半では、Node.jsの仕組みや環境構築について学びます。その後、人気のNode.jsフレームワーク「Express」およびテンプレートエンジン「EJS」の学習に入る流れです。

最終的には、上記のソフトウェアを活用し、簡単なWebアプリケーション（Todoアプリ）を作成します。最後のLessonを終える頃には、セキュリティやロギングなども含め実践的な知識が身についているはずです。

Node.jsの概要

Node.jsは、サーバーサイドで動作するJavaSciprt実行環境のひとつです。従来はWebブラウザの中だけで動いていたJavaScriptを、独立したプログラムとして動かす目的で開発されました。

実行環境とは

人間が書いたプログラムをコンピューターが理解できる形に変換し、コンピューター上で実行してくれる環境のこと。

当初はWebアプリケーションのバックエンドを構築するために作られたNode.jsですが、今では様々な場面での活用が進んでいます。具体的には、以下の使用シーンが想定されるでしょう。

  • 軽量で堅牢なWebサーバーの構築
  • リアルタイム処理が必要なWebアプリの開発
  • ハイブリット型スマートフォンアプリの開発
  • IoT分野における組み込み制御の開発

このように多用途で用いられるのも、Node.jsが大量処理・リアルタイム処理に長けているからこそです。JavaScriptによるWeb開発の経験がある人にとっては、学習コストが大幅に抑えられる点もメリットと言えるでしょう。

Node.jsが動く仕組み

Node.jsは、JavaScriptエンジン「V8」を使って作られています。

JavaScriptエンジンとは

JavaScriptのコードを機械語にコンパイルし、実行するためのプログラムのこと。

V8は、Google社が開発したJavaScriptエンジンです。オープンソースとして公開されており、 以下の通り「Google Chrome」ほか多くのWebブラウザで使われています。

ブラウザ・ソフトウェア 搭載されているJavaScriptエンジン
Google Chrome V8
Microsoft Edge Chakra | V8
Firefox SpiderMonkey
Opera V8
Safari JavaScript Core

このV8エンジンを組み込むことで、Node.jsはJavaScriptの実行環境を提供しています。サーバーにNode.jsをインストールすることで、JavaScriptを動作させられるという仕組みです。

まとめ

今回はNode.jsの概要について学びました。

繰り返しになりますが、Node.jsはサーバーサイドにおけるJavaScript実行環境のひとつです。軽量で高負荷の処理に長けており、サーバーだけでなくスマホアプリやIoTの分野でも使われています。

Node.jsのメリット

  • Node.jsによってサーバーサイドでJavaScriptを動作させられる
  • JavaScriptひとつでフロントエンドとバックエンド両方の開発が可能になる

Node.jsを扱えるようになれば、JavaScriptを使ってWebアプリケーションの開発が可能になります。今後のLessonを通して、ぜひ実践的な知識を身につけてください。

Lesson 1 Chapter 2
Expressとは

この教材では、Node.jsのフレームワーク「Express」を使った開発方法を学びます。

Node.jsの登場はそれだけで革新的なものでしたが、その人気を後押ししたのが秀逸なフレームワークの存在です。Vue.jsやReactといったフレームワークが脚光を浴びたことは、Node.js自体の発展に大きく寄与しました。

Expressは、同じNode.js製フレームワークの中でも最古参にあたります。利用者が多く、日本語の情報も溢れているため、初学者には最適のフレームワークといえるでしょう。

実際の導入に移る前に、ここではExpressの概要を述べておきます。

Expressの概要

express-website.png Express

Express.jsは、Node.js上で動作するWebアプリケーションのフレームワークです。

そもそも「フレームワーク」とは、アプリケーション開発に必要な機能をまとめて提供するパッケージを指します。文字通り「枠組み」として、Webアプリケーションを開発する上での基本構成を用意してくれるものです。

様々なフレームワーク

フレームワークはExpress以外にも様々あります。有名なところでは、JavaScriptのフロントエンドの開発で使われることの多いVueや、 Pythonでの開発で使われるDjango、Flaskなどがあります。 言語やフロントエンド・バックエンドなどの違いによって使用できるものが異なるので注意してください。

Expressの特徴

Expressの主な特徴として、ここでは以下の3点を紹介します。

  • 機能が最小限に絞られていて軽量である
  • 日本語の情報が豊富にあり学習しやすい
  • EJSとの連携によりフロント開発も容易

以下でそれぞれ見ていきましょう。

機能が最小限に絞られていて軽量である

Expressは、必要最小限の構成であることを理念に掲げています。したがって、他のフレームワークに見られるような機能（テンプレートエンジンやORMなど）は標準搭載されていません。

コア機能として提供されているのは、あくまでルーティングによる動的なWebページの設計です。

機能が絞られている分、Expressは軽快に動作します。サーバーの処理を高速化したい場合、Expressは十分な期待に応えてくれるはずです。

日本語の情報が豊富にあり学習しやすい

Expressには長い歴史があるため、日本語のドキュメントが豊富に見つかります。

インターネット上のコミュニティやブログでは、初学者向けの情報が分かりやすくまとまっています。Node.jsの入門書では、構築の手段としてExpressが採用されていることも少なくありません。

特にこれからNode.jsを学ぶ場合、フレームワークにExpressを選ぶことで学習コストを抑えられます。

EJSとの連携によりフロント開発も容易

すでに述べた通り、EJSには最低限の機能しかありません。

機能が絞られているからといって、Expressを使っていて不便に感じることは少ないでしょう。そもそもNode.jsには、豊富な外部パッケージが提供されているためです。

npmを介して必要なパッケージを揃えることで、開発者のスタイルに合わせたカスタマイズが可能です。

Lesson5「DBとの連携」では、Expressのインストールから実際の使い方まで解説します。外部パッケージを利用するパートもあるため、Expressの持つ高い拡張性を実感できるでしょう。

Lesson 1 Chapter 3
テンプレートエンジンとは

前回のChapterで述べた通り、Expressは必要最低限の構成を取っており、Webページをレンダリングする機能までは有していません。

かといって、ネイティブなJavaScriptでHTMLを出力するのには限界があります。フロントエンドとの連携を強化するために、今回は「テンプレートエンジン」を導入することにしましょう。

テンプレートエンジンとは

テンプレートエンジンは、独自の記述方式で書かれたテンプレートとデータモデルとを組み合わせ、ドキュメントに変換して出力するソフトウェアです。

もう少し分かりやすく言い換えると、テンプレートエンジンとは「テンプレートとデータを合体し、文字列を作る仕組み」のことを指します。

以下の画像は、テンプレートエンジンの仕組みを抽象化したものです。

template-engine-model.png テンプレートエンジンの仕組み

上の画像で示した通り、テンプレートエンジンは特殊な記法を用いてデータを変換します。異なるデータをテンプレートに渡せば、異なる出力結果が表示される仕組みです。

このように、テンプレートエンジンを用いると、Node.jsによるHTMLの生成が簡単に行えます。動的なサイトの構築はもちろん、コードの可読性や保守性を高める上でも推奨されるソフトウェアです。

Webテンプレートエンジン

テンプレートエンジンは様々な言語で開発されており、入出力のフォーマットも多岐にわたります。その中でもWebページを生成するものは「Webテンプレートエンジン」と呼ばれ、アプリケーション開発に広く導入されてきました。

以下の項目では、Webテンプレートエンジンに焦点を絞って解説を進めます。

Webテンプレートエンジンの構成要素

Webテンプレートエンジンは、次に挙げる3つの要素によって構成されます。

構成要素 説明
テンプレート 成果ドキュメントの雛形。HTMLをベースに独自のタグを埋め込んだ形式が多い。
データモデル テンプレートに渡されるデータ。一般的なRDBやXMLなど様々な形式が使われる。
成果ドキュメント テンプレートとデータモデルから作成されるWebページ（HTML）。

サンプルコードを見てみましょう。以下はWebテンプレートエンジン「EJS」のフォーマットです。

index.ejs
<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <title>Page Title</title>
</head>
<body>
    <h1>Landing page</h1>
    <p><%= message %></p>
</body>
</html>

一般的なHTMLファイルと似ていますが、よく見るとという見慣れないタグがあります。

EJSにおいて上記のmessageは変数として扱われ、Webページ上では表示されません。実際の値はNode.jsを介してサーバー側から渡されます。

仮にmessageの値が文字列"Hello World"であったとすると、ページ上で次のように表示されるはずです。

system.png テンプレートエンジンによる成果ドキュメント（HTML）の例

上記の例で取り上げた「EJS」は、Node.jsによる代表的なWebテンプレートエンジンです。続くChapterで、このEJSのメリットや機能を詳しく見ていきましょう。

Lesson 1 Chapter 4
EJSとは

前回のChapterでは、HTMLの生成を助ける仕組みとして「テンプレートエンジン」を紹介しました。

Node.jsで利用できるテンプレートエンジンには様々な種類がありますが、この教材では特に高い知名度を誇る「EJS」を採用します。

同じく学習コストの低いExpressと組み合わせることで、簡単なWebアプリケーションであればすぐに実現することが可能です。

なお、EJSは今後のChapterでも繰り返し取り上げるため、ここで完璧に理解する必要はありません。現時点では、あくまで概要の把握に努めてください。

EJSとは

EJSは、JavaScriptで使用されるテンプレートエンジンのひとつです。シンプルで分かりやすい構文を特徴としており、テンプレートエンジン自体に初めて触れる方でも容易に習得できます。

EJSの由来

公式HPによると、ejsの「e」の意味は複数存在するようです。
What is the "E" for? "Embedded?" Could be. How about "Effective," "Elegant," or just "Easy"?

具体的には、EJSによって以下の処理を実現できます。

  • HTMLをパーツ化して別ファイルに分けられる
  • 変数を渡すことで動的なHTMLが生成できる
  • ループ処理や条件文を用いてHTMLを簡潔に記述できる

他のテンプレートエンジンと比べて、EJSは決して多機能ではありません。しかし、必要最低限の処理をJavaScriptの延長で記述できることは大きなメリットです。

テンプレートエンジンを使う理由

ところで、なぜEJSのようなテンプレートエンジンを使う必要があるのでしょうか？

答えは簡単で、動的なデータを扱うためです。

たとえば、ECサイトで買い物する場面を想像してみましょう。ECサイトの商品はいつも同じものが売られているわけではありません。在庫状況に応じて変動するはずです。

このように、取得データが必ずしも一定ではなく、つねに更新される状態を「動的」と言います。

リアルタイムでデータが変動するため、最初からHTMLで記述することはできません。最新の情報はデータベースに保存されており、必要に応じて取得する必要があります。

このとき、サーバーサイド（データべ―ス）とフロントエンド（HTML）を繋げる役目を果たすのが、EJSなどのテンプレートエンジンです。

Expressとの連携

前回のChapterでは、Node.jsのライブラリである「Express」を紹介しました。ExpressとEJSと組み合わせることで、サーバーサイドとフロントエンドの連携が実現します。

具体的には、Expressを利用してサーバーから動的なデータを取得し、HTMLに表示させる仕組みです。以降のChapterで実践的に学んでいきましょう。

EJSの記法

導入として、EJSの記法を簡単に紹介しましょう。

EJSはHTMLにデータを埋め込む形で書いていきます。以下はその一例です。

index.ejs

このように、の中にはJavaScript式を書くことができます。上記の場合、変数commentを出力したい場合は以下のように書きます。 

<h1></h1>

このように、の中には出力したいコードを書きます。 中身は文字列としてWebページに表示される仕組みです。

また、以下はコメントを埋め込むときに使用します。HTMLとしては出力されません。

for文

for文などの繰り返し処理を使って、複数のデータを一覧表示することも可能です。

 { %>
    <p>番目のデータ<p>

上記は以下のHTMLに置換されて出力されます。

<p>0</p>
<p>1</p>
<p>2</p>
<p>3</p>
<p>4</p>

if文

また、条件分岐も埋め込むことができます。



  <p>ワン！！！</p>

  <p>ニャー！！</p>

上記は条件分岐の結果、以下のように表示されます。

ワン！！！

タグを部分的に切り出す

EJSのメリットは、JavaScriptの式や値をHTMLの中に書けるだけではありません。HTMLタグを一部切り出して使い回すことも可能です。

以下の例では、headタグを切り出して別ファイルに分けています。

_head.ejs
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta name="description" content="ejsでタグを部分的に切り出せるよ">
  <title>ejsの学習</title>
</head>

切り出したタグを利用したい場合、以下のように記述します。

index.ejs
<!DOCTYPE html>
<html lang="en">

<body>
  <h1>ejsの概要</h1>
</body>
</html>

このように、includeという組み込みの関数を使うことで_head.jsファイルが読み込まれ、切り出したパーツが適用される仕組みです。

このように部分的にHTMLを切り出すことで、以下のメリットが生まれます。

  • コードの見通しが良くなり可読性が上がる
  • 記述量が減るため開発効率が上がる

同じ記述が繰り返される場合に最適です。頭の片隅に置いておきましょう。

まとめ

EJSのようなテンプレートエンジンを使うことで、動的なデータをHTMLとして表示できます。

また、HTMLをファイルに分割することで、見通しの良いコードを書くことが可能です。

ここで紹介した記法は、今後のレッスンで繰り返し使用します。いつでも思い出せるように復習しておいてください。