小学生からはじめるReact
小学生からはじめるReact入門の第0回。プログラミングとは何かを身近なたとえで紹介し、このシリーズで最後にどんなゲームやアプリを作れるようになるのかを案内します。
14 記事
← 第0回から読み始めるまえがき
Webと3つのことば
Webってなに?ホームページが見えるしくみ
ウェブサイトが画面に表示されるしくみを小学生向けに解説。ブラウザ・サーバー・URLの役割を、宅配便のたとえを使ってやさしく説明します。Web入門の第一歩。
HTMLってなに?ページのほね組みを作ろう
Webページの骨組みを作るHTMLを小学生向けに解説。見出し・段落・画像・リンクのタグを実際に数行書いて、ブラウザに表示される本物の見た目まで体験します。
CSSってなに?ページに色とかざりをつけよう
HTMLで作った骨組みに見た目をつけるCSSを小学生向けに解説。文字の色や大きさ、背景色の変え方を、着せ替えのたとえで実際の見た目を見ながら学びます。
JavaScriptってなに?ページに動きをつけよう
ページに動きをつけるJavaScriptを小学生向けに解説。ボタンを押すと文字が変わる例を見て、HTML・CSS・JavaScriptの3つの役割のちがいを整理します。
Reactをさわってみよう
Reactってなに?ウェブサイトをブロックで作ろう
Reactとは何かをレゴブロックのたとえで小学生向けに解説。ウェブサイトを部品(コンポーネント)の組み合わせで作る考え方と、Reactを使うと何がうれしいのかを学びます。
StackBlitzでReactを動かそう(むずかしい準備なし)
ブラウザだけでReactを動かせるStackBlitzの使い方を小学生向けに解説。数分でHelloを表示し、文字を書き換えると画面がすぐ変わる成功体験までを案内します。
はじめてのコンポーネント:名まえカードを作ろう
Reactのコンポーネントを初めて作る回。名まえカードを作りながら、関数コンポーネント・JSXのルール・波かっこで変数を表示する書き方を小学生向けに解説します。
Reactの部品を組み立てる
作って楽しいアプリ
おみくじ&ガチャを作ろう(ランダムに挑戦)
ボタンを押すと結果がランダムに変わるおみくじとガチャを作る回。乱数の作り方とstate・配列を組み合わせて、引くたびに結果が変わるアプリを小学生向けに解説します。
4択クイズを作ろう(正解と点数を出そう)
選択肢を押すと正解・不正解がわかり点数がたまる4択クイズを作る回。配列とmapで選択肢を並べ、stateで点数を管理する方法を小学生向けにやさしく解説します。
じゃんけんゲームを作ろう(勝ち負けを判定)
コンピュータとじゃんけんできるゲームを作る回。自分の手をボタンで選び、相手の手を乱数で決めて、勝ち・負け・あいこを判定する方法を小学生向けに解説します。