フロントエンドの歴史

4.1 ウェブ開発の歴史: HTMLからHTML5とCSS3へ

1990年代初頭、ティム・バーナーズ＝リーのおかげでウェブ開発が生まれたんだ。彼は最初のフロントエンド開発者で、HTMLを考案してそれで書いて、最初のブラウザも作ったんだよ。本物のフロントエンドデベロッパーは、ブラウザがなくても頑張っちゃうんだ。

当時はまだCSSやJavaScriptがなかったから、サイト作りは簡単だったってわけ。ティムは初のオールドスクールな開発者で、みんながJavaScriptやCSSを使う前からフロントエンドやってたんだよ。

1995年にはInternet Engineering Task Force（IETF）がHTML 2.0を最初の公式HTML標準として承認した。このバージョンには基本的なタグと属性が含まれていて、基本的なウェブページを作成できるようになったんだ。HTML 2.0はその後のウェブ開発の基盤を築いたんだよ。

HTML 3.2とHTML 4.0: 機能拡張

1997年はHTMLの歴史で重要な年だった。この年にW3Cコンソーシアムが開発したHTML 3.2がリリースされた。このバージョンにはテーブル、Javaアプレット、数式のサポートが含まれていて、ウェブ開発者の可能性を大きく広げたんだ。

その後すぐにHTML 4.0が登場し、重要な改良がもたらされた。CSSスタイルのサポート、改良されたセマンティクスや新しい要素がHTML 4.0をより複雑で構造化されたウェブページを作成するための強力なツールにしたんだ。CSSスタイルの導入により、デベロッパーはコンテンツとその見た目を分離できるようになり、スタイル管理が容易になってデザインの実装が簡単になったんだよ。

CSS: ウェブページのスタイリング革命

最初のCSS（カスケーディングスタイルシート）標準は1996年にW3Cによってリリースされた。CSSは、デベロッパーがHTMLドキュメントをスタイリングできるようにして、ページの視覚要素を構造から分離したんだ。CSS1は、テキストや背景画像の基本的なスタイリング機能を提供したんだ。

1998年にはCSS2が登場し、新しい機能が追加された。たとえばメディアクエリのサポート、絶対的および相対的な位置決め、さらに印刷用のより複雑なスタイルが追加されたんだ。

CSS3は2011年に登場し、モジュール式のアーキテクチャを導入したんだ。これにより、アニメーション、グラデーション、トランスフォーメーション、改良されたレイアウトなどの新機能を段階的に導入できるようになったんだ。

HTML5: ウェブ開発の新時代

HTML5はWHATWGとW3Cの共同の取り組みによって開発され、2014年に正式に発表された。HTML5はマルチメディア（ビデオやオーディオ）のサポート、新しく改良されたセマンティック要素（<article>,<section>,<header>,<footer>など）、ウェブフォームの新しい形式およびグラフィックスやマルチスレッド処理用の新しいAPIを追加したんだ。

HTML5はウェブ開発者の可能性を大きく広げ、よりインタラクティブで動的なウェブアプリケーションを作成できるようにしたんだ。マルチメディア要素と新しいAPIのサポートにより、ウェブアプリケーションはより強力で機能的になったんだよ。

4.2 jQueryからAngular、Reactまで

インターネットが速くなるにつれて、ウェブページも重くなっていったんだ。その中にはCSSやJavaScriptがたくさん含まれていたんだ。それを少しでも簡単にするために、さまざまなライブラリが使われるようになったんだ。中でも人気があったのがjQueryさ。

jQuery: JavaScriptの作業を快適に

jQueryはジョン・レジグによって開発され、2006年1月にニューヨークのBarCampカンファレンスで発表された。jQueryの目的はHTMLドキュメントの操作、イベント処理、アニメーション、Ajaxインタラクションを簡単にして、すばやいウェブ開発を実現することだったんだ。

jQueryは、JavaScriptの複雑さやクロスブラウザの問題を隠すシンプルで直感的なメソッドのおかげですぐに人気を集めたんだ。その主な機能は以下のとおりさ：

• DOM要素を簡単に見つけて操作できるセレクター
• イベントの簡単な処理
• アニメーションとエフェクト
• インタラクティブなウェブページを作成するためのAjaxとの統合

jQueryはウェブ開発のアプローチを変えて、開発者にとってよりアクセスしやすく、使いやすいものにしたんだ。

Angular: 動的ウェブアプリケーションへの導入

ウェブページの複雑さが増す中で、Angularフレームワークが登場したんだ。AngularJSは2010年10月にGoogleによって初めて発表された。プロジェクトはミシュコ・ヘベリーとアダム・アブラムスによって、動的な単一ページアプリケーション（SPA）の開発を簡素化するために作成されたんだ。

AngularJSは以下のようなクライアントサイド開発のための強力なツールを提供したんだ：

• ディレクティブを用いた宣言的データバインディング
• HTTPリクエストの処理用の組み込みサービス
• データモデルの変更時にビューを自動的に更新する双方向データバインディング
• モジュール性とコードのテスト容易性

2016年にはGoogleが完全に再設計されたバージョンのAngular（Angular 2以降）を発表し、TypeScriptを利用したスケーラブルで高パフォーマンスなウェブアプリケーションを開発するためのプラットフォームとなったんだ。

React: UIレンダリングの革命

ReactはFacebookのジョーダン・ウォルクによって作成され、2013年3月に初めてリリースされたんだ。Reactは、Facebookの複雑なユーザーインターフェースのサポートとパフォーマンス向上のニーズに応えるために登場したんだ。

Reactは、コンポーネントと仮想DOMに基づくユーザーインターフェース開発の新しいアプローチを導入したんだ：

• 再利用可能で分離されたコンポーネントを作成できるコンポーネントアーキテクチャ
• より高速で効率的なインターフェース更新を可能にする仮想DOM
• デバッグとアプリケーション状態管理を簡素化する一方向データバインディング

Reactはそのパフォーマンスと柔軟性のおかげですぐに人気を集め、多くの現代的なウェブアプリケーションの基盤となったんだ。また、React Nativeのようなモバイルアプリケーション向けの他のライブラリやフレームワークの基盤にもなったんだ。

これらの3つの技術—jQuery、Angular、そしてReact—は、すべてウェブ開発の進化において重要な役割を果たし、それぞれが現代のウェブアプリケーションの作成を大幅に簡素化するための独自のアプローチとツールを提供したんだ。

4.3 Node.js、Electron、React Native

HTML5、CSS3、JavaScript 2016は非常に強力な技術になったんだ。それで、Webはブラウザを超えて本格的なフロントエンドフルスタック技術になったんだよ。そして、最初にこの波を感じたのがバックエンドだったんだ。

Node.js: バックエンドの制覇

Node.jsはライアン・ダールによって開発され、2009年5月に初めてリリースされた。Node.jsの主な目的は、ブラウザ外でJavaScriptを実行できる環境を提供することだよ。これにより、JavaScriptを使ったサーバーサイド開発が可能になったんだ。Node.jsはGoogleのV8エンジンの上に構築されていて、高いパフォーマンスと実行速度を実現しているよ。

Node.jsはノンブロッキングI/O（input/output、入力/出力）を利用していて、メインの実行スレッドをブロックせずに多数の接続を同時に処理できるんだ。また、npm（Node Package Manager）を通じて利用可能な豊富なモジュールエコシステムがあり、さまざまなライブラリやツールの開発と統合が簡単だし、V8エンジンのおかげでNode.jsは高速で効率的なリクエスト処理を実現しているんだよ。

Electron: デスクトップの制覇

デスクトップ向けのクールなUIを書くのは結構大変だけど、HTML5+CSS3がすぐそばにあるじゃないか。だからそれを使おうってことで、プログラマーたちはライフハックを考え出したんだ。アプリケーションのメインウィンドウを開くと、そこにブラウザが埋め込まれ（VebViewコンポーネント）、そのブラウザにHTML5、CSS3、JavaScriptのコードが読み込まれるってわけ。

Electronライブラリは、もともとAtom Shellとして知られていて、GitHubがコードエディタAtomのために作ったものなんだ。最初のElectronのバージョンは2013年7月にリリースされた。Electronの目的は、HTML、CSS、JavaScriptといったWeb技術を使ってデスクトップアプリケーションを開発できるようにすることなんだよ。

Electronは、Windows、macOS、Linuxで同じコードベースで動作するアプリケーションを作成できるようにするんだ。ElectronはWeb技術とNode.jsの力を組み合わせて、ファイルシステムや他のシステムリソースへのアクセスを可能にしているんだ。開発者は既存のWebフレームワークやライブラリを使ってインターフェースや機能を作成できるんだよ。

React Native: モバイルアプリケーション

React NativeはFacebookによって開発され、2015年3月に初めて発表されたんだ。React Nativeの目的は、JavaScriptとReactを使ってiOSとAndroid用のネイティブモバイルアプリケーションを作成できるようにすることなんだ。

React Nativeはネイティブコンポーネントを使用していて、ネイティブアプリケーションに匹敵するパフォーマンスを提供しているんだ。同時に、開発者はiOSとAndroidの両方で動作するコードを書くことができ、開発が簡素化され、サポートにかかる時間が短縮されるんだよ。

Electronの時と同じように、モバイルアプリケーションの全画面にVebViewが開かれ、「サイト」が読み込まれるんだ。それがHTML5、CSS3、JSで書かれているんだよ。みんなはネイティブアプリが携帯電話のウェブサイトを追い出すと予想していたけど、実際にはその逆が起こったんだ。サイトがネイティブアプリを押しのけ始めたんだ。

今やフロントエンドフルスタックソフトウェアエンジニアは世界で最も需要のあるIT職業なんだ。だからフロントエンド開発者になるという決断は正しく、先見性があるんだよ!