Arsaga Partners, Inc.

ESLint

読み方:いーえすりんと

  

ESLintとは

JavaScriptのコードが正しいかをチェックするツールの1つです。
エラーなどの問題が発生した場合は、自動で修正してくれることもあります。

 

ESLintの特徴

  • 設定が簡単
    Node.jsとnpmだけあれば実行できます。Gruntもgulpもwebpackも難解な設定も必要ありません。
  •  

  • 記述方式に統一感が出せる
    記述方式に統一感が出せることで、コードを読む速度が上がります。
  •  

  • ルールをカスタマイズできる
    例えばhogeというワードを禁止にする場合は下記の通りになります。

     

    (事前にeslint-plugin-rulesdirをインストールしてください)

     

index.js
function call() {
console.log(“hoge”);
}
call();

 

.eslintrc.js

// ルールを追加するための準備
const rulesDirPlugin = require(“eslint-plugin-rulesdir”);
rulesDirPlugin.RULES_DIR = “.”;

module.exports = {
root: true,
// カスタマイズルールを使えるようにする
plugins: [“rulesdir”],
// カスタマイズルールを適用させるファイルを定義する
rules: {
“rulesdir/no-hoge”: “error”,
},
};

 

rule/no-hoge.js

// コードの中にhogeが含まれている場合、エラーを表示させる
module.exports = {
create: function (context) {
return {
Literal: function (node) {
if (/hoge/.test(node.value)) {
context.report({ node: node, message: “hoge使用禁止” });
}
},
};
},
};

 

結果
appurunoMacBook-Pro:fileName arsaga$ eslint index.js
hoge

/Users/arsaga/fileName/index.js
2:15 error hoge使用禁止 rulesdir/no-hoge

✖ 1 problem (1 error, 0 warnings)

 

ESLint関連の歴史

2002年頃: すべての JavaScript 構文チェッカーの元祖と言われる JSLint が導入される

 

2011年頃: JSLint派生としてJSHintが登場。ルールの融通が利かないJSLintのデメリットを解消。

 

2013年頃: ES6に対応したJavaScript用の構文チェッカーとしてESLintが登場。全てのルールでオンオフの切り替え可能で、カスタマイズ性が高いと判明し大流行。

 

Javascriptの他にもCSSや画像も圧縮することができるので、リクエストするファイルを減らしてくれます。結果、アプリケーションのパフォーマンス向上に繋がります。

 

現場の声

エディタ(VSCodeなど)に事前にエラーを出してくれるので、画面を読み込む前にエラーが発覚して余計な画面のリロード回数が減りました。コード整形ツールであるPrettierと一緒に使えば正確できれいなコードを一発で変換してくれます!

 

 

関連用語

Node.js
npm
Prettier
StyleLint

 

 

<執筆・監修>
アルサーガパートナーズ株式会社 DX技術用語集制作チーム フロントdivision

制作・監修

アルサーガパートナーズ
DX技術用語辞典 制作チーム

当社は、営業部隊を持たないDX開発パートナースタジオです。

お問い合わせはこちら

CONTACT

下記よりお気軽にご相談ください。

LINEでお問い合わせ

RECRUIT

採用情報

アルサーガパートナーズ株式会社は、一緒に働く仲間を募集しています。 「人間らしく生きる」「自分で考えて行動する」という文化を重視しており、「バグを否定しない」という言葉を掲げています。 挑戦をし続けることが一番の成長に繋がると信じているからです。 まずは挑戦する第一歩を踏み出してもらえれば幸いです。

RECRUIT

採用情報