JavaScript：React直前まとめ（JSチェックリスト）

投稿日：2026-01-13

音声

※ AI音声で読み上げます

目次

  1. map/filterが自然に書けるか
  2. 分割代入・スプレッドを使えるか
  3. コールバックと関数の受け渡し
  4. async/awaitで例外処理まで書けるか
  5. 状態→描画の流れを説明できるか
  6. 注意（ここだけ）
  7. 要約

map/filterが自然に書けるか

今回は、配列を変換（map）と絞り込み（filter）でまとめて書き、可読性を高めていきます。

配列はforループで逐一処理するより意図がはっきりし、副作用を避けやすいです。

CodePenのJS欄で配列操作を試すと理解が早まります。

分割代入・スプレッドを使えるか

オブジェクト・配列の分割代入（destructuring）で必要な値だけ取り出し、スプレッド（...）でコピーや結合が簡潔に書けます。

Reactに入るとpropsやstateの操作で頻出するため、CodePenのHTML欄に出力要素を置いて動作確認すると便利です。

コールバックと関数の受け渡し

この小項目「コールバックと関数の受け渡し」は、JavaScriptで「処理の対象をどう決めるか」と結びつけて考えると理解しやすいです。

途中に空の要素があるか、基準にするキーが何かで、最終的な件数や判定が変わります。

まずは最小例で「今どんな値が入っているか」をConsoleに出してから、条件分岐やループを調整すると迷いにくいです。

// 例：配列の中身を確認してから、条件を固める
const items = ["ok", "", "避けたい例", null, "ok"];
const cleaned = items.filter(x => typeof x === "string" && x.trim() !== "");
console.log("raw=", items);
console.log("cleaned=", cleaned);

async/awaitで例外処理まで書けるか

async/awaitはPromiseを直線的に扱える構文で、必ずtry/catchで例外を捕まえる習慣をつけます。

外部通信の代わりにsetTimeoutで疑似的に試すと、エラーハンドリングの流れが掴みやすく、CodePenでコンソールと画面の両方を確認すると学びが深まります。

状態→描画の流れを説明できるか

状態（state）を定義して、それをもとに描画（render）する単方向データフローを説明できます。状態を直接 mutate せずに新しいオブジェクトを作る点や、状態変更後に描画関数を呼ぶ流れがReactの基本理解につながります。最小コードで実際のクリック→状態更新→描画の順を確認できます。

貼り付け場所：HTML欄にボタンと出力先、JS欄にスクリプトを貼ります。CodePenのHTML欄とJS欄を使ってください。

<!-- HTML欄 -->
<button id="load">データ取得</button>
<div id="out"></div>

最小コード：

// JS欄
const data = [{id:1,name:'A',v:10},{id:2,name:'B',v:0},{id:3,name:'C',v:5}];
const state = {items: []};
const render = () => { document.getElementById('out').textContent =
  state.items.map(i=>`${i.name}:${i.v}`).join(' | '); };

const process = items => items.filter(i=>i.v>0).map(({id,name,v})=> ({id,name,v:v*2}));
const fetchData = () => new Promise((res,rej)=> setTimeout(()=> res(data),300));
document.getElementById('load').addEventListener('click', async () => {
  try {
    const res = await fetchData();
    const items = process([...res]); // スプレッドでコピー
    state.items = items;
    render();
  } catch (e) { console.error('取得失敗', e); }
});

実行方法：CodePenに貼り付けてRunボタンを押すか、HTMLとJSを分けてブラウザで開き、ボタンをクリックしてください。

確認方法：ボタン押下で画面の#outが更新されること、Consoleにエラーが出ないこと、またmap/filter後の値が期待どおりかを確認します。

よくあるミス：mapで副作用（配列外への代入）を行い期待どおりに動かない点が多く、解決策はmapは純粋に値変換だけにして副作用はforEachや外部関数に切り分けることです。

使い分けの基準：単純な変換はmap、絞り込みはfilter、順序や早期打ち切りが必要ならfor/of、オブジェクトの探索はfindやfor...inではなく配列変換を検討します。配列は一覧処理、オブジェクトはキーでの参照に向きます。

注意（ここだけ）

  • 「書ける」より「説明できる」が重要です。なぜその書き方が安全か（破壊的変更しない等）を言語化できると強いです。

  • チェックは一気にやらず、ミニ課題（小さいUI）で確認するのが確実です。詰まったらConsoleと最小再現に戻します。

  • 理解が曖昧なままReactに行くと躓きやすいので、map/filter、分割代入、非同期の例外処理は最低限固めます。

要約

  1. map/filterで配列操作を意図的に書けると可読性が上がります。
  2. 分割代入とスプレッドでデータ取り出しとコピーが簡潔になります。
  3. 関数を渡す設計（コールバック）はイベント駆動で有用です。
  4. async/awaitはtry/catchで例外処理まで書く習慣が必要です。
  5. 状態を更新してから描画する単方向フローがReactの理解に直結します。