第0回
プログラミングってなに?このシリーズのあるきかた
小学生からはじめるReact入門の第0回。プログラミングとは何かを身近なたとえで紹介し、このシリーズで最後にどんなゲームやアプリを作れるようになるのかを案内します。
このページは、シリーズのいちばん最初の回(第0回)です。むずかしいことはまだ出てきません。「プログラミングってなに?」と「この先で何ができるようになるの?」だけ、かるく知っておきましょう。
プログラミングってなに?
プログラミングとは、コンピュータに「やってほしいこと」を順番に教えてあげることです。
たとえば、おうちの人にカレーを作ってもらうとき、こんな「やりかた」がありますよね。
- やさいを切る
- 肉といっしょにいためる
- 水を入れてにこむ
- カレーのルウを入れる
この順番どおりにやると、カレーができあがります。
コンピュータも同じです。「1番にこれ、2番にこれ」と順番に書いてあげると、その通りに動いてくれます。この「やりかたの紙」がプログラムで、書くことがプログラミングです。
このシリーズで作れるようになるもの
このシリーズを最後まで進めると、こんなものを自分の手で作れるようになります。
- 🎴 おみくじ・ガチャ … ボタンをおすと「大吉」や「凶」がランダムに出る
- ❓ 4択クイズ … 答えをおすと「正解!」が出て、点数がたまる
- ✊ じゃんけんゲーム … コンピュータと勝負して、勝ち・負け・あいこが出る
- 🧒 自己紹介カード・ミニ図鑑 … 名前や好きなものをならべて表示する
たとえば、おみくじはこんな感じのものです。下は実際に画面に出る見た目です(このシリーズの第10回で作ります)。
きょうのうんせい
大吉 🎉
ボタンをおすたびに、まん中の文字が変わります。こういう「動くもの」を、最後には自分で作れるようになります。
むずかしい準備はいりません
「プログラミングをするには、特別なパソコンや、ややこしい道具がいるんでしょ?」と思うかもしれません。でも、このシリーズでは 最初はブラウザ(インターネットを見る画面)だけ で進めます。
第6回からは、StackBlitz(スタックブリッツ) という、ブラウザの中でReactを動かせる無料のサービスを使います。アプリを入れたりする面倒な作業はナシ。開いたらすぐに、コードを書いて結果を見られます。
この先の地図
このシリーズは、こんな順番で進みます。あせらず1回ずつでだいじょうぶ。
- まえがき … プログラミングってなに?(今ここ)
- Webと3つのことば … Webとは / HTML / CSS / JavaScript
- Reactをさわる … Reactとは / StackBlitzで動かす / はじめての部品
- 部品を組み立てる … props と map / state とイベント
- 作って楽しいアプリ … おみくじ / クイズ / じゃんけん
- 自分のパソコンで … 自分のPCでも動かす
まとめ
- プログラミングは、コンピュータに「やってほしいこと」を順番に教えること(レシピと同じ)
- このシリーズの最後には、おみくじ・クイズ・じゃんけんなどを自分で作れるようになる
- 最初はブラウザだけでOK。第6回から StackBlitz を使う
- あせらず、1回ずつ進めばだいじょうぶ
次の第1回では、そもそも「Webってなに?」「ホームページはどうやって画面に出てくるの?」を見ていきましょう。