てくすた

ピクスタ株式会社のエンジニア・デザイナーがつづるよもやまテクニカルブログです

全社的にES2015のコーディングルールを導入するための工夫

英語沼から抜け出せる気がしない id:necojackarc です。

現在ピクスタでは、

  • CoffeeScript の開発自体が停滞している
  • CoffeeScript の主要機能は既に ES2015 で採用されている
  • ES2015 or later で導入されていく新しい仕様を活用したい

などを理由とし、CoffeeScript から JavaScript (ES2015 or later) への移行を進めています。

しかし、これまで ES2015 を利用してこなかったので、ES2015 に関するコーディングルールがありませんでした。

それに伴い、ES2015 におけるコーディングルールの策定と適用を行いました。

そこで、今回は ES2015 のコーディングルールを全社的に導入する際に工夫したことについて紹介します。

なんだか似たようなタイトルの記事を3ヶ月くらい前にも書いていますので、気になる方はそちらもご覧ください。

テーマについては前回とほぼ同じく、

  • どのようにしてコーディングルールを順守してもらうか
  • どのようにしてコーディングルールを一斉に適用 / 更新するか

です。

特に複数リポジトリへの設定の一斉適用に関する取り組みについて説明します。

コーディングルールの策定

ピクスタでは Ruby においては、Ruby Style Guide をベースとしたルールを適用しています。

ES2015 においては、

をベースルールとし、必要に応じて変更や追加を行っていくことにしました。

ESLint の導入

コーディングルールを遵守してもらうには、以下の記事でも言及しているように、チェックの自動化が望ましいです。

texta.pixta.jp

先ほど挙げたベースルールは ESLint で簡単に設定可能という理由もあり、ESLint を導入することにしました。

ESLint を利用することで、コーディングルールに準拠しているかを自動でチェックできます。

全社的に導入するための工夫

ピクスタではリポジトリが各サービスごとに分離しており、各リポジトリで設定ファイルを個別に管理するのは煩雑です。

ESLint には、設定をライブラリとして切り出せる機能 (Extensible Shared Config) があります。今回はこれを利用し、ES2015 のコーディングルールを中央管理する npm ライブラリを作成しました。

github.com

こちらのライブラリを利用するには、以下のような ESLint の設定ファイル (.eslintrc) を配置する必要があります。

{
  "env": {
    "browser": true
  },
  "extends": [
    "pixta"
  ],
  "globals": {
    "gon": true,
    "I18n": true
  }
}

ルールの追加や変更を行いたい場合、各リポジトリの .eslintrc は特に変更する必要はありません。eslint-config-pixta の更新のみで済むようになります。

まとめ

ピクスタでは ES2015 のコーディングルールのベースとして、

を採用しました。

コーディングルールに準拠しているかのチェックについては ESLint を導入し、複数リポジトリへの設定の一斉適用に関しては Extensible Shared Config を利用しました。

これにより、

  • コーディングルールに準拠しているかどうかのチェックの自動化
  • Extensible Shared Config による全リポジトリへの一斉適用

が達成できました。