Express.js の基礎: 初心者ガイド - Node.js チュートリアルシリーズ

Express.js の基礎: 初心者ガイド - Node.js チュートリアルシリーズ - パート 10

Barbara Streisand

リリース： 2024-09-27 06:33:02

オリジナル

677 人が閲覧しました

Express.js Basics: A Beginner

紹介:

こんにちは！ Node.js を初めて使用する場合は、Web サーバーと API を構築するための軽量、高速、柔軟なフレームワークである Express.js について聞いたことがあるでしょう。このガイドでは、Express の基本を説明し、いかに簡単に始めることができるかを示します。

準備はできましたか？飛び込んでみましょう!

1. Express をインストールしています

まず最初に、Express をインストールしましょう。マシン上に Node.js と npm (ノードのパッケージマネージャー) がセットアップされていることを確認してください。準備ができたら、ターミナルを開いて次のコマンドを実行します:

npm install express

ログイン後にコピー

ドーン！これで、Express がプロジェクトにインストールされました。それはとても簡単です。

2.最初の Express サーバーを作成する

さあ、何かを作りましょう!ここでは、リクエストをリッスンし、誰かがサイトにアクセスすると「Hello World」で応答する、非常にシンプルな Express サーバーを作成する方法を説明します。

const express = require('express');  // Import Express
const app = express();  // Initialize your Express app

app.get('/', (req, res) => {  // Set up a route for GET requests to the root URL
  res.send('Hello World');  // Send a response
});

app.listen(3000, () => {  // Tell the app to listen on port 3000
  console.log('Server is running on port 3000');
});

ログイン後にコピー

これをノード app.js で実行し、ブラウザで http://localhost:3000 を開くと、「Hello World」が表示されます。サーバーを立ち上げて実行するのはとても簡単です!

3.ミドルウェアとは何ですか?

「ミドルウェア」という言葉をよく耳にしたことがあるかもしれません。簡単に言うと、ミドルウェアはリクエストの受信とレスポンスの送信の間に実行される単なる関数です。

簡単な例を見てみましょう:

app.use((req, res, next) => {
  console.log('Request received');
  next();  // Moves to the next middleware or route
});

ログイン後にコピー

この場合、リクエストが行われるたびに、「リクエストを受信しました」というログがコンソールに記録されます。 next() 関数は、リクエストを次のミドルウェア関数またはルートハンドラーに続行できるようにするため、ここでは非常に重要です。これがないとリクエストは停止し、応答は送信されません。

ミドルウェアがどのように機能するかについて詳しく知りたい場合は、「Node.js を使用した Express.js のミドルウェアについて」を参照してください。ルーターレベルのミドルウェアやエラー処理ミドルウェアなど、さまざまなタイプのミドルウェアをカバーしています。

4.ルーティング: アプリのバックボーン

ルーティングとは、アプリ内でさまざまな URL を設定する方法です。ルート (/) パスの基本的なルートはすでに見ましたが、POST などの他の HTTP メソッドを処理して、フォームの送信やデータの更新を処理することもできます。

app.post('/submit', (req, res) => {
  res.send('Form submitted!');
});

ログイン後にコピー

これで、ユーザーがフォームを /submit に送信すると、このルートがそれを処理します。ルートは必要な数だけ作成できます。Express を使用すると簡単です!

5.静的ファイルの提供

画像、CSS ファイル、その他の静的アセットを提供したい場合はどうすればよいですか? Express がサポートします!これらのファイルを public などのフォルダーにドロップし、Express にファイルの場所を指示するだけです。

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

ログイン後にコピー

これで、パブリックフォルダー内のファイル (style.css や画像など) にブラウザーから直接アクセスできるようになります。

6. JSON データの処理

最新のアプリでは、多くの場合、フォームまたは API リクエストからの JSON データを処理する必要があります。 Express を使用すると、これが非常に簡単になります:

app.use(express.json());  // Add this middleware to parse JSON

app.post('/data', (req, res) => {
  console.log(req.body);  // Access the parsed JSON data
  res.send('Data received!');
});

ログイン後にコピー

JSON データを含む POST リクエストが /data に送信されると、Express は自動的に JSON を解析し、req.body で JSON にアクセスできるようになります。シンプルですね?

すべてをまとめます

これで、Express.js の簡単で簡単な入門が完了しました。わずか数行のコードで、次の方法を学習できます。

Express をインストールします。
基本的なサーバーをセットアップします。
ミドルウェアを使用する
さまざまなルートを処理します。
静的ファイルを提供します。
JSON データを操作します。

Express は、Web サーバーと API の構築を楽しく簡単にする強力なフレームワークです。慣れてきたら、ルーター、エラー処理、さらにはデータベースとの統合など、より高度な機能を試し始めることができます。

エクスプレス旅行のためのプロのヒント

nodemon を使用します: 変更を加えると、サーバーが自動的に再起動されます。 npm install -g nodemon を実行し、node app.js の代わりに nodemon app.js を使用するだけです。
アプリを構造化する: プロジェクトが成長するにつれて、ルートとコントローラーを別のファイルに整理することが必要になります。これにより、コードがクリーンで管理しやすくなります。

このガイドが Express を始めるのに役立つことを願っています。実験を続ければ、いつの間にかプロのような素晴らしい Web アプリを構築できるようになるでしょう。

コーディングを楽しんでください!

以上がExpress.js の基礎: 初心者ガイド - Node.js チュートリアルシリーズ - パート 10の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。