見出し画像

生成AI時代の初心者開発者が知っておくべきこと

あおい　AI+ノーコード開発

最近よく何かと話題になるv0やGPT Engineer。非開発経験者がこれらのノーコードAIツールを使って本格開発する前に知っておくべきことを超ざっくりまとめました。

※元木さん(https://x.com/ai_syacho)とお話ししたものを参考にしています。ありがとうございます。



1. Web開発の変遷：JavaScriptからNext.jsまで

1.1 JavaScriptの進化

Web開発の世界は常に進化し続けています。その中心にあるのが、JavaScriptという言語です。

  • JavaScript: 誰もが使える「国際語」のようなもの。柔軟で使いやすいが、大規模開発では課題も。

  • TypeScript: JavaScriptに型システムを追加。より安全で保守性の高いコードを書けるように。

1.2 フレームワークの登場

JavaScriptの進化と並行して、様々なフレームワークが誕生しました。

  • React: コンポーネントベースの開発を提唱。UIの再利用性を高める。

  • Next.js: Reactを基盤とし、サーバーサイドレンダリングやルーティングなどの機能を追加。

2. Next.jsの特徴と利点

Next.jsは、モダンなWeb開発の多くの課題を解決するフレームワークです。

2.1 ディレクトリ構造がそのままURL構造に

Next.jsの最大の特徴の一つは、ディレクトリ構造がそのままWebサイトのURL構造になること。
例：

  • `/app/dashboard/page.tsx` → `/dashboard` というURLに

  • `/app/users/[id]/page.tsx` → `/users/1`, `/users/2` などの動的なURLに
    これにより、プロジェクトの構造が直感的に理解しやすくなります。

2.2 フロントエンドとバックエンドの統合

Next.jsは、フロントエンド開発のためのフレームワークですが、APIルートを通じてバックエンド機能も提供します。これにより、1つのプロジェクト内でフルスタック開発が可能になります。

2.3 パフォーマンスの最適化

サーバーサイドレンダリング（SSR）やスタティックサイト生成（SSG）をサポートし、Webサイトのパフォーマンスを大幅に向上させます。

3. Next.jsプロジェクトの構造

Next.jsプロジェクトは、特定のディレクトリ構造に従います。主要なディレクトリとその役割を見ていきましょう。

  • `app`: アプリケーションのメインページとルーティングを管理

  • `components`: 再利用可能なUI部品を格納

  • `api`: バックエンド機能を提供するAPIエンドポイントを格納

  • `public`: 画像やフォントなどの静的ファイルを格納

  • `lib`: ユーティリティ関数やAPIクライアントを格納

4. 覚えておきたい3つの重要ポイント

4.1 App Routerのパスの書き方

Next.jsの新しいApp Routerシステムでは、ディレクトリ構造がそのままURLパスになります。
特殊なファイル名:

  • `page.tsx`: ルートコンポーネント

  • `layout.tsx`: レイアウトを定義

  • `loading.tsx`: ローディング状態を表示

  • `error.tsx`: エラー処理

4.2 コンポーネントベースの開発

Reactの考え方に基づき、UIを再利用可能なコンポーネントに分割します。
コンポーネントの種類:

  • Presentational Components: 見た目のみを担当

  • Container Components: データ取得やロジックを含む

  • Layout Components: ページ構造を定義
    propsを使って、親コンポーネントから子コンポーネントにデータを渡します。

4.3 APIルートの作成

Next.jsでは `/app/api` ディレクトリ内にAPIルートを定義します。
例：

import { NextResponse } from 'next/server'
export async function GET() {
  // データ取得ロジック
  return NextResponse.json({ users: [] })
}
export async function POST(request: Request) {
  const body = await request.json()
  // データ作成ロジック
  return NextResponse.json({ message: 'User created' }, { status: 201 })
}

5. プログラミングの基本概念

アルゴリズムの基本は以下の3つです：

  1. 順次処理

  2. ループ

  3. 条件分岐
    これらの基本概念を理解することで、複雑なプログラムも構築できるようになります。

6. 開発環境とツール

6.1 Vercel

Next.jsの開発元であり、デプロイプラットフォームも提供しています。Next.jsアプリケーションのデプロイに最適化されています。

6.2 AIツールの活用

  • GPT Engineer: コード生成を支援

  • Cursor: AIを活用したコーディング補助ツール
    これらのツールを活用することで、開発効率を大幅に向上させることができます。

7. データベースとの連携

Supabaseは、認証機能も含む人気のデータベースソリューションです。Next.jsと組み合わせることで、フルスタックアプリケーションを素早く構築できます。

8. モダンな開発フロー

現代のWeb開発では、効率的な開発フローが重要です。以下は一般的な開発の流れです：

  1. 要件定義

  2. v0（初期プロトタイプ）の作成

  3. GPT Engineerを使用したコード生成

  4. Cursorを使用した開発（フロントエンド、バックエンド、データベース）
    Supabaseは、認証機能も含む人気のデータベースソリューションで、開発を大幅に効率化します。

9. Vercelとクラウドプラットフォーム

  • VercelはNext.jsの開発元であり、オープンソースのNextを提供しています。

  • v0もNextの精度が高いため、Vercelとの相性が良いです。

  • Vercelは他の大手クラウドプラットフォーム（AWS、GCP、Azure）の上に構築されているため、比較的コストが高くなります。

  • Next.jsやFastAPIなどのフレームワークはVercel上で動作しますが、Difyのような最新ツールはまだサポートされていない場合があります。

10. Next.jsの多機能性

  • Next.jsはフロントエンドとバックエンドの両方の開発が可能です。

  • フロントエンドではApp Routerを使用します。

  • バックエンドでは、コード内に認証、API、課金などの機能を組み込むことができます。

11. RAGとLLM

  • RAG（Retrieval-Augmented Generation）は、バックエンド+データベースの進化形と考えられます。

  • LLM（Large Language Model）とベクトルデータベースの組み合わせは、究極的にはバックエンド+データベースの発展形です。

まとめ

Next.jsを中心としたモダンなWeb開発は、生成AI時代に適した効率的な開発手法を提供します。ディレクトリ構造、コンポーネントベースの開発、APIルートの実装など、重要なポイントを押さえることで、スケーラブルで高性能なWebアプリケーションを開発することができます。

ノーコードAIツールを使いつつも、全体感はきちんと把握しておくことで細かい修正も容易になるのだなと学べました。改めて、元木さんありがとうございます。

※こちらは自分のメモをもとにAIで作成した文章になります。

この記事が参加している募集

#AIとやってみた

36,796件

この記事が気に入ったらサポートをしてみませんか？