😸

[歴史から見る今]フロントエンドとフレームワークの歴史とそこから見た現在多く使われているフレームワークについて

2023/02/07に公開

フロントエンドエンジニア

tech

フロントエンドとは

フロントエンドの関心事（Front-end focused）を意訳すると…

Frontend and backend - Wikipedia

HTML, CSS等のマークアップ言語、JavaScriptやjQueryなど
AJAX
SPA、 React, Angular, Vue.jsなど
Webの性能,画面がスムースに動く
レスポンシブウェブデザイン,スマフォ・PCどのデバイスでも使い易
さまざまなブラウザーで正しく表示できる
ヘッドレスブラウザでのE2Eテスト
JavaScriptや画像等の自動変換/構成ツール、Webpack
SEO（検索エンジン最適化）
アクセスィビリティ
画像ツール（例Photoshop）の使い方
UI（ユーザインタフェース）

となっている。
フロントエンドエンジニアは、Webデザイナーのデザインをもとに、
HTML、CSS、JavaScript、PHPの設計や実装、WordPressなどのCMS（コンテンツマネジメントシステム）構築やカスタマイズを担当していく。

フロントエンドの歴史

＜簡単な年代表＞

年代	時代	開発者
2000	[HTML時代] インターネットが普及、ブログサイトやECサイトが立ち上がり始めた時期。	・Webデザイナー(UIデザイン)　/ ・WEB開発者(バックエンド)・画面作成は両方
2005〜2015年	[Ajax時代]・JavaScriptが再度注目される	・Webデザイナー(UIデザイン)　/ ・WEB開発者(バックエンド)
2015〜2022年	[SPA時代] ・　SPAの走りなAngularJS の登場	★フロントエンドエンジニアが登場(React,Vue) / ・WEB開発者(バックエンド、APIサーバー)/・WEBデザイナー(UIデザイン)

2004: Adobe Flex

モダンWebアプリを作るための開発環境。

当時のHTML, CSS, JavaScriptを使用した平均的なWebアプリと比較して高いUXを実現しており、
RIch Internet Application(RIA,リッチインターフェース)とも言われていた。

2006 : jQuery誕生

jQueryの主な機能はDOMを少ないコードで操作する機能
<jQueryの優れている点>

DOM操作やイベント処理が容易
ブラウザ間の非互換性をサポート

<デメリット>

複雑な条件分岐がある場合、状態とDOMの整合性を取ることが難しい。
⇒ 宣言型プログラミングの台頭まで続く問題。

宣言型プログラミングとは
実現したいことの過程 (手続き) を一つ一つ書くのではなく、
実現したいことの結果を記述する方式のもの。
⇒ DOMの最終系をイメージしやすい.
状態の変化 (変数の値の変化) をフレームワークが検知して自動的に行う。

型	責務	作業担当
手続き型	ビジネス要件どおりに変数を書き換えること	Web開発者
宣言型	変数の値に応じて適切な Web ページを表示すること	Webデザイナー

2009 : Node.js誕生

V8Javascriptエンジン上に構築されたJavascript実行環境の1つ。
サーバサイドでJavascriptを動かすことができる。
イベント駆動型プログラミング言語でC10K問題を解決する。

C10K問題　
webサーバーサーバーソフトウェアとクライアントの通信において、クライアントが約1万台に達すると、
Webサーバーのハードウェア性能に余裕があるにもかかわらず、レスポンス性能が大きく下がる問題。
[ 原因 ] Apache HTTP Serverの駆動方式.

C10K問題 - Wikipedia

2010 :Angular.js

Webフロントエンドフレームワーク.
HTMLを拡張した宣言型プログラミングと、JavaScriptによる手続き型プログラミングを組み合わせて行う方式.
AngularJSは2021年12月を以てサポート終了している。
ReactやVueが出て生きていこうはあまり使われていない。

2012 : TypeScript誕生

JavaScriptの派生プログラミング言語。
主な役割はJavaScriptにデータ型のドキュメントを付け、正しいデータ型を指定しているかどうか検証すること。

JSの派生言語は多くあるが、その中でもTypeScriptが多くの需要を占めている。

coffeescript vs flow-bin vs purescript vs typescript | npm trends

2013 :

React誕生

仮想DOMや、一方向データフロー、Fluxといった機能が登場。

仮想DOMによって、データ更新に伴うレンダリングが差分更新となり、パフォーマンス向上する。
仮想DOMを使うからページの一部を更新するのが速い
宣言的記述ができるから複雑なコードでも読みやすい。
jsによるdom操作による差分更新を適切にやってくれ、更新処理をわかりやすく書ける。
のような特徴があり、現在普及してきていてい多く使われている。

Hugo誕生

Go製のSSG（Static Site Generators）。

生成する元データは、HTMLだけでなくMarkdownもサポート
手軽に、かつ素早く静的コンテンツを生成できるようになった。

2014 :Vue.js

GoogleでAngularJSを使用していたEvan Youが、Vue.js開発。
インタラクティブなUIを構築するためのJavaScriptライブラリ。
コンポーネントに焦点があたっていて、
プログレッシブフレームワークという特性があり、段階的に導入できるメリットがある。

プログレッシブフレームワーク　(Progressive Framework)
https://gihyo.jp/dev/serial/01/vuejs/0001

[特徴]

シンプルなAPIやHTMLベースの平易なテンプレートで学習コストが低い
リアクティブなデータバインディング
コンポーネント指向のUI
ファイルサイズが軽量（min+gzip圧縮16kb）
レンダリングが早い

2015 : Redux

Redux
JavaScriptライブラリ.
React向けの状態管理ライブラリになっているが、Reactから切り離されているため、他のライブラリでも使用可能。

Reduxの影響により、Angularはngrx、Vue.jsはVuexというライブラリが派生.

2016:

Next.js / Nuxt.js

Next.jsはReactをベースとし、Nuxt.jsはVue.jsをベースにした拡張フレームワーク。
Next.jsとNuxt.jsはベースが違うだけで、フレームワークに含まれる機能は似ている。

[拡張フレームワークとは]
データを活用したアプリケーションやツールを Looker で構築するための
完全ホスト型の開発プラットフォームです。
インフラストラクチャを立ち上げたり、ホストしたりする必要がなくなり、
デベロッパーは優れたユーザーエクスペリエンスの構築に専念できる.

svelte

フロントエンドコンパイラ.
宣言型と手続き型を組み合わせたプログラミングを行う。
コンセプトは、

バグの数を減らすために記述するコード量を減らす
フレームワークのないフレームワーク
この二つにより、開発効率と動作速度の改善を実現している。

コンパイラとは
人間が分かる言葉で書いたプログラムの元ネタ（ソースコード）を、
コンピュータが分かる言葉に変換してくれるプログラムのこと.

2022 : SvelteKit

svelteをベースとした拡張フレームワーク。
SvelteKitは2022年8月時点ではまだベータ版です。現在正式リリースに向けて開発が進められている。

今はSPA時代

SPA(single-page application)
一言で言うと、JavaScriptが全てのビュー（画面）を組み立てるもの。
ユーザーの操作に対して必要な部分のみを読み込むことで、
高い操作性を実現するWebアプリケーションの設計構造。

今までは、操作の度にページ全体を読み込んでいたが、
SPA実装ページはJavascriptでHTMLの一部を差し替えて必要な部分だけを読み込む方法。

<メリット>

Webで表現できることの幅が広がる
⇒ JSのフレームワークも豊富。
UX向上

<デメリット>

コスト高い
初期ローディングが遅い
SEOで不利

利用者が多い人気のSPAフレームワークとしては、「React」「Vue.js」などが挙げられる。

2022年には発表されたフロントエンドフレームワークについてのページ

利用率

1. React
2. Angular
3. Vue.js
4. svelte

満足度

1. solid
2. svelte
3. Qwick　　　　　　この３つは最近だからと言うのもある
4.　React
5.　Vue.js
最近のものはまだデータが浅く大きい企業での使用はあまりないため、
ReactとVue.jsが高いと言える。