はじめに
Expressを使い始めた時、特に以下の点で悩んでいました。
-
send, use, get, postなどの使い方がわからない
どのメソッドをどのタイミングで使うべきかが全然理解できませんでした。 -
その構文をなぜ書くのかがわからない
初心者がコードを見てもその意味がピンときませんでした。
これらを解決するために：
バックエンドの処理とユーザーの動作を結びつけて考えると理解しやすかったので、自分の備忘録として記載しています。
※Udemyや独学で勉強している方の基礎固めになれば幸いです。
独学初心者のため、考え方に相違がある場合はぜひご指摘いただけると幸いです
この記事の内容
- Expressとは
- ルーティングの基本
（別記事）動的・静的とは？
（投稿予定）ターミナルがエラーだらけの解決法
2-1. 環境構築（コードを書く前の準備）
2-2. コードの記述と実装 - PATHパラメータの取得
- GETパラメータの取得
- POSTリクエストの処理
- 実践：簡単なAPIを作る
- まとめ
長文となるため、目次ごとに投稿していきます
▼ 今回の記事
- Expressとは
- ルーティングの基本
1. Expressとは
Expressは、Node.jsで動く軽量なWebフレームワーク。ブラウザ（ユーザー操作）のリクエストを処理するサーバーを、手軽に作れます。
まずは、ルーティングの基本について勉強しました。
2. ルーティングの基本
ルーティングは「どのURLにアクセスしたら、どの処理をするか」を決める仕組みで、ユーザーのリクエストに対して適切なレスポンスを返します。
ルーティングの流れはこのような感じです：
| ステップ | 操作内容 | 説明 |
|---|---|---|
| ① ユーザーの操作 | ユーザーがlocalhost:3000/aboutにアクセス | ユーザーがURLにアクセス |
| ② サーバーの処理 | app.get("/about") でリクエストを処理 | サーバーがリクエストを受けて「About Page」を返す |
| ③ ゴール | ブラウザに「About Page」が表示される | ユーザーがページを確認 |
このステップをもとに、実際にコードを書いていきます
（別記事）動的・静的とは？
自分がこの時点で？？？だったのが、ユーザーが直接URLにaboutを入力することなんてないのではと、ほとんどはaboutのボタンなりをクリックしてページを表示するのが通常ではと思いました。
ルーティングには動的・静的の2種類があることを知り、今回は静的ルーティングを扱います。
▼動的と静的の違いについて、勉強メモとしてまとめました。
動的・静的とは？
2-1. 環境構築（コードを書く前の準備）
まずは、必要な準備をして、Expressを使える状態にします。
① npmの初期化
npm init -y //package.jsonを生成
② Expressのインストール
npm install express //Expressをインストール
③ディレクトリの構成
my-express-root
├── index.js //Express サーバーファイル
├── package.json //Node.js プロジェクト設定
index.jsは個人で作成します。作成できたら次はindex.js内にコードを書いていきます！
2-2. コードの記述と実装
index.js
//①Expressをインストールして使用
const express = require("express"); //Expressをロード
const app = express(); //アプリケーションを作成
// ② ルーティング（GETリクエストの処理）
// `/` にアクセスしたときの処理
app.get("/about", (req, res)=>{
res.send("aboutページ一覧です");
});
//③サーバーを起動（ポート3000で待機）
app.listen(3000, () => {
console.log("Server is running on port 3000");
});
次に実装するためにターミナルで以下のコマンドを実行して、実装したいフォルダに移動します。
cd ~/Desktop/my-express-root
移動できたら、nodemon を使って index.js のサーバーを起動します。
nodemonを使うと、コードを変更するたびに自動でサーバーが再起動されます。
nodemonをインストールされていない場合は、以下のコマンドでインストールしてください。
npm install -g nodemon // nodemonをグローバルにインストール
インストール後、ターミナルで以下のコマンドを実行してサーバーを起動します。
nodemon index.js
localhost:3000でサーバーを立ち上げるようコードを書いているので、検索でlocalhost:3000/aboutを実行します。
結果が「aboutページ一覧です」と表示されると成功です！
補足
ルーティングの静的には express.static() を使う場合があります。
👉 express.static() を使う場合 → フォルダ内のHTMLファイルを 自動で提供（複数の静的ファイルを扱うとき便利）
👉 express.static() を使わない場合 → res.send() や res.sendFile() で 個別にレスポンスを制御（特定のページだけ返したいとき）
ご一読いただきありがとうございました！