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