:-) 🏕

Frontend JavaScript Anti-pattern

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