この記事を書いている私もこれまで、HTMLにちょっとしたJavaScriptを組み合わせ、動きのあるWebサイトを作ってきた経験はありました。
しかし、最近スマホなどで人気のあるサービスを使っていると、Webサイトとはとても思えないほど快適に使えるものがたくさんあります。そんなイマドキなWebアプリケーションを作りたいと思ったときに、「学習コストが低い」という評判をみて、Vue.jsというJavaScriptフレームワークにたどりつきました。
今回は、そんな筆者が実際にVue.jsでWebアプリケーションを開発した経験をふりかえり、未経験者にもオススメできる理由を説明していきます。
JavaScriptフレームワークって？
フレームワークとは何か？
一言でフレームワークといっても世の中にはたくさんありますが、主にアプリケーションを開発したり、動かしたりするための機能を提供してくれるソフトウェアです。
フレームワークを使うと、アプリケーションを開発するための環境を簡単に用意することができたり、必要な機能だけプログラミングすればアプリケーションとして動くようにしてくれるなど、開発がとても楽になります。
つまり、自分が「実現したい！」と思っている機能により集中できるようにしてくれるのです。
JavaScriptフレームワークにもいろいろある
JavaScriptを使う人たちに向けて作られたフレームワークも世の中にはたくさんあり、その目的も様々です。よく知られているJavaScriptフレームワークとしては次のようなものがあります。
- Angular
- React
- Vue.js
- Ember.js
- Meteor
- Mithril
- Node.js
- Polymer
- Aurelia
- Backbone.js
Vue.jsは、Webブラウザ上で動くアプリケーションを作るために開発されたJavaScriptフレームワークであり、みなさんが普段パソコンやスマホのブラウザで見ている「画面機能」を対象にしています。
Vue.jsそのものとVue.jsを使ってつくられたWebアプリケーションも、実際にはあなたの目の前にあるブラウザ上で動作します。
そういった意味では、ユーザーに一番近いところで動くということを意味する「フロントエンド」というキーワードとともに、フロントエンドフレームワークなどと呼ばれることもあります。
先ほど挙げたJavaScriptフレームワークの中で、AngularやReactとよく比較されるのもそこに理由があります。
Vue.jsとは？
Vue.jsが生まれた背景
Vue.jsは、もともとGoogle在籍中にAngularを利用するプロジェクト深く関わっていたエヴァン・ヨーさんによって開発が始められました。
Angularがあったのになぜ？と思われた方もいらっしゃるかもしれませんが、私は次のような背景があったからと理解しています。
Angularが多機能すぎだった
AngularはGoogleが開発しオープンソースで提供しているWebアプリケーション開発のためのフレームワークです。Googleが自社で提供しているサービスなどにも使われているため、歴史もあり採用実績も非常に豊富です。
Webアプリケーションを開発するために学ぶのなら良さそうに見えるのですが、いくつか初心者には高いハードルがあるのです。
- 大規模開発にも耐えうる、非常にたくさんの機能をもつフルスタックフレームワークであること
- 開発言語がTypeScript(JavaScriptの方言のようなもの)であること
つまり、簡単に何かを作ってみようと思ってもJavaScriptだけの知識だけではアプリケーションを動かすこともできず、初心者には学習コストが高すぎるのです。
また、非常に多機能なフレームワークであるため、どうしても動作が重くなってしまう点もデメリットの一つです。(最新のバージョンではだいぶ改善されていると聞いていますが)
Reactの爆発的な普及
Facebookが開発し、オープンソースで提供しているWebアプリケーション開発のためのフレームワークですが、ブラウザ上で動く「画面機能」部分だけを対象にしているため、非常に軽量に動作します。
Facebookのサービスが提供する画面機能がサクサク動くその印象と、開発者寄りの使い勝手になっていることもあって、爆発的に人気を得て一気に拡がりました。
こちらも初心者にはいくつか高いハードルがあります。
- JSXという言語を学ぶ必要がある
- 単体では動かせず、Node.jsという環境で開発する必要がある
JavaScriptでWebサービスをバリバリ開発してきた人にとっては、同じような感覚でモダンなWebアプリケーションも作れるぞ、となるのかもしれません。
ですが、逆にReactから入ろうと思うとむずかしく感じるのでは？と思います。実際、私もReact学ばなきゃと思った時期がありましたが、プログラミングに慣れていないとJSXがわかりにくく、学習コストが高そうという印象をもちました。
Vue.jsの特徴
Vue.jsの特徴を一言でいうと、AngularやReactが持っている素晴らしい部分を取り込みつつ、自分のレベルに合わせて学習しながら使いこなせることではないかと思います。
ここまでVue.jsをフレームワークといってきましたが、中心となる機能はReactに近い「画面機能」部分だけのシンプルなライブラリから使い始めることができるようになっています。
そのほかの特徴としては次のようなものがあります。
シンプルである
Vue.jsを使ったアプリケーションをプログラミングするとき、Webの一般的な技術である、HTML・CSS・JavaScriptそれぞれの書き方に近いイメージで書くことができます。
そのまま使えるというわけではありませんが、まったく新しい書き方を覚えるよりは、サンプルアプリケーションなどの理解も早いと思います。
高速に動作する
Vue.jsの基本機能となるライブラリは一番小さいタイプでわずか20キロバイトほどしかありません。
Vue.jsの中身の動作にまでは触れませんが、ライブラリが小さいことは、ダウンロードも短くなりますし、動作するときの処理もコンパクトになっていることを意味します。
拡張性が高い
Vue.jsのアプリケーションの基本的な構造は、HTMLの部分、JavaScriptの部分、CSSの部分、の3つをまとめた「コンポーネント」というものになっています。
このコンポーネントをいくつか組み合わせて一つの画面を作ったりすることもできますし、Webサイトの左にあるメニュー部分やブログにあるコメント機能のように、いつでも表示されるような共通的なコンポーネントを作って使い回すこともできます。
このような拡張性が考えられている部分も、使い続けてみようと思う私たちからすると心強い特徴と言えるでしょう。
画面機能だけならjQueryでもよいのでは？
Vue.jsが画面機能部分のライブラリだ、というのであれば、jQueryをこれまで使っていたプログラマはこう思うかもしれません。
私が冒頭で書いた「HTMLにちょっとしたJavaScriptを組み合わせ、動きのあるWebサイト」という説明ですが、作ろうとするものがそんなに複雑でなければ無理に乗り換える必要もないですし、実際jQueryの方が向いていることもあるでしょう。
Vue.jsのようなJavaScriptフレームワークが必要とされてきた背景にはもう一つ、次の理由があります。
Webアプリケーションが高度化されてきた
ここでは先の疑問に答えるため、jQueryで問題になる部分だけ説明します。
jQueryはブラウザがHTML/CSSを読み込んだ結果を格納している「DOM」というメモリ領域を操作しています。「セレクタ」と呼ばれる機能を使い、DOMに読み込まれた画面部品(例えばボタンなど)の状態を書き換え、その変更をブラウザがDOMから読みだして書き換え表示する、といった動きをしています。
このDOMの中のデータ構造は、ツリー構造と呼ばれる形になっており、セレクタで指定された部品を探すには、このツリー構造をたどって見つけていく必要があります。ですので、ひとつふたつならともかく何百個も<div>タグがあるような画面を扱うと処理が重くなってしまい、最悪の場合いつまでも処理が終わらないかもしれません。
一つ例を考えてみます。Googleのサービスであるスプレッドシートの画面を開いてみましょう。データを入れるセルもそうですが、たくさんの機能ボタンがあり、どこかのセルで右クリックすればメニューも出てきます。「jQueryで作ってくれ！」と言われたら、私にはこの操作感を実現できるのか、まったく見当もつきません。
Vue.jsのようなJavaScriptフレームワークは、「仮想DOM」と呼ばれる仕組みを使って、DOMで扱っていた画面部品の状態やデータをJavaScriptだけの世界に構築します。そして、本当にブラウザ上の表示を書き換えなければならないときだけ、DOMを操作するようにしてくれます。そうすることで、重い処理が最小限になるように工夫されています。
さらに「コンポーネント」の仕組みも、Googleスプレッドシートのような複雑なアプリケーションを実現するのに一役買っています。
そうなんです。jQueryでは扱いきれないほど、複雑な機能をサクサク動かす必要が出てきたのです。逆に言うと、Webアプリケーションにそこまでの必要性がなければ、あえて乗り換える必要がない、と判断することもできます。
Vue.jsが初心者に易しい3つの理由
理由その1: 「プログレッシブフレームワーク」という設計思想
Vue.jsの設計思想には、フレームワークはどんなときにでも、どんな規模でも、段階的に柔軟に使えるべきである、という考え方があります。そのように段階的に拡張していけるように設計されているため、開発者のエヴァン・ヨーさんはプログレッシブフレームワークと呼んでいます。
そのため、使う人の習熟度があがったとき、アプリケーションに必要な機能が足りなかったときなど、そのときにVue.jsが提供するさまざまな機能を組み込んで使うことができるようになっています。
まさに自分の成長に応じて使いこなしていくことができるフレームワークと言えると思います。
理由その2: 日本人にも易しい
公式サイトのガイドやチュートリアルを含め、Vue.jsはリリース当初から日本語を積極的にサポートしています。
また、公式サイトが提供している内容も非常に充実しており、基本的なところは他のサイトに頼る必要がないくらい、説明されていると思います。
JavaScriptフレームワークは進歩も速く、知りたい情報が海外が発信元となることも多く、本家サイトよりも掲示板などを見ないとわからない部分も多いのが実情です。
その点Vue.jsは、公式サイトの情報を読んでおけばよほどのことがないと困ることがないとも言われており、日本人がイチから学習するのにも向いていると思います。
理由その3: サポートツールの充実
自分の習熟度があがって、より高度な開発に移っていく場合においても、Vue.jsはフレームワークとしてさまざまな手助けをしてくれます。
例えば、アプリケーションに問題があってWeb画面が表示されなくなってしまった！という場合があったとします。その場合、問題がどこで発生しているのか調べたいことがあるでしょう。
Vue.jsではブラウザの拡張機能として、アプリケーションの動作を一つ一つ止めながら確認できるデバッグツールが提供されているので、そのようなトラブルにも対応できる環境がすぐに用意できます。
また、開発を始める人に対して開発環境を準備してくれるコマンドなども用意されていて、自分の開発スタイルに合わせたサポートツールをすぐに使える環境が提供されています。
Vue.jsの将来性はどうなのか？
段階的に学習できるといっても、学んでいるうちに世の中から取り残されている・・・そんな心配はあると思います。
Googleトレンドで調べてみた
よく比較されるAngular・Reactと検索されている状況について、Googleトレンドでグラフを作ってみた結果はこちらになります。
Vue.jsは過去に、2大巨塔であるAngularとReactを抜いてトレンドに、といったニュースがありましたが、今もその傾向は続いていると言えるでしょう。
Vue.jsの今後
Vue.jsはオープンソースとして公開されているので、プログラムはGitHubというサービスで公開されています。
リリースノートはこちら。
- リリースが滞っていない
- GitHubのスター数(お気に入りのようなもの)、がReactよりも多い
フレームワークの改修とリリースはGitHub上で頻繁におこなわれており、セキュリティなどの問題についても対応される安心感はあると思います。
また、Reactをもしのぐ大変人気のあるプロジェクトでもあるため、今後も継続的にメンテナンスされていくものと思います。
まとめ
実際にアプリケーションを作ってみると、Vue.jsが「プログレッシブフレームワークである」と言われる意味がわかってきて、使いこなすためのコツなどもだんだんと実感できてくるのでは？と思います。
実際に私も、小規模な情報共有ツールからWindowsのアプリケーションとして動くツールまで作ってみて、Vue.jsは単純にWebアプリケーションの範囲にとどまらず、いろんな場面に応用できるJavaScriptフレームワークであると実感しています。
これからステキなWebアプリケーションを開発していきたい！と思われるエンジニアにとって、本記事が少しでもお役に立てるのであれば幸いです。
