未経験でも気軽に！サブスク型プログラミングスクール【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学習ログ.

プロが教える、業界最前線のノウハウ【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学習ログ.

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

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

開発が進んでくると、ファイルの階層が深くなっていきますよね。
気づけば、../../../components/Button のような import 文が何度も登場…。

「あれ？このファイル、どこから import してたっけ？」
「../ を3回戻って、また中に入って……ややこしい！」

そんな風に、パスが複雑になって迷子になる問題に悩まされていた方も多いはず。
実際、現場でも「エイリアスパスを使わないとPRが通らない」なんてこともあるらしいっす…。

てんハロ運営者

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

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時点)

エイリアスってなに？

エイリアスとは、長い相対パスを短くわかりやすくするための別名のこと。

// Before（地獄）
import Header from "../../../components/shared/Header";

// After（天国）
import Header from "@/components/shared/Header";

// Before（地獄）
import Header from "../../../components/shared/Header";

// After（天国）
import Header from "@/components/shared/Header";

このように、@/ を使ってパスを簡略化することで、

• 階層の深さに悩まされない
• コードが一気に読みやすくなる

といったメリットがあります。

Next.js + TypeScriptでの設定方法

tsconfig.json にパスエイリアスを設定

こうしておくと、@/components は src/components にマッピングされます。

{
  "compilerOptions": {  // tsのコンパイル設定
    "baseUrl": "./",　　　// パスの基準（プロジェクトルート）
    "paths": {
      "@/*": ["src/*"]　// "@/..." → "src/..." に変換
    }
  }
}

{
  "compilerOptions": {  // tsのコンパイル設定
    "baseUrl": "./",　　　// パスの基準（プロジェクトルート）
    "paths": {
      "@/*": ["src/*"]　// "@/..." → "src/..." に変換
    }
  }
}

現場ではどう使われてる？

エイリアスは、以下のように「機能別フォルダ」と組み合わせて使われています。

こうすることで、プロジェクトの保守性がグッと上がります。
誰が見ても、何を import してるのか一目瞭然です。

豆知識：baseUrl を "./" にしないとどうなる？

baseUrl の設定が "./" になっていないと、パスの解決がうまくいきません。
たとえば、"src" にしてしまうと @/components が src/src/components になってしまい、バグの原因に。

迷ったら baseUrl は "./" に固定でOK！

もっと開発知識つけたい方！こちらの記事はどうですか？

GitHubのHTTPS・SSH・CLIの違いとは？接続方法の選び方をわかりやすく解説！

GitHubへの接続方法にはHTTPS、SSH、CLIの3つがあります。それぞれの特徴や違いを知ることで、よりスムーズなGit操作が可能になります。初心者にもわかりやすく、使い方や選び方を丁寧に解説します。

it-bokenki.com

てんハロ運営者

おつかれさまでした！

The post Next.jsでimport地獄を解消！@/でスッキリ書くエイリアス設定術 first appeared on てんハロ｜未経験エンジニアのIT学習ログ.

Instagramフォロワー数9,500人を越える人気のもち・大福店 えにかいたもち

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

初めてログイン機能を作ったとき、「ログイン状態をどうやって保持すればいいの？」「セッションって何？」と疑問だらけ。

ググって出てきたコードをコピペしてみても、うまく動かず。
認証の仕組みが見えづらくて、「これで本当に安全なのかな？」と不安になることも…。

そんなときに出会ったのが NextAuth.js。

てんハロ運営者

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

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時点)

[…nextauth] ってなに？

[...nextauth] は、Next.jsの「キャッチオールルート」という仕組みを使った特別なファイルです。

これは、/api/auth/ 以下の複数のAPIエンドポイント（ログイン・ログアウトなど）を
1つのファイルでまとめて管理できる便利な仕組みです。

なぜ[…nextauth] は必要なの？

NextAuth.js を使うと、認証に関するさまざまなAPIが自動的に使われます。

たとえば、こんなエンドポイントがあります。

これらを1つ1つ手動で作ると管理が大変です。

そこで、[...nextauth] というファイル1つにまとめることで、
これらすべてのAPIルートを一括で定義・管理できるようになります。

App Router で実装

Next.js 13 以降では、新しく登場した app/ ディレクトリを使う構成（App Router）が推奨されています。これが 新規プロジェクトやモダンな構成に適した形です。

App Router のファイル構成

App Router の実装内容

// app/api/auth/[...nextauth]/route.ts

// 認証のエントリーポイント
import NextAuth from "next-auth/next";
import { authOptions } from "@/lib/auth";

// NextAuthに設定を渡して処理を作成
const handler = NextAuth(authOptions);

// App RouterではGETとPOSTのメソッドを個別にエクスポートする必要あり
export { handler as GET, handler as POST };

// lib/auth.ts

import CredentialsProvider from "next-auth/providers/credentials";
import type { Session } from "next-auth";
import type { JWT } from "next-auth/jwt";　// NextAuth.jsが使っているトークン（認証情報）の型名
import type { NextAuthOptions } from "next-auth";

// JWTにカスタム情報（role）を追加する場合の型定義
interface Token extends JWT {
  role?: string;
}

export const authOptions: NextAuthOptions = {
  // ① ログイン方法の指定（ここではIDとパスワードによる認証）
  providers: [
    CredentialsProvider({
      name: "Credentials",
      credentials: {
        username: { label: "ユーザーID", type: "text" },
        password: { label: "パスワード", type: "password" },
      },
      // 認証処理：環境変数のユーザー名・パスワードと一致すれば成功
      async authorize(credentials) {
        if (
          credentials?.username === process.env.ADMIN_USERNAME &&
          credentials?.password === process.env.ADMIN_PASSWORD
        ) {
          return { id: "1", name: "管理者", role: "admin" };
        }
        return null; // 認証失敗
      },
    }),
  ],

  // ② カスタムページ（ログイン画面など）を指定
  pages: {
    signIn: "/auth/signin", // 独自ログインページを使う場合
  },

  // ③ セッションの設定（JWT方式を利用）
  session: {
    strategy: "jwt",  // サーバーセッションではなくトークンで管理
    maxAge: 100,      // トークンの有効期限（秒）
  },

  // ④ コールバック処理（トークンやセッションに追加情報を含める）
  callbacks: {
    // JWT作成時：ユーザー情報からroleをtokenに追加
    async jwt({ token, user }: { token: Token; user?: unknown }) {
      if (user && typeof user === "object" && "role" in user) {
        token.role = (user as { role?: string }).role;
      }
      return token;
    },
    // セッション作成時：tokenからroleを取り出してsessionに追加
    async session({ session, token }: { session: Session; token: Token }) {
      session.user = {
        ...session.user,
        role: token.role ?? null,
      } as typeof session.user & { role?: string | null };
      return session;
    },
  },
};

Pages Router で実装

pages/ ディレクトリを使う旧構成で、Next.js 初期から使われていたルーターです。
今でも既存プロジェクトではよく使われていますが、新規プロジェクトではあまり使われません。
今後は app/ を使う App Router が推奨されています。

Pages Router のファイル構成

Pages Router の実装内容

// pages/api/auth/[...nextauth].ts

import NextAuth from "next-auth";
import CredentialsProvider from "next-auth/providers/credentials";
import type { Session } from "next-auth";
import type { JWT } from "next-auth/jwt";

// JWTにカスタム情報（role）を追加する場合の型定義
interface Token extends JWT {
  role?: string;
}

export default NextAuth({
  // ① ログイン方法の指定（ここではIDとパスワードによる認証）
  providers: [
    CredentialsProvider({
      name: "Credentials",
      credentials: {
        username: { label: "ユーザーID", type: "text" },
        password: { label: "パスワード", type: "password" },
      },
      // 認証処理：環境変数のユーザー名・パスワードと一致すれば成功
      async authorize(credentials) {
        if (
          credentials?.username === process.env.ADMIN_USERNAME &&
          credentials?.password === process.env.ADMIN_PASSWORD
        ) {
          return { id: "1", name: "管理者", role: "admin" };
        }
        return null; // 認証失敗
      },
    }),
  ],

  // ② カスタムページ（ログイン画面など）を指定
  pages: {
    signIn: "/auth/signin", // 独自ログインページを使う場合
  },

  // ③ セッションの設定（JWT方式を利用）
  session: {
    strategy: "jwt",  // サーバーセッションではなくトークンで管理
    maxAge: 100,      // トークンの有効期限（秒）
  },

  // ④ コールバック処理（トークンやセッションに追加情報を含める）
  callbacks: {
    // JWT作成時：ユーザー情報からroleをtokenに追加
    async jwt({ token, user }: { token: Token; user?: unknown }) {
      if (user && typeof user === "object" && "role" in user) {
        token.role = (user as { role?: string }).role;
      }
      return token;
    },
    // セッション作成時：tokenからroleを取り出してsessionに追加
    async session({ session, token }: { session: Session; token: Token }) {
      session.user = {
        ...session.user,
        role: token.role ?? null,
      } as typeof session.user & { role?: string | null };
      return session;
    },
  },
});

まとめ

ファイル1つ（または2つ）で以下すべてのAPIが動く！そのため、それぞれを個別に作る必要なし！

• /api/auth/signin
• /api/auth/signout
• /api/auth/session
• /api/auth/callback/credentials
• /api/auth/csrf

てんハロ運営者

おつかれさまでした！

Azure Blob Storage にファイルをアップロードする方法【Next.js × React】

Next.jsとAzure Blob Storageを使ったファイルアップロードの実装方法を初心者向けに解説。設定手順からReactでのUI作成、APIの書き方まで！

it-bokenki.com

The post […nextauth] とは？Next.jsでログイン認証を実装する方法【App Router対応】 first appeared on てんハロ｜未経験エンジニアのIT学習ログ.

Instagramフォロワー数9,500人を越える人気のもち・大福店 えにかいたもち

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

初めてログイン機能を作ったとき、「ログイン状態をどうやって保持すればいいの？」「セッションって何？」と疑問だらけ。

ググって出てきたコードをコピペしてみても、うまく動かず。
認証の仕組みが見えづらくて、「これで本当に安全なのかな？」と不安になることも…。

そんなときに出会ったのが NextAuth.js。

てんハロ運営者

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

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時点)

全体構成

認証設定（lib/auth.ts）

Next.js でログイン機能を作るときに必要な「設定ファイル」です。
NextAuth.js というライブラリが、このファイルを見てどう動くか決めます。

NextAuthの設定内容

ログイン方式の設定（providers）

「どんな方法でログインできるようにするか」を決める場所です。

例：

• ユーザー名とパスワードでログイン ： CredentialsProvider を使う
• Google アカウントでログイン ： GoogleProvider を使う
• GitHub アカウントでログイン ： GitHubProvider を使う

→ 今回は「IDとパスワードでログインしたい」ので CredentialsProvider を使います。

セッション管理（session）

「ログイン状態（セッション）をどうやって覚えておくか？」を設定します。

例：

• jwt：サーバーに保存せず、ログイン情報をクッキーに入れて管理（軽い）
• database：ログイン情報をデータベースに保存（管理がしっかり）

→ 今回は簡単な構成にしたいので、jwt を使っています。

コールバック関数（callbacks）

「ログインしたあと、追加で何かしたいとき」に使います。

例：

• ログインしたユーザーの「名前」や「権限（adminなど）」をセッションに保存する
• トークンに extra 情報を加える

→ 今回は、「管理者かどうか（role）」をセッションに入れています。

lib 配下にファイルを配置する理由

lib は「ロジック（処理）や設定などの共通ユーティリティを置く場所」という意味で使われます。auth.ts はアプリ全体で使う「認証の設定」 をまとめたものなので、lib に置くのが自然です。

🗂 配置イメージ

実装内容

⚠️ 実装時の注意点

• ログインID・パスワードは直書き厳禁。今回は.envに直書きしてしまっています。
  （次回、Azure SQL Databaseにパスワード等を格納する記事出します！）
• role など独自の情報をセッションやトークンに保持したい場合は、callbacks を使って明示的に追加します。

import CredentialsProvider from "next-auth/providers/credentials";
import type { Session } from "next-auth";
import type { JWT } from "next-auth/jwt";

interface Token extends JWT {
  role?: string;
}

export const authOptions = {
  // CredentialsProvider の設定（IDとパスワードでログインさせるための仕組み）
  providers: [
    CredentialsProvider({
      // ログイン画面のフォームの中身
      credentials: {
        username: { label: "ユーザーID", type: "text" },
        password: { label: "パスワード", type: "password" },
      },

      // 入力されたIDとパスワードが正しいかチェックする関数
      async authorize(credentials) {
        if (
          credentials?.username === process.env.["任意の環境変数名"] &&
          credentials?.password === process.env.["任意の環境変数名"]
        ) {
          return { id: "1", name: "管理者", role: "admin" };
        }
        return null;
      },
    }),
  ],
  // 独自に作成するページのパス
  pages: {
    signIn: "/auth/signin",
  },
  // セッションの設定
  session: {
    strategy: "jwt" as const,
    maxAge: 100,
  },
  // ログイン後、ユーザー情報（user）やトークン（token）に追加情報（ここでは role）を保持・共有
  callbacks: {
    // useSession() で取り出すとき、session.user にも role を渡す
    async session({ session, token }: { session: Session; token: Token }) {
      session.user = {
        ...session.user,
        role: token.role ?? null,
      } as typeof session.user & { role?: string | null };
      return session;
    },
    // ログイン後、トークンに role を保存
    async jwt({ token, user }: { token: Token; user?: unknown }) {
      if (user && typeof user === "object" && "role" in user) {
        token.role = (user as { role?: string }).role;
      }
      return token;
    },
  },
};

認証エンドポイント（app/api/auth/[...nextauth]/route.ts）

APIルートの設定です。NextAuth の設定を使ってログイン処理などを実行できるようにします。

⚠️ 実装時の注意点

• route.ts では NextAuth をラップし、GET/POST 両方のメソッドをエクスポートする必要があります。
• authOptions を正しく lib/auth.ts からインポートできていることを確認してください。

import NextAuth from "next-auth/next";
import { authOptions } from "@/lib/auth";

const handler = NextAuth(authOptions);
export { handler as GET, handler as POST };

アプリ全体で認証を使う（components/Providers.tsx）（app/layout.tsx）

セッション（ログイン状態）をアプリ全体で共有できるようにするためのコンポーネントです。

アプリのレイアウト全体を Providers で囲み、どのページでもログイン情報を使えるようにします。

SessionProviderとは

SessionProvider は、ログイン状態（セッション）をアプリ全体で使えるようにするための部品です。

囲んでいないと、
useSession()（ログイン状態を取得する関数）
getSession()（セッション情報を取得する関数）
などが正しく動作しません。

SessionProvider を直接 layout.tsxに記載しない理由

Next.js App Router では layout.tsx はサーバーコンポーネントであることが前提 です。なので、以下のような理由で SessionProvider を直接 layout.tsx に書けないことがあります。

❗問題の背景

• SessionProvider は クライアントコンポーネント（"use client" が必要）
• 一方で、layout.tsx はデフォルトで サーバーコンポーネント
• サーバーコンポーネントに use client をつけると、metadata などのサーバー専用機能が使えなくなる

SessionProvider を直接 layout.tsx に書くと、layout.tsx 全体がクライアントコンポーネントになり、Next.js 本来の機能（metadata など）が使えなくなる。

そのため、別のクライアントコンポーネントに切り出してラップするのが推奨されているわけです。

実装内容

✅ 解決策：<Providers> コンポーネントを別に作成して、ラップする！！

Providers.tsx を作って "use client" をつけることで、

"use client";
import { SessionProvider } from "next-auth/react";

export function Providers({ children }: { children: React.ReactNode }) {
  return <SessionProvider>{children}</SessionProvider>;
}

これを layout.tsx 側で下記のようにラップする。

import type { Metadata } from "next";
import { Providers } from "@/components/Providers";
import "./globals.css";

export const metadata: Metadata = {
  title: "Create Next App",
  description: "Generated by create next app",
};

export default function RootLayout({ children }: { children: React.ReactNode }) {
  return (
    <html lang="en">
      <body>
        <Providers>{children}</Providers>
      </body>
    </html>
  );
}

ログインフォーム（app/auth/signin/page.tsx）

ユーザーがログインIDとパスワードを入力し、ログイン処理を実行するフォームです。

⚠️ 実装時の注意点

• signIn("credentials") の引数 redirect: false を忘れると、自動遷移してしまいエラー処理が難しくなります。

"use client";
import { useState } from "react";
import { signIn } from "next-auth/react";

export default function SignInForm() {
  const [userId, setUserId] = useState("");
  const [password, setPassword] = useState("");
  const [errorMsg, setErrorMsg] = useState("");

  const handleSubmit = async (e: React.FormEvent) => {
    e.preventDefault();
    setErrorMsg("");

    const res = await signIn("credentials", {
      redirect: false,
      username: userId,
      password,
    });

    if (res?.error) {
      setErrorMsg("ログインIDまたはパスワードが間違っています");
    } else if (res?.ok) {
      window.location.href = "/download";
    } else {
      setErrorMsg("不明なエラーが発生しました");
    }
  };

  return (
    <div className="flex items-center justify-center min-h-screen bg-cover bg-center" style={{ backgroundImage: "url('/images/white-background.png')" }}>
      <form onSubmit={handleSubmit} className="bg-white p-8 rounded shadow-md w-[500px] mx-auto">
        <h1 className="text-2xl font-bold mb-6 text-center">ログイン</h1>

        <label className="block mb-4">
          <span className="block text-gray-700 font-semibold mb-1">ログインID</span>
          <input type="text" value={userId} onChange={(e) => setUserId(e.target.value)} required className="w-full px-3 py-2 border border-gray-300 rounded" />
        </label>

        <label className="block mb-4">
          <span className="block text-gray-700 font-semibold mb-1">パスワード</span>
          <input type="password" value={password} onChange={(e) => setPassword(e.target.value)} required className="w-full px-3 py-2 border border-gray-300 rounded" />
        </label>

        {errorMsg && <p className="text-red-600 text-center mb-4">{errorMsg}</p>}

        <button type="submit" className="w-full bg-blue-600 text-white py-2 rounded hover:bg-blue-700">ログイン</button>
      </form>
    </div>
  );
}

未ログイン時のログイン誘導（components/Login.tsx）

ユーザーが未ログインだった場合に、ログインボタンを表示してログイン画面に誘導する処理です。

⚠️ 実装時の注意点

• useSession() を使うには、呼び出し元が SessionProvider 配下である必要があります。

"use client";

import { signIn } from "next-auth/react";

export default function Login() {
  return (
    <div className="mt-8 text-center">
      <button
        className="text-blue-600 underline"
        onClick={() => signIn(undefined, { callbackUrl: "/auth/signin" })}
      >
        🔒 管理者ログインはこちら
      </button>
    </div>
  );
}

実行画面

下記のリンク押下で、ログイン画面が表示される

ログインID・パスワードを入力

ログイン完了したら、管理者画面が表示される（この画面のコードはなし）

てんハロ運営者

おつかれさまでした！

Next.jsの「use client」とは？サーバーコンポーネントとクライアントコンポーネントの違い

Next.jsの "use client" の意味と、サーバー・クライアントコンポーネントの違いを初心者向けに解説します。

it-bokenki.com

The post Next.jsでログイン機能を実装｜NextAuth.jsでID・パスワード認証対応 first appeared on てんハロ｜未経験エンジニアのIT学習ログ.

Instagramフォロワー数9,500人を越える人気のもち・大福店 えにかいたもち

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

Next.jsでフロントの機能を実装していたとき、
「なんでこのコード、動かないんだろう…？」と何度もつまずいていました。

とくに useState や useEffect を使おうとすると、
エラーが出たり、真っ白な画面になったりして、「？？？」の連続。

いろいろ調べてやっと気づいたのが、"use client" を書いてなかった。
そんな一言だけで動くのか…と、拍子抜けしたような記憶がまだあります。

てんハロ運営者

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

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時点)

なぜ "use client" が必要なの？

Next.js 13 以降（App Router 環境）では、コンポーネントは基本的にサーバーコンポーネントとして扱われます。
そのため、以下のようなブラウザでしか動かない処理は、デフォルトでは使えません。

• useState, useEffect, useRef などの React のクライアントフック
• window や document などのブラウザAPI
• ボタンクリックなどのイベント処理

これらを使いたいときには、そのファイルの先頭に "use client" と書く必要があるというのが、Next.js App Router のルールです。

サーバーコンポーネントとは？

Next.js では、特に何も書かないコンポーネントは「サーバーコンポーネント」として扱われます。

• サーバー上で実行される（ユーザーのブラウザでは動かない）
• セキュアにデータを扱える
• F12（開発者ツール）でコードを見ることができない

export default function MyComponent() {
  // サーバー側で実行される
  return <div>サーバーから描画されました</div>;
}

export default function MyComponent() {
  // サーバー側で実行される
  return <div>サーバーから描画されました</div>;
}

クライアントコンポーネントとは？

"use client" をファイルの先頭に書くと、そのコンポーネントは「クライアントコンポーネント」として動きます。

• ブラウザ側で実行される
• ボタンクリックやフォーム送信などの動作ができる
• 開発者ツールで中身が見える（HTMLやJS）

"use client";

export default function ClientComponent() {
  const handleClick = () => alert("クリックされました");

  return <button onClick={handleClick}>クリック</button>;
}

"use client";

export default function ClientComponent() {
  const handleClick = () => alert("クリックされました");

  return <button onClick={handleClick}>クリック</button>;
}

一度クライアントにすると、どうなるの？

親が "use client" を持っていると？

あるコンポーネントの先頭に "use client" と書くと、そのファイル全体がクライアントコンポーネントとして扱われます。
中に書かれたロジックも、サーバーではなくブラウザ上で動く前提になります。

たとえばその中に fetch() や useState() があれば、それはクライアント上で動きますし、重い処理やセキュアな処理もブラウザに送られるリスクがあります。

途中でサーバーに戻せるのか？

Next.js では、ファイルの先頭に "use client" を書くことで、そのファイル全体がクライアントコンポーネントとして扱われます。
途中で "use server" に切り替えるような書き方はできません。

ただし、"use client" を削除すれば、そのファイルは再びサーバーコンポーネントに戻ります。
つまり「一度クライアントにしたら元に戻せない」というわけではなく、明示的に切り替え直せばOKという仕組みです。

よりセキュアにしたいときは？

フォーム送信などで await fetch("/api/contact", {...}) のような処理をすることがあります。 この処理を「クライアントコンポーネント内で実行」すると、リクエスト内容がF12で見えてしまうことがあります。

よりセキュアにしたい場合は、下記の構成にしましょう！

• ユーザー入力（例：名前やメール）をクライアント側で受け取る
• それを API Route（サーバー側）に送って処理する

まとめ

Zodとは？React Hook Formとの連携でバリデーション実装

TypeScriptで使えるバリデーションライブラリ「Zod」の基本と、React Hook Formとの連携方法を解説します。

it-bokenki.com

The post Next.jsの「use client」とは？サーバーコンポーネントとクライアントコンポーネントの違い first appeared on てんハロ｜未経験エンジニアのIT学習ログ.

てんハロ運営者

バグヲ

API通信っていろいろあって混乱するんだけど、
axiosってなにが便利なの？

てんハロ運営者

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

• axiosってなに？
• axiosとfetchの違いは？
• API通信がよくわからない

がまぁまぁわかります！

Instagramフォロワー数9,500人を越える人気のもち・大福店 えにかいたもち

async/awaitとPromiseの違いとは？

非同期処理が難しいと感じている方へ。async/await・Promise・try/catch の基本をやさしく解説します。

it-bokenki.com

axiosとは？

axios は、JavaScriptでAPI通信（サーバーとのやり取り）を簡単に行うための外部ライブラリです。

シンプルなコードで通信が実現できます。

例：

• Webページを開いたときにユーザー情報を取得したい
• 入力フォームからデータをサーバーに送りたい

axiosは何ができるの？

axiosを使うと、以下のような操作が簡単にできます。

• GETリクエスト（データを取得）
• POSTリクエスト（データを送信）
• JSONデータの自動変換
• エラー処理（HTTPステータスも catch できる）
• タイムアウトやリトライの設定
• リクエストヘッダーの共通管理

axiosとfetchの違いは？

初心者にとって混乱しやすいのがここ。実は、JavaScriptには標準の通信手段として fetch という関数もあります。

同じGET処理をaxiosとfetchで書くと？

// fetch版
fetch("https://api.example.com/users")
  .then(res => res.json())
  .then(data => console.log(data))
  .catch(err => console.error(err));

// axios版
import axios from "axios";

axios.get("https://api.example.com/users")
  .then(res => console.log(res.data))
  .catch(err => console.error(err));

// fetch版
fetch("https://api.example.com/users")
  .then(res => res.json())
  .then(data => console.log(data))
  .catch(err => console.error(err));

// axios版
import axios from "axios";

axios.get("https://api.example.com/users")
  .then(res => console.log(res.data))
  .catch(err => console.error(err));

axiosとfetch どっちを使えばいいの？

✅️ 学習や練習なら fetch でもOK
ライブラリ不要で軽い

✅️ 実務やチーム開発なら axios をおすすめ
冗長な処理を減らせて、保守しやすく、失敗しづらい

2025年現在でも、ReactやVueなどの現場ではaxiosがよく使われています。

axiosの使い方

axiosインストール方法

npm install axios
# または
yarn add axios

基本的な使い方（GET/POST）

axiosを使って、サーバーからデータを取得（GET）・送信（POST）する例です。
res.data でサーバーからのデータにアクセスできます。
エラーが起きたときは .catch() で内容を確認できます。

// GETリクエスト
axios.get("/api/user")
  .then(res => console.log(res.data))
  .catch(err => console.error(err));

// POSTリクエスト
axios.post("/api/user", { name: "太郎" })
  .then(res => console.log(res.data))
  .catch(err => console.error(err));

まとめ

• axiosは、JavaScriptでAPI通信を行うための便利なライブラリ
• fetchよりも書きやすく、実務で使いやすい工夫がたくさん
• 初心者はまず「GETでデータ取得 → .then(res.data)」を覚えればOK！

てんハロ運営者

おつかれさまでした！

The post axiosとは？初心者でもわかる使い方・fetchとの違いを解説 first appeared on てんハロ｜未経験エンジニアのIT学習ログ.

この記事では、JavaScriptの中でもつまずきやすい「非同期処理」について、丁寧に解説します。

でじぼう

この記事は下記の方がおすすめ！

• 非同期処理ってなに？
• async/awaitってなに？
• async/awaitとPromiseの違いとは？

Instagramフォロワー数9,500人を越える人気のもち・大福店 えにかいたもち

Zodの .object() とセットで使うバリデーション構文まとめ

Zodの.object()と組み合わせて使うpartialやsuperRefineなどの構文を、初心者にもわかりやすく解説します。

it-bokenki.com

非同期処理ってなに？

「非同期処理」とは、時間のかかる処理を待っている間に、他の作業を進められるようにする仕組みです。

例：サーバーからデータを取得する場合

通常のウェブサイトでは、次のようなことがよくあります

1. サイトを開くときに、サーバーからデータを取りに行く
2. この取得に数秒かかることもある
3. もしデータを待っている間に画面が止まっていたら、ユーザー体験が悪くなる

そこで使われるのが「非同期処理」です。

非同期処理にすると、データを待っている間にも他の操作を続けることができます。ユーザーにとってスムーズな体験を実現できるのです。

Promise（プロミス）とは？

あとで「結果が返ってくるよ！」と約束してくれる仕組みです。

JavaScriptでは、時間がかかる処理（たとえば fetch や setTimeout）に対して、 「すぐには結果が出ないけど、終わったら結果を返すね！」という 箱 を渡してくれます。

Promiseの状態は3つ

Promise は、非同期処理の進行に応じて、下記のいずれかの状態を取ります。

.then() / .catch() の使い方

Promise が返される処理には、結果が返ってきたあとにどう処理するかを .then() と .catch() で書くことができます。

fetch("https://example.com")
  .then((res) => res.json())
  .then((data) => console.log(data))
  .catch((error) => console.error("失敗しました", error));

• .then() は「成功したらこれをしてね」
• .catch() は「失敗したらこれをしてね」

このように、Promiseの結果に対して、処理を“つなげて”書けるのが特徴です。

なぜ .then() / .catch() が使えるの？

それは、返り値が「Promise型」だからです。

JavaScriptでは、.then() や .catch() は Promise型の値にしか使えません。

✅ .then() を使えるのは Promise型 だけです。

const result = fetch("https://example.com");
console.log(result); // → Promise { <pending> }

❌ Promise を返さない関数に .then() は使えない

function greet() {
  return "こんにちは"; // ただの文字列
}

greet().then((msg) => console.log(msg)); // ❌ エラー！

返り値を見ずに「Promise型かどうか」を見分けるには？

1. 関数の仕様を調べる
   • 公式ドキュメントや型定義に Promise と書かれていれば、Promise型の返り値です。
   • 例：fetch() や axios.get() は Promise を返すと明記されています。
2. 関数の型アノテーション（TypeScript）
   • function getData(): Promise<string> { ... } のように Promise<型> と書かれていれば、明確に Promise型です。
3. 返り値に .then() を使ってみる（最終手段）
   • 実際に .then() をつけて動作するか試すと、Promise型かどうかがわかります（ただし危険なので1と2が推奨）

async / await とは？

.then() だけだと、処理が長くなると読みづらくなります。 それをもっと“ふつうの順番”っぽく書けるようにしたのが、async と await です。

async function loadData() {
  const res = await fetch("https://example.com");
  const data = await res.json();
  console.log(data);
}

• async は「この関数は非同期（Promise）を使うよ」と宣言するもの
• await は「この処理が終わるまで“ちょっと待って”ね」という意味

注意：await は async がついた関数の中でしか使えない

await は、「Promiseの結果を待つ」キーワードですが、 それ単体では使えず、必ず async 関数の中で使う必要があると覚えておきましょう。

✅ 正しい書き方（async 関数の中で await を使う）

async function getData() {
  const result = await fetch("https://example.com");
  const json = await result.json();
  console.log(json);
}

❌ エラーになる例（関数の外で await を使っている）

const result = await fetch("https://example.com");

try { … } catch { … } とは？

非同期処理をしていると、失敗することもあります。 たとえば、サーバーが止まっていたり、ネットがつながっていなかったりする状況です。

そんなときに、エラーが出てプログラムが止まらないようにするための仕組みが、 try と catch です。

async function getData() {
  try {
    const res = await fetch("https://example.com");
    const data = await res.json();
    console.log(data);
  } catch (err) {
    console.error("エラーが起きました:", err);
  }
}

• try の中に「失敗するかもしれない処理」を書く
• catch の中に「失敗したときにどうするか」を書く

.catch() と try/catch の違いは？

どちらも「エラー処理」ですが、使い方が違います。

.then() を使うなら .catch() を、 await を使うなら try/catch を使うのが基本の形です。

async/await・.then()/.catch()・try/catch を全部使った例

下記のコードは、Reactを使って非同期処理の動作を試すサンプルアプリです。
簡単にいうと、「ユーザー情報を取得 → その名前を使ってあいさつ文を表示」する処理です。

言語：JavaScript
ライブラリ：React

正常終了

import React, { useEffect, useState } from "react";

function App() {
  const [msg, setMsg] = useState("");

  useEffect(() => {
    (async () => {
      try {
        const res = await mockFetchUser();
        const data = await res.json();
        someAsyncOperation(data)
          .then(setMsg)
          .catch((e) => setMsg("中のエラー: " + e));
      } catch (e) {
        setMsg("fetchのエラー: " + e);
      }
    })();
  }, []);

  return (
    <div>
      <h1>React 非同期処理テスト</h1>
      <p>{msg}</p>
    </div>
  );
}

const mockFetchUser = () =>
  Promise.resolve({ json: () => Promise.resolve({ name: "太郎さん" }) });

const someAsyncOperation = (d) =>
  d.name
    ? Promise.resolve("こんにちは、" + d.name)
    : Promise.reject("名前がありません");

export default App;

✅ 表示結果
mockFetchUser 関数 → res.json() → data.name が "太郎さん" のため、
someAsyncOperation の結果「こんにちは、太郎さん」が画面に表示される

.catch() でエラー表示

// 省略...
const mockFetchUser = () =>
  Promise.resolve({ json: () => Promise.resolve({ name: "" }) });
// 省略...

✅ 表示結果
mockFetchUser 関数 → res.json() → data.name が undefined または false のため、
someAsyncOperation は reject("名前がありません") を返し、
.catch() により「中のエラー: 名前がありません」が画面に表示される。

例外発生のため try/catch でエラー表示

// 省略...
const mockFetchUser = () => Promise.reject("ネットワークエラー");
// 省略...

✅ 表示結果
mockFetchUser 関数が reject("ネットワークエラー") を返したため、
await mockFetchUser() で例外が発生し、
catch により「fetchのエラー: ネットワークエラー」が画面に表示される。

404？500? ステータスコードとは？よく見るコード厳選まとめ

開発エンジニアが現場でよく使うHTTPステータスコードを、意味・原因・使われる場面とともにわかりやすく解説！

it-bokenki.com

The post async/awaitとPromiseの違いとは？ first appeared on てんハロ｜未経験エンジニアのIT学習ログ.

Zodを使ったバリデーションで一番よく出てくるのが .object()
でも実際の現場では、それだけでは足りないことが多いです。

この記事では .object() と一緒によく使う構文だけにしぼって、未経験でもわかるように解説します！

でじぼう

この記事は下記の方がおすすめ！

• Zodってなに？
• .object() ってなに？
• よく使われる構文の違いが知りたい

Instagramフォロワー数9,500人を越える人気のもち・大福店 えにかいたもち

【初心者向け】Networkタブの使い方をやさしく解説｜APIの見方や通信トラブル対処まで

F12キーで開く「Networkタブ」の基本を初心者向けに解説。通信状況の確認、APIのエラー調査、画面が動かない原因の特定に役立つ見方を紹介します。

it-bokenki.com

Zodとは？

Zodは、TypeScriptで「入力ルール（バリデーション）」を簡単に定義できるライブラリです。

• 形式チェック（文字列・数値・メールなど）
• 必須・任意の設定
• 条件付きのチェック

などが、読みやすい構文で書けるのが特徴です。
より詳細は下記のブログをご確認ください。

Zodとは？React Hook Formとの連携でバリデーション実装

TypeScriptで使えるバリデーションライブラリ「Zod」の基本と、React Hook Formとの連携方法を解説します。

it-bokenki.com

.object()とは？

フォーム全体の「入力ルール」をまとめて定義できる、Zodの土台です。

const schema = z.object({
  name: z.string(),
  email: z.string().email(),
});

コードの意味

• name は文字列の入力が必要（必須）
• email はメール形式での入力が必要（必須）

このように、.object() を使うことで複数の入力項目を1つのスキーマとしてまとめることができます。

一緒によく使う構文一覧【目的別】

.superRefine()とは？

複数項目を「まとめてチェック」したいときに利用します。

const schema = z.object({
  password: z.string(),
  confirm: z.string(),
}).superRefine((data, ctx) => {
  if (data.password !== data.confirm) {
    ctx.addIssue({
      path: ["confirm"],
      message: "パスワードが一致しません",
      code: z.ZodIssueCode.custom,
    });
  }
});

コードの意味

📘 data とは？

• z.object({...}) に渡したすべての入力値（name, email など）が入っているオブジェクトのことを指す
• React Hook Form の getValues() と同じ構造

📘 ctx.addIssue() とは？