Vue.jsの開発体験を次の次元へ　CLIが苦手でも使える「Vue CLI」のすすめ

Vue CLI v3の話

kazu_pon氏（以下、kazupon）：ご紹介に預かりましたkazuponです。さっそく発表させていただきたいと思います。まず自己紹介です。

Vue.jsのコアチームメンバーとして活動しています。Vue.js Japanのユーザーグループの運営をしたり、自分が作っているVue向けのライブラリや、Vue.js日本ユーザー向けにMeetupなどのイベントを定期開催しています。

今日の私の発表ですが、Vue CLI v3について話したいと思います。

今日話さないこととしては、最新の動向とか。このあたりは今年の3月にMANABIYAさんで発表しているので、そのスライドもSpeaker Deckにあるのでそれを見てください。

それでも知りたいなら、先日開催されたVue Contoributor Daysの動画がYouTubeに上がっているので、そちらを見ていただければと思います。

あとはVue.jsはロードマップも公開しています。最近作者のEvan氏が内容更新しているのですが、そのあたりも書いてあるので、そこを見ていただければと思います。

では今日のタイトルでもあるVue CLI v3について話したいと思います。現在のVue CLIの状況なんですが、現時点ではRC.3のバージョンになっています。そろそろリリースされるという感じになってきています。

Vue CLIとは何か？

今回の勉強回、UIフレームワークということで、先ほどもあったAngularとか、このあともReactの発表がありますが、Vue CLIについて知らない方もいるかと思うので簡単に説明しておきます。

Vue CLIというのは、Vueアプリ向けのCLIベースの開発ツールです。

こちらの画面にあるようなコマンドを提供していて、それを使って開発していくツールになっています。

主な特徴は、こんな感じで画面に映っている特徴がいろいろあります。

例えばFeature Richという特徴では、Babelなどフロントエンド界隈にはいろいろツールがありますが、Vue CLIはその辺を簡単にセットアップして、Vueアプリプロジェクトで簡単に使えるようにしてくれます。

その他の特徴としては、プロトタイプ向けのserveコマンドを提供していて、Vueの特徴であるSingle File Components（以下、SFC）を書いてそのコマンドに書いたSFCを指定して実行しただけで簡単にプロトタイピングすることができような特徴を持っています。

Future Readyという特徴では、Vue CLIがES2015にネィティブに対応したブラウザ向けに最適化されたビルドや、Web Componentsをサポートするビルドも提供しています。

このように、様々なものがVue CLIの次のバージョンv3ではありますが、私としては、今日話したいv3の目玉としては、こちらの2つかと思っています。

1つはプラグインシステム。2つ目がVue CLI UIと言われているものです。プラグインシステムというのは、プラグインという名前でみなさんどのようなものかご想像できるかと思いますが、Vue CLIユーザー向けに、Vue CLIを拡張するために提供するものです。

2つ目のVue CLI UIというのは、CLIが苦手なユーザーに対してGUIを提供するツールです。さらにこのVue CLI UIなんですが、UI APIも提供していて、Vue CLI のUIに対してプラグインシステムを提供しています。

これらによって、さらにVue周りのDeveloper Experience（開発体験）の無限の可能性があるため、私としてはかなり目玉かなと思っています。

CLIプラグインについて

ではプラグインシステムについて話していきたいと思います。CLIプラグインというのを作成することになるんですが、主に以下のAPI、Service、Generator、そしてPromptというものがあります。

そのAPIを使って、この画面のような感じのディレクトリ構成でnpmのパッケージとして作って公開することで、Vue CLIを使うユーザーがaddコマンドで簡単にインストールして利用することができるようになります。

このCLIプラグインでできることとしては、先ほど説明した3つのものがありますが、1つ目のServiceについては、webpackの設定をします。少し画面が見づらいと思うんですけど、様々なAPIで提供しているのでwebpackの設定をカスタマイズできます。

また、npm-scriptsにServiceのタスクを登録することができるので、そのコマンドを自分でCLIプラグインで登録することができます。

2つ目、Generatorについては、その名（Generator:ジェネレータ）の通りアプリケーションプロジェクトにテンプレートを生成する機能です。こちらもAPIを使って事前に用意した既存テンプレートを使ってユーザー向けにカスタマイズできます。

最後3つ目、Promptsについてですが、Vue CLIを使ったことがある方はわかると思いますが、コマンドを実行すると、例えば「Babel入れる？　入れない？」とか対話的に出てきます。その対話的な内容を独自にカスタマイズすることができます。

実際にCLIプラグインの例として、例えば国際化（i18n）の仕組みの例ですが、これは私が作ったCLIプラグインなんですが、Generatorを使うことでvue add i18nとコマンドを実行すると、ユーザーのアプリケーションプロジェクトに対して国際化に必要な開発環境をscafolingして、国際化周りの環境構築を簡単にすることができます。

CLIプラグインのユースケースは、私としてはこちらの画面のような感じかと思っています。

そのうちの1つとしてVue向けのライブラリですね。例えば、Vue.jsのエコシステムを取り巻くライブラリとしてVuetifyなどの様々なものがあります。そのあたりのライブラリをアプリケーションプロジェクトに簡単にインストールして開発環境を構築するのにscafolldingするといった用途で使うことができます。

そのほかとしては、プロジェクト固有のコード生成するために使うこともできます。これは、自分たちのプロジェクトでテンプレートが必要なところにはGeneratorを使って環境を整えたりと。マイグレーションツールやデプロイツールなど、いろいろ応用することができます。

Vue CLI UIという名前の意味

続いて目玉の2つ目、Vue CLI UIです。そもそもこのVue CLI UIというのは、名前がCLIがCommand line interface、UIがUser interface。それぞれinterfaceって付いて、何のことやら？　って感じだと思います（笑）。

Vue Command line interface User interface……。

クエスチョンが出るようなネーミングなんですが、「なんでこういうネーミングなんだ？」ってVue.jsの作者のEvan氏に聞いたところ「Vue CLI UI is the UI for the CLI」ということです。

私はVue CLIの内部アーキテクチャがわかっているので「あ、なるほどな」って理解できましたがみなさんわからないと思うので、Evan氏が付けたということだけ覚えててください（笑）。

名付けはEvan氏ですが、作った人は違います。コアチームのGuillaume Chau氏がいきなり怒涛の開発を始めて爆誕しました。

もともと開発のロードマップになかったんですが、突然ある日GitHubのレポジトリに「ui-feat」ブランチというのができて、そこのブランチ上ですごい勢いでコミットしててできたという感じです。

Vue CLI UIのUIを見る

Vue CLI UIのUIは、vue uiというコマンドを実行すると、ブラウザにGUIアプリが起動します。

基本的にはVue CLIのCLIベースでできることはひと通りできます。プロジェクト作成や、CLIプラグインの追加、開発サーバですね。あとアプリケーションのビルドとか、webpackの設定内容のインスペクション。こういったこともできます。

Vue CLI UIですが、どんなイメージかと言うと、プロジェクト作成はこのような画面のUIです。

これは作成するときに何のツールを使うかという場面です。開発サーバについてはこの画面のように、横にタスクが並んでいます。

webpackのインスペクションは設定ファイルの中身を見る機能なんですが、このような画面で確認することができ、素晴らしいツールになってます。

さらにGUIベースの特性を生かして、例えばプロジェクト管理やGUIベースのコンフィグレーション、プラグインの検索とか一覧で揃える機能、CLIプラグインのアップデートする仕組みなど、いろいろな機能を備えています。

プロジェクト管理は、vue uiと実行すると、このような画面で管理できます。

設定については、これはPWAの設定なんですが、このように細かく設定できるようになっています。

CLIプラグインについては、検索しやすくなっています。

Vue CLI UIの拡張性

Vue CLI UIは拡張性も提供しています。

UI APIを提供していて、Vue CLI UIに対してさらにいろいろなことができるようになります。こちらの画面はVue CLI UIのアーキテクチャ図です。基本的にはNode.jsでサーバとして動作していて、ブラウザ側はVueアプリケーションとして動作するようになっています。

UI APIにできることは、コンフィグレーションのカスタマイズ、タスクのカスタマイズやプロンプトのカスタマイズ、クライアントアドオンが使えるのでそれを使って拡張など。他には、カスタムビューを使って拡張できるようになっています。

UI APIがほかに提供する機能としては、Vue CLI UIのクライアントとサーバ間のデータを共有できます。CLIプラグインに対して、Node.jsサーバ側にアクションを投下することができます。IPCの機能もあるので、プロセス間と通信してコミュニケーションもできます。他に、ローカルストレージやプログレス表示、そしてフックできたりなどいろいろな機能を提供しています。

例えばコンフィグレーションのカスタマイズについては、UI APIではこちら画面のピンクの枠で囲っている部分をカスタマイズできるようになっています。

APIとしては、describeConfigというAPIを使うと細かく設定できるようになっています。

タスクのカスタマイズ

タスクのカスタマイズについては、同じようにピンクの枠の部分をカスタマイズできるようになっています。

ここで列挙されたタスクは、基本的にpackage.jsonのscriptsのタスクなんですけれども。それに対してフックをしたりとか、このような画面内容もできることもそうなんですけれども、UI APIを利用して新規にタスクを追加することもできるようになっています。

APIとしてはdescribeTaskに対して、既存のものに対して実行したときにフックを入れたりなどいろいろなことができるようになっています。

タスクに対してパラメーターも独自にnpm-scriptsで定義されていないものに対して追加することもできます。

このようにいろいろなことができるようになっています。独自のタスクはaddTaskを利用するとできるようになっています。

これはタスクのカスタマイズの例ですが、先ほども画面が出ましたが、これはwebpackを使ってビルドする画面です。

実は内部的にAPIを使ってカスタマイズしていて、ここの部分はAPIで構成されているという感じになります。

クライアントアドオンの作り方と使い方

あとクライアントアドオンですね。

これについてはこの画面のピンク枠の部分に対して自分が作った独自のVueコンポーネントを動作させることができます。

クライアントアドオンを実装したものは2ヶ所使えるところがあります。1つはタスクビューで、もう1つはこのあと説明するカスタムビューに追加できるようになっています。

クライアントアドオンの作り方としては、これもVue CLI UIを使ってvue createでアプリケーションプロジェクトを作って、これまでに説明したAPIを使ってカスタマイズしていくことになります。

クライアントアドオン向けに作ったアプリケーションプロジェクトに対して、アドオン向けにClientAddon APIというのを公開していますので、そのAPIを使って自分が使ったVueコンポーネントを登録し、ルーティング処理を実装します。

Vue CLI UIはVue Routerで動いているので、その辺りのルーティング処理もカスタマイズできるようになっています。作ったクライアントアドオンをVue CLI UIに登録しないと利用できないので、ClientAddon APIを利用してできるようになっています。

使い方としては、、先ほどdescribeTaskというAPIについて説明しましたが、そのAPIにcomponentを指定するところがあるので、そこに対象となるVueコンポーネントを指定できるようになっています。

カスタムビューについて

最後に、カスタムビューです。

これは何かといいますと、Vue CLI UIがユーザーにアプリのような制御可能なエリアを提供する機能です。

これもAPIを使って実装する必要があるんですが、基本的に先ほど説明したクライアントアドオンとUI APIのaddViewを使うとカスタマイズできるようになっています。

こちらの画面内容は、私が作ったものですが、実際にVue CLI UIで拡張した国際化するためのクライアントアドオンです。

このような感じでカスタムビューで拡張できるようになっています。

カスタムビューのユースケースですが、1つは先ほどやった国際化のもの、他には、Storybookライクなデザイナーと協業できるようなツール、Vue Dev Toolsみたいなデバッギングツールなどのユースケースがあります。

このように、カスタムビューは、アイデア次第で開発の生産性を高める無限の可能性があるので、私は今後推したいです。

Vue CLI v3のこれから

まとめです。Vue CLI v3では、これまでのv2での問題、v2ってテンプレートベースでテンプレートを生成するだけだったので、現状のフロントエンドの開発ツールの環境周りの構築、ツールのアップグレート、テンプレートのメンテナンスが辛い問題を改善するために提供されます。

Vueアプリを開発するユーザーは素直にVue公式に提供するv3のVue CLIを利用することで、CLIプラグインベースで開発ツールのアップグレードなどが可能なため、v2よりすごく幸せになれます。

v3のリリースにより、今後は生産性の高いアプリケーションプロジェクトの環境を簡単に構築できるようになり、プラグインシステムにより独自に拡張できるようになるので、私としては非常にエキサイティングだと思っています。

これはvue-playというStorybookのようなUI開発環境を提供するVue向けのツールがありますが、これはVue.jsコアチームのメンバーのegoistさんが投げ出してしまったプロジェクトで、今はメンテナンスされていない状態です。

StorybookもVueをサポートしていますが、正直なところVue向けによいDXが提供されていると思えていません。私はVueに特化したものをOSSとしてVue CLI UI向けに作りたいと思っているので、今後ともみなさんよろしくお願いします。

最後に、みなさんご存知だと思いますが。Vue Fes Japanを11月3日に開催します。

そろそろCFPの募集を開始する予定です。また海外スピーカーのゲストも何人か来るので、その情報を来月あたりから随時公開していきます。みなさんよろしくお願いします。

ご静聴ありがとうございました。

（会場拍手）