目次：Webアプリ開発ロードマップ

第1回：Web開発の変遷

本ロードマップでは、Webアプリの開発を実践し学びます。
最後まで実施することでWebアプリのフロントエンドはどういうものか、
バックエンドではどういったことが行われているのかを具体的に理解することを目的とします。

ブラウザの動き

ブラウザはhtmlファイルを読み込むことで動作します。
htmlファイルにJavaScriptファイルやcssファイル、画像や音声などのメディアファイルのリンクが書かれていれば読み込んで動作させます。

htmlファイルは文書のファイルです。
使い慣れた<div>タグを使い続けるようなことはせず、文章や意味合いを考えながら正しい文書を記載しましょう。
詳しくはSEO対策などを調べてみてください。

cssファイルはhtmlの見た目を飾るためのスタイルを記載するファイルです。
色をつけたり、マージンを取ったり、見た目を飾ることができます。
スタイルはhtml内に書くこともできますが、cssファイルに分離するようにしましょう。

jsファイルはhtmlに動きをつけるためのJavaScriptを記載するファイルです。
ページ内の要素を変更したり、サーバ通信をしたりすることができます。
JavaScriptはhtml内に書くこともできますが、jsファイルに分離するようにしましょう。

Web開発の変遷

Web開発の変遷を簡単に説明します。

各々でシンプルなページを提供していた

インターネットをダイアルアップで行っていた頃は、静的なページか2chのような掲示板サイトが主流でした。
各々がサーバを構築しプログラムも各々の書きたいように書いていました。

WEBサーバはapacheやIISのようなHTTPリクエストを受け付け、ファイルを返したりperlやPHPなどのソースコードを実行するプログラムです。

MVCデザインパターンフレームワークの導入

MVCデザインパターンというものが流行り始めます。
フレームワークを利用することで、どのサイトでも作っているような共通部分はフレームワークが提供し、各々で作らなくて良くなりました。
また、MVCデザインパターンが導入され、開発者に作り方を明示し、開発ルールから逸脱しにくくさせました。
開発を迅速に行うことができ、新しく入ってきた開発メンバにも読みやすいという利点があります。
ショッピングサイトなど、現在も使っているサービスは多いです。

MVCデザインパターンについて

MVCはModel・View・Controllerの頭文字を取っています。
Modelは、データベースを読み書きする役割を持ちます。
Viewは、クライアントに返すhtmlを作成する役割を持ちます。主にhtmlのテンプレートです。
JavaのアプレットのようなスクリプトレットがViewにあたります。
Controllerは、HTTPリクエストを受け付け、リクエストをハンドリングする役割を持っています。
Modelを使ってデータの読み書きを行ったり、Viewを使ってHTMLを作らせたり、作成したデータをクライアントに返信したりします。

フレームワークについて

JavaならStrutsやSpring、PHPならCakePHPやZendFramework、RubyならRuby on Rails等々、言語毎に多くのフレームワークが乱立しています。

Webアプリの導入

上記までの開発ではユーザ毎の画面構築をサーバ側で行っていました。
また、サービスを運用する上での進行形のデータ（ログインが通った等）をセッションという形でサーバのメモリに保持していました。
それではクライアント数が多くなってくるとサーバは負荷に耐えられません。
Webアプリでは、アプリケーションとして動作する上で必要なファイルを最初にダウンロードさせ、Webアプリが動作する上で必要になるデータの遣り取りのみサーバにアクセスするようになりました。
画面の更新はWebアプリ内のJavaScriptプログラムで行います。

最後に

今回はWeb開発の変遷について記載しました。
次回からはAngularを利用して実際にフロントエンドを作成していきます。