【6日でできるPHP入門】VSCodeで作業フォルダを選択する
ー VSCodeで作業フォルダを選択する重要性 ー
Web開発やPHP・HTMLのコーディングを始める際、最初に行うべき大切な作業が「作業用フォルダの選択」です。VSCode（Visual Studio Code）で正しいフォルダを指定することで、HTMLやPHPファイルを整理し、Webサーバと連携した効率的な開発環境が実現します。この記事では、作業フォルダの選び方から新規ファイル作成・保存・実行まで、手順を詳しく解説します。
２．VSCodeで作業用フォルダを選択する手順
1.1. フォルダの選択と開き方
VSCodeで作業を始めるには、まず作業用フォルダをワークスペースに追加する必要があります。
１．メニューから「「ファイル」→「フォルダーをワークスペースに追加」を選択
２．フォルダの指定
「C:\MAMP\htdocs」のWebサーバのルートを選択します。
３．フォルダの信頼
「はい、作成者を信頼します」をクリックします。
ワンポイント
- MAMP環境の場合、「htdocs」フォルダ直下がWebサーバの「localhost」と対応しています。
1.2. 新しいHTMLファイルの作成
作業用フォルダを選択したら、HTMLファイルを作成しましょう。
| 操作手順 | 説明 |
|---|---|
| １．新しいファイルをクリック | フォルダ内一覧の上部にあるボタンを押す |
| ２．ファイル名を入力 | 例：「lesson10_1.html」と入力 |
| ３．Enterキーで確定 | 入力が終わったらEnterで確定 |
サンプルHTML
以下は実際に入力するHTMLファイルの例です。
<!DOCTYPE html>
<html>
<head>
<title>6日でできるPHP入門</title>
<meta charset="UTF-8">
</head>
<body>
<h1>PHP入門</h1>
<p>まずはHTMLの基本を学びましょう。<br>PHPはその次に進みます！</p>
</body>
</html>２．コーディングの基本ポイント
2.1. インデントとホワイトスペース
HTMLを書く際は、TabキーやSpaceキー（4回）を使いインデントをつけると、読みやすくなります。
このような空白・改行・タブ文字を「ホワイトスペース」と呼びます。
- 半角スペース・タブ・改行 → ホワイトスペース（HTML構造には影響しない）
- 全角スペース → ホワイトスペース扱いにならないので注意
| 入力例 | 説明 |
|---|---|
<head> のインデント | TabやSpace4つでずらす |
| 空白・改行 | 見やすさのために追加 |
2.2. ファイルの保存と確認
作成したファイルはこまめに保存しましょう。
| 操作 | 説明 |
|---|---|
| ファイル→保存 | メニューから「ファイル」→「保存」を選択 |
| Ctrl＋S | ショートカットで素早く保存 |
| タブの状態 | 未保存：●マーク／保存済み：×マークが出現 |
未保存：●マーク
保存済み：×マークが出現
３．実行結果の確認
3.1. WebブラウザでHTMLを表示
MAMPが起動していることを確認し、WebブラウザのURL欄に
http://localhost/lesson11_1.htmlと入力しましょう。これで、先ほど作成したHTMLファイルの表示結果を確認できます。
まとめ
VSCodeで作業用フォルダを正しく選択し、HTMLファイルの作成・保存・表示の基本を押さえることで、PHPやWeb開発の準備がスムーズに進みます。ホワイトスペースやインデントの使い方も身につけ、読みやすいコーディングを心がけましょう。