プログラミング未経験から始めるAI開発｜環境構築・アプリ作成・公開の学習手順

AI・プログラミング 藤原圭吾

「アプリを作りたいけれど、何から勉強すればよいか分からない」「AIがコードを書くなら、初心者は何を身につければよいのか」。AIを使った開発に興味があっても、最初の進め方に迷うことがあります。

未経験から取り組むなら、小さな機能を作り、動作を確かめ、コードの一部を自分で変更するところから始めましょう。この記事では、AIを開発の補助に使いながら、環境準備からアプリの公開まで進める学習手順を紹介します。

目次

１．AIを使った開発で、初心者が学ぶこと

AIを使った開発では、自然言語で要望を伝え、コードの生成、説明、修正案の作成などを支援してもらえます。ツールによっては、ファイルの編集やコマンドの実行まで行う機能もあります。

ただし、AIが作成したコードが、意図したとおりに動くとは限りません。何を作るかを決め、実際の結果を確認し、採用する変更を判断することが必要です。

また、AIにコード作成を手伝ってもらうことと、完成したアプリにAI機能を組み込むことは別です。最初の作品は、AIのAPIやデータベースを使わない、ブラウザ内で動くアプリでも構いません。

開発の場面AIに依頼できること自分で確認すること
設計機能の整理、画面構成の提案誰が何をするアプリなのか
実装コードの作成・修正案変更箇所と、処理の役割
不具合の調査原因の候補、確認方法の提案実際に再現するか、修正後に直るか
公開設定手順やログの説明公開する内容、動作、費用、情報管理

文法をすべて暗記してから始める必要はありませんが、基本を学ばなくてよいわけでもありません。作成したアプリを題材に、変数、条件分岐、関数、データの持ち方を一つずつ確認していきます。

２．最初の作品は、完成条件が分かる小さなアプリにする

最初からログイン、決済、チャット、ランキングなどを組み合わせると、確認すべき範囲が広がります。まずは、一つの画面で主要な操作を試せる題材を選びましょう。

この記事では、学習用の「３問クイズアプリ」を例にします。問題と選択肢を表示し、回答後に正誤を示し、最後に正解数を表示する構成です。

項目最初に作る仕様
問題数３問。問題文・選択肢・正解はコード内に用意する
回答方法各問で３つの選択肢から一つを選ぶ
判定回答後に正解・不正解と短い解説を表示する
連続操作同じ問題では、回答後に再回答できないようにする
終了時３問中の正解数と、やり直すボタンを表示する
保存初版では保存せず、再読み込みすると最初に戻る

完成条件を決めると、AIへの依頼と動作確認の基準がそろいます。「便利なクイズアプリを作って」だけでなく、回答後や終了時の動作まで具体的にしましょう。

問題と正解をブラウザへ配信する構成では、利用者がコードから正解を確認できます。ここで扱うものは練習用であり、成績評価や不正防止が必要な試験システムとは分けて考えてください。

💡 あわせて読みたい関連記事

回答後や終了時の動きが整理できないときは、処理の順序と分岐を書き出してみましょう。フローチャートによる整理方法を紹介しています。

フローチャート設計入門：動きと流れを可視化し、条件分岐を整理する方法 記事を読む →

３．開発環境は、今回の作品に必要なものから準備する

今回のクイズアプリは、HTML・CSS・JavaScriptで作る構成にします。外部ライブラリやビルド処理を使わない形なら、最初からNode.jsやデータベースを導入する必要はありません。

用意するのは、コードを編集するエディター、動作を確認するブラウザ、開発を相談するAIツールです。AIチャットとエディターを併用する方法でも、AI機能を備えたエディターを使う方法でも始められます。

エディターを選ぶときの確認点

Cursorなどを使う場合は、公式サイトから入手し、公式の案内に沿って初期設定を行います。ログイン方法、使えるモデル、利用上限、料金は変わるため、過去の記事にあるモデル名や画面だけを基準にしないでください。

選ぶ際は、変更差分を確認しやすいか、AIが扱うファイルや実行する操作を把握できるかも見ておきましょう。AIがプロジェクト全体を常に漏れなく理解しているとは限らないため、対象ファイルと目的を明示することも必要です。

フォルダーと３つのファイルを用意する

作業用に「quiz-app」などのフォルダーを作り、エディターで開きます。今回の例では、次の３ファイルに役割を分けます。

ファイル役割確認する内容
index.html画面の構造問題文、選択肢、結果を表示する場所
style.css見た目文字の大きさ、余白、ボタンの配置
script.js操作と判定回答の受付、正誤判定、次の問題への切り替え

この構成で外部通信やモジュール読み込みを使わなければ、index.htmlをブラウザで開いて基本動作を試せます。機能を追加してローカルサーバーが必要になった場合は、その段階で起動方法を学びましょう。

４．AIには、一度に作る範囲と確認方法を伝える

最初は１問だけ表示し、回答と判定を確認します。それが動いたら、３問への拡張、正解数の集計、やり直し機能を順番に追加しましょう。

例えば、最初の依頼は次のように書けます。使用する問題文と正解は、教材や信頼できる資料で確認したものを渡してください。

プログラミング初心者向けに、クイズアプリを作ります。
今回は「１問を表示して回答を判定する」ところまで実装してください。

【構成】
・HTML、CSS、JavaScriptを使う
・index.html、style.css、script.jsに分ける
・外部ライブラリ、外部API、データベースは使わない
・index.htmlをブラウザで直接開いて動作する構成にする

【動作】
・問題文と３つの選択肢を表示する
・選択肢はbutton要素にする
・回答後に正解・不正解と解説を表示する
・一度回答したら、その問題の選択肢を押せないようにする
・再読み込みすると初期状態に戻る

【問題データ】
問題文：
選択肢：
正解：
解説：
※ここに確認済みの内容を記入する

【回答してほしい内容】
・各ファイルのコード
・保存する場所と実行方法
・正誤判定を行う部分の説明
・動作確認の項目
・未実行の場合は、その旨を明記する

コードを受け取ったら、指定されたファイルへ保存し、ブラウザで確認します。チャットに表示されたMarkdownの囲み記号まで、ファイルの中へ貼り付けないようにしてください。

追加依頼では、「正しく動いている部分」と「今回変える部分」を伝えます。例えば「１問の判定は動作確認済みです。次に３問へ増やし、回答後に次へ進む機能を追加してください」と範囲を絞ります。

５．動いた後に、コードを読み、自分で一部を変える

画面が動いたら、問題データがどこにあり、ボタンを押すとどの関数が呼ばれ、結果がどこへ表示されるかを確認します。すべての行を一度に覚えようとせず、操作から結果までのつながりを追いましょう。

AIには「このコードを説明して」だけでなく、「回答ボタンを押してから正誤が表示されるまでに使われる部分を示して」と、確認したい範囲を指定します。説明と実際のコードが一致するかも見てください。

学ぶ内容クイズアプリで確認する場所試す変更
変数現在の問題番号、正解数初期値や更新するタイミングを確認する
配列・オブジェクト問題文・選択肢・正解のデータ問題を１問追加する
条件分岐正解かどうかの判定正解・不正解の表示文を変える
関数問題表示、回答判定、初期化各関数の役割を説明する
イベントボタン操作に反応する処理どの操作で処理が実行されるか確かめる

変更するときは、先に「こう変えると、こう動くはず」と予想します。その後に実行し、違っていたら原因を調べましょう。この確認を繰り返すことで、自分が理解できている範囲も分かります。

６．エラーは、状況を整理して一つずつ調べる

エラーが出たら、直前に行った操作、期待した結果、実際の結果を記録します。ブラウザの開発者ツールでは、Consoleでエラーを、Networkでファイルや通信の読み込み状況を確認できます。

AIに相談する場合も、エラー文だけでは情報が不足することがあります。秘密情報や個人情報が含まれていないか確認したうえで、関連コードと再現手順を添えてください。

次の不具合を調べてください。

【期待する動作】
回答後、「次へ」を押すと２問目が表示される。

【実際の動作】
ボタンを押しても１問目のままになる。

【再現手順】<> 1. ページを開く
2. 選択肢を一つ押す
3. 「次へ」を押す

【エラーメッセージ】
確認した内容を記載。表示がなければ「表示なし」と記載。

【関連コード】
該当するHTMLとJavaScriptを記載。

まず原因の候補と確認方法を示してください。
修正する場合は、変更箇所と理由を説明してください。

修正後は、不具合が起きた操作をもう一度試します。さらに、最初の問題、最後の問題、やり直しなど、関連する動作が壊れていないかも確認しましょう。

npmのエラーが出たら、削除より先に原因を確認する

今回の構成ではnpmは不要ですが、後からフレームワークを使う場合は、依存関係の導入が必要になることがあります。インストールの失敗は、バージョンの競合だけでなく、通信、権限、実行環境などでも起こります。

エラー内容と、Node.js・npmのバージョン、プロジェクトの手順を確認してください。package-lock.jsonは依存関係の再現に使う情報を含むため、原因が分からないまま削除する方法を最初の対処にしないようにしましょう。

７．完成した機能を、仕様に沿って確認する

AIが「完成しました」と返したことと、自分の環境で正しく動いたことは別です。今回のクイズアプリなら、次のように操作と期待する結果を対応させて確認します。

確認する操作期待する結果
最初にページを開く１問目が表示され、正解数が０になる
正解を選ぶ正解と表示され、正解数が１増える
不正解を選ぶ不正解と解説が表示され、正解数は増えない
回答後に選択肢を押す再回答や重複加算が起きない
３問すべてに回答する最終結果が表示され、４問目へ進もうとしない
やり直す問題番号・正解数・ボタンの状態が初期化される
狭い画面で操作する問題文や選択肢が読め、ボタンを押せる

AIにテスト項目を提案してもらう場合も、その内容が仕様に合っているかを確認します。同じ操作を繰り返す、途中で再読み込みするなど、想定される使い方を追加してみてください。

💡 あわせて読みたい関連記事

AIが作ったコードやテストを、どのように確かめればよいのでしょうか。仕様・変更差分・期待する結果を確認する手順を紹介しています。

AI生成コードのレビュー方法｜仕様・テスト・保守性を確認する実践手順 記事を読む →

８．Gitで変更を記録し、GitHubでコードを管理する

機能が動いた段階で、変更履歴を残しましょう。Gitはコードなどの変更を管理する仕組みで、GitHubはGitのリポジトリを保管・共有できるサービスです。

ファイルを保存すること、Gitにコミットすること、GitHubへプッシュすることは、それぞれ異なります。最初はエディターのソース管理画面やGUIツールを使い、変更差分を確認しながら操作しても構いません。

操作意味
保存編集内容をファイルへ書き込む
コミット選んだ変更を、説明とともに履歴へ記録する
プッシュローカルのコミットをGitHubなどのリモートへ送る

「１問の判定を追加」「３問の結果表示を追加」のように、目的が分かる単位で記録します。AIの編集前後も差分を確認し、関係のないファイル変更が混ざっていないかを見てください。

公開するファイルに、秘密情報を含めない

APIキーやパスワード、実在する利用者の個人情報は、公開するコードに含めません。.gitignoreは追跡対象から除外するための設定ですが、すでにコミットした情報を履歴から消すものではありません。

秘密のキーを公開してしまった場合は、まず失効や再発行を行い、その後に履歴などへの対応を確認します。また、.envファイルと環境変数は同じものではなく、値を読み込む方法は実行環境によって異なります。

フロントエンド向けの環境変数は、ビルド時に配信コードへ埋め込まれる場合があります。「環境変数に入れたから秘密」とは考えず、ブラウザへ渡される値かどうかを確認してください。

９．静的サイトとして公開し、公開URLで再確認する

今回のクイズアプリは、HTML・CSS・JavaScriptを配信できる静的ホスティングで公開できます。ここではGitHub Pagesを例にします。公開用リポジトリへ、index.htmlと関連ファイルを保存しておきましょう。

  1. リポジトリの「Settings」から「Pages」を開きます。
  2. 「Build and deployment」の「Source」で「Deploy from a branch」を選びます。
  3. 公開するブランチと、ファイルを置いたフォルダーを選んで保存します。
  4. 公開処理の結果を確認し、表示されたURLを開きます。
  5. 手元で行った動作確認を、公開URLでも繰り返します。

公開用リポジトリと配信ファイルには、見られて困る情報を含めないでください。独自ドメインは必須ではなく、最初はサービスから提供されるURLで確認できます。

コードを更新した場合、設定したブランチやフォルダーへの変更が公開処理の対象になります。自動デプロイを設定しても、テストが自動で追加されるわけではありません。どの確認を行ってから公開するかも決めておきましょう。

ログイン、サーバー側のAI API呼び出し、共有データベースなどを追加する場合は、必要な実行環境が変わります。作る機能に合わせて公開先を選び直し、料金や権限、データの保存方法を確認してください。

💡 あわせて読みたい関連記事

公開先の選び方や、独自ドメイン・DNS・HTTPSの役割を詳しく知りたい方へ。公開後に動かない場合の確認順も整理しています。

Webアプリのデプロイ手順｜公開先・独自ドメイン・DNS・HTTPSの基本 記事を読む →

10．AIを使ったプログラミング学習のよくある質問

AIがあれば、文法の勉強は不要ですか？

不要にはなりません。生成されたコードの動作を確認したり、自分で変更したりするために、変数・条件分岐・関数などの基礎が役立ちます。作成中の機能と結び付けて、必要な内容を学んでいきましょう。

最初から有料のAIツールを契約する必要はありますか？

必須ではありません。まず利用できる環境で、小さな機能の生成・説明・修正を試してください。利用上限、編集機能、データの扱いなどを確認し、自分の用途に必要な機能が分かってから検討できます。

どのAIモデルが初心者に向いていますか？

モデル名だけで決めず、同じ小さな課題で、動作するか、説明を理解できるか、不要な変更が少ないかを確認しましょう。修正にかかる時間や料金も含めて、自分の学習に合うものを選びます。

何日でアプリを作れるようになりますか？

作る機能、学習時間、パソコン操作の経験などで変わります。日数だけを目標にするより、「１問の判定」「３問の集計」「公開URLでの確認」のように、確認できる到達点を置くと進捗を把握しやすくなります。

11．「作る・確かめる・説明する」を繰り返す

最初の目標は、大きなアプリを自動生成することではなく、小さな機能を作り、その動作を説明できるようになることです。問題を追加する、表示を変える、不具合を修正する、といった変更を通して理解を確かめましょう。

AIを活用するときも、期待する動作を決め、結果を確認し、変更履歴を残す流れが大切です。まず一つの作品を公開まで進め、その過程で分からなかったことを次の学習課題にしてください。

参考資料

関連記事

運営者

藤原圭吾

教育・プログラミング・情報Ⅰ・AI活用などを中心に、実際に学び・試した内容をこのサイトに整理しています。

詳しいプロフィール

ここにあるのは整理した記事です。考えている途中や、現場で感じたことは note に書いています。

note を読む
Learning Tools

記事を検索したい方はここから！

記事を検索

関連記事や、今の内容に近いテーマをすぐに検索できます。

例: AI / 情報Ⅰ / Python / 統計 / 資格 / 学習法

辞書から探す

本文中で気になった概念やキーワードを、辞書ページで一覧から確認できます。

辞書を見る

この記事のタグ

#AI #デプロイ #プログラミング初心者 #初心者入門 #自動開発