--- title: "AIで10分、アプリは作れた。問題は、その後だった" description: "「AI があればアプリって作れる？」——作れます。10 分で。ただし 10 分でできたのは、ブラウザで動く小さな雛形です。友達に頼まれた文章整形ツールを AI に作ってもらい、公開する前に触っていたら、鍵の置き場所・他人のコード・配った相手の画面の 3 か所で止まりました。AI は注意を書いてくれていた。それでも、公開の判断は作った人に残る、という話。" url: https://ryuuneko.com/blog/ai-app-in-10-minutes-then-what published: 2026-09-12 06:23:34.082302 updated: 2026-09-12 06:23:34.082302 --- 「AI があれば、アプリって作れるの？」 作れます。少なくとも、この記事に出てくるものはできました。10 分かかっていません。 先に範囲を言っておきます。10 分でできたのは**ブラウザで動く小さな雛形**です。ストアに並ぶようなものではないし、AI やツールの性能を保証する話でもありません。そしてこの記事は、公開前によく踏む問題を、一つの小さなツールにまとめて**再現した記録**です。前半のコードは 2026 年 8 月に実際に AI（Claude）へ頼んで返ってきたものをそのまま動かして確認しましたが、後半の 3 つのつまずきは、踏みやすい形に寄せて並べています。 触っているうちに 3 か所で止まりました。どれも AI は注意を書いてくれていた、あるいは AI の仕事の外側にあった。それでも、公開するかどうかは作った人が決めるしかなかった、という話です。 ![作るのは 10 分で終わる。公開する前に触ると、鍵・他人のコード・渡した exe の 3 か所で止まる。直すのはその場所だけ、という全体図](/blog/uploads/ai-app-three-stops.svg) --- ## 頼んだのは、これだけ 友達から「原稿の余計な空行を詰めるツールが欲しい」と頼まれた、という設定です。段落の間に空行が 4 つも 5 つも入っていたり、行末に空白が残っていたりする原稿を、貼るだけで整えたい。 AI に投げた文は、これだけです。 ``` 貼り付けた文の、行末の空白を消して、 連続した空行を 1 つにまとめる小さな Web ツールを作って。 何も知らない前提で、動くところまでやって。 ``` 返事は「Vite + React で作ります」「必要なファイルを作成しました」「http://localhost:5173/ を開いてください」。席を外して戻ってきたら、ブラウザにテキスト欄と「整える」ボタンが表示されていました。 コードは見ていません。一回も。見る場面が無かった、というのが正直なところです。頼んだ段階から動くところまで、一気に進んでしまうので。 原稿を貼って「整える」を押すと、空行が詰まり、行末の空白も消えました。ここまでが 10 分です。 --- ## 小さな寄り道：「直った」けど「直ってない」 結果を眺めていて気づいたのが、行頭の全角スペースです。段落の字下げに使われているやつ。これは残っていました。 「そこも消したほうがきれいじゃない？」と思って、AI に「行頭の空白も消して」と頼みました。 ```js // 変更前 .map((line) => line.replace(/[ \t　]+$/, "")) // 「行頭の空白も消して」のあと .map((line) => line.trim()) ``` 結果はこうです。 ``` 第1章　はじめに 本書は…… ← 段落の字下げも消えた ``` エラーは出ていません。プログラムは頼んだとおり動いています。ただ「行頭の空白」には、余計な空白も、字下げの空白も、両方含まれる。どっちを残すか決めずに頼んだので、両方消えました。 必ずこうなる決まりではありません（モデルによります）。ただ、問題は頼み方の前にあって、**何を残すかを先に決めていなかった**ことです。「段落の字下げは残して、余計な空白だけ消して」と頼み直したら戻りました。直す作業は任せていい。何を直すかは、こっちで決める。ここで分かったのはそれだけで、まだ「止まった」うちには入りません。 --- ## 止まった 1：鍵は .env に入れた。でも、届く先が違った せっかくなので「AI で誤字さがし」というボタンも足しました。本文を AI に書き換えさせるのではなく、怪しい箇所（行・語・理由）だけ返してもらって、直すのは自分でやる形です。毎回ちょっとずつ違う文にされたら困るので、本文には触らせない。ここは自分で決めた設計です。 外の AI へ送るなら API の鍵が要ります。AI に「要る」と言われて、`.env` に入れました。ここまでは順調に見えました。 コードを開いてみたら、AI はこう書いていました。 ```js // .env の VITE_API_KEY を使います。 // VITE_ で始まる変数は、ビルド後のコードに含まれます。 // 公開するときは、鍵をサーバー側で扱ってください。 const apiKey = import.meta.env.VITE_API_KEY; ``` 注意書きは、最初からありました。読んでいなかっただけです。 Vite のドキュメントにも同じことが書いてあります。`VITE_` を付けた変数は、ビルド後のクライアント側コードに露出する（出典 1）。つまりこの形のまま公開すると、鍵はブラウザを開いた人に届く。`.env` は「置いただけで秘密にしてくれる箱」ではなくて、どこへ届く形で使われるかは別の話でした。 ![.env に置いた VITE_ 付きの鍵は、ビルドでブラウザ用の JS に焼き込まれて開いた人全員に届く。サーバー側で扱えばブラウザには渡らない、という 2 本の道の図](/blog/uploads/ai-app-vite-key.svg) 今は自分のパソコンで動かしているだけなので、まだ漏れてはいません。でも、この形のまま公開するのは止めました。直し方は AI の注意書きのとおりで、鍵はブラウザに渡さず、サーバー側で扱う形に変える。「動いたから終わり」と思わずに、この一行に気づけるかどうかだけが分かれ目でした。鍵の置き場所の話は、動画 [「.env に入れた鍵、ブラウザから丸見えだった」](https://youtu.be/bDbrvM23fzc) で 2 人が実物を触りながらやっています。 --- ## 止まった 2：「使ってください」の一文で、どこまで使っていいのか 「ほかにも読んでないの、ありそう」と思って、依存しているものを見ました。 ``` tidy-text / dependencies blankline-utils 空行を詰めるライブラリ src/ README.md 「便利なので使ってください」 package.json LICENSE 見当たらない ``` `blankline-utils`（架空の名前です）は、AI が選んだものではありません。最初は 8 行くらいの自作コードだったのが、たまに空行が残るので、GitHub で見つけたのを「これ使って」と自分で渡しました。 README には「便利なので使ってください」とあります。でも LICENSE ファイルが無い。GitHub のドキュメントによると、ライセンスが無いリポジトリには既定の著作権法が適用され、複製・配布・改変は誰もできない、とされています（出典 2）。README の一文が許可としてどこまで効くのか、少なくともこの一覧からは確認できません。 動いているかどうかと、どこまで使っていいかは、別の話でした。ここも公開前に止めました。選ぶなら条件を確認できるライブラリに替えるか、作者に聞くか。どちらにしても、AI は「これ使って」と言われたものを入れただけで、選んだのはこっちです。 --- ## 止まった 3：友達に渡した exe に、警告が出た ここで友達から「ブラウザで開くの、よく分からない。いつものアプリみたいにできない？」と来ます。 作れる人には一手です。AI に頼めば exe にできる。ただしその前に、さっきの 2 つは**外して**から。鍵を呼ぶところと、あのライブラリ。誤字さがしは動かなくなるけれど、見てもらいたいのは「開けるかどうか」なので構わない。空行の処理は元の 8 行に戻しました。 直すのではなく外す、にしたのは、直し方はそれぞれ別の作業だからです。今は減らすだけ。減らす分には誰にも迷惑がかかりません。 ``` npm run build && npx electron-builder --win （AI: Electron の起動ファイルとビルド設定を、先に追加しました） • building file=dist/tidy-text Setup 0.1.0.exe • completed ``` 包む道具の設定も AI が先に足していました。道具は、そろった物をまとめるだけ。作るところは本当に止まりません。で、送りました。 返事です。 > 「PC が保護されました」って出た > これ開いて大丈夫？ > ［Windows によって PC が保護されました］［実行しない］ 変なものは入れていません。それでも出ます。 この画面（SmartScreen）は、Microsoft の説明では 2 つの一覧に当てています。危険と報告されたプログラムの一覧と、よく知られていて頻繁にダウンロードされているファイルの一覧。後者に無ければ「注意」の警告を出す（出典 3）。だから、この画面が出ただけで「危険なファイルだと確定した」わけではありません。 でも、友達から見たら「危険って言われた」ようにしか見えない。配る側は、この画面のことを知っていて、相手に説明できる状態で渡す必要がある。中身の良し悪しと、この画面が出ることは、別の軸です。ここは AI の仕事の外側で、AI に頼んでも解決しない。渡す側が知っているかどうかだけです。 --- ## 数えたら 3 つ | 場面 | 画面で分かったこと | 誰の判断か | |---|---|---| | AI の鍵 | `VITE_` 付きの値は、この形で公開するとブラウザ側へ入る | AI は注意を書いていた。読むのはこっち | | 他人のコード | README の一文だけでは、改変・再配布まで含む条件を確認できない | 選んだのはこっち | | 友達へ渡した exe | SmartScreen は危険情報と認知度を確認する。この画面だけで危険確定とは言えない | AI の仕事の外側。知っているかどうか | 3 つとも、AI が間違えたわけではありません。AI は頼まれた作業を進め、注意も書いていた。それでも**公開の判断は、作った人に残ります**。何を入れて、どこへ届く形になったか。そこを知らないまま出すと、AI がどれだけ丁寧でも踏みます。逆に言えば、見る場所を知ってさえいれば、作る作業は任せていい。 --- ## 作り直しはしない 3 つも止まったなら作り直し、とはなりません。 - 鍵は、ブラウザへ渡さない形に変える - ライブラリは、条件を確認できるものへ替える - 警告は、意味を説明できるようにしてから渡す 問題が見つかった場所だけ直せばいい。動いたところまで捨てなくていい。10 分で作れたのは無駄どころか、作れたから次の問題まで来られた。作れたから、踏めた。 次に AI に頼むときは、注意書きから読みます。たぶんそれが一番早い。 --- ※ 前半のコードは 2026 年 8 月時点の AI（Claude）の出力をもとにしています。AI の応答はモデルによって変わるので、「行頭の空白を消して」で字下げまで消えるのは、あくまでこのとき起きた 1 例です。3 つのつまずきは踏みやすい形の再現で、ライブラリ名や友達とのやり取りは架空です。そのまま公開すると踏むので、この記事自体が注意書きです。道具（Vite 7.1、electron-builder 26.0）の表示も同時点のものです。 ## 動画版 同じ題材を、YouTube「黒猫開発部」では 2 人の会話で 6 分にまとめています。この記事は止まった 3 か所の中身を文章で立ち止まって読む向け、動画は「作れたあとに何が起きるか」を先に体感する向けです。どちらから入っても構いません。 - [AIで10分、アプリは作れた。問題は、その後だった。（黒猫開発部）](https://youtu.be/do96Uw5fMg4) - [チャンネル: 黒猫開発部](https://www.youtube.com/@黒猫開発部) ## 出典 1. [Vite — Env Variables and Modes](https://vite.dev/guide/env-and-mode.html) — "Variables prefixed with `VITE_` will be exposed in client-side source code after Vite bundling." 2. [GitHub Docs — Licensing a repository](https://docs.github.com/en/repositories/managing-your-repositorys-settings-and-features/customizing-your-repository/licensing-a-repository) — "without a license, the default copyright laws apply, meaning that you retain all rights to your source code and no one may reproduce, distribute, or create derivative works from your work." 3. [Microsoft Learn — Microsoft Defender SmartScreen](https://learn.microsoft.com/en-us/windows/security/operating-system-security/virus-and-threat-protection/microsoft-defender-smartscreen/) — "Checking downloaded files against a list of reported malicious software sites and programs known to be unsafe." / "Checking downloaded files against a list of files that are well known and downloaded frequently. If the file isn't on that list, Microsoft Defender SmartScreen shows a warning, advising caution."