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

たける りこさん、プログラミングってやってみたいけど、なんだかすごくむずかしそう…。

りこ だいじょうぶ。プログラミングは「コンピュータへのお願いごと」を順番に書くだけ。じゅんばんに進めれば、たけるでも自分でゲームを作れるようになるよ。

このページは、シリーズのいちばん最初の回（第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ってなに？」「ホームページはどうやって画面に出てくるの？」を見ていきましょう。

確認してみる

まずは第10回の完成形を見て、ボタンを押す前に覚えておく値は何か考える。動く実験なら 実験室でも試せる。

仕様・手順の参照先