JavaScript
JavaScript | 1 日 30 分 × 7 日アプリ学習超初級編：文字を表示するアプリ
JavaScript
JavaScript JavaScript | 基礎構文：オブジェクト － Object.keys / values / entries
Object.keys / Object.values / Object.entries は「オブジェクトを配列に変換する道具」オブジェクトは「名前付きの引き出しがたくさんあるタンス」でした。Obje...
JavaScript JavaScript | 基礎構文：オブジェクト － in 演算子
in 演算子って何者？in 演算子は、「このオブジェクトに、このプロパティ名は“存在しているか？”」を調べるための道具です。ポイントは、「値が何か」ではなく「その名前のプロパティがあるかどうか」だけを...
JavaScript JavaScript | 基礎構文：オブジェクト － Freeze（凍結）
Object.freeze は「オブジェクトを氷漬けにする魔法」Object.freeze は、「このオブジェクト、もう二度と書き換えられないようにしたい」というときに使う機能です。一言でいうと、その...
JavaScript JavaScript | 基礎構文：オブジェクト － スプレッド構文による浅いコピー
スプレッド構文による「浅いコピー」って何者？スプレッド構文 { ...obj } は、「既存のオブジェクトの中身を“広げて”、新しいオブジェクトを作る書き方」 です。そしてここで超重要なのが、このコピ...
JavaScript JavaScript | 基礎構文：オブジェクト － オブジェクトのコピー
オブジェクトのコピーって何者？「オブジェクトのコピー」は、「元のオブジェクトとは独立した“もう一つのオブジェクト”を作ること」 です。ここで一番ハマりやすい落とし穴が、const original =...
JavaScript JavaScript | 基礎構文：オブジェクト － メソッド
メソッドって何者？メソッドは、「オブジェクトにくっついている関数」 です。オブジェクトが「データ（状態）」を持っているとしたら、メソッドはそのデータに対して「できること（振る舞い）」を表します。人で言...
JavaScript JavaScript | 基礎構文：オブジェクト － プロパティアクセス（. と []）
「プロパティアクセス」は“タンスの引き出しを開ける”動作オブジェクトは「名前付きの引き出しがたくさんあるタンス」のようなものです。プロパティアクセスは、その引き出しを「開ける」「中身を入れる」ための書...
JavaScript JavaScript | 基礎構文：オブジェクト － プロパティの削除（delete）
delete は「引き出しごと取り外す」イメージオブジェクトは「名前付きの引き出しがたくさんあるタンス」のようなものです。delete は、その引き出し（プロパティ）を“丸ごと取り外す”ための演算子 ...
JavaScript JavaScript | 基礎構文：オブジェクト － プロパティの追加
「プロパティの追加」は“あとから引き出しを増やす”イメージオブジェクトは「名前付きの引き出しがたくさんあるタンス」のようなものです。プロパティの追加は、「そのタンスにあとから新しい引き出しを増やす」イ...
JavaScript JavaScript | 基礎構文：オブジェクト － オブジェクトリテラル
オブジェクトリテラルって何者？オブジェクトリテラルは、「波カッコ {} を使って、その場で“まとまりのあるデータ”を作る書き方」 です。人間の世界でいうと、「名前・年齢・住所がセットになった“1人の人...
JavaScript JavaScript | 基礎構文：スコープ・実行コンテキスト － 変数解決の仕組み（順序）
「変数解決の仕組み」って何を指しているかここでいう「変数解決の仕組み（順序）」は、「ある名前（変数名）を書いたときに、JavaScript が“どの値を使うか”をどう決めているかという話です。同じ名前...
JavaScript JavaScript | 基礎構文：スコープ・実行コンテキスト － TDZ（Temporal Dead Zone）
TDZ（Temporal Dead Zone）って何者？TDZ は「変数が“まだ使えない時間帯”のことです。もっと砕くと、let / const で宣言された変数は、「スコープに入った瞬間から宣言行ま...
JavaScript JavaScript | 基礎構文：スコープ・実行コンテキスト － this の基礎
this は「今、誰のことを指しているか」を表すキーワードthis は、「このコードを“実行している主体（オブジェクト）”は誰か？」を指す特別なキーワードです。よく「自分自身」と説明されますが、Jav...
JavaScript JavaScript | 基礎構文：スコープ・実行コンテキスト － 関数スコープ
関数スコープって何者？関数スコープは、「その関数の中だけで有効な“専用の部屋”」 のことです。関数の中で宣言した変数や関数は、基本的にその関数の外からは見えません。「関数ごとに、自分だけの小さな世界を...
JavaScript JavaScript | 基礎構文：スコープ・実行コンテキスト － 変数のシャドーイング
変数のシャドーイングって何者？変数のシャドーイングは、「内側のスコープで同じ名前の変数を宣言して、外側の変数を“影に隠してしまう”こと」 です。“shadow（影）”という名前の通り、外側にある同じ名...
JavaScript JavaScript | 基礎構文：スコープ・実行コンテキスト － クロージャの基礎（応用はまだ不要）
クロージャって何者？クロージャは、「外側のスコープの変数を“覚えたまま”生きている関数」 です。もう少しだけ丁寧に言うと、ある関数の中で定義された関数が、その外側の変数にアクセスし続けられる仕組みこれ...
JavaScript JavaScript | 基礎構文：スコープ・実行コンテキスト － レキシカルスコープ
レキシカルスコープって何者？レキシカルスコープは、「変数がどこから見えるかは、“コードが書かれている場所”で決まる」というルールのことです。もう少し砕くと、「どの変数が使えるか」は「どこでその関数を“...
JavaScript JavaScript | 基礎構文：スコープ・実行コンテキスト － ブロックスコープ
ブロックスコープって何者？ブロックスコープは、「{}（ブロック）の中だけで有効な“ミニスコープ”」 のことです。if、for、while、単なる {} など、波カッコで囲まれた範囲ごとに「その中だけで...
JavaScript JavaScript | 基礎構文：スコープ・実行コンテキスト － ローカルスコープ
ローカルスコープって何者？ローカルスコープは、「その中だけで有効な“自分だけの部屋”みたいな領域」 です。グローバルスコープが「家全体」だとしたら、ローカルスコープは「自分の部屋」。部屋の中のもの（変...
JavaScript JavaScript | 基礎構文：スコープ・実行コンテキスト － グローバルスコープ
スコープってそもそも何？その中の「グローバルスコープ」とはまず前提として、スコープとは「変数や関数が“どこから見えるか（使えるか）”の範囲 のことです。その中で「グローバルスコープ」は、「プログラム全...
JavaScript JavaScript | 基礎構文：関数 – コールバック関数の基礎
コールバック関数って何者？コールバック関数は、「あとで呼び出してもらうために“渡しておく関数”」 です。ふつうは「関数を“呼び出す”側」と「呼び出される側」がはっきり分かれていますが、コールバックでは...
JavaScript JavaScript | 基礎構文：関数 – 早期 return
早期 return を一言でいうと早期 return（early return）は、「ダメな条件のときは、関数の途中でさっさと抜けてしまう書き方」 です。これを意識して書けるようになると、if が何重...
JavaScript JavaScript | 基礎構文：関数 – 戻り値
戻り値ってそもそも何者？戻り値は、「関数が“仕事を終えたあとに外に渡す結果”」 です。関数は「何かをして終わり」のときもあれば、「計算して、その結果を返してほしい」ときもあります。その「結果」を外に返...
JavaScript JavaScript | 基礎構文：関数 – デフォルト引数
デフォルト引数って何者？デフォルト引数は、「引数が渡されなかったときに使う“あらかじめ決めておく値”」 です。「この引数は省略されることもあるけど、そのときはこの値を使ってね」という“保険”を関数側で...
JavaScript JavaScript | 基礎構文：関数 – 可変長引数（…args）
可変長引数って何者？可変長引数（かへんちょうひきすう）は、「引数が何個来るか分からないけど、とりあえず全部受け取りたい」 ときに使う仕組みです。JavaScript では ...args のように、引...
JavaScript JavaScript | 基礎構文：関数 – アロー関数
アロー関数って何者？アロー関数は、「関数をもっと短く・スッキリ書くための新しい記法」 です。見た目はこういうやつです。const greet = (name) => { console.log("こん...
JavaScript JavaScript | 基礎構文：関数 – 引数
引数ってそもそも何者？引数（ひきすう）は、「関数に渡す“入力”」 です。関数は「処理のレシピ」ですが、毎回まったく同じことしかしないと不便ですよね。「誰に挨拶するか」「いくつ足すか」「どのメッセージを...
JavaScript JavaScript | 基礎構文：関数 – 関数式
関数式って何者？関数式は、「関数そのものを“値”として扱い、変数に代入したり、他の関数に渡したりする書き方」 です。これだけだと少し抽象的なので、まずは「関数宣言」との違いから見ていきます。関数宣言と...
JavaScript JavaScript | 基礎構文：関数 – 関数宣言
関数宣言とは何か関数宣言とは「関数を定義するための基本的な書き方」のことです。JavaScript では function キーワードを使って関数を宣言します。宣言した関数はプログラムのどこからでも呼...
JavaScript JavaScript | 基礎構文：関数 – 関数定義
関数ってそもそも何者？関数は、「処理に名前をつけて、あとから何度でも呼び出せるようにしたもの」 です。同じような処理を何回も書くのはダルいし、ミスの元です。そこで「この処理に名前をつけておいて、必要な...
JavaScript JavaScript | 基礎構文：ループ – ループ vs 高階関数（比較だけ）
ループと高階関数の違いとはプログラミングでは「繰り返し処理」を書く方法として ループ構文（for, while など） と 高階関数（map, filter, forEach など） の2つがあります...
JavaScript JavaScript | 基礎構文：ループ – for…of
for...of 文とは何かfor...of 文は、配列や文字列など「繰り返し可能なデータ（イテラブル）」の要素を順番に取り出すためのループ構文です。インデックス番号を意識せずに「中身だけ」を扱えるの...
JavaScript JavaScript | 基礎構文：ループ – for…in
for...in 文とは何かfor...in 文は、オブジェクトのプロパティ名（キー）を順番に取り出すためのループ構文です。配列や文字列にも使えますが、基本的には「オブジェクトの中身を調べる」場面でよ...
JavaScript JavaScript | 基礎構文：ループ – ループの最適化
ループの最適化とは何かループの最適化とは、「同じ結果を保ったまま、ループの中で行う仕事量を減らす」工夫のことです。1回の処理が少し重くても、ループで何千・何万回と繰り返されると全体の速度に大きく響きま...
JavaScript JavaScript | 基礎構文：ループ – ネストしたループ
ネストしたループとは何か「ネストしたループ」とは、ループの中にさらにループを書くことです。入れ子構造になっているため「ネスト」と呼ばれます。これを使うと、二重・三重の繰り返し処理ができ、表や配列の組み...
JavaScript JavaScript | 基礎構文：ループ – break
break を一言でいうとbreak は、「今やっているループ（繰り返し）を、その場で強制終了する」ためのキーワードです。for や while の途中で「もうこれ以上回さなくていい」と判断した瞬間に...
JavaScript JavaScript | 基礎構文：ループ – continue
continue を一言でいうとcontinue は、ループの中で「この周（イテレーション）の残りはスキップして、すぐ次の周に進む」ためのキーワードです。ループ自体をやめるわけではありません。「この回...
JavaScript JavaScript | 基礎構文：ループ – do…while 文
do…while 文を一言でいうとdo...while 文は、「必ず 1 回は実行してから、“まだ続ける？” と後で確認するループ」 です。普通の while 文は「最初に条件をチェックして、OK な...
JavaScript JavaScript | 基礎構文：ループ – while 文
while 文を一言でいうとwhile 文は、「ある条件が true のあいだ、ずっと同じ処理を繰り返す仕組み」 です。for 文は「何回回すか」を自分で設計するイメージでしたが、while 文は「こ...
JavaScript JavaScript | 基礎構文：ループ – for 文
for 文を一言でいうとfor 文は、「同じような処理を、決まった回数だけ繰り返すための仕組み」です。たとえば「1〜10 までの数字を順番に表示したい」「配列の中身を先頭から順に処理したい」といったと...
JavaScript JavaScript | 基礎構文：条件分岐 – ガード節（早期 return）
ガード節（早期 return）を一言でいうとガード節は、「ダメな条件を先に弾いて、良いパターンだけを最後にスッキリ書くための書き方」 です。関数の最初で、「この条件なら、ここで終わり（return）」...
JavaScript JavaScript | 基礎構文：条件分岐 – 条件の分解
条件の分解を一言でいうと「条件の分解」は、“ごちゃごちゃした if の条件を、意味のある小さな塊に分けて整理すること” です。1 行でなんとか書けるけど、読むときに「うっ…」となる長い条件自分で書いた...
JavaScript JavaScript | 基礎構文：条件分岐 – 複雑な条件式
複雑な条件式を一言でいうと「複雑な条件式」は、「いくつかの条件を組み合わせて “このときだけ true にしたい” を表現した式」 です。例えば、「ログインしていて、かつ管理者」「点数が 70 以上 ...
JavaScript JavaScript | 基礎構文：条件分岐 – default
default を一言でいうとdefault は、switch 文の中で使う 「どの case にも当てはまらなかったときの、最後の受け皿」 です。if 文でいうと else にあたります。「値が A...
JavaScript JavaScript | 基礎構文：条件分岐 – break の役割
break を一言でいうとbreak は、「いま実行中の switch 文 や ループ（for / while）を、その場で“ブチッ”と抜けるためのキーワード」 です。今回のテーマは「条件分岐」なので...
JavaScript JavaScript | 基礎構文：条件分岐 – switch 文の基本
switch 文を一言でいうとswitch 文は、「1つの値に対して、“いくつもの候補”の中からどの処理をするか選ぶための条件分岐」 です。同じ変数を何度も if (x === "A") ... el...
JavaScript JavaScript | 基礎構文：条件分岐 – ネストした条件
「ネストした条件」を一言でいうとネストした条件（ネストした if 文）は、「ある条件の中で、さらに条件を分けたいときに、if の中に if を入れ子にする書き方」 です。日本語にすると、もし A なら...
JavaScript JavaScript | 基礎構文：条件分岐 – else
else を一言でいうとelse は、「if の条件が成り立たなかったときに実行する“もう一方の処理”」を書くためのキーワードです。日本語で言うと、「もし条件を満たしていれば A をする。そうでなけれ...
JavaScript JavaScript | 基礎構文：条件分岐 – else if
else if を一言でいうとelse if は、「if がダメだったときに、別の条件を順番に試していくためのもの」 です。日本語にすると、もし 条件A なら A の処理そうでなくて、もし 条件B な...
JavaScript JavaScript | 基礎構文：条件分岐 – if 文の基本
if 文を一言でいうとif 文は、「ある条件が成り立つときだけ、特定の処理を実行するための文」です。日本語にすると、もし（条件）が成り立つなら、この処理をしなさいという意味になります。JavaScri...
JavaScript JavaScript | 基礎構文：比較・論理 – 三項演算子
三項演算子を一言でいうと三項演算子（さんこうえんざんし）は、「if ～ else を 1 行で書ける “条件付きの値” の式」 です。書き方はこの形です。条件式 ? 条件がtrueのときの値 : 条件...
JavaScript JavaScript | 基礎構文：比較・論理 – falsy / truthy
falsy / truthy を一言でいうとJavaScript の falsy / truthy は、「if 文などで、その値が “偽っぽい” か “真っぽい” か」 を表す言葉です。if (値) ...
JavaScript JavaScript | 基礎構文：比較・論理 – 真偽値への型変換
真偽値への型変換を一言でいうとJavaScript の「真偽値への型変換」は、数値・文字列・オブジェクトなど “何でも”、if 文などの条件として評価するときに true / false に読み替える...
JavaScript JavaScript | 基礎構文：比較・論理 – 論理演算子の優先順位
論理演算子の「優先順位」を一言でいうと論理演算子の優先順位は、「!、&&、|| が混ざっているとき、どの順番で計算されるかのルール」 です。JavaScript では基本的に!（NOT）→ &&（AN...
JavaScript JavaScript | 基礎構文：比較・論理 – NOT
論理 NOT を一言でいうと論理 NOT（ノット）は、「true を false に、false を true にひっくり返す演算子」 です。記号は !（びっくりマーク）を使います。!true → f...
JavaScript JavaScript | 基礎構文：比較・論理 – 論理 OR
論理 OR を一言でいうと論理 OR（オア）は、「条件 A または 条件 B のどちらか一方でも満たされていれば OK（true）」にする演算子 です。記号は ||（縦棒2つ）を使います。「A または...
JavaScript JavaScript | 基礎構文：比較・論理 – 論理 AND
論理 AND を一言でいうと論理 AND（アンド）は、「条件 A も条件 B も、どちらも満たされているときだけ OK（true）にする」ための演算子 です。記号は &&（アンパサンド2つ）を使います...
JavaScript JavaScript | 基礎構文：比較・論理 – 不等号
不等号を一言でいうと「不等号（ふとうごう）」は、2つの値の「大小関係」を比べて、結果を true / false（真偽値）で返す記号 です。数学でおなじみの> より大きい< より小さい>= 以上<= ...
JavaScript JavaScript | 基礎構文：比較・論理 – == と === の違い
== と === の違いを一言でいうと== と === の一番大事な違いは、これだけです。== … 型を「勝手に変換」してから比較する（ゆるい比較）=== … 型も値も「そのまま」比べる（厳密な比較）...
JavaScript JavaScript | 基礎構文：比較・論理 – 比較演算子（> < == ===）
比較演算子を一言でいうと比較演算子は、「2つの値を比べて、その結果を true / false（真偽値）で返すための記号」 です。JavaScript でよく使うのは主にこのあたりです。> より大きい...