初心者向けWebアプリ作成の手順とAI活用プログラミング術
目次
この記事を読むのにおすすめな人
(1).IT就活、資格習得に興味のある人
資格試験などの座学では、概念的な理解に留まりやすく、実務での応用イメージが掴みにくい傾向にあります。実際にアプリケーションを実装し、エラー解決などのプロセスを経ることで、断片的な知識を体系的なスキルとして定着させることができます。
(2).自身のアイディアを形にしたい人
高度なコーディング知識がなくとも、現在は無料のPaaSやフレームワークを活用することでWebアプリの構築が可能です。自身の構想（アイデア）を実際の成果物としてアウトプットし、デプロイまで完遂する経験は大きな資産となります。
(3).所属組織（ゼミ・サークル等）の課題解決ツールを作成したい人
サークルやゼミなどの小規模組織において、既存の有料ツールや外部発注はコスト面で導入障壁が高いです。自身で開発を行えば費用はかからず、また組織特有の活動内容に合わせて機能を自由にカスタマイズできるため、活動効率の向上が見込めます。
プログラミング初心者向け解説
ここからは、アプリを作るときの用語やおすすめの無料生成AIについての解説をしていきます。
(1).開発環境とは
プログラミングにおける開発環境とは、プログラムを作成し実行するために必要なソフトウェアやツール、作成するデバイス等の組み合わせのことを指します。一般的にアプリ開発をする際には、パソコンを使い、開発に使用するツールをダウンロードして使うことが多いです。
今回開発に使用するアプリケーションは、VSCode を使います。
VSCodeは作成したプログラムを動かすために用います。これは無料で利用でき、動作が軽量でありながら多くのプログラミング言語やライブラリ、APIに対応しています。claude 等のaiでは、動かせるプログラムや機能が限られています。そのため、Web上で動かないプログラムはVSCodeで動かす流れになります。
以下比較図
| 項目 | Claude (Artifacts) | VS Code (ローカル環境) |
| 主な用途 | デザイン確認(フロントエンド) reactアプリ作成 | 本格的な開発・運用 (バックエンド処理・API利用可能) |
| ネット接続 | 必要 | 必要なし |
| スマホ等での利用 | Claude内でのみ可 サーバーに公開すれば誰でも可 | プログラムのあるパソコン内で可 サーバーに公開すれば誰でも可 |
| 拡張性 | 低い（制限あり） | 無限大 |
claudeやgemini内でプログラムを作成する場合でも、サーバーに公開すれば、利用するAiに関わらずにプログラムを持っていないスマホ等でも使えるようになります。プログラムをダウンロードし、プログラムを公開するサイトにアップロードすればよく、claude や gemini 上でもプログラムをダウンロードできるため、必ずしもVSCodeを用いなければならないわけではありません。
(2).開発に使用するAI
今回開発に使用するAIは、Gemini と claude を使います。どのようなアプリを作るか、アイディア出しの相談や開発に詰まった時の相談にGeminiを使います。一方で、プログラムを作成する時に claude を使います。他のAIでもプログラミングや相談に応じることは可能ですが、無料版を使えることや性能の良さ、性能のよいモデルの使用制限を考慮しこの組み合わせをおすすめしています。
(3).AIの使い分け
chat GPT や Genimi、claude などの生成AIにはそれぞれ特性があり、それぞれの長所をうまく使い分けることが重要です。
geminiは使用制限はなく、claudeは一日の使用制限があります。
また、claudeはコードを書くのに強く、geminiは論理的な思考に優れている特徴があります。今回は、geminiをアイディア出しや、アプリの設計担当に。claudeをプログラミング担当としておすすめします。
Webアプリ作成の流れ(図解)
Webアプリを作る主な工程は下図1枚目のようになっています。
Webアプリを作る際は、アジャイル開発という手法を用います。特徴としては、Webアプリ開発工程の「開発とテスト」を下図2枚目開発サイクルで自分の作りたいものができるまで繰り返します。
開発とテストを繰り返し実際に作ったアプリを動かす内に、要件定義の際には気づかなかったアプリに付けたい機能に気づくことも多いです。その際に仕様書の要件定義に書き加えます。そのため、作りながらアプリの詳細を決めながら作る形とも言い換えることができます。しかし、新しい機能を追加すると前に動いていた機能がうまく動かなくなることもよくあるため、システムがうまく機能するかをその都度テストで確かめましょう。
Webアプリ作成の流れ(実践編)
今回は、実際にさいころアプリの作成を例にして紹介します。
0. 準備 ～アプリを作るための道具を準備する～
(1).AIのアカウント作成: Gemini , claude (推奨)
Webアプリを開発する際に手助けをしてもらうAIを使用するためにアカウントを作成します。(無料版だけでもアプリ作成可能)
geminiのアカウント作成の方法はこちらhttps://biz.teachme.jp/blog/gemini/#Gemini
claudeのアカウント作成の方法はこちらhttps://app.researchr.work/researchrblog/claude-basicusage
(2).開発環境構築
今回、開発に使用する環境としてVSCode、claude、Geminiを使います。
VScodeを始めて使う方はVSCodeをパソコンにダウンロードし、使えるようにしましょう。VSCodeをダウンロードする際は、お使いのパソコンによってダウンロードするファイルが変わるためGeminiなどのAIに質問しながらダウンロードすることをお勧めします。
1.要件定義 ~何を作るか決める~
いきなりコードを書くのではなく、「どんなアプリを作るか」をAIへの命令文（プロンプト）としてまとめます。どんなアプリを作るかもアイディア出しも併せて教えてくれます。
深く考えず、「こんなアプリが作りたいなあ」という感想を持つことが要件定義のようなものです。ここが次のステップの設計に繋がっていきます。
例:さいころアプリを作りたい（さいころアプリの仕様）:
機能: ボタンを押すと、さいころが転がってランダムな目が出る。
調整: さいころの数を「＋」「－」ボタンで変更できる（例：1個～5個）。
場所: Webブラウザ（Chromeなど）で動く。全世界に公開するアプリを作る。
目的:友達とのチンチロ遊び
AI活用ポイント:
・アイディア出し(Gemini,ChatGPTなど)
2.設計 (AIへの指示書作り) ～AIに伝えるための「指示書」を作る～
設計とは、プログラミングをする前に何をどのように作るのかを定義することです。他のwebサイトでは次のように説明されています。
設計とは、情報システムの開発工程の一つで、実装(プログラミングなど)の直前にプログラムの処理の流れや動作を詳細に定義する工程です。設計には、外部設計、機能設計、基本設計、詳細設計などの複数の項目に分かれています。https://e-words.jp/w/%E5%86%85%E9%83%A8%E8%A8%AD%E8%A8%88.html
一般的な設計は、どのプログラミング言語を使い、使用するライブラリ(プログラムの部品)を使うか等を決めたりと専門的な知識が必要ですが、AIと相談して具体的なアプリを決めることによって自動で作ってくれます。
プロンプトエンジニアリングにおける設計は、通りたいアプリの詳細をAIと相談しながら決めることで、AIに指示を出す「プロンプト」を作成する事とします。
実際に、専門的な知識や具体的な指示が無くても、アプリの外観や使用するライブラリをAIが自動で決めてくれます。AIが決めてくれたものを上記図「4.テスト」の工程でデザインや配置などを確認し、変更点があれば [3.開発] の工程をもう一度繰り返します。
【ここが重要】
作りたいアプリのイメージを言葉にします。ここが曖昧だと、AIも何を作っていいか迷ってしまいます。曖昧なままだとプログラミングの段階でエラーが出てしまったり、作成されたアプリにエラーが出てしまうためここが重要です。
AI活用ポイント:
「プロンプト（指示文）」をAI(ChatGPT,Gemini他)と相談しながら決めていきます。
【AIへの指示プロンプト例】
Webブラウザで動く「さいころアプリ」を作ってください。サークルでのチンチロをするために用います。必要な機能は、サイコロの数を決めれること、ユーザー数を決めれること、ゲーム数を決めれることです。「転がす」ボタンを押すと、アニメーションして1～6のランダムな数字が出る。「＋」「－」ボタンで、同時に転がすさいころの数を変更できる（最大5個）。ユーザー数は最大20人。デザインはシンプルでポップな感じにして。
3.開発 (実装) ～AIにコードを書かせ、組み立てる～
いよいよアプリの作成(プログラミング)です。自分自身でコードを書かずに、AIにコードを出力してもらいます。
何をするの？
設計で作ったプロンプトをclaudeにコピペします。
送信すると、Claude(AI)がプログラムを出力します。ここまででプログラミングの段階は終わりです。
AI活用ポイント:
claudeにgeminiと相談して決めたプログラムのプロンプトをコピペする。
4.テスト (動作確認):
～作ったものが、正しく動くか確認する～
作ったプログラムをチャット欄(場合によってはブラウザ)で開いて確認します。チャット欄やブラウザ以外でも、出力されたコードをVSCodeにコピペして確認する方法もあります。一番手間がかからない方法は、チャット欄でアプリの動作確認なのでできればこちらの方がおすすめです。
何をするの？
実際にアプリを動かして、自分の思うようなアプリに仕上がっているか確認します。
例えば、さいころを動かすアプリだと、さいころが動くアニメーションの有無や、さいころを動かす、止める、もう一度さいころを振る…などのボタンが分かりやすいところにあるか等が挙げられます。
「デザインが崩れている」「動かない」といった問題点を見つけます。
AI活用ポイント:
改善したい所があれば、すぐにAI(claude)へ報告します。
→(2.開発)に戻り、(4.テスト)の段階を改善したいところがなくなるまで繰り返します。「ボタンを押しても反応しないよ」「もっとさいころを大きくして」と伝えると、AIが修正版のコードを出してくれます。これを繰り返して完成させます。
AIにプログラムの相談をする際には、同じチャット欄で相談するのがおすすめです。
5．リリース (デプロイ/公開)
～世界中の人が使えるように公開する～
今のままでは作成者のPCでしか使えません。インターネット上に公開して、スマホや友人のPCからも見られるようにします。公開するアプリに応じて(アプリにAiを内蔵するか等の理由で変わります)公開できるサイトが変わるのでAiに相談するのが良いでしょう。
Aiに相談すると、作成したアプリに応じて最適な公開方法を教えてくれるので相談しましょう。作成したアプリによっては、プログラムがうまく作動できる環境にあらず、公開できるサイトに限りがあるため注意が必要です。
何をするの？
①AIにどの公開サイトを使うのがおすすめか相談します。
②無料のホスティングサービス（VercelやGitHub Pagesなど）に、作ったファイルをアップロードします。
→ファイルはclaudeのファイルよりもVSCodeのファイルがおすすめです。
AI活用ポイント:
「作ったアプリを一番簡単に無料で公開する方法を教えて」と聞けば、手順をステップバイステップで案内してくれます。
6.運用・保守 (改善)
～公開したものを維持、改良する～
アプリの完成・公開が終わった後は基本的に何もしなくてもアプリをいつでも動かせることができます。しかし、「もっとこうしたい」という欲が出てきたら、もう一度設計フェーズに戻り、どこに何を付け加えたいかをAIと相談して決めた上でプログラミングをし…と同じ工程をたどります。
何をするの？
「結果の合計値を表示したい」「転がる音をつけたい」などの機能追加。
AI活用ポイント:
既存のコードのファイルをAIに添付して、「ここに合計を表示する機能を追加して」と頼めば、AIは今のコードを理解した上で、新しい機能を組み込んでくれます。
まとめ
AIを用いるとプログラミングやパソコンについて、知識のない人でも2～3時間あればアイディア出しからアプリ公開まで行うことができました。このことによって、アイディアの実現性が高まったり、日常の活動でもアプリを作成して利便性を高めることができますね。
情報系の資格を勉強中の方は、知識を体系化することができ理解を深めることができるため勉強と並行しながらアプリ作成をするのもおすすめです。
最後まで読んでくださってありがとうございました。