開発環境

Gitの超入門(VS Codeでも使える):初回設定・最初のコミット・リモート連携

インストール直後から10分で「履歴が残せる」「リモートにバックアップできる」状態へ。コマンドとVS Codeの両方で説明し、.gitignoreブランチの超基本も図解します。

関連:VS Codeの入れ方Maven/Gradle超入門

作業ツリー(Working Directory) ファイルを編集 ステージ(Index) git add ローカルリポジトリ git commit リモート git push

この記事のゴールと前提

  • Gitの基本の流れ(add → commit → push)が分かる
  • 初回設定(ユーザー情報・改行・ブランチ名)ができる
  • 最初のリポジトリ作成〜リモート連携まで完了する
  • VS Codeのソース管理ビューで同じことができる

前提:VS CodeGit(本体)が導入済み。

Step 0:初回設定(名前・メール・改行・デフォルトブランチ)

インストール直後に1回だけやればOKです。

# ← あなたの名前/メールに置き換え
git config --global user.name  "Your Name"
git config --global user.email "you@example.com"

# 改行コード:Windowsは true、macOS/Linux は input 推奨
git config --global core.autocrlf true    # Windows
# git config --global core.autocrlf input # macOS/Linux

# デフォルトブランチ名を main に統一
git config --global init.defaultBranch main

# 見やすいログ(お好みで)
git config --global format.pretty oneline
git config --global alias.last "log -1 --stat"
git config --global alias.tree "log --oneline --graph --decorate --all"

Step 1:リポジトリ作成と .gitignore

  1. 作業用フォルダを作成 → ターミナルで移動。
  2. git init でリポジトリ化。
  3. .gitignore を置いて、不要ファイルを履歴から除外。
mkdir hello-git && cd hello-git
git init
echo "# Hello Git" > README.md
.gitignore(Javaプロジェクト例)
# build / IDE
target/
build/
out/
.classpath
.project
.settings/
.gradle/
.idea/
*.iml

# OS / misc
.DS_Store
Thumbs.db
.gitignore(Node.js例)
node_modules/
dist/
.env
npm-debug.log*
yarn-error.log*

Step 2:ステージと最初のコミット

Gitは「作業ツリー → ステージ(インデックス) → リポジトリ」の三段構え。まずはステージへ載せます。

git status            # 変更の確認
git add README.md     # 変更をステージへ
git commit -m "初回コミット"

複数ファイルまとめてなら git add .。ただし余計なファイルを拾わないよう .gitignore を先に用意するのがコツ。

Step 3:リモート連携(GitHub等)

  1. GitHub/GitLab/Bitbucketなどで空のリポジトリを作成(READMEは未選択推奨)。
  2. ローカルからリモートURLを登録して、main を初回プッシュします。
# HTTPS 例(URLは自分のものに置き換え)
git remote add origin https://example.com/yourname/hello-git.git
git push -u origin main

# SSH 例(鍵を設定済みの場合)
# git remote add origin git@example.com:yourname/hello-git.git
# git push -u origin main

-u は、次回から git push だけで済むよう、追跡ブランチを結び付けるオプションです。

Step 4:ブランチの超基本

安全に作業するために、機能ごとにブランチを切ります。

# ブランチ作成&切り替え
git switch -c feature/readme-badge

# 変更 → 追加コミット
echo "Status: active" >> README.md
git add README.md
git commit -m "READMEにバッジ追加"

# mainへ取り込み(Fast-Forward)
git switch main
git merge feature/readme-badge
git push

競合が出たら、編集→git addgit commit の順で解決できます(VS Codeならエディタ内にコンフリクトマーカーが表示されます)。

VS Codeでの操作ポイント

  • ソース管理ビュー(左のY字アイコン):変更一覧→チェック(✓)でコミット。
  • ステージ/アンステージ:ファイル右の「+」「−」アイコンで操作。
  • ブランチ切替:左下のブランチ名をクリック→作成/切替。
  • 同期:ステータスバーの「⇅」で pull/push
  • 設定おすすめgit.autofetchtruediffEditor.ignoreTrimWhitespacefalse

よくあるエラーと対処

  • pushが拒否される:リモートに先行コミットあり。git pull --rebase → コンフリクト解消 → git push
  • Permission denied (publickey):SSH鍵未設定。まずはHTTPS URLを使うか、SSH鍵を作って登録。
  • 改行がぐちゃぐちゃ:Windowsは core.autocrlf true、Mac/Linuxは input に設定し直し。
  • 間違ってステージしたgit restore --staged <file>(VS Codeなら右クリック「ステージ解除」)。
  • 直前のコミットメッセージを直したいgit commit --amend(共有後は使わないのが原則)。

コマンド早見表(保存版)

# 状態確認
git status
git log --oneline --graph --decorate --all

# 追加・除外
git add .            # すべて追加(.gitignore は除外)
git restore --staged FILE
git restore FILE

# ブランチ
git branch           # 一覧
git switch -c BR     # 作成&切替
git merge BR         # 取り込み

# リモート
git remote -v
git push -u origin main
git pull --rebase

次に読む記事

FAQ

GitとGitHubの違いは?

Gitはバージョン管理の仕組み(ツール)。GitHubはGitリポジトリをホスティングするサービスの1つです。

VS CodeとEclipse(EGit)のどちらを使えば?

どちらでもOK。VS Codeは軽量で直感的、EclipseはEGitでIDE内完結。この記事のコマンドは両方でそのまま使えます。

著者:まーくん|更新日:2025-09-05

初心者向けVS Codeの入れ方:Windows/Macの完全ガイド

最短10分で完了! 初心者向け VS Code の入れ方 Windows / Mac の手順を図で解説

「まずは道具を整える」が最短ルート。Visual Studio Code(VS Code)は軽快で拡張も豊富。ここでは WindowsmacOS の導入、日本語化おすすめ拡張初期設定Hello World までを迷わず終わらせます。

事前に知っておくこと

  • VS Codeは無料・軽量・拡張が豊富なエディタです(IDEではありません)。
  • 各言語を動かすには、別途実行環境(例:Node.js/Python/Javaなど)が必要です。
  • 公式:https://code.visualstudio.com/(ダウンロードはここから)
インストールの流れ(Windows/Mac共通)
ダウンロード インストール 日本語化 初期設定

Windowsに入れる(最短)

  1. 公式サイトへ:code.visualstudio.comWindows x64 をクリック。
  2. ダウンロードした VSCodeUserSetup-x64-*.exe を起動。
    セットアップでは次のチェックを推奨
    • Add “Open with Code” action to context menu(右クリックに追加)
    • Add to PATH(コマンドラインから code を使える)
    • デスクトップにショートカットを作成(任意)
  3. 完了後、スタートメニューから VS Code を起動。
インストールに失敗する/権限がない場合

管理者権限が必要な環境では、システム版ではなくユーザーインストーラーを使うと通りやすいです。

Macに入れる(最短)

  1. 公式サイトへ:code.visualstudio.commacOS をクリック(Universal版)。
  2. ダウンロードした .dmg を開き、Visual Studio Code.appApplications へドラッグ。
  3. 初回起動でブロックされたら:システム設定 → プライバシーとセキュリティ で「このまま開く」。
  4. ターミナルから code を使えるようにする:
    VS Codeで Cmd + Shift + P → 「Shell Command: Install ‘code’ command in PATH」を実行。

日本語化と言語パック

  1. 左サイドバーの拡張機能(四角いアイコン)を開く。
  2. Japanese Language Pack for Visual Studio Code を検索してインストール
  3. 右下の再起動ボタン、または「表示言語を変更」で日本語に切替。

最初にやる初期設定(コピペ可)

以下は「設定(JSON)」に追記するだけでOK。
コマンドパレットで 基本設定: 設定 (JSON) を開く → 右側のJSONに貼り付け。

{
  "editor.fontSize": 15,
  "editor.tabSize": 2,
  "editor.insertSpaces": true,
  "editor.rulers": [80, 100],
  "files.autoSave": "afterDelay",
  "files.autoSaveDelay": 800,
  "editor.renderWhitespace": "selection",
  "terminal.integrated.defaultProfile.windows": "PowerShell",
  "explorer.confirmDelete": false,
  "workbench.startupEditor": "newUntitledFile"
}

※ 迷ったら「ファイル → ユーザー設定 → 設定」からGUIで同様に変更できます。

初心者に効くおすすめ拡張

Japanese Language Pack

UIを日本語化。初回に入れておくと迷わない。

Prettier

コード自動整形。保存時フォーマットにするとキレイが続く。

ESLint

JavaScriptの品質チェック。チュートリアルに沿って初期化。

Python

Pythonを書くなら必須。Lint/デバッグも一括対応。

Java Extension Pack

Javaの開発向け(Language Support, Debuggerなど)。

GitLens

誰がいつどこを変更したかを可視化。学習にも役立つ。

保存時に自動整形(Prettier)
{
  "editor.defaultFormatter": "esbenp.prettier-vscode",
  "editor.formatOnSave": true
}

Hello World(保存→実行)

ここではインストール直後でも試せる HTML を例にします(ブラウザで動く)。

<!doctype html>
<html lang="ja">
<meta charset="utf-8">
<title>Hello VS Code</title>
<h1>Hello VS Code!</h1>
<p>編集→保存→ブラウザで開けばOK。</p>
  1. VS Codeでフォルダを作成(例:hello-vscode)。
  2. 上のコードを index.html として保存。
  3. エクスプローラーで右クリック→既定のブラウザで開く
    Live Server拡張を入れると自動リロードで快適)

※ Python や Node.js を実行したい場合は、それぞれ Python / Node.js を別途インストールしてから実行してください。

よくあるつまずき

  • code コマンドが使えない:Macは「Shell Command: Install ‘code’ command in PATH」を実行。Windowsはインストーラーで「Add to PATH」を有効にして再起動。
  • 日本語が文字化け:右下のエンコーディングを UTF-8 に切替。保存時に再エンコード可。
  • 拡張がインストールできない:ネットワーク/プロキシ設定を確認(設定で「proxy」を検索)。
  • フォントが見づらいeditor.fontSizeeditor.lineHeight を上げる。等幅フォントの導入も効果的。

次に読むと効率が上がる記事

FAQ

VS Code と Visual Studio は別物?

別物です。VS Codeは軽量エディタ、Visual StudioはWindows向けの大型IDEです。初心者にはVS Codeが扱いやすいです。

どの言語を始めるのが良い?

WebならJavaScript、データ分析ならPython、業務システムならJavaが定番。VS Codeはどれにも対応できます。

著者:まーくん|更新日:2025-09-04

【保存版】Eclipseのインストール手順(JDK設定まで)Mac/Windows対応

EclipseのインストールからJDK設定、JAVA_HOME / PATHの正しい通し方まで。Mac/Windowsごとに手順を分け、つまずきポイントとチェックリストも付けました。

この記事のゴールと前提

  
  • Mac/WindowsでJDKを正しく導入し、JAVA_HOME/Pathを設定できる
  • Eclipse(Pleiades All in One)を迷わず入れられる
  • 導入直後にHello, World!を実行できる

配布元:JDKはOracle公式、Eclipseは日本語化済みのPleiades(willbrains.jp)。WindowsのJDKは Oracle Downloads から。

Mac編(JDK → 環境変数 → Eclipse)

1. JDKのインストール

  1. OracleのJDKダウンロードにアクセスし、macOSを選択。
  2. CPUに合わせてx64またはaarch64(Apple Silicon: M1/M2/M3)を選び、.dmgをダウンロード。
  3. ダウンロードした.dmgを開き、ウィザードに従ってインストール。
補足:迷ったらLTS版(例:JDK 21)を選んでおくと安定します。

2. 環境変数の設定(JAVA_HOME/PATH)

Macは標準の/usr/libexec/java_homeを使うと安全です(複数JDKの切替に強い)。

# zsh(標準)を想定
echo 'export JAVA_HOME=$(/usr/libexec/java_home -v 21)' >> ~/.zshrc
echo 'export PATH="$JAVA_HOME/bin:$PATH"' >> ~/.zshrc
source ~/.zshrc

# 確認
/usr/libexec/java_home -V
echo $JAVA_HOME
java -version
javac -version

3. Eclipse(Pleiades)導入

  1. Pleiades公式にアクセスし、Mac版をダウンロード。
  2. ダウンロードしたファイルをダブルクリックして展開し、アプリをApplicationsへドラッグ&ドロップ
  3. 初回は警告が出る場合あり。右クリック → 開くで回避。

4. 動作確認(Eclipse側)

  1. Eclipse起動 → Preferences > Java > Installed JREsでJDKを追加し、デフォルトにチェック。
  2. Java > Compilerでコンプライアンスを21に。
  3. File > New > Java Project → クラスを作成し、次のコードを実行。
public class Hello {
  public static void main(String[] args) {
    System.out.println("Hello, World!");
  }
}

Windows編(JDK → 環境変数 → Eclipse)

1. JDKのインストール

  1. Oracle Downloadsへ。
  2. Windows x64用のインストーラ(.msi / .exe)をダウンロード。
  3. 管理者権限で実行し、指示に従ってインストール。

2. 環境変数の設定(JAVA_HOME/PATH)

GUIでの設定(推奨)

  1. スタートメニューで「環境変数」と検索 → システム環境変数の編集環境変数(N)…
  2. システム環境変数新規(N)…
    変数名:JAVA_HOME
    変数値:C:\Program Files\Java\jdk-21(例。binは付けない
  3. Pathを選択 → 編集新規%JAVA_HOME%\binを追加。
  4. OKで閉じて新しいコマンドプロンプトを開く。

コマンドで一括設定(管理者)

:: JDKの場所に合わせて変更してください
setx /M JAVA_HOME "C:\Program Files\Java\jdk-21"
setx /M PATH "%PATH%;%JAVA_HOME%\bin"

確認コマンド

echo %JAVA_HOME%
java -version
javac -version

3. Eclipse(Pleiades)導入

  1. Pleiades公式Windows版をダウンロード。
  2. zipを解凍し、C:\pleiades\など日本語や空白のないパスへ配置。
  3. eclipse.exeを起動。ワークスペースはC:\workspace等の半角英数字に。

4. 動作確認(Eclipse側)

  1. Window > Preferences > Java > Installed JREsでJDKを追加し、デフォルトに。
  2. Java > Compilerでコンプライアンスを21に。
  3. Hello, World! を作成して実行(Mac編と同じ)。

よくあるトラブルと対処

  • java が見つからない:WindowsはPathに%JAVA_HOME%\binが入っているか、Macは$JAVA_HOME/binがPATHの先頭か確認。ターミナルを新しく開く。
  • Eclipseが古いJREで動くInstalled JREsのチェック先とJava Compilerを見直し。プロジェクトの「JRE System Library」も確認。
  • Apple Siliconで遅い/起動しない:aarch64版のJDK/Eclipseを使用。Rosetta経由を避ける。

この次に知りたい情報

FAQ

JAVA_HOMEはどこを指せばいい?

JDKのルートフォルダを指定します(Windows例:C:\Program Files\Java\jdk-21、Macは/usr/libexec/java_homeの出力)。binは付けません。

JDKとJREの違いは?

JREは実行環境、JDKはコンパイル含む開発環境。開発にはJDKが必要です。

Oracle以外のJDKでもよい?

はい(例:Temurin)。ただし本記事はOracle JDKを前提に記述しています。

著者:まーくん|更新日:2025-08-24