2019年3月に僕たちのチームが担当するスマートフォンサイトをリニューアルしました。リニューアルに際して、せっかくなので新しい技術やフレームワークを採用したいということで、詳しいメンバーはいませんでしたがVue.jsでリニューアルすることにしました*1。本記事では、Vue.jsがほぼ初心者だけのチームでVue.js製プロジェクトをリリースするまでに得られた知見をまとめます。富山県黒部市にある北陸新幹線の駅。本文には特に関係ありません。hiring!サービスの概要リニューアル対象の「m3.comカンファレンス」は、会員の医師同士で専門的な意見交換をするための掲示板のようなサービスです。Yahoo!知恵袋のようなサービスを想像していただければだいたい合っています。medqa.m3.comリニューアル前のスマートフォンサイトは、主にjspとjQueryで構成されていました。表示側の制御だけでも長年の開発でそれなりに複雑になっており、機能追加が難しくなっていました。APIに寄せ、SPAで構成することにしました。CLIでプロジェクトを作るのがオススメです。必要な設定を対話的に決めた後は必要なpackage、設定ファイルのインストールまで進めてくれます。Routerの状態まで表示できます。ブラウザから手動でdataを書き換えて動作を確認することもできます。開発効率が何倍も違います。CLIはGUI(ウェブブラウザ)でも操作できます。今はGUIから視覚的に確認できます。packageごとにバンドルサイズを確認できるStorybookはデザイナーさんもうれしいStorybookはVue.jsだけでなくReactやAngularでUIコンポーネントを開発するためのツールです。書いてしまえばブラウザで実際の表示を確認しながらコンポーネントを開発できます。コンポーネントへ渡すpropsを変えた場合にどう表示が変わるかをインタラクティブに確認できます。ローカルで別途APIサーバを立ち上げたり、テスト環境にいちいち全部をデプロイしなくてもデザイン作業を進められます。エンジニアはコンポーネントのtemplateとscriptを実装しておけば、ある程度デザイナーさんにお任せできます。文字数が長い場合の折り返しがどう見えるか、特定の条件でだけ表示されるアイコンが正しい位置にあるか、はStorybook上で確認できます。プロジェクト設定lintと自動フォーマットは必須Vue.jsに限ったことではないですが、チームで開発する上でlintと自動フォーマットは必須です。人間が気にするべき領域ではありません。フォーマットが統一されていれば、diffが本来やりたい変更だけになるので、差分が分かりやすくなります。フォーマットは初めから自動で実施するようにしておく方がよいです*2。commit前にステージング対象の.jsと.vueにlintと自動フォーマットを実行し、再度ステージングする設定しました。実際のDOM構造に合わせたテストを作るのは不可能ではないですが困難でした。他のコンポーネントとは独立にテストを実行することができます。逆に言うと、コンポーネントはテストを実行しやすいような単位に分割するべきです。テストを意識すると、コンポーネントの設計も自然と適切な形になります。巨大なコンポーネントのテストが複雑になるのは、他の言語と同じです。テストに失敗してしまう場合があることです。なくなった時にテストに失敗します。見た目を直すだけであっても、DOM構造やCSSクラスを変更することはよくあるので、テストは失敗しやすくなります。いう方法がよさそうです*3。APIのURLが本番とローカルの開発サーバで違ってしまい、本番環境の設定ではAPIサーバに接続できません。APIのURLを切り替える必要がなくなります。