アプリも、「決める・書く・確かめる」
いよいよアプリです。Webサイトや本より、ずっと難しそうに感じるかもしれません。たしかに、手順は増えます。用意するものも増えます。けれど、やることの芯は同じです。何を作るかを決めて、AIに書いてもらい、自分の手で確かめる。
違うのは、確かめる場所です。Webサイトはブラウザで確かめました。アプリは、自分のスマホの上で確かめます。指でさわって、思った通りに動くか。それを見られるところまでが、この章の目標です。
まず、画面の流れを紙に書く
アプリは、ページを上から下へ読むWebサイトと違って、画面が切りかわっていくものです。作り始める前に、画面の流れを紙に書きます。四角を描いて画面の名前を書き、矢印でつなぐだけで十分です。
- 最初の画面アプリを開いたときに見える画面。何ができるかがわかる。
- 中心の画面アプリでいちばんしたいことをする画面。
- 終わりの画面やり終えたときに見る画面。次も使いたくなる。
最初は、画面3つくらいの小さなアプリから始める、という考え方もあります。あれもこれも入れたくなりますが、まずは1つのことがきちんとできるアプリを作り、公開してから育てるほうが、ずっと遠くまで行けます。
頼み方の例
Expoという道具
iPhoneのアプリを作る方法はいくつかあります。ヒトリキカクはExpo（エキスポ）という道具を選びました。よかったと感じている点は3つです。
- Windowsでも作れる。iPhoneのアプリは、ふつうMacで作るものですが、Expoなら作業の大部分をWindowsで進められます。
- 自分のiPhoneで、すぐ試せる。作っている途中のアプリを、専用のアプリを使って手元のiPhoneで動かせます。
- 同じもとから、Android版も作れる。あとでAndroidにも出したくなったとき、作り直さずにすみます。
Expoを動かすには、パソコンにNode.js（ノード）という道具が必要です。入れ方は、AIに聞きながら進めてください。
AIの知識は、少し古いことがある
Expoは、数か月ごとに新しい版が出ます。AIが覚えている使い方が、いまの版では変わっていることがあります。だから、作業を始める前に、いま使っている版の公式の説明を読んでから作業してと頼んでおきます。この頼みは、第3章のメモ（CLAUDE.md）に書いておくと、毎回伝えずにすみます。
ヒトリキカクの進め方：アプリのもとを作って、iPhoneで動かす
1. アプリ用のフォルダを作る
第2章と同じように、アプリ用のフォルダを新しく作り、Claude Codeで開きます。Webサイトとは別のフォルダにします。
2. アプリのもとを作ってもらう
頼み方の例
AIは、アプリのもとを作るための命令（コマンド）を動かしてもいいかを聞いてきます。第2章で見たように、何をするものか確かめてから許可します。たくさんのファイルができますが、全部を見る必要はありません。
3. まずパソコンのブラウザで見る
Expoで作ったアプリは、パソコンのブラウザでも、だいたいの見た目を確かめられます。画面の行き来や文字の並びは、まずここで見てしまうのが手軽です。
頼み方の例
4. 自分のiPhoneで動かす
いよいよ本物のスマホで動かします。iPhoneに、App StoreからExpo Goという無料のアプリを入れておきます。
- AIに頼んで、パソコンでアプリを「動かす状態」にしてもらう
- パソコンの画面に、QRコードが表示される
- iPhoneのカメラでQRコードを読むと、Expo Goの中で作ったアプリが開く
パソコンとiPhoneは、同じWi-Fiにつないでおきます。うまく開かないときは、表示されたメッセージをそのままAIに伝えてください。
自分の作ったアプリが、手の中のiPhoneで動く。最初にこれを見たときの驚きは、作った人にしか味わえないものです。
5. さわって確かめ、直す
動かしている間にAIがファイルを直すと、iPhoneの画面も自動で新しくなります。頼む → さわる → 確かめる。第1章のリズムが、そのままスマホの上でくり返せます。
- ボタンは、指で押しやすい大きさか
- 画面のいちばん上の文字が、時計や電池の表示に重なっていないか
- キーボードを出したとき、入力する欄が隠れていないか
- 前の画面に、迷わずもどれるか
どれも、パソコンのブラウザでは気づきにくいことです。必ず本物のiPhoneで確かめます。
Expo Goで動かないもの
広告や、一部の特別な機能は、Expo Goの中では動きません。その場合は、自分のアプリ専用の試し用の版を作って確かめます。広告を入れる話は、第10章で扱います。
黒い画面で聞かれたら
アプリづくりでは、ターミナル（黒い画面）で、アカウントの確認や選択を求められる場面が出てきます。慣れないうちは戸惑うところです。
- 1つずつ進める。何を聞かれているのかを、毎回AIに確かめてから答えます。
- 選ぶ形か、書く形かを見分ける。矢印キーで選ぶ質問と、文字を書きこむ質問があります。
- パスワードは自分で入れる。Apple IDのパスワードなどは、AIとのやりとりには書きません。
- 詰まったら、やり直す。キーボードの Ctrl＋C で止めて、最初からやり直せば大丈夫なことがほとんどです。
ヒトリキカクの場合
私の最初のアプリは、閉店した自習室を、スマホの中に作り直した「自習室ヒトリキカク」です。画面の流れは、入室して、上から見た部屋の図で空いている席を選んで座り、勉強して、退室すると今日の記録が出る、というものでした。Expoで作り、Expo Goで自分のiPhoneに映しながら、毎日少しずつ直しました。
Android版も同じもとから作れましたが、公開は見送りました。Google Playに個人で新しく出すには、決められた人数に一定の期間テストしてもらう条件があったからです。作れることと、出せることは別だと知りました。
つまずきやすいところ
- 最初から大きなアプリを作ろうとする。画面3つくらいで、まず1つのことができるアプリに。
- ブラウザだけで確かめて済ませる。スマホでしか起きない問題がたくさんあります。
- Expo Goでつながらない。パソコンとiPhoneが同じWi-Fiにつながっているかを、まず確かめます。
あなたなら、どうする？
- あなたが毎日使っているアプリの、どこが好きですか。そのよさを、自分のアプリにどう生かせますか。
- 画面3つだけで作るとしたら、あなたのアプリはどんな流れになりますか。
- スマホのアプリでなければいけない理由は、ありますか。Webサイトや本ではだめですか。
ヒトリキカクが大事にしたこと
正解ではなく、ひとつの例です。あなたのやり方と、くらべてみてください。
- 作る前に、画面の流れを紙に書く。最初は画面3つくらい
- Expoなら、Windowsでも作れて、自分のiPhoneですぐ試せる
- AIには、いまの版の公式の説明を確かめてから作業してもらう
- Expo GoとQRコードで、本物のiPhoneでさわって確かめる
次の章では、アプリにデータの置き場所と広告をつないだときのことを書きます。