未経験でも気軽に！サブスク型プログラミングスクール【Freeks】

困ってた自分に届けたい話

「クレジットカード決済をサイトに組み込みたい…でも難しそう」
いざ調べてみると、知らない英語・セキュリティの話・カード情報の取り扱いなど、何をどうすればいいか混乱…。

そんなときに出会ったのが 「Pay.jp（ペイジェーピー）」。
コード数行で決済ができるようになり、「え、こんなに簡単でいいの？」と驚き。

てんハロ運営者

この記事は、同じように困っていた方への備忘録兼シェアとして書いています。

Pay.jpとは？

Pay.jp は、クレジットカード決済を簡単に導入できる日本発の決済サービスです。

• Visa / Mastercard / JCB / AMEX などに対応
• JavaScriptやAPI経由で簡単に組み込み可能
• セキュリティ対策もばっちり（PCI DSS準拠）
  PCI DSS：クレジットカード情報を安全に扱うための世界共通のルール
• 日本語ドキュメント完備＆開発者向けにやさしい

どんなときに使うの？

たとえばこんな場面で使えます。

• ECサイトで商品を購入するときの決済
• サブスク（月額課金）サービスの実装
• 会員登録＋決済を一括で処理
• アプリ内課金のバックエンド処理　など

なぜPay.jpが選ばれているのか？

クレジットカード決済サービスはたくさんありますが、「使いやすさ」「サポートの手厚さ」「日本向けかどうか」などで違いがあります。

以下は、Pay.jpと他の代表的なサービスを比較した表です。

実装内容

実際の流れ（1回課金）

1. ユーザーがカード情報を入力（Pay.jsを使ってトークン化）
2. トークンをバックエンド（Python/Nodeなど）に送る
3. バックエンドがトークンを使ってPay.jp APIで課金

👉 自分のサーバーでカード番号を扱わないから、セキュリティ的にも安心！

Pay.jpを利用するために必要なものは？

• Pay.jpのアカウント：無料で登録OK
• 公開鍵（フロント用）と秘密鍵（バックエンド用）のAPIキー：Pay.jpのダッシュボードで取得
• JavaScript or バックエンド（Python, PHP, Nodeなど）の知識少し

デモで見る「1回課金」の実装イメージ

🖥️ フロントエンドの実装（Next.js）

tsxファイルで、トークン作成後にAPI呼び出しを行います。

下記の「✅ 1つ渡せばOK」のコードですが、cardNumber 要素だけを createToken に渡しても、同じ elements インスタンスから作られ、かつ mount() された要素が揃っていれば、Pay.jp 側で裏側で統合されて処理されます。

"use client";
import { useEffect, useRef } from "react";
import { createCharge } from "@/lib/api/charge";

export default function CardForm() {
  const numberRef = useRef<any>(null);
  const expiryRef = useRef<any>(null);
  const cvcRef = useRef<any>(null);

  useEffect(() => {
    const payjp = Payjp("pk_test_********");
    const elements = payjp.elements();

    numberRef.current = elements.create("cardNumber");
    expiryRef.current = elements.create("cardExpiry");
    cvcRef.current = elements.create("cardCvc");

    numberRef.current.mount("#card-number");
    expiryRef.current.mount("#card-expiry");
    cvcRef.current.mount("#card-cvc");
  }, []);

  const handleSubmit = async () => {
    const payjp = Payjp("pk_test_********");
    const result = await payjp.createToken(numberRef.current); // ✅ 1つ渡せばOK

    if (result.error) {
      alert("カード情報が正しくありません");
    } else {
      const token = result.id;
      await createCharge({ token, amount: 1000 });
    }
  };

  return (
    <>
      <div id="card-number" />
      <div id="card-expiry" />
      <div id="card-cvc" />
      <button onClick={handleSubmit}>支払う</button>
    </>
  );
}

"use client";
import { useEffect, useRef } from "react";
import { createCharge } from "@/lib/api/charge";

export default function CardForm() {
  const numberRef = useRef<any>(null);
  const expiryRef = useRef<any>(null);
  const cvcRef = useRef<any>(null);

  useEffect(() => {
    const payjp = Payjp("pk_test_********");
    const elements = payjp.elements();

    numberRef.current = elements.create("cardNumber");
    expiryRef.current = elements.create("cardExpiry");
    cvcRef.current = elements.create("cardCvc");

    numberRef.current.mount("#card-number");
    expiryRef.current.mount("#card-expiry");
    cvcRef.current.mount("#card-cvc");
  }, []);

  const handleSubmit = async () => {
    const payjp = Payjp("pk_test_********");
    const result = await payjp.createToken(numberRef.current); // ✅ 1つ渡せばOK

    if (result.error) {
      alert("カード情報が正しくありません");
    } else {
      const token = result.id;
      await createCharge({ token, amount: 1000 });
    }
  };

  return (
    <>
      <div id="card-number" />
      <div id="card-expiry" />
      <div id="card-cvc" />
      <button onClick={handleSubmit}>支払う</button>
    </>
  );
}

tsファイルで、クライアントコンポーネントで取得したトークンと、金額をFastAPIサーバーへ安全に送信するためのAPI呼び出し関数

type ChargePayload = {
  token: string;
  amount: number;
};

export const createCharge = async (
  payload: ChargePayload
): Promise<"ok" | "error"> => {
  try {
    const res = await fetch(`${process.env.NEXT_PUBLIC_BACKEND_URL}/api/charge`, {
      method: "POST",
      headers: {
        "Content-Type": "application/json",
      },
      body: JSON.stringify(payload),
    });
    return res.ok ? "ok" : "error";
  } catch (e) {
    return "error";
  }
};

type ChargePayload = {
  token: string;
  amount: number;
};

export const createCharge = async (
  payload: ChargePayload
): Promise<"ok" | "error"> => {
  try {
    const res = await fetch(`${process.env.NEXT_PUBLIC_BACKEND_URL}/api/charge`, {
      method: "POST",
      headers: {
        "Content-Type": "application/json",
      },
      body: JSON.stringify(payload),
    });
    return res.ok ? "ok" : "error";
  } catch (e) {
    return "error";
  }
};

🧪 バックエンドの実装（FastAPI）

Pay.jpのPython SDKを使って、受け取ったトークンを使い課金処理をします。
事前準備でPay.jpが提供しているPython用のSDK（ソフトウェア開発キット）を pip install payjp とコマンド実行してインストールしましょう。

import payjp
from fastapi import FastAPI, Request

payjp.api_key = "sk_test_********"  # 秘密鍵を設定

app = FastAPI()

@app.post("/api/charge")
async def charge(request: Request):
    body = await request.json()
    token = body["token"]
    amount = body["amount"]

    try:
        charge = payjp.Charge.create(
            amount=amount,
            currency="jpy",
            card=token
        )
        return {"status": "success", "charge_id": charge.id}
    except payjp.error.PayjpError as e:
        return {"status": "error", "message": str(e)}

import payjp
from fastapi import FastAPI, Request

payjp.api_key = "sk_test_********"  # 秘密鍵を設定

app = FastAPI()

@app.post("/api/charge")
async def charge(request: Request):
    body = await request.json()
    token = body["token"]
    amount = body["amount"]

    try:
        charge = payjp.Charge.create(
            amount=amount,
            currency="jpy",
            card=token
        )
        return {"status": "success", "charge_id": charge.id}
    except payjp.error.PayjpError as e:
        return {"status": "error", "message": str(e)}

なぜトークン化はフロントで行う？

• クレジットカード番号は絶対にバックエンドに送ってはいけない（セキュリティリスク）
  →クレジットカード番号は PCI DSS などの厳しいルールに則って管理する必要があり、サーバーで直接扱うと大きなセキュリティリスクになります。そのため、Pay.jsを使ってトークン化（疑似的なカード情報への変換）を行い、サーバーではそのトークンだけを扱うことで、セキュリティを保ちながら決済処理ができます。
• Pay.jsがカード番号をトークンに変換してくれる（createToken）
• 自分のサーバーではトークンしか扱わないため、安心・安全

実装注意ポイントまとめ

• 公開鍵（pk_test_〜）はフロントで使う
• 秘密鍵（sk_test_〜）はバックエンドで使う
• カード番号などはトークン化され、自分のサーバーでは触れない仕組みになっている（PCI DSS対応）
• 開発モードではテストカード 4242 4242 4242 4242 が使える（有効期限やCVCは適当でOK）
  テストカード一覧

他のAPI連携の記事はこちらです！

Next.jsでログイン機能を実装｜NextAuth.jsでID・パスワード認証対応

Next.js アプリにログイン機能を追加したい方へ。NextAuth.js を使った ID・パスワード認証、セッション管理、コールバック設定までやさしく解説。

it-bokenki.com

【初心者向け】Mailpitで開発中のメール送信を安全にテストする方法【Docker + Next.js対応】

開発中のメール送信テスト、毎回Gmailを使っていませんか？Mailpitを使えば、ローカル環境でメールの送信・確認が簡単＆安全にできます。DockerとNext.jsを使った導入手順を初心者向けに解説します。

it-bokenki.com

初心者におすすめなのはどれ？

てんハロ運営者

おつかれさまでした！

The post 【初心者向け】Pay.jpとは？クレカ決済を爆速導入できるサービスを解説！特徴・使い方・実装例まとめ first appeared on てんハロ｜未経験エンジニアのIT学習ログ.

プロが教える、業界最前線のノウハウ【Coloso】

困ってた自分に届けたい話

「あのとき、コマンド知っていれば…！」

初めてチーム開発に参加したとき、GitHubの操作に自信がなくて、GUIでぽちぽちと安全そうなボタンを押すばかり。正直、黒い画面（CLI）ってプロっぽくてかっこいいけど、自分にはまだ早いと思ってました。

でも、GUIのツールがアップデートされたり、チームごとに使うツールが違ったりすると、
「え、どこ押せばよかったっけ？」と、毎回迷子に。

そのうち、

• 同じブランチ名で強引にプッシュしてコンフリクトの嵐
• コミットメッセージがバラバラで履歴がぐちゃぐちゃ
• リモートの変更を取り込まないまま作業を進めて大混乱

という、地味だけど痛いトラブルを何度も経験。

「コマンドで操作できていれば、もっと早く正しく対応できたのに…！」と何度も後悔しました。

てんハロ運営者

この記事は、同じように困っていた方への備忘録兼シェアとして書いています。

リポジトリの初期化・クローン

新しく作るとき（自分でゼロから開発を始めるとき）

git init

自分だけのポートフォリオサイトを作るときや、チームにまだ共有しない段階の個人開発を始めるときに、すでに作成したフォルダの中でこのコマンドを打つことで、そのフォルダが「Gitで履歴管理できる状態」になります。その後、GitHubに新しく作ったリモートリポジトリと紐づけるためには、次のようにします。

git remote add origin https://github.com/ユーザー名/リポジトリ名.git

これで、ローカルとGitHubの接続が完了します。

他の人のリポジトリやチームのリポジトリを使いたいとき

git clone https://github.com/チーム/リポジトリ名.git

すでにあるプロジェクトを自分のPCに持ってきたいときに使います。GitHubの「Code」ボタンからURLをコピーして、ターミナルでこのコマンドを実行すると、フォルダごと全部ダウンロードされます。履歴も含まれるので、過去の変更もすべて確認できます。

コミットと履歴管理

ファイルを追加・変更したら履歴に残すとき

git add .
git commit -m "ヘッダーのデザインを調整"

コード修正したあと、そのまま次の作業に進むのではなく、まず変更を一つの「区切り」として記録しておきたいときに使います。
git add . は、全ての変更されたファイルを「記録準備OK」の状態にするコマンドです。
その後、git commit -m "..." でメッセージをつけて保存します。
ここでのメッセージは「何を」「なぜ」変更したのかをチームがわかるように簡潔に書きましょう。

直前のコミットを修正したいとき

git commit --amend

「コミットしたあとにファイルの入れ忘れに気づいた」「メッセージに誤字があった」「やっぱりちょっと修正したい」——そんなときに使えるのが git commit --amend です。

このコマンドを実行すると、直前のコミットを上書きする形で修正できます。たとえば、ファイルを追加し忘れていたなら、そのファイルを git add でステージングしてから git commit --amend を実行すれば、1つのまとまったコミットにすることができます。

なお、すでにGitHubにpushしているコミットをamendすると履歴が変わるため注意が必要です（その場合は --force 付きで再pushが必要になります）。

ローカル作業中に「コミットやり直したい」と思ったら、まず git commit --amend を思い出してみてください

過去の履歴をパッと確認したいとき

git log --oneline --graph --decorate

誰がいつどんな変更をしたかを見たいときに使います。
長い履歴をだらだらと読むのではなく、1行ずつコンパクトに見られるので視認性がとても良いです。
--graph をつけることで、どのブランチがどこから分かれて、どこで合流したかもわかりやすくなります。

ブランチ操作

作業用の新しいブランチを作って、すぐに移動したいとき

git switch -c 新しいブランチ名

最近のGitでは、ブランチの切り替えや作成は git checkout よりも git switch を使うのが主流になっています。たとえば新しいブランチを作ってすぐにそのブランチに移動したいときには、git switch -c feature/新しいブランチ名 のように書くと、一発でローカルブランチ作成・切り替えが完了します。
すでに作られているブランチに移動したいときは、git switch ブランチ名 だけでOKです。

今のブランチを確認したいとき・他のブランチを見たいとき

git branch

今までに作成されたローカルブランチが一覧で表示されます。今自分がいるブランチには * がついています。作業の前に「今どこにいるか」を確認する習慣をつけるとミスが減ります。

てんハロ運営者

異なるローカルブランチで作業していたことがあり、大変な目に何度もあっている主です。この習慣は大切です… !

作業が終わったブランチを削除したいとき

git branch -d feature/完了したブランチ

不要になったブランチはこまめに消すことで、ローカルがスッキリします。
まだマージしていないのに間違って消そうとすると警告が出ますが、どうしても削除したい場合は -D を使って強制削除もできます。

リモートリポジトリ操作

自分の作業をGitHubにアップしたいとき

git push origin feature/新機能名

作業した内容をチームに共有したいときには、このコマンドでGitHubにアップします。origin はGitHub側のリポジトリ名を意味し、その後に続くのが自分のブランチ名です。もし初めてのプッシュで「上手くリンクできていない」場合は、次のように書くことで自動的に紐づけされます。

git push -u origin feature/新機能名

こうしておけば、次回以降は git push だけでOKになります。

他の人の変更を自分の作業に反映させたいとき

git pull --rebase

GitHub上で別の人が更新していた場合、自分のローカルを最新にしてから作業を再開したいときに使います。--rebase をつけることで、マージコミットを発生させずに履歴をキレイな状態に保てます。

マージ・コンフリクト解消

他のブランチの内容を今のブランチに統合したいとき

git merge ブランチ名

たとえば、現在作業している feature/login-form ブランチに、チームがまとめているメインの開発ブランチ（例：develop や main）の最新変更を取り込みたいときに使います。

この「ブランチ名」の部分には、「取り込みたい変更がある側のブランチ名」を指定します。よくある例としては develop や main ですが、会社やプロジェクトによっては staging や release など別の名前を使っていることもあります。

コンフリクトが起きたとき

ファイルの中に <<<<<<< や ======= が現れたら、それがコンフリクトです。
自分の変更と他の人の変更がぶつかってしまった状態なので、エディタで手動で「どちらを残すか」「どう融合するか」を判断します。修正したら、次のコマンドでコンフリクトが解消されたことをGitに伝えます。

git add コンフリクト解消済みファイル
git commit

トラブルシュート

直前のコミットとの差分を見たいとき

git diff HEAD~1 HEAD

「この前のコミットから何を変えたっけ？」という場面で使います。ファイルを開かなくても、ターミナル上で変更点が確認できます。

昔のコミットに戻したいとき（でも履歴は壊したくない）

git revert <コミットID>

「やっぱりこの機能、いらなかったな…」というときに使います。revert を使えば、「そのコミットを取り消すための新しいコミット」を作ってくれるので、履歴はきれいなまま残ります。履歴を壊す reset より安全です。

作業中の変更を一時的に退避したいとき

git stash

今まさにファイルを編集している途中に「緊急で別ブランチに切り替えて修正お願い！」という指示が来たとします。でもまだコミットもしていないし、今の作業内容は残しておきたい…。そんなときに便利なのがこの git stash コマンドです。

これを実行すると、作業中の変更内容を一時的に「しまっておく」ことができます。ブランチを切り替えたあと、元に戻ってから git stash pop を使えば、さっきまでの変更内容がちゃんと復元されます。

てんハロ運営者

おつかれさまでした！

The post 【初心者向け】現場で役立つGitHubコマンド厳選まとめ｜GUIから卒業したい初心者へ！ first appeared on てんハロ｜未経験エンジニアのIT学習ログ.

未経験でも気軽に！サブスク型プログラミングスクール【Freeks】

困ってた自分に届けたい話

TypeScript定数を定義して、あとからそのまま型にも使いたいとき。

「書いた値を使って型をつくったはずなのに、string型になってる…」
「え、これユニオン型じゃないの？なんで？」
って何回もなった。

毎回型を別で書き直すの、地味に面倒くさいしミスも増える。
そんなときに知った as const、たった一言で「値＝型」になって、ほんとに楽になった。

てんハロ運営者

この記事は、同じように困っていた方への備忘録兼シェアとして書いています。

as constとは？

as const は TypeScript の構文で、値を“そのまま”の形で型として固定するための書き方です。

const COLORS = ["red", "blue", "green"];

const COLORS = ["red", "blue", "green"];

このとき、COLORS の型は string[] になります。
つまり、 "yellow" など本来想定していない値も通ってしまう可能性があります。

しかし as const を使うと

const COLORS = ["red", "blue", "green"] as const;

const COLORS = ["red", "blue", "green"] as const;

これだけで、型はこうなります。

readonly ["red", "blue", "green"]

readonly ["red", "blue", "green"]

中身の "red" | "blue" | "green" を型として使えるようになります。この状態になると、「この配列の中には、決まった値しか入っていない」と型で表現できるようになります。

「型」ってそもそも何？

TypeScriptでは、以下のような基本的な型（プリミティブ型）があります。

多くの人は「型＝stringやnumberのこと」と思っているはずです。
でも、TypeScriptには他にも重要な型の考え方があります。

リテラル型とユニオン型の違い

リテラル型：特定の値だけを許す型

const color: "red" = "red"; // "red" だけOK

const color: "red" = "red"; // "red" だけOK

ユニオン型：複数の値の中からどれか1つを許す型

type Color = "red" | "blue" | "green";

type Color = "red" | "blue" | "green";

つまり、リテラル型は1つだけOK、ユニオン型は”いくつかから1つ選ぶ”感じです。

配列で使う as const

たとえば、次のようなコードがあります。

const COLORS = ["red", "blue", "green"] as const;
type Color = typeof COLORS[number];
// → "red" | "blue" | "green"

const COLORS = ["red", "blue", "green"] as const;
type Color = typeof COLORS[number];
// → "red" | "blue" | "green"

📓 説明

• as const：配列の中身を変更できないようにし、”red” などの固定値として扱う
• typeof COLORS[number]：配列内の要素を全部取り出して、型にする

これで Color型には “red”、”blue”、”green” だけが使えるようになります。

🔍 なぜnumberを使うの？

type Color = typeof COLORS[number];

type Color = typeof COLORS[number];

この number は「配列の中のすべての値を取り出す」という意味です。配列は COLORS[0], COLORS[1] のように数字（=number）でアクセスします。

だから COLORS[number] と書くと、「すべてのインデックス番号に対応する値＝全要素」を指すことになります。これは TypeScript の決まり文句なので、覚えてしまえばOKです。

オブジェクトで使う as const

const STATUS = {
  OK: 200,
  NOT_FOUND: 404,
} as const;

type StatusCode = typeof STATUS[keyof typeof STATUS];
// → 200 | 404

const STATUS = {
  OK: 200,
  NOT_FOUND: 404,
} as const;

type StatusCode = typeof STATUS[keyof typeof STATUS];
// → 200 | 404

📓 説明

• as const：オブジェクトの中身（200 や 404）を固定する
• typeof STATUS[keyof typeof STATUS]：すべての値をまとめて型にする

結局何が便利なの？

as const を使うと、値と型の“二重管理”が不要になります。
たとえば、ボタンの種類を定義しておきたいとき：

const BUTTON_TYPES = ["primary", "secondary", "danger"] as const;
type ButtonType = typeof BUTTON_TYPES[number];

const BUTTON_TYPES = ["primary", "secondary", "danger"] as const;
type ButtonType = typeof BUTTON_TYPES[number];

このようにしておけば：

• 値としてボタンタイプを配列で定義
• 型としてもそのまま使える（”primary” | “secondary” | “danger”）

あとから値を追加・削除しても、型も一緒に変わるので、管理がラクになってミスも防げるんです。

【初心者向け】shadcn/uiとは？導入方法・使い方・メリットを徹底解説｜Tailwind対応のUIライブラリ

shadcn/uiは、Tailwind CSSベースで使える高品質なReact UIライブラリです。初心者にもわかりやすく、shadcn/uiの特徴や導入手順、使い方、MUIなど他のライブラリとの違いまで徹底解説。カスタマイズしやすくて実務にも最適な理由を紹介します。

it-bokenki.com

as const のメリット

❌ as const なし

const roles = ["admin", "user"];
type Role = typeof roles[number]; // → string

const roles = ["admin", "user"];
type Role = typeof roles[number]; // → string

"admin" でも 定義していない "manager" でも通ってしまいます。

✅ as const あり

const roles = ["admin", "user"] as const;
type Role = typeof roles[number]; // → "admin" | "user"

const roles = ["admin", "user"] as const;
type Role = typeof roles[number]; // → "admin" | "user"

型が限定され、間違った値を弾けるようになります。

てんハロ運営者

おつかれさまでした！

The post as const って何？「値＝型」にできるTypeScriptの型ガード術 first appeared on てんハロ｜未経験エンジニアのIT学習ログ.

未経験でも気軽に！サブスク型プログラミングスクール【Freeks】

困ってた自分に届けたい話

CSSって実装方法いろいろありますよね。

• .css ファイル作ってインポート
• タグに style={{}} で直接書く
• Sass や CSS Modules、Styled Components などのライブラリも…

「とりあえず動くけど、チーム開発だとCSSが競合してグチャグチャになる…」
「時間かけてUI組んだのに、おしゃれにならない…」
そんな悩みを抱えていた自分が「これだ！」と思えたのが、shadcn/ui というUIライブラリでした。

てんハロ運営者

この記事は、同じように困っていた方への備忘録兼シェアとして書いています。

shadcn/uiとは？

shadcn/ui は、Tailwind CSS をベースにした、柔軟で拡張可能な UI コンポーネント集です。

よく使うパーツ（ボタン、モーダル、チェックボックスなど）がすぐ使える状態で提供され、しかも自分のプロジェクトに直接コンポーネントのコードが追加されるのが特徴です。

他のUIライブラリとの比較

❌ 普通のUIライブラリ（npmパッケージ）

• npm install で ライブラリをインストールするだけ
• 中身（ボタンの見た目など）は 触れない・カスタムしにくい
• 例：MUI、Chakra UI、Bootstrap

✅ shadcn/ui（プロジェクトに直接追加される）

• コマンドで UI コンポーネントの実物のコードを自分のプロジェクトにコピーしてくれる
• コピーされたコンポーネントは /components/ui/button.tsx などに置かれる
• 自分で見た目や動きを好きに変更できる（完全に自作と同じ感覚）

▶ UIライブラリの比較表

shadcn/uiは「柔軟さ」と「今風の設計」が強み。
プロジェクトのデザインや設計方針にこだわりたいチームやエンジニアに向いています。

shadcn/ui 導入手順

下記の前提条件のもと、shadcn/ui 導入手順をご説明します。

• Next.js（React）プロジェクト
• Tailwind CSSがすでに導入済み

STEP１：初期化

# 初期セットアップ（初回のみ）
npx shadcn@latest init

⚠️ 注意「shadcn-ui@latest」は非推奨？

npx shadcn-ui@latest init のコマンドは古いコマンドです。これを使うと「古い CLI です」とエラーが出ることがあります。現在は上記のように shadcn に名前が変更されています。

STEP２：初期設定 バージョン

Need to install the following packages:
shadcn@2.9.2
Ok to proceed? (y) y

• shadcn のバージョン 2.9.2 を一時的にインストールして使ってもいいか？
• npx は必要なパッケージをその場で取得して実行する

という確認です。
y を入力すれば、そのまま shadcn CLI が使えるようになります。

STEP３：初期設定 UIの色選択

Which color do you want to use as base color?
  - Slate
  - Gray
  - Zinc
  - Neutral
  - Stone
  - Red
  - Blue
  - Green

UIのカラー選択について聞かれています。

📝 補足：色選択の戦略

STEP４：UIコンポーネントを追加

下記のコマンドを実行すると　src/components/ui配下にそれぞれのUIファイルが作成されます。

Tailwind CSS のクラスを使ってスタイリングされており、即他のコンポーネントでimportして利用できます。フォルダ移動しても問題ありません。

# ボタンを追加
npx shadcn@latest add button

# inputタグを追加
npx shadcn@latest add input

# チェックボックスを追加
npx shadcn@latest add checkbox

shadcn/ui 実装

import { Input } from "@/components/ui/input";
import { Checkbox } from "@/components/checkbox";
import { Button } from "@/components/ui/button";

export default function Home() {
  return (
      <div className=" flex flex-col items-center space-y-4 mt-10">
        <Input placeholder="メールアドレスを入力" className="w-[18rem]" />

        <div className="flex items-center">
          <Checkbox id="terms" />
          <label htmlFor="terms" className="ml-2 text-sm">
            利用規約に同意する
          </label>
        </div>
        
        <Button>送信</Button>
      </div>
  );
}

import { Input } from "@/components/ui/input";
import { Checkbox } from "@/components/checkbox";
import { Button } from "@/components/ui/button";

export default function Home() {
  return (
      <div className=" flex flex-col items-center space-y-4 mt-10">
        <Input placeholder="メールアドレスを入力" className="w-[18rem]" />

        <div className="flex items-center">
          <Checkbox id="terms" />
          <label htmlFor="terms" className="ml-2 text-sm">
            利用規約に同意する
          </label>
        </div>
        
        <Button>送信</Button>
      </div>
  );
}

▶ 実際に表示されるUI

たった数行のコードで、ここまでスタイリッシュなフォームが作れます！
初期化してから10分かからないくらいです。とても簡単です。

知っておきたい実装方法「スタイルの切り替えスイッチ」

CSSを書いていると、同じ見た目のように見えて少しだけスタイルが違う、というパターンが増えてきます。

たとえば…

• 青い「送信」ボタン
• 赤い「削除」ボタン
• 枠だけの「戻る」ボタン

こんなふうに種類を切り替えたい時に、毎回 className を条件分岐するのって大変です。そんなときに便利なのが、variant という考え方です。

variant を使うと、スタイルの管理が楽！

variant はざっくり言うと、「スタイルの種類をキーワードで切り替える仕組み」です。

ボタンを例にすると、このように実装できます。

import { Button } from "@/components/ui/button";

export default function Home() {
  return (
      <div className=" flex flex-col items-center space-y-4 mt-10">
        <Button>デフォルト</Button>
        <Button variant="destructive">削除</Button>
        <Button variant="outline">戻る</Button>
      </div>
  );
}

import { Button } from "@/components/ui/button";

export default function Home() {
  return (
      <div className=" flex flex-col items-center space-y-4 mt-10">
        <Button>デフォルト</Button>
        <Button variant="destructive">削除</Button>
        <Button variant="outline">戻る</Button>
      </div>
  );
}

▶ 実際に表示されるUI

文字列で渡すだけで、見た目がガラッと変わります。
この variant="◯◯" がスタイルの切り替えスイッチになるんです。

中身はカスタマイズOK！

実はこの variant の仕組みは button.tsx に定義されています。

たとえば以下のように書かれています。

// components/ui/button.tsx の一部
const buttonVariants = cva(
  "inline-flex items-center justify-center text-sm font-medium",
  {
    variants: {
      variant: {
        default:
          "bg-primary text-primary-foreground shadow-xs hover:bg-primary/90",
        destructive:
          "bg-destructive text-white shadow-xs hover:bg-destructive/90 focus-visible:ring-destructive/20 dark:focus-visible:ring-destructive/40 dark:bg-destructive/60",
        outline:
          "border bg-background shadow-xs hover:bg-accent hover:text-accent-foreground dark:bg-input/30 dark:border-input dark:hover:bg-input/50",
      },
    },
    defaultVariants: {
      variant: "default",
    },
  }
);

// components/ui/button.tsx の一部
const buttonVariants = cva(
  "inline-flex items-center justify-center text-sm font-medium",
  {
    variants: {
      variant: {
        default:
          "bg-primary text-primary-foreground shadow-xs hover:bg-primary/90",
        destructive:
          "bg-destructive text-white shadow-xs hover:bg-destructive/90 focus-visible:ring-destructive/20 dark:focus-visible:ring-destructive/40 dark:bg-destructive/60",
        outline:
          "border bg-background shadow-xs hover:bg-accent hover:text-accent-foreground dark:bg-input/30 dark:border-input dark:hover:bg-input/50",
      },
    },
    defaultVariants: {
      variant: "default",
    },
  }
);

つまり、この button.tsx ファイルを自由に編集ができます！

たとえば、次のように variant に custom を追加すれば…

custom: "bg-purple-500 text-white hover:bg-purple-600"

custom: "bg-purple-500 text-white hover:bg-purple-600"

オリジナルのスタイルが使えるようになります。

<Button variant="custom">カスタム</Button>

<Button variant="custom">カスタム</Button>

と書くだけで、紫色のカスタムボタンが表示されます。

ライブラリに依存せず、自分好みのデザインに柔軟にカスタマイズできるのが shadcn/ui の大きな魅力です。

shadcn/ui のメリット・デメリット

メリット

• ✅ 自由に編集できる
  コードがプロジェクトに含まれるため、業務要件に合わせて修正可能
• ✅ Tailwindと相性抜群
  スタイリングが統一され、CSS設計に悩まなくて済む
• ✅ 導入が簡単
  npx shadcn@latest add xxx でどんどん追加できる
• ✅ 全てオープンな React コンポーネント
  依存性を最小限に抑えられる

デメリット

• ❌ バージョン管理は自己責任
  一括更新されないのでメンテの工夫が必要
• ❌ 生成ファイルが増える
  チーム内で「どこから来たファイルか」把握する工夫が必要

UIライブラリで次におすすめなのはこちらです🤞

MUIとは？ReactでおしゃれなUIがすぐ作れるライブラリを解説！

MUIはReactで美しいUIを簡単に作れるライブラリ。豊富なコンポーネントと柔軟なカスタマイズが魅力です。

it-bokenki.com

どんなプロジェクトに向いてる？

てんハロ運営者

おつかれさまでした！

The post 【初心者向け】shadcn/uiとは？導入方法・使い方・メリットを徹底解説｜Tailwind対応のUIライブラリ first appeared on てんハロ｜未経験エンジニアのIT学習ログ.

未経験でも気軽に！サブスク型プログラミングスクール【Freeks】

困ってた自分に届けたい話

「UUIDってなに？ただの英数字の羅列でしょ？主キーなら 1, 2, 3, ... の連番でいいじゃん。これ間違いのコードだな」と思って、自信満々に連番に直したら……

上司

それ、意図的にUUID使ってるやつだから！

コードレビューで盛大に恥をかいたのは、まぎれもない私です。

てんハロ運営者

この記事は、同じように困っていた方への備忘録兼シェアとして書いています。

UUIDとは？世界で一意なIDを自動で発行する仕組み

UUID（Universally Unique Identifier：ユニバーサルユニークアイデンティファイア）とは、重複しないIDを自動生成するための仕組みです。

たとえば以下のような形式です

550e8400-e29b-41d4-a716-446655440000

Pythonでは uuid4() を使えば、ランダムなUUID（バージョン4）を簡単に作成できます。

from uuid import uuid4

print(str(uuid4()))
// 出力例: 9b9f8c2b-3b33-4d89-9a5b-b5bfb17906f2

from uuid import uuid4

print(str(uuid4()))
// 出力例: 9b9f8c2b-3b33-4d89-9a5b-b5bfb17906f2

UUIDのバージョン一覧

なぜ連番ではダメなの？UUIDが選ばれる理由

理由１： セキュリティが高い

/users/3 のあとに /users/4 が見れてしまうようなアプリ、実際にあります。
連番だと「次のID」が簡単に予測されてしまい、
個人情報の漏洩やなりすましの原因にもなりかねません。UUIDならこのような推測が非常に困難になります。

理由２：分散システムでも安心

複数のサーバー・アプリで同時にデータを保存するとき、連番ではIDがぶつかるリスクがあります。UUIDはそれぞれのシステムが独立して発行しても衝突しないので、分散構成との相性が抜群です。

理由３： 一意性が保証されている

UUIDは世界中で唯一のIDになるように設計されています。
ユーザーID、ファイル名、セッションID、APIキー…「他とかぶってはいけないID」に最適です。

UUIDを使用した実装が知りたい！という方は記事はこちらです🤞

【初心者OK】FastAPI×MySQLをDockerで連携！Pythonで爆速開発する方法

初心者でも安心！FastAPIとMySQL、Dockerを使ってユーザー登録APIを構築する手順をわかりやすく解説。Next.jsとの連携方法や環境構築、登録フォームの実装まで丁寧に紹介します。

it-bokenki.com

でもUUIDにもデメリットはある

• 読みにくい：長くて人間には読みにくい文字列
• やや遅い場合あり：連番よりもデータベースの処理が遅くなることがある

じゃあ結局、UUIDと連番どっちを使えばいいの？

てんハロ運営者

おつかれさまでした！

The post UUIDとは？主キーに使われる理由と連番との違いをわかりやすく解説 first appeared on てんハロ｜未経験エンジニアのIT学習ログ.

未経験でも気軽に！サブスク型プログラミングスクール【Freeks】

困ってた自分に届けたい話

PHPでは「連想配列」って言ってたけど、Pythonでは「辞書」？
JavaScriptでは「オブジェクト」？……それって全部同じもの？違うの？

最初はその違いがわからなくて、APIから返ってきたレスポンスを読み間違えそうになりました。
指定の値を取り出そうとしても、「user[0]」「user.name」など書き方がバラバラで混乱。

「結局、辞書化ってなに？」
ちゃんと理解しておかないと、中身の意味を間違えて使ってしまうかも…と不安になりました。

てんハロ運営者

この記事は、同じように困っていた方への備忘録兼シェアとして書いています。

辞書化とは「キーと値のセット」にすること

辞書化とは、データを「キー（名前）」と「値（データ）」のペアで管理すること。
これにより、意味のある形でデータを整理できます。

※ 下記の説明コードはPythonです。

配列と辞書の違い

このように配列ではデータの意味が不明確になりがち。

user = ["田中", 28, "エンジニア"]

print(user[0])  # 名前の項目が入っているが、これだけでは見てもわからない

user = ["田中", 28, "エンジニア"]

print(user[0])  # 名前の項目が入っているが、これだけでは見てもわからない

下記のように、辞書化すると読みやすくなります。
キーで意味を伝えられるため、保守性・可読性が大きく向上します。

user = {
    "名前": "田中",
    "年齢": 28,
    "職業": "エンジニア"
}

print(user["名前"])  # キーが「名前」だと"田中"とかが入っているとすぐわかる

user = {
    "名前": "田中",
    "年齢": 28,
    "職業": "エンジニア"
}

print(user["名前"])  # キーが「名前」だと"田中"とかが入っているとすぐわかる

辞書化するメリット

① 変数名でデータの意味がすぐわかる

配列では、インデックス番号（0番目、1番目など）でしかアクセスできないため、その値が何を表しているかが不明確です。辞書型にすることで、名前でアクセスできるようになり、読みやすくミスが減るコードになります。

# 配列だと
user = ["田中", 28, "エンジニア"]
print(user[1])  # これは「年齢」だけど、見ただけではわからない

# 辞書化すれば
user = {"名前": "田中", "年齢": 28, "職業": "エンジニア"}
print(user["年齢"])  # 28（意味が明確）

# 配列だと
user = ["田中", 28, "エンジニア"]
print(user[1])  # これは「年齢」だけど、見ただけではわからない

# 辞書化すれば
user = {"名前": "田中", "年齢": 28, "職業": "エンジニア"}
print(user["年齢"])  # 28（意味が明確）

② 値の追加・変更が簡単

キーを指定して値を直接書き換えることができるため、データの更新がシンプルです。
配列だと、インデックスを探して書き換える必要があり、ミスが起こりやすいです。

# 年齢を29歳に更新
user["年齢"] = 29

# 年齢を29歳に更新
user["年齢"] = 29

③ キーを使って素早くデータを探せる

辞書型は、キーを使って直接アクセスするため、検索が高速です。
配列のように「どこにあるかな」と探す必要がありません。

# すぐに「職業」を取得できる
print(user["職業"])  # "エンジニア"

# すぐに「職業」を取得できる
print(user["職業"])  # "エンジニア"

さらに、.get() を使えば「キーがあるかどうか」のチェックも簡単にできます：

print(user.get("趣味", "情報なし"))  # → "情報なし"

print(user.get("趣味", "情報なし"))  # → "情報なし"

④ JSON形式と相性が良く、Web開発に必須

Webアプリケーションでは、APIのリクエストやレスポンスでJSON形式（＝辞書化された構造）がよく使われます。そのため、辞書型に慣れておくとフロントエンド⇔バックエンド間のデータのやりとりがスムーズになります。

{
  "name": "田中",
  "email": "tanaka@example.com"
}

このレスポンスを受け取ったフロント側の処理は、たとえば JavaScript なら下記のコード簡単で指定できます。辞書化されていることで、シンプルかつ直感的に扱えるのが大きなメリットです。

console.log(data.name);  //  "田中"

console.log(data.name);  //  "田中"

各言語の「辞書化」例

応用：辞書の中にリスト・辞書を入れることもできる

user = {
    "名前": "田中",
    "スキル": ["Python", "Django"],
    "連絡先": {
        "メール": "tanaka@example.com",
        "電話": "090-XXXX-XXXX"
    }
}

user = {
    "名前": "田中",
    "スキル": ["Python", "Django"],
    "連絡先": {
        "メール": "tanaka@example.com",
        "電話": "090-XXXX-XXXX"
    }
}

てんハロ運営者

おつかれさまでした！

404 NOT FOUND | てんハロ｜未経験エンジニアのIT学習ログ

Hello Worldから、今日も生きてる

it-bokenki.com

The post 辞書化とは？プログラミング初心者が必ず覚える「キーと値」の考え方 first appeared on てんハロ｜未経験エンジニアのIT学習ログ.

未経験でも気軽に！サブスク型プログラミングスクール【Freeks】

困ってた自分に届けたい話

上司

FastAPIで、フロントから送られた
名前・メールアドレス・パスワードをMySQLに登録しておいて

・・・いや、はじめてのPython開発でそれ言う！？
フォルダ構成？DB接続？何もわからん！

でも、調べまくって、なんとか FastAPI × MySQL × Docker で爆速開発できました。

てんハロ運営者

この記事は、同じように困っていた方への備忘録兼シェアとして書いています。

使用した技術スタック

• FastAPI（Python製の軽量Webフレームワーク）
• MySQL（データベース）
• Docker Compose（複数のコンテナをまとめて起動）
• Next.js（フロントエンド／フォーム送信で使用）

プロジェクト構成

FastAPI × Docker 開発環境のセットアップ

環境変数（.env.local）の設定方法

環境変数をルート直下に .env.local として作成します。（開発環境で実行するため）
Dockerコンテナ間通信では DB_HOST を MySQL サービス名にします。

DB_HOST=
DB_PORT=
DB_NAME=
DB_USER=
DB_PASSWORD=

DB_HOST=
DB_PORT=
DB_NAME=
DB_USER=
DB_PASSWORD=

Docker（MySQL × FastAPI 連携）の書き方

対象ファイル：docker/docker-compose.yml

MySQLとFastAPIを同時に立ち上げるDocker Compose設定です。

すでにMySQLの設定がある場合は、FastAPIの定義だけ追加してください。

version: '3'
services:
  mysql:
    image: mysql:8.0
    ... # 詳細は別記事へ

  FastAPI:
    build:
      context: ..　　// Dockerfile がある位置を指定
      dockerfile: docker/Dockerfile
    container_name: 任意のコンテナ名
    ports:
      - "8000:8000"
    volumes:
      - ../backend:/app
    env_file:
      - ../.env.local
    depends_on:　　// 「このアプリは mysql が先に起動していないとダメだよ」という意味
      - mysql

version: '3'
services:
  mysql:
    image: mysql:8.0
    ... # 詳細は別記事へ

  FastAPI:
    build:
      context: ..　　// Dockerfile がある位置を指定
      dockerfile: docker/Dockerfile
    container_name: 任意のコンテナ名
    ports:
      - "8000:8000"
    volumes:
      - ../backend:/app
    env_file:
      - ../.env.local
    depends_on:　　// 「このアプリは mysql が先に起動していないとダメだよ」という意味
      - mysql

MySQLの設定方法は下記の記事をチェックしてください。

DockerでMySQLをローカル構築｜Mac対応・CLI操作と文字化け対策も解説

DockerでMacにMySQLの開発環境を一瞬で構築！Apple Silicon対応のインストール手順、docker-compose.ymlと.env連携、utf8mb4設定、ターミナル操作でのDB作成まで初心者にもわかりやすく解説しています。

it-bokenki.com

FastAPIアプリ起動設定

対象ファイル：docker/ Dockerfile

FastAPIアプリの起動手順を定義する Dockerfile を用意します。

⚠️ 注意点

• 大文字スタートの Dockerfile というファイル名でなければいけない
• 拡張子は 不要・つけてはいけない（.txtや.pyなどはNG）

// Pythonの軽くて早いバージョンを指定
FROM python:3.10-slim

// 実行時に.pycファイルを作らないように設定（大量にできてGitに上げれなくなる）
ENV PYTHONDONTWRITEBYTECODE=1

// コンテナ内で作業するディレクトリを作成
WORKDIR /app

// ホスト側の ./backend フォルダを、コンテナ内の /app に丸ごとコピー
COPY ./backend /app

// requirements.txt をコピーして、必要なライブラリをインストール
COPY ./backend/requirements.txt .

RUN pip install --upgrade pip
RUN pip install -r requirements.txt

// アプリを起動
CMD ["uvicorn", "main:app", "--host", "0.0.0.0", "--port", "8000", "--reload"]

// Pythonの軽くて早いバージョンを指定
FROM python:3.10-slim

// 実行時に.pycファイルを作らないように設定（大量にできてGitに上げれなくなる）
ENV PYTHONDONTWRITEBYTECODE=1

// コンテナ内で作業するディレクトリを作成
WORKDIR /app

// ホスト側の ./backend フォルダを、コンテナ内の /app に丸ごとコピー
COPY ./backend /app

// requirements.txt をコピーして、必要なライブラリをインストール
COPY ./backend/requirements.txt .

RUN pip install --upgrade pip
RUN pip install -r requirements.txt

// アプリを起動
CMD ["uvicorn", "main:app", "--host", "0.0.0.0", "--port", "8000", "--reload"]

requirements.txt の作成とバージョン管理

対象ファイル：backend/requirements.txt

Pythonパッケージのインストール一覧を記述します。

下記のコマンドで、Dockerで一括で自動インストールすることができます。

pip install -r requirements.txt 

🌱 豆知識

パッケージ名しか書いていない場合：常に最新バージョンがインストールされる（試作段階・練習中向け）

fastapi
uvicorn
SQLAlchemy
PyMySQL
python-dotenv

バージョンを指定している場合：誰が使っても同じ環境になる（チーム開発・本番運用向け）

fastapi==0.116.0
uvicorn==0.35.0
SQLAlchemy==2.0.41
PyMySQL==1.1.1
python-dotenv==1.1.1

.gitignore の設定でGitをクリーンに保つ

対象ファイル：.gitignore

Pythonのをインストールすると自動生成ファイルができて、Gitにそのまま上げると大変なことになります。
下記のように設定すると、Gitに不要なファイルが混ざらなくなります。おすすめです。

# バーチャル環境除外
venv/

# Pythonのバイトコードキャッシュを無視
__pycache__/
*.pyc
*.pyo
*.pyd

テーブル作成

事前に users テーブルを作っておきましょう。DockerのMySQL内で作成できます。

作成方法については、下記の記事をご覧ください。

Drizzleとは？TypeScriptで型安全にSQL・マイグレーションを管理する方法

Drizzle ORMを使って、TypeScriptで型安全にSQLやマイグレーションを管理する方法をわかりやすく解説。初期設定からスキーマ定義、リレーション設定まで丁寧に紹介！

it-bokenki.com

DockerでMySQLをローカル構築｜Mac対応・CLI操作と文字化け対策も解説

DockerでMacにMySQLの開発環境を一瞬で構築！Apple Silicon対応のインストール手順、docker-compose.ymlと.env連携、utf8mb4設定、ターミナル操作でのDB作成まで初心者にもわかりやすく解説しています。

it-bokenki.com

Next.jsで登録フォームを作成

下記は登録フォームの registerForm.tsx の内容の内容です。
register/page.tsx で呼び出すと、下記の画像のような登録フォームになります。

"use client";

import { useState } from "react";

export default function RegisterForm() {
  const [form, setForm] = useState({
    name: "",
    email: "",
    password: "",
  });

  const [message, setMessage] = useState("");

  const handleChange = (e: React.ChangeEvent<HTMLInputElement>) => {
    setForm({ ...form, [e.target.name]: e.target.value });
  };

  const handleSubmit = async (e: React.FormEvent) => {
    e.preventDefault();
    try {
      const res = await fetch("http://localhost:8000/registration", {
        method: "POST",
        headers: {
          "Content-Type": "application/json",
        },
        body: JSON.stringify(form),
      });

      const data = await res.json();
      if (res.ok) {
        setMessage("登録成功！ ユーザーID: " + data.user_id);
      } else {
        setMessage("登録失敗: " + (data.detail || "エラーが発生しました"));
      }
    } catch (error) {
      console.error("エラー:", error);
      setMessage("通信エラーが発生しました");
    }
  };

  return (
    <form onSubmit={handleSubmit} className="space-y-4 max-w-md mx-auto mt-10">
      <div>
        <label htmlFor="name" className="block font-medium mb-1">
          お名前
        </label>
        <input
          id="name"
          name="name"
          placeholder="例：山田 太郎"
          value={form.name}
          onChange={handleChange}
          required
          className="border px-3 py-2 w-full"
        />
      </div>

      <div>
        <label htmlFor="email" className="block font-medium mb-1">
          メールアドレス
        </label>
        <input
          id="email"
          name="email"
          placeholder="例：taro@example.com"
          type="email"
          value={form.email}
          onChange={handleChange}
          required
          className="border px-3 py-2 w-full"
        />
      </div>

      <div>
        <label htmlFor="password" className="block font-medium mb-1">
          パスワード
        </label>
        <input
          id="password"
          name="password"
          placeholder="半角英数字8文字以上"
          type="password"
          value={form.password}
          onChange={handleChange}
          required
          className="border px-3 py-2 w-full"
        />
      </div>

      <button
        type="submit"
        className="bg-blue-600 text-white px-4 py-2 rounded w-full"
      >
        ユーザー登録
      </button>

      {message && <p className="mt-4 text-sm text-gray-700">{message}</p>}
    </form>
  );
}

"use client";

import { useState } from "react";

export default function RegisterForm() {
  const [form, setForm] = useState({
    name: "",
    email: "",
    password: "",
  });

  const [message, setMessage] = useState("");

  const handleChange = (e: React.ChangeEvent<HTMLInputElement>) => {
    setForm({ ...form, [e.target.name]: e.target.value });
  };

  const handleSubmit = async (e: React.FormEvent) => {
    e.preventDefault();
    try {
      const res = await fetch("http://localhost:8000/registration", {
        method: "POST",
        headers: {
          "Content-Type": "application/json",
        },
        body: JSON.stringify(form),
      });

      const data = await res.json();
      if (res.ok) {
        setMessage("登録成功！ ユーザーID: " + data.user_id);
      } else {
        setMessage("登録失敗: " + (data.detail || "エラーが発生しました"));
      }
    } catch (error) {
      console.error("エラー:", error);
      setMessage("通信エラーが発生しました");
    }
  };

  return (
    <form onSubmit={handleSubmit} className="space-y-4 max-w-md mx-auto mt-10">
      <div>
        <label htmlFor="name" className="block font-medium mb-1">
          お名前
        </label>
        <input
          id="name"
          name="name"
          placeholder="例：山田 太郎"
          value={form.name}
          onChange={handleChange}
          required
          className="border px-3 py-2 w-full"
        />
      </div>

      <div>
        <label htmlFor="email" className="block font-medium mb-1">
          メールアドレス
        </label>
        <input
          id="email"
          name="email"
          placeholder="例：taro@example.com"
          type="email"
          value={form.email}
          onChange={handleChange}
          required
          className="border px-3 py-2 w-full"
        />
      </div>

      <div>
        <label htmlFor="password" className="block font-medium mb-1">
          パスワード
        </label>
        <input
          id="password"
          name="password"
          placeholder="半角英数字8文字以上"
          type="password"
          value={form.password}
          onChange={handleChange}
          required
          className="border px-3 py-2 w-full"
        />
      </div>

      <button
        type="submit"
        className="bg-blue-600 text-white px-4 py-2 rounded w-full"
      >
        ユーザー登録
      </button>

      {message && <p className="mt-4 text-sm text-gray-700">{message}</p>}
    </form>
  );
}

FastAPIのバックエンド側の実装

各ファイルの役割

db.py：DB接続設定

.env.local を読み込んで DB に接続する準備をする

from sqlalchemy import create_engine // DBとの接続エンジンを作るための関数
from sqlalchemy.orm import sessionmaker, declarative_base
from dotenv import load_dotenv  // .envファイルから環境変数を読み込むための関数
import os // 環境変数を取得するための標準ライブラリ

// ルートの.env読み込み
load_dotenv(dotenv_path=".env.local")

DB_HOST = os.getenv("DB_HOST")
DB_PORT = os.getenv("DB_PORT")
DB_NAME = os.getenv("DB_NAME")
DB_USER = os.getenv("DB_USER")
DB_PASSWORD = os.getenv("DB_PASSWORD")

// データベース接続用のURLを作成
DB_URL = f"mysql+pymysql://{DB_USER}:{DB_PASSWORD}@{DB_HOST}:{DB_PORT}/{DB_NAME}?charset=utf8mb4"

// 接続準備
engine = create_engine(DB_URL)
SessionLocal = sessionmaker(bind=engine, autocommit=False, autoflush=False)
Base = declarative_base()

from sqlalchemy import create_engine // DBとの接続エンジンを作るための関数
from sqlalchemy.orm import sessionmaker, declarative_base
from dotenv import load_dotenv  // .envファイルから環境変数を読み込むための関数
import os // 環境変数を取得するための標準ライブラリ

// ルートの.env読み込み
load_dotenv(dotenv_path=".env.local")

DB_HOST = os.getenv("DB_HOST")
DB_PORT = os.getenv("DB_PORT")
DB_NAME = os.getenv("DB_NAME")
DB_USER = os.getenv("DB_USER")
DB_PASSWORD = os.getenv("DB_PASSWORD")

// データベース接続用のURLを作成
DB_URL = f"mysql+pymysql://{DB_USER}:{DB_PASSWORD}@{DB_HOST}:{DB_PORT}/{DB_NAME}?charset=utf8mb4"

// 接続準備
engine = create_engine(DB_URL)
SessionLocal = sessionmaker(bind=engine, autocommit=False, autoflush=False)
Base = declarative_base()

main.py：アプリ起動とCORS設定

FastAPIアプリを起動し、CORS設定とルーター登録を行います。

Next.js開発環境で実行しているので、今回はhttp://localhost:3000を指定（ここは環境変数設定にしたほうがいいかもです）

from fastapi import FastAPI
from fastapi.middleware.cors import CORSMiddleware 　// 別ドメインからのアクセスを許可するための設定
from routers import registration

// FastAPIアプリケーションの本体を作成
app = FastAPI()

// CORS（クロスオリジン）設定を追加：別のドメインからアクセスを許可する
app.add_middleware(
    CORSMiddleware,
    allow_origins=["http://localhost:3000"],  // フロントエンド（Next.js）からのアクセスを許可
    allow_credentials=True,  // クッキーなどの認証情報を含めた通信を許可
    allow_methods=["*"],  // GETやPOSTなど、すべてのHTTPメソッドを許可
    allow_headers=["*"],  // すべてのリクエストヘッダーを許可（認証トークンなど）
)

// APIの処理を追加（今回はregistration.pyのルーター）
app.include_router(registration.router)

from fastapi import FastAPI
from fastapi.middleware.cors import CORSMiddleware 　// 別ドメインからのアクセスを許可するための設定
from routers import registration

// FastAPIアプリケーションの本体を作成
app = FastAPI()

// CORS（クロスオリジン）設定を追加：別のドメインからアクセスを許可する
app.add_middleware(
    CORSMiddleware,
    allow_origins=["http://localhost:3000"],  // フロントエンド（Next.js）からのアクセスを許可
    allow_credentials=True,  // クッキーなどの認証情報を含めた通信を許可
    allow_methods=["*"],  // GETやPOSTなど、すべてのHTTPメソッドを許可
    allow_headers=["*"],  // すべてのリクエストヘッダーを許可（認証トークンなど）
)

// APIの処理を追加（今回はregistration.pyのルーター）
app.include_router(registration.router)

models/user.py：ユーザーテーブル定義

SQLAlchemyで userテーブル 構造を定義します。主キーは UUID を自動生成。

import uuid
from sqlalchemy import Column, String, Boolean, DateTime
from db import Base

class Users(Base):
    __tablename__ = "users"

    user_id = Column(String(36), primary_key=True, default=lambda: str(uuid.uuid4()))
    name = Column(String(100), nullable=False)
    email = Column(String(100), nullable=False, unique=True)
    password = Column(String(255), nullable=False)
    updated_by = Column(String(100))
    updated_at = Column(DateTime)

import uuid
from sqlalchemy import Column, String, Boolean, DateTime
from db import Base

class Users(Base):
    __tablename__ = "users"

    user_id = Column(String(36), primary_key=True, default=lambda: str(uuid.uuid4()))
    name = Column(String(100), nullable=False)
    email = Column(String(100), nullable=False, unique=True)
    password = Column(String(255), nullable=False)
    updated_by = Column(String(100))
    updated_at = Column(DateTime)

uuidについて、もっと知りたい方は下記の記事をどうぞ！

UUIDとは？主キーに使われる理由と連番との違いをわかりやすく解説

UUIDはなぜ主キーに使われるのか？連番との違いやメリット・デメリット、UUIDの種類（v1〜v5）まで初心者向けにやさしく解説。PythonでのUUIDの生成方法も紹介します。

it-bokenki.com

schemas/user.py：バリデーション用スキーマ定義

フロントから送られてくる入力値（name, email, password）をバリデーションします。

from pydantic import BaseModel

class UserCreate(BaseModel):
    name: str
    email: str
    password: str

from pydantic import BaseModel

class UserCreate(BaseModel):
    name: str
    email: str
    password: str

utils/common_fields.py：共通項目の自動付与

updated_by や updated_at などの共通項目を自動で付与します。

from datetime import datetime, timezone, timedelta

def generate_common_fields():
    jst_now = datetime.now(timezone(timedelta(hours=9)))
    return {
        "updated_by": "system",
        "updated_at": jst_now,
    }

from datetime import datetime, timezone, timedelta

def generate_common_fields():
    jst_now = datetime.now(timezone(timedelta(hours=9)))
    return {
        "updated_by": "system",
        "updated_at": jst_now,
    }

routers/registration.py：登録処理ルーターの作成

POSTされた情報をDBに保存するルーターです。辞書展開でスキーマ＋共通フィールドを結合します。

from fastapi import APIRouter, Depends
from sqlalchemy.orm import Session　　// DBとのやりとりの型（Session）を指定
from db import SessionLocal
from models.user import Users
from schemas.user import UserCreate
from utils.common_fields import generate_common_fields

router = APIRouter()

// データベースとの接続を一時的に確立して、使い終わったら自動で切るための仕組み
def get_db():
    db = SessionLocal()  // DB接続を開始
    try:
        yield db　　 // データを登録・検索
    finally:
        db.close()　// DB接続を終了
        
@router.post("/registration")
def create_user(user: UserCreate, db: Session = Depends(get_db)):
    common_fields = generate_common_fields()

    db_user = Users(
        **user.dict(),
        **common_fields
    )

    db.add(db_user)
    db.commit()

    return {"message": "登録成功"}

from fastapi import APIRouter, Depends
from sqlalchemy.orm import Session　　// DBとのやりとりの型（Session）を指定
from db import SessionLocal
from models.user import Users
from schemas.user import UserCreate
from utils.common_fields import generate_common_fields

router = APIRouter()

// データベースとの接続を一時的に確立して、使い終わったら自動で切るための仕組み
def get_db():
    db = SessionLocal()  // DB接続を開始
    try:
        yield db　　 // データを登録・検索
    finally:
        db.close()　// DB接続を終了
        
@router.post("/registration")
def create_user(user: UserCreate, db: Session = Depends(get_db)):
    common_fields = generate_common_fields()

    db_user = Users(
        **user.dict(),
        **common_fields
    )

    db.add(db_user)
    db.commit()

    return {"message": "登録成功"}

※ここで辞書化の記事をつくっていれよう！

トラブル対応：ログでFastAPIのエラーを確認する方法

ログをリアルタイムで監視するには、以下のコマンドを使いましょう。

-f は --follow の略で「ログを継続して追いかける」オプションです。

docker logs -f コンテナ名

docker logs -f コンテナ名

てんハロ運営者

おつかれさまでした！

The post 【初心者OK】FastAPI×MySQLをDockerで連携！Pythonで爆速開発する方法 first appeared on てんハロ｜未経験エンジニアのIT学習ログ.

未経験でも気軽に！サブスク型プログラミングスクール【Freeks】

困ってた自分に届けたい話

上司

FastAPIでAPIサーバー立てて。仮想環境つくって、動かして。

・・・いや、FastAPIって何？PythonでWebサーバー作ったことないけど！？
何から始めればいいの…？

でも、調べてみたら、意外とコマンドだけでサクサク環境構築できる。
「さすが爆速APIフレームワーク」って言われるだけある！

環境構築に不安がある方でも、手順どおりに進めれば5分でAPIが動くはず。

てんハロ運営者

この記事は、同じように困っていた方への備忘録兼シェアとして書いています。

FastAPIとは？

ひとことで言うと、「爆速でAPIが作れるPython製フレームワーク」です。

🧩 特徴

• 少ないコードで、読みやすく整理されたAPIが作れる
• 自動でAPIの説明書（ドキュメント）を作成してくれる
• 入力ミスを事前にチェックできる仕組みがある
• 処理速度が速く、ストレスが少ない
• 書き方が直感的で覚えやすい
• 機能を後から追加しやすく、拡張性が高い

前提：Pythonがインストールされていること

まず、ターミナルで以下のコマンドを実行し、Pythonが使える状態か確認しましょう。

python3 --version

# 実行結果
Python 3.9.6

バージョンが 3.x 系であればOKです。
もし command not found と出る場合は、MacにPythonをインストールする手順を先に確認してください。

FastAPI 環境構築手順

STEP 1：VSCodeで拡張機能をインストール

以下の2つの拡張機能をインストールしておくと、開発がスムーズになります。

• Python：Microsoft公式のPython拡張機能
• Pylance：コード補完とエラーチェックを強化する拡張機能

STEP 2：プロジェクトフォルダを作成

例として、backend/ フォルダ内で作業を進めます。

mkdir backend
cd backend

STEP 3：仮想環境を作成＆有効化（Macの場合）

# 仮想環境作成
python3 -m venv venv

# 仮想環境の有効化
source venv/bin/activate

プロンプトが (venv) と表示されれば、仮想環境が有効になっています。

STEP 4：FastAPIと実行サーバーをインストール

FastAPIを実際に動かすには、まず2つのパッケージをインストールするだけでOKです。

pip install fastapi uvicorn

このコマンドを実行するだけで、FastAPIを動かすのに必要な最低限の環境が整います。

👉 インストールされる主なパッケージ

① fastapi：PythonでAPIを簡単に作るためのツール

1. 「こういうURLにアクセスされたら、こう返すよ！」っていうルールを書く
2. 入力ミスがあったら、自動で「それ間違ってるよ」って教えてくれる
3. 作ったAPIの説明書を自動でつくってくれる

② uvicorn：FastAPIを動かすサーバー

1. 作ったAPIを動かすための土台（サーバー）になる
2. サーバーを起動すると、ブラウザで http://localhost:8000 を開くだけで結果を見られる
3. http://localhost:8000/docs にアクセスすれば、ボタン付きのテスト画面でAPIを試せる

FastAPIを実行するにはこの2つだけで一通りの動作確認が可能です。
データベース連携やセキュリティ対策などをする場合は、追加でパッケージを入れていきます
（例：sqlalchemy, pydantic[email], python-jose など）。

STEP 5：main.py を作成してAPI定義

このコードは「ルートURLにアクセスしたらJSONでメッセージを返すだけ」の最小APIです。

from fastapi import FastAPI

app = FastAPI()

@app.get("/")
def read_root():
    return {"message": "Hello FastAPI!"}

from fastapi import FastAPI

app = FastAPI()

@app.get("/")
def read_root():
    return {"message": "Hello FastAPI!"}

STEP 6：APIを起動

以下のコマンドで開発サーバーを起動します。

uvicorn main:app --reload

STEP 7：動作確認リンク

以下のURLにアクセスして、FastAPIが動いているか確認しましょう。

実際の画面

▶ http://localhost:8000 の表示画面

▶ http://localhost:8000/docs の表示画面

▶ http://localhost:8000/redoc

ここまでできれば、FastAPIのローカル開発環境は完成です。
あとはルーティングを増やしたり、DBとつないだり、自由にAPI開発を進めていけます。

🔧 開発に活用する具体的な実装例はこちらで紹介しています

【初心者OK】FastAPI×MySQLをDockerで連携！Pythonで爆速開発する方法

初心者でも安心！FastAPIとMySQL、Dockerを使ってユーザー登録APIを構築する手順をわかりやすく解説。Next.jsとの連携方法や環境構築、登録フォームの実装まで丁寧に紹介します。

it-bokenki.com

てんハロ運営者

おつかれさまでした！

The post 初心者向け：FastAPIの環境構築ガイド【5分でAPIが動く】 first appeared on てんハロ｜未経験エンジニアのIT学習ログ.

てんハロ運営者

バグヲ

Dockerのイメージのひとつだっけ？

てんハロ運営者

こんなあなたにピッタリな記事👇

• 開発環境でメール送信処理をテストしたい
• GmailやSendGridの実アカウントは使いたくない
• MailpitをDockerで簡単に立ち上げたい

がまぁまぁわかります！

IT/Webエンジニア専門の転職エージェント【ユニゾンキャリア】

困ってた自分に届けたい話

これまでずっと、メール送信のテストは自分のアドレスに送って確認していました。
それでもなんとかなってはいたのですが、複数のメールアドレスで挙動を確認したいときなど、とにかく手間がかかる…。

「みんなどうやってるんだろう？」と疑問に思っていたときに、たまたま見つけたのがMailpitというツールでした。

最初は「送信したメールをWeb画面で見るってどういうこと？」と、正直よくわかりませんでした。
ですが、実際に使ってみると「こんな便利なものがあったのか！」と衝撃を受けました。

それ以来、開発中のメール送信テストはMailpit一択です。

てんハロ運営者

この記事は、同じように困っていた方への備忘録兼シェアとして書いています。

Mailpitとは？

Mailpit は、開発環境向けの「ローカルメール受信サーバー」です。
実際のメールサーバー（Gmailなど）を使わず、開発中のフォーム送信や通知メールがきちんと送られているかを、ブラウザ上で確認できます。

メリット

• ✅ ローカルでメール受信ができる
• ✅ ブラウザでメールの中身をすぐ確認できる（Web GUI）
• ✅ SendGridや本物のメールアドレスは不要

DockerでMailpitを起動する手順

STEP１：docker-compose.yml の記載

まずは、以下のように docker-compose.yml を記述します。

 mailpit:
    image: axllent/mailpit:latest
    container_name: 任意のコンテナ名
    ports:
      - "1025:1025" # SMTP受信用
      - "8025:8025" # 管理画面（GUI）

 mailpit:
    image: axllent/mailpit:latest
    container_name: 任意のコンテナ名
    ports:
      - "1025:1025" # SMTP受信用
      - "8025:8025" # 管理画面（GUI）

STEP２：コンテナを起動

docker compose up -d

STEP３：正常にコンテナができたか確認

docker compose ps

ブラウザで http://localhost:8025 にアクセスすると、下記のMailpitの管理画面が表示されます。

nodemailer + Mailpit の実装（Next.js）

STEP１：パッケージをインストール

# メール送信用のライブラリ
npm install nodemailer
npm install nodemailer-sendgrid
npm install @sendgrid/mail

# 入力バリデーションライブラリ
npm install zod

# nodemailer 用の TypeScript 型定義ファイル
npm install --save-dev @types/nodemailer

STEP２：APIエンドポイントを作成（/api/mail/route.ts）

import { NextResponse } from "next/server";
import { getTransporter } from "@/lib/mailer";

export async function POST(req: Request) {
  const { email } = await req.json();
  const transporter = getTransporter();

  try {
    await transporter.sendMail({
      from: process.env.MAIL_FROM,
      to: email,
      subject: "自動返信テスト",
      text: "こちらは自動返信メールです。",
    });

    return NextResponse.json({ success: true });
  } catch (err) {
    console.error("メール送信エラー:", err);
    return NextResponse.json({ success: false }, { status: 500 });
  }
}

import { NextResponse } from "next/server";
import { getTransporter } from "@/lib/mailer";

export async function POST(req: Request) {
  const { email } = await req.json();
  const transporter = getTransporter();

  try {
    await transporter.sendMail({
      from: process.env.MAIL_FROM,
      to: email,
      subject: "自動返信テスト",
      text: "こちらは自動返信メールです。",
    });

    return NextResponse.json({ success: true });
  } catch (err) {
    console.error("メール送信エラー:", err);
    return NextResponse.json({ success: false }, { status: 500 });
  }
}

STEP３：メール送信フォームを作る（components/mailer/form.tsx）

"use client";

import { useState } from "react";
import { z } from "zod";

const schema = z.object({
  email: z.string().email("正しいメールアドレスを入力してください"),
});

export default function MailForm() {
  const [email, setEmail] = useState("");
  const [error, setError] = useState("");
  const [sent, setSent] = useState(false);

  const handleSubmit = async () => {
    const result = schema.safeParse({ email });
    if (!result.success) {
      setError(result.error.errors[0].message);
      return;
    }

    try {
      const res = await fetch("/api/mail", {
        method: "POST",
        headers: { "Content-Type": "application/json" },
        body: JSON.stringify({ email }),
      });
      if (res.ok) {
        setSent(true);
        setError("");
      } else {
        setError("送信に失敗しました");
      }
    } catch (err) {
      console.error(err);
      setError("通信エラーが発生しました");
    }
  };

  return (
    <div className="p-4 border rounded bg-gray-50 max-w-2xl mx-auto mt-10">
      <div className="flex flex-col gap-4 mt-10">
        <input
          type="email"
          placeholder="メールアドレスを入力"
          value={email}
          onChange={(e) => setEmail(e.target.value)}
          className="p-3 border border-gray-300 rounded"
        />

        <div className="text-center">
          <button
            type="button"
            onClick={handleSubmit}
            className="bg-blue-600 text-white px-6 py-2 rounded"
          >
            送信
          </button>
        </div>

        {error && <p className="text-red-600 text-sm text-center">{error}</p>}
        {sent && (
          <p className="text-green-600 text-sm text-center">
            自動返信を送信しました
          </p>
        )}
      </div>
    </div>
  );
}

"use client";

import { useState } from "react";
import { z } from "zod";

const schema = z.object({
  email: z.string().email("正しいメールアドレスを入力してください"),
});

export default function MailForm() {
  const [email, setEmail] = useState("");
  const [error, setError] = useState("");
  const [sent, setSent] = useState(false);

  const handleSubmit = async () => {
    const result = schema.safeParse({ email });
    if (!result.success) {
      setError(result.error.errors[0].message);
      return;
    }

    try {
      const res = await fetch("/api/mail", {
        method: "POST",
        headers: { "Content-Type": "application/json" },
        body: JSON.stringify({ email }),
      });
      if (res.ok) {
        setSent(true);
        setError("");
      } else {
        setError("送信に失敗しました");
      }
    } catch (err) {
      console.error(err);
      setError("通信エラーが発生しました");
    }
  };

  return (
    <div className="p-4 border rounded bg-gray-50 max-w-2xl mx-auto mt-10">
      <div className="flex flex-col gap-4 mt-10">
        <input
          type="email"
          placeholder="メールアドレスを入力"
          value={email}
          onChange={(e) => setEmail(e.target.value)}
          className="p-3 border border-gray-300 rounded"
        />

        <div className="text-center">
          <button
            type="button"
            onClick={handleSubmit}
            className="bg-blue-600 text-white px-6 py-2 rounded"
          >
            送信
          </button>
        </div>

        {error && <p className="text-red-600 text-sm text-center">{error}</p>}
        {sent && (
          <p className="text-green-600 text-sm text-center">
            自動返信を送信しました
          </p>
        )}
      </div>
    </div>
  );
}

STEP４：nodemailerの設定（lib/mailer.ts）

開発／本番 切り替え対応の内容を記載します。

開発環境と本番環境でメール送信先や処理を切り替える処理は、lib/ 配下の共通関数モジュールにまとめておくのが一般的のようです。

こうすることで、環境ごとの処理分岐を1か所に集約でき、APIエンドポイントやフロントエンド側からは毎回同じ関数を呼び出すだけで済むようになります。
結果として、コードが見やすくなり、保守性も高まります。

// src/lib/mailer.tsx

import { createTransport } from "nodemailer";
// @ts-expect-error 型定義がないため無視
import sgTransport from "nodemailer-sendgrid";

// 環境切り替え
export const getTransporter = () => {
  if (process.env.NODE_ENV === "production") {
    // 本番：例 SendGrid を使用
    return createTransport(
      sgTransport({
        apiKey: process.env.SENDGRID_API_KEY!,
      })
    );
  } else {
    // 開発：Mailpit を使用
    return createTransport({
      host: process.env.MAIL_HOST,
      port: Number(process.env.MAIL_PORT),
      secure: process.env.MAIL_SECURE === "true",
    });
  }
};

// src/lib/mailer.tsx

import { createTransport } from "nodemailer";
// @ts-expect-error 型定義がないため無視
import sgTransport from "nodemailer-sendgrid";

// 環境切り替え
export const getTransporter = () => {
  if (process.env.NODE_ENV === "production") {
    // 本番：例 SendGrid を使用
    return createTransport(
      sgTransport({
        apiKey: process.env.SENDGRID_API_KEY!,
      })
    );
  } else {
    // 開発：Mailpit を使用
    return createTransport({
      host: process.env.MAIL_HOST,
      port: Number(process.env.MAIL_PORT),
      secure: process.env.MAIL_SECURE === "true",
    });
  }
};

STEP５：環境変数設定

.env.local ：開発用.envのこと。mailpitの環境変数設定を記載します。

# mailpit設定
MAIL_HOST=
MAIL_PORT=
MAIL_SECURE=

.env.production ：本番環境用.envのこと。今回はSendGridの環境変数設定を記載しています。

# SendGrid設定
SENDGRID_API_KEY=

.env ：開発・本番で共通使用.envのこと。今回は、送信者のメールアドレスが該当します。

FROM_EMAIL=

STEP６：実行

npm run dev で開発環境のNext.jsを起動

http://localhost:3000 からフォームにアクセス

下記のinputタグにメールアドレスを入力する

STEP７：実行結果

メールを送信すると http://localhost:8025 のMailpitにメールが表示される！

まとめ｜Mailpitは開発中のメール送信テストに最適

• 開発中にメールを安全・手軽に確認したいなら、Mailpitは超便利
• Dockerだけで立ち上がるから環境構築も簡単
• Next.js + nodemailerでも問題なく動作確認が可能

Dockerもっと勉強したい！と思われた方は、こちらの記事もおすすめです。

DockerでMySQLをローカル構築｜Mac対応・CLI操作と文字化け対策も解説

DockerでMacにMySQLの開発環境を一瞬で構築！Apple Silicon対応のインストール手順、docker-compose.ymlと.env連携、utf8mb4設定、ターミナル操作でのDB作成まで初心者にもわかりやすく解説しています。

it-bokenki.com

Next.js × Docker MinIO｜S3互換ストレージにファイルを保存する手順

DockerでMinIOを構築し、Next.jsやNode.jsからS3互換のローカルストレージにファイルを保存・取得する方法を、初心者向けに手順付きでわかりやすく解説します。

it-bokenki.com

てんハロ運営者

おつかれさまでした！

The post 【初心者向け】Mailpitで開発中のメール送信を安全にテストする方法【Docker + Next.js対応】 first appeared on てんハロ｜未経験エンジニアのIT学習ログ.

プロが教える、業界最前線のノウハウ【Coloso】

困ってた自分に届けたい話

Next.jsでWebアプリを作っていると、見かける next.config.js というファイル。

「設定って何をどうすればいいの？」
「これはなんのファイル？」
「書かないとダメ？」

触らなくても動くから、触らずそっとファイル閉じた。
そんな自分が恥ずかしかったため、今回調査しました。

てんハロ運営者

この記事は、同じように困っていた方への備忘録兼シェアとして書いています。

next.config.jsとは？

next.config.js は、Next.jsアプリ全体の動作やビルド設定をカスタマイズするためのファイルです。
プロジェクトのルートに配置し、Next.jsの起動時に読み込まれます。

主な用途の例

• 外部ドメインの画像を許可する
• URLのリダイレクトやリライトを設定する
• Reactの開発用チェックを有効にする

つまり、「Next.jsアプリのグローバルな設定」をまとめる場所です。

初期状態の next.config.js（TypeScriptプロジェクトの場合）

TypeScriptでNext.jsプロジェクトを作った直後は、次のような初期状態になっています。

import type { NextConfig } from "next";

const nextConfig: NextConfig = {
  /* config options here */
};

export default nextConfig;

import type { NextConfig } from "next";

const nextConfig: NextConfig = {
  /* config options here */
};

export default nextConfig;

これは「設定内容はここに書いてね」という意味です。
設定がなければデフォルトの動作で進みます。必要になったら書き足すスタイルでOKです。

デフォルト設定の内容

• NextConfig ：設定の書き間違いを防ぐためのヒントを出してくれる型
• nextConfig ：いろんな設定項目をこの中に追加できる
• export default：Next.jsに読み込ませる

よく使うNext.jsの設定3選（2025年版）

設定ファイルにいろいろ書けるのは事実ですが、実際に現場でよく使われているのは以下の3つです。

① 外部画像のURLを許可する（images）

images: {
  domains: ["images.unsplash.com"],
}

images: {
  domains: ["images.unsplash.com"],
}

Next.jsの <Image /> コンポーネントで外部サイトの画像（CDNなど）を使いたいときは、その画像のドメインを事前に許可しておく必要があります。そのため、ドメイン部分のみ記載します。

ここで言う「外部画像」とは？

たとえば、Unsplashの画像をそのままURLで表示したい場合
※Unsplash：高品質な写真を無料で使えるサイト

<Image
  src="https://images.unsplash.com/photo-12345"
  width={500}
  height={300}
  alt="風景"
/>

<Image
  src="https://images.unsplash.com/photo-12345"
  width={500}
  height={300}
  alt="風景"
/>

このような外部URLから直接読み込む画像は、Next.jsのセキュリティルール上、そのままではブロックされます。そのため、読み込みを許可するドメインを明示的に指定する必要があるのです。

import する画像とはどう違うの？

import sampleImage from "@/assets/sample.jpg";

<Image 
　src={sampleImage} 
　width={500} 
　height={300} 
　alt="サンプル" 
/>

import sampleImage from "@/assets/sample.jpg";

<Image 
　src={sampleImage} 
　width={500} 
　height={300} 
　alt="サンプル" 
/>

このように import した画像は、プロジェクト内にあるファイルなので、許可設定は不要です。

② ページのリダイレクト（redirects）

async redirects() {
  return [
    {
      source: "/old-page",
      destination: "/new-page",
      permanent: true,
    },
  ];
}

async redirects() {
  return [
    {
      source: "/old-page",
      destination: "/new-page",
      permanent: true,
    },
  ];
}

古いURLにアクセスされたとき、自動で別ページへ飛ばしたいときに使います。
permanent: true にすると、SEO的にも「ページ移動済み」と評価されるのでおすすめです。

なぜ async なの？

この関数が async になっているのは、必要に応じて外部APIなどから転送先リストを取得するなど、非同期処理ができるようにするためです。
（もちろん、今回のように return だけでもOKです）

③ Reactの厳格モードをONにする（reactStrictMode）

開発中に「Reactの間違いを教えてくれるモード」。初心者ほどONがおすすめ！

reactStrictMode: true

reactStrictMode: true

この設定をしたからといって、アプリの動きが変わるわけではありません。

「true」にすると何が起きるの？　

開発中だけ、以下のようなチェックモードが動くようになります。

• useEffect などが 2回実行される（副作用の確認）
• 非推奨なReactの使い方を 警告してくれる
• コンポーネントの再レンダリングミスに気づきやすい

本番には関係ないの？

本番（build された後のアプリ）では一切影響なし
なので、「true にしておいて損はない」設定です。

よく使う設定を全部まとめるとこうなる

import type { NextConfig } from "next";

const nextConfig: NextConfig = {
  // 開発モードでReactのチェックを強化
  reactStrictMode: true,

  // 外部ドメインからの画像を許可
  images: {
    domains: ["images.unsplash.com"],
  },

  // ページのリダイレクト設定
  async redirects() {
    return [
      {
        source: "/old-page",
        destination: "/new-page",
        permanent: true,
      },
      {
        source: "/temporary",
        destination: "/maintenance",
        permanent: false,
      },
    ];
  },
};

export default nextConfig;

import type { NextConfig } from "next";

const nextConfig: NextConfig = {
  // 開発モードでReactのチェックを強化
  reactStrictMode: true,

  // 外部ドメインからの画像を許可
  images: {
    domains: ["images.unsplash.com"],
  },

  // ページのリダイレクト設定
  async redirects() {
    return [
      {
        source: "/old-page",
        destination: "/new-page",
        permanent: true,
      },
      {
        source: "/temporary",
        destination: "/maintenance",
        permanent: false,
      },
    ];
  },
};

export default nextConfig;

補足：環境ごとの切り替えは .NODE_ENV でOK！

昔は next.config.js で環境変数を設定していたこともありましたが、コード内で .NODE_ENV を利用して切り替えるのが一般的です。

これは「今が開発環境かどうか」を判定して、使うAPIのURLを分けている例です。

const isDev = process.env.NODE_ENV === "development";

const apiUrl = isDev
  ? "http://localhost:3000/api"
  : "https://example.com/api";

const isDev = process.env.NODE_ENV === "development";

const apiUrl = isDev
  ? "http://localhost:3000/api"
  : "https://example.com/api";

NODE_ENV は実行コマンドで自動で決まります。
.env や .env.production のファイル名で決まるわけではなく、コマンドによって自動で切り替わると覚えましょう。

💡 結論 ：環境切り替えについて next.config.js に無理に書く必要はありません。

設定を変えたら再起動を忘れずに

next.config.ts を変更したら、開発サーバーを一度止めて再起動しないと反映されないことがあります。

# Ctrl + C で止めてから
npm run dev

Next.js をもっと詳しく学びたい人へおすすめの本

▶ 動かしながら基礎から学びたい人に
「まずは手を動かしたい！」という人にぴったりの一冊。基本構造から丁寧に解説されており、Next.jsとReactの連携も自然に身につきます。初学者でもステップを追いやすく、サンプルアプリの構築を通して理解を深められる構成です。

動かして学ぶ！Next.js/React開発入門 新品価格 ￥3,168から (2025/7/21 23:18時点)

▶ Reactの経験があり、次のステップへ進みたい人に
「Reactは少し触ったことがあるけど、Next.jsを仕事で使いこなしたい」という人向け。実践を意識した構成で、Webアプリの構造、レンダリング戦略、SEO対応など、現場で必要なノウハウが詰まっています。

React Next.js 実践プログラミング入門: React Next.js モダンWeb開発実践ガイド 新品価格 ￥3,300から (2025/7/21 23:17時点)

▶ App Routerを本格的に学びたいエンジニアへ
App Routerを軸に、最新のNext.js開発に対応した本格派。中級者以上の方が「一歩先へ進みたい」と感じたときに読みたい一冊。デザインパターンや設計の視点もあり、長期的に役立つ内容です。

実践Next.js —— App Routerで進化するWebアプリ開発 エンジニア選書 新品価格 ￥3,665から (2025/7/21 23:18時点)

てんハロ運営者

おつかれさまでした！

The post 【初心者向け】Next.jsの設定ファイル「next.config.js」の使い方と定番設定3つ first appeared on てんハロ｜未経験エンジニアのIT学習ログ.