VSCodeは手に入りました。でも、そのコードはどこに書いて、どこに残るの？その答えが「ファイル」と「フォルダ」です。すでに毎日使っているものなので、身構えなくて大丈夫。ここで言葉の整理をしておきましょう。
すでに知っているもの
スマホで撮った写真、ダウンロードした資料。あれが全部ファイルです。そして、それらを整理してしまう「箱」がフォルダ。
プログラミングも同じ。書いたコードは「ファイル」として保存され、それを「フォルダ」にまとめておきます。新しい概念ではなく、いつものパソコンの仕組みそのままです。
これから作るWebページも、最初はファイル1枚から始まります。でも作品が育つと、HTMLのファイル、見た目を決めるファイル、画像……と家族がどんどん増えていきます。だからこそ、最初に「この作品の持ち物は全部この箱に入れる」というフォルダを決めておくのが大事。散らからず、迷子にならず、あとで人に渡すときもフォルダごと渡せばすみます。
拡張子＝ファイルの「種類名」
ファイル名のうしろには、.（ドット）に続く短い文字がついています。これを拡張子（かくちょうし）といい、そのファイルの種類を表します。
| ファイル名の例 | 種類 |
|---|---|
写真.jpg | jpg ＝ 画像 |
資料.pdf | pdf ＝ PDF書類 |
index.html | html ＝ HTMLファイル（これから作るもの！） |
つまり、HTMLを書いたファイルには.htmlという拡張子をつけます。名前のうしろの合図で「これはHTMLだよ」とパソコンに伝えているわけです。
名前のつけ方に、小さなコツ
Web制作の世界では、ファイルやフォルダの名前に半角英数字の小文字を使うのが定番です。理由はシンプルで、作ったページはいずれインターネットに公開するもので、そのときファイル名はそのままページの住所（URL）の一部になるからです。日本語やスペースが入った名前は、住所にしたときに文字化けしたり、リンクがうまくつながらなかったりすることがあります。
- よい例：
web-practice、index.html、shima-photo.jpg - さけたい例：
練習 フォルダ、ホームページ用！.html（日本語・スペース・記号）
単語をつなぎたいときは、スペースのかわりに-（ハイフン）を使います。いまのうちからこの流儀で名前をつけておくと、あとで直す手間がありません。
フォルダは「ファイル単体」ではなく「まるごと」開く
VSCodeでは、ファイルを1枚だけ開くこともできますが、これからは作業フォルダをまるごと開くやり方で進めます。フォルダごと開くと、左側にその箱の中身が一覧で表示されて、ファイルを行き来したり、新しいファイルを作ったりが全部その場でできるようになります。作品のファイルが増えてきたとき、この差がじわじわ効いてきます。
このレッスンのまとめ
- コードはファイルに書き、フォルダにまとめる
- HTMLのファイルには
.htmlという拡張子をつける - 名前は半角英数字の小文字が定番（スペースは
-に） - 作業フォルダをVSCodeで開くのが、作業の基地
