JavaScript と TypeScript

ブラウザの JavaScript は、基本的に1本のスレッド（メインスレッド）で動きます。画面の描画やクリックの処理も同じスレッドなので、通信やタイマーの待ち時間にスレッドを止めないよう、「終わったら後で呼んでね」とキューに入れる仕組みになっています。この順番を回すのがイベントループです。

順番は「スタックが空になる → マイクロタスクを全部実行 → 必要なら描画 → タスクを1つ実行 → またマイクロタスクを全部…」です。

console.log(1);
setTimeout(() => console.log(2), 0);
Promise.resolve().then(() => console.log(3));
console.log(4);
// 出力：1 4 3 2

async 関数は Promise を返し、await の所で一度止まって、残りはマイクロタスクとして後で続きます。スレッドは止まらないので、待っている間に他の処理や描画が進みます。

// 順番に待つ（合計 = a + b の時間）
const a = await fetchA(); const b = await fetchB();
// 同時に待つ（合計 = 長いほうの時間）
const [a2, b2] = await Promise.all([fetchA(), fetchB()]);

互いに関係のない通信は Promise.all で並べます。1つの失敗で全体を失敗にしたくなければ Promise.allSettled。await を付け忘れたり catch しなかったりするとエラーが見えなくなるので、lint（no-floating-promises）で防ぎます。

キャンセルしたい通信（画面を離れた・検索語が変わった）は AbortController の signal を fetch に渡して止めます。

大きな JSON の加工や画像処理を 500ms 続けると、その間はクリックも描画も止まり、画面が固まって見えます（INP が悪くなる）。マイクロタスクを無限に積み続けても同じです。

• 処理を小さく分けて、間に setTimeout や scheduler.yield()（対応ブラウザ）で手を離す。
• Web Worker：別のスレッドで JS を動かす。DOM は触れないが、計算は任せられる。postMessage でデータをやりとりする。
• そもそもサーバー側で処理する・量を減らす。

Node.js でも同じ仕組みで、重い同期処理があると、その間ほかのリクエストに応答できなくなります。

開発者ツールの Performance パネルで、50ms を超える処理（ロングタスク）は赤い印で表示されます。まずそこを見つけてから、分割・Worker・処理の削減を選びます。

JavaScript の面接でよく聞かれる、変数の見える範囲と this の決まり方です。

function counter() {
  let n = 0;               // この n を覚え続ける
  return () => ++n;
}
const next = counter();
next(); next();          // 1, 2

React でよく出る「古い値を見てしまう」問題（stale closure）は、クロージャが作られたときの状態を覚えているために起こります。setCount(c => c + 1) のように、前の値を受け取る形で更新すると避けられます。

TypeScript は JavaScript に型を足した言語で、実行前（コンパイル時）に「この値にこのプロパティはない」といった間違いを見つけます。エディタの補完や、名前の一括変更も安全になります。

型推論・ユニオン・ジェネリクス

// 型推論：書かなくても number と分かる
const count = 3;

// ユニオン：どれか1つ。kind で絞り込める
type Result =
  | { kind: "ok"; data: User }
  | { kind: "error"; message: string };
function show(r: Result) {
  if (r.kind === "ok") return r.data.name; // ここでは data がある
  return r.message;
}

// ジェネリクス：型を引数のように受け取る
function first<T>(items: T[]): T | undefined { return items[0]; }

「読み込み中・成功・失敗」のような状態は、ユニオンで表すと「成功なのに data がない」状態を作れなくなります。any を使うと型の確認が止まるので、分からない値は unknown にして絞り込んでから使います。tsconfig.json は "strict": true にします。

API の型を共有する

フロントとバックで API の型が食い違うと、本番で初めてエラーになります。

注意：型はコンパイル時だけのもので、実行時には消えます。API の応答やフォームの入力が本当にその形かは保証されないので、外から来るデータは Zod などで実行時にも検証します。

今の JavaScript は import / export（ES Modules）でファイルを分けて書きます。ブラウザに届ける前に、ビルドツール（Vite・webpack・esbuild・Turbopack など）が、変換・まとめ・圧縮を行います。

トランスパイル

TypeScript の型や JSX（<div> を JS の中に書く記法）はブラウザがそのまま読めないので、普通の JavaScript に変換します。これをトランスパイルと呼びます。esbuild や SWC は型の確認をせず変換だけ行って速いので、型の確認は tsc --noEmit を別に流します。古いブラウザ向けに新しい書き方を変換することもあります（対応範囲は browserslist で指定）。

• ツリーシェイキング：import されていない関数をバンドルから取り除く。ES Modules の静的な import だから分かる。import _ from "lodash" のように丸ごと読むライブラリや、読み込むだけで副作用があるファイルは取り除けないことがある。
• コード分割：import()（動的 import）や、ページごとの分割で、最初に要らないコードを後から読み込む。React なら lazy()。モーダルやグラフなど重くて最初に出ないものに向いています。

const Chart = lazy(() => import("./Chart"));

どのライブラリが大きいかは、バンドルアナライザー（rollup-plugin-visualizer・@next/bundle-analyzer など）で図にして確かめます。大きな日付ライブラリや、アイコンを全部読み込んでいるのが、よくある原因です。

Node.js はブラウザと同じイベントループで動くので、待ち時間の多い Web の API には向いていますが、1つのリクエストが重い計算をすると、その間ほかの全員が待たされます。

イベントループの詰まり具合は、perf_hooks の monitorEventLoopDelay や APM の「イベントループの遅延」で測れます。