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

てんハロ運営者

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

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

これまでなんとなく、.env ファイルに設定を書いて「雰囲気で」使っていました。

「API_KEY？FROM_EMAIL？なんかよく使うし、とりあえず入れておくか…」
そんなふうに、意味や役割をちゃんと理解しないまま、コピー＆ペーストで使っていたんです。

でもある日、上司から「環境変数って何を入れてるの？」「どういうとき使うの？」と聞かれて、
正直うまく答えられませんでした。

自分がよくわかってないことがバレて、恥ずかしかった。

てんハロ運営者

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

そもそも「環境変数」ってなに？

環境変数とは、プログラムの外から設定できる値（変数）のこと。

例えば以下のような機密性のある情報を、コードに直接書かずに管理できます。

• ✅ APIキー（SendGridやStripeなど）
• ✅ データベース接続情報
• ✅ メール送信元アドレス
• ✅ 本番・開発で切り替える設定値 など

セキュリティ的にも、柔軟性の面でも、使いこなす価値が高い設定です。

環境変数はどう使うの？

① .env ファイルを作成

例えば、開発環境用の.env を作る場合
これは好みもありますが私は .env.local というファイル名にして下記の内容を記述します。

SENDGRID_API_KEY=SG.XXXXXX 
FROM_EMAIL=admin@example.com

SENDGRID_API_KEY=SG.XXXXXX 
FROM_EMAIL=admin@example.com

② .gitignoreに除外設定

.gitignore とはGitに無視してほしいファイルやフォルダを指定するファイルです。
このファイルに書かれたものは、Gitの管理対象から除外されます。

🤷‍♂️ なぜ除外する必要が？

Gitは通常、変更されたすべてのファイルを追跡しようとします。
でも、以下のようなファイルは追跡したくない・共有したくないことが多いです。

今回は.env 関連ファイルをGitの管理対象外にしたいので、.gitignore に次を追加します。

.env
.env.local
.env.production

.env
.env.local
.env.production

.envファイルの種類と使い分け

.env ファイルは、複数種類があります。使い分けがあるので、確認しましょう。

環境変数の実用例

Next.js

通常、環境変数の名前は API_KEY や DB_HOST など、任意の名前で定義できます。
しかし、Next.jsでは、フロントエンドで環境変数を使う際に特別なルールがあります。バックエンドと異なり、NEXT_PUBLIC_という接頭辞が必要です。

// OK（フロントエンドでも使える）
NEXT_PUBLIC_API_URL="https://example.com"

// NG（ブラウザからは見えない）
API_URL="https://example.com"

// OK（フロントエンドでも使える）
NEXT_PUBLIC_API_URL="https://example.com"

// NG（ブラウザからは見えない）
API_URL="https://example.com"

フロントエンドのコードはブラウザに配信されるため、意図的に公開してよい情報だけを NEXT_PUBLIC_ を使って明示する仕様になっています。

Docker

【自動読み込み】Compose自体が使う .env

• ファイル名は定義で「.env」のみ
• docker-compose.yml内の ${変数名} を置換するためのもの
• サービスに限らず、build や portsの値も置換可能

db:
  image: mysql:${MYSQL_VERSION}

db:
  image: mysql:${MYSQL_VERSION}

【サービス単位の指定】env_file で指定する .env

• env_file で指定したサービスにだけ適用
• .env.devや.env.localなど、名前は自由
• 設定された値は、コンテナ内で実行されるプロセスに環境変数として渡される

services:
  app:
    build: .
    env_file:
      - .env

services:
  app:
    build: .
    env_file:
      - .env

🌱 豆知識 ：直書きも可能（非推奨 ）

案件によっては開発環境でしかDocker使わないという場合は、ローカルPC以外で情報漏れることがないため、直書きで実装しているところもあります。小規模ならOKですが、複数人開発や情報分離を考慮すると .envがおすすめです。

services:
  app:
    environment:
      - API_KEY=xxx
      - FROM_EMAIL=admin@example.com

services:
  app:
    environment:
      - API_KEY=xxx
      - FROM_EMAIL=admin@example.com

実際に開発ではどんな感じで環境変数が登場するか？記事はこちらです🤞

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

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

it-bokenki.com

おまけ：.env.example を活用しよう

本番の .env をそのまま共有するのではなく、中身を空にしたテンプレートファイル .env.example を用意しておくのがおすすめです。

他の開発者はこれを元に、自分の .env を作成することができます。

// SendGridのAPIキーをここに記入してください
SENDGRID_API_KEY=

// メールの送信元アドレスを記入してください
FROM_EMAIL=

// SendGridのAPIキーをここに記入してください
SENDGRID_API_KEY=

// メールの送信元アドレスを記入してください
FROM_EMAIL=

このように、コメント付きの .env.example を用意しておけば、他の開発者にとっても親切で、Gitに機密情報を含めない安心設計が実現できます。

てんハロ運営者

おつかれさまでした！

The post 【保存版】.envファイルの使い分け完全ガイド｜Next.js・Docker対応｜環境変数設定入門 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学習ログ.

てんハロ運営者

バグヲ

いろんな種類があってわからない…

てんハロ運営者

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

• 開発手法の名前は聞いたことあるけど違いがわからない
• 特徴をざっくり知りたい
• 実務でどの手法が使われているのか気になる

がまぁまぁわかります！

資格と仕事に強い！個人レッスンのプログラミングスクール【Winスクール】

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

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

it-bokenki.com

よく使われる開発手法の比較

📌 スプリントとは？

スクラムにおける「1回の開発期間」のこと。通常は 1〜4週間 で区切られます。

2週間スプリントなら
→ 2週間ごとに「計画 → 実装 → テスト → 振り返り」を繰り返す

エンジニア用語をもっと勉強したい！方はこちらの記事もおすすめです。

エンジニアなら押さえたい！基本用語5選

現場でよく聞く「ライブラリ」や「フック」などの用語、意味を説明できますか？初心者向けにわかりやすく解説します。

it-bokenki.com

開発手法の覚え方（ざっくりポイント）

2025年に多い開発スタイルは？

2025年現在、最も多くの現場で使われているのは スクラム＋カンバン を組み合わせた アジャイル開発。
短期スプリントでこまめにリリースしながら、チームで改善を繰り返すスタイルが定番です。

業界・状況別でよく使われる開発手法

結論

• 要件が固い＆修正したくない → ウォーターフォール
• 柔軟に作りながら進めたい → アジャイル（スクラム・カンバン）
• 品質と信頼が超重要 → XP

現場によって使い分けられている！

てんハロ運営者

おつかれさまでした！

The post 【2025年版】ウォーターフォール・アジャイル・スクラムなど開発手法の違いをやさしく解説！ first appeared on てんハロ｜未経験エンジニアのIT学習ログ.

でじぼうです。

Web開発を始めるとよく出てくる DOM や 仮想DOM という言葉。
この記事では、DOMと仮想DOMの違いを解説します。

でじぼう

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

• DOMってそもそも何かよく分からない
• 仮想DOMとの違いがピンとこない
• Reactでよく出てくる用語をちゃんと理解したい

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

npm・yarn・pnpmの違いとは？速度や特徴をざっくり比較！

JavaScriptやTypeScriptのプロジェクトでは、依存関係の管理に「パッケージマネージャー」が欠かせません。この記事では、代表的な3つのパッケージマネージャー「npm」「yarn」「pnpm」の違いを比較し、それぞれのメリット・デメリットを表にまとめて解説します。 npmはNode.js公式が提供している標準的なツールで、ほとんどのプロジェクトで使われています。対してyarnはMeta（旧Facebook）が開発したもので、npmよりも速くて安定していると評価されています。そして近年注目されているのがpnpmで、圧倒的なインストール速度とディスク効率の良さから、徐々にシェアを伸ばしています。 選び方に迷ったときは、プロジェクトの規模や開発チームの方針を基準にするとよいでしょう。たとえば、モノレポ構成や高速なCI/CDを重視する場合はpnpmが向いています。

it-bokenki.com

DOMとは？

DOMとは、HTMLを「ブラウザが再構築した木構造のデータ構造」です。

ブラウザは、HTMLを読み込むと、内部で下記構造を作ります。 JavaScriptはこの構造を通じて要素を取得したり、書き換えたりできるわけです。

よく「ツリー構造」とも言われます。

例：JavaScriptがDOMを操作

<h1 id="title">こんにちは</h1>

document.getElementById("title").textContent = "こんばんは";

このように、JavaScriptはHTMLそのものを操作しているのではなく、 DOMという構造体を操作しているのです。

DOMは「分解できるお弁当」

DOMの概念をわかりやすくするために、近いものにたとえてみましょう！

DOM操作のデメリット

DOMは便利ですが、次のようなデメリットもあります。

• 操作するたびに画面を再描画する必要がある
• ページが大きくなると、全部のDOMをチェックするのが大変で重い

これが、パフォーマンスの問題につながります。

仮想DOMとは？

仮想DOMとは「実際の画面（DOM）を直接書き換える前に、メモリ上にコピーを作って差分だけ反映する仕組み」です。

比喩で理解

通常のDOM操作

• ポスターに直接書き込みする（ミスしやすい）

仮想DOM操作

• まずメモ帳で修正案を書いてから、違いだけポスターに反映する

仮想DOMの動き

1. ユーザーが何か操作（例：ボタンをクリック）
2. 仮想DOMが新しい状態をメモリ上で作成
3. 古い仮想DOMと比較して「どこが変わったか？」をチェック
4. 本物のDOMに変わった部分だけ反映！

仮想DOMのメリット

• 必要な部分だけを更新するので効率的
• 再描画が最小限なので速い
• 保守性・読みやすさも向上（Reactなどで使われている理由）

DOM ・ 仮想DOM の比較表

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

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

it-bokenki.com

The post DOMと仮想DOMの違いをわかりやすく比較！ first appeared on てんハロ｜未経験エンジニアのIT学習ログ.

てんハロ運営者

バグヲ

種類が多くて混乱しそう…

てんハロ運営者

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

• npm / yarn / pnpm の違いがよく分からない
• 結局どれを使えばいいの？
• ライブラリのインストール方法でつまずいている

がまぁまぁわかります！

Amazonギフトカードが毎月必ずもらえる！

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

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

it-bokenki.com

パッケージマネージャーとは？

前提として、パッケージマネージャーとは「開発に必要なライブラリを管理するツール」です。

たとえば、Reactを使いたいときに以下のように書きます。

npm install react

これで React という便利なライブラリをプロジェクトに追加できます。
この「インストール」や「管理」を行うのが npm / yarn / pnpm です。

npm / yarn / pnpm の違いざっくり比較！

以下が npm / yarn / pnpm のざっくり比較表です。

コマンドの書き方の違い

実務での使用割合は？

2024年現在の傾向をふまえると、以下のようなシェアになっています。
（海外アンケートや実務現場の感覚をもとにした目安です）

各パッケージマネージャーの特徴

✅️ npm（エヌピーエム）

• Node.jsに最初から入っている「標準の道具」
• ほとんどの解説サイトやプロジェクトで使われている
• まず迷ったらこれでOK！
  
   →「npm install」で始めよう！

✅️ yarn（ヤーン）

• Meta社（旧Facebook）がnpmの欠点を補って登場
• インストールが少し速く、コマンドもシンプル
• 一部の大規模プロジェクトや古めの環境でまだ使われている
  
   → yarn.lock があるプロジェクトではそのまま使おう

✅️ pnpm（ピーエヌピーエム）

• とにかく速くて、軽い。しかもスマート！
• 同じパッケージを再利用する「リンク方式」で容量節約
• ViteやTurborepoなど最近の人気フレームワークと相性抜群
  
   → 大規模開発やチーム開発で注目されている

結局どれを使えばいいの？

• 初心者で迷っている → npm （まずは王道）
• yarn.lock があるプロジェクト → yarn（無理に変えない）
• pnpm-lock.yaml がある or Vite系プロジェクト → pnpm（高速＆効率）

てんハロ運営者

おつかれさまでした！

async/awaitとPromiseの違いとは？

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

it-bokenki.com

The post npm・yarn・pnpmの違いとは？速度や特徴をざっくり比較！ 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学習ログ.

Web開発を勉強していると SSG や SSR という言葉を耳にすることがあると思います。
意味の理解を深めていきましょう！

でじぼう

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

• SSGとSSRの違いを知りたい
• Next.jsやNuxt.jsを勉強中
• どちらを使うべきか迷っている

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

SPAとMPAの違いとは？

SPAとMPAの違いを初心者向けにやさしく解説。構成や向いている用途、使い分けのポイントを具体例とともに紹介します。

it-bokenki.com

SSGとは？（静的サイト生成）

SSG（Static Site Generation）は、サイトを公開する前に、すべてのHTMLファイルをあらかじめ生成しておく方式です。

特徴

• 表示がとても速い（すでにできたHTMLをそのまま表示するだけ）
• サーバー負荷が少ない（サーバー処理が不要）
• 内容が更新されても、再ビルドしないと反映されない
• CMSやデータベースと組み合わせると、自動でページを量産できる

向いているケース

SSGは表示が速く、サーバー負荷が低いため、更新頻度が低いページに向いています。

• 会社紹介・サービス案内ページ
  → 内容が頻繁に変わらず、毎回の生成が不要なため。表示も高速。

• ブログ・記事ページ（更新頻度少）
  → 投稿後にビルドすればOK。SEOにも強くて軽い。

• 大規模アクセス対応が必要なLPや特集ページ
  → キャッシュのように扱えるため、大量アクセスでも安定して表示される。
  （ページがあらかじめ作られていて保存されているため、見る人が増えてもすぐに表示できて、サイトが重くなりにくい）

SSRとは？（サーバーサイドレンダリング）

SSR（Server Side Rendering）は、ユーザーがページを開いたときに、サーバーがHTMLをその場で生成する方式です。

特徴

• 最新の情報をリアルタイムで表示できる
• ページ表示に少し時間がかかる（毎回サーバーで生成）
• サーバーの負荷が大きくなりがち
• 検索エンジンにも情報が見える（SEOにも強い）

向いているケース

SSRは常に最新情報を表示できるため、動的な内容やリアルタイム性が必要なページに向いています。

• 商品の在庫・価格をリアルタイム表示したい
  → 毎回サーバーで生成するため、最新の情報を常に表示できる。

• ユーザーによって異なるページ内容
  → ログインユーザー情報など、動的に内容を変える必要があるケースに強い。

SSG と SSR の違い【比較表】

下記に、SSG と SSR の違いをまとめました。

useStateとwatchの違いとは？フォーム入力の管理方法を解説！

ReactのuseStateとwatchの違いを初心者向けに解説！フォーム入力の管理方法と使い分けを具体例で紹介します。

it-bokenki.com

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

Web開発を勉強していると SPA や MPA という言葉を耳にすることがあると思います。
意味の理解を深めていきましょう！

でじぼう

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

• Webアプリの構成について知りたい
• SPAとMPAの使い分けがよく分からない
• ReactやVueを勉強している

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

SPAとは？（Single Page Application）

SPAとは、ページ全体を再読み込みせずに、必要な部分だけを差し替えて表示するアプリ構成のことです。

特徴

• ページ遷移が高速（再読み込みがない）
• ボタンやリンクを押してもURLが変わらないか、変わっても即時に表示が切り替わる
• サーバーとやりとりするのは「データだけ」（HTMLは作らない）
• 初回の表示は少し遅くなることもある（アプリの本体（JavaScript）が一括でダウンロードされるため）
• フロントエンドの実装がやや複雑になる

向いているケース

SPAは動きが多く、操作が頻繁なアプリケーションに向いています。

• 管理画面・ダッシュボード
  → 頻繁な画面更新・操作が多く、部分的な差し替えで高速な動作が必要

• チャットやリアルタイム入力画面
  → ユーザー操作が多く、スムーズなUXが求められるため、再読み込みを避けたい

• 商品検索やフィルター付き一覧
  → ユーザーの操作性を重視すればSPA、SEOやアクセス数重視ならMPA

MPAとは？（Multi Page Application）

MPAとは、リンクをクリックするたびに新しいページを読み込む、昔ながらのWebサイト構成のことです。

特徴

• ページを開くたびに画面全体が再読み込みされる
• 1ページごとにサーバーがHTMLを生成して返す
• SEOに強い（検索エンジンにとってわかりやすい構造）
• 比較的シンプルに構築しやすい

向いているケース

MPAは情報を届けたい、検索で見つかってほしいページに向いています。

• 採用ページ・お知らせ一覧などの記事系
  → 記事単位でURLが分かれており、検索エンジンに評価されやすい構成が最適

• ブログやコラムなどコンテンツ重視ページ
  → 一覧表示や詳細ページがあり、SEOを意識したHTML構成が向いている

• サービス紹介・会社概要など静的ページ
  → 内容が固定されており、検索エンジンに強い構成が適している

SPA と MPA の違い【比較表】

下記に、SPA と MPA の違いをまとめました。

MPAでもHTMLを毎回手で書くことはもうない！

2025年の今では、商品ページや記事一覧は人がHTMLを手書きするのではなく、CMSやデータベースの内容をもとに自動でページが作られるのが普通です。

たとえば「Next.js」や「Nuxt.js」といったフレームワークを使えば、
・サイトを公開する前にページをまとめて作る「SSG（静的サイト生成）」
・ユーザーがページを開いたときにサーバーで作る「SSR（サーバー側レンダリング）」
といった方法で、効率よくページを表示することができます。

そのため、「MPA＝古くさい構成」ではなく、SEOや構造の安定性を重視したい場合に選ばれる構成です。

SMTPとは？メール送信の仕組みと実装・エラー内容まとめ

SMTPの仕組みや使い方、送信エラーの原因と対処法までを初心者向けにやさしく解説する、実践的な入門ガイドです。

it-bokenki.com

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