さてさて、この間「Ajax送信の歴史！fetch、axios、jQuery、XMLHttpRequest」という記事を公開したのですが、その際にふとあることが頭に浮かびました。

それは、

「そういえば、JavaScriptのフレームワークもいろいろ歴史があるなぁ😊」

というものです。

元々は、JavaScriptだけでなくPHPでも「フレームワーク」と呼ばれるものは使っておらず、いわゆるフルスクラッチで開発をするのが主流でしたが、それが会社・個人が独自フレームワークを使うようになり、現在はほぼオープンソースのフレームワークがメインになっているかと思います。

そこで！

今回はそんな中でも特に移り変わりが大きかったJavaScriptフレームワークの（あくまで私の中の）歴史をお届けしたいと思います。

ぜひ、読み物として楽しんでいただけると嬉しいです😊✨

「気がつけば、いろいろ使ってきました😊」

フレームワークなしは根性が必要

繰り返しになりますが、元々は「フレームワーク」と呼ばれるようなものがなかったのでJavaScript開発ではよくgetElementById()を使って開発をしていました。

var el = document.getElementById('input-id');

現在でもこういったコードを書きますが、当時いつも思ってたことがありました。

それが・・・

document.getElementById()って書く量多すぎ・・・（いっぱいあると可読性も悪い😫）

というものでした。

さらに、もうひとつのdocument.getElementsByTagName()に至っては、毎回30文字近くタイプしないといけない上に、キーボード配列のせいで（私の利き腕ではない）左手への負担が大きく、「できれば使いたくない、、、」といつも思ってました（笑）

しかし、そこに救世主が現れました❗
本格的なJavaScriptフレームワークの登場です。

Prototypeは救世主だった

私が最初にJavaScriptフレームワークとして注目したのはPrototypeだったのですが、すぐに仕事でも採用することにしました。

・・・というのも、先ほど書いたdocument.getElementById()を

$() に置き換えることが出来る😆✨

機能があったからです。

つまり括弧を含めない場合、タイプする文字数が23文字 → たった1文字と激減させることができたんですね。

しかも、現在は当たり前のこの書き方も、当時はとても画期的なことでした。

なぜなら、「$」以外だとほとんどJavaScriptの構文エラーになるからです。

実際に試してみてもらえば分かるのですが、以下の書き方は全てエラーになります。

// ⚠これは全てエラーになります

!();
#();
%();
=();
~();
|();
*();
>();
<();

（おそらくエラーにならないのは、_()ぐらいじゃないでしょうか）

ということで、Prototypeをマストで使うようになっていきました。

jQueryを優先させるようになる

しかし、その後すぐに新たな「人気者」が現れました。
その後JavaScript界を席巻することになる超有名フレームワークjQueryです。

jQueryも$()が使えるということでPrototypeと同じような位置づけでした。しかし、少しずつjQueryを使うようになっていきます。

理由は、プラグインの存在です。

つまり、jQueryは独自のプラグインをつくりやすかったため、どんどん世の中に便利なjQueryプラグインが登場することになります。

すると、「あのプラグインを使えば難しい開発も簡単だ❗」となり、積極的にjQueryを使うようになったという訳ですね。

また、val()やcss()など直感的に分かりやすく、短いコードで書くことができるという点もjQueryを優先させた理由のひとつでした。

Angularが新時代を感じさせた

長らくjQueryの黄金時代が続くことになりますが、やはり時代は止まりません。

その後、その黄金時代に一石を投じるフレームワークが登場します。
それが、Googleが開発したAngularです。

Angularのアプローチ方法は、jQueryとは全く違っていて「先にルールを決めておく」というやり方でした。

つまり、Angularの変数に変化があったら自動でHTML側にも反映され、逆にHTML側に変更があったら、今度はAngularの変数が変更されるという「Two way binding」です。

この機能は現在人気のReactやVueにも受け継がれています。

なお、個人的にはTwo way bindingに感動してjQueryからの卒業も考えてたのですがAngularは少しクセが強く、さらにjQueryのプラグインが必要な場面もまだまだ多かったので、メインとして使うというまでには至りませんでした。

Reactが新時代の中心に

その後、SNSの巨人フェイスブックがReactを投入してきます。

Reactは、その使いやすさから現在もっとも人気があるといってもいいフレームワークとなりました。

ただ、ある時期を境にしてReactはコードを書いたらビルドするという手順を推奨するようになってしまい、ここがネックになり私は使うのをためらうようになってしまいました。（ビルド待ちは開発テンポを狂わせてしまうので・・・）

また、バーチャルDOMがあまり肌にあわず、結局jQueryを採用することが多かったです。

Vueが開発にシンプルさを提案

長らく「Two way binding」が使いたかったものの、ピッタリ合うものが見つからずjQueryを使っていましたが、あるときVueの存在を知ることになり「どうせまたjQueryに戻るだろうけど・・・」と、ダメ元で使ってみました。

すると、それは私が常々感じていた「最近のフレームワークは複雑すぎてホントに開発効率あがってる❓❓」という疑問をふっとばすものでした。

特に可読性はいいですし、スピードも申し分なく、ビルドも必要ない。

結果として、ここ数年はVueをメインとしてjQueryを併用する形での開発が多くなりました。👈 現在はここです。

おまけ：Alpine.js

ちなみに以前、「Laravel + livewireで誕生日から年齢を自動計算するサンプル」という記事を書いた時にalpine.jsという新しいフレームワークがあるのを知ることになりました。

使い方はほぼVueと同じなのですが、とてもミニマル（必要最低限）なフレームワークです。

現在のところVueがメインなのは変わりませんが、alpine.jsにも注目はしていこうと考えています。

おわりに

ということで、今回はいつもと違って個人的なJavaScriptフレームワークの歴史をまとめてみました。

こうやって振り返ってみるとやはりJavaScriptの開発もいろんなひとの知恵のおかげで、楽＆スピーディに開発できるようになったもんだと、心から感じます。（感謝感謝です😊✨）

さぁ、これからもどんなゲームチェンジャーが現れるのかが楽しみですね。

ではでは〜❗

「どこか認識が違ってたら
ぜひ（こっそり）教えてください🙏✨」