CODE ATLAS / 文法辞典
JavaScriptの書き方
よく使う文法・タグ・操作を、短い例で。50項目から探せます。
50 / 50項目
値と変数
名前を付けておくと、値を何度も使えます。
app.js
const name = "海";
console.log(name);条件分岐
条件によって、することを変えます。
app.js
const age = 20;
if (age >= 18) {
console.log("18歳以上です");
} else {
console.log("18歳未満です");
}繰り返し
同じ処理を、データの数だけ行います。
app.js
for (let i = 1; i <= 3; i++) {
console.log(i);
}関数
ひとまとまりの処理に、名前を付けます。
app.js
function add(a, b) {
return a + b;
}
console.log(add(2, 3));配列とオブジェクト
一覧と、情報のまとまりを扱います。
app.js
const fruits = ["りんご", "みかん"];
console.log(fruits[0]);画面の要素を変える
HTMLの要素を選んで、表示する文字を変えます。
app.js
const text = document.querySelector("p");
text.textContent = "こんにちは";クリックに反応する
操作をきっかけに、処理を動かします。
app.js
const button = document.querySelector("button");
button.addEventListener("click", function () {
document.querySelector("p").textContent = "押しました";
});コメント
1行や複数行のメモを書く。
app.js
// 1行のメモ
/* 複数行にも使えるメモ */let・再代入
後で値を変える変数を作る。
app.js
let count = 0;
count = count + 1;計算・代入
足し算や余りを計算する。
app.js
let total = 10 + 3;
total += 2;
console.log(10 % 3); // 1比較・論理演算
等しい、より大きい、両方成立を調べる。
app.js
const age = 20;
console.log(age === 20);
console.log(age >= 18 && age < 65);テンプレート文字列
文章に値を埋め込む。
app.js
const name = "海";
console.log(`こんにちは、${name}さん`);文字列の操作
空白除去、分割、含まれるかの確認。
app.js
const text = " apple,orange ";
console.log(text.trim());
console.log(text.split(","));
console.log(text.includes("apple"));文字列の切り出し・置換
一部分を取り出し、文字を置き換える。
app.js
console.log("hello".slice(0, 2)); // he
console.log("hello".replace("h", "H"));型変換・typeof
数値や文字列へ変換し、型を調べる。
app.js
console.log(Number("20") + 1);
console.log(String(20));
console.log(typeof 20);null・undefined・初期値
値がない場合の代わりを用意する。
app.js
const name = null;
console.log(name ?? "名無し");オプショナルチェーン
値がない途中の項目でも安全に読む。
app.js
const user = {};
console.log(user.profile?.name); // undefined三項演算子
条件に応じた値を選ぶ。
app.js
const age = 20;
const label = age >= 18 ? "成人" : "未成年";else if
複数の条件を順番に調べる。
app.js
const score = 70;
if (score >= 80) {
console.log("優秀");
} else if (score >= 60) {
console.log("合格");
} else {
console.log("再挑戦");
}switch
値ごとに処理を分ける。
app.js
const color = "red";
switch (color) {
case "red": console.log("赤"); break;
default: console.log("その他");
}while
条件が成立している間、繰り返す。
app.js
let count = 0;
while (count < 3) {
console.log(count);
count++;
}for...of・break・continue
一覧を順に処理し、スキップや終了をする。
app.js
for (const n of [1, 2, 3, 4]) {
if (n === 2) continue;
if (n === 4) break;
console.log(n);
}アロー関数
関数を短く書く。
app.js
const add = (a, b) => a + b;
console.log(add(2, 3));引数の初期値
省略された引数に値を用意する。
app.js
function greet(name = "ゲスト") {
return "こんにちは、" + name;
}
console.log(greet());可変長引数
複数の引数を配列で受け取る。
app.js
function show(...names) {
console.log(names);
}
show("海", "空");追加・削除・件数
末尾への追加、削除、長さの確認。
app.js
const items = ["りんご"];
items.push("みかん");
console.log(items.length);
items.pop();map
配列の各値を変えて新しい配列を作る。
app.js
const prices = [100, 200];
const doubled = prices.map(price => price * 2);filter
条件に合う値だけを残す。
app.js
const ages = [15, 20, 30];
const adults = ages.filter(age => age >= 18);find・includes
最初の一致や値の存在を確認する。
app.js
const nums = [1, 2, 3];
console.log(nums.find(n => n > 1));
console.log(nums.includes(2));forEach・join
各値を処理し、一覧を文字列にする。
app.js
const names = ["海", "空"];
names.forEach(name => console.log(name));
console.log(names.join("、"));reduce
配列の値を一つにまとめる。
app.js
const nums = [1, 2, 3];
const total = nums.reduce((sum, n) => sum + n, 0);sort
値を並べ替える。
app.js
const nums = [30, 2, 10];
nums.sort((a, b) => a - b);sortは元の配列を変更します。数値では比較関数を渡します。
オブジェクトの読み書き
名前付きの値を取り出し、変更する。
app.js
const user = { name: "海", age: 20 };
user.age = 21;
console.log(user["name"]);分割代入
配列やオブジェクトの値に名前を付ける。
app.js
const { name } = { name: "海", age: 20 };
const [first] = ["りんご", "みかん"];スプレッド
配列やオブジェクトの中身を広げる。
app.js
const items = [1, 2];
const next = [...items, 3];
const user = { name: "海" };
const updated = { ...user, age: 20 };Object.keys・values・entries
項目名、値、組み合わせを取り出す。
app.js
const user = { name: "海" };
console.log(Object.keys(user));
console.log(Object.values(user));
console.log(Object.entries(user));要素をまとめて選ぶ
複数の要素を順番に処理する。
app.js
document.querySelectorAll("p").forEach(p => {
p.textContent = "こんにちは";
});クラス・属性・入力値
見た目の目印や入力された値を扱う。
app.js
const input = document.querySelector("input");
console.log(input.value);
input.classList.add("active");
input.setAttribute("placeholder", "名前");要素の追加・削除
新しい要素を作って画面に置く。
app.js
const p = document.createElement("p");
p.textContent = "こんにちは";
document.body.append(p);
p.remove();イベントの情報・送信停止
標準の動作を止める。
app.js
const form = document.querySelector("form");
form.addEventListener("submit", event => {
event.preventDefault();
console.log("送信を止めました");
});try・catch・throw
エラーを発生させ、受け止める。
app.js
try {
throw new Error("入力を確認してください");
} catch (error) {
console.log(error.message);
}Promise・async・await
完了を待って次へ進む。
app.js
async function show() {
const value = await Promise.resolve("完了");
console.log(value);
}
show();fetch
URLからデータを取得する。
app.js
async function load() {
const response = await fetch("/data.json");
if (!response.ok) throw new Error("取得失敗");
const data = await response.json();
console.log(data);
}
load().catch(error => console.log(error.message));/data.jsonを用意したサイトで実行します。
JSON
オブジェクトとJSON文字列を変換する。
app.js
const text = JSON.stringify({ name: "海" });
const user = JSON.parse(text);localStorage
このブラウザーに文字列を保存する。
app.js
localStorage.setItem("name", "海");
console.log(localStorage.getItem("name"));
localStorage.removeItem("name");setTimeout・setInterval
後で実行する、定期的に実行する。
app.js
setTimeout(() => console.log("1秒後"), 1000);
const timer = setInterval(() => console.log("定期実行"), 1000);
clearInterval(timer);import・export
別ファイルの関数を使う。
app.js
// math.js
export function add(a, b) { return a + b; }
// app.js
import { add } from "./math.js";HTMLでは<script type="module" src="app.js"></script>で読み込みます。
class
データと操作を一つにまとめる。
app.js
class User {
constructor(name) { this.name = name; }
greet() { return "こんにちは、" + this.name; }
}
const user = new User("海");Math・Date
計算用の機能と日付を扱う。
app.js
console.log(Math.round(1.6));
console.log(Math.max(2, 5));
console.log(new Date().getFullYear());正規表現
文字のパターンに合うか調べる。
app.js
const pattern = /^[0-9]+$/;
console.log(pattern.test("123"));