【備忘録】Webの仕組みをゼロから理解する part2

はじめに

前回の記事の続きを記載いたします。
https://qiita.com/suneo46/items/8f5a987e927813323af0

㉓ レンダリングの種類（ここ重要）

Webアプリの表示方法にはいくつか種類があります。

■ CSR（Client Side Rendering）

👉 Reactの基本

ブラウザで描画する
初回表示は少し遅い
その後の操作は速い

サーバー → 空に近いHTML
        ↓
ブラウザ → JavaScript実行
        ↓
画面描画

■ SSR（Server Side Rendering）

👉 サーバーでHTMLを作る

初回表示が速い
SEOに強い

サーバー → 完成HTML生成
        ↓
ブラウザ → すぐ表示

■ SSG（Static Site Generation）

👉 事前にHTMLを生成

表示がとても速い
更新が少ないページ向き

㉔ SEOとの関係

SEOに強い構成👇

SSR / SSGを使う
HTMLにコンテンツが含まれている
表示速度が速い

👉 CSRだけだと検索エンジンに弱い場合あり

㉕ パフォーマンス（表示速度）

ユーザー体験に直結します。

重要ポイント👇

表示が速いか
操作がすぐ反応するか
レイアウトが崩れないか

👉 遅いとユーザーは離脱します

㉖ よく使う最適化

実務でよくやる改善👇

画像圧縮（WebP）
Lazy Load（遅延読み込み）
Code Splitting（JS分割）
CDN利用

㉗ CDNとは

👉 近いサーバーから配信して高速化する仕組み

㉘ セキュリティ

最低限ここは押さえる👇

XSS（スクリプト攻撃）
CSRF（なりすましリクエスト）
HTTPS（通信の暗号化）

㉙ 認証と認可

似ているけど別物👇

認証：あなたは誰？（ログイン）
認可：何ができる？（権限）

㉚ JWTとは

👉 認証情報を持つトークン

サーバーで状態を持たない（ステートレス）
APIと相性が良い

㉛ デプロイ

👉 作ったアプリを公開すること

㉜ CI/CD

👉 テストとデプロイを自動化

CI：テスト・ビルド
CD：デプロイ

㉝ インフラ

👉 アプリが動く場所

サーバー
クラウド（AWSなど）
Docker

㉞ 実務ではどう使われるのか？

👉 「仕組み」→「実務」に落とす

ケース①：ユーザー一覧画面
流れ

① 画面表示
② ReactがAPI実行
③ バックエンドがDB取得
④ JSON返却
⑤ state更新
⑥ UI表示

フロント（React）
import { useEffect, useState } from "react";

export const UserList = () => {
  const [users, setUsers] = useState([]);

  useEffect(() => {
    fetch("/api/users")
      .then(res => res.json())
      .then(data => setUsers(data));
  }, []);

  return (
    <ul>
      {users.map(user => (
        <li key={user.id}>{user.name}</li>
      ))}
    </ul>
  );
};

👉 ポイント

初回レンダリングでAPI実行
state更新で再描画

バックエンド
app.get("/api/users", async (req, res) => {
  const users = await db.users.findAll();
  res.json(users);
});
DB
SELECT * FROM users;

ケース②：ログイン機能
流れ

① 入力
② API送信
③ 認証
④ トークン発行
⑤ ログイン状態維持

フロント

fetch("/api/login", {
  method: "POST",
  body: JSON.stringify({ email, password }),
});
バックエンド
app.post("/api/login", async (req, res) => {
  const user = await db.users.findByEmail(req.body.email);

  if (user.password === req.body.password) {
    res.json({ token: "xxx" });
  } else {
    res.status(401).send("Unauthorized");
  }
});

ケース③：いいねボタン（非同期）
流れ

① ボタン押下
② API送信
③ DB更新
④ state更新
⑤ UI更新

フロント

const handleLike = async () => {
  await fetch("/api/like", { method: "POST" });
  setLiked(true);
};

👉 ページリロードなしで更新される

ケース④：よくあるバグ
① 画面が更新されない

原因👇

state更新していない
非同期の扱いミス
② API成功なのに表示されない

原因👇

JSON構造ミス
props渡しミス
③ 本番だけ動かない

原因👇

CORS
環境変数
API URL違い
👉 切り分けが最重要

② Networkタブを見る

👉 ここで大体解決する

③ ログを仕込む
console.log(data);

👉 デバッグ

JISOUのメンバー募集中！

プログラミングコーチングJISOUでは、新たなメンバーを募集しています。
日本一のアウトプットコミュニティでキャリアアップしませんか？
興味のある方は、ぜひホームページをのぞいてみてください！