ゼロから学ぶJavaScript

JavaScriptの基本的な役割と実行方法

今回のゴール

• JavaScriptの役割を知る
• JavaScriptの基本的な書き方を理解する
• ページにJavaScriptを適用する方法がわかる

JavaScriptの役割

HTMLとCSSでページのデザインを作ることができますが、ページは「静的」（表示が変わらない）です。

JavaScriptを使うと、ページに「動き」を加えられます。

• ボタンをクリックしたら何かが起きる
• 時間によって表示内容を変える
• ユーザーの入力内容に応じて画面を更新する

JavaScriptの例

以下のJavaScriptのコードによって、以下のような処理が実現できます。

• ボタンをクリックすると、ボタンのテキストが "OK" に変わる

const button = document.querySelector("button");

button.addEventListener("click", updateName);

function updateName() {
  button.textContent = "OK";
}

(MDN Playground)

JavaScriptのデータ

JavaScriptでは、数値や文字列といったデータを扱うことができます。

数値を書くと数値のデータとして扱われ、+, -, *, / による演算が可能です。

100 + 200
// => 300 になる

また、" または ' で囲んだテキストは文字列のデータとして扱われます。

文字列同士を + で結合することもできます。

"こんにちは" + '世界'
// => 'こんにちは世界' になる

データは "変数" に入れられる

データは変数に入れることができます。変数は、値を入れておく「箱」のようなもので、変数を作ることを 宣言 と言います。

const というキーワードを使って変数を宣言でき、 const 変数名 = 値; のように書きます。
宣言した変数を使って演算をすることができます。

const currentPrice = 1000;
const itemPrice = 100;
currentPrice + itemPrice
// => 1100 になる

JavaScriptの書き方 (1) 実行順序

JavaScriptは、上から下へ順番に実行されます。

const greeting = "こんにちは";
const message = greeting; // message には "こんちには" が入る

変数は宣言した後でないと使えないため、順序を逆にするとエラーになります。

const message = greeting; // エラー！ greeting はまだ宣言されていない
const greeting = "こんにちは";

JavaScriptの書き方 (2) セミコロンとスペース

JavaScriptでは、基本的に一つの文の末尾に ; をつけます。

const name = "太郎";
const age = 20;

= の前後や ; の後のスペースや改行は無視されるため、以下のコードは上のものとすべて同じ意味になります。

const name="太郎";const age=20;
const name = "太郎"; const age = 20;
const name   =   "太郎";      const age     =    20;

(補足) 実は一つの文を一行で書いている場合 (上の例など) は ; を省略しても動きますが、可読性やバグのリスクを減らすという観点から ; を省略しないことが推奨されることが多いです。

JavaScriptの書き方 (3) コメント

// 以降の文字はコメントとして扱われ、プログラムとして動作しません (無視されます)。コメントは開発者用のメモとして利用します。
例えば、以下の一行目はプログラムとして動作しますが、二行目はコメントのため動作しません。

const name = "太郎";
// const age = 20;
const age = 20; // この場合、前の文は動く

/* から */ の間に複数行にわたるコメントを書くこともできます。

/*
   これは複数行のコメントです。
   この中に書いた内容はすべて無視されます
*/

変数の上書き

変数を let というキーワードで宣言することもできます。この場合、= を使って変数の値を変更することができます。

let score = 0;
score = 10;

前の変数の値を使って、変数の値を更新することもできます。

let score = 10;
score = score + 5;
// => score は 15 になる

const で宣言した変数は上書きできない

const で宣言した変数は値を変更することができません。

const name = "太郎";
name = "花子"; // エラー！ const は上書きできない

const で宣言する方が、"この変数の値は変わらない" という前提となってコードを読みやすくなるため、基本的には const を使い、値を変更する必要がある場合のみ let を使います。
(一度書いたコードは将来何回も読まれることが多いため、一般的にプログラミングでは書きやすさよりも読みやすさを優先します)

関数とは

関数は、「特定の処理を簡単に呼び出せるようにしたもの」です。

ブラウザ上でJavaScriptを実行するとき、さまざまな機能を持った関数を利用することができます。例えば、 alert という関数を使うことで、メッセージを画面に表示することができます。
以下の例のように、関数名 (alert) の後に () をつけ、() 内にパラメータ (引数と呼びます) を渡すことで関数を呼び出せます。

// この場合、'こんにちは' を引数にしてalert関数を呼び出している
alert('こんにちは');

// 引数に変数を渡しても良い (変数はただのデータの入れ物なので)
const hello = 'こんにちは';
alert(hello);

関数の戻り値 (返り値)

何か処理を行い、その結果をデータとして返す関数もあります。関数が返すデータのことを 戻り値 や 返り値 と呼びます。

例えば、prompt という関数は、ユーザーからの入力データを戻り値として返します。

// 以下のコードにより、入力したデータが変数 message に入ります
const message = prompt('メッセージを書いてください');

関数を作る

関数は自分で作ることもできます (「関数を宣言する」「関数を定義する」といったふうに呼びます)。同じような処理を何度も書く場合、コピー&ペーストするよりも関数を使った方が良いです。

function 関数名(引数名) { 処理内容 } のように関数を定義し、関数内で引数名を変数のように扱えます。また、 return 値; のように書くことで戻り値を返すことができます。

// greetという関数を定義する。greetはnameという引数を持つ
function greet(name) {
  return "こんにちは、" + name + "さん！";
}

const result = greet('太郎');
// result には 'こんにちは、太郎さん！' という文字列が入る

複数の引数

関数は複数の引数を持つこともできます。引数はカンマ（,）で区切って指定します。

function introduce(name, age) {
  return name + "さんは" + age + "歳です";
}

introduce("太郎", "20"); // "太郎さんは20歳です"
introduce("花子", "25"); // "花子さんは25歳です"

• 複数の引数は (引数1, 引数2, ...) のようにカンマで区切って指定します
• 関数を呼び出すときも、同じ順序でカンマ区切りで値を渡します

構造を持ったデータ (Object)

JavaScriptでは、複数のデータのまとまりを表現する オブジェクト (Object) を作ることができます。

const user = {
  name: "太郎",
  age: 20
};

キー (上の name, age)とそれに対応する値 (上の "太郎", 20) の組み合わせをプロパティと呼びます。
プロパティの値には オブジェクト名.キー名 のような形でアクセスできます。

const hisName = user.name; // "太郎" が代入される
const hisAge = user.age;  // 20 が代入される

オブジェクトの宣言方法

オブジェクトのプロパティの間に , を入れることでプロパティの区切りを示します。 , の後のスペースや改行は無視されます。

また、最後のプロパティの後に , をつけてもつけなくても良いです。通常、一行ごとにプロパティを書く場合は最後のプロパティの後にも , をつけることが多いです。

以下のコードは前のページの例と同じ意味になります。

const user = {name: '太郎', age: 20};

const user = {
  name: '太郎',
  age: 20,
};

Object のメソッド

Objectの中には関数を入れることもできます。Objectが持つ関数のことをメソッドと呼び、オブジェクト名.メソッド名() のような形で呼び出すことができます。

const user = {
  name: "太郎",
  greet: function(name) {
    alert("こんにちは、" + name);
  },
};

user.greet(user.name); // "こんにちは、太郎" と表示

デモ: 開発者ツールのコンソール

ブラウザの開発者ツールにあるコンソールを使うと、JavaScriptのコードをその場で書いて試すことができます。

1. ブラウザで任意のページを開く (例: 空ページを開く)
2. F12 キー（またはMacで Control + Command + I キー）で開発者ツールを開く
3. 「Console」タブを選ぶ
4. JavaScriptのコードを入力して Enter で実行

変数の宣言や alert, prompt などの挙動を試してみましょう。

その環境であらかじめ使える変数や関数

alert や prompt 以外にも、ブラウザでJavaScriptを実行するときにあらかじめ使える変数や関数があり、これらを使うことでWebページ内のコンテンツを操作することができます。

• document : そのHTMLページ全体を表す変数（オブジェクト）
• document.querySelector() : 特定のHTMLの要素をオブジェクトとして取得するメソッド
• console.log() : コンソールにメッセージを表示するメソッド

Webページのコンテンツを操作するメソッドの詳細については、別のスライドでお話しします。

ページにJavaScriptを適用する方法

HTMLがJavaScriptのコードを読み込む方法は主に3つあります。

1. 外部JavaScript（推奨）
2. HTMLファイルに直接書く
3. インラインJavaScriptハンドラー（非推奨）

JavaScriptのコードは読み込まれるとすぐに実行されます。

外部JavaScriptの読み込み (1)

JavaScriptを .js ファイルとして別に作成し、HTMLの script 要素で読み込みます。

project/
├── index.html
└── script.js

index.html:

<head>
  <script type="module" src="script.js"></script>
</head>

外部JavaScriptファイルの読み込み (2)

サブディレクトリにあるJavaScriptファイルを読み込む場合は以下のように記述します。

project/
├── index.html
└── js/
    └── script.js

<script type="module" src="js/script.js"></script>

URLを指定して、外部サイトにあるJavaScriptのファイルを読み込むこともできます:

<script src="https://example.com/library.js"></script>

外部JavaScriptのメリット

• 複数のHTMLページで同じJavaScriptを共有できる
• HTML とJavaScript を分離して管理しやすい
• JavaScriptファイルだけを変更すれば、複数ページの動作を一括変更可能

project/
├── index.html
├── about.html
└── script.js  ← 両方のHTMLから参照できる

HTMLファイルに直接書く

HTMLファイル内に <script> タグで直接記述することもできます。

<!DOCTYPE html>
<html>
<body>
  <button id="myBtn">クリック</button>

  <script>
    document.getElementById("myBtn").addEventListener("click", function() {
      alert("クリックされました！");
    });
  </script>
</body>
</html>

そのHTMLファイル内でのみ有効です。

インラインJavaScriptハンドラー

HTML要素に直接JavaScriptを書く方法です。

<button onclick="alert('クリックされました！')">クリック</button>

⚠️ 注意: この方法は非推奨です。

• HTMLとJavaScriptが混在して読みにくい
• 同じ処理を複数の要素に適用しにくい
• 保守性が低い

3つの方法の比較

CSSと同様に、外部ファイルとして管理するのが最も良い方法です。

まとめ (1)

• JavaScriptを使うことで、Webページに動きを加えられる
• 数値を書くと数値のデータ、" や ' でテキストを囲むと文字列のデータになる
• // もしくは /* と */ でコメントを書くことができる
• 変数はデータの入れもの。const や let で変数を宣言できる
• let で変数を宣言すると変数を上書きできるが、必要ないなら const を使う
• 関数は特定の処理を簡単に呼び出せるようにしたもの。
• 関数は引数をパラメータとして受け取り、処理結果を戻り値として返す

まとめ (2)

• オブジェクトは複数のデータのまとまりを表現したもの
• オブジェクトのキーと値の組み合わせをプロパティと呼び、オブジェクト名.キー名 で値を取得する
• オブジェクトが持っている関数をメソッドと呼び、オブジェクト名.メソッド() で呼び出す。
• 自分で宣言した変数・関数だけでなく、その環境であらかじめ使える変数・関数も多い（console.log(), alert() など）
• <script type="module" src="script.js"> のようにしてHTMLからJavaScriptのコードを読み込める
• HTMLファイルやインラインでJavaScriptを使う方法もあるが、非推奨

さらに調べるには

• JavaScriptとは
• JavaScriptの最初の一歩