bingo.web 2回目 フロントエンド側のお話(TypeScriptとSassとESLintとバグ)

2020年02月27日 00時02分

毎週?恒例にしていきたいbingo.web 2です。

私はLearn React with TypeScript3を読んでいました。序章は TypeScript の話でしたが、割とサクッと読める感じの本でよかったです。

VSCode の画面を見ながら進めていく感じの本なのでオススメです。

ZEST さんは Sass 系の本を読み進めていました。

あとは Linter の話をちょっとしました。

私自身は ESLint/TSLint を開発で使用しています。

個人に近い感じの開発スタイルの場合は、あまり効果を発揮しませんが、ESLint 等があることでコーディング規約の順守をある程度することができます。

特にレビューする時間が無いという場合には、先に Linter で規約を作っておけばある程度の防波堤になってくれます。

ESLint も 100 種類以上の規約をカスタマイズできますが、reccomend で指定してあげて、厳しくしていくスタイルが好きです。

規約にもよりますが、メンバーの技量がばらつく場合は、循環的複雑度、ネストの深さ、行数、早期リターン、elseif 強制を入れるか考えます。

循環的複雑度は、complexityで規制することができます。

ESLint の場合は条件分岐があると complexity が線形に増えていくようです。

Cyclomatic Complexity Revisited によると循環的複雑度とバグの関係はは 11 前後から緩やかに上昇していき、75 辺りで 98%になります。(文献の計算式と ESLint の計算式が同じか断言ができずに申し訳ないですが…)

ネストの深さや行数規制は本来であれば柔軟なコーディングを損なうのですが、ここはチームの段階と照らし合わせて検討していく必要があります。。。

ガード節や早期リターンも私は好きです。賛否ありますが規約に入れておくことで、ネストや複雑度を抑えることができます。取り入れていきましょう。

来週もbingo.webをよろしくお願いいたします。