JSのフレームワーク

Question

私はwebサイトを作りながら学習していて、JSを使って動的なサイトを実装しようとしているのですが、どのフレームワークを使っていいのかわかりません。そこで質問なのですが、JSのフレームワークのjQuery、Angular、React、Vueをどのように使うのか具体例とともに説明してもらえませんか？それとjQueryは時代遅れな風潮ですが、それを学習する必要はありますか？ご教授お願いします。

Comments

[defghi1977]

まずは, vanilla jsを使うに一票

Answer 1

JSのフレームワークのjQuery

jQueryは素のJavaScriptからDOMツリー操作を強化したライブラリです。
aの状態をbに変更するコードを一々書かなければなりません。
シンプルなアコーディオンメニュー位の簡単なものである場合、jQueryを使えばたった数行で実現できますのでjQueryは身軽で良い選択肢といえます。

しかし、例えばサービスの合計金額を自動計算して表示するといった、
巨大な仕組みを構築するケースでは、あっちこっちに合計金額を更新する処理を挟まなければなりません。
その状態で更にオプションを追加する要件が出てくると、既に何箇所も書いてある合計金額更新処理を全て手直しになります。
そして1箇所修正盛れでバグが発生…という悲劇もjQueryの時代ではよく起こっていました。

JSフレームワークはデータのバインディングという概念を用意したライブラリです。
JSをフレームワークにHTMLテンプレートと、束縛する変数（オブジェクト）を渡しておきます。
すると、変数の値が更新されると、表示されているページの状態も自動的に連動して更新されます。

元々JavaScriptには変数を更新すると、勝手に何かの機能が走るという作りにはなっていませんので、
この仕組みを実現するのに結構な準備が必要になります。
従って、ちょっとした動きの場合は数行で実現出来るjQueryで良くね？という感じの住み分けになっています。

どのように使うのか具体例とともに説明してもらえませんか？

自分で調べてください。

Angularはまだ正式リリースされたわけではないですし、
Reactは堅牢なフレームワークですが準備する為のコード量が多いので中級者向けです。
従って初心者がJSフレームワークを触るならVue一択といえるでしょう。

Vue.js公式サイトのインストールには、
<script src="https://cdn.jsdelivr.net/npm/vue@2.5.13/dist/vue.js"></script>
というタグをhead要素内に仕込んでおくという簡単な導入方法が紹介されています。

そのままはじめにを読み始めれば簡単なアプリなら書けるようになるでしょう。

Answer 2

JSを使って動的なサイトを実装しようとしているのですが

そのサイトはどれくらい「動的」なのでしょうか。大は全要素をJavaScriptで構築して、ページ遷移も要素の再描画で代替するSPAから、小はアコーディオンの表示まで、いろんなレベルのものがあります。

で、SPAをjQueryで作ろうとすれば発狂しそうな作業になりますし、ちょっとした動きをするウィジェットをReactで作るのは大げさすぎます。

ライブラリは適材適所で使うべきものなので、どのような状況かはっきりしないと適切なものは決まりません。