Expressとは
Expressは、Node.jsのフレームワークで、以下の特徴があります。
・セキュリティ性能が高い。
・無数のHTTPに関連するメソッドとミドルウェアを使用できる。
・セキュリティ性能の高いAPIがすばやく簡単に作成できる。
・Node.jsの機能を分かりづらくすることがない。
Express公式サイト
英語翻訳なので分かりづらいと思いますが、Node.jsのアプリが「簡単に、素早く、安全に」作れるという認識で大丈夫だと思います。
Expressでサーバーを起動する。
公式サイトを見れば、わかるのですが、以下のようにインストールをします。
まずはアプリを保存するディレクトリを作成します。
//myappというディレクトリを作成
$ mkdir myapp
//myappディレクトリに移動
$ cd myapp
続いて、package.jsonファイルを作成を作成します。
//package.jsonファイルを作成
$ npm init
質問にはすべてenterキーを押して大丈夫です。
続いて以下のようにexpressをインストールします。
--saveを使うことで、package.jsonにexpressのバージョン情報などが書き込まれます。
//expressのインストール
$ npm install express --save
これでexpressのインストールが完了しました。
それでは、以下のようにexpressの基準となるapp.jsに移動します。
$ cd app.js
続いて、app.jsでサーバーを起動するための記述をしていきます。
//expressモジュールを使えるように設定
const express = require('express')
//expressモジュールを利用しアプリケーションオブジェクトappを作成
const app = express()
// HTTPgetメソッドでアクセスしたら、'Hello World!'と表示される設定。
app.get('/', (req, res) => {
res.send('Hello World!')
})
//サーバーを起動したら、リクエストを8000番ポートで待ち受ける設定。
app.listen(8000, () => console.log('Example app listening on port 8000!'))
それでは以下のようにサーバーを起動します。
$ node app.js
> Example app listening on port 8000!
サーバーを起動したら、http://localhost:8000/ にアクセスしてみてください。
Expressジェネレーターを使う。
以上のようにサーバーを起動しても良いのですが、expressには、ジェネレーターというひな形作成モジュールがあります。ここで言う、ひな形とは、アプリ作成に必要な機能がセットになったものを指します。
それでは、ジェネレーターを使っていきます。以下のように、express-generatorをグローバルインストールします。
$ npm install express-generator -g
インストールが完了したら、下記コマンドでアプリケーションのひな形を作成します。
--view=pugで、views内のファイルにpugというテンプレートエンジンを使う設定になります。
$ express --view=pug myapp2
すると、 以下のようにコンソールに表示されます。
これはひな形が自動的に作られたことを意味します。
create : myapp
create : myapp/package.json
create : myapp/app.js
create : myapp/public
create : myapp/public/javascripts
create : myapp/public/images
create : myapp/routes
create : myapp/routes/index.js
create : myapp/routes/users.js
create : myapp/public/stylesheets
create : myapp/public/stylesheets/style.css
create : myapp/views
create : myapp/views/index.pug
create : myapp/views/layout.pug
create : myapp/views/error.pug
create : myapp/bin
create : myapp/bin/www
続いて、myappに移動し、必要な依存モジュールをインストールします。
$ cd myapp
$ npm install
これでひな形が完成しました。
サーバーを起動していきましょう。
$ DEBUG=myapp:* PORT=8000 npm start
このコマンドは、
DEBUGという環境変数にmyapp:*という値を設定し、myapp:とついたログが表示されるようにしています。
PORTという環境変数に8000という値を設定し、8000番ポートでサーバーが待ち受けるようにしています。
npm startは、サーバーを起動するという意味になります。
サーバーを起動したら、http://localhost:8000/ にアクセスしてみてください。
Express Welcome to Expressと表示されたら成功です。
続いて、自動生成されたひな形を見ていきます。
.
├── app.js
├── bin
│ └── www
├── package.json
├── public
│ ├── images
│ ├── javascripts
│ └── stylesheets
│ └── style.css
├── routes
│ ├── index.js
│ └── users.js
└── views
├── error.pug
├── index.pug
└── layout.pug
app.jsはサーバーなどを起動する基本ファイルです。
bin/www は、サーバー起動などの情報が書き込まれています。
publicディレクトリには、画像や、クライアントJavaScript、CSSなどの静的ファイルが格納されています。
routesディレクトリには、ルーティングを行うファイルが格納されます。
viewsディレクトリには、pugテンプレートファイルが格納されています。主にhtmlのような画面上での役割を果たします。
次に簡単なルーティングを見ていきます。
ルーティングとは、クライアントの要求に応じて処理を振り分けることです。
例えば、/indexにGETメソッドで要求があった際には以下のようにします。
app.get('/index', (req, res) => {
res.write('Hello World!');
});
以上は以下のような構造になっています。
app.METHOD(PATH, HANDLER)
app は、expressのアプリケーションオブジェクトのインスタンスです。
アプリケーションオブジェクトのインスタンスは、use関数を使うことで、ミドルウェアやルーティングを使うことができます。
METHOD は、HTTP要求メソッド です。
PATH は、サーバー上のパスです。
HANDLER は、ルートが一致したときに実行される関数です。
最後に、静的ファイルの取り扱い方についてです。
image、CSS、JavaScriptなどの静的ファイルを利用するには、Expressに標準実装されているexpress.staticミドルウェア関数を使用します。
app.use(express.static('public'));
これで、/public以下のファイルをブラウザから見ることができるようになります。
http://localhost:8000/css/style.css にアクセスしてみてください。
style.cssの中身が表示されるはずです。
おまけ ミドルウェアの使い方
ミドルウェアは、標準装備かサードパーティ(helmetなど) 製のものがあり
、Expressの機能を拡張してくれるモジュールのことを指します。
helmetだったら、以下のように使います。
var helmet = require('helmet');
app.use(helmet());
参考文献:Express公式
コメント