Vue.js入門 基礎から実践アプリケーション開発まで』刊行記念特別インタビュー~Vue.jsの魅力とこれから

Vue.js入門 基礎から実践アプリケーション開発までの発売を記念して、著者陣にVue.js関連のインタビューを行いました。なぜVue.jsを採用したのか、どのように使っているのか、そしてバージョン3のアナウンスでますます注目が集まるVue.jsの今後まで、さまざまな話題について伺った模様をお届けします。

Vue.jsをどうして、どのように使っているのか。

――今回はVueを使う理由や、Vueの今後についてみなさんにインタビューしていきます。よろしくお願いします。まず、なぜVue.jsをプロジェクトに採用したのでしょうか?

手島:ちょっと昔話になりますが、初めてVueを導入したのはv1.0より以前のタイミングでした。v0.8とか(笑⁠⁠。Vue.js、React、Angularの中から検討の上でVue.js採用に踏み切っています。

当時の職場ではHTML/CSSに特化してマークアップを書く担当者がいて、そのような方の成果物をSPAとして組み込む際にJSXだと少し難しいという理由でReactの導入は敬遠しました。⁠シンタックス的に同じようにHTMLの知識が活かせる)Angularを使わないで、Vueを採用した理由は本体のファイルサイズですね。モバイルのwebview内でのアプリの実装だったので軽量なライブラリを探していました。Angularは大きすぎました。

つまり、マークアッパーと分業ができて、シンプル × 軽量という観点でVueを選択しました。使ってみると、黒魔術的な要素も少なめでスムーズに開発できて気に入りました。

川口:開発速度を高めるために、jQuery依存から脱却したいというモチベーションからVue.jsを導入しています。シンプルさや強力さが魅力です。私も同じくv1リリース前に導入検証を始めています。詳しくは『Vue.js入門』のまえがきを読んでください。

――開発にはどんなエディターやIDEを利用していますか?

野田:エディターは現在VSCodeを使っていて、extensionのVeturを活用しています。以前はSublime Text、Atomを使っていてVSCodeに乗り換えました。

――VSCode+Veturは皆さん使っているようですね。書籍中でも紹介されていました。どんなライブラリを使っていますか? VuexやVue Routerをもりもりで使っているのでしょうか?

野田:Vue Routerは使っています。SPAのようなものを作るなら、これは当然欠かせないライブラリです。多くのVue.jsユーザーが使っているはずです。storeは(Vuexではなく)独自のstore objectを作って、ストアパターンを実現しています。ライブラリのうち再利用可能なものはAwesome Vueの中から探して使ったりすることもあります。

――必ずしも名前のよく出るライブラリを全部使うというわけではないんですね。

Vue.js人気は盤石か。どこまで続くのか。

――Vue.jsは凄まじいスピードでユーザーを増やしているように思います。Vue.jsの求人市場、実際のユーザーの増加についてはどうでしょうか?

喜多:具体的な数は分かりませんが、自分の周囲で求人が増えてきているような気がします。特に、リリースから3~5年が経過したウェブサービスを開発している会社でVue.jsの求人を見かけるようになりました。開発初期(3~5年前)に選択した技術がレガシー化し、サービスの成長の足かせになっているため、Vue.jsで一部あるいは全体を作り直そうとしているからでしょう。

野田:同じく具体的な数はわからないのですが、身近なところでも求人は増えている感覚はあります。また、私自身、会社の採用活動に携わる中で、Vue.jsを書いたことがある、興味がある方が増えていると実感しています。

手島:私は社員数10名未満のスタートアップからVueの実装の相談を受けたりします。他にも50名前後の企業からもVue.js人材が欲しいと声をかけられたりしています。今年に入ってからすごく求人数も増えてきているんじゃないかと思います。現在、日本の若手エンジニアがJSで何か作る際には一番最初にVueと言う選択肢が上がるようなポジションになっているような肌感です。

――Vue.jsの人気は手堅いようですね。現在国内で人気のあるフレームワークとしてはVue.js、Angular、Reactがトップ3だと思います。これらを脅かすようなフレームワークの登場、フレームワークの乱立期(フレームワーク戦争)はまだ続くのでしょうか?

川口:フレームワークの選択については安定期に入ってきたと見てよいでしょう。これから(近いうちに⁠⁠、まださまざまなフレームワークが出現してくる可能性は低いと考えています。

――一時期は雨後の筍のごとく次々新しいフレームワークが登場し、常に「使ってみた」記事が書かれていた印象があります。なぜ落ち着いてきたのでしょうか?

川口:主な理由は次の2点です。

  • Webフロントエンドにおけるアプリケーションアーキテクチャが確立したこと
  • Webフロントエンドの開発環境周りのサポートが必須なこと
――アーキテクチャの確立とは具体的にどういうことでしょうか?

川口:そもそもフレームワークの乱立ともいえる事態が起きた背景から考えてみましょう。HTML5の登場によってWebアプリケーションの比重がサーバサイドからクライアントサイドに移り、フロントエンドが複雑化したこと、その課題を解決するための手段が必要になったのがJavaScriptフレームワークの登場の理由です。もろもろの課題が出現し、過渡期には多くのフレームワークがそれぞれの方法論で対処しようと登場してきます。

代表的な課題の1つが旧来型のアーキテクチャで対応しきれないという問題です。従来はアプリケーションアーキテクチャとしてMVCアーキテクチャがありました。高度化するフロントエンド開発において、MVCは状態管理に欠点があり、アプリケーションをスケールさせるには力不足でした。その結果、状態を一元管理でき、かつデータフローを単方向にすることでアプリケーションをスケール可能にしたFluxが生まれます。現状、主要なフレームワークは、Fluxと同等の概念を持ったアーキテクチャをサポートしています。

いくつもの事例が積み重なり、アーキテクチャなど課題に対する解決法が固まったことで、新しいフレームワークをつくるモチベーションが乱立期に比べると低くなっています。

――アーキテクチャの確立でライブラリの定番化が進んだことで、新しいフレームワークは出づらくなったんですね。ツールの点についてはどうでしょうか?

川口:Webフロントエンドで実践的に開発するには多くのツールが必要です。BabelやTypeScriptといったトランスパイラ、ESLint(静的型検証ツール⁠⁠、Webpack(バンドリングツール)など、さまざまなものが用いられます。

これらを利用することは、アプリケーション開発の生産性、堅固性、そして保守性の向上に直結します。ただし、こういったエコシステムを自前で一から構築、維持管理するのはかなりの労力が要ります。そのため、現在の主要なフレームワークはCLIツールなどを提供して、この手間を軽減しています。現在使われているフレームワークは本体だけではなく、開発ツールやエコシステムまで統合的に提供し、開発しやすさに気を配っているということです。

完全に新規のフレームワークが、現在使われているものと同等以上のツール(エコシステム)の使い勝手を実現するのは困難です。そのため、仮にライブラリが新規に参入しても利用者が増えず使われないという側面はあるでしょう。

――先に挙げていただいたCLIツールとは、Vue.jsのVue CLI、Angularのangular-cli、Reactのcreate-react-appなどでしょうか?

川口:そうです。主要なフレームワークには、機能の多寡はあれどCLIツールがそろっています。

――川口さんはVue CLIがもたらす効率化について『Vue.js入門』でも強調していました。Vue CLIはどんなところですぐれているのでしょうか?

川口:すぐに使える利便性と柔軟な拡張性でしょう。Vue CLIは、素晴らしいツールに仕上がっています。v3で単なる開発環境構築ツールではなく、開発生産性を高める開発支援ツールに進化しました。Vue.jsで本格的な開発をしたいなら、積極的に利用すべきです。

コマンド1つで開発環境を一式用意できる利便性は他ツール同様当然備えています。さらに、v3ではプラグインアーキテクチャを取り入れているのが大きな特徴です。利便性に加えて、高い拡張性を誇ります。サードパーティが提供するプラグインでプロジェクトそのものを柔軟にカスタマイズできます。

v3以前は、テンプレートからアプリケーション開発プロジェクトをスキャフォールディングする形式でした。これも十分実用的でしたが、v3以降は、テンプレートベースからプラグインベースのアーキテクチャに移行することで、セットアップされたツールをアップグレードできたり、独自にwebpackの差分設定できたり柔軟性が向上しています。CLIツールに求められる利便性、本格的な開発で欲しくなる拡張性が高い水準で備えられているのがVue CLIです。

――Web技術が安定期になって、もう新しいフレームワークは全く登場しないと考えていいのでしょうか?

川口:必ずしもそうとは言えません。HTTP2、GraphQL、WebComponents、PWA、ServiceWorker、WebWorker、WebAssemblyといったように、今後も様々な技術が出現してWebアプリケーションでの表現力がさらに高まっていきます。現在は安定期にありますが、新しい技術とそこから発生した課題を解決するために、再度必要に迫られて新たなフレームワークが出てくることもありるでしょう。

新しいVue、Vue 3.0について

――Vueといえば作者の次メジャーバージョンへの言及が話題になりました。Vue 3.0はどんなリリースになるんでしょうか。

川口:Vue 3.0については、先日、Vue.js公式ブログで計画が公開されました。

現時点(対談時点)では、作者のEvan氏がプロトタイピングしたコードをベースに、コアチーム内部で議論している段階です。

――すぐに出る、試せる状況ではないということですね。Vue 3.0の見どころはどこでしょう?

川口:大きな目玉としては、 TypeScriptによってフルスクラッチ実装されるのが大きいでしょう。

Vue.jsが他のフレームワークと比較して弱点となっているものとして、型システムのサポートが(比較的)弱いという点があります。Vue.jsコア本体がTypeScriptで実装されることにより、必然的にアプリケーション開発においても型システムのサポートが受けられるようになります。これにより、特に大規模なアプリケーション開発においては、より堅固なものを提供することができるようになるでしょう。Vue 3.0 の詳細内容についてはブログにゆずります。ぜひ上述のブログを読んでみてください。


Vue.jsの今後など気になるトピックも多く出てきたインタビューでした。日本でのVue.js人気は高まり続けています。Vue.jsの国内カンファレンスとして2018年11月3日(土)には、Vue Fes Japan 2018も開催されました。カンファレンス開催後の公開資料などは参考になるはずです。興味のある方はTwitterのvuefesタグを追ってみましょう

おすすめ記事

記事・ニュース一覧