JavaScriptコードの解説

コード

let value = 0;

const button1OnClick = () => {
 console.log( button1OnClick );
 value += 1;
 const element = document.getElementById("text1");
 element.innerHTML = (value).toString();
};

解説

このコードは、ボタンをクリックするたびに「Text」と表示されている部分の数字を1ずつ増やす動作をするものです。

以下に、各行の詳細な説明を行います。

1.  let value = 0;

    - ここでは、 変数 の宣言を行っています。変数とは、データを保存しておくための箱のようなものです。

    -  let は、変数を宣言するためのキーワードです。 let を使って宣言された変数は、あとで値を変更することができます。

    - 例えば、ここでは value という名前の変数を作り、その初期値として0を代入しています。後でこの value の値を変更することができます。

3.  const button1OnClick = () => {

    - ここでは、新しい 関数 を作成しています。関数とは、一連の命令をまとめたものです。

    -  const は、変数を宣言するためのキーワードですが、 const を使って宣言された変数は、再代入（値の変更）ができません。一度値を設定したら、その後に別の値を代入することができないという点で let とは異なります。

    - 例えば、ここでは button1OnClick という名前の関数を作り、その内容を => {  } の中に記述しています。ここでは、４行目から7行目までの内容が記述された内容ということになります。

　ここでは深入りしませんが、このような形の関数を アロー関数 と呼びます。

4.  console.log('button1OnClick');

    - この行は、コンソールに「button1OnClick」というメッセージを表示します。

    -  コンソール とは、ブラウザの中にある 開発者ツール の一部で、プログラムの動作を確認するために使うものです。

    - コンソールを表示するには、次の手順を行います：

        -  Google Chrome の場合：右上のメニュー（3つの点）をクリックし、「その他のツール」→「デベロッパーツール」を選択します。次に、表示されたウィンドウの上部にある「（console）コンソール」タブをクリックします。

        -  Firefox の場合：右上のメニュー（3本線）をクリックし、「Web開発ツール」→「Webコンソール」を選択します。

        - これで、コンソールが表示され、プログラムの動作状況やエラーメッセージなどを確認できます。

5.  value += 1;

    - この行は、 value の値を1増やします。 value += 1; は value = value + 1; と同じ意味です。プログラミングでは「=」は「等しい」という意味ではなく、「代入する」という意味で使います。つまり、 value に現在の value の値に1を足した値を再び代入します。

6.  const element = document.getElementById("text1");

    - この行は、HTMLドキュメントからIDが「text1」の要素を取得します。先ほどのHTMLの中には、 <div id=“text1”>Text</div> という部分がありました。 document.getElementById("text1") は、その要素を見つけて取得する命令です。この取得した要素を element という変数に保存します。

    - もう少し具体的に説明します。HTMLドキュメントとは、Webページの元になるファイルのことです。このファイルの中に、IDが「text1」と設定された部分（ <div id="text1">Text</div> ）があります。 document.getElementById("text1") という命令を使うことで、この特定の部分を探し出し、JavaScriptで操作できるようにしています。この部分を変数 element に保存します。

7.  element.innerHTML = (value).toString();

    - この行は、 element の中身（ <div id="text1"> の中身）を value の値で置き換えます。

    -  value は数値ですが、 toString() メソッドを使って 文字列 に変換しています。

    - 文字列とは、文字の並びのことで、通常は引用符（"" や ''）で囲まれます。例えば、 "123" や "Hello" は文字列です。

    - 数値と文字列は違うものです。例えば、数値の 123 と文字列の "123" は見た目は同じですが、プログラムの中では違う扱いをされます。

    -  toString() メソッドは、数値を文字列に変換するためのものです。 value が1の場合、 value.toString() は "1" になります。

    - これにより、数値の value を文字列に変換し、HTMLの中に表示できるようになります。

このコードの全体の流れは、次のようになります。

初めに、 value の値は0です。
ボタンがクリックされると、 button1OnClick 関数が実行されます。
コンソールに「button1OnClick」というメッセージが表示されます。
value の値が1増えます。
HTMLドキュメントからIDが「text1」の要素を取得します。
その要素の中身を、現在の value の値（1）で置き換えます。

結果として、ボタンをクリックするたびに、 <div id="text1"> の中に表示される数字が1ずつ増えていきます。