Learn in 10 minutes

Learn in 10 minutes

10分でJavaScriptを学ぶ

— プログラミング言語
JavaScript

JavaScriptは、その汎用性とWeb開発での広範な使用で知られる高水準のインタプリタ型プログラミング言語です。このチュートリアルでは、現代的なJavaScript（ES6+）の機能をカバーし、言語を素早く学ぶのに役立ちます。

1. 最初のJavaScriptプログラムを書く

簡単なプログラムから始めましょう。hello.jsという名前のファイルを作成し、次のコードを入力します：

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

ファイルを保存し、ターミナルまたはコマンドラインで次のコマンドを実行します：

node hello.js

またはHTMLファイルに含めます：

<script>
  console.log("Hello, World!");
</script>

出力は次のようになります：

Hello, World!

この簡単なプログラムは、JavaScriptの基本的な出力機能を示しています。console.log()関数は、コンソールにテキスト情報を表示するために使用されます。

2. 基本構文

JavaScriptの構文は他のCスタイルの言語に似ています。文を終了するためにセミコロンを使用し、コードブロックを定義するために中括弧{}を使用します。

// これは単一行コメントです
console.log("Hello, World!");

/*
これは複数行にわたる
複数行コメントです。
*/

JavaScriptの基本的な構文規則：

  • セミコロン: 文を終了するためにオプションですが推奨されます
  • コメント: 単一行コメントは//で始まり、複数行コメントは/* */で始まります
  • 大文字小文字の区別: JavaScriptは大文字小文字を区別します
  • コードブロック: 中括弧{}で定義されます

3. 変数とデータ型

JavaScriptでは、変数はlet、const、またはvarを使用して宣言されます。現代のJavaScriptはletとconstを好みます。

変数宣言:

let name = "John"; // 変更可能な変数
const age = 25;     // 不変の定数
var oldWay = "非推奨"; // varの使用は避けてください

JavaScriptの主なデータ型:

  • Number: 42, 3.14, -10
  • String: "hello", 'world', `template`
  • Boolean: true, false
  • Undefined: undefined（宣言されたが代入されていない変数）
  • Null: null（意図的な値の不在）
  • Object: {key: "value"}, [1, 2, 3]
  • Symbol: Symbol("description")（ES6+）
  • BigInt: 1234567890123456789012345678901234567890n（ES2020+）

3.1 Number型

JavaScriptはすべての数値に64ビット浮動小数点数を使用します。

let integer = 42;
let float = 3.14159;
let scientific = 2.5e3; // 2500
let hex = 0xFF;         // 255
let binary = 0b1010;    // 10
let octal = 0o10;       // 8

3.2 String型

文字列はシングルクォート、ダブルクォート、またはテンプレートリテラルで作成できます。

let single = 'シングルクォート文字列';
let double = "ダブルクォート文字列";
let template = `テンプレートリテラル`;

// 補間付きテンプレートリテラル
let name = "Alice";
let greeting = `こんにちは、${name}さん！`; // "こんにちは、Aliceさん！"

文字列操作：

let text = "JavaScriptプログラミング";
console.log(text.length);        // 文字列長: 15
console.log(text.toUpperCase()); // "JAVASCRIPTプログラミング"
console.log(text.toLowerCase()); // "javascriptプログラミング"
console.log(text[0]);            // 最初の文字: "J"
console.log(text.slice(0, 10)); // "JavaScript"

3.3 Boolean型

Boolean型にはtrueとfalseの2つの値があります。

let isActive = true;
let isComplete = false;

// 論理演算
let result1 = true && false;  // false
let result2 = true || false;  // true
let result3 = !true;          // false

3.4 UndefinedとNull

undefinedは変数が宣言されたが値が代入されていないことを意味します。nullは意図的な値の不在です。

let unassigned; // undefined
let empty = null;

if (unassigned === undefined) {
  console.log("変数が未定義です");
}

if (empty === null) {
  console.log("値がnullです");
}

4. データ構造

4.1 配列

配列は順序付けられた変更可能な値のコレクションです。

let numbers = [1, 2, 3, 4, 5];
numbers.push(6);        // 要素を追加: [1, 2, 3, 4, 5, 6]
numbers.pop();          // 最後を削除: [1, 2, 3, 4, 5]
numbers.unshift(0);     // 先頭に追加: [0, 1, 2, 3, 4, 5]
numbers.shift();        // 最初を削除: [1, 2, 3, 4, 5]
numbers[0] = 10;        // 変更: [10, 2, 3, 4, 5]

配列メソッド：

let fruits = ["りんご", "バナナ", "オレンジ"];

// 反復
fruits.forEach(fruit => console.log(fruit));

// 変換
let lengths = fruits.map(fruit => fruit.length); // [3, 3, 4]

## 4.2 オブジェクト

オブジェクトはキーと値のペアのコレクションです。

```javascript
let person = {
  name: "John",
  age: 30,
  city: "ニューヨーク",
  isStudent: false
};

// プロパティへのアクセス
console.log(person.name);       // "John"
console.log(person["age"]);     // 30

// プロパティの追加
person.country = "アメリカ";
person["occupation"] = "開発者";

// プロパティの削除
delete person.isStudent;

// オブジェクトメソッド
let keys = Object.keys(person);    // ["name", "age", "city", "country", "occupation"]
let values = Object.values(person); // ["John", 30, "ニューヨーク", "アメリカ", "開発者"]
let entries = Object.entries(person); // [["name", "John"], ["age", 30], ...]

4.3 セット

セットは一意の値のコレクションです。

let numbers = new Set([1, 2, 3, 3, 4, 4, 5]);
console.log(numbers); // Set {1, 2, 3, 4, 5}

// セット操作
numbers.add(6);       // 値を追加
numbers.delete(1);    // 値を削除
numbers.has(2);       // true
numbers.size;         // 5

// 反復
numbers.forEach(num => console.log(num));

4.4 マップ

マップは任意のデータ型をキーとして使用できるキーと値のペアのコレクションです。

let map = new Map();
map.set("name", "Alice");
map.set(1, "ナンバーワン");
map.set(true, "真のブール値");

console.log(map.get("name"));    // "Alice"
console.log(map.has(1));         // true
console.log(map.size);           // 3

// 反復
for (let [key, value] of map) {
  console.log(`${key}: ${value}`);
}

5. 演算子

JavaScriptは計算と比較のためのさまざまな演算子を提供します。

  • 算術: +, -, *, /, %, **（べき乗）
  • 比較: ==, ===, !=, !==, >, <, >=, <=
  • 論理: &&, ||, !
  • 代入: =, +=, -=, *=, /=, %=
  • 三項: condition ? expr1 : expr2

5.1 算術演算子

let a = 10, b = 3;

console.log(a + b);   // 13
console.log(a - b);   // 7
console.log(a * b);   // 30
console.log(a / b);   // 3.333...
console.log(a % b);   // 1
console.log(a ** b);  // 1000

5.2 比較演算子

let x = 5, y = 10;

console.log(x == y);    // false
console.log(x === y);   // false（厳密等価）
console.log(x != y);    // true
console.log(x !== y);   // true（厳密不等価）
console.log(x > y);     // false
console.log(x < y);     // true
console.log(x >= y);    // false
console.log(x <= y);    // true

5.3 論理演算子

let a = true, b = false;

console.log(a && b);   // false
console.log(a || b);   // true
console.log(!a);       // false

6. 制御フロー

6.1 if文

let age = 20;

if (age >= 18) {
  console.log("成人");
} else if (age >= 13) {
  console.log("10代");
} else {
  console.log("子供");
}

6.2 switch文

let day = "月曜日";

switch (day) {
  case "月曜日":
    console.log("週の始まり");
    break;
  case "金曜日":
    console.log("週末間近");
    break;
  default:
    console.log("普通の日");
}

6.3 forループ

// 従来のforループ
for (let i = 0; i < 5; i++) {
  console.log(i); // 0, 1, 2, 3, 4
}

// for...ofループ（配列、文字列）
let fruits = ["りんご", "バナナ", "オレンジ"];
for (let fruit of fruits) {
  console.log(fruit);
}

// for...inループ（オブジェクトプロパティ）
let person = {name: "John", age: 30};
for (let key in person) {
  console.log(`${key}: ${person[key]}`);
}

6.4 whileループ

// whileループ
let count = 0;
while (count < 5) {
  console.log(count);
  count++;
}

// do...whileループ
let i = 0;
do {
  console.log(i);
  i++;
} while (i < 5);

6.5 breakとcontinue

for (let i = 0; i < 10; i++) {
  if (i === 5) {
    break; // ループを抜ける
  }
  if (i % 2 === 0) {
    continue; // 偶数をスキップ
  }
  console.log(i); // 1, 3
}

7. 関数

関数は再利用可能なコードブロックです。

7.1 関数宣言

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

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

7.2 関数式

const multiply = function(a, b) {
  return a * b;
};

console.log(multiply(4, 5)); // 20

7.3 アロー関数（ES6+）

const add = (a, b) => a + b;
const square = x => x * x;
const greet = name => `こんにちは、${name}さん！`;

console.log(add(2, 3));      // 5
console.log(square(4));      // 16
console.log(greet("Bob"));   // "こんにちは、Bobさん！"

7.4 デフォルトパラメータ

function createUser(name, age = 18, isActive = true) {
  return {name, age, isActive};
}

console.log(createUser("John"));        // {name: "John", age: 18, isActive: true}
console.log(createUser("Alice", 25));  // {name: "Alice", age: 25, isActive: true}

7.5 レストパラメータ

function sum(...numbers) {
  return numbers.reduce((total, num) => total + num, 0);
}

console.log(sum(1, 2, 3, 4)); // 10
console.log(sum(5, 10, 15));  // 30

7.6 スプレッド演算子

let numbers = [1, 2, 3];
let moreNumbers = [4, 5, 6];
let allNumbers = [...numbers, ...moreNumbers]; // [1, 2, 3, 4, 5, 6]

let person = {name: "John", age: 30};
let updatedPerson = {...person, city: "ニューヨーク"}; // {name: "John", age: 30, city: "ニューヨーク"}

8. クラスとオブジェクト（ES6+）

8.1 クラス宣言

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

  introduce() {
    return `私は${this.name}、${this.age}歳です`;
  }

  haveBirthday() {
    this.age++;
    return `${this.name}の誕生日、今${this.age}歳です`;
  }
}

let person = new Person("John", 25);
console.log(person.introduce());      // "私はJohn、25歳です"
console.log(person.haveBirthday());   // "Johnの誕生日、今26歳です"

8.2 継承

class Animal {
  constructor(name, species) {
    this.name = name;
    this.species = species;
  }

  makeSound() {
    return `${this.name}が音を立てる`;
  }
}

class Dog extends Animal {
  constructor(name, breed) {
    super(name, "犬");
    this.breed = breed;
  }

  makeSound() {
    return `${this.name}が吠える`;
  }

  fetch() {
    return `${this.name}がボールを取ってくる`;
  }
}

let dog = new Dog("Buddy", "ゴールデンレトリーバー");
console.log(dog.makeSound()); // "Buddyが吠える"
console.log(dog.fetch());     // "Buddyがボールを取ってくる"

8.3 ゲッターとセッター

class Circle {
  constructor(radius) {
    this.radius = radius;
  }

  get diameter() {
    return this.radius * 2;
  }

  set diameter(diameter) {
    this.radius = diameter / 2;
  }

  get area() {
    return Math.PI * this.radius ** 2;
  }
}

let circle = new Circle(5);
console.log(circle.diameter); // 10
console.log(circle.area);     // 78.53981633974483

circle.diameter = 20;
console.log(circle.radius);   // 10

9. 非同期JavaScript

9.1 コールバック

function fetchData(callback) {
  setTimeout(() => {
    callback("データを受信");
  }, 1000);
}

fetchData(data => {
  console.log(data); // 1秒後に"データを受信"
});

9.2 プロミス

function fetchData() {
  return new Promise((resolve, reject) => {
    setTimeout(() => {
      resolve("データを受信");
      // reject("エラー発生");
    }, 1000);
  });
}

fetchData()
  .then(data => console.log(data)) // "データを受信"
  .catch(error => console.error(error));

9.3 async/await（ES2017+）

async function getData() {
  try {
    let data = await fetchData();
    console.log(data); // "データを受信"
  } catch (error) {
    console.error(error);
  }
}

getData();

9.4 Fetch API

async function getUser() {
  try {
    let response = await fetch('https://api.example.com/user');
    let user = await response.json();
    console.log(user);
  } catch (error) {
    console.error('エラー:', error);
  }
}

10. エラーハンドリング

try {
  let result = 10 / 0;
  if (!isFinite(result)) {
    throw new Error("ゼロ除算");
  }
  console.log(result);
} catch (error) {
  console.error("エラー:", error.message);
} finally {
  console.log("これは常に実行されます");
}

11. モジュール（ES6+）

11.1 エクスポート

// math.js
export const PI = 3.14159;

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

export default function multiply(a, b) {
  return a * b;
}

11.2 インポート

// main.js
import multiply, { PI, add } from './math.js';

console.log(PI);           // 3.14159
console.log(add(2, 3));    // 5
console.log(multiply(4, 5)); // 20

12. 現代的なJavaScript機能

12.1 分割代入

// 配列の分割代入
let [first, second, third] = [1, 2, 3];
console.log(first, second, third); // 1 2 3

// オブジェクトの分割代入
let {name, age} = {name: "John", age: 30, city: "NY"};
console.log(name, age); // John 30

// 関数パラメータの分割代入
function greet({name, age}) {
  return `こんにちは${name}さん、${age}歳です`;
}

12.2 テンプレートリテラル

let name = "Alice";
let age = 25;

// 基本的な補間
let greeting = `こんにちは、${name}さん！`;

// 複数行文字列
let message = `
  名前: ${name}
  年齢: ${age}
  ステータス: ${age >= 18 ? "成人" : "未成年"}
`;

// 式の評価
let calculation = `2 + 3 = ${2 + 3}`; // "2 + 3 = 5"

12.3 オプショナルチェイニング (?.)

let user = {
  profile: {
    name: "John",
    address: {
      city: "ニューヨーク"
    }
  }
};

console.log(user?.profile?.name);           // "John"
console.log(user?.profile?.age);            // undefined
console.log(user?.profile?.address?.city);  // "ニューヨーク"
console.log(user?.employment?.company);     // undefined（エラーなし）

12.4 Null合体演算子 (??)

let name = "";
let age = 0;
let city = null;
let country = undefined;

console.log(name || "不明");    // "不明"（空文字はfalsy）
console.log(name ?? "不明");    // ""（null/undefinedのみ）

console.log(age || 18);           // 18（0はfalsy）
console.log(age ?? 18);           // 0（null/undefinedのみ）

console.log(city ?? "不明");   // "不明"
console.log(country ?? "アメリカ");    // "アメリカ"

13. 便利な配列メソッド

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

// map: 各要素を変換
let squares = numbers.map(n => n * n); // [1, 4, 9, 16, 25]

// filter: 要素を選択
let evens = numbers.filter(n => n % 2 === 0); // [2, 4]

// reduce: 値を累積
let sum = numbers.reduce((total, n) => total + n, 0); // 15

// find: 最初に一致する要素を見つける
let firstEven = numbers.find(n => n % 2 === 0); // 2

// some: いずれかの要素が一致するか確認
let hasEven = numbers.some(n => n % 2 === 0); // true

// every: すべての要素が一致するか確認
let allPositive = numbers.every(n => n > 0); // true

// sort: 要素をソート
let sorted = numbers.sort((a, b) => b - a); // [5, 4, 3, 2, 1]

14. 日付と時刻

let now = new Date();
console.log(now.toString());      // 現在の日付と時刻
console.log(now.getFullYear());   // 現在の年
console.log(now.getMonth());      // 現在の月（0-11）
console.log(now.getDate());       // 現在の日（1-31）
console.log(now.getHours());      // 現在の時間（0-23）

// 日付のフォーマット
console.log(now.toLocaleDateString()); // ローカライズされた日付文字列
console.log(now.toLocaleTimeString()); // ローカライズされた時間文字列
console.log(now.toISOString());        // ISO形式の文字列

// 特定の日付を作成
let specificDate = new Date(2025, 0, 1); // 2025年1月1日
let timestamp = new Date(1640995200000); // タイムスタンプから

15. 正規表現

let text = "こんにちは、私のメールは[email protected]で電話は123-456-7890です";

// メールパターン
let emailPattern = /[a-zA-Z0-9._%+-]+@[a-zA-Z0-9.-]+\.[a-zA-Z]{2,}/g;
let emails = text.match(emailPattern); // ["[email protected]"]

// 電話パターン
let phonePattern = /\d{3}-\d{3}-\d{4}/g;
let phones = text.match(phonePattern); // ["123-456-7890"]

// testメソッド
let isValidEmail = emailPattern.test("[email protected]"); // true

// replaceメソッド
let maskedText = text.replace(phonePattern, "XXX-XXX-XXXX");
console.log(maskedText);

JavaScriptは進化を続ける強力で汎用性の高い言語です。このチュートリアルは始めるために必要な基本的な概念をカバーしていますが、ジェネレータ、プロキシ、Web APIなどの高度なトピックを含め、さらに探求すべきことがたくさんあります。