社内Vue.jsプロジェクトユーザーインタビュー
katsuya_asial
こんにちは、WEB開発チームの斉藤です。
弊社では3-4人のチームでプロジェクトを運営するのですが、隣のプロジェクトではどうなっているのかを知れることが少ないです。
そこでVue.jsに関するブログを書いて欲しいと当番が回ってきたのですが、Vue.jsを引っくるめた話を伺うチャンスとして、インタビューしてみようと思い立ちました。
やってみたところ、Vue.js単体ではなく周辺技術を交えた総合的な内容が、回答として上がってきました。
Vue.jsをメインに据えたJSアプリの開発体験に言及されている、という前提でお読みください。
（なお、できるだけVue.js万歳という言い方や、他のフレームワークの良さを下げる言い方は避けるようにしています。）
長くなったので、読みたいところだけ読めるよう、目次を置いておきました。
- 主な質問内容
- Sさん：入社二年目、フロントエンド構築を担当
- Oさん：アシアルに入って三ヶ月、Java開発経験からJS開発に臨む
- Tさん：AngularJSを使ったことがある、モバイルアプリの開発者
- Sさん：ITプロジェクトは何でもやってみたいと思うエンジニア
- Mさん：Onsen UIメンテナンスの担当
- Nさん：フロントエンド、バックエンド、ネイティブアプリなど幅広くシステムを構築
- Kさん：社内の屋台骨、インフラを支える
- 終わり
主な質問内容
以下を聞いています。
Q: 略歴と仕事内容を教えてください。
Q: Vue.jsとの出会いは何でしたか？
Q: 今までのコーディングに比べて、どんなところが良かったですか？
Q: 開発の環境（エディタやプラグイン）を教えてください。
Q: こうだったら良いのにと思うことはありますか？
Q: その他、何かありますか？では、WEB開発歴が浅い人から話をみていきましょう。
Sさん：入社二年目、フロントエンド構築を担当
Q: 略歴と仕事内容を教えてください。
アシアルに新入社員として入社して1.5年目。
フロントエンドを触ることが多いが、基本的にはエンジニアリングはなんでもやりたいと思っている。
Q: Vue.jsとの出会いは何でしたか？
アサインされたプロジェクトがVue.jsでコーディングされていたため。
Q: 今までのコーディングに比べて、どんなところが良かったですか？
開発ツールや、ドキュメントが充実している
axiosなどサードパーティ製のライブラリの指定に、Vue.jsの公式見解として推奨されているところが採用しやすかった。
使った当初、HTMLの中に新しい属性を入れる書き方が独特に思えたため、別のライブラリと混ぜて本当に利用できるか不安だった。
そのため、公式見解が出ているのは嬉しい。
学習が楽だった
覚えることが少なかった。
HTML上にVue.jsの属性書くのだけれども、v-for, v-ifなどJSでの考え方と同じで済んで楽だった。
Q: 開発の環境（エディタやプラグインなど）を教えてください。
Vim環境で利用
Vimを使って書いていて、posva/vim-vue.js というプラグインを利用している。
このプラグインで、vueファイルのハイライトを対応している。
- posva/vim-vue.js：https://github.com/posva/vim-vue.js
vue-devtools
stateやcomponent内のdata要素の確認が便利。
ESLint設定を利用
ESLintとeslintrcが便利。
エディタの違う開発者間でも、コーディング規約を揃えられるため。
dev-server
dev-serverによって開発環境がすぐに整えられるのが便利。
npm run devだけですぐに始められることや、ホットリロードで画面再読み込みなく開発が続けられる点が良いと思っている。
Oさん：アシアルに入って三ヶ月、Java開発経験からJS開発に臨む
Q: 略歴と仕事内容を教えてください。
エンジニア2年目です。
始めた触った言語がJava 1年ぐらいで、アシアルに入ってからはJSとPHPを触っています。
Javaでは、Springを使った開発をしていました。
Q: Vue.jsとの出会いは何でしたか？
アシアルに入ってみたら、メンターからの課題がVue.jsを使うもので、自ずと使うことになりました。
ただ、Vue.jsとFluxアーキテクチャは理解することができたのですが、その一方でnode.js や npm、webpackなどJSエコシステムの情報を整理するのが大変でした。
今ではかなり整理できた気がしています。
Q: 今までのコーディングに比べ て、どんなところが良かったですか？
Single File Component
vueファイルで実装するという思想がよくできていると思います。
モジュール化の考えに即しているように思え、自分で設計するにあたり、このSFCの考えが元になって設計がしやすかったです。
がっちりしていないので、大きくない機能でも導入できるところが始めやすいのではないかなと思います。
ドキュメント
日本語ドキュメントも豊富にあり、公式サイトのリファレンスを読むようになりました。
その時にも、調べたいことに関する検索性能が高いと思っていて、サンプルコードがちゃんと出てくるなど、きちんと調べられます。
同じドキュメントを読んでいるとは思うのですが、その時の自分のレベルに応じて新しいことが学習ができているように思います。
Q: 開発の環境（エディタやプラグイン）を教えてください。
エディタ
Vimとvim-vue.jsというプラグインを使っています。
- posva/vim-vue.js：https://github.com/posva/vim-vue.js
vue-devtools
こちらもちろん使っていて、SFCでできたコンポーネントのtree構造を見れる機能がやはり便利かなと思います。
また、propsを直接書き換えることもできるので、トライアンドエラーを試しやすいです。
Tさん：AngularJSを使ったことがある、モバイルアプリの開発者
Q: 略歴と仕事内容を教えてください。
WEB開発2年で、以前の会社ではAngularJSを使ってモバイルアプリを開発していました。
何かしらの市場を形成できるかどうかの検証するためにアプリを開発する、という研究開発でした。
Q: Vue.jsとの出会いは何でしたか？
LaravelというPHPのフレームワークにデフォルトで入っていたので、名前だけ知っていました。
当時はReact が主流だったのですが、社内で他のエンジニアが使いはじめ、自分も使ってみようという流れだったかと思います。
Q: 今までのコーディングに比べて、どんなところが良かったですか？
シンタックス
AngularJSユーザーだったのですが、HTMLに必要な内容を書いていくシンタックスに馴染みがありました。
リアクティブプログラミング
特定の変数に値を渡すと、自動的に画面に更新がかかるという、リアクティブなところが気に入ってます。
今まで自分たちで実装していたDOM更新処理をVue.jsが良いようにやっていて、コードが見やすくなったと思っています。
CSSの分担が可能
vueファイルで、CSSをコンポーネント単位で書ける機能を使っています。
CSSはグローバルスコープなため、人が書くCSSと自分が書いたものがぶつかりがちです。
このSFCの機能で、担当するページ間でその衝突を回避することができ、結果的にスムーズにCSS当てができました。
Q: 開発の環境（エディタやプラグイン）を教えてください。
Vimをメインに使っていますが、VSCodeもたまに使います。
Vue.js関連でいえば、シンタックスハイライトを対応するプラグインを利用しています。
また、prettierというコードフォーマッターを利用しています。
Q: こうだったら良いのにと思うことはありますか？
環境構築が楽になってほしいと思います。
vue-cliを利用してプロジェクトの雛形を作ることがあったのですが、Cordovaに組み込むのが面倒でした。
設定を変更しようにも、webpack設定が絡んできて、手間取ったように覚えています。
結局、自分で設定を修正したのですが、この辺りが整理されればいいなと思っています。
続いて、中堅の開発者に聞きました。
この方は、自社サービスにもVue.jsを適用したことがあるようです。
Sさん：ITプロジェクトは何でもやってみたいと思うエンジニア
Q: 略歴と仕事内容を教えてください。
WEB開発をPHPとjQuery時代から始めて、8年ぐらい経ちました。
自社サービスである Monaca for Hybridcastの改修にも携わっています。
Q: Vue.jsを使った理由は何ですか？
自社サービスの改修で、DOMを多く書き換える実装をする必要がありました。
これが今までのjQuery的な書き換え以外の方法を探していたところ、巷で聞くVue.jsと出会いました。
Q: 今までのコーディングに比べて、どんなところが良かったですか？
HTMLベースなところ
今まで、document.querySelectorや $(“xxx”)などで、DOMを取得し書き換えていましたが、Vue.jsのHTML内に宣言的に記述しておくという方法が気に入っています。
JSファイル側では、ロジックだけに集中して、指定した変数に入れておけばVue.jsがHTMLの表示を切り替えてくれる、という点が好きです。
学習工数
最近のフレームワークはwebpack, babelなど周辺技術がついて回ることが多いので、覚えることが多くなるという苦手意識があります。
しかしながら、vue.jsは単体でも利用でき、覚えることをVue.jsに集中できた点が気に入ってます。
Q: 開発の環境（エディタやプラグイン）を教えてください。
Sublime Editorにvueファイルのシンタックスを対応するプラグインを入れています。
- Vuejs Complete Package：Vuejs Complete Package – Packages – Package Control
Q: こうだったら良いのにと思うことはありますか？
Vue.jsだけの問題ではありませんが、vueファイル上でimport文を補完してくれるようなプラグインがあればと思います。
EclipseでJAVAを書いていた時のように、補完が充実してくれれば嬉しいのですが。
続いて、弊社製UIライブラリであるOnsen UIの中の人に話を伺いました。
ライブラリ作り手としての意見を聞くことができました。
Mさん：Onsen UIメンテナンスの担当
Q: 略歴と仕事内容を教えてください。
新卒で2016/4から入社しました。
また、2004年ぐらいからActionScriptでFlashを触っていました。
仕事はOnsenUIのメンテナンスを担当しています。
Q: Vue.jsとの出会いは何でしたか？
Vue.js 2が出たあたりで、同僚が紹介していて、その時は当時ReactとAngular 1の時代でした。
最初はAngularが期待されていたり、Reactが伸びていたので、無視していたのですが。
しばらくたってからOnsen UI開発メンバーの中で、Vue.jsが伸びているという情報があって、その一人がbindingの大枠を三日ぐらいで作りました。
そこからOnsen UIでのbindingを詳細にサポートしていくために、Vue.jsを触り始めました。
Q: 今までのコーディングに比べて、どんなところが良かったですか？
ReactやAngularと比べると、JSX やデコレータを使わずにオブジェクトリテラルだけでコンポーネントを書けるのが、とっつきやすかったのを覚えています。
開発するにしても、scriptタグ一つで始められたり、初期の段階では他のライブラリに比べて記述量が少ないのが魅力的でした。
Q: 開発の環境（エディタやプラグイン）を教えてください。
VSCodeとVeturプラグインを利用して開発しています。
OnsenUIのVue.js対応コンポーネントはvueファイルを使っているため、このプラグインのシンタックスハイライト機能を活用しています。
また、lint機能でVue.jsが推奨している記述方法を知れる点が嬉しいです。
Q: こうだったら良いのにと思うことはありますか？
図形描画のアプリを作ったりもするので、SVGも連携できると嬉しいです。
それに、Vue.js 3 でtime slicingの機能が入れば、重たくなるであろう図形描画処理も対応できそうなので、期待しています。
Q: その他、何かありますか？
Vue.jsはユーザーフレンドリーで高速で最新の機能が入っているので、開発者として純粋にすごいなという驚きがありました。
個人の方がここまで良いものを作れるのは、同じエンジニアとしてモチベーションが上がります。
最後にベテラン勢に聞きました。
幅広くシステムを構築する方、インフラ歴が長い方とフロントエンド以外の経験を持つ方から話を伺うことができました。
Nさん：フロントエンド、バックエンド、ネイティブアプリなど幅広くシステムを構築
Q: 略歴と仕事内容を教えてください。
WEB開発歴は10年。
PHPでのシステム開発や、PhoneGapを使ったiOS、Androidアプリ等の製品開発を担当。
Q: Vue.jsとの出会いは何でしたか？
自分としてはこだわりがなかったが、一緒にプロジェクトを進めたエンジニアが採用した。
Q: 今までのコーディングに比べて、どんなところが良かったですか？
HTMLベース
HTMLに記述する宣言的な書き方が、経験のあったAngularに似ていて書きやすかった。
実績やドキュメントの豊富さ
Onsen UIという自社製のフレームワークを利用する必要があったが、Vue.jsとの組み合わせはサポートされていたり、他のプロジェクトでの実績があるため、選択しやすかった。
また、公式ドキュメントがしっかりしていて読みやすい。
Q: 開発の環境（エディタやプラグイン）を教えてください。
vue-devtoolsとVSCodeにVeturをインストールして開発している。
Veturについては、vueファイルというVue.js独自の拡張子に対して、シンタックスハイライトを行える点が気に入っている。
- vue-devtools： https://github.com/vue.jsjs/vue-devtools
- Vetur：https://github.com/vue.jsjs/vetur
Q: こうだったら良いのにと思うことはありますか？
トランスパイルが遅いのが欠点。
通常のビルドもユニットテストでのビルドも時間がかかる。
何か良い方法があるんじゃないかな、と思っている。
Kさん：社内の屋台骨、インフラを支える
Q: 略歴と仕事内容を教えてください。
インフラエンジニア歴10年です。
プログラマー採用でしたが、その後インフラやミドルウェアに関わるようになりました。
社内のネットワークの構築なども触ることが多く、アプリよりも下のレイヤーに関わる仕事をしています。
Q: Vue.jsとの出会いは何でしたか？
個人でアプリを作る機会があり、Vue.jsは社内で流行っていたから、使ってみようと思いました。
フレームワーク自体は嫌いではないのですが面倒と思うタイプで、軽めなものを探していた時にVue.jsに出会いました。
Q: 今までのコーディングに比べて、どんなところが良かったですか？
HTMLベースな点
シンプルなフレームワークを望んでいましたが、HTML ベースにコーディングできるのが良いなと思いました。
最終的にブラウザにはHTMLを解釈させるということを考えると、Vue.jsのようなHTMLを中心に扱う方法が、自分には馴染みました。
他にもフレームワークを検討したのですが、構文を色々みていると、Vue.jsが一番HTMLに近い気がしています。
コンポーネントな使い方
WEBコンポーネントの概念が最近流行っているかと思いますが、Vue.js単体で同じようなことができるの がよかったです。
この書き方によって、HTMLの見通しがかなりよくなりました。
公式ドキュメントがよくできている
公式ドキュメントが充実していると思います。
こう言ったIT系の調べ物は色々な人が記事を書いているので、今のバージョンで動くのかどうかが気になるのですが、公式がわかりやすいため状況を調べやすいです。
vueファイルだけで動かせること
今のところの一ページのアプリさえ作れればいいので、Vue.js単体で動かしています。
その他のライブラリを覚える必要が少なく、シンプルに開発できました。
Q: 開発の環境（エディタやプラグイン）を教えてください。
emacsのweb-mode, js2-modeを利用しています。
この機能によって、シンタックスハイライトやタグ補完をする開発環境でやっていました。
Q: その他、何かありますか？
私は普段はインフラをやっているので、JSのエコシステムからは離れていましたが、Vue.jsはアタリなフレームワークだなと思いました。
多分、同僚のインフラエンジニアがJSでアプリを作りたいと言った時もVue.jsをオススメするかもしれません。
終わり
ということで、色々な開発者に意見を伺ってきました。
みんな口を揃えてドキュメントがよくできていると言っていたので、Vue.jsが流行ったのは調べやすさもあったりするのかなと思いました。
この記事を機に、いろんな方がVue.jsに触れる機会が増えれば、いちユーザーとして嬉しいです！
それではまた！
