見出し画像

ジョインして1ヶ月 Geppo のフロントエンドにおける改善の取り組み

はじめに

銀座にうまいラーメン屋が多くて感動している岩下(@jaxx2104)です!これまでリクルートライフスタイルにて飲食業務支援アプリの開発をしていましたが、8 月からリクルートとサイバーエージェントのジョイントベンチャーである株式会社ヒューマンキャピタルテクノロジー(HCT)の開発チームリーダーとしてジョインしました 💪

従業員のコンディション可視化・改善ツール「Geppo」は回答画面と管理画面を WEB アプリケーションとして提供しており、Vue.js で作られています。 そんなフロントエンドにジョインして 1 ヶ月の改善の取り組みについて紹介したいと思います。

フロントエンド課題に取り組む

技術レイヤーから開発フローまで業務上の課題を開発メンバー全員にヒアリングして課題設定をしました。 「問題に対する解をすぐ出せる」「自分の仕様把握になる」の二点を重視して、自分が元々フロントエンドエンジニアということもあり、はじめにフロントエンド課題の優先順位づけをして取り組むことにしました。

フロントエンドの課題一覧

画像1

このエントリーでその取り組みをいくつかピックアップしていきます。

1. Vue CLI 3(Webpack4, Babel7)へアップデート

まずは足回りからということで、ビルド環境を刷新してビルドパフォーマンスやファイルサイズを最適化します。

既存は Vue CLI 2 で構築されたプロジェクトだったという点と、豊富なビルトインによる機能によってファイルサイズの削減と効率的なキャッシュの恩恵を受けれて、プラグイン方式によって今後の拡張性も担保できることから Vue CLI 3 へマイグレーションをするという判断をしました。

1. Vue CLI 3 をグローバルインストール
2. 移行先のプロジェクトを新規で作成
3. src ディレクトリを移行
4. dependencies を移行
5. webpack.config.js の設定を移行

あとは yarn build で確認と修正を繰り返しました。

アップデートと最適化の結果

このアップデート作業はオープンな場で書けることが少なく、地道にデバッグしてエラーを潰していくような内容だったので一番根気のいる作業でしたが、無事レビューを終えてマージすることが出来ました 🎉

画像7

マージまで付き合ってくれたレビュアーの方々にも感謝 🙏

改善した内容としては

・ビルド時間は 45.15s25.78s43% 短縮
・総ファイルサイズは 12.7% 削減
・画面差分ファイルサイズは 95% 削減

といった感じで実際にアクセスしてみてもサクサク遷移しているのがわかるくらいまで改善しました。今後についても改善が出来る部分は多いので引き続きやっていきたいと思います。

2. 静的解析(ESLint, Vetur)の最適化

コードの静的解析や補完、ジャンプなどが無効になっていたので、開発やレビュー時にタイプミスなどの基本的なエラーや、コード規約や記法といった対応に多くの時間を占めていて、開発効率が出にくい状況が課題でした。

フロントエンドのメンバー全員が VS Code (Visual Studio Code) を使って開発しているので、Intellisense が有効になるよう Vetur プラグインの設定を見直します。

まず VS Code の設定ファイルに ESLint で処理をする言語を記載します。(TypeScript を 書いている人は typescript や typescriptreact を適時追記してください)

.vscode/setting.json

{
  "eslint.validate": [
    {"language": "javascript", "autoFix": true },
    {"language": "javascriptreact", "autoFix": true },
    {"language": "html", "autoFix": true },
    {"language": "vue", "autoFix": true }
  ]
}

ファイルジャンプが出来るように jsconfig.json を追加します。Vue プロジェクトの場合は @resolove.alias を設定している場合が多いと思うので paths の設定を入れて下さい。(他の設定をしている人は適時読み替えてください)

jsconfig.json

{
  "compilerOptions": {
    "baseUrl": ".",
    "paths": {
      "@/*": ["src/*"]
    }
  },
  "include": ["./src/**/*"]
}

最後に eslint-plugin-import の import/extensions ルールを追加して .vue ファイルの拡張子を省略しないようにします。こうしないと Vetur のジャンプや補完が有効になりません。

eslintrc.js

'import/extensions': ['warn', 'always', { js: 'never' }]

拡張子を省略しない理由については Vetur の FAQ が書かれているので気になる人は見てください。

3. Pug から HTML への移行

併せて Geppo ではテンプレートのマークアップとして Pug を使用していましたが、eslint-plugin-vue の内部パーサーである vue-eslint-parser が Pug 未対応であるため、テンプレート部分の静的解析が効かない問題がありました。そのため今回の見直しをきっかけに HTML への移行についても実施しました。

vue-pug-to-html をグローバルインストール

$ npm i -g vue-pug-to-html

grep によって一括変換する

$ grep -l pug ./src/\*_/_.vue 2>/dev/null | xargs pugToHtml

まずは Pug から HTML への変換後、これまでチェック出来ていなかったエラーや崩れたインデントなどを一括で自動修正するために、extends に plugin:vue/essential を rule に以下の設定を追加しました。

'vue/component-name-in-template-casing': 'error'
'vue/html-self-closing': 'error'

上記のルールを自動修正します

$ yarn lint --fix

あとは HTML への変換によってインデントスペースが評価されてしまうので、スタイルで white-space: pre-wrap と指定している要素は表示崩れが発生してしまうので、v-text への書き換えました。

静的解析と HTML 移行の結果

「静的解析(ESLint, Vetur)の導入」と「Pug から HTML への移行」を実施した結果、以下のような機能を使って開発者が効率良くコーディング出来るようになりました 🎉

vue-plugin-eslint のエラーが表示されます。構文エラーに気付けるのでプログラミング誤りによるバグ防止に繋がります。

画像3

構文エラーのチェック機能

Vue.js の script で宣言した data や computed、method の補完が template の中で効くようになっています。単一テンプレートだと大体のコンポーネントが結構な行数になるのでスクロールで行き来しなくて良いので快適ですね。

画像4

補完機能

import 文や template でファイルジャンプが出来るようになっています。動作するためには細かい設定が多いので Vetur を使っているけど動作していないプロダクトが結構多いような気がします。

画像5

ファイルジャンプ機能

4. ユニット/インテグレーションテスト(Jest)の導入

実装上で扱っているライブラリの移行を検討していたのと、プロダクトでよく扱うロジックを汎用モジュール化した方が良い部分があったので、この2点のロジックの振る舞いに対する品質担保としてユニットテストの実施をすることにしました。

メインとなる画面やストアについてはインテグレーションテストをエンハンスで実施することでビジネス要件を担保しようという方針を立てて、Jest を導入することにしました。

ちなみに静的解析、ユニットテスト、インテグレーションテスト、E2Eテストの方針は Testing Trophy を参考にしています。

5. E2Eテスト(Cypress)の導入

E2E テストは実際のサーバーや API を使ってブラックボックステストとして動作を確認出来ることが利点ですが、 一方で外部影響によってテスト結果の合否が安定しなかったり時間やサーバーなどのリソースを多く必要としたりと、 意図せずコストが高くなってしまいがちです。

Geppo では「全ルーティングの初期描画と主要導線のみチェックする用途に限ってのみ運用する」※1 という方針を立てて、Cypressを導入することにしました。

画像6

画面スナップショットを取得して前回との差分を検知している例

これを CircleCI で実行できるようにしてリグレッションテストの前に自動実行されるように設定しました。 Cypress Bot と Cypress Dashboard が実施内容の通知と画像と動画を残してくれるので便利です 🤖

画像7

CIでの実施結果は Bot が PR コメントで通知してくれる

最後に

Geppo のフロントエンドにおける改善を通じてクライアント体験と開発体験の向上を環境から支える仕組み作りができ、それが自分にとっての経験値にもなったので良かったです。この期間で仕様についても少しだけ詳しくなったと思うので、次はバックエンドとフロントエンドの難易度の高い課題を取り組んで、このプロダクトブログを更新出来ればいいなと思ってます。

通常のエンハンスをこなしながら課題のヒアリングやレビューに時間を割いてくれた開発メンバーのみなさん。本当にありがとうございました 🙏

※1 E2E テストによって動作仕様まで網羅的に書く場合、時間的なリソースが不足するだろうという感覚があります。SET (Software Engineer in Test) のような専門で担当してくれるといいなと思っています。

この記事が気に入ったらサポートをしてみませんか?