Yappli Tech Blog

株式会社ヤプリの開発メンバーによるブログです。最新の技術情報からチーム・働き方に関するテーマまで、日々の熱い想いを持って発信していきます。

AIが提案する「モダンなeslint設定」の検証とチームへ導入した話

AI TypeScript Vue.js フロントエンド

これはヤプリ&フラー 合同アドベントカレンダー Advent Calendar 2025の8日目の記事です。

こんにちは。ヤプリフロントエンドグループの武井です。

みなさんeslintの設定どうしていますか。

YappliのCMS管理画面ではフロントエンドにVueとNuxtを採用しています。 そのコードのチェックにeslintを使用しています。

この記事を読んでいる人には説明はいらないかもしれませんが、lintとはコード品質を保つための静的解析ツールで、構文やスタイルの問題を検出・修正します。eslintはTypeScriptにも対応した代表的なツールになります。 とても便利なツールなのですが設定項目がとても多く理解するのがたいへんです。ですが一度設定すれば継続的にコードの品質を保ってくれるのでとても頼りになるツールです。

VueやNuxtのバージョンアップなど日々ソースコードのモダン化も行う中でけっこう記述のルールも変わってきています。古いコードの記述方法をレビューで指摘したりされたりというやりとりもけっこう起きたりします。できればこういったやり取りは仕組み化して自動解決したいものです。

そういう時こそlintでの指摘や自動修正でコード記述時にあらかじめ解決したいです。 そこでlintの出番ではあるのですが、かなり種類のあるeslintの設定を見直して現在のコードで適用すべきものを新たに精査するのも骨が折れそうです。

最近われわれが手にした新たな武器であるところのAIは、マニュアルの要約や翻訳、設定の精査や補足などが得意なはずです。 新たなチャレンジとしてAIを活用してeslintの設定を見直すということをやってみようと思い立ちました。

とりあえずやってみよう

今回はClaudeCodeを使用しました。

まず手始めにかなり雑に相談してみました。

eslintの設定をモダンにしたいです。
現在の設定を見直して追加すべき設定を提案してください。
@eslint.config.mjs

AIにeslintの設定を提案してもらった

おお、AIに雑に質問した割にけっこういい感じの内容を返してくれている気がします。この方法はもしかしていけるのではないでしょうか。

しかし、出力された設定がいったい何を指しているのかマニュアルと照らし合わせて確認するのは面倒です。ここもAIに聞いてみましょう。

それぞれの項目について有効パターンとNGパターンを例示してください。

eslintの設定を解説してもらった

これもなかなかいい感じに解説してくれています。

この結果をもとにチームに展開してeslintの設定を決定したいと思います！

チームに展開してレビューをしてもらった

CMSのシステムフロントエンドチームの大半が関わるのでチームに展開してレビューをしてもらいました。

もらったありがたい意見

  • それもうEssentialに入ってる
  • 導入の影響が大きい設定は慎重に
  • errorではなくwarningで
それもうEssentialに入ってる

Essentialというのは eslint-plugin-vue で定義されている優先度レベルで、エラーを防ぐためのルールです。

現在のプロジェクトでは @nuxt/eslint を使用しており、内部的に plugin:vue/vue3-recommended が適用されています。 つまり、Essential ルールは既にすべて有効になっています。

これをレビューで指摘できるチームメンバーはマジ心強い。

導入の影響が大きい設定は慎重に

今回新しく設定を追加する前にも設定を追加したことがあるのですが、その時の設定を直しきっていない部分がかなりあります。 そこに追加の設定をいれるとerror/warningがおかわりで大量発生することが予見できます。 システム開発をするに当たって放置された大量のwarningは開発者体験を大きく下げます。 lintを入れてコードをきれいに保とうというのとはベクトルの異なる話ではありますがもっともな意見です。

また自動整形のある設定を追加した場合コンフリクトが大量に発生する恐れがあります。 ヤプリのシステム開発では何レーンものプロジェクトが同時進行していますので、自動整形による意図しないコンフリクトは避けたいところです。 このあたりは程度問題だったりmasterブランチへのマージ戦略の問題だったりしますが、あまりにも導入の影響が大きい設定は慎重になる必要があるでしょう。

errorではなくwarningで

ルールが新しく追加されることにより新たにerror/warningとなる箇所が発生することは確実です。 CMSのCIのルールとしてlintでerrorがあると本番環境やテスト環境へデプロイができません。 eslintの設定を追加することで急にデプロイ出来なくなるという事態が発生しそうです。

いったん設定はwarningで追加して様子を見るのが無難でしょう。

結果

追加すべき設定が精査されました。 その結果、設定するべき内容は最初にAIが提案したものから大幅に減ってしまいました。

やってみての感想

というわけで今回は、AIを活用してeslintの設定を見直すというチャレンジだったわけですが、感想としては

  • AIを使ってeslintの設定を精査するというのは有効だと思った。
  • わからない設定もAIに説明してもらえるが時々怪しいときがあるかも？
  • 最後のチームのコンセンサスをとるのがいちばん時間がかかった。

良き相談相手としてのAIはとても頼りになりますし、説明もとてもわかりやすくしてくれます。 ただAIでぱっと結果が出ても、チームで開発している以上いろいろ調整は大事だなーと思いました。 今後この設定がシステムに組み込まれることになりますが、開発者体験がよりよくなることを願っています。