チュートリアル：AI エージェントでアプリを構築する

ページを編集

AI コーディングエージェントに指示を出しながら、Android、iOS、web で動く Expo アプリを構築するチュートリアルの紹介です。プログラミング経験は必要ありません。

このチュートリアルでは、自分でコードを書くことなく、Android、iOS、web で動く完全なアプリを 1 つ作り上げます。代わりに、Claude Code や Codex、Cursor といった AI コーディングエージェントに指示を出し、各ステップの結果をその都度自分のスマートフォンで確認します。

このチュートリアルは、ビルダー（アプリのアイデアはあるけれど、プログラミングの知識はない人）のためのものです。自分でコードを書きながら学びたい場合は、代わりに Expo チュートリアルに従ってください。同じアプリを、コードスニペットを 1 つずつ書きながら作っていきます。

作るもの

StickerSmash というアプリを作ります。写真を選んで絵文字ステッカーを重ね、指でステッカーを動かしたり大きさを変えたりして、その結果を写真ライブラリに保存できるアプリです。

このチュートリアルの進め方

各章は、同じループを繰り返します。

プロンプト: 提案されたプロンプトを AI エージェントに貼り付けます。
ビルド: エージェントがコードを書き、数秒のうちにスマートフォン上のアプリが更新されます。
確認: アプリが指示どおりに動いているか、スマートフォンで実際に確認します。
再指示: 何かおかしいと感じたら、見えているものをエージェントに伝えて修正してもらいます。

あなたはプロダクトオーナーであり、テスターです。プログラマーはエージェントです。

AI エージェントは実行するたびに同じ結果を返すとは限らないため、あなたのアプリがこのチュートリアルのスクリーンショットとピクセル単位で一致することはありません。それは想定の範囲内です。プロンプトは求める結果を説明したものであり、スクリーンショットはおおよそこう見えるはずという目安です。プロンプトは自由に書き換えてかまいません。色を変えたり、ボタンの文言を変えたり、自分好みにアレンジしてみましょう。

プロンプトの日本語訳について各章のプロンプトは日本語に翻訳してあります。アプリに表示される文字列（"Home screen" など）は英語のままにしているので、そのまま貼り付ければスクリーンショットと同じ結果になります。英語の原文を確認したいときは、各プロンプトの下にある「英語の原文プロンプト」を開いてください。

必要なもの

macOS、Windows、Linux のいずれかで動くコンピュータ
Android または iOS のスマートフォン
約 1 時間。第 1 章でゼロからすべてのツールをインストールする手順を説明するので、事前に用意しておくものはありません

章の一覧

次のステップ

ツールを準備する

AI エージェントと Node.js、Expo Go をインストールし、エージェントに Expo について教えます。