【基礎】Webアプリの設計思想
はじめに
「他技術との関連性や、知りたいことから離れてしまっている気がする」と、
Web技術の用語を掘り下げて学んでいるうちに悩んだときに、
私は処理全体の流れを把握することで、とても理解しやすくなりました。
本記事では、自身がこれらを学ぶ中で得た基礎知識をまとめていきます。
本記事の趣旨
本記事では、プログラミング言語やフレームワークなどの技術がWebアプリケーションの中で果たす役割を図解と文章でまとめたものになります。
全体を俯瞰するのが目的なので、ひとつひとつの技術の深い掘り下げは行いません。
Webアプリケーションの3層構造
ネットワークを介してWebブラウザ上で動作するアプリケーションをWebアプリケーションと呼びます。
Webアプリケーションは、基本的に 3層構造（アーキテクチャ） と呼ばれる階段状の構造になっています。
ユーザーインターフェイス（UI）となるプレゼンテーション層
業務処理を実行するアプリケーション層
データ処理と保管を管理するデータ層
これら3層に分かれています。
言語技術との関わり
プレゼンテーション層では、HTML・CSS・JavaScriptなどのクライアントサイド言語が動作します。
（WebブラウザとWebサーバーで構成）
アプリケーション層では、PHP・Ruby・Java・C#・Node.js（JavaScript）などのサーバーサイド言語が動作します。
（APサーバーで構成）
データ層では、 MySQL・PostgreSQL・SQLiteなどのリレーショナルデータベース管理システム（RDBMS） が動作します。
（データベースサーバーで構成）
3層構造の理由
複雑な処理の実行はアプリケーション層とデータ層に負荷をかけますし、
アクセス数が多くなるとプレゼンテーション層に負荷がかかり、
結果的にアプリ全体の動作が重くなる状態になってしまいます。
これを回避するために3つの独立した構造で処理を実行し、負荷を分散するというのが基本的な考え方になります。
イメージしやすい例で言うと、
私たちが使用する個人用パソコンはこれらの構造をひとまとめにしたものになります。
ひとつの機材では膨大なデータ量とアクセス数に耐えられないので、クラウドサービスなどを利用することも負荷の分散に当たります。
改修コストが低い
ひとつの機材ですべての層を管理した際に、何らかの不具合が発生してしまったら、どうなるでしょうか。
公開されているサービスで例えれば、提供を停止しなければなりません。
でも、3つの層を個々に独立させて必要な部分だけをメンテナンスすれば、部分修理が可能になります。
MVCモデル
アプリケーション構造には、MVCモデルという考え方もあります。
アプリケーションのデータと業務処理を指す、Model（モデル）
ユーザーへの出力処理を指す、View（ビュー）
必要な処理をModelやViewに伝える役割を担う、controller（コントローラー）
これら3つのモデルはお互いに連携して動作する仕組みになっていて、それらに実行命令を与えるのがプログラミング言語です。
controllerとModelに命令を与える言語技術
ここではフレームワークとORMという技術が登場します。
たとえば、PHPフレームワークのLaravelは、controllerとModelに命令を与えることができて、
Eloquentと呼ばれるORM技術を用いてデータベースを管理できます。
他にもRubyではActive Recordと呼ばれるORMがあり、同様の機能があります。
Viewに命令を与える言語技術
MVCモデルはサーバーサイド言語を用いて実行命令を与えるのが基本的な考え方ですが、Viewはユーザーが直接扱うブラウザやユーザーインターフェイスを担当する部分です。
クライアントサイド言語の中にはサーバーサイドスクリプトを実行できる技術があり、それらを用いてMVCモデルに実行命令を与えます。
たとえば、PHPにはHTMLを動的に生成してブラウザに送信しますが、このHTMLの中にJavaScriptが含まれることが多くあります。
これは、サーバーサイド言語のPHPがクライアントサイド言語を用いてクライアントサイドスクリプトを実行するという流れになります。
他にも、TypeScriptというJavaScriptを静的に書けるクライアントサイド言語は、PrismaというORM技術を用いてデータベースを管理できます。
このようにふたつの領域の技術はお互いに連携して作用する状況も増えつつあります。
3層アーキテクチャとMVCモデルの違い
このふたつには明確な違いがあります。
3層アーキテクチャはWebシステム全体の設計方針であり、MVCモデルはサーバーサイドスクリプトの設計方針です。
3層アーキテクチャは階段状の構造なので、最上層のプレゼンテーション層と最下層のデータ層が直接的なやり取りを行うことはありません。
一方で、MVCモデルは3つのモデルが連携してクライアントサイドやサーバーサイドの至るところに情報を伝達するので、根本的な考え方が違っています。
近年の開発ではMVCモデルを用いない場合もある
単純なアプリケーションを作る場合、小規模なWebサイトを作る場合、ドメインを特化させるアプローチをする場合、パフォーマンスが重要視されるシステム開発の場合など、
開発時の要件定義や状況に合わせてアーキテクチャパターンを検討することがあります。
しかし、MVCモデルはWebアプリケーションを学習する上で、初学者が最初に学ぶべき基礎的な概念です。
おわりに
ある方から技術を学ぶ際に繰り返し教えてくれることがあります。
「データの流れを正しく読むことを心がけなさい」
この教えは実際にコーディングしてみて「よくわからないけど動く」という状況が怖いと感じる私にとって、とても重要な心得だと感じました。
今後も、基礎的な部分や応用的な部分、いずれは技術ブログなども投稿していきたいと考えています。
ご覧いただきありがとうございました。
Discussion