カテゴリー一覧に戻る

持ち物チェックアプリを作る

GARU CHAT

ガルちゃんベイビーに相談する

修行の進め方や、いま選んでいるコースで何を作ればいいかを短く質問すると、やさしく整理して案内するガル。

まずはここから質問できるガル

進め方

1週間に1回アウトプット提出、1か月に1回フィードバックレビュー

1

第1週 使う場面を決める

誰がどんなときに使う持ち物アプリかを決める。

作業手順

学校用、旅行用、習い事用など用途を1つ選ぶ。
必要な持ち物を10個前後書き出す。
一覧画面、チェック機能、完了表示の3機能に絞る。

画像テーマ

画面ラフ
ボタン配置
機能メモ

この週で使うAIツール

2

第2週 最初の画面を動かす

チェックできる最低限の画面を作る。

作業手順

AIに一覧表示のコードのたたき台を作ってもらう。
チェックボックスを押すと状態が変わるようにする。
表示崩れやエラーを1つずつ直す。

画像テーマ

最初の画面
コードの流れ
動作テスト

この週で使うAIツール

3

第3週 毎日使いやすく直す

色、並び、見やすさを整えて使いやすくする。

作業手順

終わった持ち物が分かりやすくなる色を付ける。
よく使う持ち物が上に来るよう並びを直す。
AIに『朝急いでいる人向けに改善して』と相談する。

画像テーマ

改善前後
見やすい画面
操作フロー

この週で使うAIツール

4

第4週 アプリとして発表する

動くチェックアプリとして見せられる形にする。

作業手順

どんなときに役立つアプリか説明文を書く。
実際にチェックしている画面を見せる。
次に追加したい『日付別リスト』などの機能を1つ決める。

画像テーマ

作品紹介スライド
完成画面
次の拡張案

この週で使うAIツール

準備ツール

推奨PC

MacBook の M 系チップ推奨です。M1 / M2 など ARM 版チップの端末を基本環境にしてください。

AI以外で使うツール

VSCode には Codex を入れて使います。必要に応じて各種 CLI ツールも使います。

AI関連で使うツール

Codex は ChatGPT Plus プラン上で使う前提です。