【JavaScript入門】HTMLファイルの確認方法

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

HTMLファイルの確認方法

　HTMLファイルを作成した後、その内容が実際にどのように表示されるか確認することは、Web開発において非常に重要です。基本的な確認方法は、作成したHTMLファイルをGoogle Chromeなどのブラウザで直接開くことですが、Visual Studio Codeの便利な機能を活用することで、その手間を大幅に削減できます。ここでは、VSCodeを使ってHTMLファイルをプレビューする方法と、その際の注意点について、以下の表やサンプルコードを交えて詳しく解説します。

１．HTMLファイルの確認方法の基本

最終出力状態の確認が重要
　実際のユーザーが閲覧する環境に近い状態で、HTMLファイルの表示や動作を確認することが求められます。たとえば、ローカル環境での確認と、サーバーにアップロードしたときの表示は異なる可能性があるため、最終的には実際のブラウザ環境で検証することが必須です。
VSCodeから直接プレビュー
　Visual Studio Codeには、作成したHTMLファイルをGoogle Chromeでプレビューするための機能が標準で備わっています。これにより、手動でChromeを起動する手間が省け、効率的に開発作業を進めることができます。

２．サンプルHTMLファイルの例

まず、サンプルファイル「calc_app.html」を用意します。

　以下は、JavaScriptの簡単な計算結果を出力するHTMLファイル calc_app.html の例です。このファイルは、VSCodeからプレビューする際に動作を確認するためのサンプルです。

「calc_app.html」の内容

<!DOCTYPE html>
<html lang="ja">
  <head>
    <meta charset="utf-8">
    <title>10を足す電卓アプリ</title>
    <style>
      /* 簡単なスタイル設定 */
      body { font-family: Arial, sans-serif; padding: 20px; }
      #calculator { max-width: 300px; margin: 0 auto; }
      input, button { padding: 10px; font-size: 16px; }
      #result { margin-top: 20px; font-weight: bold; }
    </style>
  </head>
  <body>
    <header>
      <h1>10を足す電卓アプリ</h1>
    </header>
    <section id="calculator">
      <!-- 数値入力用のフィールド -->
      <input type="number" id="numInput" placeholder="数値を入力">
      <!-- 計算実行ボタン -->
      <button id="calcButton">計算する</button>
      <!-- 計算結果表示エリア -->
      <div id="result">結果がここに表示されます</div>
    </section>
    <script>
      // このスクリプトは、電卓の動作を実現するためのプログラムです。
      // ページが完全に読み込まれた後、イベントリスナーを設定します。
      document.addEventListener('DOMContentLoaded', function() {
        // 入力欄、ボタン、結果表示エリアの各要素を取得
        const inputField = document.getElementById('numInput');
        const calcButton = document.getElementById('calcButton');
        const resultDiv = document.getElementById('result');
        
        // ボタンがクリックされたときの処理を設定
        calcButton.addEventListener('click', function() {
          // 入力された値を数値に変換
          const number = Number(inputField.value);
          // 簡単な計算例として、数値に10を加算
          const sum = number + 10;
          // 結果を日本語のメッセージとして表示
          resultDiv.textContent = "計算結果: " + sum;
          // コンソールにも結果を出力（デバッグ用）
          console.log("入力値：" + number + "、計算結果：" + sum);
        });
      });
    </script>
    <footer>
      (C) 10を足す電卓アプリ
    </footer>
  </body>
</html>

サンプル解説

このサンプルコードのポイントは次の通りです。

HTML構造：<header>, <section>, <footer>の各セクションでページが構成され、電卓部分は<section id="calculator">内にまとめています。
スタイル設定：内部スタイルシートを用いて、フォントやパディング、レイアウトをシンプルに設定しています。
JavaScript処理：DOMContentLoadedイベントで、電卓の入力、ボタン、結果表示エリアを取得し、ボタンクリック時に入力された数値に10を加算する簡単な計算処理を実装しています。
デバッグ情報：計算結果は画面上だけでなく、コンソールにも出力され、動作確認に役立ちます。

３．VSCodeを用いたHTMLファイルのプレビュー手順

以下は、VSCodeからGoogle ChromeでHTMLファイルをプレビューする際の具体的な手順です。

STEP 1：HTMLファイルを開く

VSCodeでオリジナルのHTMLファイル（例： calc_app.html）を開きます。

STEP 2：[Run]ボタンのクリック

　ウィンドウ左側のRunアイコン（三角に虫眼鏡のマーク）をクリックするか、ショートカットCtrl+Shift+Dを利用。

STEP 3：[実行とデバック]ボタンのクリック

左側のパネルに「実行とデバック」が表示されます。このボタンをクリックします。

STEP 4：「Webアプリ(Chrome)」のリンクをクリック

表示されるリンクから「Webアプリ(Chrome)」をクリックします。

STEP 5：Chromeでのプレビュー確認

　新しく開かれたChromeウィンドウでHTMLファイルの表示を確認。必要に応じてコンソールを開いてエラーもチェック。

STEP 6：デバッグの停止

　VSCode上の[Stop]ボタン（正方形「□」アイコン）またはShift+F5で実行を停止し、Chromeウィンドウを閉じます。

まとめ

　VSCodeからGoogle ChromeでHTMLファイルをプレビューする方法を理解することで、実際にユーザーが目にする状態に近い環境で作業を進めることができます。適切な確認方法を実践することで、環境依存の問題や予期せぬ挙動を未然に防ぎ、安定したWeb開発を行うための重要なステップとなります。さあ、VSCodeの機能を活用して、効率的な確認作業を進めていきましょう。