JavaScriptチートシート - 基本文法・配列・非同期処理

最頻出10項目

基本は const を使い、再代入が必要なときだけ let を使います。var はスコープが分かりにくいため、新しいコードでは避けます。

値と比較

主なプリミティブ値は string、number、boolean、null、undefined、bigint、symbol です。

const name = "Ada";
const score = 80;
const passed = true;
const empty = null;

console.log(typeof name); // "string"
console.log(Array.isArray([])); // true

|| は 0、空文字、false も未指定扱いにします。これらを有効値として残したい場合は ?? を使います。

関数

function add(a, b) {
  return a + b;
}

const double = (value) => value * 2;

function greet(name = "guest") {
  return `Hello, ${name}`;
}

アロー関数は短いコールバックに便利です。オブジェクトのメソッドや this を使う処理では、通常の関数との this の違いに注意します。

配列

const users = [
  { id: 1, name: "Aki", active: true },
  { id: 2, name: "Sora", active: false },
];

const names = users.map((user) => user.name);
const activeUsers = users.filter((user) => user.active);
const target = users.find((user) => user.id === 2);
const activeCount = users.reduce(
  (count, user) => count + (user.active ? 1 : 0),
  0,
);

元データを残したい場合は、破壊的メソッドを使う前に仕様を確認します。

オブジェクト

const user = { id: 1, name: "Aki", role: "student" };
const { name, role = "guest" } = user;

const updated = {
  ...user,
  name: "Sora",
};

for (const [key, value] of Object.entries(user)) {
  console.log(key, value);
}

{ ...user } は浅いコピーです。入れ子のオブジェクトまで完全に複製するものではありません。対応環境では structuredClone(value) を使えます。

文字列と数値

const input = " 10 ";
const amount = Number(input.trim());

if (!Number.isFinite(amount)) {
  throw new Error("数値を入力してください");
}

parseInt() は先頭から整数として読める部分を変換します。入力全体を数値として検証したい場合は、用途に合う変換と Number.isFinite() を組み合わせます。

配列・オブジェクトの確認表

const scores = [80, 65, 92];

scores.includes(80);             // true
scores.some((score) => score < 70);
scores.every((score) => score >= 60);
scores.at(-1);                   // 92

Object.keys(user);
Object.values(user);
Object.hasOwn(user, "name");

in は継承したプロパティも確認します。オブジェクト自身が持つキーだけを調べる場合は Object.hasOwn() を使います。

条件分岐と繰り返し

if (score >= 80) {
  console.log("good");
} else {
  console.log("keep going");
}

for (const user of users) {
  console.log(user.name);
}

配列の変換や絞り込みは map・filter、副作用を伴う単純な反復は for...of と使い分けると意図が読みやすくなります。

async / await と fetch

async function loadUser(id) {
  const response = await fetch(`/api/users/${id}`, {
    signal: AbortSignal.timeout(5000),
  });

  if (!response.ok) {
    throw new Error(`HTTP ${response.status}`);
  }

  return response.json();
}

try {
  const user = await loadUser(1);
  console.log(user);
} catch (error) {
  console.error("取得に失敗しました", error);
}

fetch は 404 や 500 でも自動では例外にならないため、response.ok を確認します。タイムアウトの標準的な書き方は AbortSignal.timeout() ですが、古い実行環境では対応状況を確認してください。

独立した処理は並列に待てます。

const [user, posts] = await Promise.all([
  fetchUser(),
  fetchPosts(),
]);

Promise.all は1件でも失敗すると失敗になります。個別の成否が必要なら Promise.allSettled を検討します。

最小のDOM操作

<button id="changeButton" type="button">変更</button>
<p id="message">変更前</p>

<script type="module">
  const button = document.querySelector("#changeButton");
  const message = document.querySelector("#message");

  button?.addEventListener("click", () => {
    if (message) message.textContent = "変更しました";
  });
</script>

外部入力の表示には textContent を使います。未検証の文字列を innerHTML に渡すと、クロスサイトスクリプティング（XSS）の原因になります。

フォームの値は文字列として取得されます。

const form = document.querySelector("#profileForm");

form?.addEventListener("submit", (event) => {
  event.preventDefault();

  const data = new FormData(form);
  const name = String(data.get("name") ?? "").trim();

  if (name === "") {
    console.error("名前を入力してください");
    return;
  }

  console.log({ name });
});

要素が存在しない可能性がある場合は、querySelector() の戻り値が null になることを考慮します。

モジュール

// math.js
export const add = (a, b) => a + b;

// main.js
import { add } from "./math.js";
console.log(add(2, 3));

ブラウザでは <script type="module"> を使います。Node.js のモジュール方式は package.json の設定や拡張子で変わるため、プロジェクトの既存方式に合わせます。

JSONとエラー処理

const text = '{"name":"Ada"}';

try {
  const value = JSON.parse(text);
  console.log(value.name);
} catch (error) {
  console.error("JSON形式を確認してください", error);
}

const json = JSON.stringify({ name: "Ada" });

APIキーやパスワードをフロントエンドのJavaScriptへ直接書くと、利用者から閲覧できます。秘密情報はサーバー側で管理し、リポジトリへコミットしないでください。

日付とログ

const now = new Date();
console.log(now.toISOString());

const formatter = new Intl.DateTimeFormat("ja-JP", {
  dateStyle: "medium",
  timeStyle: "short",
});
console.log(formatter.format(now));

日付文字列の解釈やタイムゾーンは実行環境で混乱しやすい部分です。APIで時刻を渡すときは形式とタイムゾーンを決め、表示には Intl.DateTimeFormat を使います。

デバッグでは値だけでなく文脈も残します。

console.log("user loaded", { userId: user.id });
console.table(users);
console.time("load");
await loadData();
console.timeEnd("load");

本番ログへパスワード、トークン、個人情報を出力しないでください。

参考リソース

• JavaScript - MDN
• JavaScript Guide - MDN
• Fetch API - MDN

×

PR

×

PR