JavaScript入門（※15分で理解できるJavaScriptの基礎）

はじめに

JavaScriptは、Web開発において不可欠なプログラミング言語です。

この記事では、JavaScriptの基礎的な概念について説明します。変数と定数、データ型、演算子、条件文、ループ、関数、オブジェクト、アロー関数、DOM操作、非同期処理などをわかりやすく説明します。

1.変数と定数

変数はletキーワードを使って宣言し、値を再代入できます。
定数はconstキーワードを使って宣言し、値を再代入できません。

javascript

let age = 25;
age = 26;  // 再代入可能
console.log(age);// 26

const name = "Mike";
name = "judy";// エラー: 再代入不可

上記のコードでは、age変数は初期値25で宣言され、その後26に再代入されています。console.log(age);の実行結果は26になります。

name定数は、初期値"太郎"で宣言されています。定数は再代入が許可されていないため、name = "judy";の行はエラーになります。

2.データ型

JavaScriptには、数値、文字列、真偽値、null、undefinedの5つの基本的なデータ型があります。

javascript

const number = 10; // 数値
const string = "Hello"; // 文字列
const boolean = true; // 真偽値
const nullValue = null; // null
const undefinedValue = undefined; // undefined

・number変数には数値の10が代入されています。
・string変数には文字列の"Hello"が代入されています。
・boolean変数には真偽値のtrueが代入されています。
・nullValue変数にはnullが代入されています。nullは何も値がないことを表します。
・undefinedValue変数にはundefinedが代入されています。undefinedは値が割り当てられていないことを表します。

3.演算子

JavaScriptには、算術演算子、比較演算子、論理演算子などがあります。

3.1算術演算子

算術演算子は、数値に対して算術操作を行います。

演算子	説明	例	結果
+	加算	10+5	15
-	減算	10-5	5
*	乗算	10*5	50
/	除算	10/5	2
%	剰余（余り）	10%5	0
++	インクリメント	let x = 10; x++;	11
--	デクリメント	let x = 10; x--;	9

3.2比較演算子

比較演算子は、値を比較して真偽値（trueまたはfalse）を返します。

演算子	説明	例	結果
==	等しい	10 == '10'	true
!=	等しくない	10 != '10'	false
===	厳密に等しい	10 === '10'	false
!==	厳密に等しくない	10 !== '10'	true
>	より大きい	10 > 5	true
<	より小さい	10 < 5	false
>=	以上	10 >= 10	true
<=	以下	10 <= 5	false

==と!=は型の変換を行ってから比較しますが、===と!==は型の変換を行わずに厳密に比較します。

3.3論理演算子

論理演算子は、真偽値に対して論理操作を行います。

演算子	説明	例	結果
&&	AND	true && false	false
!	NOT	!true	false

<code>||</code>というのもあり、これはORであり<code>true || false</code>では少なくとも一方がtrueの場合にtrueを返します。
コードで書くと以下のようになります。

javascript

const x = 10;
const y = 5;

console.log(x + y); // 15 (加算)
console.log(x - y); // 5 (減算)
console.log(x * y); // 50 (乗算)
console.log(x / y); // 2 (除算)
console.log(x % y); // 0 (剰余)
console.log(x === y); // false (厳密等価)
console.log(x > y); // true (大なり)
console.log(x >= 10 && y < 10); // true (論理AND)

4.条件文

条件文を使って、特定の条件に基づいてコードの実行を制御できます。

javascript

const score = 85;

if (score >= 90) {
  console.log("優");
} else if (score >= 80) {
  console.log("良");
} else if (score >= 70) {
  console.log("可");
} else {
  console.log("不可");
}//出力結果：良

上記のコードでは、score変数の値に基づいて、以下のような条件分岐が行われます。

・scoreが90以上の場合、"優"が出力されます。
・scoreが80以上90未満の場合、"良"が出力されます。
・scoreが70以上80未満の場合、"可"が出力されます。
・scoreが70未満の場合、"不可"が出力されます。

scoreの値は85なので、score >= 90の条件は偽となり、次のscore >= 80の条件が真となります。したがって、"良"が出力されます。

5.ループ

ループを使って、同じコードを繰り返し実行できます。

javascript

for (let i = 1; i <= 5; i++) {
  console.log(i);
}

上記のコードでは、forループを使って、1から5までの数字が順番に出力されます。
forループの構文は以下のようになっています。

javascript

for (初期化式; 条件式; 増分式) {
  // 条件式が真の間、繰り返し実行されるコード
}

このコードでは、
・初期化式はlet i = 1で、ループカウンター変数iを1で初期化しています。
・条件式はi <= 5で、iが5以下の間、ループが継続します。
・増分式はi++で、各ループの最後にiの値が1ずつ増加します。

ループ内では、console.log(i);が実行され、現在のiの値がコンソールに出力されます。
したがって、このコードの実行結果は以下のようになります。

1
2
3
4
5

6.関数

関数は、特定のタスクを実行するための再利用可能なコードブロックです。functionキーワードを使って宣言し、引数を受け取ることができ、値を返すこともできます。

javascript

function add(a, b) {
  return a + b;
}

const result = add(3, 4);
console.log(result); // 7

上記のコードでは、add関数が宣言されています。この関数は、2つの引数aとbを受け取り、それらの和を返します。

const result = add(3, 4);の行では、add関数が呼び出され、引数として3と4が渡されています。

関数内では、aに3、bに4が代入され、a + bの結果である7が返されます。返された値はresult変数に代入されます。

console.log(result);の実行結果は7となります。

7.オブジェクトとアロー関数

7.1オブジェクトの作成と操作

オブジェクトは、関連するデータや機能をグループ化するために使用される複合的なデータ型です。
キーと値のペアを持ち、ドット記法やブラケット記法を使ってプロパティにアクセスできます。

javascript

const person = {
  name: "太郎",
  age: 25,
  address: {
    city: "東京",
    zipCode: "123-4567"
  },
  hobbies: ["読書", "旅行"]
};

console.log(person.name); // 太郎
console.log(person["age"]); // 25
console.log(person.address.city); // 東京
console.log(person.hobbies[0]); // 読書

上記のコードでは、personオブジェクトが作成されています。このオブジェクトには、name、age、address、hobbiesの4つのプロパティがあります。

・nameプロパティの値は文字列の"太郎"です。
・ageプロパティの値は数値の25です。
・addressプロパティの値は、cityとzipCodeプロパティを持つ別のオブジェクトです。
・hobbiesプロパティの値は、文字列の配列です。

console.log(person.name);では、ドット記法を使ってpersonオブジェクトの・・nameプロパティにアクセスし、その値である"太郎"が出力されます。

console.log(person.hobbies[0]);では、ドット記法とブラケット記法を組み合わせて、personオブジェクトのhobbiesプロパティの最初の要素にアクセスし、その値である"読書"が出力されます。

7.2アロー関数

アロー関数は、関数式を簡潔に書くための構文です。=>を使って定義します。

javascript

const greet = (name) => {
  return `こんにちは、${name}さん！`;
};

console.log(greet("太郎")); // こんにちは、太郎さん！

上記のコードでは、greet関数がアロー関数を使って定義されています。

・(name)は、関数の引数を指定しています。ここでは、nameという名前の引数を受け取ります。
・=>の右側には、関数の本体が記述されます。
・関数の本体では、テンプレート文字列を使って、name引数を埋め込んだ挨拶のメッセージを返しています。

console.log(greet("太郎"));の行では、greet関数を呼び出し、引数として"太郎"を渡しています。
関数内では、nameに"太郎"が代入され、こんにちは、太郎さん！というメッセージが返されます。

8.DOM操作

DOM（Document Object Model）は、HTMLドキュメントの構造を表すオブジェクトのツリー構造です。
JavaScriptを使ってDOMを操作することで、動的にWebページの内容を変更できます。

8.1要素の選択

getElementByIdメソッドやquerySelectorメソッドを使って、HTML要素を選択できます。

html

<div id="app">
  <h1>タイトル</h1>
  <p class="message">こんにちは！</p>
</div>

javascript

const title = document.getElementById("app").querySelector("h1");
const message = document.querySelector(".message");

console.log(title.textContent); // タイトル
console.log(message.textContent); // こんにちは！

上記のコードでは、getElementByIdメソッドを使って、id属性が"app"である要素を選択しています。

querySelectorメソッドを使って、その要素内のh1要素を選択しています。選択された要素はtitle変数に代入されます。

querySelectorメソッドは、CSSセレクターを使って要素を選択します。

ここでは、.messageセレクターを使って、class属性が"message"である要素を選択しています。選択された要素はmessage変数に代入されます。

console.log(title.textContent);では、title要素のテキスト内容である"タイトル"が出力されます。

console.log(message.textContent);では、message要素のテキスト内容である"こんにちは！"が出力されます。

8.2要素の作成と追加

既存のHTMLのコードを以下とします。

html

<ul id="list">
  <li>既存のアイテム1</li>
  <li>既存のアイテム2</li>
</ul>

次にcreateElementメソッドを使って新しい要素を作成し、appendChildメソッドを使って既存の要素に追加できます。

javascript

const list = document.getElementById("list");

const newItem = document.createElement("li");
newItem.textContent = "新しいアイテム";

list.appendChild(newItem);

newItem.textContent = "新しいアイテム";の行では、newItem要素のテキスト内容を"新しいアイテム"に設定しています。

最後に、list.appendChild(newItem);の行で、list要素の子要素としてnewItem要素を追加しています。これにより、newItem要素がリストの最後に追加されます。

以下は、上記のコード全体を実行した後のHTMLの表現です。

html

<ul id="list">
  <li>既存のアイテム1</li>
  <li>既存のアイテム2</li>
  <li>新しいアイテム</li>
</ul>

JavaScriptを使ってDOMを操作することで、HTMLの構造を動的に変更できることがわかります。
これにより、ページの内容を動的に更新したり、ユーザーの操作に応じてページの表示を変更したりすることができます。

8.3イベントリスナー

addEventListenerメソッドを使って、要素にイベントリスナーを追加できます。
これにより、ユーザーのアクションに応じてJavaScriptのコードを実行できます。

html

<button id="btn">クリックしてください</button>

javascript

const button = document.getElementById("btn");

button.addEventListener("click", () => {
  console.log("ボタンがクリックされました！");
});

上記のコードでは、getElementByIdメソッドを使って、id属性が"btn"であるボタン要素を選択し、button変数に代入しています。

ボタンがクリックされると、イベントハンドラ内のconsole.log("ボタンがクリックされました！");が実行され、コンソールに"ボタンがクリックされました！"というメッセージが出力されます。

9.非同期処理

JavaScriptでは、非同期処理を行うことができます。

非同期処理とは、処理の完了を待たずに次の処理を実行できることを指します。
これにより、処理のブロッキングを防ぎ、アプリケーションのレスポンスを向上させることができます。

9.1コールバック関数

コールバック関数を使って、非同期処理を行うことができます。
コールバック関数とは、ある処理が完了したときに呼び出される関数のことです。

function fetchData(callback) {
  setTimeout(() => {
    const data = "データ";
    callback(data);
  }, 1000);
}

fetchData((data) => {
  console.log(data); // データ
});

上記のコードでは、fetchData関数が定義されています。この関数は、callback引数としてコールバック関数を受け取ります。

関数内では、setTimeout関数を使って1秒（1000ミリ秒）の遅延を設定しています。

1秒後に、data変数に"データ"という文字列を代入し、callback関数を呼び出しています。このとき、data変数をコールバック関数の引数として渡しています。

fetchData((data) => { ... });の行では、fetchData関数を呼び出し、コールバック関数を引数として渡しています。コールバック関数では、受け取ったdata引数をコンソールに出力しています。

1秒後にfetchData関数内のコールバック関数が実行され、console.log(data);の結果として"データ"が出力されます。

9.2Promise

Promiseは、非同期処理の状態と結果を表すオブジェクトです。
Promiseを使用することで、非同期処理の結果を簡潔に扱うことができます。

function fetchData() {
  return new Promise((resolve, reject) => {
    setTimeout(() => {
      const data = "データ";
      resolve(data);
    }, 1000);
  });
}

fetchData()
  .then((data) => {
    console.log(data); // データ
  })
  .catch((error) => {
    console.error(error);
  });

上記のコードでは、fetchData関数が定義されています。この関数は、Promiseを返します。

Promiseのコンストラクタには、resolveとrejectの2つの引数があります。非同期処理が成功した場合はresolve関数を呼び出し、失敗した場合はreject関数を呼び出します。

関数内では、setTimeout関数を使って1秒の遅延を設定しています。1秒後に、data変数に"データ"という文字列を代入し、resolve関数を呼び出しています。
このとき、data変数をresolve関数の引数として渡しています。

fetchData().then((data) => { ... }).catch((error) => { ... });の行では、fetchData関数を呼び出し、返されたPromiseに対してthenメソッドとcatchメソッドを使って処理を記述しています。

Promiseが成功した場合（resolve関数が呼び出された場合）、thenメソッドのコールバック関数が実行され、data引数をコンソールに出力します。

Promiseが失敗した場合（reject関数が呼び出された場合）、catchメソッドのコールバック関数が実行され、error引数をコンソールにエラー出力します。

9.3async/await

asyncとawaitを使用することで、Promiseをより簡潔に扱うことができます。

asyncはFunctionの前につけるキーワードで、その関数が必ずPromiseを返すことを示します。
awaitはasync関数内で使用し、Promiseの完了を待つために使用します。

async function fetchData() {
  return new Promise((resolve, reject) => {
    setTimeout(() => {
      const data = "データ";
      resolve(data);
    }, 1000);
  });
}

async function main() {
  try {
    const data = await fetchData();
    console.log(data); // データ
  } catch (error) {
    console.error(error);
  }
}

main();

上記のコードでは、fetchData関数は前の例と同じです。

main関数はasyncキーワードを使って定義されています。これにより、main関数内でawaitを使用できます。

main関数内では、tryブロックの中でfetchData関数を呼び出しています。
awaitキーワードを使用して、fetchData関数のPromiseが完了するまで待機します。Promiseが成功すると、data変数に結果が代入され、コンソールに出力されます。
catchブロックでは、Promiseが失敗した場合にエラーを捕捉し、コンソールにエラー出力します。
最後に、main();の行でmain関数を呼び出しています。

まとめ

この記事では、JavaScriptの基礎的な概念について詳しく説明しました。

変数と定数、データ型、演算子、条件文、ループ、関数、オブジェクト、アロー関数、DOM操作、非同期処理などを取り上げ、それぞれの概念についてコード例を交えて解説しました。

JavaScriptは非常に柔軟で強力なプログラミング言語であり、Web開発に欠かせない存在です。これらの基礎的な概念を理解することで、JavaScriptを使ったWebアプリケーションの開発に必要な知識が身につきます。

JavaScriptの習得には時間と練習が必要ですが、継続的に学習し、実際にコードを書いて試すことが大切です。この記事で説明した概念を参考に、JavaScriptの理解を深めていってください。