feat(ESLint): 実装についてを追加

Author: azu

SUMMARY.md

@@ -3,4 +3,5 @@
 * [README](README.md)
 * [Introduction](ja/introduction/README.md)
 * [jQuery](ja/jQuery/README.md)
+* [ESLint](ja/ESLint/README.md)
 

ja/ESLint/README.md

@@ -0,0 +1,70 @@
+# ESLint
+
+[ESLint](http://eslint.org/ "ESLint")はJavaScriptのコードをJavaScriptで書かれたルールによって検証するLintツールです。
+
+大まかな動作としては、検証したいJavaScriptのコードをパースしてできたAST(抽象構文木)を、ルールで検証し、エラーや警告を出力します。
+
+このルールがプラグインとして書けるようになっていて、ESLintの全てのルールがプラグインとして実装されています。
+
+> The pluggable linting utility for JavaScript and JSX
+
+ESLintサイト上には、上記のように書かれていることからもわかりますが、プラグインに重きを置いた設計となっているので、
+今回はESLintのプラグインアーキテクチャについてを見て行きましょう
+
+## どう書ける?
+
+[import, no-console.js](../../src/ESLint/no-console.js)
+
+## どういう仕組み?
+## どういう用途に向いている?
+## どういう用途に向いていない?
+## この仕組みを使ってるもの
+## 実装してみよう
+
+今回は、ESLintのルールを解釈できるシンプルなLintの処理を書いてみます。
+
+利用するルールは先ほども出てきた[no-console.js](#no-console.js)をそのまま使い、
+このルールを使って同じようにJavaScriptのコードを検証できる`MyLinter`を書いてみます。
+
+### MyLinter
+
+MyLinterは単純で以下の2つのメソッドを持つクラスとして実装しました。
+
+- `MyLinter#loadRule(rule): void`
+    - 利用するルールを登録する処理
+    - `rule`は[no-console.js](#no-console.js)がexportしたもの
+- `MyLinter#lint(code): string[]`
+    - `code`を受け取りルールによってLintした結果を返す
+    - Lint結果はエラーメッセージの配列とする
+
+実際に実装したものが以下のようになっています。
+
+[import, src/ESLint/MyLinter.js](../../src/ESLint/MyLinter.js)
+
+MyLinterで[no-console.js](#no-console.js)を読み込ませて、
+
+```js
+function add(x, y){{
+    console.log(x, y);
+    return x + y;
+}
+add(1, 3);
+```
+
+というコードをLintしてみます。
+
+[import, src/ESLint/MyLinter-example.js](../../src/ESLint/MyLinter-example.js)
+
+コードには`console`というオブジェクトが含まれているので_"Unexpected console statement."_というエラーメッセージが取得出来ました。   
+
+### RuleContext
+
+もう一度、[MyLinter.js](#MyLinter.js)を見てみると、`RuleContext`というシンプルなクラスがあることに気づくと思います。
+
+この`RuleContext`はいわゆるルールから使えるユーティリティメソッドをまとめたもので、
+今回は`RuleContext#report`というエラーメッセージをルールからMyLinterへ通知するものだけを実装しています。
+
+ESLintのプラグインアーキテクチャの特徴でもありますが、プラグインが本体の実装がについては知らなくて、
+Contextという本体から与えられたものだけを使うので、ルールが行える事を制御しやすい作りといえます。
+
+## エコシステム

src/ESLint/MyLinter-example.js

@@ -4,7 +4,14 @@ import MyLinter from "./MyLinter";
 import noConsole from "./no-console";
 
 let linter = new MyLinter();
-linter.loadPlugin(noConsole);
-var results = linter.lint(`console.log("test")`);
+linter.loadRule(noConsole);
+var code = `
+function add(x, y){{
+    console.log(x, y);
+    return x + y;
+}
+add(1, 3);
+`;
+var results = linter.lint(code);
 assert(results.length > 0);
 assert.equal(results[0], "Unexpected console statement.");

src/ESLint/MyLinter.js

@@ -7,17 +7,17 @@ class RuleContext extends EventEmitter {
         this.emit("report", message);
     }
 }
-export default class MyLint {
+export default class MyLinter {
     constructor() {
         this._emitter = new EventEmitter();
         this._ruleContext = new RuleContext();
     }
 
-    loadPlugin(plugin) {
-        var rule = plugin(this._ruleContext);
+    loadRule(rule) {
+        var ruleExports = rule(this._ruleContext);
         // on(nodeType, nodeTypeCallback);
-        Object.keys(rule).forEach(nodeType => {
-            this._emitter.on(nodeType, rule[nodeType]);
+        Object.keys(ruleExports).forEach(nodeType => {
+            this._emitter.on(nodeType, ruleExports[nodeType]);
         });
     }
 

test/ESLint/MyLinter-test.js

@@ -6,7 +6,7 @@ import noConsole from "../../src/ESLint/no-console";
 describe("MyLint", function () {
     it("should load and lint", function () {
         let linter = new MyLinter();
-        linter.loadPlugin(noConsole);
+        linter.loadRule(noConsole);
         var results = linter.lint(`console.log("test")`);
         assert(results.length > 0);
         assert.equal(results[0], "Unexpected console statement.");