検証ツールを使ってコードに触れてみよう

本講座の狙い

• Web アプリケーションの開発に興味を持ってもらう．
• 検証ツールを使って Web アプリケーションの基本要素である HTML，CSS，JavaScript を体験し，実際に手を動かすことで理解を深める．
• HTML，CSS，JavaScript が書けるとブラウザであらゆる機能を実現できることを知る．

Web アプリケーションとは

Web アプリケーションはインターネットを通じて動作するプログラムであり，基本的にサーバとクライアントという2つの主要な部分で構成されている．

• サーバ：

  • インターネット上に設置された大きなコンピュータ
  • データやプログラムを保管
  • クライアントからのリクエストに応じて情報を提供

• クライアント：

  • ユーザが使うコンピュータやスマートフォン
  • サーバにアクセスし情報をリクエスト
  • サーバから受け取った情報をもとにWebアプリケーションの画面を表示・操作

Web アプリケーションの動く仕組み

1. クライアントは Web アプリケーションにアクセスするためにインターネットブラウザを使って URL を入力
2. サーバは URL に基づいて対応するデータやプログラムをクライアントに送信
3. クライアントはサーバから受け取ったデータやプログラムをブラウザで解釈し、画面に表示

クライアントでは，HTML がページの構造を，CSS がデザインを，JavaScript が動的な機能を担当している．

  クライアント               サーバ
      |                      |
      |-----1.リクエスト------>|
      |                      |
      |<---2.データ/プログラム--|
      |                      |
      |------3.表示/操作-------|
      |                      |

ブラウザでhttps://gsacademy.jp/を開いたときの流れは以下の通りである．

1. ブラウザにURLを入力する．
2. サーバは Web サイトの HTML，CSS，JavaScript のコードをブラウザに送信する．
3. ブラウザは受け取ったコードを読み，画面に情報を表示する．

検証ツールとその使い方

• 検証ツールは，ブラウザに組み込まれている開発者向けのツールである．
• HTML，CSS，JavaScript をリアルタイムで編集・デバッグできる．
• 主要なブラウザで利用可能で，右クリックして「検証」を選択するか，キーボードショートカットで開くことができる．
• Elementsタブ，Console タブ，Network タブなど，さまざまな機能が用意されている．

実際に下記のページで検証ツールを開いてみよう．

https://gsacademy.jp/

HTML

HTML を見てみる

• 検証ツールを開くと，HTML のソースコードが表示される．
• 要素タブにて，Web ページの構造をツリー状に表示され，選択した要素の HTML が確認できる．
• 要素をクリックして選択し，詳細を見ることができる．

HTML を書き換えてみる

• 選択した要素の HTML をダブルクリックすると編集が可能である．
• 書き換えた内容はリアルタイムで反映されるが，リロードすると元に戻る．
• これらの機能により，簡単にページの構造を変更して試すことができる．

上述のwebページについて検証画面で適当なテキストを書き換え，画面の内容が変化することを確認してみよう．

CSS

CSS を見てみる

• 検証ツールのスタイルタブで，選択した要素に適用されている CSS を確認できる．
• CSS はスタイルシートと呼ばれ，HTML要素の見た目を変更するルールが記述されている．
• CSS セレクタとプロパティで構成される．

CSSを書き換えてみる

• スタイルタブで適用されている CSS の値をダブルクリックして編集できる．
• 変更した内容はリアルタイムで反映され，すぐにデザイン変更の効果を確認できる．
• リロードすると元に戻る．

レスポンシブデザインの確認

• 検証ツールで，異なるデバイスや画面サイズでの表示を確認できる．
• レスポンシブデザインは，ウェブページがさまざまなデバイスや画面サイズに適応するように設計されていることを意味する．
• デバイスごとの表示確認が簡単に行えるため，効率的にデザインを調整できる．

JavaScript

JavaScriptを動かしてみる

• 検証ツールのコンソールタブでは，JavaScript のコードを入力して実行できる．
• エラーや警告も表示される．
• これにより，動的な機能を試したり，問題を解決する手がかりを得たりできる．

以下の内容をConsole タブに貼り付けると，指定した場所の「文字の色」と「文字の大きさ」をランダムに変更する処理を追加できる．この処理は「処理（関数）を定義」しているだけなので，この時点では画面は変化しない．

function randomColor() {
  return '#' + Math.floor(Math.random() * 16777215).toString(16);
}

function randomFontSize() {
  return Math.floor(Math.random() * (56 - 10 + 1)) + 10 + 'px';
}

function changeTextProperties(className, index = 0) {
  const elements = document.getElementsByClassName(className);
  if (elements.length > 0) {
    if (index < elements.length) {
      const element = elements[index];
      element.style.setProperty('color', randomColor(), 'important');
      element.style.setProperty('font-size', randomFontSize(), 'important');
      changeTextProperties(className, index + 1);
    } else {
      setTimeout(() => changeTextProperties(className), 200);
    }
  } else {
    console.log('No elements with the specified class found');
  }
}

続いて，以下のコードを貼り付けて実行すると，上記の処理が動作し，実際に画面の文字が変化する．

changeTextProperties('top-catch-01');
changeTextProperties('top-catch-02');
changeTextProperties('top-catch-03');
changeTextProperties('top-catch-04');

まとめ

この講座では，検証ツールを使って Web アプリケーションの基本要素である HTML，CSS，JavaScript を体験した．他の Web サイトやアプリケーションでも簡単な変更を試すことで，Web アプリケーション開発のイメージが湧くだろう．今後のチャレンジで，さらにスキルを磨いていきましょう．