【授業レポート】システム開発入門 第11週目：目的、入出力、処理の流れから学ぶアプリ設計

システム開発入門の第11週目では、1年生が自分で考えたアプリの設計書を作りました。
これまでに学んだコードの書き方、関数、繰り返し、データの扱い方を使う前に、「誰が、何のために使い、どのように動くのか」を整理する授業です。

前回のコードレビュー実習では、書かれたコードを読み、改善点を伝える力を養いました。
今回は、コードを書く前にアプリの目的と動作を決める段階へ進みます。

アプリ設計と仕様書づくりとは

アプリ設計とは、アプリの目的、利用者、画面、入力する情報、返す結果、処理の順番を、実装前に整理することです。
授業では、この内容を言葉や図にした資料を設計書としてまとめました。

「プログラムを書く前に、どんなアプリを作るかを決めて、どんな画面があって、何を入力して、何が起きるかを明確にしておく必要があります。」

田中先生は、設計のないコードと設計に基づくコードをホワイトボードに並べ、違いを説明しました。
画面や動作を先に言葉にすると、これから書くコードの役割を一つずつ確かめられます。

実習1では目的と利用者を決める

最初の実習では、作りたいアプリについて五つの項目をワークシートに記入しました。
各項目は、思いついた機能を並べるためではなく、利用者の目的から必要な処理を考えるための手掛かりになります。

入力と出力は対で考えます。
例えば、名前を入力してもらうなら、結果のメッセージに名前を使うのかを決めておく必要があります。
使わない情報なら入力項目から外すという判断もできます。

生徒からは「好きなアーティスト診断とか面白そう！」「中学生向けの進路ナビみたいなのを作ってみたい」という案が出ました。

この二つの案も、誰が使うのか、どの質問に答えるのか、どのような結果を返すのかまで分けると、実装する機能が見えやすくなります。

実習2では処理の順番を書き出す

フローチャートは、処理の順番や分かれ方を図形と矢印で表す方法です。
今回の授業では、フローチャートまたは箇条書きを使い、プログラムが動く順番を整理しました。

おみくじアプリの基本的な流れは次の三段階です。

1. 利用者が名前を入力する。
2. プログラムが運勢をランダムに選ぶ。
3. 結果をメッセージとして表示する。

この流れをコードに移す前に、入力した名前をどこで使うか、結果をどの画面に表示するかも確かめます。
処理を順番に並べることで、足りない動作や使われない入力に気付きやすくなります。

田中先生は「実はこの『流れを考える』だけで、コードの半分はもう完成したようなものです」と説明しました。

これは進捗率を示す数字ではなく、処理の順番を決める作業が実装の土台になるという意味です。
生徒からも「やってみると、意外と処理が多いことに気付く」「この順番でいいかなと考えるのが楽しい」という声が上がりました。

個人設計で生まれたアプリの案

授業の後半は、各自が設計書を仕上げる時間でした。
田中先生は机を回り、アイデアの相談を受けながら、入力と出力の対応を生徒と一緒に確認しました。

• 質問形式の診断アプリ
• 数当てゲーム
• 食事アドバイスアプリ
• 推し当てチャートアプリ

アプリの種類は異なっても、目的、利用者、入力、処理、出力の順に整理する手順は共通しています。
自由な発想を実際に動くプログラムへつなぐには、アイデアをこの単位まで具体化する必要があります。

設計書をコードへつなぐ確認項目

設計書を読み返すときは、次の四点を順に確認できます。

1. 目的と利用者：誰のどのような目的を助けるアプリかを、一文で説明できるか。
2. 入力：受け取る情報が、後の処理で実際に使われるか。
3. 処理：開始から結果の表示まで、動作を順番に追えるか。
4. 出力：返す結果が、最初に決めた目的に合っているか。

四点がつながっていれば、どの処理を関数にするか、どの順番でコードを書くかを考えやすくなります。
つながらない項目があれば、実装前に設計へ戻って直せます。

次回は設計書をもとに実装する

今回、生徒たちは「何を作るか」を思いつくだけで終わらせず、「誰が使い、何を入力し、どのような処理を経て、何を返すか」まで書き出しました。
コードは、設計書に書かれた動作をコンピューターが実行できる形へ置き換える役割を担います。

次回は、完成した設計書をもとに実装へ進みます。
続きは第12週目の開発実習レポートで紹介しています。