ホームページ > ウェブフロントエンド > jsチュートリアル > Node.js を使用した最初のバックエンド アプリケーション

Node.js を使用した最初のバックエンド アプリケーション

Barbara Streisand
リリース: 2024-10-11 10:28:02
オリジナル
779 人が閲覧しました

Web 開発を学習していて、Node.js プロジェクトの開始方法について混乱していませんか?心配しないでください、私はあなたを持っています!わずか 5 つのステップで、Node.js と Express.js を使用して最初のバックエンドを作成する方法を説明します。

?️5 つの重要なステップ:

  • ステップ 1: プロジェクトをセットアップする
  • ステップ 2: フォルダーを整理する
  • ステップ 3:server.js ファイルを作成する
  • ステップ 4: ルートを構築する
  • ステップ 5: バックエンドを実行する

ステップ 1: プロジェクトをセットアップする ?️

1. Node.js と npm をインストールする: 公式 Web サイトから Node.js をダウンロードしてインストールします。パッケージの管理に役立つ npm (Node Package Manager) が付属しています。

2.プロジェクト フォルダーの作成: プロジェクト用のフォルダーを作成します。ターミナル (またはコマンド プロンプト) を開き、次のように入力します。

   mkdir my-node-project
   cd my-node-project
ログイン後にコピー

3.プロジェクトの初期化: フォルダー内で、次のように入力して新しい Node.js プロジェクトをセットアップします。

   npm init
ログイン後にコピー

これにより、すべてのプロジェクト情報と依存関係が保存される package.json ファイルが作成されます。不明な場合は、質問ごとに Enter キーを押してください。

4. Express.js をインストールします: Express.js は、バックエンドの構築を簡単にするフレームワークです。次のように入力してインストールします:

   npm install express
ログイン後にコピー

ステップ 2: フォルダーを整理しますか?

物事を整理整頓しておくことが重要です!プロジェクトを構成する方法は次のとおりです:

  • server.js: ここにメインのサーバー コードを記述します。
  • routes/: ルート ファイルをここに保存します (Web リクエストを処理する場所)。
  • controllers/: ルートのロジックを管理するコードを格納します。
  • models/: データベースを使用している場合は、データベース モデルを保存します (現在は必要ありません)。

フォルダー構造の例:

my-node-project/
├── routes/
├── server.js
├── package.json
└── node_modules/
ログイン後にコピー

ステップ 3:server.js ファイルを作成する ?️

1.ファイルを作成します: プロジェクト フォルダー内に、server.js という名前のファイルを作成します。これがアプリのエントリ ポイントになります。

2.最初の Node.js サーバーを作成します:

   const express = require('express'); // Importing express
   const app = express(); // Creating an express app

   // Create a route that sends a response when visiting the homepage
   app.get('/', (req, res) => {
     res.send('<h1>Hello, Express.js Server!</h1>');
   });

   // Set up the server to listen on port 3000
   const port = 3000;
   app.listen(port, () => {
     console.log(`Server is running on port ${port}`);
   });
ログイン後にコピー

3.テストしてみます: 次のように入力してサーバーを実行します:

   node server.js
ログイン後にコピー
ログイン後にコピー

次に、Web ブラウザを開いて http://localhost:3000 に移動します。 「こんにちは、Express.js サーバー!」と表示されるはずです。画面に表示されます!

ステップ 4: ルートを構築しますか?

ルートは、サーバーがさまざまな URL リクエストにどのように応答するかを定義します。

1.ルートを作成します:server.js ファイルには、すでにルートが 1 つあります:

   app.get('/', (req, res) => {
     res.send('Hello, Express.js Server!');
   });
ログイン後にコピー

2.ルートを追加: ルートをさらに追加しましょう:

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

   app.get('/contact', (req, res) => {
     res.send('This is the contact page');
   });
ログイン後にコピー

3.ルートをテストします: 保存した後、ブラウザに移動して次の URL にアクセスします:

  • http://localhost:3000/ – 「Hello, Express.js Server!」と表示されるはずです
  • http://localhost:3000/about – 「これは about ページです」と表示されるはずです
  • http://localhost:3000/contact – 「これはお問い合わせページです」と表示されるはずです

ステップ 5: バックエンドを実行する ??

サーバーを実行し続けて変更をテストするには:

1.サーバーを起動します: サーバーを再度実行します:

   node server.js
ログイン後にコピー
ログイン後にコピー

2.テストしてみます: ブラウザで URL にアクセスするか、Postman などのツールを使用してリクエストを送信できます。

3.サーバーを最新の状態に保つ: コードを変更するとサーバーが自動的に再起動される、nodemon をインストールできます:

   npm install -g nodemon
ログイン後にコピー

ここで、node server.js の代わりに、以下を実行します。

   nodemon server.js
ログイン後にコピー

出力?:

http://localhost:3000/ にアクセスすると、以下が表示されます:

Hello, Express.js Server!
ログイン後にコピー

http://localhost:3000/about にアクセスすると、以下が表示されます:

This is the about page
ログイン後にコピー

✅?お勧め:

この印刷可能なバックエンド開発者概念テンプレートを使用して、進捗状況を追跡してください!

初心者の開発者は、適切な技術スタックの選択に苦労することが多く、時間の無駄やモチベーションの低下につながります。そこで、私は Notion で美しくデザインされた非常にわかりやすい 6 か月のバックエンド開発者ロードマップを作成しました。これにより、進捗状況を追跡し、目標を達成できるようになります。_

Your First Backend Application using Node.js

このロードマップ:

  • ?️ 混乱を避けるための明確な道筋を示します。
  • ?どこから始めてどこで終了するかを概説することで、モチベーションを維持するのに役立ちます。
  • ?学校のカリキュラムと同様に、構造化された計画に従います。
  • ?ツールと言語の週ごとの目標を設定して学習を整理します。
  • ⏳ 必要なすべてを網羅し、6 か月以内に完了します。
  • ?ナビゲーションが簡単な美しいデザインが特徴です。

Your First Backend Application using Node.js


この記事をお読みいただきありがとうございます。必ずフォローしてください?最新のアップデートについては。

Lire la suite : compétences pour devenir développeur backend en 6 mois (feuille de route)

以上がNode.js を使用した最初のバックエンド アプリケーションの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。

ソース:dev.to
このウェブサイトの声明
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。
著者別の最新記事
人気のチュートリアル
詳細>
最新のダウンロード
詳細>
ウェブエフェクト
公式サイト
サイト素材
フロントエンドテンプレート