FazBrowse GitHub Viewer | Trending |
URL:
| Home
Tools: [Download Repo ZIP]   [Original HTTPS Page]

feat(ESLint): traverseの動画を追加 · azu/JavaScript-Plugin-Architecture@b5a6cb6 · GitHub

  1. azu
  2. JavaScript-Plugin-Architecture

Repository navigation

Commit b5a6cb6

Browse files
azu
committed
feat(ESLint): traverseの動画を追加
1 parent 243f669 commit b5a6cb6

3 files changed

Lines changed: 107 additions & 1 deletion

File tree

‎ja/ESLint/README.md‎

Lines changed: 107 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -2,7 +2,7 @@
22

33
[ESLint](http://eslint.org/ "ESLint")はJavaScriptのコードをJavaScriptで書かれたルールによって検証するLintツールです。
44

5-
大まかな動作としては、検証したいJavaScriptのコードをパースしてできたAST(抽象構文木)を、ルールで検証し、エラーや警告を出力します。
5+
大まかな動作としては、検証したいJavaScriptのコードをパースしてできたAST(抽象構文木)をルールで検証し、エラーや警告を出力します。
66

77
このルールがプラグインとして書けるようになっていて、ESLintの全てのルールがプラグインとして実装されています。
88

@@ -13,8 +13,114 @@ ESLintサイト上には、上記のように書かれていることからも
1313

1414
## どう書ける?
1515

16+
ESLintでは`.eslintrc`という設定ファイルに利用するルールの設定をして使うため、
17+
実行方法についてはドキュメントを参照して下さい。
18+
19+
- [Documentation - ESLint - Pluggable JavaScript linter](http://eslint.org/docs/user-guide/configuring "Documentation - ESLint - Pluggable JavaScript linter")
20+
21+
ESLintにおけるルールとは、以下のような一つのオブジェクトを返す関数をexportしたモジュールのことを言います。
22+
1623
[import, no-console.js](../../src/ESLint/no-console.js)
1724

25+
ESLintではコードを文字列ではなくASTを元にしてチェックしていきます。
26+
ASTについてはここでは詳細を省きますが、コードをJavaScriptのオブジェクトで表現した木構造のデータだと思えば問題ないと思います。
27+
28+
例えば、
29+
30+
```js
31+
console.log("Hello!");
32+
```
33+
34+
というコードをパースしてASTにすると以下のようなオブジェクトとして取得できます。
35+
36+
```json
37+
{
38+
"type": "Program",
39+
"body": [
40+
{
41+
"type": "ExpressionStatement",
42+
"expression": {
43+
"type": "CallExpression",
44+
"callee": {
45+
"type": "MemberExpression",
46+
"computed": false,
47+
"object": {
48+
"type": "Identifier",
49+
"name": "console"
50+
},
51+
"property": {
52+
"type": "Identifier",
53+
"name": "log"
54+
}
55+
},
56+
"arguments": [
57+
{
58+
"type": "Literal",
59+
"value": "Hello!",
60+
"raw": "\"Hello!\""
61+
}
62+
]
63+
}
64+
}
65+
],
66+
"sourceType": "script"
67+
}
68+
```
69+
70+
- [JavaScript AST explorer](http://felix-kling.de/esprima_ast_explorer/#/FNrLHi8ngW "JavaScript AST explorer")
71+
72+
ESLintではこのASTを使って、変数が未使用であるとか[no-console.js](#no-console.js)のように`console.log`などがコードに残ってないか
73+
といったことをルールを元にチェックすることができます。
74+
75+
ルールをどう書けるかという話に戻すと、`context`というオブジェクトはただのユーティリティ関数と思ってもらって問題なくて、
76+
returnしてるメソッドをもったオブジェクトがルールの本体と言えます。
77+
78+
ESLintではルールをどうやって使っているかというと、ASTは木構造のとなってるので、
79+
そのASTを深さ優先で探索していきながらそれぞれ登録したルールに対して、
80+
「今`"MemberExpression"` typeのNodeに到達した」といったことを通知することを繰り返しています。
81+
82+
先ほどの`console.log`のASTにおける`MemberExpression` typeのNodeとは以下のオブジェクトをことを言います。
83+
84+
```json
85+
{
86+
"type": "MemberExpression",
87+
"computed": false,
88+
"object": {
89+
"type": "Identifier",
90+
"name": "console"
91+
},
92+
"property": {
93+
"type": "Identifier",
94+
"name": "log"
95+
}
96+
}
97+
```
98+
99+
[no-console.js](#no-console.js)のルールを見ると`MemberExpression` typeのNodeが `node.object.name === "console"` であるなら
100+
`console`が残ってると判断してエラーレポートすると読めてくると思います。
101+
102+
ASTの探索がイメージしにくい場合は以下のルールで探索の動作を見てみると分かりやすいかもしれません。
103+
104+
- [azu.github.io/visualize_estraverse/](http://azu.github.io/visualize_estraverse/ "visualize estraverse step")
105+
106+
```js
107+
function debug(string){
108+
console.log(string);
109+
}
110+
debug("Hello");
111+
```
112+
113+
<video controls>
114+
<source src='./movie/traverse.webm' type='video/mp4; codecs="avc1.42E01E, mp4a.40.2"'>
115+
<source src='./movie/traverse.mp4' type='video/mp4; codecs="avc1.42E01E, mp4a.40.2"'>
116+
<p>動画を再生するには、mp4をサポートしたブラウザが必要です。</p>
117+
</video>
118+
119+
その他、ESLintのルールの書き方についてはドキュメントや以下の記事を見てみるといいでしょう。
120+
121+
- [Documentation - ESLint - Pluggable JavaScript linter](http://eslint.org/docs/developer-guide/working-with-rules "Documentation - ESLint - Pluggable JavaScript linter")
122+
- [コードのバグはコードで見つけよう！｜サイバーエージェント 公式エンジニアブログ](http://ameblo.jp/principia-ca/entry-11837554210.html "コードのバグはコードで見つけよう！｜サイバーエージェント 公式エンジニアブログ")
123+
18124
## どういう仕組み?
19125
## どういう用途に向いている?
20126
## どういう用途に向いていない?

‎ja/ESLint/movie/traverse.mp4‎

325 KB
Binary file not shown.

‎ja/ESLint/movie/traverse.webm‎

122 KB
Binary file not shown.

0 commit comments

Comments
 (0)
Back | FazBrowse Home | New Git URL