VS Code

はじめてのプログラミング学習ロードマップ:VS Code導入 → Progate → ドットインストール → 模写コーディング → 自作LP → 就職/転職

はじめてのプログラミング学習ロードマップ

これから始める人向けに、最短で“作れる人”になるための流れを一本化。VS Code導入Progateドットインストール模写コーディング(Codejump)自作LP/サイト(AI活用で課題出し)→ 就職/転職 の順に、“何を・どのくらい・どう評価するか”まで具体化します。

VS Code Progate基礎固め ドットインストール手を動かす 模写(Codejump) 自作LP/サイト→応募
学びの順番を決めるだけで、迷いが激減します。

このロードマップで得られること

  • 学習を順番化し、迷いを0にする
  • “見て終わり”を防ぎ、必ず手が動く状態にする
  • ポートフォリオ(面接で見せられる成果物)が手元に残る

Step 0:VS Code を導入(最短10分)

まずは道具を整えます。VS Code は無料・軽量・拡張が豊富。初心者向け VS Code の入れ方を見ながら、日本語化・おすすめ拡張・保存時フォーマットまで終わらせましょう。

  • 最低限の拡張:Japanese Language Pack / Prettier / GitLens
  • Git も同時に使えるとベスト:Git超入門

Step 1:Progateで基礎固め(概念を一気に掴む)

Progate は図解+スライドで概念を素早く掴むのに最適。HTML/CSS/JavaScript(もしくはPython/Java)など、やりたい分野の道筋を一気に俯瞰しましょう。

  • 狙い:用語・全体像・代表的な文法を“覚える”ではなく見渡す
  • 目安:1〜2週間で2コース以上(メモ取り推奨)
  • アウトプット:重要語の1行定義をノート化(例:DOM=HTMLをツリーとして扱う仕組み)
  

ダウンロードはここから

Step 2:ドットインストールで“手”を育てる(短時間×反復)

ドットインストールは3分動画で“手を動かす習慣”がつきます。毎日2〜3本ずつでOK。止めて真似して打つ→詰まったら10秒戻す、を繰り返します。

  • 狙い:タイピングで迷わない指を作る(コピペでは伸びません)
  • 目安:1〜2週間、毎日30〜45分
  • アウトプット:やったことをそのままGitでコミット(学習ログが職歴の代わりになります)
  

ダウンロードはここから

Step 3:模写コーディング(Codejump推奨)

模写は設計目線を育てます。Codejump は学習向けに作例が整理されていて難易度調整しやすいのが利点。

  1. 作例を1つ選ぶ → まず完成イメージのスクショを保存
  2. 骨組み(HTML)→ 見た目(CSS)→ 動き(必要ならJS)の順で作る
  3. Figma/DevToolsで余白・フォント・色を計測して合わせる
  4. できたらBefore/Afterの画像をREADMEに並べる

コツ:スマホ幅→PC幅のモバイルファーストで作ると崩れにくい。

  ここからいけるよ!

Step 4:自作LP/ホームページを作る(AIで課題を出してもらう)

いきなり“完全オリジナル”はハード。まずはテーマを1つ決める(例:カフェLP、ポートフォリオ、架空サービス)。AIに要件定義を手伝ってもらい、短いスプリントで小さく作って小刻みに改善します。

AIへの依頼テンプレ(コピペOK)

あなたはウェブ制作の講師です。初心者向けに、1週間で完成できるランディングページ課題を出してください。
制約:HTML/CSS/プレーンJSのみ。長いアニメは禁止。スマホファースト。
出力:
1) ペルソナとサイト目的
2) 必要セクション(見出しと要素)
3) ワイヤーフレームのテキスト説明
4) 色・フォントの提案(Google Fonts)
5) 完成チェックリスト(アクセシビリティ/表示速度含む)

完成させるためのチェックリスト

  • 目的(1行)が冒頭に書ける
  • CTA(お問い合わせ/申込)が目立つ
  • スマホ幅(375px)で崩れない
  • Lighthouse で Performance 80+ / A11y 90+
  • READMEに機能・スクショ・学びを記載
  • 無料ホスティング(Vercel/Netlify等)にデプロイ済み

Step 5:作品を“職歴”に変える(就職/転職)

面接は作品×説明力で戦えます。3点セットを用意しましょう。

  1. GitHubリンク(コミット履歴で継続を示す)
  2. デプロイURL(スマホで開ける実物)
  3. README(目的/工夫/大変だった点/今後の改善)

READMEの雛形(コピペOK)

# プロジェクト名
- 目的(1行): 例)カフェの来店予約を増やすLP
- 役割: デザイン/コーディング/テスト
- 期間: 7日
- 技術: HTML/CSS/JS, Git, Lighthouse

## スクリーンショット
- Before(模写元/参考): 画像URL
- After(完成): 画像URL

## こだわり・工夫
- 例)ファーストビューのLCPを2.0s以下に最適化(画像の遅延読み込み)

## 難しかった点と解決
- 例)ヘッダー固定によるレイアウトずれ → sticky + padding-top で解決

## 今後の改善
- 例)フォームのバリデーション強化、アクセシビリティ改善

面接では「作り直すなら何を変えるか」を話せると評価が上がります。

学習スケジュール例(8週間)

Week 1

  • VS Code導入・日本語化・拡張
  • Git初回設定・学習ログ用リポジトリ作成

Week 2–3

  • Progateで基礎2コース
  • 用語の1行定義ノート

Week 4–5

  • ドットインストール毎日30–45分
  • 学習ログを毎日コミット

Week 6

  • Codejumpで模写1本完走
  • Before/AfterでREADME作成

Week 7–8

  • AIで課題をもらい自作LP完成
  • デプロイ→応募開始

よくあるつまずきと回避策

  • 動画を見て満足 → 毎回完了コミットを1つ残す(ログ=資産)
  • 完璧主義 → 小さく出す。LPは1週間で“良い未完成”を公開
  • 環境で迷子 → VS Code記事をブックマークして戻る / つまずきはREADMEに記録

FAQ

Progateとドットインストールは両方必要?

役割が違います。Progate=概念の俯瞰、ドットインストール=手を動かす練習。両方やると定着が早いです。

模写は何本やればいい?

最低1本完走。余裕があれば2本目で難易度を少し上げ、最後に自作LPへ進みます。

バックエンドをしたい場合は?

このロードマップの後に、Node.js/Python/Javaの基礎→簡単なAPI→フォーム送信のバックエンド化へ進むと良いです。

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

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