tonkotsuboy

const regrex = /よく(?<food>.*)食う(?<animal>.*)だ/u;

const result1 = "隣の客はよく柿食う客だ".match(regrex);
console.log(result1.groups.food);
console.log(result1.groups.animal);

const result2 = "隣の客はよく牡蠣食う吉田拓郎だ".match(regrex);
console.log(result2.groups.food);
console.log(result2.groups.animal);

tonkotsuboy

// 配列の最初の要素、長さ、最終要素をワンライナーで取得する
// 参考: https://twitter.com/argyleink/status/1139415654132436993

// 対象の配列
const myArray = ["😸", "🐶", "🐟", "🦆", "🐳", "🦉"];

// firstに最初の要素、lに長さ, lastに最終要素
const { 0: first, length: l, [l-1]: last} = myArray;

// 確認のため出力。結果は{first: "😸", l: 6, last: "🦉"}

tonkotsuboy

// Objectのvalueからなるunion型のエイリアス
type ObjectValueType<T> = T[keyof T];

// 使い方
const MyFood = {
  Food1: "ラーメン",
  Food2: "カツ丼",
  Food3: "ビャンビャン麺",
} as const;

tonkotsuboy

const MyFood = {
  Food1: "ラーメン",
  Food2: "カツ丼",
  Food3: "ビャンビャン麺",
} as const;

type FoodNameType = typeof MyFood[keyof typeof MyFood];
// 結果： "ラーメン" | "カツ丼" | "ビャンビャン麺"

tonkotsuboy

// event.targetしか使わない関数

// ちょっと冗長かも🤮
const foo = (event: MouseEvent) => {
  if (event.target == null) {
    return;
  }
  console.log(event.target);
};

tonkotsuboy

divRef.value の戻り値の方が Unwrap<HTMLDivElement> になっている。 https://github.com/vuejs/vue-next/blob/e67f655b2687042fcc74dc0993581405abed56de/packages/reactivity/src/ref.ts#L106-L118 を見ると、Unwrap<T>は、次のような型定義

1. cRef, ref, array, objectというキーを持っている
2. []でキー名にアクセスしているが、その中でConditional Types（型定義では頻出。めちゃ便利）を使っている
3. ref<HTMLDivElement>()の戻り値の方がUnwrap<HTMLDivElement>だから、 T extends object ? 'object' : 'ref' よりキー名がobject になる
4. キー名が object なら { [K in keyof T]: UnwrapRef<T[K]> } が返るから、HTMLDivElement型にはならない。

tonkotsuboy

divRef.value の戻り値の方が Unwrap<HTMLDivElement> になっている。 https://github.com/vuejs/vue-next/blob/e67f655b2687042fcc74dc0993581405abed56de/packages/reactivity/src/ref.ts#L106-L118 を見ると、Unwrap<T>は、次のような型定義

1. cRef, ref, array, objectというキーを持っている
2. []でキー名にアクセスしているが、その中でConditional Types（型定義では頻出。めちゃ便利）を使っている
3. ref<HTMLDivElement>()の戻り値の方がUnwrap<HTMLDivElement>だから、 T extends object ? 'object' : 'ref' よりキー名がobject になる
4. キー名が object なら { [K in keyof T]: UnwrapRef<T[K]> } が返るから、HTMLDivElement型にはならない。

tonkotsuboy

const linkElement = document.createElement("link");
linkElement.rel = "stylesheet";
linkElement.href =
  "https://fonts.googleapis.com/css?family=Noto+Sans+JP:900&display=swap&effect=fire-animation";
document.head.insertAdjacentElement("beforeend", linkElement);

for (const childElement of document.body.querySelectorAll("*")) {
  childElement.style.fontFamily = `"Noto Sans JP", sans-serif`;
  childElement.classList.add("font-effect-fire-animation");
}

tonkotsuboy

/**
 * Elementのtransitionendイベントが発火すると解決するPromiseです。
 * propertyNameを指定した場合は、該当propertyのtransitionendのみを待ちます。
 * @param element
 * @param propertyName
 */
export const waitTransitionendEvent = async (
  element: Element | null,
  propertyName?: keyof CSSStyleDeclaration
): Promise<void> => {

tonkotsuboy

/** seedに応じた名前を生成する関数です */
const createFirstName = (seed: number) => {
  switch (seed) {
    case 0:
      return "鈴木さん";
    case 1:
      return "後藤さん";
    case 2:
      return "マリオ";
    default: