【JavaScript入門】Webページに関連するファイル

　Webページは、ひとつのファイルだけで成り立つものではなく、複数のファイルが連携してコンテンツを構築しています。ここでは、Webページ作成に必要な各種ファイルの種類とその役割について、具体例やサンプルコードを交えながら詳しく解説します。ここで紹介する内容は、あくまで一例ですので、実際のプロジェクトに合わせてファイル名やコード内容は自由にアレンジしてください。

１．HTMLファイル

　HTMLファイルは、Webページの基本構造を定義するファイルで、拡張子は「.html」です。ブラウザはこのファイルを読み込み、ページ全体の骨組みを描画します。以下は、サイトのTOPページである「index.html」のサンプルです。

<!DOCTYPE html>
<html lang="ja">
  <head>
    <meta charset="UTF-8">
    <title>私たちのホームページ</title>
  </head>
  <body>
    <header>
      <h1>ようこそ！</h1>
    </header>
    <main>
      <p>ここはサンプルのホームページです。</p>
    </main>
    <footer>
      <p>© 2025 サンプル株式会社</p>
    </footer>
  </body>
</html>

　このサンプルでは、ページのタイトル、ヘッダー、本文、フッターをシンプルに記述しており、これを基点に他のファイル（CSSやJavaScript、画像など）が読み込まれていきます。

２．JavaScriptファイル

　JavaScriptファイル（拡張子「.js」）は、Webページに動的な動作を付加するためのプログラムを記述するファイルです。HTMLファイル内の<script>タグを利用して読み込まれ、実行されます。

// app.js
// このプログラムは、ページ読み込み時に挨拶メッセージを表示します

// ページが完全に読み込まれた後に処理を開始
document.addEventListener('DOMContentLoaded', function() {
  // メッセージを表示するための要素を取得
  var messageElem = document.getElementById('greeting');
  // メッセージを設定
  messageElem.textContent = 'ようこそ、私たちのサイトへ！';
});

　このコードは、HTML内の要素（例：<p id="greeting"></p>）に対して、日本語の挨拶メッセージを表示する動作を実装しています。コード内のコメントで各処理の意図を詳しく説明しています。

３．CSSファイル

　CSSファイルは、HTMLで記述したコンテンツの見た目（レイアウトや色、フォントなど）を定義するファイルです。拡張子は「.css」で、HTMLファイル内の<link>タグで読み込まれます。以下は、オリジナルのファイル名「style.css」を使った例です。

/* style.css */
/* ページ全体の背景色とフォント設定 */
body {
  background-color: #f0f0f0;
  font-family: Arial, sans-serif;
}

/* ヘッダーの装飾 */
header {
  background-color: #0044cc;
  color: #ffffff;
  padding: 20px;
  text-align: center;
}

　このCSSは、ページ全体の背景色やフォント、ヘッダー部分のデザインを定義し、HTMLの要素に視覚的なスタイルを与えます。

４．画像・音声・動画ファイル

　Webページには、視覚的や聴覚的な情報を伝えるための各種メディアファイルも利用されます。画像は<img>タグ、音声は<audio>タグ、動画は<video>タグで読み込みます。以下はそれぞれのサンプルです。

画像ファイル

<img src="img/header.png" alt="サイトロゴ">

音声ファイル

<audio controls>
  <source src="media/audio_sample.mp3" type="audio/mp3">
  <source src="media/audio_sample.ogg" type="audio/ogg">
  お使いのブラウザは、音声タグに対応していません。
</audio>

動画ファイル

<video controls>
  <source src="media/clip.mp4" type="video/mp4">
  <source src="media/clip.webm" type="video/webm">
  お使いのブラウザは、動画タグに対応していません。
</video>

　これらのタグを用いることで、画像、音声、動画といったマルチメディアコンテンツをWebページに組み込むことができます。

５．XMLファイルとJSONファイル

データのやり取りや構造化された情報の管理には、XMLやJSONがよく用いられます。

　XMLファイルは、拡張性のあるマークアップ言語で、タグの記述規則が厳密です。以下は、オリジナルのファイル名「catalog.xml」を用いた例です。

<?xml version="1.0" encoding="UTF-8"?>
<catalog>
  <product>
    <name>アップルパイ</name>
    <price>500</price>
  </product>
  <product>
    <name>ベリースムージー</name>
    <price>450</price>
  </product>
</catalog>

　JSONファイルは、JavaScriptのオブジェクト表記に近いデータ形式で、軽量かつ扱いやすいのが特徴です。オリジナルのファイル名「data.json」を用いた例は以下の通りです。

{
  "catalog": [
    { "name": "アップルパイ", "price": 500 },
    { "name": "ベリースムージー", "price": 450 }
  ]
}

　JSONは、プロパティ名や文字列を必ずダブルクォーテーションで囲む必要があり、JavaScriptオブジェクトと似ていますが、undefinedや関数などは含めることができません。

６．各ファイルの役割とまとめ

　Webページに関連するファイルは、それぞれが異なる役割を担い、連携してページ全体を構成しています。以下の表は、各ファイルの種類、拡張子、および主な役割をまとめたものです。

ファイル種類	拡張子	主な役割
HTMLファイル	.html	ページの構造や内容を定義する基本ファイル
JavaScriptファイル	.js	動的な処理やインタラクションを実装するプログラム
CSSファイル	.css	ページのレイアウトや装飾、視覚的なスタイルを設定する。
画像・音声・動画ファイル	.png, .jpg, .mp3, .mp4, etc.	マルチメディアコンテンツを表示または再生する。
XMLファイル	.xml	構造化されたデータを記述、サーバーと情報交換に使用される。
JSONファイル	.json	軽量なデータ交換形式、JavaScriptとの親和性が高い。

まとめ

　ここでは、Webページを構成するさまざまなファイルの種類と、それぞれの役割について解説しました。HTMLがページの骨組みを形成し、JavaScriptが動的な処理を担い、CSSが視覚的なデザインを提供するほか、画像や音声、動画がマルチメディアの表現を可能にします。また、XMLやJSONはデータの構造化と交換に利用され、現代のWeb開発において重要な役割を果たしています。各ファイルの内容や役割を理解することで、より効果的にWebページを構築することができます。