ファイルの扱い

ウェブサイトは、テキストコンテンツ、コード、スタイルシート、メディアコンテンツなど、多くのファイルで構成されています。ウェブサイトを構築するときは、これらのファイルをローカルコンピューター上の適切な構造に組み立て、互いに呼び出すことができるようにして、最終的にサーバーにアップロードする前に、すべてのコンテンツを正しいものにする必要があります。「ファイルの扱い」では、ウェブサイトに適切なファイル構造を設定できるように、注意すべきいくつかの問題について説明します。

前提条件:	コンピューターのオペレーティングシステムと、ウェブサイトを構築するための基本的なソフトウェアに慣れていること。
学習成果:	エクスプローラー/ファインダーの基本的な使い方。標準的なフォルダー構造。ウェブ用ファイル名の最善の手法 — 空白を置かない、小文字にする、ハイフンやアンダースコアなどの合理的な区切り文字を選ぶ。ファイルの基本的な整理の最善の手法。エクスプローラー/ファインダーを使用して、ファイルやフォルダー内を作成、移動、削除すること。ファイルとフォルダー内の検索。ファイルの拡張子の扱い（例えば、 Windows で「登録されている拡張子は表示しない」をオフにしたり、ドットファイル（.env など）を表示させたりすること）。ファイルの種類とアプリケーションの関連付けについての学習。

前提条件:

コンピューターのオペレーティングシステムと、ウェブサイトを構築するための基本的なソフトウェアに慣れていること。

学習成果:

エクスプローラー/ファインダーの基本的な使い方。
標準的なフォルダー構造。
ウェブ用ファイル名の最善の手法 — 空白を置かない、小文字にする、ハイフンやアンダースコアなどの合理的な区切り文字を選ぶ。
ファイルの基本的な整理の最善の手法。
エクスプローラー/ファインダーを使用して、ファイルやフォルダー内を作成、移動、削除すること。
ファイルとフォルダー内の検索。
ファイルの拡張子の扱い（例えば、 Windows で「登録されている拡張子は表示しない」をオフにしたり、ドットファイル（.env など）を表示させたりすること）。
ファイルの種類とアプリケーションの関連付けについての学習。

コンピューター上でウェブサイトがあるべき場所

自分のコンピューター上のウェブサイトでローカルに作業している時、関連するすべてのファイルを、サーバー上に公開されたウェブサイトのファイル構造のミラーである単一のフォルダーに保持する必要があります。このフォルダーは好きな場所に置くことができますが、簡単に見つけることができる場所、たとえばデスクトップ上、ホームフォルダーの中、またはハードドライブのルートなどに置いてください。

一般的には、次のようにしてください。

ウェブサイトプロジェクトを保存する場所を選択してください。これはすべてのウェブサイトのプロジェクトを保存するところです。
この最初のフォルダーの中に、最初のウェブサイトを格納する別のフォルダーを作成します。それを test-site （またはもっと想像力のあるもの）と呼びましょう。

これから自分のプロジェクトを格納する場所を選択してください。選択した場所内で、新しいフォルダーに web-projects と名前を付けてください。

大文字や空白を使わない

この記事を通して、フォルダーやファイルに空白のない全て小文字の名前を付けるよう求めていることに気が付くでしょう。理由は次の通りです。

多くのコンピューター、特にウェブサーバーでは、大文字と小文字が区別されます。例えば、ウェブサイトの test-site/MyImage.jpg に画像を置いて、別のファイルから画像を test-site/myimage.jpg として呼び出そうとすると、動作しないかもしれません。
ブラウザー間、ウェブサーバー間、プログラミング言語間で、空白の扱いが一貫していません。
- コマンドラインからコマンドを呼び出す場合、空白を含むファイル名を引用符で囲まないと、パスが 2 つの別々なものとして解釈されてしまします。
- 一部のプログラミング言語（例えば Python）は、特定の状況下では、ファイル名に空白が含まれているとうまく動作しないことがあります（例えば、インポートされるモジュールのファイルである場合など）。

ファイルは URL にも対応付けられます。例えば、サーバーで提供されるディレクトリのルートに my_file.html というファイル名でファイルを保存した場合、ほとんどのウェブサーバーでは、既定では https://example.com/my_file.html でアクセスできるようになります。一部のサーバーでは、ファイル名内の空白を "%20" （URL 内の空白の文字コード）に置き換えます。ファイル名と URL が完全に一致すると想定している場合、サーバーサイドのロジックに微妙なバグを作成する可能性があります。

多くの開発者は、空白文字の代わりに、ハイフン (-) やアンダースコア (_) などの区切り文字を使用します。単語を区切る際には、アンダースコアよりもハイフンを使用することをお勧めします。 my-file.html と my_file.html を比較してください。 Google 検索エンジンはハイフンを単語の区切り文字として扱いますが、アンダースコアはそうは扱いません。この問題は、サーバーを構成してアンダースコアをハイフンに置き換えることで解決できますが、これは余分な作業であり、ファイル名や URL が分岐してバグが発生しやすくなります。

少なくとも、自分のしていることが分かるまでは、フォルダー内およびファイル名の名前付きを小文字で、空白を入れずに、別個の単語をハイフンで区切るという習慣を取得するのが最善です。そうすれば、将来的に問題に遭遇する可能性が低くなります。

ウェブサイトはどのような構成にするべきか

次に、テストサイトをどのような構造にすべきかを見てみましょう。私たちが作成するウェブサイトプロジェクトで最も一般的なのは、目次の HTML ファイルと、画像、スタイルシート、スクリプトファイルを入れるフォルダーです。作成してみましょう。

index.html: このファイルには、一般的にあなたのホームページの内容、つまりあなたが最初にあなたのサイトに行ったときに見るテキストと画像が含まれています。
images フォルダー: このフォルダーにはサイトで使用するすべての画像を入れます。
styles フォルダー: このフォルダーには、コンテンツのスタイルを設定するための CSS コード（例えばテキストと背景色の設定など）を入れます。
scripts フォルダー: このフォルダーには、サイトに対話機能を追加するために使用されるすべての JavaScript コード（クリックされたときにデータを読み込むボタンなど）を入れます。

macOS ファインダーのファイル構造で、画像が入る images フォルダー、空の scripts と styles フォルダー、 index.html を表示したところです。。

メモ: Windows では、既定で有効になっている既知のファイルの種類の拡張子を表示しないというオプションがあるため、ファイル名の表示に問題が発生することがあります。一般に、 Windows エクスプローラーで [フォルダーオプション...] オプションを選択し、[登録されている拡張子は表示しない] チェックボックスをオフにし、 [OK] をクリックすることで、これをオフにすることができます。お使いの Windows のバージョンに関する詳細な情報については、ウェブで検索してください。

ファイルパス

あるファイルから別のファイルを参照するには、ファイルパスを指定する必要があります。これは基本的に、あるファイルが別のファイルの場所を知るための経路です。例えば、画像を保有するウェブページを作成する場合、表示したい画像の場所を示すファイルパスをウェブページのコードに記述する必要があります。それでは、この基本的な例を作成してみましょう。現時点では、このすべてが何を意味するのか理解できないかもしれませんが、問題ありません。

web-projects フォルダーの中に、 path-example という新しいフォルダーを作成してください。
Google Images へ行き、好きな画像を選択して、ダウンロードしてください。
path-example フォルダー内で、 images という新しいフォルダーを作成してください。づアンロードした画像をこのフォルダーに入れてください。

新しいファイルをindex.htmlという名前で作成し、次のコードをファイル内に入れてください。

html

<!doctype html>
<html lang="ja">
  <head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width" />
    <title>テストページ</title>
  </head>
  <body>
    <img src="" alt="テスト画像" />
  </body>
</html>

<img src="" alt="テスト画像"> という行は、ページに画像を挿入する HTML コードです。画像がどこにあるのかを HTML に伝える必要があります。画像は images ディレクトリー内にあり、index.html と同じディレクトリーにあります。ファイル構造の中で index.html からその画像に移動するのに必要なファイルパスは images/your-image-filename です。例えば、私たちの画像は firefox-icon.png と呼ばれており、ファイルパスは images/firefox-icon.png になります。
src="" コードの二重引用符の間の HTML コードにファイルパスを挿入してください。
HTML ファイルを保存し、ウェブブラウザーに読み込みます（ファイルをダブルクリックします）。新しいウェブページに画像が表示されます。

地球の周りに燃える狐を表した firefox のロゴのみを表示した基本的なウェブサイトのスクリーンショット。

ファイルパスの一般的なルールは次の通りです。

呼び出し元の HTML ファイルと同じディレクトリーにある対象ファイルにリンクするには、 my-image.jpg のようにファイル名を使用します。
サブディレクトリー内のファイルを参照するには、 subdirectory/my-image.jpg のようにパスの前にディレクトリー名とスラッシュを入力します。
呼び出し元の HTML ファイルの上階層のディレクトリー内にある対象ファイルにリンクするには、2 つのドットを記述します。例えば、 index.html が test-site のサブフォルダー内にあり、 my-image.jpg が test-site 内にある場合、 my-image.jpg を index.html から参照するには ../my-image.jpg を使用します。
例えば ../subdirectory/another-subdirectory/my-image.jpg など、好きなだけ組み合わせることができます。

メモ: Windows のファイルシステムでは、スラッシュ (/) ではなくバックスラッシュまたは￥記号を使用します（例 : C:\Windows）。これは HTML では使用できません。Windows でウェブサイトを開発している場合でも、コード内ではスラッシュを使用する必要があります。

これで、知っておくべきことはすべてです。