第0回

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

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

·8分で読める
たける
たける りこさん、プログラミングってやってみたいけど、なんだかすごくむずかしそう…。
りこ
りこ だいじょうぶ。プログラミングは「コンピュータへのお願いごと」を順番に書くだけ。じゅんばんに進めれば、たけるでも自分でゲームを作れるようになるよ。

このページは、シリーズのいちばん最初の回(第0回)です。むずかしいことはまだ出てきません。「プログラミングってなに?」と「この先で何ができるようになるの?」だけ、かるく知っておきましょう。

プログラミングってなに?

プログラミングとは、コンピュータに「やってほしいこと」を順番に教えてあげることです。

たとえば、おうちの人にカレーを作ってもらうとき、こんな「やりかた」がありますよね。

  1. やさいを切る
  2. 肉といっしょにいためる
  3. 水を入れてにこむ
  4. カレーのルウを入れる

この順番どおりにやると、カレーができあがります。

コンピュータも同じです。「1番にこれ、2番にこれ」と順番に書いてあげると、その通りに動いてくれます。この「やりかたの紙」がプログラムで、書くことがプログラミングです。

たける
たける レシピみたいなものなんですね。それならできそうな気がしてきた!
りこ
りこ そう。しかもコンピュータは、何回でも文句を言わずにやってくれる。すごく速くね。

このシリーズで作れるようになるもの

このシリーズを最後まで進めると、こんなものを自分の手で作れるようになります。

  • 🎴 おみくじ・ガチャ … ボタンをおすと「大吉」や「凶」がランダムに出る
  • 4択クイズ … 答えをおすと「正解!」が出て、点数がたまる
  • じゃんけんゲーム … コンピュータと勝負して、勝ち・負け・あいこが出る
  • 🧒 自己紹介カード・ミニ図鑑 … 名前や好きなものをならべて表示する

たとえば、おみくじはこんな感じのものです。下は実際に画面に出る見た目です(このシリーズの第10回で作ります)。

実行結果(実際の見た目)

きょうのうんせい

大吉 🎉

ボタンをおすたびに、まん中の文字が変わります。こういう「動くもの」を、最後には自分で作れるようになります。

むずかしい準備はいりません

「プログラミングをするには、特別なパソコンや、ややこしい道具がいるんでしょ?」と思うかもしれません。でも、このシリーズでは 最初はブラウザ(インターネットを見る画面)だけ で進めます。

第6回からは、StackBlitz(スタックブリッツ) という、ブラウザの中でReactを動かせる無料のサービスを使います。アプリを入れたりする面倒な作業はナシ。開いたらすぐに、コードを書いて結果を見られます。

この先の地図

このシリーズは、こんな順番で進みます。あせらず1回ずつでだいじょうぶ。

  1. まえがき … プログラミングってなに?(今ここ)
  2. Webと3つのことば … Webとは / HTML / CSS / JavaScript
  3. Reactをさわる … Reactとは / StackBlitzで動かす / はじめての部品
  4. 部品を組み立てる … props と map / state とイベント
  5. 作って楽しいアプリ … おみくじ / クイズ / じゃんけん
  6. 自分のパソコンで … 自分のPCでも動かす
たける
たける いきなりReactじゃなくて、まずWebのことから教えてくれるんですね。
りこ
りこ うん。土台をかるく知っておくと、Reactがぐっとわかりやすくなる。じゃあ、次回は「Webってなに?」から。

まとめ

  • プログラミングは、コンピュータに「やってほしいこと」を順番に教えること(レシピと同じ)
  • このシリーズの最後には、おみくじ・クイズ・じゃんけんなどを自分で作れるようになる
  • 最初はブラウザだけでOK。第6回から StackBlitz を使う
  • あせらず、1回ずつ進めばだいじょうぶ

次の第1回では、そもそも「Webってなに?」「ホームページはどうやって画面に出てくるの?」を見ていきましょう。