Skip to content

index.mdx

Latest commit

 

History

History
345 lines (244 loc) · 18.8 KB

index.mdx

File metadata and controls

345 lines (244 loc) · 18.8 KB
title Expressによるサーバー構築

import expressSetupVideo from "./express-setup.mp4"; import UrlStructureExplanation from "./url-structure-explanation.tsx"; import RequestResponseSlideShow from "./request-response-slide-show";

ウェブサイトが動作する仕組み

「Webプログラミングの基礎を学ぼう」の章では、ウェブサイトを表示するためにHTMLファイルとJavaScriptファイルを作成し、ブラウザから開きました。しかし、一般的なウェブサイトを閲覧する際は、HTMLファイルやJavaScriptファイルの存在を意識することはありません。これは、Webでは、通常インターネットを介してデータをやり取りするためです。

インターネットを人間が直接利用することはできないので、何らかのコンピューターを使用しなければなりません。 このとき、

  • クライアント: サービスを利用する側のコンピューターや、その上で直接通信を担うソフトウェア
  • サーバー: サービスを提供する側のコンピューターや、その上で直接通信を担うソフトウェア

という二者の関係が発生します。また、その間で発生する通信を、その方向により

  • リクエスト: クライアントからサーバーに対する要求
  • レスポンス: リクエストに対するサーバーからクライアントへの応答

のように区別して呼びます。

Google ChromeやSafariに代表されるブラウザは、Webにおけるクライアントソフトウェアの呼称です。Webにおいて、HTML、CSS、JavaScriptは、サーバーがクライアントに対してレスポンスとして送信するデータの一部で、ブラウザによって解釈されて表示されます。

ここからは、Node.jsを用いて、Webサーバーとして動作するソフトウェアを作成していきます。

クライアントとサーバー

:::tip[ここまででの教材とのつながり]

ブラウザは、サーバーと通信して取得したHTML、CSS、JavaScriptデータを解釈して表示するだけでなく、コンピューター上にファイルの形式で存在しているHTML、CSS、JavaScriptを表示することもできます。ここまでの教材では、サーバーという概念の導入による複雑さを避けるため、この機能を用いて各言語の文法を学んできました。

:::

Expressパッケージを用いてWebサーバーを構築する

Expressパッケージを用いると、簡単にWebサーバーを構築できます。

まずはexpressパッケージをnpmでインストールします。

npm install express

続いて、次のようなmain.mjsを作成しましょう。

import express from "express";
const app = express();

app.get("/", (request, response) => {
  response.send(`Hello World! <a href="./lang/ja">日本語</a>`);
});
app.get("/lang/ja", (request, response) => {
  response.send("こんにちは、世界！");
});

app.listen(3000);

ファイルを保存したら、作成したファイルを実行しましょう。

node main.mjs

ブラウザでhttp://localhost:3000/にアクセスし、次の動作を確認してください。

  • Hello World! 日本語が表示されること
  • 日本語をクリックするとアドレスバーがhttp://localhost:3000/lang/jaに変化しこんにちは、世界！が表示されること