本記事は2019年12月9日に公開した記事です。

GAOGAO Ptd.Ltd.でCo-Founder CEO&ソフトウェアエンジニアを務める手島拓也（@tejitak）と申します。Vue.jsをメジャーバージョンになる前から利用しており、「Vue.js入門 基礎から実践アプリケーション開発まで」の執筆も行いました。今回はFLEXY読者の皆様に本腰入れてVue.jsを学ぶ前に知っておいていただきたいポイントについて解説します。

私のエンジニア史とVue.jsに出会うまで

先日、慶應義塾大学矢上賞（起業支援）授与式で招待講演をする機会がありました。その際にも強烈に感じたのですが、Vue.jsと私のエンジニア史を切り離して語ることはできません。 そこでまず私のエモいエンジニア史から話を始めてみました。是非こちらからご覧ください（笑）

Vue.jsはバージョン0.8から愛用

もともと新卒でIBMの研究所に入り、サーバサイドとフロントを両方対応していました。その時はJavaとJavaScriptを主に書くエンジニアでした。その後フロントエンドに興味を持って、フロントエンドエンジニアとして転職をしたのがその次の会社、LINEです。そこでフロントエンジニアとしてJavaScriptをメインで書くようになりました。jQueryが流行っていた時期から、ちょうどBackbone.jsやAngular.jsなどが出てきた頃までの期間、LINEでフロントエンジニアとして働いていていました。そして、Vue.jsで言うとバージョンが0.8くらいの時期。今はもうすぐバージョンが3にあがるくらいなのですが、0.8というメジャーリリースする前の段階のVue.jsを使ってプロダクトの開発も行っていました。

Vue.jsが0.8の当時、新しいアプリケーションの機能を新規で担当する機会があり、そこで導入することができました。当時はAngular.jsが主流、Backbone.jsが普及してきていて、jQueryももちろん健在の時期でした。いろいろと検討した結果、その時のサービスがシンプルな仕様だったので、試しに使ってみようと、提案して実装してみたという背景があります。

起業、そして海外へ。そこでもVue.js

その後いろいろあって起業することになりました。
ちょうどAirbnbなどが伸びてきた時期で、民泊のホスト向けのツールや、東南アジアの高級ヴィラに特化したブッキングサービスを展開する会社をCTOとして起業しました。
それから2年くらいして、その事業もあるので東南アジアに移住しました。4年くらい前のことです。

しばらくその事業を続けていたのですが、事業譲渡の後、会社を畳むことになりました。そのタイミングで新しく自分がCEOとして会社を立ち上げました。スタートアップの0→1フェーズの開発に特化した、スタートアップスタジオと呼ばれるもの。近年、経営者・非エンジニアの方が起業するケースが増えていますが、経営目線で一緒に開発を進められるエンジニアを見つけるのは非常に困難。確率的にもほとんど見つからないのが実状です。この課題を解決するために我々の開発チームがお手伝いするという会社です。弊社には経営経験があるエンジニアも多くいます。GAOGAOは経営目線でスタートアップの初期フェーズ、シードで資金調達する以前から、シード後からシリーズAのフェーズに特化して、プロダクトマーケットフィット（PMF）の支援をメインの事業として行っています。1年半ほど前に立ち上げました。

今は東京だけではなくバンコク、ホーチミン、セブ、シンガポールの５拠点でエンジニアのシェアハウスを持ちながらスタートアップ開発を行っています。今だと少しスタートアップではない大きめの会社も含め、合計10社くらいのお客さまがいらっしゃいます。そのため、私はバンコクと東京、ホーチミンにそれぞれ月に1週間から2ヶ月に1週間くらい滞在する形で飛び回っています。

メンバーは副業も合わせると20名程度在籍。東京にも5名程います。コンセプトは海外を目指したい日本人エンジニアをもっとグローバルな世界に引き上げること。そのため、日本人として海外の案件をどんどんとっていき、海外志向の若者たちにアサインしています。お客さまは今は半分以上日本、半分弱が海外という状況。バンコクやアメリカなどのお客さまも何社かありますね。

具体的な仕事として、まずお客さまの事業担当者から技術選定のヒアリングから始めます。エンジニアリング知識がない方が作ろうとするサービスは壮大な規模になるケースが多い。そこをエンジニアの目線で見て大きく削ぎ落としていく。ここに価値があると思っていると考えています。コアとなる評価したいコンセプトを伺うコンサルタントから入り、いったん「とりあえずつけたい機能」を全部落とし、ミニマムなプロダクトを3ヶ月以内にリリースするように心がけています。

そのため、技術選定の部分で弊社に裁量があることが多いのですが、ミニマムなプロダクトをスピーディに作るという場合にはVue.jsが活躍します。弊社では、特に制約がなければまずVue.jsを使うという選択をしていますね。もちろん、案件によっては別の選択をすることもあります。例えば、非常にシンプルな、まさに副業のためのマッチングサイトのようなもの。トップページ、一覧ページ、詳細ページがあり、機能としては申し込み機能のみで、あとは管理画面があるようなもの。このような場合には動的なUIをまずは必要としないため、Vue.jsを使わないケースになります。

会社の成長に伴って私自身の役割も変わってきました。1年前までは自ら手を動かして開発をしていたのですが、この1年で徐々にその割合が減り週1～2日くらいの開発時間になっています。心強いメンバーも増え、コーディングの役割を任せられるようになってきました。ディレクション、コードレビューの中でソースコードやシステムのチェックをするような役割になってきていますね。

業務以外でも個人で作っているプロダクトでVue.jsを利用しています。最近では、8月くらいにこもって作ったSphere（スフィア）というサービスがあります。オフィスの写真をチェックインして投稿できるもの、オフィス特化型Instagramのようなサービスです。「こういう企業に訪問した」というのを投稿するためのサービス。このようなものを個人で作るときもVue.jsを使っています。

Vue.js 日本ユーザグループ 誕生の瞬間

LINEにいたころから、Dev Morningという渋谷で開催している朝活の幹事をしていました。260回を超えるほどまで開催され続けていますが、1回目から100回目くらいまではずっと幹事をしていました。今は海外にいる関係で、そこで出会った人たちに幹事を任せています。ピースオブケイクの外苑前のオフィスで開催していて、今でも帰国時にタイミングが合えば参加しています。このようなコミュニティーを作ることがもともと好きで、バンコクにいる日本人エンジニアを集めたシェアハウスのGAOGAOハウスも運営しています。

Vue.jsに関しては、コミュニティーの誕生前から携わっていました。そもそも、Vue.jsの公式ドキュメントの初めての日本語訳を担当した一人が私でして。今もコントリビューターとして活躍され、Vue.js 日本ユーザグループを取りまとめた代表者のkazuponさんと一緒に翻訳を始めました。その集まりがVue.js日本ユーザグループになっていきます。

現在は海外にいる時間も長くなり、運営に携わることはなくなりましたが、登壇側として関わっていますよ。

Vue.jsを始める前に押さえておきたい5つのポイント

1. Vue.jsはシンプルで学習コストが低い

さて、ここからが本格的にVue.jsのお話です。

Vue.jsのメリットは学習コストが低いことです。非常にシンプルな設計で、妙なメソッドもない。ReactとVue.jsが対比されることがよくありますが、その際に指摘される特徴にもシンプルさが出てきますね。

「シンプルなアプリケーションを作りたいならVue.jsだけど、大規模で複雑なアプリケーションを作るならVue.jsは使えない」と言われることがありますが、私はそう思いません。経験上、設計さえうまくできればVue.jsを多機能な大規模アプリケーションで利用しても問題を感じることはありませんね。

Vue.jsは基本的にはMVVMパターンです。Model、View、ViewModelがあり、ViewにModelを渡して双方向バインディングしている作りです。データを書き換えるとUIが変わり、UIを書き換えるとデータが変わる。そこをバインディングさせることが効率的で画期的だったという経緯があります。ただ、それをやりすぎてしまった場合、例えばシングルページアプリケーションなどで1枚のページ内でいろいろなコンポーネントが複雑に動くようなUIを作った場合、モデルを引き渡してバインディング、バインディング、バインディング・・・とやっていくと、思わぬところで副作用が起きてしまうことがあります。これは、Vue.jsというよりはMVVMのつらいところではありますね。

この課題を解決しようとしたのが、ReactのReduxやFluxです。歴史を振り返ると、jQueryの時代が終わり、その後MVVMの時代が到来しました。その後、FacebookがReactを発表しましたが、それと同時にFluxアーキテクチャという考えが登場しました。これはMVVMのアーキテクチャを否定するもので、双方向バインディングにおいては、コンポーネントとデータを分離させてしまい、データをいじるなら必ずActionを通る設計がいいと提唱したんです。これによりソースコードの記述量は増えますが、データの流れは一方向になる。複雑性が生まれにくいというメリットがありますね。このような考え方は今でも主流になっています。Vue.jsにおいてはVuexが取り入れています。

VuexはまさにFlux、Reduxに影響されて設計されたもので、Vue.jsで前述の問題を解決するものです。ポイントとなるのは、Vuexをどのような基準で採用すべきなのかの判断基準を身につけること。「1つの画面上に親子関係以外のコンポーネント間のやり取りがすごく多くなりそうであったらVuexを使う」というのが基準になるかと思います。なかなか、この「すごく」を定義することはできないのですが、1ヶ所や2ヶ所ではなく、もっと多いレベルのイメージ。

最初の設計段階で、コンポーネント間のやり取りがどれくらい発生しそうなのか、シングルページアプリケーションでルーティングなどをする際、ページをまたいでどれだけページ間で共有するストアがあるか、そういうものを事前にイメージをした上で、どちらを採用するかを検討することがポイントになります。

「最初からとりあえずVuexを使ってしまえばよいのでは？」という意見もあると思いますが、これに関しては賛否両論です。私は「とりあえずVuexを入れる」というのはあまりお勧めしません。

特にフォームなどを多用した機能を作る際には、書かなければいけない内容が増えることが問題になってきます。開発者が全員Vuexの使い方を理解していればいいのですが、そうでなければVue.jsだけの場合に比べて事前知識のレベルが上がってしまうからです。

2. Vue.jsは元々は個人開発

Vue.jsがReactやAngular.jsと違う大きな特徴に、企業が作っていないという点があげられます。React.jsはFacebookが全面的に押し出し、社内で開発して提供しています。これに対して、Vue.jsは実は元々個人開発。今もメインはVue.jsのクリエイターと言われているEvan Youという方が開発しています。彼が基本的にコアなソースコードを見ており、公式プラグイン周りも見ています。そのため、Reactだとコアな部分はFacebookがメインで見ていますが、Reduxなど周辺のライブラリは乱立しがちです。Vue.jsではEvan Youが公式ライブラリまで全部見ているので統一感があります。個人がメインの開発ではありますが、Reactを参考にしてドラフトがGitHubにどんどん上がっていきます。最終的な決済はEvan Youにありますが、コントリビューターもいるため、個人依存で変な独自進化をしていくということはありません。

Vue.jsはバージョンが2.0になる際に、DOMへの依存をなくす点で大きな変化でした。ちょうどReact.jsがサーバサイドレンダリングを発表しました。それは、仮想DOMでReact.jsを作り、サーバサイドレンダリングでもできるというもの。Evan YouはそれをVue.jsに取り入れるために、1.0でブラウザ依存だったものを全部消すということをやりました。それが2.0での大きな変化でしたね。

3. コンポーネント設計の考え方を理解できるかが勝負

初めてVue.jsを学ぶ際にはコンポーネント設計という考え方を理解できるかがポイントになります。

これまでのjQueryの場合、基本的にはプラグインで追加してグローバルにクエリを引っ掛けてファンクション追加して・・・というような使い方でした。そこにはコンポーネントという発想はありませんでした。

ところが、Vue.jsやReactはグローバルで触りにいくという行為は基本的にNGの世界。コンポーネントごとに実装が全部閉じる。これをコンポーネント化することで再利用性も高まり、ソースコードのメンテナンスもコンポーネント内で完結します。そのため、jQueryに比べVue.jsでは保守と再利用の容易さは高くなります。

また、jQueryだとidで要素を引っ掛けたりしますが、基本的にコンポーネントの世界はidを使うのはNG。DOM上に1個しかなかったとしても、コンポーネントというのは複製されて再利用されるものという思想のため、idを利用することは適しません。

Vue.jsのJavaScriptの書き方を覚えるよりも、再利用可能なコンポーネントという概念を理解してWebアプリケーションを設計・構築できるという能力が重要になってきます。

4. Vue.jsとjQueryの使い分け

もちろん、Vue.jsが万能でjQueryは使い所がないということはありません。

極端な例を言うと、Vue.jsでコンポーネントを作ったのにグローバルにDOMをいじってしまったら意味がなくなってしまいます。いわゆるウェブサイト制作という領域では、WebサイトランディングページをWordPressで作ることになり、jQueryは現役で活躍しています。むしろ、この領域ではVue.jsに乗り換える必要がない世界かもしれません。

しかし、少しインタラクティブなアプリケーションとなると、jQueryは破綻してきます。jQueryはグローバルに関してセンシティブな書き方なので、コードの行数が増えていくとどうしようもなくなってくる。ここを解消するのがコンポーネントの考え方です。逆を言えば、WebサイトをJavaScriptで少し飾りたい程度であればjQueryで構わないのです。本格的な動きをするWebアプリケーションを作るためにVue.jsに乗り換える場合、そこにはやはり一つ敷居をまたぐ必要が出てきます。

5. 初学者向け勉強法

初心者の方であれば、私が共著した「Vue.js入門 基礎から実践アプリケーション開発まで」という書籍をまずは読んでいただきたい。1万部を超えていますし、評判もいいので、是非ともお薦めしたいです。Vue.js 日本ユーザグループの代表をされているkazuponさん、Vuexの開発にコアメンバーとして参加している片山真也さんなども共著で執筆されています。初心者も読んで分かるように書かれています。

その次の段階のものとしては、公式ドキュメントを読むことをお薦めします。入門者の方にとってライブラリの公式ドキュメントを読むのは敷居が高そうなイメージがあるかもしれません。でも、読んでみると意外に結構理解できてしまうはずです。特に最初の方は易しく書かれています。それらを読んでもらと勉強になるはずです。

Vue.jsがReactと違って特徴的なのは、Reactは基本的にコンパイルをしないと動かないという点。Reactの場合、JSXと呼ばれるJavaScript構文の拡張もので書き、ReactのJSXを解析してJavaScriptに変換するという処理を、webpackを使って行うのが一般的です。これに対して、Vue.jsはそこの処理を単にVue.jsのファイルをスクリプトの中に読み込んで、スクリプトの中で少し書くだけでコンポーネントが動くようにできます。 そのため、JSFiddleのようなもので簡単なものは動かせます。まずは試してみながら、お手軽に始められるという点でReactよりも最初のハードルは低いかもしれません。

ローカル環境で開発を始める際のお薦めIDEはやはりVSCodeです。プラグインとしては、Vetur、ESLint、Prettierなどを入れておくと自動的に整形してくれます。開発メンバー全員で同じ設定にしておけばソースコードがきれいな状況で共同作業ができますよ。もしくは、Sublime Textを利用してもVue.jsのプラグインがあるので問題なく使えますね。

Vue.jsを触ってみる

ハンズオン：動かしてみよう

それでは早速、Vue.jsを使ったプログラミングを体験してみましょう。

今回はシングルページアプリケーションを実現するため、Vue Routerを使ってみます。メニューを切り替えて内容を表示するのはビギナー向けの内容ですが、Vue RouterというVue.jsの公式プラグインを利用すると、ページの切り替えが簡単に実現できます。

シングルページアプリケーションとは、Ajaxを使用して必要な時に必要なデータを取得してページ遷移をクライアントサイドで行います。通常のWebアプリケーションにおける、ページ遷移時にブラウザがサーバへアクセスしコンテンツをロードする形式よりも滑らかなユーザ体験を提供できるようになります。Vue Routerを使うとクライアントサイドでのページ遷移、データ取得、Viewのレンダリング、モジュール化されたコードの管理などの実装を簡単に行うことができます。

index.htmlファイルを1つ用意すればVue.jsを試すことができます。 まずは以下のようにscriptタグでVue.jsとVue Routerの読み込みを行うHTMLを用意します。(Vue.jsのバージョンは執筆時点最新のv2.6.10を使用しています)

1. <div id="app"><!-- この部分に必要なHTML要素を記述していく --></div>
2. <!-- Vue.jsとVue Routerを読み込む -->
3. <script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.6.10/vue.js"></script>
4. <script src="https://cdnjs.cloudflare.com/ajax/libs/vue-router/2.8.1/vue-router.js"></script>
6. <script>
7.     // この部分に必要なJavaScript実装を記述していく
8. </script>

次に、特定のURLパスに対して、どのコンポーネントを呼び出すか、ページ遷移のマッピングをJavaScriptで以下のように定義します。

今回のサンプルの構成は、トップページとフルーツ一覧ページを切り替えられるシンプルなものです。

/fruitsにアクセスした際にcomponentで指定しているフルーツ一覧のコンポーネントが初期化されます。templateにて、そのコンポーネント自身のdataであるフルーツの情報をv-forを用いて配列をマッピングしているのでフルーツの一覧が表示されます。

コンポーネント

1. // ルートオプションを渡してVue Routerを初期化します
2. var router = new VueRouter({
3. // 各ルートにコンポーネントをマッピングします
4. routes: [
5. {
6. path: '/',
7. component: {
8. template: `
9. <div>
10. <h1>トップページです。</h1>
11. </div>
12. `
13. }
14. },
15. {
16. path: '/fruits',
17. component: {
18. template: `
19. <div>
20. <h1>フルーツ一覧ページです。</h1>
21. <div>
22. <h2>{{ fruit.name }}</h2>
23. </div>
24. </div>
25. `,
26. data () {
27. return {
28. fruits: [
29. {
30. id: 1,
31. name: 'りんご'
32. },
33. {
34. id: 2,
35. name: 'みかん'
36. },
37. {
38. id: 3,
39. name: 'バナナ'
40. }
41. ]
42. }
43. }
44. }
45. }
46. ]
47. })
49. // Vueの初期化を行います
50. var app = new Vue({
51. router: router
52. }).$mount('#app')

最後に、HTMLとして上記で定義したパスに対してコンポーネントを描画するためのの記述と、ページ遷移を行うためのリンクを記述します。

1. <div id="app"><!-- リンク先を `to` プロパティに指定します -->
2. <!-- デフォルトで <router-link> は `<a>` タグとしてレンダリングされます -->
3. トップページ
4. フルーツ一覧ページ
5. <!-- 現在のURLとマッチしたルートに定義されたコンポーネントがここにレンダリングされます --></div>

上記をHTMLファイルとして保存して、ブラウザで開いてみてください。動的に動くサンプルアプリが、わずかなコード量で動くのが確認できます。
サンプルコードはhttps://jsfiddle.net/tejitak/nzbpu0k7/で動作確認できます。

コンポーネント設計のポイント

コンポーネント設計をするときには、まず画面のイメージを作ってその要素が単体で再利用性があるかどうかという観点で考えてみることがポイントになります。

あるフォームを、3セクションあり、サブミットするようなページのコンポーネントを作るときに、どこまでコンポーネント化すべきかを考えます。例えば、ユーザの基本情報を取得し、住所情報を取得するというときに、それぞれコンポーネント化する必要があるのかどうかを考えてみましょう。コンポーネント化した際、それが再利用される可能性があるのかという観点で見る。住所の入力はコンポーネント化できるかもしれません。確かに使い方次第ではそれぞれコンポーネント化したほうがいいケースかもしれませんが、すぐにそれを3セクションだから3個のコンポーネントを作ればいいんだ、ということにはなりません。というのもコンポーネント化し過ぎた場合、その分ソースコードでもコンポーネントが増えてしまうからです。基本的に再利用される期待があるものだけをコンポーネント化するという考え方がよいでしょう。

また、コンポーネントを突き詰めていくと、デザイナー領域に関わってきます。例えば、ラベルとコンポーネントをセットで1つのコンポーネントにするかどうかという議論。このような場合、サービス・プロダクトのUI/UXにおいてそのようなラベルとコンポーネントのセットをブランディングとして作っていくべきだという判断があれば、コンポーネント化して再利要素を高めたほうがよいかと思います。

そのため、Atomic Designを使っているサービスと相性がいいでしょうね。Storybookなどサポートになるツールも存在します。これを使えば、エンジニアとデザイナーがコンポーネントの一覧を共有することができます。

つまずきやすいポイント：コンポーネント間のやりとり

Vue.jsを始める際にコンポーネント間のやり取りでつまずく人が多い気がします。そこが最初のハードルとなるでしょう。

だいたいの内容は初心者向けの解説を読めば素直に理解できると思います。ところが、コンポーネントというものを理解して作ることができても、コンポーネント間でどのようにデータのやり取りするをするのかという部分でつまずくケースが多いように思います。

データのやり取りの仕方には、大きく分けて3種類（親コンポーネントが子コンポーネントに渡す、子コンポーネントのデータを親コンポーネントに渡す、並列の横のコンポーネントの兄弟関係のコンポーネントがデータを渡す）のやり方があります。それぞれの知識をつけておき、必要なときはどれを選択するのがベストなのか判断できるようになりましょう。

props：親コンポーネントが子コンポーネントに渡す

親から子にデータを渡す場合はpropsというものを使います。

例えば、単純に信号機のコンポーネントを作ったとします。緑、黄、赤色とあったときに親が点灯させる色の情報をサーバから受け取り、それをpropsで渡します。子コンポーネントは親から渡されたデータに応じて振る舞いが変わり、該当する色を点滅させます。

$emit：子コンポーネントが親コンポーネントに渡す

子から親にデータを渡す場合、$emitを使います。

このパターンは前述の住所や氏名などのフォームの例が該当します。複数の子コンポーネントに入力されたデータを最終的に親コンポーネントに集約し、すべてのデータをサーバに送ります。その際に、子コンポーネントではonChangeイベントなどのアクションや「次へ」ボタンなどのアクションで親コンポーネントにデータを$emitを利用して渡します。

store：兄弟関係のコンポーネントに渡す

兄弟関係のコンポーネントにデータを渡す場合にはstoreを介すのが一般的やり方です。

例えば、PCのチャットアプリのように、スレッドの一覧画面とチャットの詳細画面があるものを考えてみましょう。詳細画面で文字列を送ったり、送信日時が変更されると、それに応じて一覧画面の並びや最新メッセージの表示が更新されますよね。この場合はstoreという機能を利用してデータのやり取りを行います。

最後に：Vue.jsを学べば働き口も多い

Vue.jsの案件は、今とても多いという感覚があります。「Vue.js書ける人いませんか？」という依頼がかなり来ており、Vue.jsを学習しておくと将来に役立つかと思います。特にここ半年で増えてきてるように思います。

Vue.js日本ユーザグループで日本語ドキュメントを整備したり、日本語での情報発信を積極的にやってきたので、その成果が出てきたのだと思います。Vue Fes Japanも参加者が1300名ほど予定されていました。海外ではReactがメジャーで2番手なイメージなのですが、日本ではVue.jsの方が人気がある傾向にあります。

FLEXYのVue.jsのフリーランス案件情報

FLEXYでは外国人向けメディアサイトの設計～開発・運用案件をはじめアプリ開発支援など、自社プロダクト開発案件が多数あります。
週2日～など自身にあわせた働き方をしながらスキルアップも可能ですので、Vue.jsのフリーランス案件情報をご覧ください。