3. JavaScript

次は JavaScript について復習します。
なお Java と名前が似ていますが、全く別の言語ですのでご注意下さい。

JavaScript はクライアント側(Webブラウザやローカルアプリ等)でもサーバ側でも広く使われているオブジェクト指向言語です。
基本的にはプロトタイプ(インスタンス)ベースのスクリプト言語ですが、クラスベースのスタイルでプログラミングすることも出来ます。

1. 実行方法

さて JavaScript をWebブラウザ上で実行させるには HTML ファイルに直接コードを埋め込むか、外部ファイルにコードを書いて HTML ファイルから読み込みます。
まずコードをHTMLファイルに直接埋め込んで実行される例を見てみましょう。
この場合は script タグを使ってその中に JavaScript のコードを書きます。

ソース 1: HTMLファイルにJavaScriptのコードを書く例

<!DOCTYPE html>
<html lang="ja">
<head> 
 <meta charset="UTF-8">
 <title>タイトル</title>
</head>

<body>
  <script>
    console.log("hoge"); // コンソールにログを表示
  </script>
</body>
</html>

上のHTMLファイルを表示したあと、デバッグツールのコンソールを開くと

script タグはヘッダも含めて HTML ファイルの中のどこにも配置できますが、コードは読み込まれた順に実行されます。
例えば以下はヘッダの中でログを表示させる例です。

ソース 2: ヘッダにJavaScriptのコードを書く例

<!DOCTYPE html>
<html lang="ja">
<head> 
 <meta charset="UTF-8">
 <title>タイトル</title>
  <script>
    console.log("ほげ");
  </script>
</head>

<body>
  <script>
    console.log("hoge"); // コンソールにログを表示
  </script>
</body>
</html>

2. 変数

JavaScript は変数の型を自動認識しますので、プログラマーが int とか string とかを指定する必要はありません。
具体的には変数は

※ 昔は let でなくて var を使って変数を定義してましたが、バグの元になりやすいので var は使わない方が良いです。

ソース 3: 変数の例

<!DOCTYPE html>
<html lang="ja">
<head> 
 <meta charset="UTF-8">
 <title>タイトル</title>
</head>

<body>
  <script>
    let a = 1;
    let b = 2;
    let c = a+b;
    console.log(c);
  </script>
</body>
</html>

3. 関数

ソース 4: 関数の例 (function を使う場合)

<!DOCTYPE html>
<html lang="ja">
<head> 
 <meta charset="UTF-8">
 <title>タイトル</title>
  <script>
    function show(a){  // 関数定義
      console.log(a);
    }
  </script>
</head>

<body>
  <script>
    let a = 1;
    let b = 2;
    let c = a+b;
    show(c); // 関数呼び出し
  </script>
</body>
</html>

上の例ではヘッダの中で show 関数を定義し、body の中でその関数を呼び出しています。

と定義することも出来ます。
例えば以下の例を実行して下さい。

ソース 5: 関数の例 (ラムダ式を使う場合)

<!DOCTYPE html>
<html lang="ja">
<head> 
 <meta charset="UTF-8">
 <title>タイトル</title>
  <script>
    let show = (a) => {  // ラムダ式で関数定義
      console.log(a);
    }
  </script>
</head>

<body>
  <script>
    let a = 1;
    let b = 2;
    let c = a+b;
    show(c); // 関数呼び出し
  </script>
</body>
</html>

function を使う方法もラムダ式を使う方法もどちらも良く使いますので、両方覚えておいて下さい。

4. DOM

DOM(Document Object Model: ドキュメント・オブジェクト・モデル)は p や div などの要素をオブジェクト(ノードと言います)化して JavaScript の中で操作するための技術です。
動的なページを作成したい時は必須の技術です。

DOMを利用してある要素をオブジェクト化する方法には色々ありますが、一番簡単なのは要素にIDを付けて

ソース 6: DOMの例

<!DOCTYPE html>
<html lang="ja">
<head> 
 <meta charset="UTF-8">
 <title>タイトル</title>
</head>

<body>
  <input type="text" value="ほげ" id="text1">
  <script>
      let text1 = document.getElementById("text1"); // ID が text1 である要素を text1 オブジェクト(ノード)として取得
      console.log(text1.value); // text1 の value プロパティを表示
  </script>
</body>
</html>

上のコードを実行すると ID に "text1" が指定されているテキストボックスの値(value)がコンソールに表示されます。

5. イベント処理

イベント処理とは、「ボタンを押した」とか「テキストボックスの値を変えた」等のイベントが起きた際に「イベントリスナー」又は「イベントハンドラー」と呼ばれる処理を実行させる機能のことです。

イベント処理をさせるためには、事前に DOM のオブジェクトで生じる各種イベントとイベントリスナー(ハンドラー)を結びつける必要があります。
そのためには次の様にします。

オブジェクト名.addEventListener( イベント名, イベントリスナー名 );

ソース 7: イベントリスナーの例

<!DOCTYPE html>
<html lang="ja">
<head> 
 <meta charset="UTF-8">
 <title>タイトル</title>
</head>

<body>
  <input type="text" value="ほげ" id="text1">
  <input type="button" value="押してください" id="button1">
  <script>
      // 関数としてイベントリスナー showText を定義
      function showText1(){ 
          let text1 = document.getElementById("text1"); // ID が text1 である要素を text1 オブジェクト(ノード)として取得
          console.log(text1.value); // text1 の value プロパティを表示
      }

      let button1 = document.getElementById("button1"); // ID が button1 である要素を button1 オブジェクト(ノード)として取得

      // クリック(click)イベントをイベントリスナー showText1 と結びつける
      button1.addEventListener( "click", showText1 ); 
  </script>
</body>
</html>

ボタン(button1)を押すたびにテキストボックス(text1)の内容がコンソールに表示されます。

またイベントリスナーは関数ではなくてラムダ式を使って直接

で定義することが出来ます。
例えば上の例をラムダ式を使って書き直すと以下の様になります。

ソース 8: イベントリスナーの例(ラムダ式を使った場合)

<!DOCTYPE html>
<html lang="ja">
<head> 
 <meta charset="UTF-8">
 <title>タイトル</title>
</head>

<body>
  <input type="text" value="ほげ" id="text1">
  <input type="button" value="押してください" id="button1">
  <script>
      let button1 = document.getElementById("button1"); // ID が button1 である要素を button1 オブジェクト(ノード)として取得

      // クリック(click)イベントのイベントリスナーをラムダ式で直接定義
      button1.addEventListener( "click", () => {
          let text1 = document.getElementById("text1"); // ID が text1 である要素を text1 オブジェクト(ノード)として取得
          console.log(text1.value); // text1 の value プロパティを表示
      } );

  </script>
</body>
</html>

function を使う方法もラムダ式を使う方法もどちらも良く使いますので、両方覚えておいて下さい。

6. 外部JavaScriptファイルの読み込み

外部にJavaScriptファイルを用意し、それを読み込ませて実行するには

まず外部JavaScriptファイルとして以下のファイル(名前は myjs.js )を作成します(上の例のscriptの中と同じ内容です)。

ソース 9: 外部JavaScriptの例(myjs.js)

let button1 = document.getElementById("button1"); // ID が button1 である要素を button1 オブジェクト(ノード)として取得

// クリック(click)イベントのイベントリスナーをラムダ式で直接定義
button1.addEventListener( "click", () => {
    let text1 = document.getElementById("text1"); // ID が text1 である要素を text1 オブジェクト(ノード)として取得
    console.log(text1.value); // text1 の value プロパティを表示
} );

HTMLファイルは次の様にします。
myjs.js と同じ場所に作成して下さい。

ソース 10: 外部JavaScriptの例(外部JavaScriptファイルの読み込み)

<!DOCTYPE html>
<html lang="ja">
<head> 
 <meta charset="UTF-8">
 <title>タイトル</title>
</head>

<body>
  <input type="text" value="ほげ" id="text1">
  <input type="button" value="押してください" id="button1">
  <script src="./myjs.js"></script>
</body>
</html>