クモのようにコツコツと

フロントエンドエンジニア イイダリョウの技術ブログ。略称「クモコツ」

トップ > 開発環境 > Express事始め（インストール〜ハローワールドまで）

Express事始め（インストール〜ハローワールドまで）

開発環境 JS Node.js Express

Expressの続きです。前回はExpressとJSフレームワークの違い、Expressの位置付けなどについて掘り下げました。その後、しばらくNode.jsを触っていましたが今回から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版]

なお、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」）

※参考：Express の「Hello World」の例

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リクエストを指定されたパスにルーティングします。

※参考：Express 4.x - API リファレンス

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、オブジェクト、または配列を使用できます。

※参考：Express 4.x - API リファレンス

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/

おお！テキストが表示されている！ f:id:idr_zz:20200410071819j:plain

テキストを日本語にしてみる

res.send()のテキストを日本語にしてみる。

app.get('/', (req, res) => {
    res.send('こんにちは、えくすぷれす。');
});

Node.jsのときは文字化けになったんだよなー。（別途、文字コードの設定が必要だった）

※参考：【Node.js】ハローワールドの打ち替え（ポート番号、日本語化、HTMLタグ化） - クモのようにコツコツと

さてどうなるか。まず「Control + C」でサーバを閉じ。ターミナルには下記の表示が出る。

^C

再度、index.jsを実行！

node index.js

ブラウザを開くと… f:id:idr_zz:20200410072518j:plain おお！ちゃんと文字化けせずに日本語が表示されている！

デベロッパーツール の「Networkタブ」を開き「localhost」の「Response Headers」を見てみる。 f:id:idr_zz:20200410073112j:plain 「Content-Type」が「text/html; charset=utf-8」となっている。

最初から文字コードが「utf-8」になっている！

最後に

ということでExpressをインストールして、アプリを起動してブラウザでハローワールドを表示することに成功しました！やはりNode.jsよりはスッキリした記述という印象。最初から文字コードがUTF-8になっていて文字化けしないのも嬉しい。

次回は、HTMLを表示してみようかと思います。それではまた！

Node.js / Expressを習得するためにやったことまとめ
qiita.com

*1:自分の場合はフロントエンドが主戦場で、JSフレームワークの方が先に触っていたため、このアプローチが理解しやすかった

*2:シャア