本連載では、フロントエンド開発に必要な知識・技術を解説しています。
HTML・CSS・JavaScriptについてはある程度知識のある方、もしくは書籍や他サイトにてそれらの知識を習得中の方を対象としています。

1. Webの誕生と進化

1991年に世界で最初のWebサイトが配信されて以来、Webサイトは様々な目的・形式で使われるようになり、瞬く間に普及しました。そして今では生活に欠かせないもの、というよりは生活の中心となっていると言ってもいいものになっています。
初めて配信されたWebサイトは、WWW（World Wide Web）プロジェクト（現在のインターネットの仕組みを作るプロジェクト）のための宣言書のようなものでしたが、今では電車の時間を調べたり、地図を見たり、動画を見たり、通話をしたりと、かつては考えられなかったような使い方ができるようになっています。その背景には、Web開発の技術の成長と、インターネット閲覧端末の進化があります。

まずは簡単に、フロントエンドエンジニアと呼ばれる職種が登場する前のWeb開発の歴史をざっと見ていきましょう。

2. フロントエンドエンジニア以前のフロントエンド

HTMLの誕生

世界で最初のWebサイトが配信されてから数年後、HTMLという規格が徐々に出来上がってきます。HTMLとは、「HyperText Markup Language」の略です。「HyperText」すなわち「ハイパーテキスト」とは、複数の文書を結びつける仕組みを持った文書のことで、文書間の移動のことをハイパーリンクと呼んだりもします。つまりHTMLは直訳すると「複数の文書を結びつける仕組みを持った文書を書き上げる言語」という意味ですね。
この頃のWebでは、Webページ=単なる文書であって、Webとはインターネット上に文書を置き、その文書同士をつなぎ合わせるイメージのものでした。

テーブルレイアウトによるHTMLコーディング

Webページ=単なる文書だった時代から、少しだけ進み、より凝ったレイアウトを模索するようになりました。また、HTML自体もバージョンが上がり、できることが増えてきました。その中の一つにテーブルレイアウトがあります。当時は、テーブルレイアウトを使用すれば、ある程度思うがままのレイアウトでWebページを表示することが可能でした。

FLASHの台頭

テーブルレイアウトで凝ったレイアウトは実現可能になりましたが、アニメーションやインタラクション（クリックするとリンゴが落ちてくるなど）は実現するには、FLASHを使わなければなりませんでした。作り方によってはなんでも実現できるFLASHは大きく発展し、一時期はどこのサイトもFLASHで作られていました。
FLASHにはなんでも実現できる反面、プラグインをインストールしないと再生できないこと、ロード時間が長いことがデメリットでした。

HTML + CSS + JavaScript

絶大な人気を誇っていたFLASHですが、iPhoneの登場から状況が一変しました。世界的にスマートフォンを普及させるきっかけとなったiPhoneですが、ライセンスの関係からFLASHをサポートしていませんでした。そのため、FLASHで作成されたWebサイトはiPhoneでは見ることはできなかったのです。

一方、テーブルレイアウトから時代は進んでおり、CSS（Cascading StyleSheet）により自在にデザインができるようになっており、またJavaScript（jQuery）を使用すればアニメーションやインタラクションも実現可能でしたので、FLASHからHTML + CSS + JavaScriptの体制への移行が始まりました。
そしてこの頃から、フロントエンドエンジニアという言葉が使われ始めるようになります。

3. Webアプリケーションの発展

フロントエンド技術の発展と並行して、サーバーサイドの技術も進化し続けていました。それに伴い、Webアプリケーション（Webブラウザ上で動作するアプリケーション）も発展してゆきました。
特に2000年代後半以降は、SNSが大流行したこともあり、2010年代に入ってからはWebアプリケーションの人気が高まりました。

Webアプリケーションの開発の場合、普通のWebサイトと異なりユーザーのアクションにより様々な状態の変化が起こります（例えばメッセージを送ったり、送られた方は未読の新着メッセージが到着したり）。

このようなWebアプリケーションを開発するには、HTMLやCSS、JavaScriptを効率的に管理する必要がありました。それまでサーバーサイドだけのものであったMVCといった開発モデルの考え方が、JavaScriptの世界にも登場するようになります。

4. フロントエンドエンジニアの発祥

先に述べた通りそれまではFLASHだけ使えばよかったのですが、HTMLとCSS、JavaScriptの3つの言語を使用してWeb開発をしなければならなくなりました。また、Webアプリケーション開発の発展も合間って、Webページの見える部分（=フロントエンド）の制作が徐々に複雑化して行きます。
それまではコーダー、マークアップ・エンジニア、WEBデザイナーと呼ばれている人たちが、HTMLやFLASHを使用して開発していましたが、2010年前後から、その複雑化したフロントエンド開発を専門的に行う人々を指して、フロントエンドエンジニアという言葉が使われ始めるようになりました。

また、フロントエンドという言葉が出始めてから間も無く、各ブラウザがHTML5やCSS3といった次世代の機能に対応してゆき、フロントエンド開発はさらに注目を浴びるようになりました。

5. フロントエンド開発の現在と未来

フロントエンド開発は現在も進化をし続けています。
数年前までは

  • HTML：コンテンツの記述
  • CSS：レイアウト・デザインの指定
  • JavaScript（jQuery）：アニメーション・インタラクションの実装

が当たり前でしたが、今ではそれも崩れつつあります。そもそも純粋なHTML、CSS、JavaScriptを書くことすら減ってきています。
また、フロントエンドエンジニアが考えないといけないことにパフォーマンスチューニングやアプリケーション開発におけるバージョン管理の問題も出てきました。

Webの世界は進化が早く、学ぶべきことが次から次へと増えてゆきますが、その変化が楽しい部分でもあります。

次回以降は、実際のフロントエンド開発に必要な知識や技術を解説してゆきたいと思います。