Laravel+Vue.jsプロジェクトで自動テスト・CI/CD実践に使ったアレコレ

今月からLaravel+Vue.jsを用いた一人プロジェクトに従事しています。

0→1開発ということもあり、好きなようにやって良さそうだったので、以前から興味のあった自動テスト・CI/CDを自分なりに調べつつ実践しています。

で、諸々のセットアップが一段落したので、社内への共有がてら、採用したツール群をメモしておきます。

一応、Laravel5.6, Vue2.5ですが、バージョンはあまり関係ない内容と思います。

PHPStorm

有償IDEですが業務でPHP書く人の80〜90％以上が使ってるんじゃないでしょうか。
一時期VSCodeにプラグイン入れて頑張ろうとしたこともありましたが、PHPStormの開発体験には及ばないと思いました。
PHPDocの型もちゃんと読んでくれるので、ケアレスミスも減らせている実感があります。

JSにも対応しているのも良いですね。

laravel-ide-helperを併用することで補完をさらに強化できます。

barryvdh/laravel-ide-helper

PHPUnit

PHPUnitはLaravelプロジェクトに最初から入っているので特に準備もなくそのまま使えば良いですね。
テストごとにDBをリセットしてくれるRefreshDatabaseトレイトを追加するくらいでしょうか。

データベースのテスト 5.6 Laravel

PHPStan

PHPDocの型から型検査してくれるツールです。

phpstan/phpstan

PHP_CodeSniffer

PHPの構文チェックツールです。
イケてない書き方を注意してくれます。

squizlabs/PHP_CodeSniffer

PHPStormにCodeSnifferを追加 - Qiita

PHP CodeSnifferを利用して規約遵守のコードを書く - Qiita

コーディング規約の自動チェック(CodeSniffer) - Qiita

Jest+vue-test-utils

JSテストフレームワークではJestとMochaが有力なようです。
GitHubのスター数や最近のコミット数を見比べた結果、より開発が活発だと思ったJestを採用しました。

vue-test-utilsはVue.js公式が提供するテストツールです。
Jestと組み合わせることで快適にVueのテストを書くことができます。

Jest · 🃏快適なJavaScriptのテスト

【Vue.js】いつから「フロントエンド開発でTDDができない」と錯覚していた？ - Qiita

vue-test-utils | Vue Test Utils

ESLint+Prettier

ESLintはJSの構文チェックツール、PrettierはJSのフォーマットツールです。

ESLintは構文指摘、Prettierはフォーマットにそれぞれ強みがあるので併用することが多いようです。

Prettier 入門 ～ESLintとの違いを理解して併用する～ - Qiita

Circle CI

Travisと並んで最も有名なCIサービスだと思います。

CIに載せるDockerイメージは自前で書いたdyoshikawa/php-nodejsをcircleci/mysqlと組み合わせました。

極力CircleCIのイメージを使った方がビルド時間を短縮できるようです。

ここまで列挙した構文チェックや自動テストを走らせてパスした場合にステージング環境へデプロイするように設定しています。

https://hub.docker.com/r/dyoshikawa/php-nodejs/

https://hub.docker.com/r/circleci/mysql/

CircleCI 2.0でMySQLのイメージを使うならば、CircleCIが配布しているイメージを使わないと損 - Qiita

Config CircleCI for mysql database

以上、参考になれば幸いです。