Webアプリケーションやその開発環境をつくる技術の概観

Webアプリケーションやその開発環境をつくる際に用いる技術同士の関係をまとめることを試みています。

https://gyazo.com/004da7d4c30c10ec50e7be4593473ba3

3層アーキテクチャによって構成されているアプリケーションサーバと、ユーザーエージェントとの関係、サーバやブラウザで動作するJavaScriptの実装に用いられる技術をまとめた図です。

ビジネスロジック層は好きなように実装するとしても、プレゼンテーション層やデータアクセス層は、Webアプリに対する要求、プログラム言語や運用上の事情を踏まえて選択することになります。

プレゼンテーション層およびブラウザとの通信についてのアーキテクチャは、MPAとSPAに大別できることが知られています。どちらを選択するかは、ユーザ体験の要求や対応するべきユーザエージェントの種類（モバイルアプリ、デスクトップアプリを実装する場合はSPAのアーキテクチャを採用する）、工数などの事情によって判断します。

MPAでプレゼンテーション層を実装する場合は、application/x-www-form-urlencodedを受け取って、ビジネスロジック層を呼び出し、その結果をHTMLで返すように実装することが多いです。

SPA

SPAでプレゼンテーション層を実装する場合は、JSONを受け取って、ビジネスロジック層を呼び出し、結果もJSONで返すように実装することが多いです。

ブラウザはHTMLからDOMツリーを構築して、それを視覚化しますが、JSONを同じように視覚化することはできないので、ユーザの操作によってサーバとの通信やDOMツリーへの変更が発生するようなJavaScriptを実装して、それをブラウザで実行させることで、Webページをアプリのように振る舞わせることができるようになります。

MPAではブラウザで実行させるJavaScriptの責務は小さいですが、SPAではそれが大きい上、サーバのプレゼンテーション層が不要になるわけではありません。層が1つ増えているとも言えるかもしれません。

https://gyazo.com/e9698f5e6876bad67aa7ec6da9c97be9

開発環境は、Webアプリを完成させるために、何を作成して、どうやって実行する必要があるのか、を踏まえて用意します。ここでは、サーバのコードも、ブラウザで実行させるJavaScriptも両方ともTypeScriptで記述する場合を例に説明します。

これを作るのがTypeScript製Webアプリの開発環境構築です。