Visual Studio Codeをインストールしよう

前回の記事で、WordPress管理画面の基本操作をマスターし、サイトタイトルの変更や固定ページの編集を実際に体験しました。

管理画面での操作に慣れることで、WordPressの全体像が見えはじめてきたのではないでしょうか。

今回は、WordPressサイトの見た目をカスタマイズするための準備として、Visual Studio Code（VSCode）というソフトをインストールします。

VSCodeって何？

VSCodeは、文字を書いたり編集したりするためのソフトです。メモ帳の高機能版と考えてください。

WordPressのサイトの見た目を変更するには、特別なファイルを編集する必要があり、そのためにこのソフトが必要になります。

今回の目標

• VSCodeの概要理解
• VSCodeのダウンロードとインストール
• インストール時の重要な設定ポイントの理解
• VSCodeの初回起動確認

このインストール作業は、次回のオリジナルテーマ作成で必要となります。しっかりと手順を確認しながら進めてください。

Visual Studio Codeとは

VSCodeの概要

Visual Studio Code（VSCode）は、Microsoft社が開発した無料のソフトです。

WordPressのテーマ開発やプラグイン開発において、最も人気の高いソフトの一つです。

VSCodeの特徴

• 完全無料で使用可能
• 軽量で高速動作
• 豊富な拡張機能
• シンタックスハイライト（コードの色分け表示）
• インテリセンス（コード補完機能）
• Git統合（バージョン管理機能）

なぜVSCodeが必要なのか

WordPressテーマ開発での重要性

• PHPファイルの編集：WordPressテーマはPHPで構成されています
• CSSファイルの編集：スタイルシートの作成・編集
• HTMLファイルの編集：テンプレートファイルの作成
• ファイル管理：複数のファイルを効率的に管理

メモ帳では不十分な理由

• シンタックスハイライトなし：コードが見づらい
• コード補完機能なし：入力効率が悪い
• エラー検出機能なし：ミスに気づきにくい
• ファイル管理機能なし：複数ファイルの管理が困難

それでは早速、VSCodeをダウンロード・インストールしていきましょう。

VSCodeのダウンロード

公式サイトへのアクセス

VSCode公式ダウンロードページ 以下のURLにアクセスします

https://azure.microsoft.com/ja-jp/products/visual-studio-code

OSに合うインストーラーの選択

1. 「VS Code をダウンロードする」ボタンをクリック
2. Window10/11 ボタンをクリック
   （OSに合わせて選択してください）

ダウンロードされるファイル

• ファイル名：VSCodeUserSetup-x64-1.101.2.exe（バージョンによって数字は変わります）

ダウンロード完了の確認

• ブラウザの下部またはダウンロードフォルダにファイルが保存されます
• ファイル名が正しいことを確認してください

VSCodeのインストール手順

インストーラーの実行

1. インストーラーの起動

• ダウンロードしたVSCodeUserSetup-x64-1.101.2.exeをダブルクリック
• Windows Defenderやウイルス対策ソフトの警告が表示される場合は「実行」を選択

2. ライセンス契約への同意

• 「使用許諾契約書」画面が表示されます
• 内容を確認し、「同意する」を選択
• 「次へ」ボタンをクリック

3. インストール先フォルダの指定

• デフォルトのインストール先が表示されます
• 通常は変更不要：C:\Users\[ユーザー名]\AppData\Local\Programs\Microsoft VS Code
• 「次へ」ボタンをクリック

4. スタートメニューの設定

• スタートメニューに追加するフォルダ名を指定
• デフォルトのまま「次へ」ボタンをクリック

5. 追加タスクの詳細設定（重要）

この段階が最も重要です。

以下の設定項目が表示されます。

デフォルトでONの項目（必須）

• ☑ サポートされているファイルの種類のエディターとして、Codeを登録する
• ☑ PATHへの追加（再起動後に使用可能）

デフォルトでOFFの項目（推奨）

• ☐ エクスプローラーのファイルコンテキストメニューに「Codeで開く」アクションを追加する
• ☐ エクスプローラーのディレクトリコンテキストメニューに「Codeで開く」アクションを追加する

重要： デフォルトでOFFの2つの項目は、今後の記事で説明する手順と同じ操作をするためにONにすることを推奨します。

設定の詳細説明

必須設定（デフォルトでON）

「サポートされているファイルの種類のエディター登録」（必須）

• PHPファイルやCSSファイルをダブルクリックした時にVSCodeで開くようになります
• この設定をOFFにすると正常に動作しない可能性があります

「PATHへの追加」（必須）

• コマンドラインからVSCodeを起動できるようになります
• この設定をOFFにすると一部機能が動作しない可能性があります

推奨設定（デフォルトでOFF）

「ファイルコンテキストメニューに追加」（推奨ON）

• ファイルを右クリックして直接VSCodeで開けるようになります
• WordPressファイルの編集が格段に楽になります

「ディレクトリコンテキストメニューに追加」（推奨ON）

• フォルダを右クリックしてVSCode全体で開けるようになります
• テーマフォルダ全体を一度に開いて作業できます

任意の設定項目

• ☐ デスクトップ上にアイコンを作成（お好みで設定）

6. インストール準備完了

• 設定内容を確認
• 「インストール」ボタンをクリック
• インストール進行状況が表示されます（1-2分程度）

7. インストール完了

• 「Visual Studio Codeを実行する」にチェックが入っていることを確認
• 「完了」ボタンをクリック

VSCodeの初回起動確認

VSCodeの起動

自動起動の確認 インストール完了後、VSCodeが自動的に起動します。VSCodeが正常に起動すれば、インストールは成功です。

初期設定の確認

Welcome画面

• VSCodeの使い方や機能説明が表示されます
• 今回は確認のみで、特に設定は行いません
• 画面右上の「×」で閉じることができます

おめでとうございます！

VSCodeのインストールが完了しました。これで次回のオリジナルテーマ作成の準備が完全に整いました。

まとめと次回予告

今回完了したこと

VSCode環境の構築完了

• VSCodeのダウンロードとインストール
• 重要な設定項目の適切な選択
• 動作確認の実施
• オリジナルテーマ開発環境の準備完了

インストールのポイント

成功のポイント

• 「PATHへの追加」を必ずONにする（デフォルトでON）
• 「エディター登録」を必ずONにする（デフォルトでON）
• 「コンテキストメニュー追加」をONにすると便利（デフォルトでOFF）

学習の進歩

環境構築の進歩

• Local環境構築
• WordPress管理画面操作
• VSCode環境構築（今回）

VSCodeのインストールが完了し、WordPress開発に向けた準備が一歩進みました。

次回はVSCodeをWordPress開発に最適化していきます。

次回予告：VSCodeをWordPress開発用にカスタマイズしよう！

VSCodeのインストールが完了しました。次回は、VSCodeをWordPress開発で使いやすくカスタマイズしていきます！

次回の内容予定：

• WordPress開発に必要な拡張機能のインストール
• PHPコード補完機能の設定
• WordPress開発に適した基本設定

まずはVSCodeをWordPress開発に最適化してから、その後でオリジナルテーマ作成に進みます。

今回の復習ポイント

• VSCodeのダウンロード手順
• インストール時の重要な設定項目
• 動作確認の方法
• 次回作業の準備完了

WordPress学習がいよいよ本格的な開発段階に入ります。

VSCodeという強力なツールを手に入れたことで、プロと同じ環境での開発が可能になりました。次回のオリジナルテーマ作成もお楽しみに！

この投稿をシェアする