スタッフブログ

先日のブログでもありましたが、4月に弊社のWebサイトをリニューアルしました。
今ご覧いただいているこのブログも含まれます。

今回のリニューアルでは新しい技術に挑戦してみたく、フロントエンドにVue.jsを採用しました。
普段のサイトではjQueryを使用しているので、その違いについても書いていきたいと思います。

Vue.jsとは

Vue.jsは、JavaScriptのフレームワークで、フロントエンドの開発に広く利用されています。主な特徴については下記です。

1. リアクティブデータバインディング

リアクティブデータバインディングとは、データと画面の表示を自動的にリンクさせる仕組みのことです。
データが変わると、それに対応する画面部分が自動的に更新されます。手動でDOMを操作する必要がなく、コードがシンプルで読みやすくなります。

2. 宣言的レンダリング

HTMLの中で、データの出力箇所を直感的に記述することができます。
例えば下記のように、HTMLのテンプレートの中で直接 {{ message }} と記述します。messageについてはJS側で定義しています。

3. コンポーネント指向

Vue.jsはコンポーネント指向を採用しています。
コンポーネントは「部品」という意味の言葉です。プログラムを部品化し、部品を組み合わせてアプリケーションを開発していく手法を意味します。

オンラインショップの商品画面を例として考えると、ヘッダーやフッター、商品リスト、購入ボタン等をコンポーネントとして切り分けることが可能です。

コンポーネントのメリットとしては、下記があります。

• 他のページで使いまわすことができる
• 部品が一元管理されるので、保守性が向上する

jQueryとの違いは？

いろいろ書きましたが、正直あまりピンとこない方もいるか思います。
実際のjQueryのコードと何が変わるのか見てみましょう。

例としてTODOリストを実装してみます。テキストを入力して送信するとリストに追加されるという内容です。

jQueryの場合

Vue.jsの場合

それぞれコードを比較してみて、いかがでしょうか。

jQueryではDOMの直接操作が必要となり、コードが見づらく感じます。
HTML側に<li>要素などが書かれていないためHTMLの全容も把握しづらく、構成を変更したい場合にも面倒です。

一方Vue.jsでは、データバインディングにより、todosの内容が変更されると自動的に<li>要素が増減します。
ロジックとviewに関する記述を分離することができ、直感的に分かりやすいですね。

jQueryは使えないのか？

では、jQueryはもう使えないのでしょうか？

将来的には分かりませんが、現時点ではそのようなことはないと思います。
jQueryは学習コストが低く、DOMの操作も簡単なため、一般的なホームページ制作ではjQueryの方が手っ取り早いことがほとんどです。

しかし、上記のようにWebアプリケーション寄りの開発や、DOM操作が複雑な場合は、Vue.jsの方が適しているのではないでしょうか。

それぞれに得意な分野があるので、プロジェクトに合ったものを選択していきたいと思います。