演習 - JavaScript を使用して対話機能を追加する

  • 10 分

JavaScript (または ECMAScript) は、Web ページに対話機能を追加するために役立つプログラミング言語です。

たとえば、JavaScript を使用して、ユーザーがボタンを選んだときに発生する動作 (例: ポップアップ ウィンドウを開く) を定義できます。 JavaScript を使用すると、再読み込みすることなく Web ページにコンテンツを追加したり、削除したりできます。

このユニットでは、Web ページ用の JavaScript ファイルの例を設定します。 ライト テーマとダーク テーマを切り替えるボタンを作成し、 その後、実際にテーマの切り替えを行う JavaScript コードにそのボタンをアタッチします。 最後に、ブラウザーの開発者ツールを使用して、完成したプロジェクトを確認します。

CSS と同様に、HTML ファイルに直接 JavaScript を追加することもできますが、推奨されるベスト プラクティスは JavaScript を個別のファイルに保存することです。 JavaScript コードを別のファイルに追加すると、それを複数の Web ページで再利用しやすくなります。 たとえば、Web ページの本文内の任意の場所に次のコードを追加してポップアップ アラートを作成することができます。

<script>alert('Hello World')</script>

ただし、カスタム機能を必要とするすべてのファイルにリンクできる別のファイルに JavaScript コードを追加することをお勧めします。

HTML スクリプト タグ <script> を使用すると、外部の JavaScript ファイルにリンクできます。この演習では、この方法で Web アプリを構成します。

  1. Visual Studio Code で、index.html ファイルを開きます。

  2. 終了の </body> 要素を見つけて、その前の新しい行にカーソルを位置付けます。 「script:src」と入力し、Enter キーを押します。 <script> 要素の開始と終了のタグがコードに追加されます。

  3. 次の例に示すように、app.js ファイルを読み込むように <script> 要素を変更し、 それがリストの終了の </ul> 要素の後に配置されていることを確認します。

    ...
<ul>
  <li class="list">Add visual styles</li>
  <li class="list">Add light and dark themes</li>
  <li>Enable switching the theme</li>
</ul>
<script src="app.js"></script>
...

<script> 要素は、<head> や、<body> 内の他の場所に配置することもできます。 ただし、<script> 要素を <body> セクションの最後に配置すると、スクリプトを読み込む前に、まず、すべてのページ コンテンツを画面に表示できるようになります。

フォールト トレランスを追加する

  1. HTML ファイルで、終了の </script> タグの後に <noscript> 要素を追加します。これを使用すると、JavaScript が非アクティブ化されている場合にメッセージを表示できます。

    <script src="app.js"></script>
<noscript>You need to enable JavaScript to view the full site.</noscript>

    <noscript> 要素の追加は、"フォールト トレランス" または "グレースフル デグラデーション" の一例です。 <noscript> 要素を使用すると、ある機能がサポートされていないか、または使用できない場合にコードで検出して対応できます。

厳格モードを設定する

JavaScript は簡単に学習できるように設計されており、開発者が特定の間違いを犯しても許容されます。 たとえば、スペルに誤りのある変数を使用しても JavaScript はエラーをスローせず、代わりに新しいグローバル変数を作成します。 JavaScript を学び始めるときは、エラーが少ない方が便利です。 ただし、ブラウザーにとって最適化が難しく、ユーザーにとってデバッグが困難なコードを作成することになる可能性があります。

厳格モードに切り替えると、間違えたときに、役に立つエラーがいっそう多く発生するようになります。

  • Visual Studio Code で、app.js ファイルを開き、以下のように入力します。

    'use strict';

ボタンを追加する

ユーザーが Web ページでライト テーマとダーク テーマを切り替えることができるようにする方法が必要です。 この演習では、HTML の <button> 要素を使用してその機能を実装します。

  1. HTML ファイル (index.html) に <button> 要素を追加します。 <div> 要素の内部にボタンを配置し、それをリストの末尾 (</ul>) の直後に追加します。

    ...
<ul>
  <li class="list">Add visual styles</li>
  <li class="list">Add light and dark themes</li>
  <li>Enable switching the theme</li>
</ul>
<div>
  <button class="btn">Dark</button>
</div>
<script src="app.js"></script>
...

    この例の <button> 要素には、CSS スタイルを適用するために使用できる "クラス" 属性が含まれていることに注意してください。

  2. キーボード ショートカットの Control + S キー (Windows の場合)、または Command + S キー (macOS の場合) を使用して、変更を HTML ファイルに保存します。

  3. CSS ファイル (main.css) で、.btn クラス セレクターを使用して HTML のボタンに対する新しい規則を追加します。 ボタンの色を一般的なライトまたはダーク テーマの色と異なるものにするため、この規則では color および background-color プロパティを設定します。 ページが表示されると、これらの .btn プロパティによって、CSS ファイルの body ルールで設定されている既定のプロパティがオーバーライドされます。

    .btn {
  color: var(--btnFontColor);
  background-color: var(--btnBg);
}

  4. 次に、.btn 規則を変更して、ボタンのサイズ、形状、外観、配置に関するいくつかのスタイルを追加します。 次の CSS を使用すると、ページの見出しの右側に丸いボタンが作成されます。

    .btn {
  position: absolute;
  top: 20px;
  left: 250px;
  height: 50px;
  width: 50px;
  border-radius: 50%;
  border: none;
  color: var(--btnFontColor);
  background-color: var(--btnBg);
}

  5. 次に、ライトおよびダーク テーマの CSS を更新します。 ボタン固有の背景色とフォントの色を指定するために、新しい変数 --btnBg と --btnFontColor を定義しています。

    .light-theme {
  --bg: var(--green);
  --fontColor: var(--black);
  --btnBg: var(--black);
  --btnFontColor: var(--white);
}

.dark-theme {
  --bg: var(--black);
  --fontColor: var(--green);
  --btnBg: var(--white);
  --btnFontColor: var(--black);
}

  6. キーボード ショートカットの Control + S キー (Windows の場合)、または Command + S キー (macOS の場合) を使用して、変更を CSS ファイルに保存します。

イベント ハンドラーを追加する

ボタンが選択されたときに何かが実行されるようにするには、JavaScript ファイル内にイベント ハンドラーが必要です。 イベント ハンドラーは、ページでイベントが発生したときに JavaScript 関数を実行する手段です。 ボタンに対し、click イベントのイベント ハンドラーを追加してみましょう。このイベント ハンドラー関数は、click イベントが発生したときに実行されます。

イベント ハンドラーを追加する前に、ボタン要素への参照が必要になります。

  1. JavaScript ファイル (app.js) で、document.querySelector を使用してボタンの参照を取得します。

    const switcher = document.querySelector('.btn');

    document.querySelector 関数は、CSS ファイルで使用したのとまったく同じように、CSS セレクターを使用します。 switcher は、ページ内のボタンへの参照になっています。

  2. 次に、click イベントのイベント ハンドラーを追加します。 次のコードでは、click イベントのリスナーを追加し、click イベントが発生したときにブラウザーによって実行されるイベント ハンドラー関数を定義します。

    switcher.addEventListener('click', function() {
    document.body.classList.toggle('light-theme');
    document.body.classList.toggle('dark-theme');
});

上記のコードでは、toggle メソッドを使用して、<body> 要素のクラス属性を変更しました。 このメソッドは、light-theme と dark-theme クラスを自動的に追加または削除します。 このコードは、クリック時にライト スタイルではなくダーク スタイルを適用し、もう一度クリックするとダークではなくライト スタイルを適用します。

ただし、ボタンのラベルも正しいテーマを表示するように更新する必要があるため、現在のテーマを判定してボタン ラベルを更新するための if ステートメントを追加する必要があります。

イベント ハンドラーを追加した JavaScript コードは、次のようになります。

'use strict';

const switcher = document.querySelector('.btn');

switcher.addEventListener('click', function() {
    document.body.classList.toggle('light-theme');
    document.body.classList.toggle('dark-theme');

    const className = document.body.className;
    if(className == "light-theme") {
        this.textContent = "Dark";
    } else {
        this.textContent = "Light";
    }
});

JavaScript の規約では、複数の単語を含む変数名には "キャメル ケース" を使用します (変数 className など)。

コンソール メッセージ

Web 開発者は、Web ページには表示されないが、開発者ツールの [コンソール] タブには表示される非表示のメッセージを作成できます。"コンソール メッセージ" を使用すると、コードの結果を確認するのに役立ちます。

JavaScript ファイルで、if ステートメントの後 (イベント リスナー内) に、console.log の呼び出しを追加します。

この変更を行うと、完全な JavaScript コードは次のようになります。

'use strict';

const switcher = document.querySelector('.btn');

switcher.addEventListener('click', function() {
    document.body.classList.toggle('light-theme');
    document.body.classList.toggle('dark-theme');

    const className = document.body.className;
    if(className == "light-theme") {
        this.textContent = "Dark";
    } else {
        this.textContent = "Light";
    }

    console.log('current class name: ' + className);
});

Visual Studio Code で JavaScript ファイルを表示している場合は、「log」と入力し、Enter キーを押すと、console.log にオートコンプリートを使用できます。

テキストを単一引用符または二重引用符で囲み、テキスト "文字列" を定義することができます。

ブラウザーで開く

  1. プレビューするには、index.html を選んで [既定のブラウザーで開く] を選択するか、F5 キーを押して同じブラウザー タブを再度読み込みます。

    Screenshot of the website showing the new button.

  2. 新しい [Dark] ボタンを選択して、ダーク テーマに切り替えます。

    Screenshot of the website after switching to dark theme.

  3. すべてが正しく表示され、期待どおりに動作することを確認します。 そうでない場合は、前の手順を確認して、何かに失敗していないかどうか調べる必要があります。

開発者ツールでページを確認する

  1. 開発者ツールを開きます。

    • 右クリックして [検査] を選択するか、キーボード ショートカットの F12 キーを使用します。 または、Windows または Linux では Ctrl + Shift + I ショートカットを、macOS では Option + Command + I を使用します。

  2. [要素]タブを選択し、[要素] タブの内部にある [スタイル] タブを選択します。

  3. <body> 要素を選択します。 [Styles](スタイル) タブで、適用されているテーマを確認します。 現在のテーマがダークである場合は、dark-theme のスタイルが適用されています。

    ダーク テーマが選択されていることを確認します。

  4. [コンソール] タブを選択して、console.log のメッセージ current class name: dark-theme を表示します。

Screenshot of the browser window with the website and the Developer Tools console open showing the console message.

コンソールを使用すると、JavaScript コードから興味深い分析情報を取得できます。 さらにコンソール メッセージを追加して、コードのどの部分が実行されているかを把握し、他の変数の現在の値を確認します。

コンソールの詳細については、「コンソールの概要」をご覧ください。