:-) 🏕

Frontend JavaScript Anti-pattern

Number of word 1654

TL;DR

test

import assert from "assert";

describe("test", () => {
  const { func } = require("./module");
  it("func", () => {
    assert(func("a") === "a");
  });
});
  1. 1ファイル、single describe
    1. 親を1つ describe.skip describe.only できれば一旦闇を保留にできることが多い
    2. 1ファイルの持っている役割が大きすぎない、特に困っていない
  2. テスト対象は describe の中でrequireする
    1. describe.only 実行をした際に不要なsrcを読み込まなくて良い
    2. 読み込まれただけで実行される関数はcoverageに含まれてしまう
    3. coverage report が読みやすい
  3. this を使わない
    1. unused変数をlintで発見しやすい
    2. 長い

src

function mapStateToProps({ todos }: State) {
  return {
    tasks: { todos },
    onUpdate: (id) => todos[id].done(),
  }
}
  1. arrow function vs function
    1. IE11を意識した場合、変換したら結局 function となる
    2. 読みやすさと生成された後のコードを妄想しつつ相談
    3. つい書きやすさと return の省略したさで arrow function を使うことも多い
    4. 読みやすければそれでいい気持ちになってきている
  2. class syntaxを避ける
    1. ライブラリを開発しているときには使うけれどプロダクトを書く時には意識する
    2. 結局 this に状態を持たせる意味がそのclassにあるかが大事
    3. ファイルサイズがデカくなる
var touch = "touch";
$("#id").on(`${touch}start ${touch}end`, (e) => {
  console.log(e);
});

function a(element) {
  // var element と書く３文字を省略して１文字にできる
  element = document.getElementById("foo");
  element.addEventListener("click", (e) => console.log(e));
}
  1. 長い文字列は変数で受けて結合する
    1. 小さいことを売りにしているライブラリで見る
    2. 計算量も大事だが地道なファイルサイズ対策
  2. 無駄な引数を定義する
    1. 変数定義分の文字列を節約させる
    2. htmlのタグなどを書く際に利用されている場合がある
    3. linterで積極的に使うなと怒られる（怒られる方が平和）

まとめ

圧倒的老害感。

image