Letro KAIZENチーム兼フロントユニットのつづきです。
LetroフロントユニットではCIを活用した開発プロセスの効率化の取り組みを行っています。
今回は、フロントユニットで導入したCIの設定についてご紹介します。
CIで実行しているタスク
CIでは以下のようなタスクを実行しています。
1. Lint
eslintとstylelintを使用しています。
2. TypeScriptの型チェック
型の整合性を確保するための型チェックです。
3. テスト
現状はユニットテストのみの実行ですが、ビジュアルリグレッションテスト、E2Eテストなど導入していく予定です。
導入したツール
Reviewdog
コードの品質やスタイルに関する問題点をPull Requestにコメント形式で指摘するためにReviewdogを使用しています。
Pull Requestの差分のみを対象としてレビューするため、効率的なコードレビューが可能になります。
導入予定ツール
Dependabot
依存ライブラリのアップデートを自動化するためにDependabotを導入する予定です。
新しいバージョンがリリースされた場合やセキュリティ上の脆弱性が報告された場合に、自動的に通知や更新のPull Requestを作成してくれます。
CI設定の仕様
以下のような仕様でCIを実行しています。
差分のみ実行
Pull Requestに含まれる差分のみを対象に静的解析を実行するようにしています。
これにより、処理時間を節約しながら品質チェックを行えるようになりました。
ビルドの最適化
ビルド処理は必要なタイミングでのみ実行するようにしています。
例えば、APIクライアントや翻訳ファイルのビルドは、アプリケーションが依存している場合にのみ実行します。
キャッシュの効果的な利用
node_modulesやcomposerのキャッシュを使用することで、変更がない場合には再キャッシュを行わずに処理をスキップします。
導入してみた感想
Reviewdogを導入したことで、Pull Request段階での品質チェックがかなり効率化されたように思えます。解析の結果エラーとなった部分を画面遷移して確認する一手間がないのはありがたかったです。
今後もCI設定は適宜改善し、開発チームの生産性向上、品質向上に繋げていきたいと思います。
採用
フロントエンドエンジニア絶賛募集中です！
興味のある方はこちらから是非ごお応募ください！
