jQuery開発者がVue.jsを始めてみた

なぜ今さら

Vue.jsの勉強を始めました。

実はフロントエンドフレームワークの勉強はもっと前にすべきでした。React、Vue、Angular…みんな数年前から使っているのに、私はまだjQueryでやっていました。

jQueryが悪いわけではありません。10年以上使ってきて、できないことはありません。でも最近のプロジェクトを見ると、jQueryを使うところがどんどん減っています。クライアントからも「Vueでお願いします」という要望が増えました。

開発者の怠惰について書いた記事で「意図的に未経験の技術をプロジェクトに混ぜよう」と言いましたが、今回がその実践です。

ReactよりVueを選んだ理由

三つの中から悩んだ末にVueを選んだ理由があります。

まずラーニングカーブが比較的低いと聞いて。jQueryから移行する人にはVueが適応しやすいという話が多かったです。HTMLテンプレートベースなので、既存のマークアップ構造と似ているからです。

ReactのJSXはちょっと馴染みがありませんでした。HTML の中にJavaScriptを書くのは慣れていますが、JavaScriptの中にHTMLを書くのは最初は違和感がありました。

Angularは巨大すぎるように見えました。TypeScript必須なのも負担でした。

第一印象

Vueを初めて触った時の率直な感想。

リアクティブデータバインディングが新世界です。

jQueryでDOMを直接操作していたのと比べると、本当に楽です。データを変えると画面が自動的に更新されます。jQueryでこれをやるには$('.target').text(newValue)のようなコードをいちいち書く必要がありました。

// jQuery方式
$('#counter').text(count);
$('#status').text(count > 10 ? '超過' : '正常');
$('.counter-display').toggleClass('warning', count > 10);

// Vue方式
data() {
  return { count: 0 }
},
computed: {
  status() { return this.count > 10 ? '超過' : '正常' }
}

コンポーネントシステムも良いです。再利用可能なUIパーツを作れるという概念は知っていましたが、実際に使ってみるとプロジェクト構造がスッキリするのを感じます。

難しい点

もちろん簡単なことばかりではありません。

状態管理（Vuex）が最初は理解できませんでした。なぜこんなに複雑にする必要があるのか？グローバル変数を使えばいいのでは？というのが最初の感想でした。でもプロジェクトの規模が大きくなると必要性が分かるそうなので、とりあえず学んでいるところです。

ビルドツールも馴染みがありません。jQueryはscriptタグ一つで終わりでしたが、VueはwebpackやViteなどビルド設定が必要です。npm、node_modules、package.json…フロントエンドのエコシステムがこんなに複雑になっていたとは。

これから

まずは簡単なプロジェクトにVueを適用してみようと思います。以前jQueryで作った管理画面をVueで作り直すのが良い練習になりそうです。

遅いと思った時が一番早いという言葉がありますが…正直ちょっと遅いです。でもAWSも遅くから始めましたが結局うまく使えているので、Vueもそうなるのではないでしょうか。

新しい技術を学び始めると、また初心者に戻った気分で不思議と楽しいです。分からないことがあると検索するようになり、検索していると自然とコードを書くようになる。これが怠惰を克服する方法だと書きましたが、本当にそうみたいです。