JavaScriptに触れてみよう |

JavaScriptに触れてみよう

JavaScriptを使って簡単なWebページを作ってみましょう。
まずは、2つのファイルを作成します：HTMLファイルとJavaScriptファイルです。

手順1：ファイルの準備

1. 新しいフォルダを作成します。

- Windowsの場合：デスクトップ上で右クリックし、「新規作成」→「フォルダー」を選択します。そして、フォルダ名を「my_first_project」にします。

- Macの場合：デスクトップ上で右クリックし、「新規フォルダ」を選択します。そして、フォルダ名を「my_first_project」にします。

2. テキストエディタを立ち上げ新しいファイルを開きます。テキストエディタとは、コンピュータで文字やコードを入力するためのプログラムのことです。Windowsなら「メモ帳」、Macなら「テキストエディット」などが標準でインストールされています。他にも、プログラミングに適した「Visual Studio Code」や「Sublime Text」といったエディタもあります。

手順2：HTMLファイルを作成

1. 開いている新しいファイルを、ファイル名「index.html」として保存します。このファイルは先ほど作成した「my_first_project」フォルダ内に保存してください。

2. 以下のコードを「index.html」ファイルに貼り付けます。

<!DOCTYPE html>
<html lang="ja">
  <head>
    <title>Page</title>
    <script src="index.js"></script>
  </head>
  <body>
    <h1>Title</h1>
    <div id="text1">Text</div>
    <button onClick="button1OnClick()">Button1</button>
  </body>
</html>

手順3：JavaScriptファイルを作成

1. もう一つ新しいテキストファイルを作成し、「index.js」として保存します。こちらも同じフォルダ内に保存します。

2. 以下のコードを「index.js」ファイルに貼り付けます。

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

手順4：ファイルをブラウザで開く

1. 「index.html」ファイルをダブルクリックします。すると、デフォルトのウェブブラウザでファイルが開きます。

2. ブラウザに表示されたページで「Button1」をクリックします。「Text」と表示されている部分の数字が1ずつ増えていくのが確認できるはずです。

これで、簡単なJavaScriptを使ったWebページの作成が完了しました。

ボタンをクリックすることでJavaScriptが実行され、表示される数字が変わるという動作を確認できましたね。これがWebプログラミングのJavaScriptの初歩的な例です。

Javascriptの「文法」

HTMLファイルとJSファイル、前項のプログラムの解説

index.html は、HTMLという特殊な文法の言語です。

HTMLはHyper Text Markup Languageの頭文字から名付けられています。

これはプログラミング言語とはいえず、画面をデザインするため言語となります。

前項で扱ったコード

<!DOCTYPE html>
<html lang="ja">
  <head>
    <title>Page</title>
    <script src="index.js"></script>
  </head>
  <body>
    <h1>Title</h1>
    <div id="text1">Text</div>
    <button onClick="button1OnClick()">Button1</button>
  </body>
</html>

こちらがどういう構造になっているのか、見てみます。

説明中、「タグ」という用語が何度か出てきますが、タグとは、HTMLで使われる特別なコマンドで、 < と > で囲まれた部分のことです。

例えば、<html>や<body>がタグです。タグは、ブラウザに対して、「ここに見出しを表示しなさい」とか「ここにボタンを置きなさい」といった指示を与えるものです。

1行目. <!DOCTYPE html> :

- これは「ドキュメントタイプ宣言」と呼ばれ、ブラウザに対して、このファイルが「HTML5」という最新のHTML規格で書かれていることを伝えます。HTML5は、Webページを構築するための最新のルールや機能を含んでいます。

2行目. <html lang="ja"> :

- <html>タグは、この文書全体の開始を示します。「文書のルート」とも呼ばれ、この中にページのすべての内容が含まれます。

- lang="ja" は、この文書が日本語で書かれていることを示します。

3行目. <head> :

- この部分には、文書の「メタ情報（メタデータ）」が含まれます。メタデータとは、ページのタイトルや使用する文字コードなど、ページの内容ではないが、ページを正しく表示するために必要な情報のことです。

4行目. <title>Page</title> :

- <title>タグは、ブラウザのタブやタイトルバーに表示されるページのタイトルを指定します。この例では「Page」と表示されます。

5行目. <script src="index.js"></script> :

- <script>タグは、外部のJavaScriptファイルを読み込むために使用されます。ここでは、同じフォルダ内にある「index.js」ファイルを読み込んでいます。

7行目. <body> :

- <body>タグは、Webページの内容（コンテンツ）を含む部分です。

8行目. <h1>Title</h1> :

- <h1>タグは、ページの見出しを示します。ここでは「Title」と表示されます。

9行目. <div id="text1">Text</div> :

- <div>タグは、HTML文書の区分けをするための要素です。例えば、文章の一部を囲んだり、画像やテキストをまとめて配置したりするのに使います。

- id=“text1”は、この要素に「text1」という一意の識別子を与えます。一意の識別子とは、他の要素と区別するための特別な名前です。これにより、JavaScriptでこの要素を特定して操作することができます。（後述「JavaScript の基礎」を参照）

- この要素の中には「Text」というテキストが表示されます。

10行目. <button onClick="button1OnClick()">Button1</button> :

- <button>タグは、クリック可能なボタンを作成します。

- onClick=“button1OnClick()”は、ボタンがクリックされたときに「button1OnClick」という名前の「JavaScript関数」を実行することを指示します。JavaScript関数とは、一連の命令をまとめたもので、特定の動作を実行するためのコードのかたまりです。（後述「JavaScript の基礎」を参照）

- ボタンには「Button1」というラベルが表示されます。

このHTMLファイルは、先程作成したJavaScriptファイル「index.js」と連携して、ボタンをクリックするたびに「Text」の部分に表示される数字を増やす仕組みを作成しています。