Vue.jsコミッターkazuponに聞く、良質なDX（開発体験）がもたらす良質な開発サイクル

WebアプリケーションのUI実装を簡単に行える、オープンソースのJavaScriptフレームワーク・Vue.js。利便性の高さと導入の容易さから、近年サービスに採用されるケースが増えています。

そして、Vue.jsの黎明期から、コミッターとしてフレームワークの成長を支えてきたエンジニアがいます。Vue.js日本ユーザーグループの運営に携わるkazuponこと川口和也（かわぐち・かずや／ @kazu_pon ）さんです。他言語対応を行うvue-i18nやその周辺ライブラリの開発、さらにStorybookのVue.js対応などのコントリビューション活動で、Vue.jsの発展に貢献してきました。

精力的にVue.jsへのコントリビュートを行う川口さんですが、意外にも過去にはOSSの開発には一切携わっていなかったといいます。しかし、彼はあるときVue.jsの機能美に衝撃を受け、積極的に関わるようになり、コントリビューションを行うように。いまではVue.jsの世界での、著名なコミッターとなりました。

それほどまでに川口さんを引きつけたVue.jsの魅力とは？ そして、コミュニティに貢献し続けてきた彼は、現在のVue.js人気をどう捉えているのでしょうか？

• 衝撃的だったVue.jsの使い勝手
• Vue.jsを使い始めてから、わずか1ヶ月でコミッターに
• 良質なDXを提供するVue.jsの仕組みづくり
• フレームワークとともに、コミュニティも大きく成長した
• 大切なのは“人間”と向き合うこと

衝撃的だったVue.jsの使い勝手

──何をきっかけに、Vue.jsと出会ったのですか？

川口　業務で担当していたプロジェクトにVue.jsを導入したことです。仕事であるプロジェクトにアサインされたのですが、そこではフロントエンドの技術としてjQueryが使われており、ソースコードがかなり複雑化していました。いわゆるスパゲッティコードの状態です。

「まずは構造化しましょう」という話になり、フレームワークの導入を決定しました。それが2014年のことです。当時はVue.jsだけではなくBackbone.jsやAngular（当時はAngularJSという表現が一般的）、Reactなど優れたフレームワークがそれぞれしのぎを削っていた頃でした。

川口和也さん：大学院卒業後、沖電気工業株式会社でコールセンターのシステム開発に携わる。その後、Webエンジニアに転身。フリーランス、会社員として数多くの開発に関わる。Vue.js 日本ユーザーグループの運営にも携わり、Vue.jsの普及、啓蒙活動に注力する。

──いくつもの選択肢があるなか、Vue.jsに決めたのはなぜでしょうか？

川口　プロジェクトが立ち上がってから、同僚に「Vue.jsがいいよ」と勧められたんです。当時はまだVue.jsが出たばかりの頃で、バージョン0.8くらいです。

どれほどのポテンシャルがあるのか最初は半信半疑だったんですが、利用してみて使い勝手の良さに驚きました。少ないソースコードの量で構造化できて、学習コストも低いし拡張性や柔軟性もある。「これは素晴らしい」と思ってプロジェクトで採用しました。以来、Vue.jsに魅了されてしまったんです。

──他のJavaScriptフレームワークと比較して、Vue.jsの利点はどういったところにあると思いますか？

川口　Vue.jsの設計思想が優れているのは、どんな規模のWebアプリケーションにも導入しやすいところなんです。例えば、ちょっとした“ペライチ”のWebサイトでも、scriptタグでVue.jsを差し込むだけですぐ導入できます。私たちのように、既存のプロジェクトに途中から導入するのも簡単です。

また、中規模～大規模のWebアプリケーションであっても同様です。とにかく、非常にフレキシブルなフレームワークだということ。その設計思想に共感できたのが、大きな魅力を感じた理由ですね。

Vue.jsを使い始めてから、わずか1ヶ月でコミッターに

──そこからVue.jsのコミッターになったのは、どのような経緯で？

川口　「コミッターになろう」と思ってそうしたわけではなく、必要にかられてのことだったんです。私が関わったプロジェクトでForm画面を実装することになり、バリデーション機能が必要になりました。でも、当時はVue.jsにバリデーションを行うためのプラグインがなかったんです。

そこで、「vue-validator」を実装してPull Requestを送ったのが、Vue.jsにコミットするファーストステップでした。プロジェクトでVue.jsを採用してから、1ヶ月後くらいのことですね。

──わずか1ヶ月とはすごいスピードですね！

川口　「vue-i18n」を作ったのも同じタイミングです。これも必要にかられてできたもので、担当プロジェクトで国際化対応が必要だったんです。ニーズを満たしてくれるプラグインがないなら自分で作ろうと、必要なものを実装していきました。その結果として、Vue.jsコミッターのチームメンバーに自然と入っていったという感じです。

──当時は情報が少なかったと思いますが、何を参考にソースコードを書いていたのですか？

川口　プラグインのベストプラクティスと呼べるものがなかったので、本当に手探りです（笑）。調べて聞いて、そして実証するしかなかったんです。分からない部分は、Vue.jsの公式リポジトリを見たり、Vue.js作者のEvan You（ yyx990803 ）さんに直接質問して学習した記憶があります。もう一つ、他のJavaScriptフレームワーク作者が書いたソースコードも参考にしました。TJ Holowaychuk（ tj ）さんやJames Halliday（ substack ）さんのリポジトリなどをよく見ていましたね。それから、vue-i18nの設計方針はRuby on Railsにかなり影響を受けています。多言語向けのリソース管理の方法やAPIまわりなどを参考にしましたね。

同じくらいの時期に、公式ドキュメントの翻訳にも取り組むようになったんです。10人くらいの参加者を想定した、Vue.jsユーザー向けの小さいミートアップを開催したのがきっかけです。ミートアップの参加者だった手島拓也（ @tejitak）さんから、「翻訳をしましょう」と提案をもらったんです。

当時は公式ドキュメントのボリュームも現在ほど多くなかったので、各メンバーで分担すればなんとかなりそう、という感触がありました。それ以降、月に1回ほどのペースで集まって、みんなで翻訳をするようになったんです。

良質なDXを提供するVue.jsの仕組みづくり

──現在、川口さんはVue.jsコアチームに所属しています。チームメンバーは普段どのような作業を行っていますか？

川口　基本的には、Vue.jsが公式でサポートするライブラリの機能追加・変更やバグ対応、公式ドキュメントの修正などを行っています。各IssueやPull Requestの優先度をつけて、「入れる」「落とす」の判断をしたり。それからユーザーの質問に答えたりもしています。

──日々、世界中から数多くのIssueやPull Requestが届くかと思います。何を基準に「取り込む」「取り込まない」を決めていくのですか？

川口　大まかには、以下の2つが基本的な流れです。

1. IssueやPull Requestが入力フォーマットに沿っているかをチェック
2. その機能が本当に必要かどうかを議論する

まず前者を解説すると、IssueやPull Requestのなかには、必要な情報が記載されないまま起票されてしまうものがあるんです。そうしたチケットの場合、起票者とのコミュニケーションや調査にメンバーのリソースが取られてしまいます。

そこでVue.jsチームでは、IssueやPull Request用の入力フォーマットを用意し、フォーマット通りになっていなかったらチケットを自動的に閉じるBotを作成しています。

これによって、チケット対応はかなり効率化できています。他のOSS開発者からも、「Vue.jsのチケット対応の仕組みは優れている」と言っていただけることが多いですね。

▲Vue.jsのIssue入力フォーマットでは、再現コードや再現手順、ユーザーが期待する動き、問題の動きといった情報を入力が求められている。これらの情報があることで、コミッターにかかる負荷が圧倒的に軽減できるためだ。

──その一次チェックを通過した後は、どのような基準でチケットが選別されるのですか？

川口　明確な基準があって、「Vue.jsのコアに取り込まなくても、ユーザーがプラグインなどを使ってなんとかできるなら入れない」です。Vue.jsでは基本的に最小限の機能だけを入れるという方針を大事にしています。Evanさんの設計思想に沿っていれば入れるし、そうでなければ入れないようにしています。

──コアチームの活動を通じて学んだことはありますか？

川口　数多くありますが、何よりも痛感したのは「ユーザー視点を持つこと」の大切さです。これは、Evanさんから学ばせてもらいました。

彼は常にエンドユーザーの視点に立って「どうすれば使いやすくなるか」「開発しやすい環境になるか」を考えています。DX（Developer Experience：開発体験）を重視しているんです。もともと、Evanさんはインタラクションデザイナーの仕事をしていたそうですが、その経験が大きく影響しているのではないでしょうか。

私がVue.jsに魅力を感じているのは、もちろんフレームワークとして優れているからというのもありますが、Evanさんが持つマインドに共感できるから、という要素も大きいんです。

「ユーザー視点」に関してはひとつ印象に残っているIssueがあります。Vue.jsのバージョン1.0がリリースされるかされないか、という頃です。1.0を出すにあたって、新しい構文に関するディスカッションが生まれたんです。

▲川口さんの言うIssueは「1.0 binding syntax (discussion thread)」。いずれもVue.jsの仕様について多くのメンバーが意見を出し合ったIssueであり、コミュニティの成長を実感する契機になったという。

実はこれ以前はIssueでオープンにユーザーの声を聞きつつディスカッションするという雰囲気がなかったんです。しかし、このIssueではユーザーの方がいろいろな意見を出しあい、時には作者のEvanさんも考えないようなアイデアも出てくる。ディスカッションとしてのIssueがいつしかブレストになり、最終的に仕様へとまとまっていくプロセスが自分にとって非常に興味深かったんです。

フレームワークとともに、コミュニティも大きく成長した