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

てんハロ運営者

バグヲ

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学習ログ.

てんハロ運営者

バグヲ

コマンドって苦手なんだよな…

てんハロ運営者

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

• Dockerコマンド知りたい
• 現場でよく使うものだけ知りたい
• チートシートとして見ておきたい

がまぁまぁわかります！

未経験からエンジニア転職を目指すなら
👉 テックゲート転職 をチェック！

【Docker環境構築】.envとdocker-compose.ymlはどこに置く？おすすめの配置と起動方法まとめ

Docker環境構築で迷いがちな.envファイルとdocker-compose.ymlの正しい配置場所と起動方法を初心者向けに解説。保守性や再利用性の観点からおすすめ構成や.envの読み込み方法、v2で注意すべきポイントも紹介！

it-bokenki.com

イメージ関連

イメージとは？

アプリを動かすために必要な「環境セット」です。

OS・ツール・設定がまるごと1つになっていて、
このイメージを元にアプリを動かす＝コンテナを作るという流れです。

👉 例えば…

• mysql:8.0 → MySQLが動くイメージ
• node:20 → Node.js 20 が使えるイメージ

イメージ名は REPOSITORY:TAG の形で覚えよう！

イメージ名 ＝ REPOSITORY:TAG

• REPOSITORY → イメージの名前（例：mysql, node, minio/minio）
• TAG → バージョンや種類（例：8.0, 18, latest）

この2つをセットで「イメージ名」と呼びます。

イメージ関連のコマンド

イメージID はイメージ一覧で確認できます。

コンテナ関連

コンテナとは？

イメージから作られた「実際に動いているアプリ本体」です。

イメージはあくまで動かす前の準備セット、コンテナはそれを実行して動いている状態です。

👉 例えば…

• mysql:8.0 → イメージ名
• my-mysql → コンテナ名

docker run --name my-mysql mysql:8.0

コンテナ関連のコマンド

クリーンアップ関連

クリーンアップとは？

不要になったイメージやコンテナなどを削除して、環境をすっきりさせるためのコマンドです。

Dockerを使っていると、不要なファイルが溜まっていきます。

クリーンアップ関連のコマンド

docker-compose関連

docker-composeとは？

複数のコンテナを一括でまとめて操作できる便利なコマンドです。

Webアプリなどは複数のサービス（例：アプリ本体＋DB）を動かすことが多いため、
まとめて管理できるdocker-composeは非常に便利です。

docker-compose関連のコマンド

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

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

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

it-bokenki.com

てんハロ運営者

おつかれさまでした！

The post Docker初心者必見｜基本コマンド一覧 first appeared on てんハロ｜未経験エンジニアのIT学習ログ.

てんハロ運営者

バグヲ

読み方はミニオ…？ なにそれ怖い…

てんハロ運営者

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

• ローカルでS3っぽい環境を作りたい
• Docker上にストレージを立てたい
• Next.jsやNode.jsからファイルを保存したい

がまぁまぁわかります！

未経験からエンジニア転職を目指すなら
👉 テックゲート転職 をチェック！

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

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

it-bokenki.com

この記事の目的

Next.jsなどのアプリから、ローカルのMinIOにファイルを保存・取得したい人向けに、
Docker環境へのMinIO導入と、接続手順を紹介します。
（AWSは使いません！）

MinIOとは？

MinIO（ミニオ）は、Amazon S3と互換性のあるオブジェクトストレージです。
S3と同じAPIを使えるため、@aws-sdk/client-s3 を使って接続できます。

📦 MinIOの特徴

• 軽量で高速なオブジェクトストレージ
• Dockerで簡単に立ち上げられる
• 完全ローカルで完結する（S3の代替に便利）

実装方法

ステップ1：MinIOをDockerで立ち上げる

まず、docker-compose.yml に以下を追加します。

services:
  minio:
    image: minio/minio
    container_name: minio
    ports:
      - "9000:9000"  // APIアクセス用（アプリ・SDKから）
      - "9001:9001"  // 管理画面（GUI）
    environment:
      MINIO_ROOT_USER: your_username       // 開発用ユーザー名
      MINIO_ROOT_PASSWORD: your_password   // 開発用パスワード
    command: server /data --console-address ":9001"
    volumes:　// データ永続化の設定
      - minio_data:/data

volumes: // データ永続化の設定
  minio_data:

services:
  minio:
    image: minio/minio
    container_name: minio
    ports:
      - "9000:9000"  // APIアクセス用（アプリ・SDKから）
      - "9001:9001"  // 管理画面（GUI）
    environment:
      MINIO_ROOT_USER: your_username       // 開発用ユーザー名
      MINIO_ROOT_PASSWORD: your_password   // 開発用パスワード
    command: server /data --console-address ":9001"
    volumes:　// データ永続化の設定
      - minio_data:/data

volumes: // データ永続化の設定
  minio_data:

🐳 docker minio volume とは？

MinIOにアップロードしたファイルを、コンテナを削除・再起動しても消えないように保存するための方法です。

通常、Dockerコンテナだけに保存したデータは、コンテナが停止・削除されると一緒に消えてしまいます。それを防ぐために、Dockerでは volumes を使って、データをPCの中（ホスト側）に残す仕組みが用意されています。

MinIOは /data にファイルを保存するため、上記（ // データ永続化の設定）のように設定しておけば、ファイルは消えません。

ステップ2：MinIOにログイン＆バケット作成

ブラウザで http://localhost:9001 にアクセス
先ほど設定したユーザー名／パスワードでログイン

ボタンをクリックでOKです。
これによりライセンス画面が閉じて、通常のMinIO管理画面（バケット作成など）に進めます。これはローカル環境で使う分には問題ありません。

＋create Bucket を押し、「uploads」など任意のバケットを作成

バケットを作成完了

ステップ3：SDKをインストール

MinIOはS3互換なので、以下をインストールします。

npm install @aws-sdk/client-s3

ステップ4：ファイルアップロードの実装

src/lib/minio.ts を作成して、接続設定を実装

import { S3Client, PutObjectCommand } from "@aws-sdk/client-s3";

const s3Client = new S3Client({
  region: "us-east-1", // MinIOでは使われないが、SDKの必須項目のため任意の値を指定（省略不可）
  endpoint: "http://localhost:9000",
  credentials: {
    accessKeyId: "your_username",     // 開発用ユーザー名
    secretAccessKey: "your_password", // 開発用パスワード
  },
  forcePathStyle: true, // バケット名をパスで扱うようにするためtrue
});

export async function uploadToMinio(file: File) {
  const arrayBuffer = await file.arrayBuffer();　// ファイルの生データを取得

  const command = new PutObjectCommand({
    Bucket: "uploads",       // GUIで作成したバケット名
    Key: file.name,          // 保存時の名前
    Body: arrayBuffer,       // アップロードするデータの中身
    ContentType: file.type,  // ファイルの種類（MIME）
  });

  await s3Client.send(command);
}

import { S3Client, PutObjectCommand } from "@aws-sdk/client-s3";

const s3Client = new S3Client({
  region: "us-east-1", // MinIOでは使われないが、SDKの必須項目のため任意の値を指定（省略不可）
  endpoint: "http://localhost:9000",
  credentials: {
    accessKeyId: "your_username",     // 開発用ユーザー名
    secretAccessKey: "your_password", // 開発用パスワード
  },
  forcePathStyle: true, // バケット名をパスで扱うようにするためtrue
});

export async function uploadToMinio(file: File) {
  const arrayBuffer = await file.arrayBuffer();　// ファイルの生データを取得

  const command = new PutObjectCommand({
    Bucket: "uploads",       // GUIで作成したバケット名
    Key: file.name,          // 保存時の名前
    Body: arrayBuffer,       // アップロードするデータの中身
    ContentType: file.type,  // ファイルの種類（MIME）
  });

  await s3Client.send(command);
}

ステップ5：動作確認

Next.jsやNode.jsの処理の中で uploadToMinio(file) を呼び出せば、
ローカルのMinIOにファイルが保存されます。

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

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

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

it-bokenki.com

てんハロ運営者

おつかれさまでした！

The post Next.js × Docker MinIO｜S3互換ストレージにファイルを保存する手順 first appeared on てんハロ｜未経験エンジニアのIT学習ログ.

てんハロ運営者

バグヲ

環境構築ってややこしいよね

てんハロ運営者

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

• .env と docker-compose.yml どこに置くのが正解？
• ファイルを分けると起動時に困るのでは？
• なんとなくルートに全部置いてるけど…整理した方がいいの？

がまぁまぁわかります！

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

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

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

it-bokenki.com

Dockerとは？

Dockerとは、アプリを動かすための環境（OS・ミドルウェアなど）をまるごとパッケージできるツールです。
コンテナ単位でアプリを動かすことで、開発環境の差異をなくし、誰でも同じように動作させることができます。

より詳しいDockerの基礎はこちら👇

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

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

it-bokenki.com

.envとdocker-compose.ymlの配置パターン3つ比較

今回は方法③を採用し、解説していきます。

.env と docker-compose.yml を分けておく理由

理由１：アプリと共通で使えるようにするため

.env は Next.js / Node.js / Laravel などのアプリケーションでも使うことが多いので、ルートに置いておくと共通で参照しやすいです。

理由２：Docker関連ファイルをまとめて保守性を上げるため

こうしておけば、Dockerに関する設定がひと目でわかり、プロジェクトの構成が整います。

今回の構成ディレクトリ図

今回は方法③を採用し、解説していきます。

env_file を使わない理由を詳しく！

このように env_file: で .env を読み込んでも、
Compose v2 では ${APP_VERSION} のような docker-compose.yml 内の変数展開が効かないことがあります。

そもそも「Compose v2」って？

これは Compose v1 → v2 の進化による仕様の違いです。

.env の変数を正しく反映させる方法を、下記で紹介します。

Docker実行方法（2パターン）

パターン１：コマンドでオプションつけて毎回実行（手動）

docker compose --env-file .env -f docker/docker-compose.yml up -d

1. .env ファイルの内容を明示的に読み込む
2. docker/docker-compose.yml を指定して構成を読み込む
3. .env 内の変数を ${VAR} として YAML に反映する
4. すべてのサービス（container）を バックグラウンド（-d）で起動する
5. まだ存在しないボリューム・ネットワークがあれば自動作成される

→ 毎回打つのがやや面倒

パターン２： start.shで一発起動（自動）

先ほどの①のコマンドを毎回ターミナルに打つのはやや面倒です。

それを自動化したスクリプトになります。（環境変数を読み込み → docker-compose 起動）

start.sh

#!/bin/bash

docker compose --env-file .env -f docker/docker-compose.yml up -d

#!/bin/bash

docker compose --env-file .env -f docker/docker-compose.yml up -d

初回のみ実行権限を付与：

chmod +x start.sh

次からはこれだけでDockerを起動できる。

./start.sh

Dockerを停止したい場合の stop.sh も書き方はほぼ同じです。違うのは up -d を down にするだけ！

シェルについてもっと知りたい方は、こちらの記事もおすすめです。

コマンドラインシェル入門：LinuxとWindowsシェルの違い

シェル入門！LinuxとWindowsの違いと開発例を紹介。シェルの基本を学び、開発に役立つ具体的なコマンドを探求しよう。

it-bokenki.com

てんハロ運営者

おつかれさまでした！

The post 【Docker環境構築】.envとdocker-compose.ymlはどこに置く？おすすめの配置と起動方法まとめ first appeared on てんハロ｜未経験エンジニアのIT学習ログ.

てんハロ運営者

バグヲ

どっかー…？ なんか難しそう…

てんハロ運営者

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

• 開発環境を一瞬で作りたい
• チームと同じ環境で作業したい
• MacでMySQLをすぐに使えるようにしたい

がまぁまぁわかります！

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

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

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

it-bokenki.com

Dockerとは？

Dockerとは、「アプリを動かすための環境」をまるごとお弁当箱のようにパッケージにできるツールです。

メリット

• ✅ 開発環境の構築が一瞬でできる
• ✅ チームで同じ環境を再現できる
• ✅ テスト・本番環境の切り替えも簡単

など、プログラミング学習でも現場でも大活躍します。

環境構築手順

ステップ0：Macのチップ確認（IntelかApple Siliconか）

まず前提として、自分のMacの「チップの種類」を確認します。

✔ 確認方法

1. メニューバー左上の「（リンゴマーク）」をクリック
2. 「このMacについて」を選ぶ
3. 表示されるウィンドウで「チップ」の項目を確認

下記が表示された場合、Apple M4 Pro → Apple Silicon 用の Docker を選びましょう。

ステップ1：Docker Desktop のインストール

① Docker公式サイト にアクセス

② 「Download for Mac – Apple Silicon」を選んでインストーラをダウンロード

③ ダウンロードされた.dmg を開き、「Docker.app」をアプリケーションフォルダに移動

ステップ2：Docker初期セットアップと起動

① アプリケーションから Docker を起動

「Docker サブスクリプション利用規約」への同意確認画面が表示されます。

📌 ざっくり要約

• 個人利用 や 小規模な開発会社での使用なら、無料で使えます！（AcceptしてOK）
• 商用利用で「社員250人超 or 年間収益1,000万ドル超」の場合は有料プランが必要

② 「Use recommended settings」でOK

少し待つと、画面右上のメニューバーに「🐳クジラマーク」が表示されます。

補足：Docker Desktop のアカウント登録 or ログイン画面

Dockerアカウントを使うと、Docker Hub（イメージ共有サービス）と連携したり、CI/CD用に活用できたりします。

ただし、ローカルで開発するだけならアカウント登録は不要です！
「Skip」をクリックしたら、いよいよDockerが使えるようになります🐳

ステップ3：MySQLコンテナ用のdocker-compose.ymlを準備

下記は docker-compose.yml は MySQLコンテナをローカルに構築するための雛形になります。

version: '3.8'  // Docker Composeのバージョン

services:
  mysql:  // サービス名（任意）
    image: mysql:8.0   // 使用するMySQLのバージョン
    container_name: 任意コンテナの名前
    restart: always. // PC再起動後も自動で再起動する
    environment:  // MySQLの初期設定（環境変数）
      MYSQL_ROOT_PASSWORD: ${MYSQL_ROOT_PASSWORD}
      MYSQL_DATABASE: ${MYSQL_DATABASE}
      MYSQL_USER: ${MYSQL_USER}
      MYSQL_PASSWORD: ${MYSQL_PASSWORD}
    ports:
      - "3306:3306" 
    volumes:
      - mysql_data:/var/lib/mysql  // データ永続化

volumes:
  mysql_data:   // データ永続化

version: '3.8'  // Docker Composeのバージョン

services:
  mysql:  // サービス名（任意）
    image: mysql:8.0   // 使用するMySQLのバージョン
    container_name: 任意コンテナの名前
    restart: always. // PC再起動後も自動で再起動する
    environment:  // MySQLの初期設定（環境変数）
      MYSQL_ROOT_PASSWORD: ${MYSQL_ROOT_PASSWORD}
      MYSQL_DATABASE: ${MYSQL_DATABASE}
      MYSQL_USER: ${MYSQL_USER}
      MYSQL_PASSWORD: ${MYSQL_PASSWORD}
    ports:
      - "3306:3306" 
    volumes:
      - mysql_data:/var/lib/mysql  // データ永続化

volumes:
  mysql_data:   // データ永続化

データ永続化とは？と思われた方は、下記の記事にて解説しています！

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

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

it-bokenki.com

ステップ4：.envファイルの準備

上記の docker-compose.yml は .env とセットで動作します。

同じフォルダに .env ファイルを作成して、以下のように記述してください。

MYSQL_ROOT_PASSWORD=ルートパスワード
MYSQL_DATABASE=データベース名
MYSQL_USER=ユーザー名
MYSQL_PASSWORD=パスワード

ステップ5：MySQLコンテナの起動

docker-compose.yml がある場所で下記を実行

docker compose up -d

成功すると、MySQLが起動して .env の設定が反映された状態になります。

ステップ6：MySQLコンテナに接続

下記は、Docker コンテナ内の MySQL に接続して、対話的に操作するコマンドです。
パスワード聞かれたら .env に書いた rootpass を入力

docker exec -it 任意コンテナの名前 mysql -u root -p

ログインできたら次のコマンドで設定したデータベースがあるか確認

SHOW DATABASES;

ステップ7：文字化け防止（utf8mb4）

Docker経由でMySQLに接続すると、文字コードが latin1 になることがあります。

全角文字を扱うには utf8mb4にするには以下のようにオプションを追加して接続してください。

docker exec -it　コンテナ名 mysql -u root -pパスワード --default-character-set=utf8mb4

その後のセッション内では、latin1 が utf8mb4 に変更されています。

SET NAMES utf8mb4;

⚠️ 注意点

exit; すると元に戻るため、必要に応じて my.cnf に設定を加えるか、SQLスクリプトで自動化しましょう。

ターミナルでテーブルを作ってみよう

DockerでMySQLを使う場合は、基本的にターミナル（CLI）で操作します。
ただし、GUIで操作したい場合も、別のツールを使えば可能です。
今回はターミナルで実行する例を紹介します。

① MySQLのプロンプトに接続

docker exec -it　コンテナ名 mysql -u root -pパスワード --default-character-set=utf8mb4

② 接続後の表示

mysql>

③ 以下のSQLで、users テーブルを作成

CREATE TABLE users (
  id INT AUTO_INCREMENT PRIMARY KEY,
  name VARCHAR(100),
  email VARCHAR(100)
);

④ SHOW TABLES; を実行すると、テーブルが作成されたことを確認できます。

SQL（クエリ）とは？と思われた方は、下記の記事にて解説しています！

SQLの概要と主要なコマンド： データベース操作の基本を学ぼう！

SQLの概要と主要なコマンドについて解説します。SQLはデータベース操作において重要です。データベース操作の基本を理解し、データの効率的な操作を行いましょう！

it-bokenki.com

SQLのCREATE文の基礎 : テーブルの作成をマスターしよう！

SQLのCREATE文の基礎をマスターすることで、データベース操作の幅が広がり、より高度なデータベースの開発や管理ができるようになります。

it-bokenki.com

補足：Docker操作の基本コマンド

docker ps -a                 # コンテナ一覧（停止中も）
docker stop コンテナ名        # 停止
docker rm コンテナ名          # 削除
docker images               # イメージ一覧
docker rmi イメージID         # イメージ削除
docker volume ls            # ボリューム一覧

てんハロ運営者

おつかれさまでした！

The post DockerでMySQLをローカル構築｜Mac対応・CLI操作と文字化け対策も解説 first appeared on てんハロ｜未経験エンジニアのIT学習ログ.

てんハロ運営者

バグヲ

Drizzle という言葉は聞いたことあるけど、正直よくわかっていない

てんハロ運営者

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

• SQLを型安全に書きたい
• マイグレーションやテーブル設計をコードで管理したい
• ちょっとした変更が面倒くさい

がまぁまぁわかります！

未経験からエンジニア転職を目指すなら
👉 テックゲート転職 をチェック！

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

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

it-bokenki.com

Drizzleとは？

Drizzle（ドリズル） は、以下の2つの機能を持つツールです。

つまり、「データベースの設計」や「変更」を コードで管理できる便利なツール です！

メリット

• ✅️ TypeScriptでデータベースの列や型をコードで明確に書けて、間違いが減る
• ✅️ テーブルの追加や変更をしたら、変更用のSQLを自動で作ってくれる
• ✅️ コマンド1つで、SQLを書かずにデータベースが更新できる
• ✅️ 無駄な機能が少なく、動作が速い＆自由に使いやすい

Drizzleの使い方

例として、下記の流れをご紹介します。
DrizzleでSQL実行 → Dockerのmysqlに接続してテーブル確認

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

ステップ１：パッケージインストール

npm install drizzle-orm　　　　# アプリの中で使う本体（DB操作・定義に使う）
npm install -D drizzle-kit　　# 開発時だけ使うCLIツール（マイグレーション生成用）

npx drizzle-kit init　　　　　 # 初期化コマンドも実行

これで drizzle.config.ts が作成されます。

ステップ２：drizzle.config.ts の設定

import type { Config } from "drizzle-kit";

export default {
  schema: "./src/schema", // スキーマファイルのディレクトリ
  out: "./drizzle",       // マイグレーションファイル出力先
  dialect: "mysql",       // DBの種類（mysql / pg / sqlite）
  dbCredentials: {
    host: "localhost",
    port: 3306,
    user: "root",
    password: "パスワード",
    database: "データベース名",
  },
} satisfies Config;

import type { Config } from "drizzle-kit";

export default {
  schema: "./src/schema", // スキーマファイルのディレクトリ
  out: "./drizzle",       // マイグレーションファイル出力先
  dialect: "mysql",       // DBの種類（mysql / pg / sqlite）
  dbCredentials: {
    host: "localhost",
    port: 3306,
    user: "root",
    password: "パスワード",
    database: "データベース名",
  },
} satisfies Config;

ステップ３：スキーマ定義

例として「ユーザー（users）が投稿（posts）を複数持てる」という関係をDrizzle を使って表現します。

▶ usersテーブル

// src/schema/users.ts
import { mysqlTable, varchar } from "drizzle-orm/mysql-core";
import { relations } from "drizzle-orm";
import { posts } from "./posts"; // postテーブルを読み込む

export const users = mysqlTable("users", {
  userId: varchar("user_id", { length: 36 }).primaryKey(), // ユーザーID（主キー）
  name: varchar("name", { length: 100 }), // ユーザー名
});

// ユーザーと投稿の「1対多」リレーションを定義
export const usersRelations = relations(users, ({ many }) => ({
  posts: many(posts, {
    fields: [users.userId], // usersテーブルの userId を使って
    references: [posts.userId], // postsテーブルの userId (外部キー)を参照する
  }),
}));

// src/schema/users.ts
import { mysqlTable, varchar } from "drizzle-orm/mysql-core";
import { relations } from "drizzle-orm";
import { posts } from "./posts"; // postテーブルを読み込む

export const users = mysqlTable("users", {
  userId: varchar("user_id", { length: 36 }).primaryKey(), // ユーザーID（主キー）
  name: varchar("name", { length: 100 }), // ユーザー名
});

// ユーザーと投稿の「1対多」リレーションを定義
export const usersRelations = relations(users, ({ many }) => ({
  posts: many(posts, {
    fields: [users.userId], // usersテーブルの userId を使って
    references: [posts.userId], // postsテーブルの userId (外部キー)を参照する
  }),
}));

▶ postsテーブル

// src/schema/posts.ts
import { mysqlTable, varchar } from "drizzle-orm/mysql-core";
import { relations } from "drizzle-orm";
import { users } from "./users"; // usersテーブルを読み込む

export const posts = mysqlTable("posts", {
  postId: varchar("post_id", { length: 36 }).primaryKey(), // 投稿ID（主キー）
  userId: varchar("user_id", { length: 36 }).notNull(), // 紐づくユーザーのID（外部キー）
  title: varchar("title", { length: 255 }), // 投稿タイトル
});

// 投稿とユーザーの「多対1」リレーションを定義
export const postsRelations = relations(posts, ({ one }) => ({
  user: one(users, {
    fields: [posts.userId], // postsテーブルの userId を使って
    references: [users.userId], // usersテーブルの userId を参照する
  }),
}));

// src/schema/posts.ts
import { mysqlTable, varchar } from "drizzle-orm/mysql-core";
import { relations } from "drizzle-orm";
import { users } from "./users"; // usersテーブルを読み込む

export const posts = mysqlTable("posts", {
  postId: varchar("post_id", { length: 36 }).primaryKey(), // 投稿ID（主キー）
  userId: varchar("user_id", { length: 36 }).notNull(), // 紐づくユーザーのID（外部キー）
  title: varchar("title", { length: 255 }), // 投稿タイトル
});

// 投稿とユーザーの「多対1」リレーションを定義
export const postsRelations = relations(posts, ({ one }) => ({
  user: one(users, {
    fields: [posts.userId], // postsテーブルの userId を使って
    references: [users.userId], // usersテーブルの userId を参照する
  }),
}));

📌 リレーション設定のオプション

relations(...) を使うことで「この人が書いた投稿を全部取得する」などが簡単に設定できます。

ステップ４：マイグレーションSQLファイルを生成

npx drizzle-kit generate --config ./tool/drizzle-kit/drizzle.config.ts

drizzle/0000_*.sql のようなSQLファイルが自動生成されます。

ステップ５：MySQL（Dockerコンテナ）にSQLを適用する

✍️ 方法① ：生成されたSQLファイルを手動で反映

# SQLファイルが自動生成される（drizzle/0000_*.sqlみたいな）
npx drizzle-kit generate　　
　
# そのSQLをDocker上のMySQLに流す
docker exec -i MySQLコンテナ名 mysql -u root -p データベース名 < ./tool/drizzle-kit/drizzle/0000_xxxx.sql

▶ 自動生成ファイルの出力場所

マイグレーションに変更があるたびに、generate → docker exec を繰り返すことでDBを更新できます。

⚠️ 2回目以降のマイグレーション手順
スキーマを変更したら、以下の2コマンドだけでOKです。

npx drizzle-kit generate --config ./tool/drizzle-kit/drizzle.config.ts 
npx drizzle-kit migrate --config ./tool/drizzle-kit/drizzle.config.ts

generate：変更差分から.sql を生成
migrate：生成されたSQLをDBに反映
初回は push、以降は generate → migrate で回せます。

✍️ 方法② ：マイグレーションを自動で反映（推奨）

npx drizzle-kit push

npx drizzle-kit push は、src/schema などで定義された TypeScript ベースのスキーマ定義を読み取り、差分がある場合はそれを元に自動で SQL を生成し、直接データベースに反映してくれるコマンドです。

つまり、SQLファイルを手動で実行する必要がなく、マイグレーションの自動反映ができる便利な方法です。

ステップ６：テーブルを確認する

マイグレーションが正常に適用されたかどうかを確認するには、以下のコマンド・クエリでMySQLコンテナに入ってテーブル一覧を確認します。

docker exec -it MySQLコンテナ名 mysql -u root -p データベース名     # MySQLに接続

mysql> SHOW TABLES;   # テーブル一覧表示

テーブル一覧が表示され、users や posts などが存在すれば、マイグレーション成功です

SQLを流し込むのは手動と自動、どちらを使うべき？

結論

• 開発中は push を活用して効率よく反映！
• 本番に近い環境やCIでは docker exec で明示的に制御がおすすめ！

てんハロ運営者

おつかれさまでした！

The post Drizzleとは？TypeScriptで型安全にSQL・マイグレーションを管理する方法 first appeared on てんハロ｜未経験エンジニアのIT学習ログ.

てんハロ運営者

バグヲ

どれを使えばいいんだろう〜

てんハロ運営者

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

• GitHubを使い始めたばかり
• git clone に3種類あるのが気になっている
• どれを使えばいいか迷っている

がまぁまぁわかります！

未経験からエンジニア転職を目指すなら
👉 テックゲート転職 をチェック！

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

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

it-bokenki.com

Gitのクローンには3種類ある

GitHubでリポジトリを自分のPCにクローン（コピー）するため、「Code」ボタンを押すと次の3つの接続方法が表示されます。

📌 例えるなら…

• HTTPS：玄関で名前とパスワードを言わないと入れない（毎回認証が必要）
• SSH：合鍵を持っていればそのまま入れる（1回設定すれば楽）
• GitHub CLI：スマートスピーカー付きの玄関。音声コマンドだけで開け閉めできる（コマンドひとつでPRやIssueの操作も完了）

HTTPSの特徴

git clone https://github.com/ユーザー名/リポジトリ.git

🔓️ 特徴

認証が手軽で誰でも使えるが、push時にtoken入力（認証）が必要
※保存済みなら省略可

✔ 使い方

① GitHubでHTTPSのURLをコピーして貼り付け

② パスワードを求められたら、ユーザー名・トークンを貼り付け

git clone https://github.com/ユーザー名/リポジトリ.git

＞ Username for 'https://github.com': ユーザー名
＞ Password for 'https://github.com': tokenの内容

push時に認証を求められないパターン

🔎 パターン1：すでに SSH 接続に切り替わっている

git remote -v を実行して、下記が表示されたら既にSSH接続を使っているという意味です。
なので git push しても token やパスワードを聞かれないのが正しい挙動です。

git remote -v

＞ origin  git@github.com:ユーザー名/リポジトリ.git (fetch)
＞ origin  git@github.com:ユーザー名/リポジトリ.git (push)

🔎 パターン2：HTTPSだけど、token を保存済み

もし以前に HTTPS で push したときに token を保存していたら、Macの「キーチェーン」などに保存されていて、聞かれないこともあります。

SSHの特徴

git clone git@github.com:ユーザー名/リポジトリ.git

🔓️ 特徴

• 初回のみ、SSH鍵を作成してGitHubに登録
• pushもpullも認証無しでスムーズ
• CI/CDや自動化との相性も高い

✔ 使い方

① SSH鍵（鍵ペア）を作る

ssh-keygen -t ed25519 -C "メールアドレス"

どこの階層（ディレクトリ）でも実行してOK
~/.ssh/id_ed25519（秘密鍵）と ~/.ssh/id_ed25519.pub（公開鍵）が生成されます。

② 公開鍵をGitHubに登録

cat ~/.ssh/id_ed25519.pub

1. 上記のコマンドで、公開鍵の中身を確認してコピー
2. GitHubにログイン
3. 右上のアイコンをクリック → Settings（設定）
4. 左メニューから SSH and GPG keys を選択
5. [New SSH key] ボタンをクリック
6. cat コマンドで表示された公開鍵を貼り付けて保存

GitHub CLIの特徴

gh repo clone ユーザー名/リポジトリ

🔓️ 特徴

• GitHub公式CLIツール
• PR作成やIssue管理もコマンドだけでOK
• SSHとHTTPSの接続設定も対話形式で簡単に切り替えられる

✔ 使い方

公式手順はこちらをご確認ください：https://cli.github.com/

結局どれを使えばいい？

トークン保存済みHTTPSとSSHの違いってあるの？

たしかに、トークンを保存していれば
git push 時に毎回パスワードを入力する必要はなく、操作感は SSH と似ています。

でも、それでも SSH を使うべき理由があります。

HTTPSよりSSHを選ぶメリット

結論

見た目は似ていても、安定性・自動化・セキュリティの面でSSHの方が圧倒的におすすめです。
特に、チーム開発やCI/CDの導入が視野にあるなら、最初からSSHに慣れておくのがベストです。

てんハロ運営者

おつかれさまでした！

The post GitHubのHTTPS・SSH・CLIの違いとは？接続方法の選び方をわかりやすく解説！ first appeared on てんハロ｜未経験エンジニアのIT学習ログ.

てんハロ運営者

バグヲ

エラーがでたとき、焦っちゃうよ
みんなどうやって解決してるんだろう…

てんハロ運営者

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

• ボタンを押しても何が起きてるのか分からない
• API通信や送信データを確認したい
• JavaScriptでエラーが出てないのに動かない理由を知りたい

がまぁまぁわかります！

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

F12で開く開発者ツール（DevTools）の使い方｜初心者でもできるエラー調査と表示確認

F12キーで開く開発者ツール（DevTools）の使い方を初心者向けに解説。HTML/CSSの確認、API通信、エラー調査の基本がまるっとわかります。

it-bokenki.com

Networkタブとは？

Webページがサーバーとどんな通信をしているのかを確認できるタブです。

🔍 確認できる内容

• どのURLにリクエストを送っているか
• 送った内容（リクエストボディ）
• サーバーから返ってきた内容（レスポンス）
• ステータスコード（200 OK / 404 Not Found など）
• 通信にかかった時間

Networkタブ関連の用語まとめ

Initiatorタブの読み取り例

DevTools の「Network」タブでリクエストを選ぶと、右側の「Initiator」欄に次のような情報が表示されることがあります。

例：

l7 @ main.821f6781acf946b1.js:4

どういう意味？

• main.821f6781acf946b1.jsの 4行目にある l7という関数がリクエストの発火元
• l7は意味のわからないランダムな名前に変えられてる名前なので意味は読めない
• ファイル名 + 行番号が第一手がかり

🛠 実務での使い方

• 無駄なAPIが呼ばれている原因の特定
• どのイベントが通信を起こしているかを調査

Timingタブの読み取り例

このタブでは、1つの通信にどの工程でどれだけ時間がかかったかを見られます。

例：今回の通信は 約0.5秒（561ミリ秒）かかっています

• Initial connection（接続開始）: 367.61ms
  → サーバーとつなぐための準備。ネットが遅かったり、回線が混んでると長くなる。
• SSL: 183.11ms
  → サイトがHTTPSだと、暗号化するための「手続き時間」がここにかかる。
• Waiting for server response: 192.04ms
  → サーバーが応答を返すまでの待ち時間。処理が遅いとここが長くなる。

🧠 ポイント

• 合計が長い＝表示が遅い原因がある
• どこに時間がかかっているかを見れば、原因が「ネットか？サーバーか？」が分かる

JavaScriptでエラーが出ていないのに動かない理由は？

console.log() では何も出てないのに画面が止まっている場合、通信エラーやバックエンドからの空返答が原因かもしれません。
→ Networkタブで通信内容・レスポンスをチェックすることで、画面が更新されない理由を特定できます。

🧨 こんなエラー遭遇したら…

• ボタンを押しても動かない
• エラーが出ないのに動作しない

🕵️‍♂️ココを確認

• Networkタブで通信が起きてるか
• Statusは200か？
• Responseの中身は何が帰ってきてる？

てんハロ運営者

おつかれさまでした！

SSGとSSRの違いとは？

SSGとSSRの違いを初心者向けにやさしく解説。用途別の使い分けや特徴、向いているケースを具体例で紹介します。

it-bokenki.com

The post 【初心者向け】Networkタブの使い方をやさしく解説｜APIの見方や通信トラブル対処まで first appeared on てんハロ｜未経験エンジニアのIT学習ログ.

てんハロ運営者

バグヲ

ボタン押しても…動かない！？
エラーも出てないし、もうお手上げだよ〜！

てんハロ運営者

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

• Web開発を始めたばかりの方
• タブごとの役割と初心者向けの使い方
• よくあるトラブルと確認すべきポイント

がまぁまぁわかります！

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

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

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

it-bokenki.com

F12の開発者ツール（DevTools）とは？

Webサイトの構造や動作を確認・調査・デバッグするための機能がまとめられたツールです。

多くのブラウザ（Chrome、Edge、Firefoxなど）で、キーボードの「F12」キーを押すことで起動できます。

よく使うDevToolsのタブまとめ

フロントエンドエンジニア向けのタブと活用例

バックエンドエンジニア向けのタブと活用例

どちらにも役立つ便利タブ

フロントエンド・バックエンドのどちらの立場でも使える、一歩進んだ開発者向けタブをまとめました。
デバッグ力やパフォーマンス改善の精度がグッと上がります。

【TypeScript】date?: Date | null の意味をやさしく解説！

TypeScriptのdate?: Date | nullの意味を初心者向けにやさしく解説します。

it-bokenki.com

トラブル別 DevTools早見表（初心者向け）

よくあるトラブルごとに開くべきタブとチェックポイントをまとめ、さらにフロントエンド／バックエンドの視点での活用例もあわせて紹介します。

まとめ

• F12キーを押すだけで開発者ツールが使える！
• HTML/CSSの表示、JavaScriptのエラー、API通信の確認が簡単にできる
• 初心者はまず「Console」「Network」「Application」の3つをマスターしよう！

てんハロ運営者

おつかれさまでした！

The post F12で開く開発者ツール（DevTools）の使い方｜初心者でもできるエラー調査と表示確認 first appeared on てんハロ｜未経験エンジニアのIT学習ログ.