こんにちは、ライターのマサトです！今回は、nod.jsで簡単にWebアプリを開発することができるフレームワークExpressについて学習をしていきましょう！この記事では、
- Expressとは？
- Expressの使い方
- Expressのルーティング
という基本的な内容から、などの応用的な使い方に関しても解説していきます。この記事で、Expressをしっかり学習して自分のスキルアップを目指しましょう！
Expressとは？
まずは、Expressについて基本的な知識から身に付けていきましょう！Expressは、複雑なWebアプリを効率よく開発できるようにさまざまなモジュールが統合されたフレームワークになります。
特に、独自のサーバー開発やGET/POST通信などを簡単な記述で実現できるフットワークの軽さは魅力的です。本記事では、Expressの基本から応用まで学べるように解説するのでぜひ参考にしてみてください！
「Express」の使い方
この章では、Expressの基本的な使い方について見ていきましょう！主に、導入から簡単なサーバー構築までの手法を学んでいきます。
Expressの導入方法
まずは、Expressを導入する方法から見ていきましょう！Expressはそれ自体が実行コマンドを持っているので、次のようにグローバルにインストールしましょう！
$ npm -g install express
この例のように、「-g」オプションを付与することでグローバルにインストールすることが可能です。これでexpressコマンドが利用できるようになったので、次のように実行できます！
$ express testapp
この場合testappというプロジェクトが作成されて、Webアプリを構築するために必要なファイルも自動生成されるので便利です。
Expressでサーバーを構築する方法
今度は、簡単なサーバーを構築してみましょう！まずは、Expressを利用するための準備を次のように記述します。
var express = require('express');
var app = express();
require()でExpressを利用できるようにして、express()を実行することでアプリケーションオブジェクトをapp変数に格納します。このアプリケーションオブジェクトには、Webアプリを構築するうえで必要となる変数やメソッドなどが保持されます。
サーバーを構築するのは簡単でlisten()メソッドを次のように記述します。
var listener = app.listen(3000, function() {
console.log(listener.address().port);
});
listen()メソッドの第1引数にポート番号を設定して、第2引数にコールバック関数を指定します。address().portで、現在のポート番号を取得できるのでコンソールログに出力しておくと良いでしょう。
ただし、このままだとサーバーが起動しているだけなので、後述するルーティングを実装する必要があります。ちなみに、Expressを使わずに一般的なhttpモジュールでサーバーを構築する方法は次の記事で解説しているので参考にしてみてください！
「Express」のルーティング
この章では、Expressを使ったルーティング手法について見ていきましょう！主に、GET / POSTリクエストの処理方法について学んでいきます。
GETリクエストを処理する方法
まずは、一般的なGETリクエストの処理方法について見ていきましょう！基本的にはget()メソッド1つでさまざまなGETリクエスト処理を行えるように工夫されています。
例えば、Webサイトのトップページを開いた時に何らかのメッセージを表示するには次のように記述します。
app.get('/', function (req, res) {
res.send('ページが表示されました！');
});
get()の第1引数に「/」を指定することでWebサイトのトップページを開いた時のリクエスト処理にすることができます。内容的には、コールバック関数内でレスポンス「res」にsend()メソッドで文字列を送り、ブラウザ上に表示するという意味になります。
ただし、一般的には文字列ではなくHTMLファイルを表示するはずなので、次のように記述することになるでしょう。
app.use(express.static('public'));
app.get('/', function(request, response) {
response.sendFile(__dirname + '/views/index.html');
});
まずは、use()メソッドで静的なファイルを格納しているディレクトリstatic()を設定しています。次に、レスポンスとしてsendFile()メソッドで「index.html」を指定することでブラウザにトップページが表示されるわけです。
もちろん、「/user」「/blog」などのようにディレクトリを変えれば、その用途に合わせたGETリクエスト処理が可能です。
POSTリクエストを処理する方法
今度はPOSTリクエストの処理を見ていきましょう！一般的に、POSTリクエストはブラウザ側から例えばフォームなどの情報を送信する場合によく使われます。そこで、次のようなフォームがあるとします。
これは単純な入力ボックスと送信ボタンだけのフォームですね。methodをPOSTに設定することでPOST通信になるので、対応するサーバー側の処理をExpressで構築してみましょう。
ただし、データを取得するにはbody-parserモジュールが必要なので、次のように記述しておきます。
var bodyParser = require('body-parser');
app.use(bodyParser.urlencoded({ extended: false }));
app.use(bodyParser.json());
require()でモジュールを読み込んでおき、use()を使ってJSON形式のデータとして取得するように設定しておきます。そして、POSTリクエスト処理を次のように記述します。
app.post('/', function(request, response) {
console.log(request.body);
});
GETリクエスト処理と同様に、post()メソッドを使って処理を記述すれば良いわけです。request.bodyにはフォームから送信されたデータがJSON形式で格納されています。
まとめ
今回は、Node.jsで簡単にWebアプリを開発できるフレームワークExpressについて学習をしました！最後に、もう一度ポイントをおさらいしておきましょう！
- listen()メソッドで簡単にサーバーを構築することができる
- get()メソッドでGETリクエスト処理を記述する
- post()メソッドでPOSTリクエスト処理を記述する
上記内容を踏まえて、ぜひ自分でもプログラミングに取り入れて活用できるように頑張りましょう！
