今回は、Node.jsで多く利用されている3大フレームワークの特徴や「Hello World」を表示するまでのチュートリアルを合わせて学習してみましょう！
主要なフレームワークの特徴を知りたい
フレームワークってどうやって使うの？
とりあえずHello Worldを試したい
このような内容も含めて、本記事では以下のような構成で解説していきます！
- 「Express」の使い方
- 「Meteor」の使い方
- 「Sails」の使い方
この記事で、Node.jsのフレームワークをしっかり学習してスキルアップを目指していきましょう！
「Express」の使い方
この章では、Expressフレームワークの基本的な使い方について見ていきましょう！ 主に、フレームワークの特徴や簡単な使い方の導入部分までを学んでいきます。
「Express」とは？
Expressフレームワークは、Node.jsを活用したWebアプリ開発を効率よくするためのほぼデファクトスタンダードとして長く利用されています。
いくつかの特徴を列挙しておきます！
- 利用実績やユーザー数が多いことから、情報量が多く日本語リソースも豊富
- 軽量でありながらルーティング・クッキー・RESTfulなインターフェースを装備
- 拡張モジュールが豊富にあり追加していくことで柔軟に対応できる
Expressは少ない記述でサーバー制御が可能で、複雑なシステムも簡単に拡張していくことができるので魅力的です。
ただし、大規模な開発になっていくにつれてコードの見通しなどを工夫していく必要がある点には注意しておきましょう。
「Express」の導入方法
それでは、Expressフレームワークの導入について見ていきましょう！
まず最初に確認事項として、Node.jsの開発環境が整っていることが前提になります。これはExpressがnpmからインストールできるパッケージで提供されていることに起因します。
Windows / Mac / Linuxなど、各OS別のNode.js開発環境の整え方については次の記事でまとめているのでぜひ参考にしてみてください！
Node.js開発環境が整ったら、あとはnpmからExpressをインストールするだけです！
$ npm install express
これで、Expressフレームワークを利用したWeb開発の準備が整いました。
「HelloWorld」を出力してみよう！
次に、Expressフレームワークを利用してHello Worldを表示してみましょう！
まずは適当なファイル名を付けてJavaScriptファイルを編集していきます。（エディタは何でも構いません）
$ vim app.js
先ほどインストールしたExpressをNode.jsから使えるようにするためにrequire()を記述します。
const express = require('express');
const app = express();
これでNode.jsからExpressフレームワークを利用できるようになりました。
get()メソッドを記述することでルーティングと何を表示するかを設定できます。
app.get('/', function (req, res) {
res.send('Hello World');
});
app.listen(8080);
この例では、ホームディレクトリ( / )に対して、文字列の「Hello World」を出力するように設定しています。
listen()メソッドを実行することで、簡単にWebサーバーが起動します。デフォルトだとhttp://localhost:8080にアクセスすることでHello Wroldを表示することができます。
「Meteor」の使い方
この章では、Meteorフレームワークの基本的な使い方を見ていきましょう！ 主に、フレームワークの特徴や簡単な使い方の導入部分までを学んでいきます。
「Meteor」とは？
Meteorフレームワークはフルスタックなので、サーバー制御からフロントエンドまですべてをJavaScriptで完結できるようにサポートされています。
いくつかの特徴を列挙しておきます！
- PC / スマホを含めてプラットフォームに依存しないシンプルな記述が可能
- データベースやビルドツールなど多彩なエコシステムにより迅速な開発が可能
- SPAを素早く構築して公開するまでをサポート
Meteorを導入するだけで、一通り開発に必要な環境が揃うためすぐにWebアプリの開発に取りかかれるのは魅力的です。
ただし、フルスタックであるが故にある程度の自由度は制限されており、推奨される枠内で開発を進めることが最も効率が良いことは注意しておきましょう。
「Meteor」の導入方法
それでは、簡単に導入方法を見ていきましょう！
まず、Windows環境の場合はパッケージマネージャの「Chocolatey」を公式サイトからインストールして次のコマンドを実行します。
$ choco install meteor
また、MacやLinuxをお使いの場合はcurlコマンドを実行してインストールしましょう。
curl https://install.meteor.com/ | sh
これで、Meteorフレームワークを利用した開発環境が整いました。
「HelloWorld」を出力してみよう！
次に、Meteorフレームワークを使ってWebページにHello Worldを表示してみましょう！
Meteorでプロジェクトを作成するには「create」コマンドを実行します。
$ meteor create myproject
この例では、「myproject」という名前の新規プロジェクトを作成しています。「myproject」というディレクトリが作成されているので、その中にあるHTMLファイルを編集してみましょう。
$ cd myproject $ vim client/main.html
Webページを表示するのに必要なHTML / CSS / JSファイルは「client」フォルダ内に配置されています。
そこで、この中にあるmain.htmlのh1タグに「Hello World」を記述しておきます。
次に、「myproject」ディレクトリに戻ってmeteorコマンドを実行しましょう！
$ meteor
meteorコマンドを実行すると、自動的にサーバーが立ち上がりclientフォルダに配置されていたHTMLファイルなどが公開されます。
デフォルトの場合は http://localhost:3000 にアクセスするとWebページが表示されます。
「Sails」の使い方
この章では、Sailsフレームワークの基本的な使い方を見ていきましょう！
主に、フレームワークの特徴や簡単な使い方の導入部分までを学んでいきます。
「Sails」とは？
SailsフレームワークはWeb開発としては定番のMVCをサポートした開発効率を重視したフレームワークになります。
いくつかの特徴を列挙しておきます！
- Railsのような操作感で開発作業を進められる
- 自動生成されるREST APIを活用したWebアプリを手軽に作成できる
- デフォルトでWebSocketをサポートしたリアルタイムWebアプリ開発も可能
Sailsを導入すると、とにかく高速で効率の良い開発作業を進めていけるシステムを得ることができます。
「Sails」の導入方法
それでは、Sailsフレームワークの導入について見ていきましょう。Expressと同じくNode.jsの開発環境が整っていることが前提になります。
Windows / Mac / Linuxなど、各OS別のNode.js開発環境の整え方については次の記事でまとめているのでぜひ参考にしてみてください！
Node.js開発環境が整ったら、あとはnpmからSailsをインストールするだけです！
$ npm install sails -g
これで、Sailsフレームワークを利用したWeb開発の準備が整いました。
「HelloWorld」を出力してみよう！
次に、Sailsフレームワークを利用してHello Worldを表示してみましょう！
まずは「new」コマンドで新規のプロジェクトを作成します。
$ sails new myapp
この例では「myapp」という名称のプロジェクトを作成しています。
次に、「Web App」「Empty」どちらのテンプレートをベースにしますか？という質問が表示されるので今回は「Empty」を指定します。
すると、必要なリソースが自動的にインストールされます。
インストールが完了したら、「myapp」というディレクトリが作成されているのでその中にある「homepage.ejs」を編集しましょう！
$ cd myapp $ vim views/pages/homepage.ejs
これは初期画面の表示に使うテンプレートなのですが、この中のh1タグを「Hello World」に書き換えておきます。
最後に、「lift」コマンドでサーバーを起動します。
$ sails lift
デフォルトであればhttp://localhost:1337にブラウザでアクセスすると画面が表示されます。
まとめ
今回は、Node.jsで使われる3大フレームワークの特徴と導入を学習しました。
最後に、もう一度ポイントをおさらいしておきましょう！
- ExpressはNode.jsにおけるWeb開発のデファクトスタンダードである
- Meteorはフルスタックの全部入り開発フレームワークである
- SailsはRailsのような操作感で効率よくプログラムできる
上記内容を踏まえて、ぜひ自分でもプログラミングに取り入れて活用できるように頑張りましょう！
