プログラマー基礎講座①｜VS Codeで最短の環境構築手順

PC・ガジェット
2025.10.07

※本シリーズは趣味でプログラミングを楽しむ方向けです。内容に誤りやより良い方法があれば、コメントでぜひ教えてください！

この記事でわかること

  • 目的別(ゲーム公開／便利ツール公開)に共通する”最初の一歩“
  • Visual Studio Code(VS Code) の導入～日本語化～必須拡張
  • 初心者がつまずきやすい保存場所と設定の最適解

次回予告: 第2回は「機械学習ってなに？AIを体験しよう！」を解説します。

目標(ロードマップ)

この講座シリーズで目指すゴールは以下の3つです。

  • ✅ ブラウザで遊べる自作ゲームの作成！
  • ✅ 作成したゲームアプリをストア等に公開に挑戦
  • ✅ 日常で使える便利ツール(自動化・変換など)を作成

言語やフレームワークが違っても、まず整えるべき共通基盤はエディター環境。
今回は VS Code を使って、“最短で書いて動かせる” 状態を作ります。

なぜ VS Code なのか

3つの理由

  1. 無料＆軽快: Windows / macOS / Linux で動作
  2. 拡張が豊富: 言語サポート、整形、Lint、デバッグまでワンクリック
  3. 即戦力: 多くの言語でコンパイラのフル構築なしでも試せる

補足: C/C++、Java、.NET など本格ビルドは後から追加でOK。まずは書いて確認できることを優先します。

Step 1. VS Code をインストール

インストール手順

  1. 公式サイトからインストーラを取得
  2. 画面の指示に従ってインストール
  3. インストール完了後、PCを再起動する

💡 再起動することで、PATH設定などが正しく反映されます。

インストール時の推奨チェック

  • ✅ 「PATH に追加」があればオン
    • これをオンにすると、ターミナル（コマンドプロンプトやPowerShell）で code . と入力するだけで、**今いるフォルダ（カレントディレクトリ）**をVS Codeで開けるようになります
    • カレントとは：「現在作業中のフォルダ」のこと。例えば C:\dev\my-project フォルダで作業しているとき、そこが「カレントディレクトリ」です
  • 既定のファイル関連付けは好みで(後から変更可)

⚠️ よくあるつまずき: 保存先フォルダ

初期だとワークスペースを「ドキュメント(My Documents)」に置きがちですが、後で散らかります。開発専用フォルダを作っておきましょう。

推奨例:

  • C:\dev や D:\dev(外部ドライブ派は D:\dev など)
  • 半角英数字のパスにするとビルド系ツールの相性問題を回避しやすい
    (パス指定するときに日本語を入力したり読み込んだりするときに発生する不具合）

Step 2. 日本語化する

日本語化の手順

  1. VS Code を起動
  2. 左の**拡張機能(Extensions)**アイコンをクリック
  3. 「Japanese Language Pack」を検索してインストール
  4. 再読み込み(再起動)で日本語UIに切替

英語UIのままでも使えますが、日本語化すると設定検索やエラー読解がグッと楽です。

Step 3. 言語別”最初の拡張”

まずは「書ける → 保存 → すぐ実行／プレビュー」の順で整えます。

🌐 Web(HTML/CSS/JavaScript)

拡張機能 機能
Live Server 保存のたびにブラウザ自動更新
Prettier 保存時整形でコードをきれいに

🐍 Python

拡張機能 機能
Python(Microsoft) 実行、Lint、デバッグがひとまとめ

コマンドパレットで「Python インタプリタの選択」を実施(後で仮想環境化も可)

⚙️ C/C++

拡張機能 機能
C/C++(IntelliSense) 補完・定義ジャンプ

コンパイラ(MinGW / Clangなど)は後日導入でOK(今回は”書ける”まで)

📦 そのほか(必要に応じて)

  • ESLint / Pylint: 静的解析でミス早期発見
  • Git Graph: 履歴を視覚的に把握
  • Code Spell Checker: スペルミスを防止

Step 4. 最低限の初期設定

[ファイル] > [ユーザー設定] > [設定] から検索して有効化。

推奨設定

設定項目 推奨値 効果
保存時整形 editor.formatOnSave: true 保存のたびに自動整形
Tab/Space 統一 editor.tabSize: 2 or 4<br>editor.insertSpaces: true インデント統一
自動保存 files.autoSave: "afterDelay" 短い遅延で自動保存
改行コード Windows: CRLF<br>macOS/Linux: LF 環境に応じて設定
Default Formatter Prettier など 使用する整形ツールを指定

💡 迷ったら「保存時整形だけオン」が最強。将来の差分レビューが圧倒的に楽になります。

Step 5. はじめてのプロジェクト

Python の例(便利ツールの入口)

  1. dev に my-tools フォルダを作成
  2. hello.py を作成
  3. 右上の ▶ 実行、またはターミナルで python hello.py

最初の1本: Hello World!

プログラミングの第一歩は「Hello World」の出力から！

print("Hello World!")
print("プログラミングの世界へようこそ！")

このコードを実行すると、ターミナルに以下のように表示されます。

&amp;lt;code&amp;gt;Hello World!
プログラミングの世界へようこそ！&amp;lt;/code&amp;gt;

シンプルですが、これがすべての始まりです。「書いたコードが動く」という体験を最初に味わいましょう！

よくある疑問(FAQ)

Q. まず何の言語から始めればいい?

A. ブラウザゲームなら JavaScript、日常の自動化なら Python が鉄板。迷ったらこの2択。

Q. “コンパイル不要”って本当?

A. Web/スクリプト系は基本不要。本格的なネイティブ開発は後からコンパイラやSDKを導入。

Q. フォルダ名に日本語はダメ?

A. 完全NGではないけれど、半角英数字だとCLIやビルド系でのトラブルが激減します。

第1回のまとめ

  • ✅ VS Code + 最低限の拡張で**”書ける＆動かせる”**状態に
  • ✅ 保存場所(パス)を設計するだけで後の混乱を回避
  • ✅ 小さく作ってすぐ試す——これが継続と上達の最短ルート

改善提案や指摘は大歓迎です。コメントでぜひ教えてください!

次回予告:機械学習ってなに？AIを体験しよう！

次回はAIへの第一歩機械学習について説明します！
これがどのようにしてゲーム作成に生きるか・・・私もまだ想像つきません💦

お楽しみに！

コメント

タイトルとURLをコピーしました