「自分にも作れた！」を30分で体験。ChatGPTではじめる初めてのアプリ開発

自分専用のツールを自作して動かす体験をしてもらいたい！

ChatGPTに質問したり、文章を作ってもらったりしたことはある。

でも、AIに作ってもらった「自分専用のアプリ」を、実際に自分のパソコンで動かしたことはありますか？

「アプリなんてエンジニアが作るものでしょ？」

少し前までは確かにそうでした。

ただ、生成AIが出てきてから状況は一変しています。

実際に、完全な非エンジニアである私が、20以上のwebアプリ、30以上のPCアプリ、70以上の拡張機能を自作して日常的に使っています。

決して、私が特別だからではありません。

本当に「誰でも」できます。

それを伝えたいという目的で作成した本教材は、「自分でもアプリ開発ができた！」という体験をしてもらうことに特化した内容となっています。

自分が欲しい機能をチャットで日本語で伝える。

AIから必要なファイルを受け取る。

普段使っているブラウザへ読み込む。

そして、自分専用の機能が本当に動くところまで体験する。

読むだけで終わる教材ではなく、体験として実際に一つのアプリを開発します。

作るアプリは、Webページで選択した文章を、ページタイトル・URL・参照日と一緒にコピーするという小さなブラウザ拡張機能です。

派手なものではありません。

だからこそ、最初の一本に向いています。

完成後は、見た目やコピー形式を自分向けに変更します。もし動かなければ、表示されたエラーをAIへ渡して一緒に直します。

繰り返しますが、この教材の目標は、コードを理解することではありません。

AIと一緒に、自分用の道具を作って動かす一連の流れを、自分自身で一度経験すること。

まずは、この体験を一度やってみることです。

最初の自作アプリ一本が動けば、次は自分の仕事や日常に合った小さなアプリを考えられるようになります。

1. この教材で作るもの

前セクションでも少し触れましたが、改めてこの教材で作るものの紹介をしておきます。

体験することがゴールなのでどんな拡張機能でも良かったのですが、どうせ作るなら日常的に便利なツールが良いと思って考えました。

ズバリ、「出典つきコピー拡張機能」です。

Webで情報を調べていて、参考になる文章を見つけたとします。

普通に文章だけをコピーすると、後になってから次のようなことが起こります。

• どのページに書いてあったか分からない
• メールで共有するため、もう一度URLを探す
• 資料へ載せるとき、ページタイトルを調べ直す
• メモだけが残り、情報源を確認できない

今回作るブラウザ拡張機能では、Webページの文章を選択してボタンを押すだけで、次の形に整えてコピーできます。

生成AIの活用により、定型業務の効率化が期待されています。

出典：〇〇株式会社「生成AI活用について」
https://example.com/article
参照日：2026年8月26日

使い道は、特別な仕事に限りません。

• 調べた情報を同僚へメールする
• 社内チャットで参考記事を共有する
• 報告書の参考情報を残す
• 会議資料で使った情報源を記録する
• 後で読み返すためにメモへ保存する

派手な機能ではありません。

しかし、「ブラウザにあったら少し便利」が分かりやすく、自分で使って効果を確認できます。初めてAIと一緒に作る題材として、このくらいの小ささがちょうどいいのです。

2. なぜ、今ブラウザ拡張機能なのか

今のAIは、パソコン用のアプリやスマホアプリ、さらにはゲームまで作れるようになっています。

そう聞くと、「今さらブラウザ拡張機能？」と思う人もいるかもしれません。正直に言えば、僕自身にもその感覚はあります。

そもそもブラウザ拡張機能とは、Google ChromeやEdgeなどのブラウザに便利な機能を追加できる「後づけのオプション」のようなものです。

それでも、AIと一緒に作る最初の一本としてブラウザ拡張機能をすすめる理由は、作ったものを自分の環境で動かすまでの距離が短いからです。

今回使うファイルは、基本的に次の4つだけです。

manifest.json
popup.html
popup.css
popup.js

ファイル名の意味を覚える必要はありません。

ChatGPTにまとめて作ってもらい、フォルダをブラウザの拡張機能画面から読み込めば動きます。最初の一本を作る段階では、Pythonのインストールも、ターミナルでの命令入力も行いません。

日本語でお願いする。

ファイルを受け取る。

ブラウザに読み込む。

自分が考えた機能が動く。

この成功体験までを、できるだけ余計な準備なしで進められます。

3. 普通のChatGPTでも作れる

このような拡張機能は、パソコン内のファイルを直接作成・修正できるAIエージェントを使うと、さらに楽に作れます。

「AIエージェントなんて使ったことない」という方、安心してください。

本教材では、ブラウザで使う通常のChatGPTを前提にします。

違いを大まかに言うと、次のとおりです。

ブラウザ版では、受け取ったZIPファイルをダウンロードして展開する手間があります。修正するときは、新しいファイルを受け取って入れ替えます。

AIエージェントなら、この受け渡しを減らせます。

ただ、今回のような数ファイルの小さなツールなら、普通のChatGPTでも十分です。僕自身、簡単なものは今でもブラウザ版のChatGPTで作ることがあります。AIエージェントの利用枠を使うほどでもない、と判断することがあるからです。

一度ブラウザ版でファイルを受け渡してみると、後からAIエージェントを使ったときに、何が楽になったのかもよく分かります。

4. 本教材で体験すること

購入後は、次の順番で進めます。

1. 完成イメージをAIへ伝える
2. 必要なファイル一式を作ってもらう
3. Chromeへ拡張機能を読み込む
4. Webページで文章を選び、出典つきでコピーする
5. 見た目とコピー形式を変更する
6. 動かないときのエラーを確認する
7. エラーをAIへ正確に伝えて修正する

完成ファイル一式も付けています。

ChatGPTの出力がうまくいかなかった場合は、完成見本を読み込めば動作を確認できます。ただし、最初はぜひ自分でChatGPTへ依頼してみてください。

AIが毎回まったく同じコードを出すとは限りません。それでも、目的を満たすものを作り、動かなければ状況を伝えて直す。この往復そのものが、AIと作る体験になります。

5. 必要なもの

• パソコン
• Google ChromeまたはMicrosoft Edge
• ChatGPTなど、ファイルやコードを作成できる生成AI
• ダウンロードしたZIPファイルを展開する操作
• 30〜60分程度の時間

WindowsでもMacでも進められます。ただ、画面の表示やフォルダの見え方は少し異なります。

スマートフォン版ChromeやEdgeだけでは、本教材の方法で拡張機能を読み込めません。必ずパソコンで進めてください。

また、会社支給のパソコンでは、管理者によって拡張機能の追加やデベロッパーモードが禁止されている場合があります。その場合は、許可なく制限を解除せず、個人所有のパソコンで試してください。

6. この教材が向いている人

• ChatGPTは使ったことがあるが、何かを作った経験はない
• バイブコーディングに興味はあるが、何から始めるか迷っている
• Pythonやコマンドプロンプト、ターミナルという言葉が出てくると不安になる
• 仕事や日常で使える小さな道具を作ってみたい
• エラーが出たときのAIへの相談方法も知りたい

7. 向いていない人

• Chrome拡張機能の公開・販売方法まで学びたい
• JavaScriptを基礎から体系的に学びたい
• 外部APIや生成AIを組み込んだ高度な拡張機能を作りたい
• スマートフォンだけで進めたい
• 会社の制限を回避して拡張機能を導入したい

本教材では、Chromeウェブストアへの公開は行いません。自分のパソコンへ学習用の拡張機能を読み込み、使うところまでを扱います。

8. 購入前に知っておいてほしいこと

• ChromeやChatGPTの画面は更新されるため、教材の画像と表示が少し異なる場合があります
• AIの回答は毎回同一ではありません
• Webサイトの構造やChromeの制限により、一部のページでは文章を取得できません
• 本教材の完成見本には、選択した文章を外部サーバーへ送信する処理を入れていません
• 他者の文章を利用するときは、著作権、引用ルール、勤務先の規程を確認してください
• 社外秘、個人情報、顧客情報をAIへ入力しないでください

この先では、実際にChatGPTへ依頼し、Chrome（またはEdge）で動かします。

読むだけでなく、パソコンを開いて一緒に進めてください。