【JavaScript入門】Webページを作ってみる

このページで解説している内容は、以下の YouTube 動画の解説で見ることができます。

Webページを作ってみる

　Webページを作る際には、HTML、CSS、そしてJavaScriptをどのように組み合わせるかが重要です。JavaScriptのコードを書く方法は主に2通りあり、1つはすべてを1つのHTMLファイルに記述する方法、もう1つはコードを外部ファイルに分割して管理する方法です。
　どちらの方法にも一長一短があり、プロジェクトの規模やメンテナンス性に応じて適切な方法を選ぶ必要があります。以下では、両方の方法について、具体的なサンプルコードとともに詳しく解説します。

１．HTMLファイルに全て記述する方法

1.1. 概要

　この方法では、HTMLファイル内に直接CSSとJavaScriptのコードを記述します。1つのファイルで完結するため、初めてWebページを作る人にとっては手軽に始めやすいですが、コードが混在してしまい、大規模なプロジェクトでは管理が難しくなる可能性があります。

1.2. サンプルコードの例（ファイル名：weather_inline.html）

　以下は、シンプルなお天気速報ページのサンプルです。ページが読み込まれると、ヘッダーにタイトルが表示され、JavaScriptがコンソールにメッセージを出力します。

【weather_inline.html】

<!DOCTYPE html>
<html lang="ja">
  <head>
    <meta charset="utf-8">
    <title>お天気速報</title>
    <style>
      /* 内部スタイルシート: ヘッダーの装飾を設定 */
      h1 { color: #2a9d8f; margin-bottom: 1em; }
      body { font-family: 'Segoe UI', sans-serif; background-color: #f0f0f0; padding: 20px; }
    </style>
    <script>
      // head内のスクリプト: ページ読み込み前の初期設定
      console.log('【head内】お天気速報ページの初期スクリプトが実行されました。');
    </script>
  </head>
  <body>
    <h1>お天気速報</h1>
    <p>本日の天気は晴れ時々曇りです。</p>
    <script>
      // body内のスクリプト: ページ読み込み完了後に実行される処理
      console.log('【body内】お天気速報ページが正常に表示されました。');
    </script>
  </body>
</html>

表示されるページ

解説

HTML構造：<head>内でメタ情報、スタイル、そして初期スクリプトを設定しています。<body>内には、見出しや本文が記述され、後半のスクリプトでページが正常に読み込まれたことを確認するためのコンソール出力を行っています。
利点：1つのファイルで完結するため、初学者が全体の流れを把握しやすい。
短所：プロジェクトが大きくなると、コードが混在し見通しが悪くなる可能性があります。

２．外部ファイルに分割して記述する方法

2.1. 概要

　この方法では、HTMLファイルは構造の記述に専念し、CSSとJavaScriptはそれぞれ外部ファイルとして分離して管理します。これにより、コードの再利用性や保守性が向上し、HTMLファイル自体がすっきりと整理されます。一方、外部ファイルの読み込みが追加されるため、わずかながら読み込み完了時間が延びる可能性があります。

2.2. サンプルコードの例（ファイル名：weather_external.html）

【weather_external.html】

<!DOCTYPE html>
<html lang="ja">
  <head>
    <meta charset="utf-8">
    <title>お天気速報</title>
    <!-- 外部CSSファイルを読み込む -->
    <link rel="stylesheet" href="weather_style.css">
    <!-- 外部JavaScriptファイルを読み込む -->
    <script src="weather_script.js"></script>
  </head>
  <body>
    <h1>お天気速報</h1>
    <p>本日の天気は快晴です。</p>
  </body>
</html>

【weather_style.css】

/* 外部CSSファイル: ページ全体のスタイル設定 */
body {
  font-family: 'Segoe UI', sans-serif;
  background-color: #f0f0f0;
  padding: 20px;
}
h1 {
  color: #2a9d8f;
  margin-bottom: 1em;
}

【weather_script.js】

// 外部JavaScriptファイル: ページ読み込み後に動作する処理
document.addEventListener('DOMContentLoaded', function() {
  console.log('外部ファイル「weather_script.js」に記述されたスクリプトが実行されました。');
});

表示されるページ（weather_external.html）

表示されるページ

解説

HTMLファイル：構造と内容だけを記述し、装飾は<link>タグで、動的処理は<script>タグで外部ファイルから読み込みます。
CSSファイル：weather_style.cssは、背景色やフォント、見出しの色など、ページのデザインを定義しています。
JavaScriptファイル：weather_script.jsは、DOMContentLoadedイベントを利用して、ページが完全に読み込まれた後に動作する処理を定義しており、動作確認としてコンソールにメッセージを出力します。
利点：コードが分割されているため、複数のHTMLファイルで同じスタイルやスクリプトを共有でき、保守性が向上します。
短所：外部ファイルの読み込みが追加されるため、わずかながら初回の読み込み速度に影響を与える場合があります。

まとめ

　Webページを作る方法として、HTMLファイルに全て記述する方法と、外部ファイルに分割して管理する方法の2種類があります。前者は手軽で初心者向けですが、コードが増えると管理が大変になります。後者は、再利用性と保守性が高く、大規模なプロジェクトに適しています。
　今回紹介した「weather_inline.html」や「weather_external.html」のサンプルは、いずれの方法でも基本的なWebページがどのように構築され、JavaScriptがどのように動作するかを具体的に示しています。プロジェクトの規模や目的に応じて最適な方法を選び、効率的な開発を目指してください。