AI開発とは？

AI開発とは、ChatGPTやClaudeなどのAIを使いながら、Webサイト・Webアプリ・業務ツールなどを作っていく開発方法です。

以前は、Webサービスを作るためにプログラミング言語やフレームワークを長期間勉強してから開発を始めるのが一般的でした。

現在はAIに日本語で相談しながら、コードの作成、エラー調査、設計、テストなどを進めることができます。

作りたいものを考える
↓
AIに相談する
↓
AIがコードを作る
↓
動かして確認する
↓
エラーをAIと調べる
↓
修正する
↓
公開する

ただし、AIに「全部作って」と任せるだけで安全なサービスが完成するわけではありません。

AIと一緒に開発するための最低限の仕組みを理解することが重要です。

AI開発とは？

AI開発では、人が自然な言葉でやりたいことを伝え、AIにコードや実装方法を提案してもらいながら開発を進めます。

たとえば、

お問い合わせフォームを作ってください。

条件:
・名前
・メールアドレス
・問い合わせ内容
・送信ボタン
・スマートフォン対応

と伝えると、AIが必要なコードや構成を提案できます。

さらに、エラーが出た場合も、

このエラーの原因を調べてください。

まだコードは変更せず、
まず原因と修正候補を説明してください。

エラー:
［エラー内容］

のように相談しながら進められます。

プログラミング未経験でも開発できる？

小さなWebサイトや簡単なツールであれば、プログラミング未経験でもAIを使って作り始めることはできます。

ただし、何も理解しなくてよいという意味ではありません。

最低限、次のような言葉や仕組みを理解していくと、AI開発を進めやすくなります。

• ファイル
• フォルダ
• HTML
• CSS
• JavaScript
• フロントエンド
• バックエンド
• データベース
• Git
• GitHub
• 環境変数
• デプロイ

最初からすべて覚える必要はありません。

実際に作りながら、必要になった知識を1つずつ理解していけば十分です。

AI開発で人がやること

AIがコードを書けるようになっても、人の仕事がなくなるわけではありません。

むしろ、人が何を決めるかが重要になります。

人

何を作るか決める
↓
要件を伝える
↓
AIの提案を確認する
↓
動作を確認する
↓
最終判断する

AI

コードを作る
↓
調査する
↓
修正案を出す
↓
テストを補助する
↓
説明する

AIは作業を高速化できますが、目的や優先順位まで自動で正しく決めてくれるわけではありません。

AIに開発を頼むときの基本

AIへ開発を頼むときは、「作って」だけではなく、目的や条件を伝えます。

目的:
問い合わせフォームを作る

必要な項目:
・名前
・メール
・問い合わせ内容

条件:
・スマートフォン対応
・入力チェックを入れる
・既存デザインを変えない

まず現在のコードを確認し、
変更が必要なファイルを報告してください。

まだ実装しないでください。

このように、最初からコードを書かせず「まず調査して」と伝えることも重要です。

Webサービスは何でできている？

Webサービスを作るときは、大きく分けるといくつかの役割があります。

ユーザー
↓
画面
↓
フロントエンド
↓
バックエンド
↓
データベース

たとえば会員登録できるサービスなら、

• 入力フォームを表示する
• 入力された情報を受け取る
• データを保存する
• ログイン状態を確認する
• 保存した情報を画面へ表示する

といった複数の処理があります。

AIに開発してもらう場合でも、この全体像を少し理解しているだけで指示しやすくなります。

フロントエンドとは？

フロントエンドは、ユーザーが直接見る部分です。

• 文字
• 画像
• ボタン
• メニュー
• 入力フォーム
• ページのレイアウト

などが含まれます。

基本的なWebページでは、HTML・CSS・JavaScriptなどが使われます。

HTML
ページの構造

CSS
見た目・デザイン

JavaScript
動き・処理

バックエンドとは？

バックエンドは、ユーザーから直接見えにくい裏側の処理です。

• ログイン処理
• データ保存
• メール送信
• 支払い処理
• APIとの通信
• 権限チェック

などを担当します。

見た目だけのWebサイトから、本格的なWebアプリへ進むとバックエンドの理解も必要になります。

データベースとは？

データベースは、Webサービスで使う情報を保存する場所です。

たとえば予約サービスなら、

• ユーザー情報
• 予約日時
• 予約内容
• 注文履歴

などを保存します。

フォーム入力
↓
バックエンド
↓
データベースへ保存
↓
必要なときに取得
↓
画面へ表示

OmochiX Learnでは、後ほどNeonを例にデータベースの基本も学びます。

Neonの基本を見る →

GitとGitHubはなぜ必要？

AI開発では、AIが複数のファイルを変更することがあります。

そこで重要になるのがGitとGitHubです。

コードを変更
↓
変更内容を確認
↓
Commit
↓
GitHubへ保存
↓
必要なら元に戻す

AIが予想外の変更をしても、Gitで変更履歴を管理していれば状況を確認しやすくなります。

GitHubの基本を見る →

デプロイとは？

自分のパソコン上で作ったWebサイトやアプリを、インターネットから見られる状態にすることをデプロイと呼びます。

自分のパソコンで開発
↓
GitHubへ保存
↓
Vercelなどへデプロイ
↓
URLが発行される
↓
インターネットで公開

OmochiX Learnでは、Vercelを使った公開方法も学べます。

Vercelの基本を見る →

環境変数とは？

開発を始めると、APIキーやデータベース接続情報などを扱うことがあります。

こうした秘密情報をコードへ直接書かず、環境変数として管理する方法があります。

コード

API_KEY="秘密情報"

ではなく

環境変数
↓
コードから読み込む

AIが書いたコードは必ず正しい？

AIが生成したコードは、必ず正しいわけではありません。

• コードが動かない
• 既存機能を壊す
• 不要な変更をする
• 古い書き方を使う
• セキュリティ上の問題を作る
• 指示と違う実装をする

ことがあります。

そのため、AI開発では「生成されたコードを確認する工程」が重要です。

変更前と変更後を確認する

AIにコード変更を任せる場合は、何が変わったのか確認します。

変更前
↓
AIが実装
↓
変更ファイルを確認
↓
差分を確認
↓
テスト
↓
問題なければCommit

Gitを使っている場合は、たとえば次のコマンドで変更状況を確認できます。

git status
git diff

コマンドの意味が分からなければ、その場でAIへ聞いて構いません。

いきなり本番環境を変更しない

開発では、自分のパソコンや開発用環境で確認してから本番へ反映するのが基本です。

開発
↓
確認
↓
テスト
↓
Preview
↓
本番公開

特にデータベース、ログイン、決済など重要な機能を変更するときは注意が必要です。

小さなものから作る

最初から大規模なSNSやECサイトを作ろうとすると、多くの仕組みを同時に理解する必要があります。

AI開発初心者は、小さいものから始める方が理解しやすくなります。

• 自己紹介ページ
• LP
• お問い合わせフォーム
• 簡単なTodoアプリ
• メモアプリ
• 簡単な診断ツール

小さく作る
↓
動かす
↓
公開する
↓
改善する
↓
次の機能を追加

1回でも「作って公開する」経験をすると、開発全体の流れを理解しやすくなります。

分からないことはAIに説明させる

開発中には知らない言葉が何度も出てきます。

そのたびに全部暗記する必要はありません。

このコードに出てくる
「async」と「await」が分かりません。

プログラミング初心者向けに、
このコードの中で何をしているのか説明してください。

難しい専門用語はできるだけ使わないでください。

今見ているコードを使って説明してもらうと、一般的な解説を読むより理解しやすいことがあります。

AIにコードを書かせるだけではなく、教えてもらう

AI開発を続けるなら、AIを「代わりにコードを書く存在」としてだけ使わないことも重要です。

変更内容を説明させましょう。

今回変更した内容を、
開発初心者向けに説明してください。

次を教えてください。

・なぜ変更したか
・どのファイルを変更したか
・それぞれ何をしているか
・壊れる可能性がある部分
・次に覚えるとよい知識

これを繰り返すことで、作りながら開発知識を増やせます。

AI開発の基本フロー

① 作りたいものを決める
↓
② 必要な機能を整理
↓
③ AIに現在の状況を調査させる
↓
④ 実装方針を確認
↓
⑤ AIに実装させる
↓
⑥ 動作確認
↓
⑦ エラー修正
↓
⑧ git diffで確認
↓
⑨ テスト
↓
⑩ Commit
↓
⑪ Preview確認
↓
⑫ 公開

最初はすべて完璧にできなくても問題ありません。

この流れを何度か経験することで、少しずつ開発全体が見えるようになります。

AIへ開発を依頼する基本テンプレート

AI開発で何を伝えればいいか迷ったら、次の形から始めてみましょう。

目的:
［作りたいもの・変更したいもの］

現在:
［現在の状態］

やりたいこと:
・［機能1］
・［機能2］
・［機能3］

条件:
・既存機能を壊さない
・関係ない部分を変更しない
・不要なリファクタリングをしない

最初に現在のコードを調査してください。

その後、
・変更が必要なファイル
・実装方針
・考えられるリスク

を報告してください。

まだコード変更はしないでください。

AI開発で最初に覚えること

最初からプログラミングのすべてを覚える必要はありません。

まずは次の流れが理解できれば十分です。

画面
↓
処理
↓
データ
↓
Gitで管理
↓
公開

そして、分からないことが出たらAIに説明してもらいながら進めます。

AI時代の開発では、すべてを暗記してから作るのではなく、作りながら理解していくという学び方がしやすくなっています。

次に学ぶ

次は、WebサイトやWebアプリがどのような仕組みで動いているのかを、もう少し詳しく見ていきます。

AI開発とは？
↓
Webサイト・Webアプリの仕組み
↓
開発環境・ターミナル
↓
AIと安全に開発する

Webサイト・Webアプリの仕組みを学ぶ →