CONTENT
ここから
詳細設計で画面ごとの動きが決まったら、いよいよFlutterで実装します。
実装とは、これまで考えてきた内容を、実際に動くアプリの形にしていく作業です。
ここまでで、次のようなことを整理してきました。
誰のためのアプリか。
どんな困りごとを解決するのか。
どんな機能を作るのか。
どんな画面が必要か。
画面ごとに、どのような動きをするのか。
実装では、これらをFlutterのコードに変えていきます。
ただし、最初からすべてを自分だけで書ける必要はありません。
今回の授業では、GeminiやChatGPTなどのAIを活用しながら、出席管理アプリを作っていきます。
大切なのは、AIに丸投げすることではありません。
自分が考えた設計をもとに、AIに手伝ってもらうことです。
実装は小さく始めることが大事
アプリを作るときは、最初から完成形を目指さないことが大切です。
出席管理アプリには、いろいろな機能を入れたくなります。
授業一覧。
学生一覧。
出席入力。
保存機能。
出席率の表示。
欠席者一覧。
QRコード出席。
CSV出力。
ログイン機能。
しかし、最初から全部作ろうとすると、どこから手をつければよいかわからなくなります。
まずは、小さな完成形を作ります。
たとえば、最初は次のような形で十分です。
学生一覧が表示される。
学生ごとに出席・欠席を選べる。
選んだ状態が画面上で変わる。
この時点では、保存機能がなくても構いません。
まずは画面上で動くところまで作ります。
そのあと、保存機能を追加します。
さらに、集計機能や欠席者一覧を追加します。
アプリは、いきなり大きく作るのではなく、小さく作って少しずつ広げていきます。
Flutterで作るものを分けて考える
Flutterで実装するときは、作るものを分けて考えるとわかりやすくなります。
出席管理アプリの場合、主に次のようなものを作ります。
画面
アプリで表示されるページです。
たとえば、ホーム画面、授業一覧画面、学生一覧画面、出席入力画面などです。
部品
画面の中に置く小さなパーツです。
たとえば、ボタン、カード、入力欄、見出し、一覧表示などです。
Flutterでは、このような部品をWidgetと呼びます。
データ
アプリの中で扱う情報です。
たとえば、学生名、授業名、出席状態、日付、欠席理由などです。
状態
画面の中で変化する情報です。
たとえば、出席・遅刻・欠席の選択状態です。
ボタンを押すと状態が変わり、画面の表示も変わります。
処理
ボタンを押したときに行う動きです。
たとえば、出席状態を変更する、保存する、画面を移動する、集計する、といった処理です。
このように分けて考えると、Flutterで何を作ればよいのかが見えやすくなります。
AIを使う前に自分で決めておくこと
GeminiやChatGPTを使うと、コードの案を出してもらうことができます。
しかし、何も決めずに「出席管理アプリを作って」と聞くと、自分が作りたいものと違うコードが出てくることがあります。
そのため、AIを使う前に、最低限次のことを自分で決めておきます。
誰が使うアプリか。
どんな画面を作るのか。
その画面で何を表示するのか。
ボタンを押したら何が起きるのか。
最初はどこまで作るのか。
たとえば、次のように決めます。
先生向けの出席管理アプリを作る。
最初は学生一覧画面だけ作る。
学生名を一覧で表示する。
各学生に「出席」「欠席」ボタンを置く。
ボタンを押したら、表示される状態が変わる。
ここまで決まっていれば、AIにも具体的に相談しやすくなります。
GeminiやChatGPTに相談するときの基本
AIに相談するときは、できるだけ具体的に伝えることが大切です。
悪い聞き方の例です。
「Flutterで出席管理アプリを作ってください。」
これだけだと、どんな画面にしたいのか、どこまで作りたいのかがわかりません。
良い聞き方の例です。
「Flutterで先生向けの出席管理アプリを作っています。まずは学生一覧画面を作りたいです。学生名を一覧で表示し、それぞれに出席ボタンと欠席ボタンを置きたいです。ボタンを押すと、その学生の状態が画面上で変わるようにしたいです。初心者向けに、1つのファイルで動くシンプルなサンプルを作ってください。」
このように伝えると、AIは必要なコードを出しやすくなります。
AIに相談するときは、次の情報を入れると良いです。
作りたいアプリ。
作りたい画面。
表示したい情報。
ボタンを押したときの動き。
初心者向けにしてほしいこと。
1つのファイルで見たいのか、ファイルを分けたいのか。
今どこまでできているのか。
AIに聞くためのプロンプト例
ここでは、GeminiやChatGPTに聞くときの例を紹介します。
最初の画面を作りたいとき
Flutterで出席管理アプリを作っています。
まずは先生向けの学生一覧画面を作りたいです。
条件は以下です。
- 学生名を一覧で表示する
- 各学生に「出席」「欠席」ボタンを表示する
- ボタンを押すと、その学生の出席状態が画面上で変わる
- 初心者向けに、できるだけシンプルにする
- まずはmain.dartだけで動く形にする
- コードのあとに、どこで何をしているのか説明してください
Flutterのサンプルコードを作成してください。
画面を分けたいとき
Flutterで出席管理アプリを作っています。
現在、学生一覧画面を作っています。
次に、ホーム画面から学生一覧画面へ移動できるようにしたいです。
条件は以下です。
- ホーム画面に「出席を取る」ボタンを置く
- ボタンを押すと学生一覧画面へ移動する
- Navigatorを使う
- 初心者向けに説明する
- main.dartだけで動くサンプルにする
コードと解説をお願いします。
エラーを直したいとき
Flutterで出席管理アプリを作っています。
以下のエラーが出ました。
【ここにエラーメッセージを貼る】
現在のコードは以下です。
【ここにコードを貼る】
やりたいことは、学生一覧を表示して、出席ボタンを押したら状態が変わることです。
エラーの原因を初心者向けに説明し、修正版のコードを出してください。
AIに質問するときは、エラー文だけでなく、現在のコードとやりたいことも一緒に伝えると、答えが正確になりやすいです。
AIを使うときの注意点
AIは便利ですが、出てきたコードが必ず正しいとは限りません。
そのまま貼り付けても、動かないことがあります。
また、自分がまだ習っていない難しい書き方が出てくることもあります。
そのため、AIを使うときは次のことに注意します。
コードをそのまま信じすぎない。
わからない部分は説明を求める。
一度に大きな機能を頼まない。
小さな単位で質問する。
エラーが出たら、エラー文を確認する。
出てきたコードを自分のアプリに合わせて調整する。
特に大切なのは、小さく聞くことです。
「出席管理アプリを全部作って」ではなく、「学生一覧を表示したい」「ボタンを押したら状態を変えたい」「保存できるようにしたい」のように、1つずつ聞きます。
小さく聞くと、理解しやすくなります。
修正もしやすくなります。
実装するときの進め方
Flutterで実装するときは、次の順番で進めるとわかりやすいです。
1. まず画面を表示する
最初に、何も動かなくてもよいので画面を表示します。
学生一覧の見た目だけを作ります。
学生名が並んでいるだけでも構いません。
2. ボタンを置く
次に、出席ボタンや欠席ボタンを置きます。
まだ状態が変わらなくても、画面に必要な部品があることを確認します。
3. ボタンを押したら状態が変わるようにする
次に、ボタンを押したときに表示が変わるようにします。
たとえば、「未入力」が「出席」に変わるようにします。
4. データを保存する
画面上で動くようになったら、保存機能を考えます。
最初はアプリの中だけで状態を持つ形でも構いません。
次に、端末内に保存する方法を検討します。
5. 集計を表示する
保存や状態管理ができたら、出席人数や欠席人数を表示します。
出席率を出す場合も、この段階で考えます。
6. 画面を増やす
最後に、必要に応じて画面を増やします。
ホーム画面。
授業一覧画面。
集計画面。
設定画面。
このように段階的に作ると、途中で何ができていて、何ができていないのかがわかりやすくなります。
バグに遭遇したときの考え方
アプリを作っていると、必ずバグに遭遇します。
バグとは、思った通りに動かないことです。
エラーが出る。
画面が真っ白になる。
ボタンを押しても反応しない。
保存したはずなのに消えている。
表示が崩れる。
このようなことは、アプリ開発ではよくあります。
バグが出たから失敗ではありません。
バグを見つけて直すことも、開発の一部です。
大切なのは、あわてずに原因を切り分けることです。
バグが出たときに確認すること
バグが出たら、次の順番で確認します。
1. エラーメッセージを読む
まず、画面やターミナルに表示されたエラーメッセージを読みます。
英語で表示されることが多いですが、全部を理解できなくても大丈夫です。
どのファイルで起きているのか。
何行目で起きているのか。
どんな言葉が出ているのか。
このあたりを確認します。
2. 直前に変更した場所を確認する
バグは、直前に変更した場所で起きていることが多いです。
新しくボタンを追加した。
変数名を変えた。
画面遷移を追加した。
保存処理を変更した。
このように、最後に何を変えたかを思い出します。
3. 小さく戻して確認する
大きく変更したあとに動かなくなった場合は、一度小さく戻します。
画面だけ表示される状態に戻す。
ボタンだけ置いた状態に戻す。
保存処理を外して確認する。
このように、動く場所まで戻ると、どこで問題が起きたのか見つけやすくなります。
4. エラー文とコードをAIに渡す
自分で原因がわからない場合は、GeminiやChatGPTに相談します。
そのときは、次の3つを必ず渡します。
エラーメッセージ。
現在のコード。
本当は何をしたかったのか。
これがないと、AIも正しく判断しにくくなります。
5. 修正したら、もう一度動かす
AIが出した修正案を使ったら、必ず自分で動かして確認します。
エラーが消えたか。
思った通りに動くか。
別の場所が壊れていないか。
ここまで確認します。
バグ相談用のプロンプト例
バグが出たときは、次のようにAIに聞くとよいです。
Flutterで出席管理アプリを作っています。
やりたいこと：
学生一覧で「出席」ボタンを押したら、その学生の状態を「出席」に変えたいです。
困っていること：
ボタンを押しても画面の表示が変わりません。
現在のコード：
【ここにコードを貼る】
エラー文：
【エラーが出ている場合はここに貼る】
初心者にもわかるように、原因と修正方法を説明してください。
修正版のコードも出してください。
保存で困っている場合は、次のように聞きます。
Flutterで出席管理アプリを作っています。
やりたいこと：
出席状態を保存して、アプリを開き直しても残るようにしたいです。
困っていること：
保存したはずの出席状態が、アプリを再起動すると消えてしまいます。
現在のコード：
【ここにコードを貼る】
使っている保存方法：
【SharedPreferences / SQLite / その他 / まだ決めていない】
原因を初心者向けに説明し、どこを直せばよいか教えてください。
画面遷移で困っている場合は、次のように聞きます。
Flutterで出席管理アプリを作っています。
やりたいこと：
ホーム画面のボタンを押したら、学生一覧画面へ移動したいです。
困っていること：
ボタンを押すとエラーになります。
現在のコード：
【ここにコードを貼る】
エラー文：
【ここにエラー文を貼る】
Navigatorの使い方も含めて、初心者向けに説明してください。
AIに修正を頼むときの注意
AIに修正を頼むときは、「全部書き直して」と頼むより、まずは原因を聞く方がよいです。
たとえば、次のように聞きます。
このエラーの原因は何ですか。
どの行が問題ですか。
初心者向けに説明してください。
最小限の修正で直してください。
元のデザインは変えないでください。
今ある機能は消さないでください。
このように聞くと、必要以上にコードが変わってしまうことを防ぎやすくなります。
特に、すでに動いている部分がある場合は、「動いている部分は変えないでください」と伝えることが大切です。
実装中のメモに残すこと
実装中は、作業メモを残してください。
メモには、次の内容を書くとよいです。
今日作った画面。
追加した機能。
AIに聞いたこと。
出てきたエラー。
エラーの原因。
どう直したか。
まだできていないこと。
次に作ること。
たとえば、次のように書きます。
今日作ったもの：
学生一覧画面を作成した。
できたこと：
学生名を一覧で表示できた。
出席・欠席ボタンを表示できた。
ボタンを押すと状態が変わるようになった。
AIに聞いたこと：
ListViewの使い方。
setStateで画面を更新する方法。
出たエラー：
ボタンを押しても表示が変わらなかった。
原因：
状態を変更したあとに画面を更新する処理ができていなかった。
次にやること：
出席状態を保存できるようにする。
このようにメモを残すと、自分がどのように考えてアプリを作ったのかがわかります。
完成したアプリだけでなく、作るまでの流れも提出物として大切です。
この節のまとめ
実装は、設計した内容をFlutterで形にする作業です。
最初から大きなアプリを作る必要はありません。
まずは小さく作ります。
画面を表示する。
ボタンを置く。
状態を変える。
保存する。
集計する。
このように、少しずつ進めます。
GeminiやChatGPTは、実装を助けてくれる便利な道具です。
ただし、AIに丸投げするのではなく、自分が考えた設計をもとに相談します。
AIに聞くときは、作りたいもの、現在の状態、困っていることを具体的に伝えます。
バグが出たときは、エラーメッセージを読み、直前に変更した場所を確認します。
それでもわからない場合は、コードとエラー文をAIに渡して相談します。
アプリ開発では、バグが出ることも学びの一部です。
大切なのは、止まらずに原因を探し、小さく直していくことです。
この流れで進めれば、Flutterを使って、出席管理アプリを少しずつ形にしていくことができます。