東京・新宿のWEB制作会社

ブログ

Vue.jsのことをもっと知ろう

bitbeansアイコン

Bit Beans

  • line
  • はてなブックマーク
  • x

システム開発

  • ＃vue.js
  • ＃フレームワーク

Webアプリやサイトの開発手法は、HTMLやCSSのみで構築された単純なものやAngularやBackbone.js、React、Vue.jsなどのライブラリやフレームワークを使うという手段もあります。社内ではVue.jsを使ってみようという声があり、自分でもまだ使ったことのないフレームワークだったので、Vue.jsを身につけてWebサイトを開発したい！と思い、今回はVue.jsを調査しました。その結果、なんだか良さそうだったので、経過報告とBitBeansではどういったWebアプリやコンテンツの作成に向いているのかを紹介したいと思います。

もくじ

  1. なぜVue.jsで作るのか
  2. どんなサイトにVue.jsは使われているのか
  3. どういうコンテンツを作るのに適しているのか
  4. みておくべきサイト・ブログ
  5. おわりに

Vue.jsとは

Vue.jsとは、JavaScriptのフレームワークの1種です。JavaScriptはほぼ全てのブラウザで動作するプログラミング言語で、フロントエンドアプリケーションの開発でも主として使用されています。
中でも Vue.js は比較的容易に使い始めることができるため、既存のアプリケーションへの組み込みなどにも向いています。

Vue.jsとは何かを現役エンジニアが解説【初心者向け】

なぜVue.jsで作るのか

1. 日本ではVue.js大人気

React、Angular、Vue.jsの３つのフレームワークの中で一番使われているのはどれ何だろう？と気になる人もいると思います。その答えを出すために必死な人もいるようで、とあるブログで、“一番検索されているワードは何かを調査した結果”という記事を見つけ、同じようにGoogleトレンドで調べてみました（React, Angular, Vue.js – 調べる – Google トレンド）。その結果、日本ではVue.jsが一番検索されていました。他の中国や韓国などのアジア圏でも人気がある反面、欧米では知られてもいないくらい検索されていないのがわかります。これは日本でこれらのフレームワークを使う時、Vue.jsを選択する一番の理由になるのかもしれません。多くの人が使う時、書籍やブログなどで知識を得れる機会が多くなるといえるからです。

過去5年間、googleで検索された各フレームワークの人気比較

2. 学習コストが低い？

以前どこかのサイトかブログでVue.jsは「学習コストは低い」と書かれていたことを目にしたことがあります。しかし、本当にそうなのでしょうか。
確かに、たった数行追加するだけですぐにVue.jsの恩恵が受けられるというのは本当らしく、双方向データバインディング※1なんて簡単すぎるくらい早く導入できます。ただ、それ以上のことをやるときはそれなりに学習が必要だといえます。v-model、v-bind、v-on、v-ifとcomponentの仕組みを覚えたあとはライフサイクル※2、Router、Vuex、Nuxt.js…といった具合になるのではないでしょうか。難しいと言いたいわけではなく、少しReactの経験がある私からすると、学習コストは同じくらいなのかなと感じました。これから実装・調査していく中でどれくらいの難易度なのかも知れるとは思いますが。ただ、コードの記述量は少なくすむということと、前述下通り数行で始められることもあり、導入コストは低いとは思うので入りやすいのかもしれません。

※1. フォームにテキストを入力すると同時に画面上に出力するような機能
※2. インスタンスが生成された時、アップデートされた時、破棄された時などに関数が実行され任意の処理を追加できる

3. ReactとAngularのいいとこどり

Vue.jsは、可読性や保守性と楽しさとのバランスが絶妙です。ReactとAngular 1のちょうど中間に位置しているものです。
Vue.jsはHTMLに関してもJSに関しても非常に扱いやすいものです。ビジネスタスクから気をそらせることなしに複雑なテンプレートを扱えるし、サイズが大きくなってもテンプレートの可読性は落ちません。

私たちはなぜReactではなくVue.jsを選んだのか

とあるように、コンポーネントの考え方やpropとステート管理、単方向のデータフロー、仮想レンダリングをReactから取り入れ、Angularからは構文テンプレートを導入し、どちらからもメリットを取り入れたとっつきやすいもののようです。例えるならカツカレーのようなの存在なのかもしれませんね。

Reactとは
Facebookによって開発されているJavaScriptベースのユーザインタフェース構築のライブラリ。

Angularとは
Angularは、Googleによって開発されているTypeScriptベースのフロントエンドフレームワークです。TypeScriptベースなので覚えてない人は学習する必要がありますが、最新のJavaScriptが書けます。

どんなサイトにVue.jsは使われているのか

メリットがわかったところで、このVue.jsというフレームワークを使うと、どのようなWebアプリケーションやWebサイトを作ることができるのか気になりました。まずは実際に制作されたサイトを調べてみることにしました。

Vue.jsが使われているサイト一覧

Webアプリケーションばかりかと思いきや、Webサイトにも使用されているようです。複雑なサイトではないものの、ページの切り替えがスムーズで読み込みを意識させないくらい早いものや、ローディング後のページ表示時に、コンテンツごとにアニメーションを使って現れるようになっているものもあり、アプリを使っているようなリッチな表現を取り入れているなぁと感じました。Vue.jsで構築すると比較的こういったWebサイトを実装しやすいのでしょうか。

どういうコンテンツを作るのに適しているのか

弊社で制作したWebサイトでも多く使われるアプローチとして、検索結果をカテゴリー毎にページで分けて、そのカテゴリーに属する各ユニットを表示するというロジックがあるとします。このようなアプローチをVue.jsで表現するとどうなるか、少しだけサンプルを作成してみました。

[codepen_embed height=500 theme_id=1 slug_hash='wvvbaPM' user='shinji66' default_tab='result' animations='run']
  See the Pen <a href="http://codepen.io/arasdesign/pen/jwGBh">Flat minion</a> by Amin Poursaied (<a href="http://codepen.io/arasdesign">@arasdesign</a>) on <a href="http://codepen.io">CodePen</a>
[/codepen_embed]

このようにちょっとしたコードを書くだけで、カテゴリー分けコンテンツが作成できます。

みておくべきサイト・ブログ

勝手ながらVue.jsを勉強する上で、サイトや書籍など役に立つ文献をまとめてみました。

おわりに

日本ではVue.jsがもっとも使われいるフレームワークのようですし、求人もたくさん載ってますし、色んな意味で習得してもいいかもしれません（笑）
最近ではSvelteとかというフレームワークも出てきて気になるところですが、まだSPAやSSRに慣れてない方はVue.jsで基本を学習してもいいかもしれません。
今後はサンプルを作成しつつ調査できればと思っていますでの、検証報告は当記事の第二弾でお会いしましょう。

bitbeansアイコン

Bit Beans

日々更新中！ Bit Beans、
Xもやってます！

関連記事

人気記事

  1. TOP
  2. ブログ
  3. Vue.jsのことをもっと知ろう