JavaScript

作成日時：2024-08-01以前
更新日時：2025-03-12

マルチスレッド

• 基本シングルスレッド。
• setTimeout,Promiseの実態はシングルスレッド
  • setTimeoutはTask Queue、Promiseはmicro Task Queueに格納され、メインスレッドが空いたら実行。
  • microの方が優先して実行される
• awaitは非同期関数の処理完了を待つだけ。
• マルチスレッドを使いたければWeb Worker使え。
  • そのうちwasmがサポートしてくれるかもね
• 非同期処理はメインスレッドを止めないため。

// API叩く場合の疑似的並列処理
const parallel = async () => {
    const [result1, result2] = await Promise.all([
        fetch('url1'),
        fetch('url2')
    ]);
    const data1 = heavyProcessing(result1);
    const data2 = heavyProcessing(result2);
};

TypeScriptにおける列挙型

enumは使わない方がいいらしい。

const FRUITS = {
  BANANA: ""
} as const;
type FRUITS = (typeof FRUITS)[keyof typeof FRUITS]
export default FRUITS;

JSONを整形する

JSON.stringify(obj, null, “\t”)で見やすく出来る。

JSON.stringify() - JavaScript | MDN

メモ

• JavaScriptのpreventDefault()って難しくない？preventDefault()を使うための前提知識 #JavaScript - Qiita
• 生SQLに型を手書きする時代は終わり？Prismaの新機能「TypedSQL」

JavaScriptのオブジェクト

{data}は{data:data}に等しい

分割代入

const { a } = obj;

配列存在チェック

[1, 2].includes(x);

注意点

• input=“date”の見た目はブラウザ依存
• input=“mail”で絵文字が入っちゃう
• サロゲートペアの文字数計算
• sticky入れると画面内スクロールがずれる

コピペ防止

onPasteに下記を登録

const handlePaste = (e) => e.preventDefault();

iPhoneでinputをタッチすると画面が拡大される

フォントサイズが統一されていないと発生するとか

iPhone

一度のタップで遷移しない場合がある。

以下、考えること。

• タップが動作する要素の設定をまねる
• 対象要素にcursor:printerを付与
• wai-ariaやroleを定義
• タップ対象をaタグに置き換える
• touchstartにタップの挙動を追加
  • これだと多重起動するかも
• メタタグでモバイルのズーム機能を無効にする
• divなどが多重になっていているのが影響しているかも

いったん、下記でうまくいくみたい。

const touchHandler = (e) => {
    if (e.touches.length > 1) e.preventDefault();
}

document.addEventListener("touchstart", touchHandler, {passive: false})

ディープマージ

オブジェクトのマージにassignやスプレッド構文を使うと、意図しない結果となる可能性がある。
ディープマージを実装するか、Lodashを使用する。

function deepMerge(target, source) {
  // マージ先のオブジェクトがオブジェクトでなければ、ソースをそのまま返す
  if (typeof target !== 'object' || target === null) {
    return source;
  }

  // ソースの各プロパティをループ
  for (const key in source) {
    // マージ元にも同じプロパティがあり、かつ両方ともオブジェクトの場合
    if (Object.prototype.hasOwnProperty.call(source, key) &&
        typeof target[key] === 'object' && target[key] !== null &&
        typeof source[key] === 'object' && source[key] !== null) {
      
      // 再帰的にマージを呼び出す
      deepMerge(target[key], source[key]);
    } else {
      // それ以外の場合は、単純に上書き
      target[key] = source[key];
    }
  }

  return target;
}

const a = {"a": 1, "b": {"c": 2, "d": 3}};
const b = {"b": {"c": 3}};

deepMerge(a, b); // 出力: { a: 1, b: { c: 3, d: 3 } }
{...a, ...b}; // 出力: { a: 1, b: { c: 3 } }