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

毎週?恒例にしていきたい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をよろしくお願いいたします。

シェアする

  • このエントリーをはてなブックマークに追加

フォローする