実習の準備：HTMLとJavaScriptの作業環境

指導者向けの公開補足

学習本文に加えて、指導の視点・背景・授業での確かめ方を示します。どなたでも読めます。

指導の焦点

編集・保存・実行を別の操作として捉え、どのファイルをどの環境で開いているか説明させる。NASや特定サービスを全員の必須条件としない。

一歩踏み込んだ背景

github.devは編集環境であり実行環境ではない。ブラウザーの一時保存とリポジトリへのコミット、公開範囲の設定を区別して扱う必要がある。

授業での確かめ方

一行変更して保存し、再読み込みで反映されるまでを確認する。別ファイルを開いた場合や拡張子が異なる場合も比べ、表示が変わらない原因を切り分ける。

制度・規格等は本文末尾の参考資料も確認してください。

JSFiddleでコードを試す

JSFiddleは、ブラウザーでHTML・CSS・JavaScriptを入力して実行できるサービスです。短い動作確認から始められます。

1. 新しい編集画面を開きます。JavaScriptは通常のJavaScriptを選び、外部ライブラリは追加しません。
2. HTML欄にはページの本文、CSS欄には見た目、JavaScript欄には処理を書きます。HTML欄に<html>や<body>は不要です。JavaScript欄に<script>は付けません。
3. DOMを使う例では、JavaScriptの実行タイミングを「On Load」「On DOM Ready」または「No wrap - bottom of body」にします。
4. 「Run」を押してResult欄を確認します。書き換えたら再びRunを押します。

console.logの結果は通常、ページではなく開発者ツールのコンソールに出ます。このサイトの計算例をResult欄で読みたいときは、HTML欄に次を入れます。

<pre id="output"></pre>

JavaScript欄には次を入れ、console.log(2 + 3);の行を、試したいコード一つに置き換えます。独立した例を複数まとめて貼らないでください。

{
  const output = document.getElementById("output");
  const console = {
    log(...values) {
      output.textContent += values.join(" ") + "\n";
    }
  };
  console.log(2 + 3);
}

Runを押すと「5」と表示されます。外側の波括弧の中だけで表示用のconsoleを用意しているため、ブラウザー本来のコンソールは変更しません。

HTMLとJavaScriptの両方を載せた実習例は、この表示用コードで囲まず、それぞれの欄へ分けて貼り付けます。保存・共有時は公開範囲を確認し、個人情報やパスワードを入力しないでください。コードは手元にも残しましょう。

NAS・GitHub・CodePenなど、作業環境の選び方

この単元でできるようになること

• コードを編集する場所、保存する場所、実行する場所を区別できる。
• 自分の端末や授業の条件に合った作業環境を選べる。
• HTMLファイルを保存し、ブラウザーで表示できる。

ナビのひとこと

「保存した」と「動かした」は別のこと。どこに何があるか確かめよう。

用語

• HTML：見出し、文章、画像、ボタンなど、ページの構造を記述する言語。
• JavaScript：計算や条件判断、クリックに応じた動きなどを記述するプログラミング言語。
• エディター：コードなどの文字を編集する道具。
• NAS：ネットワークを通してファイルを保存・共有するための装置。

作業環境を選ぶ

方法	編集・保存	表示・実行	アカウントなど
端末内のファイル	テキストエディターで編集し、端末へ保存	ブラウザーでHTMLを開く	この実習自体にアカウントは不要
NAS上のファイル	利用を許可された共有フォルダーへ保存	アクセスできる端末のブラウザーでHTMLを開く	NASの利用権限が必要。管理者の設定に従う
GitHub	ブラウザー版エディターのgithub.devで編集し、リポジトリへコミット	github.dev自体に実行環境はない。手元へダウンロードして開くなど、表示方法を別に用意	GitHubアカウントが必要
CodePen	ブラウザーのHTML・CSS・JS欄で編集し、Penとして保存	プレビューで確認	作成・保存にはアカウントが必要。通常のPenは公開される
JSFiddle	ブラウザーのHTML・CSS・JavaScript欄で編集	RunでResultに表示	まずは短い動作確認に使える。保存・管理機能の利用条件はサービスで確認

管理者はNASにファイルを置いて作業している。ただし、NASはこの実習の必須条件ではない。利用できない場合は、端末内のフォルダーやブラウザー上の編集サービスを選べばよい。

GitHubやCodePenを使うと、編集側の端末のOSに依存しにくい作業ができる。ただし、対応ブラウザーとインターネット接続は必要で、学校の利用制限がある場合もある。

まず一つ保存して開く

1. 自分の作業用フォルダーを作り、テキストエディターで新しいファイルを開く。
2. 下のコードを入力し、文字コードをUTF-8、ファイル名をpractice.htmlとして保存する。practice.html.txtになっていないか確認する。
3. ファイルをブラウザーで開く。見出しとボタンが表示され、押すと文章が変われば成功。
4. エディターで文章を変更し、保存してからブラウザーを再読み込みする。

practice.html

<!doctype html>
<html lang="ja">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>はじめての実習</title>
</head>
<body>
  <h1>動くページを作ろう</h1>
  <button id="hello" type="button">確かめる</button>
  <p id="message" aria-live="polite">まだ押していません。</p>
  <script>
    const button = document.getElementById("hello");
    const message = document.getElementById("message");
    button.addEventListener("click", () => {
      message.textContent = "JavaScriptが動きました。";
    });
  </script>
</body>
</html>

この実習では、HTMLにある部品をJavaScriptで探して操作する。<script>を操作対象より後ろに置くと、それらの部品が読み込まれた後に処理を登録できる。HTMLだけなら構造は表示されるが、ボタンの動きはJavaScriptが担当する。

ナビのひとこと

文章を変えたのに画面が変わらないときは、保存先と、開いているファイルを見比べよう。

ブラウザーの編集サービスを使う

GitHub

1. アカウントを用意し、自分のリポジトリを作る。公開・非公開を確認する。
2. リポジトリを開いて.キーを押すか、URLのgithub.comをgithub.devへ変える。
3. HTMLファイルを作成・編集し、ソース管理から変更をコミットする。コミット前の編集内容を、別の端末でも読める保存済みデータと思い込まないこと。
4. 動作確認には、ファイルをダウンロードしてブラウザーで開く方法などを使う。github.devにはターミナルやコード実行環境がない。

GitHub Codespacesには実行環境もあるが、github.devとは別の仕組みで、利用枠や料金の確認が必要になる。この実習のために必ず用意する必要はない。

CodePen

1. アカウントを作成してログインし、新しいPenを作る。
2. HTML欄に<body>内の部品だけを貼る。<script>はHTML欄へ入れず、その中身をJS欄へ移す。CSSがある場合はCSS欄へ入れる。
3. プレビューを確認し、保存する。DOMの読み込み前に処理が動く設定へ変更しないようにする。

JSFiddle

JSFiddleは、単純なJavaScriptの計算や、HTMLと組み合わせた小さな動作を確かめるのに向く。新しい編集画面を開き、HTML・CSS・JavaScriptの各欄へ分けて入力し、Runを押す。

このページの例なら、HTML欄には見出し・ボタン・段落を、JavaScript欄には<script>内のコードを入れる。JavaScriptは通常のJavaScript、実行タイミングはOn Loadなど、HTMLの部品を読み込んだ後にする。ページ上部の「JSFiddleでコードを試す」も参照しよう。

ブラウザー上の編集サービスへ、個人情報やパスワード、公開する権利のない素材を入力しない。保存・共有時は公開範囲を確認し、コードは手元にも残そう。NASの共有フォルダーをインターネットへ公開する必要はない。

ナビのひとこと

まず一つのボタンを動かせたら、次は変数で「前の状態」を覚えてみよう。

確認問題

1. コードを編集しても、開いているページが変わらない。最初に何を確認するか。
2. github.devでHTMLを保存しただけでは、ブラウザー上での動作確認まで済んだといえないのはなぜか。
3. JSFiddleへ完成HTMLを移すとき、HTML欄とJavaScript欄へそれぞれ何を入れるか。

問1の解答例を見る

変更を保存したか、保存したファイルとブラウザーで開いたファイルが同じかを確認する。その上でページを再読み込みする。拡張子が.html.txtになっていないかも確認する。

問2の解答例を見る

github.devはブラウザー上の編集・コミット用の環境で、コードを実行する機能はない。保存したHTMLを手元で開くなど、表示・実行を別に確かめる必要がある。

問3の解答例を見る

HTML欄にはbody内の見出し・ボタン・段落などを入れ、JavaScript欄にはscriptタグの中身だけを入れる。HTMLの部品を読み込んだ後に処理が動く実行タイミングを選ぶ。

まとめ

編集・保存・実行を分けて考え、自分に合った環境を選ぶ。まず小さなページの保存と動作を確認してから、ボタン・関数・変数へ進もう。

参考

• MDN：基本的なソフトウェアのインストール
• GitHub：ブラウザー版エディター
• CodePen：Pen Editor
• JSFiddle：Getting started
• JSFiddle：Panels settings