jQueryしか知らない僕が、現代的フロントエンドフレームワークVueを学んで感動した話

初心者必携のVue本↓

jQueryは使えるけど、フロントエンドフレームワークは使えないという方は多いのではないでしょうか。

僕もその一人でした。jQueryでとくに不便することないな、と思っていました。そんな僕が、Vueを学んで感動した話をしようと思います。

VueはjQueryと同じようにcdnから落としてきてすぐに使うことができます。つまり、

をbodyタグの一番下に置いておけばOKです。

この手軽さもVueの魅力です。

jQueryとVueの違い

messageという変数の中身を表示させることを通して、jQueryとVueの違いをみていこうと思います。

jQueryの場合

HTML

JavaScript

さらに、messageの値を変更して、DOMを更新したい時は次のようにします。
ブラウザのJavaScriptコンソールで次を実行すれば、DOMが更新されます。

データの更新とDOMの更新の両方のコードを書く必要があります。

Vueの場合

HTML

JavaScript

これを実行すると、{{ message }}がおはように置き換わり、ブラウザには「おはよう」と表示されます。

見慣れない記法に面をくらいそうですが、落ち着いて見ると

を指定していることが分かります。さらに

のようにdataで登録した変数は{{ (変数名) }}として使うことができます。

JSコンソールからmessageの値を変更してみましょう。

なんと、これだけで書き換わるんです。
DOMの更新はVueが自動で行ってくれます。

Arrayの中身を表示する

今度は、Arrayの中身を全て表示してみましょう。

jQueryの場合

HTML

JavaScript

自分でArrayに対する繰り返し処理を書いて、DOMを操作しなければいけません。

Vueの場合

HTML

JavaScript

Vueではこのように、ulタグにに特殊な属性(v-for)を指定します。この後の{{ fruit in fruits}}は、fruitsの要素をfruitに取り出して、Arrayに対して繰り返し処理を行うことを意味しています。

このv-forの処理もVueがやってくれます。

終わりに

今回のサンプルコードのように、データの状態が見た目と同期する仕組みのことを「データバインディング」と呼びます。

僕が今まで手動でやってきたDOM操作が自動化されていることに感動しました。

jQueryからVueへのステップアップをするにはこの本がおすすめです。自分もこの本で勉強しました。一冊持っておいて損はないでしょう。

【追記】プログラミングスクールのレビューサイトを開発しました。

この度、プログラミングスクールのレビューサイトの「スクールレポート」を開発しました。

プログラミングスクールの人気は年々高まっているものの、高額な受講料を請求しておきながら質の低い教育を提供する悪質なスクールも見受けられるようになってきました。

今回開発した「スクールレポート」では受講生の方のみレビューを投稿することが出来ます。

プログラミングスクール業界がより健全なものになることを願っています。

スポンサーリンク