Expressの続きです。前回はExpressとJSフレームワークの違い、Expressの位置付けなどについて掘り下げました。その後、しばらくNode.jsを触っていましたが今回からExpressを触っていきます!まずはインストール〜ハローワールドまで。それでは行きましょう!
【目次】
- これまでのあらすじ(Express実践編への道)
- Expressをインストール
- Expressアプリのコードを書く
- Expressの独自メソッド
- Expressアプリ実行
- テキストを日本語にしてみる
- 最後に
前回記事
※参考:ExpressとJSフレームワーク(React、Vue、Angularなど)との関係について調べたこと - クモのようにコツコツと
Node.js / Expressを習得するためにやったことまとめ
qiita.com
これまでのあらすじ(Express実践編への道)
このブログのマイテーマの中に「JS de バックエンド!」シリーズがある。こちらにまとめている。
※参考:Node.js / Expressを習得するためにやったことまとめ(随時更新) - Qiita
前回まではNode.jsで作るWebサーバを体験してきた。
※参考:【Node.js】ルーティング設定で複数ページを表示する - クモのようにコツコツと
Node.jsによるバックエンドは思ったよりも手間暇がかかる印象。このままNode.jsを掘り下げていくのも良いが、同じことがExpressで簡単にできるのであれば、そちらも知って比較したい。ということで、今回からはExpressを触ってみる!
Expressについては、以前は名前だけは知っていたが何ができる物なのかもわかっていなかった。こちらの記事で「JSフレームワークとの違い」という観点で色々調べた。*1
※参考:ExpressとJSフレームワーク(React、Vue、Angularなど)との関係について調べたこと - クモのようにコツコツと
Rest APIの中で、バックエンド側のExpressとフロントエンド側のJSフレームワーク(React、Vue、Angularなど)がデータのやりとりをする、という位置付けなわけだ。
Rest APIについてもこちらの記事で色々調べた。
※参考:REST APIとは何かを調べまくったらようやくイメージができてきたのでまとめた - クモのようにコツコツと
その後、Node.jsを触ることでバックエンド側がどんな動きをしているのかも実際に体験し、イメージができてきた。次はExpressを触ることでさらに理解を深めたい!
Expressをインストール
という事で、早速Expressをインストールする。
前回まで参考にしてきた掌田さんの「Node.js超入門」、こちらの本も後半からExpress編になる!そのため、引き続きこれを参考に進める。
![Node.js超入門[第2版] Node.js超入門[第2版]](https://m.media-amazon.com/images/I/513Ruzs3LjL._SL160_.jpg)
- 作者:津耶乃, 掌田
- 発売日: 2018/08/25
- メディア: 単行本
なお、node.jsとnpmは既に入っている前提。-v
コマンドでバージョン番号が出れば入っている。
node -v npm -v
まずはExpressをインストールするフォルダを作る。「express_test」という名前にしてみた。
ターミナルを開きCDコマンドで「express_test」フォルダに移動する。
cd /(フォルダのパス)/express_test
npmのpackage.jsonを作成する。
npm init -y
完了すると「package.json」ファイルが作られる。
いよいよExpressのインストール!下記のコマンド
npm install express --save
成功するとpackage.jsonに追記される!
"dependencies": { "express": "^4.17.1" }
Express公式サイト(インストール解説)
※参考:Express のインストール
Expressアプリのコードを書く
次に「express_test」で「index.js」というファイルを作る。(公式サイトでは「app.js」だがnpmのインストール時に全て「yes(-y
)にした場合は「index.js」)
index.jsにExpressアプリのコードを書く。
const express = require('express'); const app = express(); app.get('/', (req, res) => { res.send('Hello Express!!'); }); app.listen(3000, () => { console.log('Start server port:3000'); });
- 変数
express
でexpress
を読み込む - 変数
app
でexpress()
を実行 app
のget()
メソッドを実行。第一引数はパスで/
、第二引数は無名関数で引数は左からreq
、res
。
無名関数の中身:res
のsend()
メソッドを実行。引数はテキストで「Hello Express!!」app
のlisten()
メソッドを実行。第一引数はポート番号で3000
、第二引数は無名関数で引数はなし。
無名関数の中身:Node.jsのコンソールに「Start server port:3000」を表示する
ふむふむ。読めるぞ!私にもコードが読める!*2
これはNode.jsで初めてWebサーバを立ててハローワールドした時と同じような内容だと読み取れる!
※参考:【Node.js】Webサーバを立ててハローワールドを表示する - クモのようにコツコツと
app.get()
の部分でExpressアプリ(サーバ)を構築してapp.listen()
の部分でサーバを待ち受け状態にすると。
やはりNode.jsに比べて記述量は少なくスッキリしている。
Expressの独自メソッド
公式サイトでExpress独自のメソッドについて調べる。
app.get()
まずはapp.get()
。
app.get(path, callback [, callback ...])
第一引数はパス、第二引数はコールバック関数
Routes HTTP GET requests to the specified path with the specified callback functions.
指定されたコールバック関数を使用して、HTTP GETリクエストを指定されたパスにルーティングします。
res.send()
次にres.send()
。app.get()
の中に書いたもの。
res.send([body])
引数はbodyと。表示する本体、みたいな意味か。
Sends the HTTP response.
The body parameter can be a Buffer object, a String, an object, or an Array.
HTTP応答を送信します。 bodyパラメータには、Bufferオブジェクト、String、オブジェクト、または配列を使用できます。
app.listen()
最後、app.listen()
。
app.listen(path, [callback])
第一引数はパス、第二引数はコールバック関数だが、今回は引数なし。
Starts a UNIX socket and listens for connections on the given path. This method is identical to Node’s http.Server.listen().
UNIXソケットを開始し、指定されたパスで接続を待機します。 このメソッドは、Nodeのhttp.Server.listen()と同じです。
Node.jsのhttp.Server.listen()
と同じね。
「UNIXソケット」ってなんぞ?
プロセス間のデータのやり取りを行う仕組みの一つ
「プロセス」とは?
プロセス間通信(IPC、英: interprocess communication)はコンピュータの動作において、複数プロセス(の複数スレッド)間でデータをやりとりする仕組み。通信プロセスは、同一コンピュータ内で帰結するローカル、ネットワーク接続された別のコンピュータと相互にリモート、などのほかに多様な観点で分類され、スレッド間の通信帯域幅とレイテンシや扱うデータの種類も多種多様である
※参考:「UNIX ドメインソケット」と「ソケット」について比較する - Qiita
ふむふむ。同一コンピュータ内(ローカル)やネットワークで繋がった別のコンピュータとの間で行われる複数のプロセス(スレッド)間のデータ通信のことか。
Expressアプリ実行
ではいよいよExpressアプリを実行してみる。ちゃんと動くかな(ドキドキ…)
nodeでindex.js
を実行!
node index.js
ターミナルにログが返ってきた!
Start server port:3000
localhostをブラウザで開いてみる。
http://localhost:3000/
おお!テキストが表示されている!
テキストを日本語にしてみる
res.send()
のテキストを日本語にしてみる。
app.get('/', (req, res) => { res.send('こんにちは、えくすぷれす。'); });
Node.jsのときは文字化けになったんだよなー。(別途、文字コードの設定が必要だった)
※参考:【Node.js】ハローワールドの打ち替え(ポート番号、日本語化、HTMLタグ化) - クモのようにコツコツと
さてどうなるか。まず「Control + C」でサーバを閉じ。ターミナルには下記の表示が出る。
^C
再度、index.js
を実行!
node index.js
ブラウザを開くと…
おお!ちゃんと文字化けせずに日本語が表示されている!
デベロッパーツール の「Networkタブ」を開き「localhost」の「Response Headers」を見てみる。
「Content-Type」が「text/html; charset=utf-8」となっている。
最初から文字コードが「utf-8」になっている!
最後に
ということでExpressをインストールして、アプリを起動してブラウザでハローワールドを表示することに成功しました!やはりNode.jsよりはスッキリした記述という印象。最初から文字コードがUTF-8になっていて文字化けしないのも嬉しい。
次回は、HTMLを表示してみようかと思います。それではまた!
Node.js / Expressを習得するためにやったことまとめ
qiita.com