初手の例の「ハロー・ワールド」

日本語の母語話者により校閲必要

恐れ入りますが、当ページは未だ日本語の母語話者に依り校閲されていません。（※自動翻訳は利用されませんでした）

当授業で提示されたプロジェクト構成・コードは教材への最適化として可能な限り簡素化されたので、此れに真似し本物の営利的なウェブサイト・ウェブアプリケーションのコードを書いてはならない。此の授業で習った知識を実践に活用するには、授業の内容を理解した上でコードサンプルを貴方の課題・スタイルガイドに適応する事。

事前に必要な知識・熟練

下記の知識・熟練が習得済み前提で今以降の授業を論述。

Node.jsプロジェクトを展開し、npm依存性を導入。未習得の場合先ずNode.jsの基本を学ぶ事。
TypeScript言語のコンパイラを設定。 やまとダイワバックエンド（以下YDB）フレームワークは TypeScript優先のフレームワークで、但し# [+Keyphrase--YDID any型が一切使われていない規律]。
オブジェクト指向プログラミングの基本。 YDBに提供される方法論はオブジェクト指向プログラミング中心。当フレームワークは特定のアーキテクチャを強いてはいないが、オブジェクト指向プログラミングの利用は好ましく、次の授業以降必ず出る。

Node.jsプロジェクトの展開

新規Node.jsプロジェクトを展開し、下記のnpm依存性を導入しよう。バージョンと共に変化しているAPI関連問題を避ける為に、此の従業無い角括弧指に示されたバージョンを導入する超推薦。

@yamato-daiwa/backend [0.3.0]: 当フレームワークの主要なnpmパッケージ
@yamato-daiwa/es-extensions [1.7.0]: Node.js・ブラウザー専用JavaScript不問の補助機能。当授業内、HTTP_Methods列挙のみ必要に成るが、プロジェクトの拡大と共にもっと必要に成る予定。
ts-node [10.9.2]: TypeScript言語専用の REPL。 TypeScriptは自分のランタイムを持っている効果を作り、当授業内コンパイル済みのJavaScriptファイル関連面倒を避ける。
typescript [5.5.4]: TypeScript言語の主要npmパッケージ。 ts-nodeは当パッケージの導入を求める（npmの用語を使って言い換えると、typescriptは ts-nodeに対するpeer dependencyである）。現在のnpmはピア依存性を自動的に導入しているが、我々は此のパッケージの特定バージョンを意識的に導入する。

npm i @yamato-daiwa/backend@0.3.0 @yamato-daiwa/es-extensions@1.7.0

npm i ts-node@10.9.2 typescript@5.5.4 -D

コード

当アプリケーションはhttp://127.0.0.1:80/アドレス宛てのGET型の HTTPリクエストへの返事として「Hello, world!」と言う本文を含んでいる h1見出しから成り立っているHTMLコードを返す。実は、妥当なHTMLページを代表しているコードには成っていないが、テスト目的の為に送信しても現在のブラウザーなら表示させる。此のリクエストを送る前に当単純な例のコードを考察しておこう。

import { Server, Request, Response, ProtocolDependentDefaultPorts } from "@yamato-daiwa/backend";
import { HTTP_Methods } from "@yamato-daiwa/es-extensions";


Server.initializeAndStart({

ServerクラスのinitializeAndStart 静的メソッドは設定オブジェクトを単一の引数として受け取っている。 Server（「サーバ」）と言う文脈に合わせて「初期化して起動」と言うメソッド名の直訳は、 当メソッドが何をしているか、不明点が残るべきではない。

  IP_Address: "127.0.0.1",

IP_Addressと言うプロパティは只単に必須に成っている訳ではなく、エンジニアとしてどれのIPアドレスでサーバアプリケーションを実行するか、意識 していなければいけない。実際のプロジェクトの場合、IPアドレスはモード（ローカル開発、ステージング、本番）に依存。将来の授業、どうやって此のオプションをモードに依って条件的に設定すればいいか教えられるが、今は 127.0.0.1と言うプライベートIPアドレス範囲内の一番最初のものにしておこう。

  HTTP: { port: ProtocolDependentDefaultPorts.HTTP },

ProtocolDependentDefaultPorts.HTTPの値である80は HTTPプロトコル専用規定のポート番号だ。 IP_Addressと同じ理由で明示的にしていしなければいけないが、人間の暗記力に頼る事が危険なので、 ProtocolDependentDefaultPorts列挙が用意してある。エンジニアの貴方からは、規定のポートか、其の他のポートが使わ定るか、意識してなければならない。

  routing: [
    {
      route: { HTTP_Method: HTTP_Methods.get, pathTemplate: "/" },

和訳から自明的に成ってもいて、良質の名付けの場合自明的ではなければいけないのだが、routing プロパティはルーチング（サーバ向けウェブ開発の文脈に於いてURIの原型に依り異なる返事の生成）に該当。これからの授業の際[+DefinableTerm--YDID ルーチング]を詳しく考察するのだが、今にとって大切な事は http://127.0.0.1:80/URIに該当している 単一の根のルート （片仮名上、「root」と「route」は何方でも「ルート」だが、本題に両方出ている）専用のみ返事が生成される事に成る。其れ以外のルートの場合例えば/foo（URIの http://127.0.0.1:80/fooに該当）又は/bar/baz （URIのhttp://127.0.0.1:80/bar/bazに該当）、サーバが「見つからなかった」と言うエラーを含むレスポンスを返す。

      async handler(request: Request, response: Response): Promise＜void＞ {

handlerは送信されたリクエストがrouteで指定された ルートを満たしている時、何方の行動をすれば良いか、定義する関数である。 レスポンスの送信は一瞬で感じられる事が有っても事実上一瞬ではないので、此の関数はアプリオリ非同期（此処では明示的か、暗黙的でPromiseのインスタンスを返す関数と意味するが、ECMAScript上正式的な定義には成っていなく、コールバックを引数で受けている関数も「非同期」と呼ばれる）。然も、リクエストのハンドラによく其の他の非同期処理が行われる事が多い（例えば、データベースとの取り引き又はファイルのへのアクセス）。実質として、routeとhandlerは条件文 も同然。

普通だと、レスポンスは一引数目で渡されたリクエストの インスタンスに依る生成。例えばGET-リクエストの場合クエリパラメータに依って返事が変わり、POST-リクエスト又は PUT-リクエストの場合はリクエストボディに有るデータがアクセスされう。だが、今はResponseインスタンスの取り扱いを次以降の授業にし、此の最初の授業に相応しい可能な限り簡単な例ではずっと同じレスポンスを送る事に成るので、第一引数が未使用で良い。

        return response.submitWithSuccess({ HTML_Content: "<h1>Hello, world!</h1>" });

汎用な知識ではあるが、HTTPレスポンスは３桁の暗号に表現されるステータスが有る。今大切な事は、此れ等は5種類が存在している。

情報レスポンス
成功レスポンス
リダイレクトメッセージ
クライアントエラーレスポンス
サーバーエラーレスポンス

クラスResponseのsubmitWithSuccess メソッドは「成功の」範囲のコード付きのレスポンスを返す（規定は200）。 HTML_Contentと言う単一の引数の プロパティを指定する事で、フレームワークにHTMLコードを送りたい意図を伝え、フレームワークは適切なHTTPヘッダーを設定してくれる。

      }
    }
  ]
});

テスティング

ts-nodeでアプリケーションを起動しよう。

ts-node EntryPoint.ts

コードに間違いが無い場合、成功起動に関する下記の通知はターミナルに表示。

「The serving of HTTP requests started」（直訳：「HTTPリクエストの受付が始まった」）と言う見出しのメッセージがコンソールで緑色で表示されている。ウェブアプリケーションはNode.js/・TypeScriptで書かれ、「やまとダイワバックエンドの」（技術名：「Yamato Daiwa Backend」、省略：「YDB」）が使われている。

表示されているURIをウェブブラザーで開く。貴方のターミナルはリンクを認識している場合は、マウスクリックで開く事も出来る。結果として、ターミナルで少なくとも一件のリクエスト （根ルート）に就いて記録が残る。

根ルートのGetリクエストについて、「New request」（直訳：「新規リクエスト」）と言う見出しのメッセージがコンソールで青色で表示されている。ウェブアプリケーションはNode.js/・TypeScriptで書かれ、「やまとダイワバックエンドの」（技術名：「Yamato Daiwa Backend」、省略：「YDB」）が使われている。

ルート/favicon.icoに就いても記録が残る事が有る。

「/favicon」ルートのGetリクエストについて、「New request」（直訳：「新規リクエスト」）と言う見出しのメッセージがコンソールで青色で表示されている。ウェブアプリケーションはNode.js/・TypeScriptで書かれ、「やまとダイワバックエンドの」（技術名：「Yamato Daiwa Backend」、省略：「YDB」）が使われている。

当記録が在れば、ファビコンを表示させる為に、ブラウザーに依り当リクエスト自動的に送信された訳。仮にフレームワークは此のリクエストに備えられなかったとしたら、「見つからなかった」と言うエラー付きレスポンスを送信したが、 YDBフレームワークなら、規定で自分のアイコンを返している。無論、別のアイコンに置き換える事も出来るが、以降の授業にしておこう。

localhostはIPアドレス127.0.0.1に対して「代名詞」で、 80はプロトコルHTTPにとって規定のポートなので、 http://127.0.0.1:80/と他に http://localhostやhttp://localhost:80や http://127.0.0.1:80/にもリクエストを送る事も出来る。

最後に[+ImportantEntity__Code--YDID routing]に登録されていないルートにリクエストを送信すればどうなるか、見てみよう。例えば、リクエストhttp://127.0.0.1:80/fooの場合記録は下記の様に成る。

「/foo」ルートのGetリクエストについて、「New request」（直訳：「新規リクエスト」）と言う見出しのメッセージがコンソールで青色で表示されている。その後、不明なリソースへの参照について、「Requested resource not found」（直訳：「要求されたリソースが見つからなかった」）と言う見出しのメッセージがコンソールで赤色で表示されている。ウェブアプリケーションはNode.js/・TypeScriptで書かれ、「やまとダイワバックエンドの」（技術名：「Yamato Daiwa Backend」、省略：「YDB」）が使われている。

フレームワークは、望ましいリソース（レスポンスで取得したいもの）が見つからなかったと。 ステータス404 Not foundを元にし、ブラウザーが同じ様なメッセージを表示。