ページの作成
親となるページを選択してください。
親ページに紐づくページを子ページといいます。
例： 親=スポーツ, 子1=サッカー, 子2=野球
子ページを親ページとして更に子ページを作成することも可能です。
例： 親=サッカー, 子=サッカーのルール
親ページはいつでも変更することが可能なのでとりあえず作ってみましょう！
| この記事の要点 |
|
JavaScript とは
JavaScript (JS) は、Web ブラウザの動的な挙動を実現するために 1995 年に Brendan Eich が Netscape Navigator 向けに 10 日間で開発した言語です。当初は Java の人気にあやかった命名で、Java とは無関係です。
現在は ECMA International が ECMAScript として標準化し、毎年 6 月に新バージョン（ES2015、ES2016...）がリリースされます。Node.js の登場以降、サーバーサイド・モバイル・デスクトップアプリ（Electron）まで広がる汎用言語となりました。
ECMAScript のバージョン進化
| バージョン | 年 | 主な追加機能 |
|---|---|---|
| ES5 | 2009 | strict mode、JSON、Array.forEach/map |
| ES6 (ES2015) | 2015 | let/const、アロー関数、Class、Promise、Module、Map/Set、テンプレートリテラル |
| ES2016 | 2016 | Array.includes、** 演算子 |
| ES2017 | 2017 | async / await、Object.values/entries |
| ES2018 | 2018 | spread/rest for objects、非同期 iteration |
| ES2019 | 2019 | Array.flat、Object.fromEntries、try-catch optional binding |
| ES2020 | 2020 | ?.（optional chaining）、??（nullish coalescing）、BigInt |
| ES2021 | 2021 | String.replaceAll、Promise.any、論理代入演算子 |
| ES2022 | 2022 | top-level await、Class fields、at() |
| ES2023 | 2023 | Array.findLast、配列の non-mutating メソッド |
モダン構文（ES6+）の例
// let / const（var は使わない）
const PI = 3.14;
let count = 0;
count++;
// テンプレートリテラル
const name = "JavaScript";
console.log(`Hello, ${name}!`);
// アロー関数
const add = (a, b) => a + b;
const square = x => x * x;
// 分割代入
const user = { name: "Alice", age: 30 };
const { name: userName, age } = user;
const [first, second, ...rest] = [1, 2, 3, 4, 5];
// スプレッド構文
const arr1 = [1, 2, 3];
const arr2 = [...arr1, 4, 5];
const merged = { ...user, role: "admin" };
// クラス
class Animal {
constructor(name) { this.name = name; }
speak() { return `${this.name} makes a sound`; }
}
class Dog extends Animal {
speak() { return `${this.name} barks`; }
}
// Promise / async-await
async function fetchUser(id) {
try {
const res = await fetch(`/api/users/${id}`);
if (!res.ok) throw new Error("Network error");
return await res.json();
} catch (err) {
console.error(err);
}
}
// Optional chaining と Nullish coalescing
const city = user?.address?.city ?? "Unknown";
// 配列メソッド（イミュータブル）
const nums = [1, 2, 3, 4, 5];
const doubled = nums.map(n => n * 2);
const evens = nums.filter(n => n % 2 === 0);
const sum = nums.reduce((acc, n) => acc + n, 0);
// モジュール（ESM）
// utils.js
export const greet = name => `Hello ${name}`;
export default function add(a, b) { return a + b; }
// main.js
import add, { greet } from './utils.js';