JavaScriptフレームワークってなんなの?
最近vueやsvelteを学習し知識をつけているのですが、そこからスタートをしていることで色々な弊害が生まれています。
それは以下の点です。
・フレームワークの書き方なのかJavaScriptの書き方なのかわからない
・フレームワークの恩恵を感じられない
・そもそもJavaScriptってなにvueのことはわかるけど
このように今流行りの技術から学んでしまうと基となるJavaScriptが身についておらず汎用性がなく、そのフレームワークの書き方しかできません。
そこからJavaScriptを学んでいる中でそもそもフレームワークってなんなんすか?何を解決してんの?と疑問に感じ記事にさせていただきました。
JavaScriptの歴史
JavaScriptとは
JavaScriptは1995年に誕生しました。
当時はNetscape Navigator 2.0というブラウザに初めて実装されましたが、IEがJavaScriptと互換性のあるJScriptを開発しています。
当時はHTMLとCSSだけの静的ページが一般的で文字だけのシンプルなページばかりでしたが、JavaScriptの誕生によってリッチな表現が可能になりました。
しかし先ほど話したようにこの時点ではブラウザ毎によってJavaScriptの仕様が異なっており、フロントエンジニアを相当悩ませていました。(まじで死にたいレベルらしい)
ECMAScriptとは
JavaScriptがブラウザ毎に仕様が異なることは先ほど言ったように開発者への負担が半端ないし、セキュリティ的にもダメだと言うことで標準化への取り組みが始まります。
そして1997年に国際標準化団体ECMAインターナショナルがJavaScriptのコアな部分を標準化しましたその言語をECMAScriptと言います。
現在では2016年6月にECMAScript2016(ES6)が公開されています。
しかし標準化されても弱点はありました。それは以下の点です。
・今では簡単にかけるコードが複数行に渡り書く必要があった(コードの複雑化)
・標準化されていてもブラウザが提供したweb APIの取得方法に差異があった
そのため標準化されていても開発者は常にブラウザの互換について考えた開発をしなければなりませんでした。
jQueryの革命(と言っておきます)
先ほどお話しした課題を解決してくれたのがjQueryです。
ブラウザ毎のweb APIを1つにまとめたことで、ブラウザの差異を無くしてくれました。
またJavaScriptの記述量をより簡潔にしてくれました。
Queryの最大の功績はなんと言ってもAjaxを簡潔かつわかりやすく書けることでしょう。
これによりサーバー↔クライアント間の通信がページ転移を伴わないでもできるようになりました。
これは現在のSPA(シングルページアプリケーション)の元となります。
僕自身はその時代を経験していないのですが、こういった声もあり学習を通してすげーじゃんjQueryと讃えたいです。(jQueryはクソではないと思っています)
時代が変わるjQueryは終わったのか?
フロントエンジニアの学習を始めた頃からよく耳にする言葉「脱jQuery」
僕はjQueryがダメだとは思いません。
でも、jQueryが解決したい問題はすでに解決され、今の時代は違う問題に注目されていると思います。
jQueryが解決したかった問題は「ブラウザの差異・コードの複雑さ」です。
しかし時代が進みブラウザの際は消え、標準化は進み今では気にしなくなりましたし、jQueryの機能はJavaScriptの標準APIに取り込まれています。
またjQueryはDOMへの依存という以下のデメリットがあります。
・DOMの変更に弱い
ID以外のセレクタでの操作では影響範囲がでかすぎる
・HTMLとDOMの乖離によって狙った挙動ができない場合がある
・JSをコーディングしながらHTMLを気にしないといけない。
規模が大きくなればなるほど、これらを気にしないといけなく自分の首を締めることになってしまいます。
本題:JavaScriptフレームワークってなんなの?
JavaScriptフレームワークは以下の問題点を解決するためだと思います。
・jQueryの問題であったDOMへの依存を解消する
・影響範囲が分かるように役割ごとに閉じ込める
・JSだけでJS同士の依存関係を表現できる
・開発環境の統一
■DOM依存
先ほど説明したjQueryのDOMへの依存という課題から、「仮想DOM」と言う概念が生まれます。
■影響範囲
また影響範囲を役割ごとに閉じ込めるためにコンポーネント思考が採用されている。
■依存関係を表現
依存するライブラリはJavaScriptでimportできず、HTML側に<script src="">
が必要になる。
フレームワークを利用することによって、1つの環境に閉じ込めることができます。
■依存関係を表現
また開発者がオリジナルのルールを作って開発を行ってきたが、それでは再利用性が低く品質と保守性に欠けます。
そのため予め必要な骨組みが構築され、開発環境の統一をしています。
結局のところJavaScriptフレームワークはJavaScriptの歴史の流れによって感じた課題感を解決するために今は必要なのかなと思います。