以下の内容はhttps://kafkafinancialgroup.hatenablog.com/entry/2025/03/27/082710より取得しました。

JavaScriptの文法総合ガイド

JavaScriptはWebプログラミングにおいて最も広く使われている言語の一つで、ブラウザからサーバーサイドまで活用できる非常に汎用性の高いプログラミング言語です。この総合ガイドでは、JavaScriptの基礎的な文法から応用的な内容まで体系的に解説します。

JavaScriptの基本概念

JavaScriptは、大文字と小文字を区別する言語で、Unicode文字セットをサポートしています。セミコロン（;）で文を区切ることができ、基本的な構文はC++やJavaに似ていますが、より柔軟で動的な特性を持っています8。

JavaScript（正式にはECMAScript）は継続的に進化しており、ECMAScript 2015（ES6）以降、多くの新機能が追加されています9。

変数と宣言

変数の宣言方法

JavaScriptには変数を宣言する方法として主に3つあります：

// let - 再代入可能な変数
let age = 30;
age = 31; // 再代入可能

// const - 定数（再代入不可）
const PI = 3.14159;
// PI = 3; // エラーになる

// var - 古い宣言方法（使用を避けるべき）
var oldVariable = "legacy";

現代のJavaScriptでは、letとconstを使用するのが推奨されています。特に値が変更されない場合はconstを使用することで、コードの安全性と可読性が向上します4 5 11。

データ型

JavaScriptには主に以下のデータ型があります：

プリミティブ型

// 数値型（Number）
const num = 42;
const float = 3.14;

// 文字列型（String）
const str = 'こんにちは';
const str2 = "Hello";
const templateStr = `値：${num}`; // テンプレートリテラル

// 論理型（Boolean）
const isTrue = true;
const isFalse = false;

// undefined
let undefinedVar;
console.log(undefinedVar); // undefined

// null
const nullValue = null;

// Symbol（ES2015で導入）
const sym = Symbol('description');

// BigInt（ES2020で導入）
const bigNumber = 9007199254740991n;

複合型（オブジェクト）

// オブジェクト
const person = {
  name: '山田太郎',
  age: 30,
  greet: function() {
    console.log('こんにちは');
  }
};

// 配列
const fruits = ['りんご', 'バナナ', 'オレンジ'];

JavaScriptの変数は動的型付けであるため、同じ変数に異なる型の値を代入することができます3 4。

コメント

JavaScriptでは、コードにコメントを追加するための2つの方法があります：

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

/* 
これは
複数行の
コメントです
*/

コメントはコードの実行から除外され、プログラムの説明やメモを残すために使用されます8。

演算子

JavaScriptには多くの演算子があります：

算術演算子

const a = 10;
const b = 3;

console.log(a + b);  // 13（加算）
console.log(a - b);  // 7（減算）
console.log(a * b);  // 30（乗算）
console.log(a / b);  // 3.3333...（除算）
console.log(a % b);  // 1（剰余）
console.log(a ** b); // 1000（べき乗、ES2016で導入）

比較演算子

console.log(a === b); // false（厳密等価）
console.log(a !== b); // true（厳密不等価）
console.log(a > b);   // true（より大きい）
console.log(a < b);   // false（より小さい）
console.log(a >= b);  // true（以上）
console.log(a <= b);  // false（以下）

論理演算子

const x = true;
const y = false;

console.log(x && y); // false（論理AND）
console.log(x || y); // true（論理OR）
console.log(!x);     // false（論理NOT）

代入演算子

let c = 5;
c += 2;  // c = c + 2;と同じ（7）
c -= 1;  // c = c - 1;と同じ（6）
c *= 2;  // c = c * 2;と同じ（12）
c /= 4;  // c = c / 4;と同じ（3）

条件（三項）演算子

const age = 20;
const status = age >= 18 ? '成人' : '未成年';
console.log(status); // '成人'

三項演算子は、条件によって2つの値のどちらかを出し分ける便利な方法です11。

条件分岐

if文

const score = 85;

if (score >= 90) {
  console.log('優');
} else if (score >= 80) {
  console.log('良');
} else if (score >= 70) {
  console.log('可');
} else {
  console.log('不可');
}

switch文

const country = '日本';

switch (country) {
  case '日本':
    console.log('東京');
    break;
  case 'アメリカ':
    console.log('ワシントンDC');
    break;
  case 'フランス':
    console.log('パリ');
    break;
  default:
    console.log('該当なし');
}

switch文は、値自体を基準にして分岐するのに便利で、選択肢が複数ある場合に使います11。

ループと反復処理

JavaScriptには複数のループ構文があります：

for文

for (let i = 0; i < 5; i++) {
  console.log(`カウント: ${i}`);
}

while文

let i = 0;
while (i < 5) {
  console.log(`カウント: ${i}`);
  i++;
}

do-while文

let j = 0;
do {
  console.log(`少なくとも一度は実行: ${j}`);
  j++;
} while (j < 5);

for...of文（配列向け）

const colors = ['赤', '青', '緑'];
for (const color of colors) {
  console.log(color);
}

for...in文（オブジェクト向け）

const person = { name: '太郎', age: 30, job: 'エンジニア' };
for (const key in person) {
  console.log(`${key}: ${person[key]}`);
}

関数

関数宣言

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

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

関数式

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

console.log(greet('花子')); // 'こんにちは、花子さん！'

アロー関数（ES2015）

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

// 単一の式を返す場合は省略形も可能
const simpleGreet = name => `こんにちは、${name}さん！`;

console.log(simpleGreet('次郎')); // 'こんにちは、次郎さん！'

アロー関数は通常の関数と比べて、簡潔な書き方ができるだけでなく、thisの扱いも異なります7。

オブジェクト

JavaScriptのオブジェクトは、キーと値のペアの集合です：

const person = {
  firstName: '太郎',
  lastName: '山田',
  age: 30,
  fullName: function() {
    return this.lastName + ' ' + this.firstName;
  }
};

console.log(person.firstName); // '太郎'
console.log(person['lastName']); // '山田'
console.log(person.fullName()); // '山田 太郎'

// オブジェクトへのプロパティ追加
person.email = 'taro@example.com';

// オブジェクトからのプロパティ削除
delete person.age;

配列

配列はJavaScriptで値の順序付きリストを扱うための構造です：

const fruits = ['りんご', 'バナナ', 'オレンジ'];

console.log(fruits[0]); // 'りんご'
console.log(fruits.length); // 3

// 配列の操作
fruits.push('ぶどう'); // 末尾に追加
const lastFruit = fruits.pop(); // 末尾から削除して返す
fruits.unshift('いちご'); // 先頭に追加
const firstFruit = fruits.shift(); // 先頭から削除して返す

// 配列のメソッド例
const numbers = [1, 2, 3, 4, 5];
const doubled = numbers.map(num => num * 2); // [2, 4, 6, 8, 10]
const evens = numbers.filter(num => num % 2 === 0); // [2, 4]
const sum = numbers.reduce((acc, current) => acc + current, 0); // 15

文字列操作

JavaScriptの文字列には多くの操作メソッドがあります：

const text = 'こんにちは、世界！';

console.log(text.length); // 9
console.log(text.charAt(0)); // 'こ'
console.log(text.indexOf('、')); // 5
console.log(text.slice(6)); // '世界！'
console.log(text.replace('世界', 'JavaScript')); // 'こんにちは、JavaScript！'
console.log(text.toUpperCase()); // 'こんにちは、世界！'（日本語は変化なし）

テンプレートリテラル（ES2015）

バッククォート（`）を使ったテンプレートリテラルは、文字列内に変数を埋め込んだり、複数行の文字列を簡単に扱えます：

const name = '太郎';
const age = 30;

// 変数の埋め込み
const greeting = `こんにちは、${name}さん！あなたは${age}歳ですね。`;

// 複数行の文字列
const multiline = `これは
複数行の
文字列です。`;

テンプレートリテラルは利用頻度の高い機能で、文字列操作を簡潔に行えます11。

クラスと継承（ES2015）

ES2015からクラス構文が導入され、オブジェクト指向プログラミングが簡単になりました：

class Person {
  constructor(firstName, lastName) {
    this.firstName = firstName;
    this.lastName = lastName;
  }
  
  fullName() {
    return `${this.lastName} ${this.firstName}`;
  }
  
  static createAnonymous() {
    return new Person('名無し', '匿名');
  }
}

const person1 = new Person('太郎', '山田');
console.log(person1.fullName()); // '山田 太郎'

// 継承
class Employee extends Person {
  constructor(firstName, lastName, position) {
    super(firstName, lastName);
    this.position = position;
  }
  
  introduce() {
    return `${this.fullName()}は${this.position}として働いています。`;
  }
}

const employee1 = new Employee('花子', '鈴木', 'エンジニア');
console.log(employee1.introduce()); // '鈴木 花子はエンジニアとして働いています。'

非同期処理

JavaScriptの非同期処理には複数の方法があります：

コールバック関数

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

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

Promise（ES2015）

function fetchData() {
  return new Promise((resolve, reject) => {
    setTimeout(() => {
      const success = true;
      if (success) {
        resolve({ name: 'データ' });
      } else {
        reject(new Error('データの取得に失敗しました'));
      }
    }, 1000);
  });
}

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

async/await（ES2017）

async function getData() {
  try {
    const data = await fetchData(); // fetchDataはPromiseを返す関数
    console.log(data); // { name: 'データ' }
  } catch (error) {
    console.error(error);
  }
}

getData();

async/awaitは、Promiseをより読みやすく扱うための構文糖です7。

モジュール（ES2015）

ES2015からモジュールシステムが標準化され、コードの分割と再利用が容易になりました：

// math.js
export function add(a, b) {
  return a + b;
}

export function subtract(a, b) {
  return a - b;
}

export const PI = 3.14159;

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

console.log(add(5, 3)); // 8
console.log(subtract(10, 4)); // 6
console.log(PI); // 3.14159

// デフォルトエクスポート/インポート
// util.js
export default function format(string) {
  return string.trim();
}

// main.js
import format from './util.js';
console.log(format('  hello  ')); // 'hello'

分割代入（ES2015）

分割代入は配列やオブジェクトからデータを簡単に取り出せる機能です：

// 配列の分割代入
const numbers = [1, 2, 3, 4, 5];
const [first, second, ...rest] = numbers;
console.log(first); // 1
console.log(second); // 2
console.log(rest); // [3, 4, 5]

// オブジェクトの分割代入
const person = { name: '太郎', age: 30, job: 'エンジニア' };
const { name, age, job: profession } = person;
console.log(name); // '太郎'
console.log(age); // 30
console.log(profession); // 'エンジニア'

まとめ

JavaScriptは非常に多機能なプログラミング言語で、基本的な文法要素から高度な機能まで幅広く提供しています。このガイドでは基本的な構文から応用的な内容まで網羅しましたが、JavaScriptは継続的に進化しているため、最新のECMAScript仕様を定期的にチェックすることをお勧めします。

JavaScriptをマスターするには、実際にコードを書いて実験することが最も効果的です。エラーを経験し、デバッグする過程でより深い理解が得られるでしょう。また、モダンなJavaScript フレームワーク（React、Vue、Angularなど）も学習することで、実践的なスキルを身につけることができます。

JavaScriptを学ぶための次のステップ

基本的な文法を理解したら、実際のプロジェクトを作成してみる
デベロッパーツールを使用してコードをデバッグする方法を学ぶ
JavaScriptのデザインパターンを学習する
フレームワークやライブラリ（React、Vue.js、Node.jsなど）を探索する
ECMAScriptの最新機能をフォローする

JavaScriptの学習は継続的なプロセスであり、実践と経験を通じてスキルを向上させていくことが大切です。

Citations:

Perplexity の Eliot より: pplx.ai/share

以上の内容はhttps://kafkafinancialgroup.hatenablog.com/entry/2025/03/27/082710より取得しました。
このページはhttp://font.textar.tv/のウェブフォントを使用してます

不具合報告/要望等はこちらへお願いします。
モバイルやる夫Viewer Ver0.14