小学生からはじめるReact

小学生から読めるReact入門。Webのしくみ、HTML・CSS・JavaScriptの基本から、StackBlitzでおみくじ・クイズ・じゃんけんゲームを作ってReactを体験します。

14 記事

最初の記事から読み始める

第0章

まえがき

第0回

プログラミングってなに？このシリーズのあるきかた

小学生からはじめるReact入門の第0回。プログラミングとは何かを身近なたとえで紹介し、このシリーズで最後にどんなゲームやアプリを作れるようになるのかを案内します。

初級

第1章

Webと3つのことば

第1回

Webってなに？ホームページが見えるしくみ

ウェブサイトが画面に表示されるしくみを小学生向けに解説。ブラウザ・サーバー・URLの役割を、宅配便のたとえを使ってやさしく説明します。Web入門の第一歩。

初級第2回

HTMLってなに？ページのほね組みを作ろう

Webページの骨組みを作るHTMLを小学生向けに解説。見出し・段落・画像・リンクのタグを実際に数行書いて、ブラウザに表示される本物の見た目まで体験します。

初級第3回

CSSってなに？ページに色とかざりをつけよう

HTMLで作った骨組みに見た目をつけるCSSを小学生向けに解説。文字の色や大きさ、背景色の変え方を、着せ替えのたとえで実際の見た目を見ながら学びます。

初級第4回

JavaScriptってなに？ページに動きをつけよう

ページに動きをつけるJavaScriptを小学生向けに解説。ボタンを押すと文字が変わる例を見て、HTML・CSS・JavaScriptの3つの役割のちがいを整理します。

初級

第2章

Reactをさわってみよう

第5回

Reactってなに？ウェブサイトをブロックで作ろう

Reactとは何かをレゴブロックのたとえで小学生向けに解説。ウェブサイトを部品（コンポーネント）の組み合わせで作る考え方と、Reactを使うと何がうれしいのかを学びます。

初級第6回

StackBlitzでReactを動かそう（むずかしい準備なし）

ブラウザだけでReactを動かせるStackBlitzの使い方を小学生向けに解説。数分でHelloを表示し、文字を書き換えると画面がすぐ変わる成功体験までを案内します。

初級第7回

はじめてのコンポーネント：名まえカードを作ろう

Reactのコンポーネントを初めて作る回。名まえカードを作りながら、関数コンポーネント・JSXのルール・波かっこで変数を表示する書き方を小学生向けに解説します。

初級

第3章

Reactの部品を組み立てる

第8回

propsとmap：自己紹介カードをたくさん並べよう

外から情報を渡すpropsと、配列から要素を並べるmapを小学生向けに解説。名まえカードを使い回して、自己紹介カードやミニ図鑑をたくさん並べる方法を作りながら学びます。

初級第9回

ボタンを押すと変わる：stateとイベントを学ぼう

useStateとonClickで画面に動きをつける方法を小学生向けに解説。カウンターやいいねボタンを作り、条件によって見た目を変える書き方まで体験しながら学びます。

初級

第4章

作って楽しいアプリ

第10回

おみくじ＆ガチャを作ろう（ランダムに挑戦）

ボタンを押すと結果がランダムに変わるおみくじとガチャを作る回。乱数の作り方とstate・配列を組み合わせて、引くたびに結果が変わるアプリを小学生向けに解説します。

初級第11回

4択クイズを作ろう（正解と点数を出そう）

選択肢を押すと正解・不正解がわかり点数がたまる4択クイズを作る回。配列とmapで選択肢を並べ、stateで点数を管理する方法を小学生向けにやさしく解説します。

初級第12回

じゃんけんゲームを作ろう（勝ち負けを判定）

コンピュータとじゃんけんできるゲームを作る回。自分の手をボタンで選び、相手の手を乱数で決めて、勝ち・負け・あいこを判定する方法を小学生向けに解説します。

初級

第5章

自分のパソコンで動かそう

第13回

自分のパソコンでReactを動かそう（つぎの一歩）

StackBlitzで作ったものを自分のパソコンでも動かす方法を小学生向けに解説。Node.jsの準備とViteでReactプロジェクトを作る手順、そして次に学ぶことを案内します。

初級