Neon

Neonは、Webアプリのデータを保存するためのPostgreSQLデータベースをクラウド上で利用できるサービスです。

AIを使ってWebサイトを作るだけならデータベースがなくても公開できますが、ユーザー情報や投稿、問い合わせ、商品、設定などを保存したい場合はデータベースが必要になります。

Webサイトを表示する
↓
Vercel

データを保存する
↓
Neon

GitHub・Vercel・Neonを組み合わせることで、AIを使って本格的なWebアプリを作るための基本構成が見えてきます。

コード
↓
GitHub
↓
Vercel
↓
Webアプリ
↓
Neon
↓
データ保存

そもそもデータベースとは？

データベースは、アプリで使う情報を整理して保存する場所です。

たとえば会員制Webサービスなら、次のようなデータを保存します。

• ユーザー名
• メールアドレス
• アカウント情報
• 投稿データ
• お気に入り
• 注文情報
• 設定

こうした情報をページのコードへ直接書くのではなく、データベースへ保存して必要なときに読み込みます。

PostgreSQLとは？

Neonでは、PostgreSQL（ポストグレスキューエル）というデータベースを利用します。

PostgreSQLは、Webサービスや業務システムなどで広く使われているリレーショナルデータベースの1つです。

最初からPostgreSQLのすべてを理解する必要はありません。

AI開発初心者の場合は、まず次の関係だけ理解すれば十分です。

Neon
↓
PostgreSQL
↓
アプリのデータを保存

テーブルとは？

データベースでは、情報をTable（テーブル）という単位で整理します。

たとえばユーザー情報なら、次のようなイメージです。

users

id | name | email
-----------------------------
1  | Taro | taro@example.com
2  | Hana | hana@example.com

ExcelやGoogleスプレッドシートの表をイメージすると理解しやすいでしょう。

Neonを使う基本的な流れ

AI開発でNeonを使う場合、大まかな流れは次のようになります。

① NeonでProjectを作る
↓
② Databaseを用意する
↓
③ Connection Stringを取得
↓
④ アプリの環境変数に設定
↓
⑤ アプリからDBへ接続
↓
⑥ データを保存・取得

Projectとは？

Neonでは、まずProjectを作成します。

Projectは、1つのWebサービスやアプリで使うデータベース環境のまとまりと考えると分かりやすいです。

my-ai-app
↓
Neon Project
↓
PostgreSQL Database

Databaseとは？

Databaseは、実際にデータを保存する領域です。

その中に複数のTableを作ります。

Database

├─ users
├─ posts
├─ comments
└─ settings

Roleとは？

Roleは、データベースへ接続するユーザーのようなものです。

Roleごとに、データベースを操作するための権限を分けることができます。

たとえば将来的には、

• 管理用
• アプリからの接続用
• 読み取り専用

のように用途を分けることもできます。

Connection Stringとは？

アプリからNeonへ接続するために使うのが、Connection String（接続文字列）です。

見た目は次のような形式です。

postgresql://USER:PASSWORD@HOST/DATABASE

この文字列には、データベースへ接続するための情報が含まれています。

• ユーザー名
• パスワード
• 接続先
• データベース名

.envとは？

ローカル開発では、Connection Stringを .env や .env.local などの環境変数ファイルに設定することがあります。

DATABASE_URL="postgresql://..."

アプリ側では、この環境変数を読み込んでデータベースへ接続します。

コードの中へ直接パスワードを書くのではなく、秘密情報を分離して管理するための仕組みです。

.gitignoreも重要

.env のような秘密情報を含むファイルは、GitHubへPushしないようにします。

そのために使うのが .gitignore です。

.env
.env.local

これらをGitの管理対象から外すことで、誤って秘密情報を公開するリスクを下げられます。

VercelからNeonへ接続する

本番公開したWebアプリからNeonへ接続する場合は、Vercel側にもConnection Stringを環境変数として設定します。

Neon
↓
Connection String
↓
Vercel Environment Variables
↓
Webアプリ
↓
Database接続

たとえば環境変数名を DATABASE_URL として登録します。

DATABASE_URL=postgresql://...

これによって、GitHubへ秘密情報を保存せずにVercelからNeonへ接続できます。

開発用DBと本番DBは分ける

Webアプリを本格的に運用するようになったら、開発用データベースと本番用データベースを分けることが重要です。

Development
↓
開発・テスト用DB

Production
↓
本番ユーザー用DB

AIにコード変更やテストを任せる場合も、本番データを使って直接テストしない設計にする方が安全です。

SQLとは？

PostgreSQLなどのデータベースを操作するときに使う言語がSQLです。

たとえば、ユーザー一覧を取得するSQLは次のようになります。

SELECT * FROM users;

新しいユーザーを追加する場合は、次のようなSQLを使います。

INSERT INTO users (name, email)
VALUES ('Taro', 'taro@example.com');

AI開発ではSQL自体をAIに作成してもらうこともできますが、何を実行しようとしているのかは確認するようにしましょう。

Prismaとは？

Next.jsなどのアプリでは、Neonへ直接SQLを書く代わりにPrismaなどのツールを使ってデータベースを操作することもあります。

Next.js
↓
Prisma
↓
Neon
↓
PostgreSQL

Prismaを使うと、アプリのコードからデータを保存・取得する処理を書きやすくなります。

ただし、Neonを使うために最初からPrismaを覚える必要はありません。

まずは、

アプリ
↓
Database
↓
データ保存

という基本を理解することが大切です。

Migrationとは？

アプリを作っていると、データベースの構造を後から変更することがあります。

たとえば、usersテーブルへ新しい項目を追加する場合です。

変更前

users
├─ id
├─ name
└─ email

変更後

users
├─ id
├─ name
├─ email
└─ created_at

こうしたデータベース構造の変更を管理する仕組みをMigrationと呼びます。

AI開発でNeonを使う流れ

AIを使ってWebアプリを作る場合、次のような流れになります。

① AIにWebアプリを作ってもらう
↓
② GitHubへコードを保存
↓
③ VercelへDeploy
↓
④ NeonでDatabase作成
↓
⑤ DATABASE_URLを設定
↓
⑥ アプリから接続
↓
⑦ データ保存を確認

Neonで最低限覚えておきたい言葉

• Database：データを保存する場所
• PostgreSQL：Neonで利用するデータベース
• Table：データを整理する表
• Role：DBへ接続するユーザー・権限
• Connection String：アプリからDBへ接続するための情報
• SQL：データベースを操作する言語
• Migration：データベース構造の変更管理

GitHub・Vercel・Neonの役割を整理する

ここまでの3つを整理すると、役割は次のようになります。

GitHub
コードを保存・管理する

↓

Vercel
Webアプリを公開する

↓

Neon
アプリのデータを保存する

この3つの役割を理解すると、AIを使ったWeb開発の全体像がかなり分かりやすくなります。

次に学ぶ

GitHub・Vercel・Neonの役割が分かったら、次はそれらを組み合わせて実際にAIでWebサービスを公開する流れを学びます。

AIで作る
↓
GitHub
↓
Vercel
↓
Neon
↓
Webサービス公開

実践チュートリアルを見る →