Webアプリケーションの三層構造
前回のセクションでClaude Codeの基礎を学びました。今回のセクションからは、簡単なWebアプリケーションを作っていきます。Claude Codeに全部作らせる前に、Webアプリケーションがどういう構造でユーザーにアプリを表示し動かしているのか、表側の部分と裏側の部分がどうなっているかについて説明します。
フロントエンド
Webアプリケーションの三層構造において、まずアプリの見た目の部分を「フロントエンド」と言います。ユーザーの画面にどういったスタイルを当てて表示するのかを決めるのがフロントエンドの部分です。
例えばYouTubeであれば、動画一覧が見えて上に検索ボタンがあるといったUIのことですね。この見た目もプログラミング言語で開発する必要があります。
バックエンド
見た目の部分だけでなく、裏側の部分を「バックエンド」と言います。例えばYouTubeの例でいうと、見たい動画を探してその動画をクリックしたら動画が再生されますが、その裏側の仕組みでは、動画がクリックされたという処理をバックエンドが受け取り、データベースの中に入っている動画一覧から探してきて、それをフロントエンドに表示しているという流れが行われています。
JavaScriptとNext.js
今回のセクションで使うプログラミング言語は主にJavaScriptです。JavaScriptはフロントエンドでもバックエンドでも使われる二刀流のプログラミング言語です。
ただし、JavaScriptだけを使って構築すると結構大変です。そこで、JavaScriptを使いやすくした「フレームワーク」というツールがあります。例えばReactやNext.jsというものがあり、厳密にはReactはライブラリと呼ばれますが、そのReactをさらに使いやすくしたフレームワークがNext.jsです。
Next.jsを使えば全部JavaScriptベースで書けますので、フロントエンドはもちろん、バックエンド（APIと言われている部分）もひとつのフレームワークでどちらも実装ができます。
セキュリティの基本
フロントエンドのコードは各ユーザーのパソコンに渡るものです。そのため、フロントエンドで秘密情報（パスワードやAPIキーなど）が露出してしまう可能性があります。基本的に秘密鍵やパスワードのようなものは全部バックエンドに記述する必要があります。
非エンジニアの方はこういった知識がないと全部フロントエンドで書いてしまいがちですが、将来的にセキュリティをしっかりしなければいけない場合は、バックエンドでのバリデーションチェックやSQLインジェクション対策などが必要です。Next.jsフレームワークを使えばデフォルトで守られている部分もあるので、そういう知識があったほうが安心して開発できます。
今回作るもの
今回はClaude Code入門なので、フロントエンドとバックエンドの部分をNext.jsで作ります。AI系のアプリケーションを作るため、例えばGoogleのGeminiからAI APIを借りてくるような実装を行います。
データベースや認証・決済を含めると最低1〜2週間かかってしまうため、今回の講座ではシンプルなアプリを作ります。データベース・認証・決済込みで作りたい場合は、別講座で学習プラットフォームを作る講座も用意する予定です。