Reactとは

React入門 / 全 5 枚

作成品質の確認

全チェックの通過状況

スライド 4 / 4枚、チェック 5 / 5項目が通過

全項目通過・次へ進めます

スライドごと

1枚目を確認Slide 1は5ゲートPASS。sourceWiringはlive DBのtest_casesを正本3件へ同期し、同期後にCLIの再照合で一致を確認した。採点結果そのものはブラウザ内で走るが、実レッスンの提出はゲストだと /signup へ送られるため、starter不合格・solution全条件・document使用は不合格の3点は同じ正本checksに対する採点エンジンの統合テストで確かめた。通過

2枚目を確認手順カード (step-card) で作る・文字を入れる・つなぐの3手を出す。当初は触れる図解 create-append を予定したが、この build では図解が手順3/3 で開くため採用しなかった。コード枠の再掲もしない。通過

3枚目を確認エディタ窓とブラウザ窓を並べ、h1 と p の文字に注釈線を引いて画面のどこに出るかを結ぶ。この型の枚は note を置くと枚送りの帯と重なるので、document を使わない境界は lead に入れた。通過

4枚目を確認到達目標をそのまま問う3択。正解は「return のうしろの h1 の文字」。document を使う選択肢と開発者ツールで書きかえる選択肢を誤答に置いた。通過

完成後の5チェック

本文・学習内容

4枚とも1つの役割を持つ。比較 → 命令的の手数 → 宣言的の書きかえ → 確認。JSX・props・state・useEffect・Virtual DOM・再レンダリング・App.jsx は出さない (テストで固定)。

通過

ソース・課題との接続

live DBのtest_casesを対象1行だけのtransactionで正本3件へ同期し、affectedRows=1と保存後一致を確認。採点の3条件は統合テストで実証。実レッスンの提出はゲストでは /signup へ送られるので、提出そのものの実行時確認はauthが要る作業として残す(この判定はSlide 1の合否には使わない)。

通過

見た目・操作

desktop 4枚と 320px、print 全4枚を独立目視。3枚目は note を外して枚送りとの重なりを解消済み。

通過

再利用・パターンマスター

compare-pane、step-card、editor-window、browser-window、sensei-note を使用。コード枠だけの構成をやめ、機構を教える枚は部品で図解にした。新しい panel・型・画像は作っていない。

通過

型・テスト・回帰

焼いた索引も作り直して同期テストを通した。

通過

実レッスンで確認全スライドを一覧確認パターンマスターを確認

同じ表示、書くものが違う

左は「どうやって画面を組み立てるか」の手順、右は「どうなっていてほしいか」を書いています。

命令的：手順を書く

const box = document.getElementById("profile");
const title = document.createElement("h1");
title.textContent = "あおいのプロフィール";
box.appendChild(title);

宣言的 UI：完成形を書く

export default function App() {
  return <h1>あおいのプロフィール</h1>;
}

DOM をどの順番で組み立てるかは React がやります。

1 / 5

← → キーでも送れます

このスライドが付いているレッスンを開く