Node.js - Express フレームワーク

こんにちは、将来のプログラマーたち！今日は、Node.jsとExpressフレームワークの世界に一緒に飛び込みます。あなたの近所の親切なコンピュータサイエンスの先生として、この冒険をガイドするのを楽しみにしています。コードを書いたことがない人も心配しないでください - 最初から一緒に進めていきます。

Expressとは？

まず、Expressが実際に何であるかについて話しましょう。家を建てることを考えてみてください。自分でレンガを作り、木材を切るから始めることもできますし、仕事を簡単にそして迅速にするための既製の材料を使うこともできます。Expressは、ウェブアプリケーションに対するそのような既製の材料のようなものです。ウェブやモバイルアプリケーションに強力な機能セットを提供するフレームワークで、Node.jsでのウェブアプリケーションの構築をより簡単かつ迅速にします。

Expressのインストール

まず、コンピュータにNode.jsがインストールされていることを確認してください。インストールされていない場合は、公式のNode.jsウェブサイトにアクセスしてダウンロードしてください。

Node.jsがインストールされたら、ターミナル（Windowsの場合はコマンドプロンプト）を開き、以下のコマンドを入力します：

npm install express

このコマンドは、npm（Nodeパッケージマネージャー）を使用してExpressをインストールします。npmは、私たちのNode.jsプロジェクトで使用できるさまざまな便利なツール（パッケージ）を含む魔法の工具箱のようなものです。

Hello World サンプル

Expressをインストールしたので、まずは最初のExpressアプリケーションを作成しましょう。伝統的な「Hello, World!」サンプルから始めます。

新しいファイルapp.jsを作成し、以下のコードを入力します：

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

app.get('/', (req, res) => {
res.send('Hello, World!');
});

app.listen(port, () => {
console.log(`Example app listening at http://localhost:${port}`);
});

これを分解すると：

1. Expressモジュールをインポートし、Expressアプリケーションを作成します。
2. ポート番号（この場合は3000）を定義します。
3. ルートのルート（'/'）にHTTP GETリクエストをルーティングし、「Hello, World!」を返信するコールバック関数を設定します。
4. アプリケーションが指定されたポートでリスニングするように指示します。

このアプリケーションを実行するには、ターミナルに移動し、app.jsが含まれるディレクトリにナビゲートし、以下を実行します：

node app.js

今、ブラウザを開き、http://localhost:3000にアクセスすると、「Hello, World!」が表示されます。おめでとうございます！あなたは刚刚最初のExpressアプリケーションを作成しました！

アプリケーションオブジェクト

前の例で、私たちはExpressアプリケーションオブジェクトを作成しました：

const app = express();

このappオブジェクトは、Expressを使用する方法の中心です。HTTPリクエストのルーティング、ミドルウェアの設定、HTMLビューのレンダリング、テンプレートエンジンの登録など、さまざまなメソッドを持っています。

以下は、appオブジェクトで最もよく使用されるメソッドのいくつかです：

メソッド	説明
app.get()	指定されたパスにHTTP GETリクエストをルーティングし、指定されたコールバック関数を実行します
app.post()	指定されたパスにHTTP POSTリクエストをルーティングし、指定されたコールバック関数を実行します
app.use()	指定されたパスにミドルウェア関数または関数群をマウントします
app.listen()	指定されたホストとポートで接続をリスニングします

バシックなルーティング

ルーティングとは、アプリケーションが特定のエンドポイント（URI、またはパス）と特定のHTTPリクエストメソッド（GET、POSTなど）にどのように応答するかを決定することです。

アプリケーションにさらにルートを追加しましょう：

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

app.get('/', (req, res) => {
res.send('Hello, World!');
});

app.get('/about', (req, res) => {
res.send('This is the about page');
});

app.post('/submit', (req, res) => {
res.send('Got a POST request');
});

app.listen(port, () => {
console.log(`Example app listening at http://localhost:${port}`);
});

この例では、以下の新しいルートを追加しました：

• '/about'のGETルートで、「This is the about page」を返信します
• '/submit'のPOSTルートで、「Got a POST request」を返信します

POSTルートをテストするには、Postmanなどのツールが必要です。または、このルートに提交するHTMLフォームを作成することもできます。

ステティックファイルの提供

しばしば、画像、CSSファイル、JavaScriptファイルなどのステティックファイルを提供したい場合があります。Expressは、この目的のための内置ミドルウェア関数express.staticを提供しています。

プロジェクトフォルダにpublicというディレクトリを作成し、画像ファイル（例えばcat.jpg）をその中に入れます。そして、app.jsを以下のように修正します：

const express = require('express');
const path = require('path');
const app = express();
const port = 3000;

app.use(express.static('public'));

app.get('/', (req, res) => {
res.send('Hello, World!');
});

app.get('/cat', (req, res) => {
res.sendFile(path.join(__dirname, 'public', 'cat.jpg'));
});

app.listen(port, () => {
console.log(`Example app listening at http://localhost:${port}`);
});

この例では、以下の2つのことを行いました：

1. app.use(express.static('public'))を使用して、'public'ディレクトリからステティックファイルを提供します。
2. 新しいルート'/cat'を追加し、cat.jpgファイルを返信します。

今、あなたは直接http://localhost:3000/cat.jpgで猫の画像にアクセスするか、定義した'/cat'ルートを通じてアクセスできます。

そして、ここまでです！Expressの基本からステティックファイルの提供までをカバーしました。コードを学ぶことは新しい言語を学ぶのと同じで、練習と忍耐が必要です。すぐにすべてを理解できない場合はがっかりしないでください。実験を続け、構築を続け、最も重要なのは、楽しむことを忘れないでください！

次のレッスンでは、Expressのミドルウェアとより高度なルーティング技術に深く掘り下げます。それまでは、お楽しみに！

Credits: Image by storyset