技術スタックとアーキテクチャを理解する意義
前回の動画でハーネスの実装ができましたので、続いて今回作る動画プラットフォームの技術スタックとアーキテクチャを理解していきます。
最初から技術構成を理解しておいたほうが、Claude Codeに指示出しがしやすいです。いくらClaude CodeやCodexを使って簡単にアプリ開発ができるといっても、Webの基礎知識やどういった技術を採用するのかという選定に関しては、やはり知識があったほうがアプリは作りやすいです。
AIに指示出しするときも技術構成が最初から分かっておけば逆算で考えることもできますので、しっかりと押さえることが大事です。
Webアプリの3層構造
重要な核になるのが「フロントエンド」「バックエンド」「データベース」の3つです。この3つがWebアプリを作るにおいて必ず必要になるものになります。この3層構造に関してはClaude Code入門の講座のほうで説明していますが、もう一回復習という意味で理解していきます。
フロントエンド：Next.js
フロントエンドはWebアプリケーションの見た目となる部分です。今回はNext.jsを採用します。
非エンジニアの方やプログラミングを触ってきていない方は、Next.jsをAIから提案されてしぶしぶ使っているという形だと思います。なぜNext.jsを採用しているのかというと、バックエンドAPIのほうもNext.jsで実装できるからです。
本来ならフロントエンドとバックエンドで別の技術を使うことが普通ですが、Next.jsはフルスタックフレームワークと言われていて、見た目の部分と裏側のAPIとなる部分（リクエストが来たらデータに何かを保存するみたいな裏側のロジック）の両方を実装することができます。
だからNext.jsをデフォルトでAIが推奨しているわけです。基本的にはNext.jsを推薦してきます。
フロントエンドの他の選択肢
フロントエンドには他にもReactやVue、その他JavaScriptを元にしたフレームワーク・ライブラリが色々あります。JavaScript以外にもPythonやPHP、Rubyといった言語を基礎にしたライブラリ・フレームワークが多数存在します。
正直何を使って開発してもいいのですが、Next.jsやReactは世界的に人気なのでAIもそれをレコメンドしてくれています。ただちょっと理解するのは難しい複雑なフレームワークなので、気嫌いする方もいらっしゃると思いますが、AIで全部開発できてしまいますので、今の時代はそこまで中身を理解せずともフロントエンド・バックエンド同時に作れるというところが魅力的です。
ちなみにClaude Code Academyもこれから作るようなアプリケーションですが、Next.jsで作っております。基本何でも作れます。技術スタックは何でもいいと思っていて、目的となるアプリケーションが作れれば別に何でもいいと思います。
バックエンド（API）の役割
バックエンドの役割は、フロントエンドからのリクエストに応じて適切な処理を行うことです。例えば認証したいときはBetterAuthというライブラリを使ったり、決済したいときはStripeを使ったり、動画ストレージを使いたいときはbunny.netを使ったりします。
フロントエンドのUIからバックエンドに対してどうやって指示出ししているのかというと、fetchという関数を使います。「こういうリクエストきましたよ」というふうにバックエンドに伝えるための関数です。
データベース：Turso
データベースは有名どころだとSupabaseが人気なところですが、今回はTursoを使います。
なぜSupabaseではなくTursoなのか
最近Supabaseはセキュリティ的にちょっと脆弱性があるという話題があります。Supabaseはバックエンドを経由せずにフロントエンドから直接クエリ（お問い合わせ）を投げることができます。つまり見た目のUIから直接データベースにデータの取得や追加ができてしまいます。
そのアーキテクチャだと、フロントエンドのコードにSupabaseのAPIキーやシークレットキーを含めてしまうと、第三者から全部見られてしまいます。万が一そういう秘密鍵がフロントエンドに組み込まれていた場合は、データベースにアクセスされてしまいます。
SupabaseにはフロントエンドからアクセスできるからこそRLS（Row Level Security）というポリシー設定ができるのですが、このRLSポリシー設定は非エンジニアの方やプログラムを触ったことない人が設計するのはちょっと難しいです。バイブコーディング時代にSupabaseを採用するのはちょっと危険かもしれないということです。
Tursoのメリット
Tursoはバックエンドをしっかりと経由させてデータベースに対してお問い合わせを行います。フロントエンドから直接データベースにお問い合わせすることはありません。セキュリティ的にはバックエンドからデータベースを操作したほうが強固です。
もう一つのメリットとして、データベースの無料枠が100個まで作れます。Supabaseだったら2枠までしか作れませんが、Tursoは100個まで作れます。データのサイズ上限は無料枠で10GBまでなので、個人開発にとっては心強いサービスです。
Drizzle ORM
バックエンドからデータベースに対してお問い合わせするときはDrizzle ORMというものを使います。ORMとはObject-Relational Mapperのことで、データベースにお問い合わせするときはSQLというプログラミング言語を知らないといけないのですが、ORMはJavaScriptでSQLと同様なデータベースのお問い合わせクエリを書くことができる便利なライブラリです。
Drizzle ORM以外にもPrisma ORMなど、その他いろんなマッパーがありますので調べてみると面白いかもしれません。
3層構造を基に理解を深める
今紹介しているのはプログラミングの基礎の部分です。さらにパフォーマンスをよくしたいとか、フロントエンドからバックエンドへの問い合わせのパフォーマンスをよくしたいとか、セキュリティ的にもっと強固にしたいとなってくると、この3層構造を元に考えていくのが一番簡単です。
Claude Codeと壁打ちしながら基礎を教えてもらえば教えてくれるので、3層構造をもとに理解するのが一番かんたんです。本当はNext.jsだけで1冊の本が書けるくらい奥深いもので、SSR、SSG、ISRの話やCacheの話、サーバーアクションなど色々あるのですが、AIが実装してくれるので必須科目ではないと思います。
このアーキテクチャの応用
動画講座以外にも、皆さんのアプリケーションをWeb上で作る場合（筋トレ管理や効率化・自動化のツールなど）、Next.jsとTursoを使っていただくといいと思います。認証にBetterAuth、決済にStripeを採用すれば同じように作れます。
続いての動画からは、このハーネスを使って仕様書から固めていきます。
