Node.js Express FrameWork チュートリアル – 10 分で学ぶ

このチュートリアルでは、Express フレームワークについて学習します。 このフレームワークは、最小限で柔軟な Node.js Web アプリケーション フレームワークとして機能するように構築されており、単一ページと複数ページのハイブリッド Web アプリケーションを構築するための堅牢な機能セットを提供します。

Express.jsとは何ですか?

Express.js は、シングルページ、マルチページ、およびハイブリッド Web アプリケーションを構築するために特別に設計された Node js Web アプリケーション サーバー フレームワークです。

これは、node.js の標準サーバー フレームワークになりました。 Express は、MEAN スタックとして知られるもののバックエンド部分です。

MEAN は無料のオープンソースです JavaScriptを 動的な Web サイトと Web アプリケーションを構築するためのソフトウェア スタック。以下の機能があります。wing コンポーネント。

1) MongoDBの – 標準の NoSQL データベース

2) Express.js – デフォルトの Web アプリケーション フレームワーク

3) Angular.js – Web アプリケーションに使用される JavaScript MVC フレームワーク

4) Node.js – スケーラブルなサーバーサイドおよびネットワークアプリケーションに使用されるフレームワーク。

Express.js フレームワークを使用すると、GET、PUT、POST および DELETE リクエストなどの複数の種類のリクエストを処理するために使用できるアプリケーションの開発が非常に簡単になります。

Express のインストールと使用

Express は、Node Package Manager 経由でインストールされます。 これは、次のコマンドを実行することで実行できます。wing コマンドラインの行

npm インストール エクスプレス

上記のコマンドは、ノード パッケージ マネージャーに対して、必要な高速モジュールをダウンロードし、それに応じてインストールするように要求します。

新しくインストールした Express フレームワークを使用して、単純な「Hello World」アプリケーションを作成してみましょう。

私たちのアプリケーションは、ポート番号 3000 でリッスンする単純なサーバー モジュールを作成します。この例では、このポート番号でブラウザを通じてリクエストが行われた場合、サーバー アプリケーションはクライアントに「Hello' World」応答を送信します。 。

Express のインストールと使用

var express=require('express');
var app=express();
app.get('/',function(req,res)
{
res.send('Hello World!');
});
var server=app.listen(3000,function() {});

コードの説明:

  1. コードの最初の行では、require 関数を使用して「express モジュール」を組み込みます。
  2. Express モジュールの使用を開始する前に、そのオブジェクトを作成する必要があります。
  3. ここではコールバック関数を作成しています。 この関数は、誰かが Web アプリケーションのルートを参照するたびに呼び出されます。 http://localhost:3000 。 コールバック関数は、文字列「Hello World」を Web ページに送信するために使用されます。
  4. コールバック関数では、文字列「Hello World」をクライアントに送り返します。 「res」パラメータは、コンテンツを Web ページに送り返すために使用されます。 この「res」パラメータは、Web ページにコンテンツを送り返すことを可能にするために「request」モジュールによって提供されるものです。
  5. 次に、listen to 関数を使用して、サーバー アプリケーションがポート番号 3000 でクライアント要求をリッスンするようにします。ここでは、使用可能な任意のポートを指定できます。

コマンドが正常に実行されると、次のようになります。wing ブラウザでコードを実行すると、出力が表示されます。

出力:

Express.js

出力から、

  • ポート 3000 でローカルホストの URL を参照すると、ページに「Hello World」という文字列が表示されることがはっきりとわかります。
  • コードでは、サーバーがポート番号 3000 でリッスンするように特に指定しているため、この URL を参照すると出力を表示できます。

ルートとは何ですか?

ルーティングは、アプリケーションが特定のエンドポイントへのクライアント要求に応答する方法を決定します。

たとえば、クライアントは、以下に示すようなさまざまな URL に対して GET、POST、PUT、または DELETE http リクエストを作成できます。

http://localhost:3000/Books
http://localhost:3000/Students

上記の例では、

  • 最初の URL に対して GET リクエストが行われた場合、応答は書籍のリストになることが理想的です。
  • GET リクエストが XNUMX 番目の URL に対して行われた場合、応答は理想的には生徒のリストである必要があります。
  • したがって、アクセスされた URL に基づいて、Web サーバー上の別の機能が呼び出され、それに応じて応答がクライアントに送信されます。 これがルーティングの概念です。

各ルートには、ルートが一致したときに実行される XNUMX つ以上のハンドラー関数を含めることができます。

ルートの一般的な構文を以下に示します。

app.METHOD(PATH, HANDLER)

その中で、

1) アプリは Express モジュールのインスタンスです

2) METHOD は HTTP リクエスト メソッド (GET、POST、PUT、または DELETE) です。

3) PATH はサーバー上のパスです。

4) HANDLER はルートが一致したときに実行される関数です。

Express にルートを実装する方法の例を見てみましょう。 この例では、次の 3 つのルートを作成します。

  1. このルートにアクセスすると「Tutorial on Node」という文字列が表示される /Node ルート
  2. このルートにアクセスすると「Tutorial on Angular」という文字列が表示される /Angular ルート
  3. デフォルト ルート / には、「Guru99 チュートリアルへようこそ」という文字列が表示されます。

基本的なコードは前の例と同じままです。 以下のスニペットは、ルーティングがどのように実装されるかを示すアドオンです。

Node.js のルート

var express = require('express');
var app = express();
app.route('/Node').get(function(req,res)
{
    res.send("Tutorial on Node");
});
app.route('/Angular').get(function(req,res)
{
    res.send("Tutorial on Angular");
});
app.get('/',function(req,res){
    res.send('Welcome to Guru99 Tutorials');
}));

コードの説明:

  1. ここでは、URL が次の場合のルートを定義しています。 http://localhost:3000/Node ブラウザで選択されています。 ルートには、ノード URL を参照するときに呼び出されるコールバック関数をアタッチしています。この関数には 2 つのパラメーターがあります。
  • 使用する主なパラメータは「res」パラメータで、クライアントに情報を送り返すために使用できます。
  • 「req」パラメータには、行われたリクエストに関する情報が含まれます。 場合によっては、実行されるリクエストの一部として追加のパラメーターが送信される可能性があるため、送信される追加パラメーターを見つけるために「req」パラメーターを使用できます。
  1. ノード ルートが選択されている場合は、send 関数を使用して文字列「Tutorial on Node」をクライアントに送り返します。
  2. ここでは、URL が次の場合のルートを定義しています。 http://localhost:3000/Angular ブラウザで選択されています。 ルートには、Angular URL を参照するときに呼び出されるコールバック関数をアタッチしています。
  3. Angular ルートが選択された場合、send 関数を使用して文字列「Tutorial on Angular」をクライアントに送り返します。
  4. これは、アプリケーションのルートを参照するときに選択されるデフォルトのルートです。 http://localhost:3000。 デフォルト ルートが選択されると、「Guru99 チュートリアルへようこそ」というメッセージがクライアントに送信されます。

コマンドが正常に実行されると、次のようになります。wing ブラウザでコードを実行すると、出力が表示されます。

出力:

Node.js のルート

出力から、

  • ポート 3000 でローカルホストの URL を参照すると、ページに「Welcome to Guru99 Tutorials」という文字列が表示されることがはっきりわかります。
  • これは、コード内で、デフォルトの URL でこのメッセージが表示されると述べたためです。

Node.js のルート

出力から、

  • URL が /Node に変更されている場合、それぞれのノード ルートが選択され、「Tutorial On Node」という文字列が表示されることがわかります。

Node.js のルート

出力から、

  • URL が /Angular に変更されている場合、それぞれのノード ルートが選択され、「Tutorial On Angular」という文字列が表示されることがわかります。

Express.js を使用したサンプル Web サーバー

上記の例から、ルーティングに基づいてどの出力を表示するかを決定する方法がわかりました。 この種のルーティングは、最近の Web アプリケーションのほとんどで使用されています。 Web サーバーのもう XNUMX つの部分は、Node js でのテンプレートの使用に関するものです。

迅速なオンザフライ Node アプリケーションを作成する場合、簡単かつ迅速な方法は、アプリケーションのテンプレートを使用することです。 市場には、テンプレートを作成するためのフレームワークが数多く存在します。 ここでは、テンプレート用の Jade フレームワークの例を取り上げます。

Jade は、ノード パッケージ マネージャーを介してインストールされます。 これは、次のコマンドを実行することで実行できます。wing コマンドラインの行

npm インストール jade

上記のコマンドは、ノード パッケージ マネージャーに必要な jade モジュールをダウンロードし、それに応じてインストールするように要求します。

注意: Node の最新バージョンでは、jade は非推奨になりました。 代わりにパグを使用してください。

新しくインストールした jade フレームワークを使用して、いくつかの基本的なテンプレートを作成してみましょう。

ステップ1) 最初のステップは、jade テンプレートを作成することです。 Index.jade というファイルを作成し、以下のコードを挿入します。 必ず「views」フォルダーにファイルを作成してください

Express.js を使用したサンプル Web サーバー

  1. ここでは、このテンプレートが呼び出されたときにページのタイトルが渡される値に変更されるように指定しています。
  2. また、ヘッダー タグ内のテキストが、jade テンプレートで渡されるものに置き換えられることも指定しています。

Express.js を使用したサンプル Web サーバー

var express=require('express');
var app=express();
app.set('view engine','jade');
app.get('/',function(req,res)
{
res.render('index',
{title:'Guru99',message:'Welcome'})
});
var server=app.listen(3000,function() {});

コードの説明:

  1. アプリケーションで最初に指定するのは、テンプレートのレンダリングに使用される「ビュー エンジン」です。 テンプレートのレンダリングに jade を使用するので、それに応じてこれを指定します。
  2. render 関数は、Web ページをレンダリングするために使用されます。 この例では、前に作成したテンプレート (index.jade) をレンダリングしています。
  3. 「Guru99」と「Welcome」の値をそれぞれパラメータ「title」と「message」に渡します。 これらの値は、index.jade テンプレートで宣言された「title」および「message」パラメータに置き換えられます。

コマンドが正常に実行されると、次のようになります。wing ブラウザでコードを実行すると、出力が表示されます。

出力:

Express.js を使用したサンプル Web サーバー

出力から、

  • ページのタイトルが「Guru99」に設定され、ページのヘッダーが「Welcome」に設定されていることがわかります。
  • これは、ノード js アプリケーションで呼び出される jade テンプレートが原因です。

まとめ

  • Express フレームワークは、Node js アプリケーションの開発に使用される最も一般的なフレームワークです。 Express フレームワークは、node.js フレームワーク上に構築されており、サーバーベースのアプリケーションの迅速な開発に役立ちます。
  • ルートは、行われたリクエストに基づいてユーザーを Web アプリケーションのさまざまな部分に誘導するために使用されます。 各ルートの応答は、ユーザーに何を表示する必要があるかに応じて変えることができます。
  • テンプレートを使用すると、効率的な方法でコンテンツを挿入できます。 Jade は、Node.js アプリケーションで使用される最も人気のあるテンプレート エンジンの XNUMX つです。