express.jsでHello Worldを表示する

本家サイト（express.js）のチュートリアルを参考に、express.jsでHellor Worldを表示します。

プロジェクトフォルダをつくってその中で作業します。

フォルダ名は、なんでもOKです。
私は日付を入れるのが好きなので、20221206expressとしています。

Node.jsが必要なので、ない人はインストールしておいてください。

それから、

npm init -y

で、package.json ファイルを作ります。
-y オプションを入れておくとエンターキーを連打する手間が省けます。

次にexpressをインストールします。

npm install express

VSCodeのターミナル欄ではこんな感じです。私はGit Bash使ってます。

express のインストールが完了したら、index.jsファイルを用意します。
現在のファイル構成はこんな感じです。

node_modulesは、その名前の通りNodeのモジュールが入っています。

index.jsを用意したら、中身を書き込んでいきましょう。

まず、1行目でexpressを読み込んで、2行目でexpressアプリケーションを用意します。
ついでにportも指定しておきます。

const express = require("express");
const app = express();
const port = 3000;

その下に、GETリクエストに対してどういう動きをするかを書いていきます。

app.get("/", (req, res) => {
  res.send("Hello World! こんにちは！");
});

これは、”/”すなわちルートディレクトリにアクセスしたら、”Hello World! こんにちは！”というテキストが送られるということを書いています。

その下に、コネクションに対する設定を書いていきます。

app.listen(port, () => {
  console.log(`Listening on port ${port}`);
});

portは、上のほうで書いた3000が適用されます。
ホストのport 3000にアクセスしたら、ターミナルに「Listening on port 3000」と流れるわけです。

index.jsを保存したら、ローカルで走らせましょう。

ターミナルに、

node index.js

と打ち込んでみましょう。
すると、こんな感じになります。

これで動いている状態なので、ローカルホストにアクセスしてみましょう
http://localhost:3000/ をブラウザで開きます。

多少味気ないですが、index.jsに書いたテキストが確かに表示されていますね。

最後に全体のコードを載せておきます。

index.jsです。

const express = require("express");
const app = express();
const port = 3000;

app.get("/", (req, res) => {
  res.send("Hello World! こんにちは！");
});

app.listen(port, () => {
  console.log(`Listening on port ${port}`);
});

express.jsでのHello Worldは、こんな感じです。