JavaScript の基本

JavaScript 基礎チュートリアル

この JavaScript 基礎チュートリアルでは、変数、データ型、演算子、関数などの JavaScript の基本的な概念について学び、JavaScript を使用して Web ページにインタラクティブな機能を追加する方法を学習します。プログラミング初心者でも、経験豊富な開発者でも、このチュートリアルから学ぶことができます。

1. JavaScript の概要

1.1. JavaScript とは？

JavaScript は、Web ページにインタラクティブな機能を追加するために使用されるスクリプト言語です。JavaScript を使用すると、静的なページをより動的で面白いものにすることができます。

特徴:

インタプリタ型言語: コンパイルせずに、ブラウザで直接実行されます。
軽量: 小規模なスクリプトを作成するために設計されています。
オブジェクト指向: オブジェクト指向プログラミングの概念をサポートしています。

1.2. JavaScript でできること

JavaScript を使用すると、さまざまなことができます。

Web ページの内容を変更する: HTML 要素の内容を動的に変更できます。
ユーザー入力の処理: フォームの送信、ボタンのクリックなどのユーザー操作を処理できます。
ネットワークリクエストの送信: サーバーにデータを送信したり、サーバーからデータを取得したりできます。
アニメーション効果の作成: 要素をスムーズに移動させたり、視覚効果を追加したりできます。
その他: ブラウザの機能へのアクセス、クッキーの操作など、さまざまなことができます。

1.3. JavaScript を Web ページに追加する方法

JavaScript を Web ページに追加するには、主に2つの方法があります。

<script> タグを使用する: <script> タグを使用して、HTML 文書内に JavaScript コードを埋め込むことができます。

<!DOCTYPE html>
<html>
<head>
  <title>JavaScript の例</title>
</head>
<body>
  <script>
    // JavaScript コードをここに記述
    console.log("Hello, JavaScript!");
  </script>
</body>
</html>

外部 JavaScript ファイルをリンクする: JavaScript コードを外部ファイルに記述し、<script> タグの src 属性を使用して HTML 文書にリンクできます。

HTML ファイル (index.html):

<!DOCTYPE html>
<html>
<head>
  <title>JavaScript の例</title>
</head>
<body>
  <script src="script.js"></script>
</body>
</html>

JavaScript ファイル (script.js):

console.log("Hello, JavaScript!");

2. JavaScript の基本構文

2.1. 変数

変数とは？

変数とは、値を格納するための名前付きのメモリ領域です。JavaScript では、変数を宣言せずに使用することもできますが、宣言することをお勧めします。

変数の宣言:

JavaScript では、var、let、const の3つのキーワードを使用して変数を宣言できます。

var: 関数スコープを持つ変数を宣言します。再宣言、再割り当てが可能です。

var name = "太郎";
var name = "花子"; // 再宣言可能
name = "次郎"; // 再割り当て可能

let: ブロックスコープを持つ変数を宣言します。再宣言はできませんが、再割り当ては可能です。

let age = 20;
// let age = 30; // 再宣言はエラー
age = 25; // 再割り当て可能

const: ブロックスコープを持つ定数を宣言します。再宣言、再割り当てはできません。

const PI = 3.14;
// const PI = 3; // 再宣言はエラー
// PI = 3.1415; // 再割り当てはエラー

変数名の命名規則:

変数名は、英字、数字、アンダースコア (_)、ドル記号 ($) を使用できます。
変数名の先頭には、数字を使用できません。
JavaScript は大文字と小文字を区別します。

例:

let firstName = "太郎";
let age = 20;
const PI = 3.14;

2.2. データ型

JavaScript には、以下のデータ型があります。

データ型	説明	例
数値 (Number)	数値を表します。	10, 3.14, -5
文字列 (String)	テキストを表します。	"Hello", 'World'
真偽値 (Boolean)	真 (true) または偽 (false) を表します。	true, false
null	値が設定されていないことを表します。	null
undefined	値が定義されていないことを表します。	undefined
オブジェクト (Object)	複数のプロパティを持つデータ構造	{ name: "太郎", age: 20 }

データ型の確認:

typeof 演算子を使用して、変数のデータ型を確認できます。

let num = 10;
let str = "Hello";
let bool = true;

console.log(typeof num); // "number"
console.log(typeof str); // "string"
console.log(typeof bool); // "boolean"

2.3. 演算子

JavaScript には、以下の演算子があります。

算術演算子: + (加算), - (減算), * (乗算), / (除算), % (剰余)
比較演算子: > (より大きい), < (より小さい), >= (以上), <= (以下), == (等しい - 緩い比較), === (等しい - 厳密な比較), != (等しくない - 緩い比較), !== (等しくない - 厳密な比較)
論理演算子: && (AND), || (OR), ! (NOT)
代入演算子: = (代入), += (加算代入), -= (減算代入), *= (乗算代入), /= (除算代入), %= (剰余代入)

例:

let x = 10;
let y = 5;

console.log(x + y); // 15
console.log(x > y); // true
console.log(x == y); // false
console.log(x != y); // true

2.4. コメント

コメントは、コードの説明やメモ書きに使用されます。コメントは、コードの実行には影響しません。

単一行コメント: // の後にコメントを記述します。

// これは単一行コメントです。

複数行コメント: /* と */ で囲まれた部分にコメントを記述します。

/*
これは複数行コメントです。
複数行にわたってコメントを記述できます。
*/

3. 制御フロー

3.1. 条件分岐

条件分岐は、指定した条件に基づいて、異なるコードブロックを実行するために使用されます。

if 文: 指定した条件が真の場合に、コードブロックを実行します。

let age = 20;

if (age >= 18) {
  console.log("あなたは成人です。");
}

if...else 文: if 文の条件が偽の場合に、別のコードブロックを実行します。

let age = 16;

if (age >= 18) {
  console.log("あなたは成人です。");
} else {
  console.log("あなたは未成年です。");
}

if...else if...else 文: 複数の条件に基づいて、異なるコードブロックを実行します。

let score = 80;

if (score >= 90) {
  console.log("成績は A です。");
} else if (score >= 80) {
  console.log("成績は B です。");
} else if (score >= 70) {
  console.log("成績は C です。");
} else {
  console.log("成績は D です。");
}

switch 文: 式の値に基づいて、複数のケースから一致するものを実行します。

let day = "月曜日";

switch (day) {
  case "月曜日":
    console.log("今日は月曜日です。");
    break;
  case "火曜日":
    console.log("今日は火曜日です。");
    break;
  case "水曜日":
    console.log("今日は水曜日です。");
    break;
  default:
    console.log("今日はその他の曜日です。");
}

3.2. 繰り返し処理

繰り返し処理は、指定した条件が満たされるまで、コードブロックを繰り返し実行するために使用されます。

for ループ: 指定した回数だけ、コードブロックを繰り返し実行します。

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

while ループ: 指定した条件が真である間、コードブロックを繰り返し実行します。

let i = 0;

while (i < 5) {
  console.log(i);
  i++;
}

do...while ループ: コードブロックを少なくとも1回実行し、その後は指定した条件が真である間、コードブロックを繰り返し実行します。

let i = 0;

do {
  console.log(i);
  i++;
} while (i < 5);

4. 関数

4.1. 関数とは？

関数は、特定のタスクを実行する、再利用可能なコードブロックです。関数は、コードの再利用性を高め、コードを読みやすくするために使用されます。

4.2. 関数の定義

JavaScript では、function キーワードを使用して関数を定義します。

function 関数名(引数1, 引数2, ...) {
  // 関数の処理を記述
  return 戻り値; // 戻り値は省略可能
}

関数名: 関数に付ける名前です。変数名の命名規則と同じ規則に従います。
引数: 関数に渡される値です。複数の引数をカンマで区切って指定します。引数は省略可能です。
戻り値: 関数が実行された後に返される値です。return 文を使用して戻り値を指定します。戻り値は省略可能です。

例:

// 2 つの数値を加算する関数
function add(a, b) {
  return a + b;
}

// 関数の呼び出し
let result = add(3, 5);
console.log(result); // 8

4.3. 関数式

関数式は、関数を値として変数に代入する構文です。

const 関数名 = function(引数1, 引数2, ...) {
  // 関数の処理を記述
  return 戻り値; // 戻り値は省略可能
};

例:

// 2 つの数値を加算する関数式
const add = function(a, b) {
  return a + b;
};

// 関数の呼び出し
let result = add(3, 5);
console.log(result); // 8

4.4. アロー関数

アロー関数は、関数式をより簡潔に記述するための構文です。

const 関数名 = (引数1, 引数2, ...) => {
  // 関数の処理を記述
  return 戻り値; // 戻り値は省略可能
};

// 処理が1行だけの場合は、{} と return を省略できる
const 関数名 = (引数1, 引数2, ...) => 式;

例:

// 2 つの数値を加算するアロー関数
const add = (a, b) => a + b;

// 関数の呼び出し
let result = add(3, 5);
console.log(result); // 8

5. オブジェクト

5.1. オブジェクトとは？

オブジェクトとは、プロパティの集合です。プロパティは、キーと値のペアで構成されます。

5.2. オブジェクトの作成

オブジェクトは、以下の方法で作成できます。

オブジェクトリテラル: {} を使用して、オブジェクトを作成します。

let person = {
  name: "太郎",
  age: 20,
  gender: "男性"
};

new 演算子: Object コンストラクタ関数を使用して、オブジェクトを作成します。

let person = new Object();
person.name = "太郎";
person.age = 20;
person.gender = "男性";

5.3. プロパティへのアクセス

オブジェクトのプロパティには、以下の方法でアクセスできます。

ドット記法: オブジェクト名とプロパティ名をドット (.) でつないでアクセスします。

let person = {
  name: "太郎",
  age: 20
};

console.log(person.name); // "太郎"
console.log(person.age); // 20

ブラケット記法: オブジェクト名とプロパティ名をブラケット ([]) で囲んでアクセスします。

let person = {
  name: "太郎",
  age: 20
};

console.log(person["name"]); // "太郎"
console.log(person["age"]); // 20

6. DOM 操作

6.1. DOM とは？

DOM (Document Object Model) は、HTML や XML 文書をツリー構造で表現したものです。JavaScript を使用して DOM を操作することで、Web ページの内容や構造を動的に変更できます。

6.2. DOM 要素の選択

DOM 要素を選択するには、以下のメソッドを使用します。

document.getElementById(id): 指定した ID を持つ要素を取得します。
document.getElementsByTagName(tagName): 指定したタグ名を持つ要素のリストを取得します。
document.querySelector(selector): 指定した CSS セレクタに一致する最初の要素を取得します。
document.querySelectorAll(selector): 指定した CSS セレクタに一致するすべての要素のリストを取得します。

例:

// id="myElement" の要素を取得
let element = document.getElementById("myElement");

// p タグの要素を取得
let paragraphs = document.getElementsByTagName("p");

// class="myClass" の最初の要素を取得
let element = document.querySelector(".myClass");

// class="myClass" のすべての要素を取得
let elements = document.querySelectorAll(".myClass");

6.3. DOM 要素の変更

DOM 要素を変更するには、以下のプロパティやメソッドを使用します。

innerHTML: 要素の内容 (HTML) を取得または設定します。
textContent: 要素の内容 (テキストのみ) を取得または設定します。
setAttribute(name, value): 要素の属性を設定します。
classList.add(className): 要素にクラスを追加します。
classList.remove(className): 要素からクラスを削除します。

例:

// id="myElement" の要素の内容を変更
document.getElementById("myElement").innerHTML = "新しい内容";

// class="myClass" の最初の要素にクラスを追加
document.querySelector(".myClass").classList.add("newClass");

7. イベント

7.1. イベントとは？

イベントとは、ユーザーが Web ページ上で行った操作や、ブラウザ自身で発生するアクションのことです。

例:

マウスのクリック
キーボードのキーの押下
ページの読み込み完了
フォームの送信

7.2. イベントリスナー

イベントリスナーは、特定のイベントが発生したときに実行される関数を登録するために使用されます。

addEventListener(event, listener): 指定したイベントが発生したときに、指定したリスナー関数を実行します。

// id="myButton" のボタンをクリックしたときに、関数が実行されるようにする
document.getElementById("myButton").addEventListener("click", function() {
  console.log("ボタンがクリックされました。");
});

7.3. よく使われるイベント

イベント	説明
click	要素がクリックされたとき
mouseover	マウスポインタが要素上に入ったとき
mouseout	マウスポインタが要素上から出たとき
keydown	キーボードのキーが押されたとき
keyup	キーボードのキーが離されたとき
submit	フォームが送信されたとき
change	入力要素の値が変更されたとき
load	ページの読み込みが完了したとき

8. JavaScript の応用

8.1. 配列メソッド

JavaScript の配列には、要素の操作を簡単にするための便利なメソッドが用意されています。

forEach(): 配列の各要素に対して、指定した関数を繰り返し実行します。

const numbers = [1, 2, 3, 4, 5];

numbers.forEach(function(number) {
  console.log(number);
});

map(): 配列の各要素に対して、指定した関数を適用し、新しい配列を作成します。

const numbers = [1, 2, 3, 4, 5];

const doubledNumbers = numbers.map(function(number) {
  return number * 2;
});

console.log(doubledNumbers); // [2, 4, 6, 8, 10]

filter(): 配列の各要素に対して、指定した関数を適用し、条件を満たす要素だけを含む新しい配列を作成します。

const numbers = [1, 2, 3, 4, 5];

const evenNumbers = numbers.filter(function(number) {
  return number % 2 === 0;
});

console.log(evenNumbers); // [2, 4]

reduce(): 配列のすべての要素を累積して、単一の値を生成します。

const numbers = [1, 2, 3, 4, 5];

const sum = numbers.reduce(function(accumulator, currentValue) {
  return accumulator + currentValue;
}, 0);

console.log(sum); // 15

8.2. 非同期 JavaScript

非同期処理とは、処理が完了するまでに時間がかかる場合でも、処理をブロックせずに他の処理を継続できるようにするプログラミングのテクニックです。

コールバック関数: 非同期処理が完了した後に実行される関数を、引数として渡します。

function getData(callback) {
  setTimeout(function() {
    callback("データを取得しました。");
  }, 1000);
}

getData(function(data) {
  console.log(data); // 1 秒後に "データを取得しました。" と表示される
});

Promise: 非同期処理の状態を表現するオブジェクトです。

function getData() {
  return new Promise(function(resolve, reject) {
    setTimeout(function() {
      resolve("データを取得しました。");
    }, 1000);
  });
}

getData()
  .then(function(data) {
    console.log(data); // 1 秒後に "データを取得しました。" と表示される
  })
  .catch(function(error) {
    console.error(error);
  });

async/await: Promise をより直感的に扱うための構文です。

async function getData() {
  return new Promise(function(resolve, reject) {
    setTimeout(function() {
      resolve("データを取得しました。");
    }, 1000);
  });
}

async function main() {
  try {
    const data = await getData();
    console.log(data); // 1 秒後に "データを取得しました。" と表示される
  } catch (error) {
    console.error(error);
  }
}

main();

8.3. ES6+ の新機能

ES6 (ECMAScript 2015) 以降、JavaScript には多くの新機能が追加されています。

アロー関数: 関数式をより簡潔に記述するための構文です。

const add = (a, b) => a + b;

分割代入: 配列やオブジェクトから、複数の変数を一度に宣言することができます。

const numbers = [1, 2, 3];
const [first, second, third] = numbers;

console.log(first); // 1
console.log(second); // 2
console.log(third); // 3

クラス: オブジェクト指向プログラミングをより簡単に実装するための構文です。

class Person {
  constructor(name, age) {
    this.name = name;
    this.age = age;
  }

  greet() {
    console.log(`こんにちは、${this.name}です。`);
  }
}

const person = new Person("太郎", 20);
person.greet(); // "こんにちは、太郎です。"

9. 実践プロジェクト

JavaScript のスキルを向上させるための、実践的なプロジェクトのアイデアを紹介します。

シンプルな ToDo リストアプリケーション: ユーザーがタスクを追加、削除、完了済みとしてマークできるアプリケーションを作成します。
インタラクティブな画像ギャラリー: 画像をクリックすると、拡大表示されたり、スライドショーで表示されたりするギャラリーを作成します。
シンプルな JavaScript ゲーム: 簡単なゲームを作成します。例えば、シューティングゲーム、パズルゲームなど。

10. 学習リソース

JavaScript をさらに学ぶための、おすすめの学習リソースを紹介します。

MDN Web Docs: https://developer.mozilla.org/ja/
W3Schools: https://www.w3schools.com/js/
FreeCodeCamp: https://www.freecodecamp.org/

11. まとめ

このチュートリアルでは、JavaScript の基本的な概念から、応用的な内容まで幅広く解説しました。このチュートリアルを参考に、JavaScript を学び、Web 開発スキルを向上させてください。

12. よくある質問

12.1. JavaScript と Java の違いは何ですか？

JavaScript と Java は、名前が似ていますが、全く異なるプログラミング言語です。JavaScript は、主に Web ページにインタラクティブな機能を追加するために使用されるスクリプト言語です。一方、Java は、さまざまなアプリケーション開発に使用される汎用プログラミング言語です。

12.2. JavaScript を学ぶには、どのようなテキストエディタを使用すればよいですか？

JavaScript のコードは、メモ帳などのテキストエディタでも記述できますが、Visual Studio Code、Atom、Sublime Text などのプログラミングに特化したテキストエディタを使用すると、コードの記述やデバッグがより効率的に行えます。

12.3. JavaScript の学習を始めたばかりですが、何かアドバイスはありますか？

JavaScript を学習する上で最も重要なことは、実際にコードを書いてみることです。チュートリアルや書籍の内容を参考に、簡単なプログラムを作成してみましょう。また、エラーが出た場合は、エラーメッセージをよく読み、解決方法を調べてみましょう。