「労働者が自分の仕事をうまくやりたいなら、まず自分の道具を研ぎ澄まさなければなりません。」 - 孔子、「論語。陸霊公」
表紙 > プログラミング > Express.js の基礎: 初心者ガイド - Node.js チュートリアル シリーズ - パート 10

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

2024 年 11 月 6 日に公開
ブラウズ:286

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 アプリを構築できるようになるでしょう。

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

リリースステートメント この記事は次の場所に転載されています: https://dev.to/hakimmohamed/expressjs-basics-a-beginners-guide-nodejs-tutorial-series-part-10-4m49?1 侵害がある場合は、study_golang@163 までご連絡ください。 .comを削除してください
最新のチュートリアル もっと>

免責事項: 提供されるすべてのリソースの一部はインターネットからのものです。お客様の著作権またはその他の権利および利益の侵害がある場合は、詳細な理由を説明し、著作権または権利および利益の証拠を提出して、電子メール [email protected] に送信してください。 できるだけ早く対応させていただきます。

Copyright© 2022 湘ICP备2022001581号-3