カテゴリEの入口——命令の中身を開ける
カテゴリBのB-02で、プログラムとは保存された命令の集まりだと定義しました。カテゴリEでは、その命令の中身を開けて、命令が何をしているのかを読めるようにしていきます。ここは学習全体でいうStep 2、プログラムそのものを扱う段階の入口です。まずはどんなプログラムにも共通する骨組みから見ていきましょう。この骨組みが、この先のすべての講義の土台になります。
このスライドのポイント
- B-02: プログラム＝保存された命令の集まり、と定義済み
- カテゴリEでは、その命令の中身を開けて「命令が何をしているか」を読めるようにする
- 学習全体でいうStep 2（プログラムそのものを扱う段階）の入口
- 最初の一歩＝どんなプログラムにも共通する骨組み
入力・処理・出力という骨組み
プログラムの骨組みは、入力・処理・出力の3つです。入力とは、プログラムが受け取るデータのことです。処理とは、そのデータを規則に従って変換する部分です。出力とは、変換した結果として返すものです。カテゴリDのD-03とD-04で見た、リクエストがサーバーで処理されてレスポンスが返る流れも、この入力・処理・出力の3要素の実例にあたります。新しく覚える言葉は、この3つだけです。
このスライドのポイント
- 入力＝プログラムが受け取るデータ
- 処理＝そのデータを規則に従って変換する部分
- 出力＝変換した結果として返すもの
- D-03/D-04のリクエスト→サーバーの処理→レスポンスも、この3要素の実例
なぜ3分割で見るのか
この3分割を持っていないと、AIが生成したコードを前にしても、そのコードが何を受け取って何を返すのかを問えません。受け取るものと返すものがわからなければ、出力が正しいかどうかを判断する基準も持てません。逆に、この3要素で分けて見る癖があれば、初めて見るコードでも読み解く足がかりができます。入力・処理・出力は、コードを読むときに最初に引く分割線だと考えてください。
このスライドのポイント
- この分割がないと、AIの生成コードが「何を受け取り何を返すか」を問えない
- 受け取るものと返すものがわからなければ、出力の正しさを判断する基準も持てない
- 3要素で分けて見る癖＝初見のコードを読む足がかり
- 入力・処理・出力は、コードを読む最初の分割線
小さな単位の連結で全体ができる
構造を図で確認します。基本形は、入力の枠から処理の枠へ、処理の枠から出力の枠へと、矢印が一方向に流れる形です。大きなプログラムは、この小さな入力・処理・出力の単位がいくつも連結し、入れ子になったものだと考えてください。ある処理の出力が、次の処理の入力になることもあります。全体が複雑に見えても、まずはこの一番小さな単位を、はっきり見分けられることが大切です。
このスライドのポイント
- 基本形＝入力→処理→出力の一方向フロー
- 大きなプログラム＝この小さな単位が連結・入れ子になったもの
- ある処理の出力が、次の処理の入力になることもある
- まずは一番小さな単位を見分けられることが大切
経費精算とお問い合わせフォームで確かめる
身近な例で見てみましょう。まず経費精算です。レシートに書かれた金額が入力です。その金額に税率をかけて合計を出すのが処理です。そして画面に表示される精算額が出力です。同じ枠は、カテゴリAのA-03で扱ったお問い合わせフォームにも当てはまります。利用者が入力した内容が入力、内容の検査と保存が処理、完了の表示が出力です。題材が変わっても、この3つに分けて考えられます。
このスライドのポイント
- 経費精算: レシートの金額（入力）→税率をかけて合計（処理）→精算額の表示（出力）
- 同じ枠がA-03のお問い合わせフォームにも当てはまる
- フォーム: 入力内容（入力）→検査と保存（処理）→完了表示（出力）
- どんな題材でも3つに分けて考えられる
技術サンプル——3行で入力・処理・出力
サンプルコードを見ます。本講座のサンプルは、JavaScriptという言語の表記を使います。言語そのものの詳しい話は、カテゴリFで扱います。ここで出てくるconsole.logは、結果を表示する命令だと考えてください。コードは上から順に実行されます。1行目で税抜価格を受け取り、これが入力です。2行目で税率をかけ、これが処理です。3行目で結果を表示し、これが出力です。3行がそのまま入力・処理・出力に対応しています。
混同しやすい——「プログラム」と「処理」
混同しやすい点を整理します。B-02で定義した「プログラム」と、この講義の「処理」は別のものです。プログラムは、保存されて書かれている命令そのものを指します。一方で処理は、そのプログラムが実行されている最中に、実際に起きている変換を指します。書かれているものと、動いたときに起きることの違いです。同じコードでも、静かに置かれている状態と、走って値を変えている状態は、分けて考えます。
バイブコーディングでの確認点
バイブコーディングでの確認点です。AIにコードを作らせたら、毎回「このコードの入力は何で、出力は何ですか」と聞いてください。この一問が、コードレビューの入口になります。入力と出力がはっきり答えられれば、そのコードが何をするものかを、人間が把握できている証拠です。答えがあいまいなら、まだ理解が追いついていないか、コード自体が整理されていない可能性があります。まずは3要素を問う習慣をつけましょう。
このスライドのポイント
- AIにコードを作らせたら、毎回「入力は何で、出力は何ですか」と聞く
- この一問がコードレビューの入口になる
- 入力と出力を答えられる＝そのコードの役割を人間が把握できている証拠
- 答えがあいまいなら、理解不足かコードが整理されていない可能性
まとめと次回
最後に一問一答です。プログラムの3要素は何でしょうか。（間）答えは、入力・処理・出力です。30秒でまとめます。どんなプログラムも、データを受け取る入力、規則に従って変換する処理、結果を返す出力の3つで説明できます。この3分割が、コードを読む最初の足がかりになります。次回は、その入力として受け取るデータに種類があること、つまりデータの型を扱います。関連資料は「非エンジニアが最初に覚えるべき開発概念30」と「AI開発ワード100」です。
このスライドのポイント
- 一問一答: プログラムの3要素は？ → 入力・処理・出力
- 30秒まとめ: どんなプログラムも「受け取る入力・規則で変換する処理・返す出力」で説明できる。この3分割がコードを読む最初の足がかり
- 次回: 入力として受け取るデータの「種類」（データの型）へ
- 関連資料: 非エンジニアが最初に覚えるべき開発概念30、AI開発ワード100
