付箋で始めるプログラミング講座【超初心者向け】#07 総復習

これまでのプログラミング学習、ほんとうにお疲れ様でした。

付箋を動かして、概念と格闘して。普段使わない言葉や概念もたくさん出てきたので、最初はずいぶん戸惑ったと思いますが、

その「格闘」こそが、一番大事です。

だから最後の今回は、 「付箋を動かして、アプリを動かす」ことだけに集中しました。

やることを追加して、完了にして、削除して。

たったそれだけの動作の中に、 これまで学んだ6つの基本が、全部つまっています。

いままで習ったことを、組み合わせて、付箋でアプリを作っちゃいましょう！

プログラミングの基本の振り返り

この連載で学んできたプログラミングの基本はたったこれだけです。

🟡 第1回：変数　　　　　　　　― データを覚える「名前付き付箋」
🟡 第2回：条件分岐　　　　　　―「もし〜なら」
🟡 第3回：繰り返し（ループ）　― 同じ作業を自動で何度も
🟡 第4回：関数　　　　　　　　―「レシピカード」＝手順のまとめ
🟡 第5回：配列・リスト　　　　― 付箋を並べて管理する
🟡 第6回：イベント　　　　　　―「きっかけ」で処理が動く

え？たったこれだけ？

そう、たったこれだけだったんです。

ですがこの「たったこれだけ」で、世界中のアプリが動いています。

LINEも、Amazonも、あなたの会社のシステムも、ぜんぶこの6つの組み合わせで出来ているんです。

今日作るもの

今回作るのは、事務のお仕事でおなじみの、これです。

「やることリスト（ToDo）」

毎日、こんなメモを書いていませんか？

□ 請求書をチェック
□ 営業さんにメール返信
□ 月次レポート作成

このリストを、付箋を使って「アプリのように」動かしてみます。

• やることを 追加 する

• 終わったら 完了 にする

• いらなくなったら 削除 する

たったこれだけですが、この3つの動作の中に、6つの基本が全部つまっているんです。総復習の楽しいところですね。

付箋で動きを確認したら、webサイトの方で、アプリの動作を確認してみましょう。

プログラミングの構造が分かった今、それに当てはまるコードを書けば、
「もう私、実際に動くアプリが作れるんだ！！」
ってことが分かって、驚きますよ😊

では、一緒に作っていきましょう。

準備：机の上に「アプリの画面」を作る

まず、机の上にアプリの画面を作りましょう。

大きめのコピー用紙を1枚用意してください。
そして、下の画像のように、3つのエリアに区切ってください。

• 上　　：「入力」エリア（やることを書く場所）

• 真ん中：「やることリスト」エリア（追加したやることが並ぶ場所）

• 下　　：「完了」エリア（終わったやることを置く場所）

これが、あなたのアプリの「画面」です。

線を引くだけでOK。定規がなければ、手描きの線で大丈夫ですよ。

付箋プログラムを作る

STEP 1：「配列」を用意する（第5回）

アプリが覚えておくデータの入れ物を準備します。

ここで登場するのが、配列（第5回）です。

付箋ワーク：データの入れ物を用意する

1. 大きい付箋を1枚用意し、「やることリスト」と名前を書いてください。これが配列です。

2. その付箋を、コピー用紙の「やることリスト」エリアに貼ってください。

3. 今はまだ何も入っていない、空っぽの状態です。

4. STEP2で配列「やりたいことリスト」にやりたいこと（データ）入れていきます。

💡 ここで振り返り
「配列って、複数のデータを順番に並べて、ひとつの名前でまとめて管理するしくみ」と思い出せたらバッチリです！

👉 第5回：配列・リスト

STEP 2：付箋を動かして「追加」してみる（第1回・第4回・第6回）

さあ、いよいよ動かします。

ここであなたはコンピューターの代わりになって、付箋を動かしてください。アナログじゃ無いですよ。デジタルになった気持ちで

「追加ボタンを押したら、何が起きるか」

再現してください。

ここですることは

1. やりたいことを入力エリアに入れる（インプット）

2. ボタンを押す

3. やりたいことが入力エリアからやることリストに移動する処理がされる（関数）

4. やることリストにやりたいことが入る（配列の中に入る）

第一回の変数の回を思い出してください。
コンピューターって結構単純で、やっていること

• データを覚える　(インプット）

• 判断する、繰り返す、計算するなど　（加工）

• 人間が分かるようにする　（出力・アウトプット）

の、実は3つでしたよね。

👉 第1回：変数　

そして、このコンピューターにさせることを、どういう手順でさせるかまとめたのが、この第7回の総復習です。

1. 入力エリアに入れることがインプット（入力）

2. ボタンを押したら何が起こってどうなるかを処理するのが加工

3. 配列の中に置くのがアウトプット（出力）

これが、STEP2でコンピューターがすることです。

付箋ワーク：やることを1つ追加する

1. 入力欄に[リストに追加]のボタンを書いてください。

2.  「請求書チェック」 と書いた小さい付箋を用意してください。

3. 書いた付箋を、まず「入力」エリアに置きます。（これが「入力」です）

1. さあ、ここで 「リストに追加」 ボタンを押すと想像してください。あなたの指を、ボタンを押すようにトンッと。（これがイベントです）
   
   ボタンを押すと、入力リストに入っている値（データ）をやることリストエリアの配列「やることリスト」の中に移動する、という小さなプログラムが実行されます（関数が実行されたんですね）
   

2. ボタンを押したら、「請求書チェック」 と書いた付箋を「入力」エリアから「やることリスト」エリアに 移動 させてください。

これで、配列「やることリスト」にデータが1件追加された状態になりました。

たったこれだけ。付箋を動かしただけですが、これがまさにアプリの「追加処理」です。イベント（第6回）と関数（第4回）が使われたことが分かりましたか？

同じ手順で、あと2件、追加してみましょう。

1. 「営業メール返信」と書く → 入力に置く → リストに追加ボタンを押す → リストへ移動

2. 「月次レポート作成」と書く → 入力に置く → リストに追加ボタンを押す → リストへ移動
   
   💡 ここで振り返り 「ボタンを押す（きっかけ）→ 処理が動く」
   これがイベントでしたね。 👉 第6回：イベント

STEP 3：「ループ」で全部完了にする（第1回・第3回・第5回）

やることが終わったら、リストから完了エリアに動かします。

仕事が一段落付いたとき、やり忘れていることが無いかリストを確認しますよね。そして、全部完了している事を確認してたら、一つ一つ完了エリアに移すより、全部まとめて移したいですよね。その方が楽ですから！

でも、まとめて何かするやり方って学習してないですよね？
では、どうしたらよいでしょうか？ちょっと考えてみてください。

人間だったら、3つの付箋を一気に剥がして貼る！ってしちゃいますけど、それだと付箋が折れたり、完了エリアにきれいに並んでいなかったり、順番が変わってしまったり…。え？そんながさつなことはしないって？そ、そうですよね💦

コンピューターの仕事は丁寧です。
一つずつ順番に処理をして、それを終わりの指定に達するまで、ずっと繰り返します。

そう、ここでループ（第3回）を使うのです。

コンピューターの処理は速いから、人間が見ると一瞬で終わったりするのでまとめてやったように見えます。でも、やっている事は、今、学習している事の組み合わせです。

この動き、プログラミングでどう書けばいいの？？

と、分からなくなったとき、ここで学習した基本の中から、「どれかな？」と考えてください。必ずどれかに当てはまりますよ。　　　

付箋ワーク：同じ動きを繰り返す

「数字」書いた付箋を作ります。
3枚の小さい付箋それぞれに「0」「1」「2」と書いてください。小さい付箋は値です。
「数字」と書いた付箋と小さい付箋がどんな役割を持っているか、思い出してくださいね。
「数字」と書いた変数です。今回は配列の中の取り出す順番を入れましょう。
変数「数字」に「0」が入っている時、配列の中の0番目の値を取り出します。配列は、いちばん最初の値を『0番目』と数えるということも忘れないでくださいね。人間なら『1番目』と数えたくなる先頭を、コンピューターは『0番目』と呼びます。

では、やってみましょう。

変数「数字」の値が0：0回目の処理→「請求書チェック」をやることリストから完了に移動
変数「数字」の値を1に変える：1回目の処理→「営業メール返信」をやることリストから完了に移動
変数「数字」の値を2に変える：2回目の処理→「月次レポート作成」をやることリストから完了に移動

💡 ここで振り返り 「同じ動きを繰り返す＝ループ」でしたね。変数とは何かも繰り返し確認しましょう。
👉 第1回：変数　👉 第3回：繰り返し　👉 第5回：配列・リスト

STEP 4：「条件分岐」を入れる（第2回）

最後に、ちょっとした気配りを足します。

もし、やることが全部終わってリストが空っぽになったら？

「やることがありません」と表示してあげたいですよね。

これが条件分岐（第2回）です。

付箋ワーク：もし〜なら、を足す

1. 小さい付箋に「やることがありません」と書いてください。

2. この付箋は、配列「やることリスト」が 空っぽのときだけ 出す、と決めます。STEP3で3件すべてを完了エリアに移したので、今、配列「やることリスト」の中は空っぽですね。

3. 「やることがありません」を出しましょう。

⚠️注意：「やることがありません」はやることリストに入れたいやることではありませんよね。ですから、配列の中に入れないように気をつけましょう。

• もし、リストに付箋が1枚でもある → メッセージは出さない

• もし、リストが空っぽ → 「やることがありません」を出す

これが「もし〜なら」の判断、条件分岐です。

💡 ここで振り返り 「もし〜なら、こうする」の分かれ道が条件分岐でしたね。
👉 第2回：条件分岐

振り返り完成！

おめでとうございます🎉

いま、あなたが付箋を動かしてやったことを、並べてみましょう。

• 変数 … 入力する文字を覚える（第1回）

• 配列 … やることリストを並べて管理する（第5回）

• イベント … 追加ボタンを押す「きっかけ」（第6回）

• 関数 … 追加する・削除するという「決まった処理」（第4回）

• ループ … 同じ追加動作を繰り返す（第3回）

• 条件分岐 … リストが空っぽなら特別なメッセージ（第2回）

6つの基本、全部使いましたね！！

新しいことは、何ひとつ覚えていません。

いままで習ったことを、組み合わせただけ。

これがプログラミングです。

【参考】これをコードにすると？

付箋でやったことは、コードにするとこうなります。

でも、書けなくて大丈夫。「ふーん、こんな感じか」と眺めるだけでOKです。

むしろ、「あ、さっき付箋でやったことと同じだ」と気づけたら、それだけで大成功です😊

// 変数と配列を用意（第1回・第5回）
let 入力中のテキスト = "";
let やることリスト = [];

// 「追加」の処理（関数・第4回）
function やることを追加する() {
  やることリスト.push(入力中のテキスト);   // 配列に追加（第5回）
  入力中のテキスト = "";
  画面を更新する();
}

// 画面を更新する処理（関数・第4回）
function 画面を更新する() {
  if (やることリスト.length === 0) {        // もし空なら（条件分岐・第2回）
    画面に「やることがありません」と表示する;
    return;
  }
  // リストの数だけ繰り返して表示（ループ・第3回）
  for (let i = 0; i < やることリスト.length; i = i + 1) {
    画面に表示する(やることリスト[i]);
  }
}

// 追加ボタンが押されたとき（イベント・第6回）
追加ボタン.onclick = やることを追加する;

コードの右側のコメントを見てください。

// 配列に追加（第5回） のように、どの行が、どの回の内容かを書いておきました。

コードって、実は「ほぼ英語で書いた設計書」でしたよね。
実は、プログラミング言語によっては、functionやpushなどの単語を日本語で指示する物もあるんですが、JavaScriptやpythonなど、人気の言語で仕事の中で使いそうな言語は、ほぼ英語がベースに作られています。それも中学生が習うぐらいの簡単な英語です。

付箋で設計ができていれば、あとはそれをほぼ英語のプログラミング言語にに「翻訳」するだけ。

だから、設計ができるあなたは、もうコードが読める人なんですよ😊

つまずきポイント

「全部いっぺんに理解しよう」としない

6つの基本が一気に出てきて、混乱するかもしれません。でも大丈夫。1つずつ、付箋を動かしながら確認してください。

「これは第○回だな」と思ったら、テキストのその部分に戻る。この繰り返しが、プログラミングを覚える一番の近道です。

このテキストを、プログラミングの構造を学ぶことと実際のプログラミング言語を学ぶことと切り離しているのも、一つずつ学び身につけていただくためです。

コードはほぼ英語と言っても、それをどう使うか覚えるのは、やっぱり学んだことがない人には大変です。

関数の指定は
function と宣言した後に関数名と引数を入れる（）を書いて、関数で処理することは { }で囲んで…。
指示する単語（キーワードと言います）はほぼ英語でも、それを正しく使うルールも覚えなければなりません。また、そのルールは日本語や英語で構文が違うように、プログラミング言語によって違います。

大勢の生徒に教えていて、プログラミングに挫折する人は、この言語のルールと一緒にプログラムの構造を覚えなければならないからではないかと感じていました。

構造は、皆さん学習したとおり、そんなに複雑ではありません。覚えることも少ないです。

そして、

どの言語でも同じなのです！

とはいえ、読むだけ、見るだけでは身につきません。

付箋を「動かす」ことで、感覚を身につけてください。
面倒でも、実際に付箋を書いて、机の上で動かしてください。

手が覚えたことは、忘れません。

構造が分かれば設計が出来ます。

「設計」ができれば、コードは後から当てはめるだけです！

コードが難しく見えるのは、設計をとばして、いきなり書こうとするから。付箋で設計ができていれば、コードは怖くありません。

皆さんはもう、実際にプログラミング言語のコードを書く学習に進める基礎が身についています。是非、次のステップに進んでください。

Webサイトで「動く付箋アプリ」を体験できます

この総復習も、Webサイトを用意しました。

付箋を追加したり、完了にしたり、削除したりすると、画面の横で「いま、どの基本が動いたか」が光って見えるしくみです。

「あ、いま配列が動いた」「これはイベントだ」と、6つの基本がリアルタイムで確認できます。

しかも、それぞれの基本から、その回の記事に戻れるようにしてあります。

付箋ワークが終わったら、ぜひ触ってみてくださいね。

🔗 Webサイト：付箋で動かすTODOアプリ

今日のまとめ

✅ プログラミングの基本は、たったこれだけ：変数 → 条件分岐 → ループ → 関数 → 配列 → イベント

✅ 付箋を動かすだけで、アプリの「追加・完了・削除」が再現できる

✅ 複雑に見えるアプリも、6つの基本を組み合わせているだけ。新しいことは何もない

✅ 「これ何だっけ？」と思ったら、いつでもその回に戻って振り返る。それが一番身につく

✅ 設計ができれば、コードは「翻訳」するだけ。あなたはもう、コードが読める人

全7回、お疲れ様でした🎉

ここまで来たあなたは、もう立派に「プログラミングの考え方」を身につけています。

いままで「難しそう」と遠くから眺めていたプログラミングが、

「あ、こんな身近な考え方だったんだ」

って、感じてもらえたなら、これほど嬉しいことはありません。

これから先、もっと学びたくなったら――

• コードを書いてみたくなったら、JavaScriptの入門書へ。今日の「設計」が、そのまま活きます。

• 仕事を自動化したくなったら、Excelのマクロへ。変数もループも関数も、ぜんぶ使われています。

• 何か作ってみたくなったら、また付箋を広げてください。設計から始めれば、怖くありません。

そして、忘れないでください。

いつでも、この連載に戻ってきていいんです。

何度でも読み返して、確認して、また前に進む。

それが、一番確実な学び方です。

「自分でやってみる」から身につくんだよ。

これまで付き合ってくれて、本当にありがとうございました。

あなたのお仕事が、今日からちょっと軽くなりますように😊

では、また、どこかで。

📚 各回をもう一度：