Webサイト・Webアプリの仕組み

AIを使ってWebサイトやWebアプリを作るとき、コードをすべて覚える必要はありません。

ただし、自分が今どの部分を作っているのかを理解するために、Webの基本的な仕組みは知っておくと便利です。

ユーザー
↓
ブラウザ
↓
インターネット
↓
サーバー
↓
処理
↓
データベース
↓
結果を返す
↓
ブラウザに表示

このページでは、Web開発初心者向けに、WebサイトやWebアプリがどのように動いているのかを大きな流れから説明します。

WebサイトとWebアプリの違い

まず、WebサイトとWebアプリは完全に別物というわけではありません。

どちらもブラウザからアクセスする仕組みを使いますが、一般的には機能の多さによって呼び方が変わります。

Webサイト

• 会社のホームページ
• ブログ
• メディア
• サービス紹介ページ
• LP

情報を見ることが中心です。

Webアプリ

• 会員登録
• ログイン
• 投稿
• 予約
• チャット
• データ保存
• 決済

など、ユーザーの操作によってデータや画面が変化するサービスをWebアプリと呼ぶことが多くあります。

Webページを見るとき何が起きている？

たとえばブラウザでWebサイトを開くとき、裏側ではいくつかの処理が行われています。

① URLを入力
↓
② 接続先を探す
↓
③ サーバーへリクエスト
↓
④ サーバーが処理
↓
⑤ 必要なデータを返す
↓
⑥ ブラウザが画面を表示

普段は一瞬で行われるため意識しませんが、Webサービスはこのような通信を繰り返して動いています。

ブラウザとは？

ブラウザは、Webページを表示するためのアプリです。

• Google Chrome
• Safari
• Microsoft Edge
• Firefox

などがあります。

ブラウザはサーバーから受け取ったHTML・CSS・JavaScriptなどを読み取り、私たちが見る画面へ変換します。

HTML
↓
ページの構造

CSS
↓
デザイン

JavaScript
↓
動きや処理

↓

ブラウザが組み合わせて表示

HTMLとは？

HTMLは、Webページの構造を作るための言語です。

たとえば、

<h1>OmochiX</h1>

<p>AIを学ぶためのページです。</p>

<button>始める</button>

のように、見出し・文章・ボタンなどページの構造を作ります。

CSSとは？

CSSは、Webページの見た目を整えるために使います。

• 文字サイズ
• 余白
• 背景
• 配置
• 角丸
• スマートフォン表示

などを指定します。

.button {
  padding: 12px 20px;
  border-radius: 8px;
}

AIへ「もう少し余白を広くして」「スマホでは縦並びにして」と指示すると、主にCSSを変更する場合があります。

JavaScriptとは？

JavaScriptは、Webページに動きや処理を追加するためによく使われるプログラミング言語です。

• ボタンを押したときの処理
• フォーム入力チェック
• 画面表示の切り替え
• データ取得
• メニューの開閉

などに使われます。

HTML
ページを作る

CSS
見た目を整える

JavaScript
動かす

フロントエンドとは？

ユーザーが直接見る画面側の処理を、フロントエンドと呼びます。

• トップページ
• ボタン
• 入力フォーム
• メニュー
• 商品一覧
• ダッシュボード

など、ブラウザに表示される部分です。

ユーザー
↓
見る・押す・入力する
↓
フロントエンド

バックエンドとは？

バックエンドは、画面の裏側で行われる処理です。

• ユーザー登録
• ログイン
• メール送信
• データ保存
• 権限確認
• 決済処理
• 外部サービスとの通信

ユーザーがフォーム送信
↓
フロントエンド
↓
バックエンド
↓
内容を確認
↓
保存・メール送信など
↓
結果を返す

ユーザーには直接見えない処理も多いため、「画面は正常なのに保存できない」という場合はバックエンド側に問題があることもあります。

サーバーとは？

サーバーは、ユーザーからのリクエストを受け取り、必要な処理やデータを返す役割を持つコンピューターや環境です。

ブラウザ
↓
「このページを見たい」
↓
サーバー
↓
処理
↓
「この内容を表示して」
↓
ブラウザ

Webサービスを公開するときは、自分のパソコンだけで動かすのではなく、インターネットからアクセスできる環境へ配置します。

データベースとは？

データベースは、サービス内で使用する情報を保存・取得するために使います。

たとえばTodoアプリなら、

• タスク名
• 作成日時
• 完了したか
• 誰のタスクか

といった情報を保存できます。

タスクを入力
↓
バックエンドへ送信
↓
データベースへ保存
↓
あとで取得
↓
画面に表示

データベースを使うことで、ページを閉じたあともデータを残せるようになります。

Neonでデータベースの基本を学ぶ →

APIとは？

APIは、サービス同士がデータや機能をやり取りするための仕組みです。

たとえばWebアプリからAIサービスを使う場合、次のような流れになります。

ユーザー
↓
Webアプリ
↓
AIサービスのAPI
↓
AIが処理
↓
回答
↓
Webアプリ
↓
ユーザーに表示

ほかにも、決済・地図・メール送信・天気情報など、外部サービスと連携するときにAPIが使われます。

リクエストとレスポンス

Web開発では「リクエスト」と「レスポンス」という言葉がよく登場します。

Request
↓
「このデータをください」

サーバーが処理

Response
↓
「結果はこれです」

たとえば商品一覧を表示するときは、ブラウザから商品の情報を要求し、サーバーがデータを返します。

JSONとは？

APIなどでデータをやり取りするときによく使われる形式の1つがJSONです。

{
  "name": "OmochiX",
  "category": "AI",
  "published": true
}

最初は書き方を暗記する必要はありません。

「サービス同士で情報をやり取りするときによく見るデータ形式」くらいから覚えれば十分です。

URLとは？

URLは、インターネット上にあるページやデータの場所を表します。

https://omochix.com/learn/development/

このURLにも役割があります。

https://
通信方法

omochix.com
ドメイン

/learn/development/
ページの場所

ドメインとは？

ドメインは、Webサイトの住所のようなものです。

omochix.com

のような部分です。

ユーザーはドメインを使うことで、Webサイトへアクセスしやすくなります。

DNSとは？

DNSは、ドメインと接続先を結びつける仕組みです。

ユーザー

omochix.com
↓
DNS
↓
どこへ接続するか確認
↓
Webサービスへアクセス

ドメインをVercelなどへ接続するときにもDNS設定が登場します。

ローカル環境とは？

自分のパソコン上でWebサイトやアプリを動かしている環境を、ローカル環境と呼ぶことがあります。

自分のパソコン
↓
コードを書く
↓
ローカルで起動
↓
ブラウザで確認

開発中は、いきなりインターネット上の本番サイトを変更するのではなく、まずローカルで確認することがあります。

開発環境と本番環境

Webサービスでは、開発中の環境と実際のユーザーが利用する環境を分けることがあります。

Local
自分のパソコン
↓
Development / Preview
確認用
↓
Production
実際のユーザーが使う本番

この違いを理解しておくと、AIに開発を任せるときも「どの環境を変更しているのか」を確認できます。

Vercelはどこに入る？

Vercelは、WebサイトやWebアプリをインターネット上へ公開するために利用できるプラットフォームの1つです。

自分のパソコン
↓
GitHub
↓
Vercel
↓
Webへ公開

GitHubへコードをPushすると、Vercelが新しいバージョンをビルド・公開するような構成も作れます。

Vercelの基本を見る →

GitHubはどこに入る？

GitHubは、主にコードや変更履歴を管理・共有するために使います。

コードを書く
↓
Gitで変更を記録
↓
GitHubへPush
↓
コードを保存・共有
↓
Vercelなどが取得
↓
公開

AIがコードを変更する開発では、「何が変更されたのか」を管理する意味でもGitとGitHubが重要になります。

GitHubの基本を見る →

Webアプリ全体をつなげるとこうなる

ここまでの仕組みを1つにつなげてみましょう。

ユーザー
↓
ブラウザ
↓
フロントエンド
↓
API / バックエンド
↓
データベース
↓
バックエンド
↓
フロントエンド
↓
ユーザーに結果を表示

たとえばTodoアプリなら、

「買い物」というタスクを入力
↓
送信ボタン
↓
バックエンドが受け取る
↓
データベースへ保存
↓
保存したタスクを取得
↓
画面へ表示

という流れになります。

エラーが起きた場所を考える

Web全体の仕組みを理解すると、エラーが起きたときに原因を絞りやすくなります。

画面がおかしい
↓
フロントエンド？

ボタンを押しても保存されない
↓
バックエンド？
API？
データベース？

サイト自体が開かない
↓
Deploy？
DNS？
サーバー？

正確な原因が分からなくても、「どのあたりに問題がありそうか」を考えられるだけでAIへの質問が具体的になります。

AIへ調査を依頼する

エラーが起きたら、すぐにコードを書き換えさせるのではなく、まず調査させる方法があります。

フォームの送信ボタンを押しても
データが保存されません。

まず現在のコードを調査してください。

確認してほしいこと:
・フロントエンド
・API
・バックエンド
・データベース接続
・エラーログ

まだ修正しないでください。

原因候補と根拠を先に報告してください。

コードを全部理解する必要はない

AI開発では、大量のコードが生成されることがあります。

初心者がすべてのコードを1行ずつ理解してから進むのは大変です。

まずは、

このファイルは何をする？
↓
どことつながっている？
↓
何を変更した？
↓
壊れる可能性はどこ？
↓
どう確認する？

という大きな役割を理解するところから始めましょう。

AIにコードを説明してもらう

このファイルを
Web開発初心者向けに説明してください。

知りたいこと:
1. このファイルの役割
2. どこから呼ばれるか
3. どこへデータを送るか
4. Databaseを使っているか
5. 外部APIを使っているか
6. 変更すると影響する場所

コードを1行ずつ説明するのではなく、
最初に全体像を説明してください。

AIを「コードを書く道具」だけでなく、「今あるコードを理解する先生」として使うこともできます。

まず覚えたいWebの全体像

ブラウザ
↓
フロントエンド
↓
バックエンド / API
↓
データベース

コード
↓
Git
↓
GitHub
↓
Vercel
↓
公開

ドメイン
↓
DNS
↓
公開したWebサービスへ接続

この全体像が分かれば、AI開発で出てくる言葉の多くが少しずつつながってきます。

次に学ぶ

WebサイトやWebアプリの全体像が分かったら、次は実際の開発で何度も使うターミナルと開発環境について学びます。

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

ターミナルと開発環境の基本を学ぶ →