JavaScript
JSLint
ESLint

JavaScript Code Smell - くせぇコードを見つける

More than 3 years have passed since last update.

javascript のコードが

こいつはくせえッー!ゲロ以下のにおいがプンプンするぜッーーーーッ!!

っていう意味じゃないらしい。code smell(コードの臭い) っていう言い方があるらしく。初めて知った。正しくは、

コンピュータプログラミングにおいてプログラムのソースコードに深刻な問題が存在することを示す何らかの兆候のことを言う。

翻訳とまではいかないけど、非常に参考になったので先ほどのレクチャー、スライド要約メモしておこうと思います。咀嚼しきれず、全然まとまってないですが。

結果的に、lint 使いなよ、という話なんだけど。
ソース判例はスライド見てください。いちいち載せないです。

1. CONVOLUTED CODE SMELL

複雑化したコードの臭い。

  • Too Many Statements (Stringが長いとか)
  • Too Much Depth(構造が深い、if,for,if,if,else,for とか言ってる)
  • Too Much Complexity(複雑化し過ぎている)
jshint
/*jshint maxstatements:15, maxdepth:2, maxcomplexity:5 */
esilnt
/*eslint max-statements:[2, 15], max-depth:[1, 2], complexity:[2, 5] */

lint でこの設定入れとけよ。という話。

lint しよう

2. COPY PASTE CODE SMELL

コピペなコードの臭い。
コピペしちゃダメ、じゃなくて、コピペしたような重複した処理・メソッドはまとめようぜ。っていう話。

この辺のtoolingで抽出できるらしい。

3. SWITCH STATEMENT SMELL

(この項、ちょっとフワッとしてる)

Switch文がくせぇ。Open/Closedの原理を犯してる(この辺不明)。
例としての挙げられたsmellyなコードに条件を追加したい時のソースが載せられ、「これは悲劇的なデザインパターン」とのこと。

window の下にオブジェクトぶら下げて展開していく方法がひとつ(この辺不安)。

magic strings refactor. Stringは2回使用されてる、var で object types にしちゃえば? & const にしちゃえば?(ES6 読み取りのみの定数宣言)

4. THE THIS ABYSS SMELL

よく見る this のスコープより深度深い時にやりがちパターン。

var that = this;
var self = this;

っていうあるある。こないだ読んだこれでもゴリッゴリ使ってた。
これあるあるだけど、バッドノウハウだよね。って思います。

  1. bind 使おうよ。Function.prototype.bind ですね
  2. forEachだったら第2引数使おうよ
  3. ES6ならArrow Functionで関数定義(式)できるよ
  4. 関数型プログラミングやれば?(関数型~詳しくないし飛ばした)

lint しよう

5. CRISP CONCATENATION SMELL

シングルクォート、ダブルクオートの混在が臭う。

6. INAPPROPRIATE INTIMACY

疎結合せよ。の話だと思うんですが、子どもが騒いでいるので気が向いたら加筆します。


今日は以上です。ES6に向かわないとダメだと再認識。