Quantcast
Channel: Node.jsタグが付けられた新着記事 - Qiita
Viewing all articles
Browse latest Browse all 8902

Express 入門

$
0
0

公式ドキュメントもかなりシンプルでわかりやすいですが、自分用メモとして。
Express(日本語ドキュメント)

最小構成

最低限、これで動かせるよ!というコードです
さくっとWebサーバ立ててなにか試したい時に

インストール

$ mkdir myapp
$ cd myapp
$ npm init # entry point: app.js => 任意のファイル名$ npm install express

ディレクトリ構成

(root)
    ├ package.json
    ├ package-lock.json
    ├ app.js
    └ node_modules

コード

app.js
constexpress=require('express')constapp=express()app.get('/',(req,res)=>res.send('Hello World!'))app.listen(3000,()=>console.log('Example app listening on port 3000!'))

実行

$ node app.js
# go to http://localhost:3000/

http://localhost:3000/にアクセスすると「Hello World!」と表示されます

プロジェクトの雛形を作成する

Express プロジェクトの雛形を作成します
テンプレートエンジンの設定や、ディレクトリの作成もしてくれます
本格的にプロジェクトを作成する場合はこちらがおすすめ
詳しくはこちら

CLIインストール

雛形作成に必要なパッケージをグローバルにインストールします

$ npm install express-generator -g

PJ作成

$ express --view=pug myapp
# --view=pug => 任意のテンプレートエンジン(未指定の場合はjadeになります)# myapp => 任意のPJ名$ cd myapp
$ npm install

指定できるテンプレートエンジンやその他のオプションは↓で確認できます

$ express -h

実行

$ DEBUG=myapp:* npm start
# go to http://localhost:3000/

ルーティング

メソッド

app.METHOD(PATH, HANDLER)のような形で記述します
Express は、すべてのHTTPリクエストメソッドに対応するメソッドをサポートしています
メソッドの一覧はこちら

varexpress=require('express')varapp=express()app.get('/',function(req,res){res.send('GET request')})app.post('/',function(req,res){res.send('POST request')})

また、 all()を用いて、全てのメソッドのミドルウェア的なメソッドを定義することも可能です
next()でそれぞれのメソッドのハンドラに引き渡します

app.all('/',function(req,res){res.send('Any request')next()})

パス

ルートのパスには正規表現も利用可能です

app.get(/.*fly$/,function(req,res){res.send('/.*fly$/')})

パラメータ

:paramの形で記述します
req.paramsで取得できます

app.get('/users/:userId/books/:bookId',function(req,res){res.send(req.params)// => { "userId": "hoge", "bookId": "fuga" }})

レスポンス

よく使いそうなもの掲載
一覧はこちら

// さまざまなタイプのレスポンスを送信しますres.send('GET request')res.send('<p>some html</p>')res.send({some:'json'})// etc...// ビュー・テンプレートをレンダリングしますres.render('index')// JSON レスポンスを送信しますres.json({user:'tobi'})res.status(500).json({error:'message'})

メソッドをまとめて記述する

GET, POST などのメソッドをルートごとにまとめて記述することができます
すっきりしてよき!

app.route('/book').get(function(req,res){res.send('Get a random book')}).post(function(req,res){res.send('Add a book')}).put(function(req,res){res.send('Update the book')})

ルートハンドラをモジュール化する

ルートごとにファイルを分けて管理できます
大規模なアプリケーション向き

books.js
varexpress=require('express')varrouter=express.Router()router.get('/',function(req,res){res.send('GET Books')})router.get('/:bookId',function(req,res){res.send('GET Some Book')})module.exports=router
app.js
varbooks=require('./books')// ...app.use('/books',books)
$ curl http://localhost:3000/books # => GET Books$ curl http://localhost:3000/books/12 # => GET Some Book

静的ファイル

画像や CSS/JS など、静的ファイルをロードできるようにします
詳しくはこちら

app.js
// public ディレクトリに入っているファイルをロードできるようにするapp.use(express.static('public'));// http://localhost:3000/images/kitten.jpg// http://localhost:3000/css/style.css// http://localhost:3000/js/app.js// http://localhost:3000/hello.html

Viewing all articles
Browse latest Browse all 8902

Trending Articles