様変わりしたフロントエンド開発 - Webデザイン・プログラミングオンライン個別指導のAkros

フロントエンド開発はJavaScriptベースで行うのが主流になってきました。
何故一度は闇に葬り去られたJavaScriptが脚光をあびるだけではなく、開発の根底をJavaScriptで開発するようになったのには理由があります。それではフロントエンド開発の歴史を振り返ってみましょう。

html

1989年、ティム・バーナーズ＝リーはハイパーテキストマークアップランゲージの略語であるhtmlを提案し、1990年5月にコード化しました。
インターネットはhtmlができる迄はパソコン通信という、今でいうチャット機能のみでした。htmlを使いブラウザに文字情報、リンク、画像を表示させることが可能になりました。

css

カスケーティングスタイルシートを使いhtmlのみでは表現が難しかったレイアウトを自由自在に操る事ができるようになりました。
1994年にホーコン・ウィウム・リー氏により提唱されました。

JavaScript

ブラウザにインタラクションを付与するJavaScriptは1995年に開発され、当時の主流ブラウザであったNetscape Navigatorに採用されました。しかしその後、Windowsにバンドルする事でシェアを伸ばしていったInternetExplorerが独自のJavaScriptを開発し始め、ブラウザにより異なるバージョンが採用された事により見ているブラウザによっては動かなかったり表示されない状態になりました。その後、JavaScriptを利用したポップアップ広告が多用され、ブラウザ側でポップアップ広告をブロックして表示させないようにする処置としてJavaScriptの読み込みをしない設定にされるようになり、急速にすたれていきました。

Flash

急速にすたれたJavaScriptの代わりとなったのがMacromediaが開発したWEBページに動きをつけるアプリ、Flashでした。1990年代後半から2014年位まで脚光を浴びました。
ベクターイメージをActionScriptを用いて制御するUIを作り出す事ができます。
2005年4月にはadobeに買収されAdobe Flashとなりました。
動きを付けたサイトはリッチコンテンツと呼ばれ一時期Flash全盛期がありましたが、iPhoneが採用しなかった事でスマホの普及につれて急激にすたれていきました。
2016年にAdobe Animateに名称を変更、2020年末にはAdobeがFlash Playerの開発と配布を終了すると発表しています。

Ajax

JavaScript組み込みクラスによる非同期通信を利用し、ダイナミックHTMLで動的にページの一部を書き換える技術です。従来のWebアプリケーションではサーバにリクエストを送信後、レスポンスを新たにウェブページとして受け取ることで画面遷移が発生していましたが、Ajaxにより画面遷移を伴わない動的なWebアプリケーションの製作が実現可能になりました。Node.jsが普及し始めた2010年位から、JavaScriptがWebアプリケーション全体のコーディングをカバーしつつあります。サーバサイドJavaScriptを用いることで、サーバ側におけるデータ形式変換の必要なしに、Ajaxを実現できる環境が整い始めています。

Node.js

そして今では、フロントエンド開発はこのJavaScriptのサーバーサイド言語であるNode.jsベースで行うのが主流になってきました。

SPA

SPAとはシングルページアプリケーションの略語です。文字通り日本語にすれば1ページしかないWEBサービスを提供するアプリケーションですが、その仕組みはページ全体がダイナミックに変わり、画面遷移がサーバーからのレスポンスに依存しないアプリケーションの事をいいます。
Ajaxが静的ページの一部をリッチにしていたのに対し、ページ全体をダイナミックに変える事のできる技術です。

Javascriptフロントエンドフレームワーク

今主流となっているフロントエンド開発はNode.jsベースのフロントエンドフレームワークです。その多くはJavascriptの新規格であるES6で書かれています。現行ブラウザで採用されているJavaScriptはES5です。ES6で開発し、Babelなどのコンパイラを使用してES5に変換して実装します。

現在主流の3つのフレームワーク

WEBサービス系ではReact、Vue.js、AngularJSです。何が主流かを知るにはGitubでの星の多さが一つの指標とになるでしょう。

React

FaceBook社が2013年に開発したUIを構築するためのライブラリです。Reactライブラリを支えるエコシステムを含めた形をフレームワークという事ができるでしょう。UIを変化させる時に直接htmlを書き換えるのではなく、メモリー上でDOMツリーを構築しておき、差分のみを書き換えるというバーチャルDOMを使用するのが特徴です。

Vue.js

2014年にEven Youによって開発されました。特徴は、ReactのようなバーチャルDOMをもちつつテンプレートがReactほど完全にJavaScriptベースではないため、ノンプログラマのデザイナーにもわかりやすい構成になっています。直接DOM要素を操作するコードが不要であり、非常にシンプルなコードです。