最近スキルアップを目的にLaravelでWebアプリの開発に取り組んでいます。
その一環でCI/CDツールの導入も積極的に行っており、フォーマットチェック/整形ツール「StyleCI」を導入してみましたので、導入方法と運用手順を紹介します。
StyleCとは？
StyleCI – The Web Coding Style Fixer
Laravel公式が利用しているサービスで、PHPやJS、CSSのフォーマットをチェックし、自動で整形可能なサービスです。
GitHub、GitLab、Bitbacketと連携ができ、各種ホスティングサービスにpushすると、自動的にチェックが行われます。
導入手順
はじめに「Get started」をクリックします。
次に連携するホスティングサービスを選択します。
今回はGitHubを例に説明します
ログイン画面や認証画面が表示されますので、指示に従い進めていきます。
認証が済んだらダッシュボード画面が表示されます。
連携するリポジトリが設定するため「account page」リンクをクリックします。
連携したいリポジトリの「ENABLE STYLECI」ボタンをクリックします。
今回はLaravelで開発を行っている「Laravel-SNS」というリポジトリを選択します。
設定が済むと「SHOW ANALIZES」ボタンに切り替わることを確認しましょう。
ダッシュボード画面に戻ると設定した「Laravel-SNS」リポジトリが追加されていることが確認できます。
現時点でもコードをチェックすることができるので試してみましょう。
リポジトリ名部分のリンクをクリックします。
「ANALIZE NOW」ボタンをクリックします。
処理中は下図のように「LOADING…」ボタンに切り替わります。
初回はNGでした。
NGの場合はStatus項目が「❌」になります。
原因となるコードは「SHOW DETAILS」から参照できるのでクリックします。
詳細画面でNGコードと修正案を参照することができます。
現状はLaravelのフォーマットに合わせた設定になっていないので、大量に修正部分が発生するはずです。
Laravelで利用するための設定を加えていきましょう。
Laravelで利用するための設定方法
冒頭で説明した通りLaravel公式でも採用されているので、GitHubを参照しStyleCIの設定を見てみましょう。
laravel/.styleci.yml at master · laravel/laravel
今回はこの設定をそのまま利用します。
ただし、無料プランの場合はPHP以外の言語はチェックできないので.styleci.ymlを以下のように修正します。
preset: laravel
disabled:
- unused_use
finder:
not-name:
- index.php
- server.php
このファイルをルートディレクトリに設置してGitHubにpushします。
pushしたブランチをプルリクエストしてみるとStyleCIが失敗していることが確認できます。
「Details」リンクをクリックし、StyleCIのページに遷移します。
修正内容が確認できますので、問題なければ「CREATE FIX PR」ボタンをクリックします。
新しいブランチが作成され、元となるブランチに大してプルリクエストが作成されるので内容を確認してみます。
当たり前ですがコードチェックも問題なく通過するはずなのでマージしましょう。
最初にプルリクエストした内容もコードチェックが通過するはずなので確認します。
問題がなければStyleCI側も「PASSED」と表示されます。
これで一通りの使い方の説明は終了です。
非常に簡単に運用でき便利ですね。
READMEにStyleCIのバッジを追加する
おまけとしてGitHubのREADMEにStyleCIのバッジを追加する方法を紹介します。
どのコミットでも問題ないので、「SHOW DETAILA」ボタンをクリックし詳細画面を表示します。
右上に表示されているStyleCIのバッジをクリックします。
バッジを貼るためのコードがモーダル内に表示されます。
今回はMarkdownで書くので、Markdown形式のコードをコピペします。
最後にGitHubのREADMEを編集し、問題なく表示されることを確認しましょう。
おわりに
1人で開発するときはエディタのLinterツールで十分ですが、複数人で開発するときは異なるエディタだったり、設定違いなどで予期しないフォーマットが取り込まれてしまう場合があります。
そういった場合にStyleCIを設定しておくことでコードフォーマットを維持するのに役立ちそうですね。
PHP以外の言語を利用する場合やprivateリポジトリを利用する場合は有料となりますが、検討する価値は十分にありそうです。
ではまた。