MySQL
MySQL | SQLite経験者向け、30日で習得するMySQL：実務SQL力 － Day12 ストアドプロシージャ②
JavaScript
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 でよく使うのは主にこのあたりです。> より大きい...
JavaScript JavaScript | 基礎構文：数値・演算 – 数値変換
数値変換を一言でいうとJavaScript の「数値変換」は、文字列や真偽値などの値を、number 型として計算に使える形にすること です。特に Web では、ユーザー入力・フォーム・URL パラメ...
JavaScript JavaScript | 基礎構文：数値・演算 – parseInt / parseFloat
parseInt / parseFloat を一言でいうとparseInt / parseFloat は、「文字列の“先頭から読める数字の部分”を数値として取り出す関数」 です。parseInt("1...
JavaScript JavaScript | 基礎構文：数値・演算 – isNaN
isNaN を一言でいうとisNaN は、「その値を数値として扱えるか？ 扱えないか？」をざっくり判定するための関数 です。isNaN(値) がtrue → 数値として扱えない（＝NaN 相当）fal...
JavaScript JavaScript | 基礎構文：数値・演算 – NaN
NaN を一言でいうとNaN（ナン）は「Number（数値）型なんだけど、“正しい数ではない” という特別な値」 です。名前は Not a Number の略ですが、「数値じゃない」と言いつつ、型とし...
JavaScript JavaScript | 基礎構文：数値・演算 – 指数表現
指数表現を一言でいうとJavaScript の「指数表現」は、とても大きい数・とても小さい数を、e を使ってコンパクトに書くための書き方 です。数学で見る1.23×1045×10-3みたいなものを、J...
JavaScript JavaScript | 基礎構文：数値・演算 – 乱数
乱数を一言でいうと乱数（らんすう）は、「実行するたびに結果が読めない“ランダムな値”」 のことです。JavaScript では、乱数を作るときにほぼ必ずMath.random()を使います。ここが重要...
JavaScript JavaScript | 基礎構文：数値・演算 – 四捨五入
四捨五入を一言でいうと四捨五入は、「小数のある数値を、キリのいい数（だいたい整数）に“丸める”操作」 です。JavaScript では主にMath.round（四捨五入）Math.floor（切り捨て...
JavaScript JavaScript | 基礎構文：数値・演算 – Math オブジェクト
Math オブジェクトを一言でいうとMath オブジェクトは、「よく使う数学の関数や定数をまとめた“計算ツール箱”」 です。四捨五入したい絶対値をとりたい最大値・最小値を知りたいランダムな数を作りたい...
JavaScript JavaScript | 基礎構文：数値・演算 – インクリメント・デクリメント
インクリメント・デクリメントを一言でいうとインクリメント・デクリメントは、数値を「1 だけ増やす」または「1 だけ減らす」ための専用の記号 です。++ がインクリメント（＋1）-- がデクリメント（−...
JavaScript JavaScript | 基礎構文：数値・演算 – 算術演算子（+ – * / %）
算術演算子を一言でいうと算術演算子（さんじゅつえんざんし）は、数値に対して「足し算・引き算・掛け算・割り算・余り」を行うための記号 です。JavaScript では次の 5 つが基本になります。+ 足...
JavaScript JavaScript | 基礎構文：文字列操作 – トリミング
トリミングを一言でいうとトリミングは、「文字列の前後にくっついている、いらない空白（スペースや改行など）を取り除くこと」 です。ユーザー入力やファイルから読んだ文字列には、よく先頭にスペース行末にスペ...
JavaScript JavaScript | 基礎構文：文字列操作 – 大文字小文字変換
大文字小文字変換を一言でいうと「大文字小文字変換」は、英字の文字列を、全部大文字にしたり、全部小文字にしたりする操作 です。JavaScript では主にtoUpperCase()：全部大文字にするt...
JavaScript JavaScript | 基礎構文：文字列操作 – 結合（concat / +）
文字列の「結合」を一言でいうと文字列の結合は、「バラバラの文字列をつなげて、1つの長い文字列を作ること」 です。JavaScript では主に+ 演算子（"A" + "B"）concat メソッド（"...
JavaScript JavaScript | 基礎構文：文字列操作 – 分割（split）
split を一言でいうとsplit は、「1つの文字列を、区切り文字で“バラして配列にする”メソッド です。「カンマ区切りの文字列を、1つずつに分けたい」「スペースごとに単語に分けたい」「URL を...
JavaScript JavaScript | 基礎構文：文字列操作 – 置換（replace）
replace を一言でいうとreplace は、「文字列の中の一部を、別の文字列に置き換えた“新しい文字列”を返すメソッド」 です。const text = "I like JavaScript";...
JavaScript JavaScript | 基礎構文：文字列操作 – 検索（indexOf / includes）
文字列の「検索」を一言でいうと文字列の検索は、「この文字（文字列）が含まれているか？」「含まれているなら、どの位置にあるか？」を調べることです。JavaScript では、そのために主にindexOf...
JavaScript JavaScript | 基礎構文：文字列操作 – 部分取得（slice / substring）
部分取得を一言でいうと（slice / substring の役割）文字列の「部分だけ」を取り出したいことは、実務でも学習でも山ほど出てきます。先頭3文字だけ欲しい後ろから2文字だけ欲しい5文字目から...
JavaScript JavaScript | 基礎構文：文字列操作 – length
length を一言でいうとlength は、「この文字列の“文字数”はいくつか」を教えてくれるプロパティ です。JavaScript では、文字列に対して 文字列.length と書くだけで、その文...
JavaScript JavaScript | 基礎構文：文字列操作 – エスケープシーケンス
エスケープシーケンスを一言でいうとエスケープシーケンスは、「文字列の中で、そのまま書けない“特殊な意味をもつ文字”を表現するための書き方」 です。例えば、改行したいタブを入れたいダブルクォート " や...
JavaScript JavaScript | 基礎構文：文字列操作 – テンプレートリテラル
テンプレートリテラルを一言でいうとテンプレートリテラルは、「変数や式を、文字列の中にそのまま埋め込める新しい書き方」 です。"こんにちは、" + name + "さん" のように+ でつなぎまくる昔の...
JavaScript JavaScript 逆引き集 | ResizeObserver の利用（DOM サイズ監視）
ResizeObserver の利用（DOM サイズ監視） — new ResizeObserver(cb).observe(el)Web ページで「要素のサイズが変わったら処理をしたい」ときに便利な...
JavaScript JavaScript 逆引き集 | IntersectionObserver の基本
IntersectionObserver の基本 — 要素が見えた時のコールバック利用Web ページで「ある要素が画面に入ったかどうか」を調べたいときに便利なのが IntersectionObserv...
JavaScript JavaScript 逆引き集 | 無限スクロール（IntersectionObserver）
無限スクロール（IntersectionObserver） — const obs = new IntersectionObserver(cb); obs.observe(el)Web ページで「下ま...
JavaScript JavaScript 逆引き集 | ページネーションの実装（オフセット）
ページネーションの実装（オフセット方式） — limit, offset パラメータ利用大量のデータを一度に表示すると重くなるので、ページネーション（ページ分割表示）を使います。初心者は「limit ...
JavaScript JavaScript 逆引き集 | OAuth フローの基本（認可コード）
OAuth フローの基本（認可コード方式） — サーバー・クライアントの連携が必要OAuth は「外部サービスの認証・認可」を安全に行う仕組みです。初心者は「OAuth = 他サービスのアカウントを使...
JavaScript JavaScript 逆引き集 | JWT の検証（Node）
JWT の検証（Node.js） — jwt.verify(token, secret)（jsonwebtoken ライブラリ）Web アプリや API では「ログイン済みかどうか」を確認するために ...
JavaScript JavaScript 逆引き集 | Bearer トークン利用
Bearer トークン利用 — headers: { 'Authorization': 'Bearer ' + token }Web API にアクセスするときに「Bearer トークン認証」を使う場...
JavaScript JavaScript 逆引き集 | Basic 認証ヘッダ
Basic 認証ヘッダ — Authorization: 'Basic ' + btoa(user + ':' + pass)Web API にアクセスするときに「Basic 認証」を使う場合がありま...
JavaScript JavaScript 逆引き集 | CORS の基礎知識（ブラウザ側）
ポイントまとめCORS（Cross-Origin Resource Sharing）は「異なるオリジン（ドメイン・ポート・プロトコル）の間で安全にリソースを共有する仕組み」です。ブラウザの fetch...
JavaScript JavaScript 逆引き集 | CSRF トークンの送信（ヘッダ）
CSRF トークンの送信（ヘッダ） — fetch(url, { headers: { 'X-CSRF-Token': token } })Web アプリでは CSRF（Cross-Site Requ...
JavaScript JavaScript 逆引き集 | 型のランタイムチェック（zod 等）
型のランタイムチェック（Zod ライブラリ） — z.string().parse(x)JavaScript は柔軟ですが「型の間違い」によるバグが起きやすいです。TypeScript を使えばコンパ...
JavaScript JavaScript 逆引き集 | バリデーション（簡易）
バリデーション（簡易） — if (!data.name) throw new Error('name required')プログラムでは「入力データが正しいかどうか」を確認する処理が必要です。これを...
JavaScript JavaScript 逆引き集 | JSON Schema でバリデーション（AJV 等）
JSON Schema でバリデーション（AJV ライブラリ）Web アプリや API では「受け取ったデータが正しい形かどうか」をチェックする必要があります。そこで便利なのが JSON Schema...
JavaScript JavaScript 逆引き集 | multipart/form-data の扱い（FormData）
multipart/form-data の扱い（FormData）Web アプリで「ファイルやフォームデータをサーバーに送る」ときによく使われるのが multipart/form-data です。これ...
JavaScript JavaScript 逆引き集 | ファイルアップロード（fetch, FormData）
ファイルアップロード（fetch + FormData） — const fd = new FormData(); fd.append('file', file); fetch(url, { meth...
JavaScript JavaScript 逆引き集 | 並列 HTTP リクエスト制御（同時 N 件）
並列 HTTP リクエスト制御（同時 N 件） — pMap(arr, fn, { concurrency: 5 })（p-map ライブラリ）Web API を複数呼び出すとき、一度に大量のリクエス...
JavaScript JavaScript 逆引き集 | オブジェクトの配列をグルーピング
オブジェクトの配列をグルーピング — arr.reduce((g,x)=>{(g||=(g=[])).push(x);return g},{})配列の要素を「カテゴリごとにまとめたい」場面はよくありま...
JavaScript JavaScript 逆引き集 | 配列をオブジェクトのマップに変換
配列をオブジェクトのマップに変換 — arr.reduce((m, x) => { m = x; return m; }, {})JavaScript で「配列をオブジェクトに変換」したい場面はよくあ...
JavaScript JavaScript 逆引き集 | コメントアウトのスタイル
コメントアウトのスタイル — // / /* ... */JavaScript では コメントアウトを使って「コードの説明」や「一時的な無効化」を行います。初心者は「// は1行コメント、/* ......
JavaScript JavaScript 逆引き集 | JSDoc でドキュメント注釈
JSDoc でドキュメント注釈 — /** @param {number} x */ function f(x){}JavaScript では JSDoc という「コメントで書くドキュメント注釈」を使...
JavaScript JavaScript 逆引き集 | 型チェックに TypeScript を導入（基本）
型チェックに TypeScript を導入（基本） — tsc --init（設定手順）JavaScript は柔軟ですが「型の間違い」によるバグが起きやすいです。そこで TypeScript を導入...
JavaScript JavaScript 逆引き集 | ESLint / Prettier の導入（品質）
ESLint / Prettier の導入（コード品質向上） — eslint --init（設定手順）JavaScript の開発では コード品質チェック（Lint） と コード整形（Format）...
JavaScript JavaScript 逆引き集 | モジュールトップでの strict（ESM はデフォルト）
モジュールトップでの Strict Mode（ESM はデフォルト）JavaScript には Strict Mode（厳格モード） という「安全にコードを書くためのチェック機能」があります。通常は ...
JavaScript JavaScript 逆引き集 | Strict mode の有効化
Strict mode の有効化 — 'use strict';JavaScript の Strict mode（厳格モード） は「コードの書き方をより厳しくチェックする」ための仕組みです。初心者は「...
JavaScript JavaScript 逆引き集 | 開発時のデバッグ（debugger）
開発時のデバッグ（debugger ステートメント） — debuggerJavaScript には debugger ステートメントという特別な命令があります。初心者は「ここでプログラムを一時停止し...
JavaScript JavaScript 逆引き集 | console.table で配列表現
console.table で配列表現 — console.table(data)JavaScript の console.table は「配列やオブジェクトを表形式で見やすく表示する」ための便利な関...
JavaScript JavaScript 逆引き集 | 性能計測（console.time）
性能計測（console.time / console.timeEnd） — console.time('t'); console.timeEnd('t')JavaScript には 処理時間を計測す...
JavaScript JavaScript 逆引き集 | Proxy でオブジェクト挙動をカスタム
Proxy でオブジェクト挙動をカスタム — new Proxy(obj, { get(target, k) { } })JavaScript の Proxy は「オブジェクトの操作を横取りしてカスタ...
JavaScript JavaScript 逆引き集 | Reflect API（動的操作）
Reflect API（動的操作） — Reflect.get(obj, 'k') / Reflect.set(...)JavaScript の Reflect API は「オブジェクトを動的に操作す...
JavaScript JavaScript 逆引き集 | Symbol を key とするオブジェクトプロパティ
Symbol を key とするオブジェクトプロパティ — obj = 1JavaScript の Symbol は「ユニークな識別子」を作るための型です。オブジェクトのプロパティキーに Symbol...
JavaScript JavaScript 逆引き集 | Symbol を key とするオブジェクトプロパティ
Symbol を key とするオブジェクトプロパティ — obj = 1JavaScript の Symbol は「ユニークな識別子」を作るための型です。オブジェクトのプロパティキーに Symbol...
JavaScript JavaScript 逆引き集 | Symbol の基本
Symbol の基本 — const s = Symbol('desc')JavaScript の Symbol は「一意（ユニーク）な値」を作るための型です。初心者は「他と絶対にかぶらない特別なラベ...
JavaScript JavaScript 逆引き集 | 文字列テンプレートで複数行
文字列テンプレートで複数行 — line1\nline2複数行の文字列は「改行コードを埋め込む方法」と「テンプレートリテラルでそのまま改行を書く方法」の2通りあります。初心者は、まず「\n は改行コー...
JavaScript JavaScript 逆引き集 | 短絡評価（&&/||）を利用した条件実行
短絡評価（&& / ||）を利用した条件実行 — cond && fn()JavaScript の 論理演算子 && と || は「真偽値の判定」だけでなく、短絡評価（ショートサーキット）を利用して「...
JavaScript JavaScript 逆引き集 | 論理演算子で既定値（|| の注意）
論理演算子で既定値（|| の注意） — const v = a || 'def'（'' や 0 も代替される）JavaScript では 論理演算子 || を使って「左側が falsy（falseっぽ...
JavaScript JavaScript 逆引き集 | Nullish coalescing（??）
Nullish coalescing（??） — const v = a ?? 'default'JavaScript の Nullish coalescing 演算子 ?? は「値が null また...
JavaScript JavaScript 逆引き集 | Optional chaining の利用（安全なネスト参照）
Optional chaining の利用（安全なネスト参照） — a?.b()JavaScript の オプショナルチェイニング演算子 ?. は「存在しないかもしれないプロパティや関数を安全に参照す...
JavaScript JavaScript 逆引き集 | 配列の入れ子の安全アクセス（?.）
配列の入れ子の安全アクセス（オプショナルチェイニング ?.） — obj?.a?.bJavaScript の オプショナルチェイニング演算子 ?. は「存在しないかもしれないプロパティに安全にアクセス...
JavaScript JavaScript 逆引き集 | 引数のデフォルト値に関数
引数のデフォルト値に関数 — function f(x = Date.now()) {}JavaScript では 引数のデフォルト値に「関数の呼び出し結果」を指定できます。初心者は「引数が渡されなか...
JavaScript JavaScript 逆引き集 | 可変長引数の扱い
可変長引数の扱い — (...args) => argsJavaScript では 可変長引数（いくつでも引数を受け取れる仕組み）を rest 引数 ...args で書けます。初心者は「渡された引数...
JavaScript JavaScript 逆引き集 | rest 引数と spread 構文
rest 引数と spread 構文 — function f(...args) {} / f(...arr)JavaScript には rest 引数 と spread 構文 という似た書き方があり...
JavaScript JavaScript 逆引き集 | オブジェクトのデフォルト引数
オブジェクトのデフォルト引数 — function f(a = 1, b = {}) {}関数の引数に「値が渡されなかったときの既定値（デフォルト）」を設定できます。初心者は「未指定や undefin...
JavaScript JavaScript 逆引き集 | parseInt/parseFloat の使い方
parseInt / parseFloat の使い方 — parseInt('12', 10)（基数指定）JavaScript では文字列を数値に変換する方法として parseInt と parseF...
JavaScript JavaScript 逆引き集 | 型変換（Number/String/Boolean）
型変換（Number / String / Boolean） — Number('1'), String(1), Boolean(0)JavaScript では値の型を 明示的に変換 するために Nu...
JavaScript JavaScript 逆引き集 | isNaN と Number.isNaN の違い
isNaN と Number.isNaN の違い — Number.isNaN(x) 推奨JavaScript で「値が NaN (Not a Number) かどうか」を判定する方法は2つあります。...
JavaScript JavaScript 逆引き集 | typeof 判定（原始型）
typeof 判定（原始型） — typeof x === 'string'JavaScript の typeof 演算子は「変数や値の型」を文字列で返します。初心者は「この値は文字？数？それとも別の...
JavaScript JavaScript 逆引き集 | instanceof 判定
instanceof 判定 — obj instanceof ClassJavaScript の instanceof 演算子は「あるオブジェクトが特定のクラス（コンストラクタ関数）から生成されたかど...
JavaScript JavaScript 逆引き集 | static メソッド
static メソッド — static build(){}JavaScript の static メソッドは「インスタンスを作らなくてもクラスから直接呼び出せる関数」です。初心者は「クラスの便利関数...
JavaScript JavaScript 逆引き集 | getter/setter（アクセサ）
getter / setter（アクセサ） — get v() {} / set v(x) {}JavaScript の getter / setter は「プロパティにアクセスしたときの動作」を自由...
JavaScript JavaScript 逆引き集 | super の使用
super の使用 — super() / super.method()JavaScript の super は「親クラス（基底クラス）」を呼び出すためのキーワードです。extends で継承したクラ...
JavaScript JavaScript 逆引き集 | extends 継承
extends 継承 — class B extends A {}JavaScript の extends は「クラスの継承」を表します。親クラス（基底クラス）の機能を子クラス（派生クラス）が引き継ぎ...
JavaScript JavaScript 逆引き集 | class 構文
class 構文 — class A { constructor(x){ this.x = x } method(){} }JavaScript の class 構文は、オブジェクト指向プログラミング...
JavaScript JavaScript 逆引き集 | プロトタイプ継承（古典）
プロトタイプ継承（古典） — Child.prototype = Object.create(Parent.prototype)JavaScript には「プロトタイプ継承」という仕組みがあります。こ...
JavaScript JavaScript 逆引き集 | モジュールパターン（名前空間）
モジュールパターン（名前空間） — const My = (()=>{ return { fn(){} } })()JavaScript では昔から「モジュールパターン」という書き方がありました。これ...
JavaScript JavaScript 逆引き集 | 即時実行関数（IIFE）
即時実行関数（IIFE） — (function(){})(); / (() => {})()JavaScript では 即時実行関数 (IIFE: Immediately Invoked Funct...
JavaScript JavaScript 逆引き集 | スコープと var/let/const の違い
スコープと var / let / const の違い — var は関数スコープ、let / const はブロックスコープJavaScript で変数を宣言するときに使うキーワードは var / ...
JavaScript JavaScript 逆引き集 | call/apply/bind
call / apply / bind の基本 — fn.call(ctx, arg1) / fn.apply(ctx, ) / fn.bind(ctx)JavaScript では 関数の呼び出し時に...
JavaScript JavaScript 逆引き集 | this の扱い（関数とアロー）
this の扱い（関数とアロー関数）JavaScript の this は「その関数が呼ばれたときに参照するオブジェクト」を指します。ただし 通常の関数 と アロー関数 では挙動が違うため、初心者が混...
JavaScript JavaScript 逆引き集 | クロージャの基本
クロージャの基本 — function outer(){ let a = 1; return ()=>a++ }JavaScript の クロージャ は「関数が作られたときの変数を覚えていて、あとから...
JavaScript JavaScript 逆引き集 | EventEmitter（Node）
EventEmitter（Node.js） — const e = new EventEmitter(); e.on('x', ()=>{})Node.js には イベント駆動 の仕組みがあり、その中...
JavaScript JavaScript 逆引き集 | fs.readFile（Node）
fs.readFile（Node.js） — const data = fs.readFileSync('a.txt','utf8')Node.js でファイルを読み込むときに使うのが fs モジュー...
JavaScript JavaScript 逆引き集 | Buffer の利用（Node）
Buffer の利用（Node.js） — Buffer.from('text')Node.js には Buffer という特別なオブジェクトがあります。これは「バイナリデータ（生のデータ列）」を扱う...
JavaScript JavaScript 逆引き集 | process.env（環境変数参照）
process.env（環境変数参照） — process.env.NODE_ENV（Node.js）Node.js では 環境変数 を process.env 経由で参照できます。環境変数は「アプリ...
JavaScript JavaScript 逆引き集 | require（CommonJS）
require（CommonJS） — const x = require('x')（Node.js）Node.js では昔から使われている モジュール読み込みの仕組み が CommonJS です。r...
JavaScript JavaScript 逆引き集 | export の基本
export の基本 — export function f(){} / export default ...JavaScript の モジュール では、ファイル内の関数や変数を外部に公開するために ...
JavaScript JavaScript 逆引き集 | 動的 import（コード分割）
動的 import（コード分割） — const mod = await import('./mod.js')JavaScript の 動的 import は「必要なときにだけモジュールを読み込む」仕...
JavaScript JavaScript 逆引き集 | Module（ESM）インポート
Module（ESM）インポート — import fs from 'fs'（環境による）JavaScript には モジュール という仕組みがあり、コードを分割して再利用できます。ESM（ECMAS...
JavaScript JavaScript | 基礎構文：データ型 – typeof 演算子
typeof を一言でいうとtypeof 演算子は、「この値はどんなデータ型なのか？」を文字列で教えてくれる道具 です。実行中のコードの中で、これは数値なのかこれは文字列なのかこれは配列なのかオブジェ...
JavaScript JavaScript | 基礎構文：データ型 – オブジェクトの基本
オブジェクトを一言でいうとオブジェクトは、「ひとまとまりの情報を、“名前付きのペア”で整理して持てる入れ物」 です。人本商品設定など、「何か1つの“もの”に、いくつかの性質（プロパティ）がくっついてい...
JavaScript JavaScript | 基礎構文：データ型 – 配列の基本
配列を一言でいうと配列（Array）は、「同じような種類のデータを、順番つきでまとめて入れておける“箱の列”」 です。1人のユーザー → 1つの値（名前など）なら普通の変数で足りる10人のユーザー →...
JavaScript JavaScript | 基礎構文：データ型 – BigInt
BigInt を一言でいうとBigInt は、「ふつうの Number では正確に扱えないレベルの“超でかい整数”を、安全に扱うためのデータ型」 です。JavaScript の通常の数値（Number...
JavaScript JavaScript | 基礎構文：データ型 – Symbol
まず「Symbol（シンボル）」を一言でいうとSymbol は、「絶対にかぶらない“特別なラベル”を作るためのデータ型」 です。同じ説明を付けて作っても、毎回 必ず違う値 になります。const a ...
JavaScript JavaScript | 基礎構文：データ型 – Undefined
まず「undefined」を一言でいうとundefined は、「“値がまだ決まっていない”ことを表すための特別な値」 です。もう少し噛み砕くと、「変数は“ある”んだけど、中に“ちゃんとした値”がまだ...
JavaScript JavaScript | 基礎構文：データ型 – Null
まず「null」を一言でいうとnull は、「ここには“何もない”ことを、あえてハッキリ示すための特別な値」 です。「まだ値が決まっていない」のか「値がないことをわざと示している」のかこの違いを表現し...
JavaScript JavaScript | 基礎構文：データ型 – Boolean
まず Boolean を一言でいうとBoolean（ブーリアン）は、「真か偽か、2つの状態だけを表すためのデータ型」 です。JavaScript では Boolean 型の値はたった 2つだけです。t...
JavaScript JavaScript | 基礎構文：データ型 – String
まず「String（文字列）」を一言でいうとString（ストリング）は、「文字をならべたデータを扱うための型」 です。文章名前IDメールアドレスURLボタンのラベルなど、「人が読むための情報」はほぼ...
JavaScript JavaScript | 基礎構文：データ型 – Number
JavaScript の Number を一言でいうとJavaScript の Number は「整数も小数もぜんぶまとめて扱う “数字用の型”」です。他の言語だと「int」「float」「doubl...
JavaScript JavaScript | 基礎構文：変数・定数 – 多重代入
多重代入を一言でいうと多重代入（たじゅうだいにゅう）は、「1 行の代入文で、複数の変数にまとめて値を入れる書き方」 のことです。a にも b にも 0 を入れたいx と y に、それぞれ別の値を一気に...
JavaScript JavaScript | 基礎構文：変数・定数 – 宣言と代入の違い
まず「宣言」と「代入」を一言で分ける先にイメージだけハッキリさせます。宣言：「この名前の変数（箱）を使いますよ、とプログラムに伝えること」代入：「その変数（箱）の中に、実際の値を入れること」たとえば、...
JavaScript JavaScript | 基礎構文：変数・定数 – 初期化と未定義
「初期化」と「未定義」を一言でいうとまず言葉のイメージからはっきりさせます。「初期化（しょきか）」は、「変数を作ったタイミングで、最初の値をちゃんと入れてあげること」 です。「未定義（undefine...
JavaScript JavaScript | 基礎構文：変数・定数 – 暗黙的なグローバル
まず「暗黙的なグローバル」を一言でいうと暗黙的なグローバルは、「自分ではグローバル変数を作ったつもりがないのに、“こっそり”グローバル変数が作られてしまう現象」のことです。もっと砕くと、本当は let...
JavaScript JavaScript | 基礎構文：変数・定数 – グローバル変数の扱い
まず「グローバル変数」とは何かグローバル変数は、「プログラムの“どこからでも”読めて・書けてしまう変数」 のことです。もう少し具体的に言うと、どの関数の中にも入っていない場所（ファイルの一番上とか）で...
JavaScript JavaScript | 基礎構文：変数・定数 – ブロックスコープ
まず「ブロックスコープ」を一言でいうとブロックスコープは、「{ ... } のカタマリの中だけで有効な“変数の生息範囲”」 のことです。JavaScript の let と const で宣言した変数...
JavaScript JavaScript | 基礎構文：変数・定数 – 再代入の可否とは
「再代入の可否」を一言でいうと「再代入の可否（さいだいにゅうの かひ）」は、「一度値を入れた変数に、あとから“別の値を入れ直していいかどうか」というルールのことです。もう少しくだいて言うと、一度入れた...
JavaScript JavaScript | 基礎構文：変数・定数 – let と const の違い
まず「共通点」と「一言での違い」let と const は、どちらも 「変数（名前付きの箱）を作るためのキーワード」 です。共通しているのは、ブロックスコープ（{} の中だけ有効）var より新しい書...
JavaScript JavaScript | 基礎構文：変数・定数 – var を使わない理由
まず結論：「新しく書くコードでは var はほぼ使わない」JavaScript には変数宣言が 3 種類あります。varletconstvarletconstJavaScript昔の JavaScri...
JavaScript JavaScript | 基礎構文：変数・定数 – 変数とは何か
まず「変数」をざっくり一言でいうと変数は、「あとで使うために値を入れておく“名前付きの箱”」だと思ってください。数字文字文字列（文章）true / falseオブジェクトや配列など、プログラムの中で扱...
JavaScript JavaScript 逆引き集 | Base64 エンコード／デコード
Base64 エンコード／デコード — btoa(str) / atob(b64)JavaScript には文字列を Base64 形式に変換するための関数が標準で用意されています。Base64 は「...
JavaScript JavaScript 逆引き集 | URL 文字列エンコード／デコード
URL 文字列エンコード／デコード — encodeURIComponent / decodeURIComponentWebアプリでは「URLに文字列を安全に含めたい」場面がよくあります。検索キーワー...
JavaScript JavaScript 逆引き集 | Web Crypto API（ランダム）
Web Crypto API（ランダム値生成） — crypto.getRandomValues(new Uint8Array(16))JavaScript には Web Crypto API という...
JavaScript JavaScript 逆引き集 | Clipboard API（取得）
Clipboard API（取得） — navigator.clipboard.readText().then(t => {})Clipboard API は「クリップボードにある文字列を読み取る」こ...
JavaScript JavaScript 逆引き集 | Clipboard API（コピー）
Clipboard API（コピー） — navigator.clipboard.writeText('text')Clipboard API を使うと、JavaScriptから「クリップボードに文字...
JavaScript JavaScript 逆引き集 | geolocation API（位置取得）
geolocation API（位置取得） — navigator.geolocation.getCurrentPosition(p => {})ブラウザには「現在地を取得する」ための Geoloca...
JavaScript JavaScript 逆引き集 | Navigator.online でオンライン判定
オンライン判定 — navigator.onLineブラウザには「今ネットに接続できているかどうか」を判定するためのプロパティがあります。それが navigator.onLine です。true なら...
JavaScript JavaScript 逆引き集 | SSE（EventSource）受信
SSE（Server-Sent Events）受信 — const es = new EventSource(url); es.onmessage = e => {}SSE (Server-Sent ...
JavaScript JavaScript 逆引き集 | WebSocket 基本接続
WebSocket 基本接続 — const ws = new WebSocket(url); ws.onmessage = e => {}WebSocket は「ブラウザとサーバーが双方向でリアルタ...
JavaScript JavaScript 逆引き集 | canvas.toDataURL で画像取得
Canvas から画像を取得 — canvas.toDataURL('image/png')canvas.toDataURL() は Canvas の内容を画像データ（Base64形式の文字列）に変換...
JavaScript JavaScript 逆引き集 | 画像を Canvas に描画
画像を Canvas に描画 — ctx.drawImage(img, 0, 0)Canvas に画像を描くときの基本は「画像が読み込まれてから drawImage を呼ぶ」こと。img.onload...
JavaScript JavaScript 逆引き集 | Canvas 基本描画
Canvas 基本描画 — const ctx = canvas.getContext('2d'); ctx.fillRect(0,0,100,100)HTML5 の <canvas> は「絵を描くた...
JavaScript JavaScript 逆引き集 | input[type=file] の扱い
input の扱い — const f = input.filesブラウザでユーザーにファイルを選んでもらうときに使うのが <input type="file">。選ばれたファイルは input.fi...
JavaScript JavaScript 逆引き集 | FileReader でローカルファイル読み込み
FileReader でローカルファイル読み込み — const fr = new FileReader(); fr.onload = e => console.log(e.target.result...
JavaScript JavaScript 逆引き集 | ダウンロード（リンク生成）
ダウンロード（リンク生成） — const a=document.createElement('a'); a.href=URL.createObjectURL(blob); a.download='f...
JavaScript JavaScript 逆引き集 | Blob とファイル作成
Blob とファイル作成 — const b = new Blob(, { type: 'text/plain' })Blob（Binary Large Object）は「生のデータのかたまり」を表す...
JavaScript JavaScript 逆引き集 | popstate イベント検知
popstate イベント検知 — window.addEventListener('popstate', ()=>{})popstate イベントは ブラウザの「戻る」「進む」操作や history...
JavaScript JavaScript 逆引き集 | history.pushState／replaceState
history.pushState／replaceState の基本 — history.pushState({}, '', '/page')history.pushState と history.r...
JavaScript JavaScript 逆引き集 | URL 生成／解析（URLクラス）
URL クラスの基本 — const u = new URL('/a', 'URL クラスは「URL文字列を安全に生成・分解」するための標準APIです。相対パスと基準URLを組み合わせて絶対URLを作...
JavaScript JavaScript 逆引き集 | URLSearchParams（クエリ操作）
URLSearchParams の基本（クエリ操作） — const p = new URLSearchParams(location.search)URL の「?以降」のクエリを簡単に読み書きできる...
JavaScript JavaScript 逆引き集 | IndexedDB 基本（簡易）
IndexedDB 基本（簡易）— const req = indexedDB.open('db')IndexedDB はブラウザ内に大量・構造化データを保存できるクライアントサイドDBです。非同期A...
JavaScript JavaScript 逆引き集 | Cookie セット（簡易）
Cookie を簡単にセット・取得 — document.cookie = 'k=v; path=/; max-age=3600'Cookie はブラウザに短い文字列を保存し、同一オリジンへの次回以降...
JavaScript JavaScript 逆引き集 | sessionStorage 書き込み／読み出し
sessionStorage の基本 — sessionStorage.setItem('k', v) / sessionStorage.getItem('k')sessionStorage は「同じ...
JavaScript JavaScript 逆引き集 | localStorage 書き込み／読み出し
localStorage の基本 — localStorage.setItem('k', v) / localStorage.getItem('k')localStorage は「ブラウザに文字列とし...
JavaScript JavaScript 逆引き集 | smooth スクロール
スムーススクロールの基本 — window.scrollTo({ top: 0, behavior: 'smooth' })「スムーススクロール」は、画面を指定位置まで滑らかに移動する演出です。ユーザ...
JavaScript JavaScript 逆引き集 | スクロール位置取得
スクロール位置取得の基本 — window.scrollY と el.scrollTopページ全体のスクロール量は window.scrollY（縦）/ window.scrollX（横）。特定のスク...
JavaScript JavaScript 逆引き集 | getBoundingClientRect で座標取得
要素の座標取得の基本 — el.getBoundingClientRect() と表示制御（classList.toggle('is-hidden')）要素の「画面上での位置とサイズ」を取りたいときは...
JavaScript JavaScript 逆引き集 | 要素の表示・非表示（CSSクラス）
要素の表示・非表示（CSSクラス） — el.classList.toggle('is-hidden')クラスを切り替えて見た目を制御するのが一番安全で保守しやすい方法です。classList.tog...
JavaScript JavaScript 逆引き集 | フォーカス制御
フォーカス制御の基本 — el.focus()フォームやボタンに「今ここを操作できます」と意識を集めるのがフォーカスです。el.focus() は要素にプログラムからフォーカスを当てる最小の一手。入力...
JavaScript JavaScript 逆引き集 | イベントデリゲーション
イベントデリゲーションの基本 — parent.addEventListener('click', e => { if (e.target.matches('button')) ... })イベントデ...
JavaScript JavaScript 逆引き集 | フラグメント利用で描画高効率化
フラグメント利用で描画高効率化 — const frag = document.createDocumentFragment(); frag.append(...)大量の要素を1つずつDOMに挿入する...
JavaScript JavaScript 逆引き集 | NodeList を配列に変換
NodeList を配列に変換の基本 — Array.from(nodeList) または document.querySelectorAll() が返すのは「配列のように見える NodeList」。...
JavaScript JavaScript 逆引き集 | querySelectorAll（複数）
querySelectorAll の基本 — document.querySelectorAll('li')querySelectorAll は「CSSセレクタに一致する要素を“全部”まとめて取得」す...
JavaScript JavaScript 逆引き集 | querySelector（単一）
querySelector の基本 — document.querySelector('.cls')querySelector は「CSSセレクタで、最初に一致した1つの要素」を取得するメソッドです。...
JavaScript JavaScript 逆引き集 | 子要素の取得
子要素の取得の基本 — el.childrenel.children は「直下の子要素だけ」を順番付きで返します。返り値は配列“風”の HTMLCollection（ライブコレクション）で、テキストノ...
JavaScript JavaScript 逆引き集 | 親要素の取得
親要素の取得の基本 — el.parentElementある要素から「一つ上の箱（親要素）」を取得したいときに使うのが parentElement。DOMツリーを上に辿って、要素ノードだけを返します。...
JavaScript JavaScript 逆引き集 | CSS スタイル変更
CSSスタイル変更の基本 — el.style.display = 'none'要素を「非表示」にする最短の方法が style.display = 'none'。表示したいときは 'block' など...
JavaScript JavaScript 逆引き集 | textContent を使う（テキストのみ）
テキストのみを扱う — el.textContent = 'text'textContent は「要素の中身をテキストとして読み書きする」ためのプロパティです。HTMLタグは解釈されず、そのまま文字列...
JavaScript JavaScript 逆引き集 | innerHTML を使う（注意：XSS）
innerHTML の基本と注意点（XSS対策を含む） — el.innerHTML = '<b>hi</b>'innerHTML は「要素の中身をHTML文字列として読み書きする」ためのプロパティで...
JavaScript JavaScript 逆引き集 | 要素の挿入
要素の挿入（append / appendChild）の基本 — parent.append(child)「作った要素を画面に出す」最後の一手が挿入です。DOMの親要素に子をぶら下げることで、はじめて...
JavaScript JavaScript 逆引き集 | 要素の生成
要素の生成の基本 — const n = document.createElement('div')画面に新しい箱（要素）を追加したいときは document.createElement(tagNam...
JavaScript JavaScript 逆引き集 | dataset（data-*）の利用
Dataset の基本 — el.dataset.foo = 'bar'data-* 属性は、HTML要素に開発者が自由なカスタムデータを埋め込むための仕組みです。JavaScriptでは eleme...
JavaScript JavaScript 逆引き集 | 属性の取得／設定
属性の取得／設定の基本 — el.getAttribute('data-x') と el.setAttribute('data-x', v)HTML要素の「属性」（id, class, href, s...
JavaScript JavaScript 逆引き集 | クラス操作（classList）
クラス操作の基本 — el.classList.add('a') と el.classList.toggle('b')CSSの見た目（色、サイズ、表示/非表示など）を切り替える最もシンプルな方法が「ク...
JavaScript JavaScript 逆引き集 | フォームのsubmit防止
フォームの submit 防止 — e.preventDefault()フォームは送信するとページがリロードされます。JavaScriptで「リロードせずに自分の処理をしたい」ときは、submit イ...
JavaScript JavaScript 逆引き集 | イベントリスナー削除
イベントリスナー削除（DOM） — el.removeEventListener('click', fn)イベントを「もう受けたくない」瞬間は必ず来ます。removeEventListener は、追...
JavaScript JavaScript 逆引き集 | イベントリスナー追加（DOM）
イベントリスナー追加（DOM） — el.addEventListener('click', fn)ボタンを押す、入力する、スクロールする。こうした「イベント」が起きた瞬間に処理を実行するのがイベント...
JavaScript JavaScript 逆引き集 | throttle 実装（簡易）
Throttle 実装（簡易） — 一定間隔だけ処理するスロットル「スクロールやマウス移動のように、イベントが大量に連続発火して重くなる」問題を減らすテクが throttle（スロットル）。一定間隔ご...
JavaScript JavaScript 逆引き集 | debounce 実装（簡易）
Debounce 実装（簡易） — 入力が落ち着いたら一度だけ実行「キー入力やスクロールなど“連打されるイベント”を落ち着いてから1回だけ処理したい」—その定番テクが debounce。短いコードで、...
JavaScript JavaScript 逆引き集 | clearInterval で解除
clearInterval で解除の基本 — clearInterval(id)setInterval で始めた「一定間隔の繰り返し」を止めるのが clearInterval(id)。開始時に返される...
JavaScript JavaScript 逆引き集 | 繰り返し（setInterval）
繰り返しタイマーの基本 — const id = setInterval(()=>{}, 1000)setInterval は「一定間隔ごとに関数を繰り返し実行する」ためのタイマーです。第2引数はミリ...
JavaScript JavaScript 逆引き集 | 取消可能タイマー（clearTimeout）
取消可能タイマーの基本 — const id = setTimeout(...); clearTimeout(id)「一定時間後に一度だけ実行」するのが setTimeout。その実行予約はタイマーI...
JavaScript JavaScript 逆引き集 | タイマー（setTimeout）
タイマーの基本 — setTimeout(()=>{}, 1000)setTimeout は「指定した時間の後に、関数を一度だけ実行する」タイマーです。第2引数はミリ秒で指定し、例えば 1000 は ...
JavaScript JavaScript 逆引き集 | 再試行ロジック（簡易）
再試行ロジック（簡易） — for(i=0;i<3;i++){ try{await f();break}catch{} }「失敗するかもしれない処理を、何度か繰り返して成功を狙う」仕組みが 再試行ロジ...
JavaScript JavaScript 逆引き集 | カスタムエラー投げる
カスタムエラー投げるの基本 — throw new Error('msg')「想定外の入力」「外部APIの不整合」「ビジネスルール違反」など、続行できない状況を即座に知らせたいときは、エラーを投げて処...
JavaScript JavaScript 逆引き集 | カスタムエラー投げる
カスタムエラー投げる — throw new Error('msg') の基本と実践「想定外の入力」「外部APIの不整合」「ビジネスルール違反」など、続行できない状況を即座に知らせたいときは、エラーを...
JavaScript JavaScript 逆引き集 | エラーハンドリング（try/catch）
エラーハンドリング（try/catch）の基本と実践JavaScript では try/catch 構文を使って「エラーが起きてもプログラム全体が止まらないようにする」ことができます。初心者がまず覚え...
JavaScript JavaScript 逆引き集 | axios（外部）基本
axios（外部ライブラリ）の基本 — axios.get(url).then(r => r.data)axios は人気のある HTTP クライアントライブラリで、ブラウザや Node.js で使え...
JavaScript JavaScript 逆引き集 | fetch POST（JSON）
fetch で HTTP POST（JSON）の基本と実践fetch は HTTP リクエストを送る API。JSON を POST する場合は、メソッド指定・本文の JSON 化・ヘッダー指定（Co...
JavaScript JavaScript 逆引き集 | fetch で HTTP GET
fetch で HTTP GET の基本と実践fetch は「URLへリクエストを送り、レスポンスを Promise として受け取る」ための API です。GET/POST などの HTTP メソッド...
JavaScript JavaScript 逆引き集 | Promise.allSettled（結果全取得）
Promise.allSettled（結果全取得）の基本と実践Promise.allSettled は「複数の非同期処理が、成功か失敗かに関係なくすべて終わるまで待って、各結果のステータスと値（または...
JavaScript JavaScript 逆引き集 | Promise.race（最初）
Promise.race の基本と実践（最初に決着したひとつ）Promise.race は「複数の非同期のうち、もっとも早く“決着”したひとつの結果（成功または失敗）で返す」ための静的メソッドです。配...
JavaScript JavaScript 逆引き集 | Promise.all（並列）
Promise.all の基本と実践（並列処理）複数の非同期処理を「同時に走らせて、全部そろったら結果を受け取りたい」—その最短ルートが Promise.all。依存関係がないタスクをまとめて走らせる...
JavaScript JavaScript 逆引き集 | async/await 基本
async/await 基本 — async function f(){ const r = await p }async/await は「非同期処理を同期処理のように読みやすく書く」ための構文です。...
JavaScript JavaScript 逆引き集 | Promise 基本生成
Promise の基本生成 — new Promise((resolve, reject) => {...})Promiseは「未来のある時点で値が返ることを約束する」オブジェクト。非同期処理の結果と...
JavaScript JavaScript 逆引き集 | WeakMap の利用（ガベージに強い参照）
WeakMap の基本 — new WeakMap()WeakMap は「キーにオブジェクトだけを使える特殊なマップ」です。最大の特徴は キーとなるオブジェクトがガベージコレクション（不要メモリ解放）...
JavaScript JavaScript 逆引き集 | Map から配列へ
Map から配列へ — の基本と実践Map の「キーと値のペア」を配列にしたいときは、 が最短です。配列化すれば map/filter/sort などの配列操作が自由に使えます。基本の使い方const...
JavaScript JavaScript 逆引き集 | Set の基本
Set の基本 — new Set(arr)JavaScript の Set は「重複を許さない値の集合」を扱うための組み込みオブジェクトです。配列と似ていますが、同じ値を二度入れることはできません。...
JavaScript JavaScript 逆引き集 | Map の基本
Map の基本 — new Map(), set, getJavaScript の Map は「キーと値のペア」を保持するコレクションです。オブジェクトと似ていますが、任意の型をキーにできるのが大きな...
JavaScript JavaScript 逆引き集 | オブジェクトのキー順ソート（新規オブジェクト作成）
オブジェクトのキー順ソート（新規オブジェクト作成）の基本と実践「オブジェクトのプロパティをキー順に並べ替えて扱いたい」時は、キーを配列にしてソートし、reduceで新しいオブジェクトを組み立てます。元...
JavaScript JavaScript 逆引き集 | 動的プロパティアクセス
動的プロパティアクセス（obj）の基本と実践「キーを変数で指定したい」「ユーザー入力や設定に合わせてプロパティ名が変わる」—そんなときに使うのが角括弧記法 obj。ドット記法は固定名、角括弧は“動的名...
JavaScript JavaScript 逆引き集 | オブジェクトのプロパティ削除
オブジェクトのプロパティ削除（delete obj.key）の基本と実践delete は「そのプロパティをオブジェクトから完全に取り除く」演算子です。キーを消したいときに使い、値を未定義化したいときは...
JavaScript JavaScript 逆引き集 | プロパティの存在チェック
プロパティの存在チェック（'prop' in obj）の基本と実践「そのプロパティある？」を最短で判定するのが in 演算子。自前のプロパティだけでなく、プロトタイプから継承されたプロパティも「存在す...
JavaScript JavaScript 逆引き集 | オブジェクトのマージ
オブジェクトのマージ（浅）— スプレッド構文 {...a, ...b} の基本と実践複数の設定やデータを“上書きルール”で一つにまとめたいときに使うのがスプレッド構文のマージ。右側が勝つ（後勝ち）とい...
JavaScript JavaScript 逆引き集 | 深いコピー（JSON）（注意：関数/undef は除外）
深いコピー（JSON）— JSON.parse(JSON.stringify(obj)) の基本と実践「オブジェクトをまるっと別インスタンスにしたい」場面でよく使われる簡易テクニックが JSON.pa...
JavaScript JavaScript 逆引き集 | オブジェクトのクローン（浅）
オブジェクトのクローン（浅）— スプレッド構文 {...obj} の基本と実践浅いクローンは「一番上の層だけ」をコピーして、新しいオブジェクトを作る方法です。最短はスプレッド構文 {...obj}。ネ...
JavaScript JavaScript 逆引き集 | オブジェクトのエントリ列挙
オブジェクトのエントリ列挙（Object.entries）の基本と実践Object.entries(obj) は「オブジェクトのキーと値のペア」を の形で配列にして返す関数です。キーだけなら Obje...
JavaScript JavaScript 逆引き集 | オブジェクトの値列挙
オブジェクトの値列挙（Object.values）の基本と実践Object.values(obj) は「オブジェクトの 値だけ を配列にして返す」便利な関数です。キーは不要で値だけを処理したいときに最...
JavaScript JavaScript 逆引き集 | オブジェクトのキー列挙
オブジェクトのキー列挙（Object.keys）の基本と実践Object.keys は「オブジェクトの“自分が持つ（自前の）列挙可能なプロパティ名”」を配列で返します。設定画面の項目一覧、テーブルのヘ...
JavaScript JavaScript 逆引き集 | JSON 文字列化／復元
JSON文字列化／復元の基本と実践「オブジェクト⇄文字列」を行き来する最短ルートが JSON.stringify と JSON.parse。保存・送受信・ログ・設定ファイルで頻出です。まずは基本// ...
JavaScript JavaScript 逆引き集 | タイムゾーン指定変換（Intl）
Intl.DateTimeFormatでタイムゾーン指定表示の基本と実践Intl.DateTimeFormatは「表示するロケール」と「表示するタイムゾーン」を明示できるので、どこで実行しても同じ地域...
JavaScript JavaScript 逆引き集 | Intl.DateTimeFormat の利用
Intl.DateTimeFormat の基本と実践Intl.DateTimeFormat はロケールやタイムゾーンに合わせた日付・時刻フォーマットを簡単に行える標準APIです。文字列連結や手作業のゼ...
JavaScript JavaScript 逆引き集 | 日付フォーマット（簡易）
JavaScript日付フォーマット（簡易）の基本と実践最短で「YYYY-M-D」などの文字列にしたいなら、Dateの各値を取り出してテンプレートリテラルで組み立てます。月は0始まりなので「+1」を忘...
JavaScript JavaScript 逆引き集 | 日付の差分（日数）
JavaScriptで日付の差分（日数）を求める基本と実践「2つの日時の差を“日数”で知りたい」ときは、2つのDateの差（ミリ秒）を1日のミリ秒で割るのが基本です。まず仕組みと丸め方、そしてタイムゾ...
JavaScript JavaScript 逆引き集 | 日付を ISO 文字列に
JavaScriptで日付をISO文字列にする（toISOString）の基本と実践ISO 8601形式はシステム間で扱いやすい標準日時フォーマットです。new Date().toISOString(...
JavaScript JavaScript 逆引き集 | 日付の現在取得
JavaScriptで現在日時を取得する（new Date）の基本と実践「今の日時が欲しい」ときは new Date()。これで現在の日時を表す Dateオブジェクトが作れます。そこから年・月・日・時...
JavaScript JavaScript 逆引き集 | ランダム整数生成
JavaScriptランダム整数生成の基本と実践「0以上n未満のランダムな整数」を作る定番が Math.floor(Math.random() * n)。仕組みを理解すれば、任意の範囲の整数にも応用で...
JavaScript JavaScript 逆引き集 | 数値の丸め（Math）
JavaScript数値の丸め（Math.round / Math.ceil / Math.floor）丸めは「端数をどう扱うか」を決める操作。表示や料金計算、ページネーションなどで頻出です。まずは3...
JavaScript JavaScript 逆引き集 | 数値を固定小数点
JavaScript数値の固定小数点表示（toFixed）の基本と実践金額や割合など「小数点以下の桁数を揃えたい」ときは toFixed。指定した桁数に丸め、足りない桁は0で埋めた文字列を返します。構...
JavaScript JavaScript 逆引き集 | テンプレートリテラル
JavaScriptテンプレートリテラルの基本と実践テンプレートリテラルはバッククォートで囲み、${...}の中に変数や式を埋め込めます。文字列連結より短く、読みやすく、改行もそのまま扱えます。構文と...
JavaScript JavaScript 逆引き集 | 正規表現で部分抽出（キャプチャ）
JavaScript正規表現で部分抽出（キャプチャ）の基本と実践正規表現の キャプチャグループ (...) を使うと、文字列の一部を抜き出せます。match の返り値は配列で、 に「全体一致」、 以降...
JavaScript JavaScript 逆引き集 | 正規表現で置換（全体）
JavaScript正規表現で置換（replace）の基本と実践文字列の中の「一致した部分」を別の文字列に置き換えるのが replace。正規表現を使えば「全件置換」や「一部だけ抜き出して再配置」も柔...
JavaScript JavaScript 逆引き集 | 正規表現でマッチ
JavaScript正規表現でマッチ（match）の基本と実践文字列から「パターンに合う部分」を見つけて取り出すなら match。1件だけか、すべてか、グループ抽出かで挙動が変わるので、最初に仕組みを...
JavaScript JavaScript 逆引き集 | 文字列を大文字／小文字
JavaScript文字列の大文字・小文字変換の基本と実践文字列を「全部大文字」「全部小文字」に揃えたいときは、toUpperCase と toLowerCase が最短ルート。検索や比較、表示整形で...
JavaScript JavaScript 逆引き集 | 文字列のトリム
JavaScript文字列のトリムの基本と実践文字列の前後にある余分な空白や改行を取り除くときは trim を使います。元の文字列は変えず、前後のホワイトスペースだけを除いた新しい文字列を返します。構...
JavaScript JavaScript 逆引き集 | split で文字列分割
JavaScript文字列の分割（split）の基本と実践文字列を「区切り文字」で分けて配列にするのが split。CSVの処理、URLやパスの分解、複数行テキストの扱いなどで頻出です。初心者でもすぐ...
JavaScript JavaScript 逆引き集 | join で文字列結合
JavaScript配列の文字列結合（join）の基本と実践配列の要素を指定した区切り文字でつないで、1つの文字列にするのが join。CSV作成、UI表示、ログ出力などでよく使います。構文と基本ポイ...
JavaScript JavaScript 逆引き集 | 配列の分割（chunk）
JavaScript配列の分割（chunk）の基本と実践「配列を一定サイズごとに分割したい」場面はよくあります。例えば、ページネーションやバッチ処理など。JavaScriptには標準で chunk 関...
JavaScript JavaScript 逆引き集 | 配列をユニークに（オブジェクトキーで）
JavaScript配列をユニークに（オブジェクトキーで）lodashの _.keyBy を使うと「オブジェクト配列の重複を特定のキーでまとめて、ユニーク化」できます。プリミティブ値なら Set で十...
JavaScript JavaScript 逆引き集 | 配列の重複除去（Set）
JavaScript配列の重複除去（Set）の基本と実践配列に同じ値が何度も入っているとき、「ユニークな値だけ欲しい」場面があります。そんなときに便利なのが Set とスプレッド構文 ... を組み合...
JavaScript JavaScript 逆引き集 | 配列を逆順
JavaScript配列を逆順にする（reverse）の基本と実践reverseは配列の並びをその場で反転します。最初の要素が最後に、最後の要素が最初になります。元の配列が直接書き換えられる点が重要で...
JavaScript JavaScript 逆引き集 | 配列のソート（数値）
JavaScript配列のソート（数値）の基本と実践数値配列を正しく並べ替えるには、比較関数を渡して「数値として」比較させるのがポイントです。デフォルトのsortは文字列として比較するため、数値だと期...
JavaScript JavaScript 逆引き集 | スプレッドで配列コピー/結合
JavaScriptスプレッド構文で配列コピー／結合配列を「そのままコピーしたい」「複数の配列をつなげたい」ときに便利なのが スプレッド構文（...）。初心者でも直感的に書けて、concatよりも短く...
JavaScript JavaScript 逆引き集 | concat で配列結合
JavaScript配列の結合（concat）の基本と実践「2つ以上の配列をつなげたい」ときに使うのが concat。初心者でも直感的に扱えるメソッドで、元の配列を壊さず新しい配列を返してくれるのが特...
JavaScript JavaScript 逆引き集 | flatMap の変換＋平坦化
JavaScript配列の変換＋平坦化（flatMap）の基本と実践「mapで変換した結果が配列になってしまう → そのままでは二重配列になる」そんなときに便利なのが flatMap。mapとflat...
JavaScript JavaScript 逆引き集 | flat で1階層平坦化
JavaScript配列の平坦化（flat）の基本と実践配列の中に配列が入っていると「二重配列」「ネスト配列」と呼ばれます。これを「1階層だけまっ平らにしたい」ときに使うのが flat。初心者でも直感...
JavaScript JavaScript 逆引き集 | every で全件判定
JavaScript配列の全件判定（every）の基本と実践「配列のすべてが条件を満たす？」を一度で確かめるなら every。すべてが条件に合えばtrue、1つでも合わなければfalseを返します。最...
JavaScript JavaScript 逆引き集 | some でいずれか判定
JavaScript配列のいずれか判定（some）の基本と実践「条件に合う要素がひとつでもある？」を真っ直ぐに確かめるなら some。true/falseだけ返すので、存在チェックやバリデーションに向...
JavaScript JavaScript 逆引き集 | includes で存在確認（原始値）
JavaScript配列の存在確認（includes）の基本と実践「この値、配列に入ってる？」を一発で確かめるなら includes。true/falseだけ返すシンプルさが強みで、indexOfより...
JavaScript JavaScript 逆引き集 | findIndex でインデックス取得
JavaScript配列のインデックス取得（findIndex）の基本と実践「条件に合う要素が配列のどこにあるか」を知りたいなら findIndex。見つかった最初の位置（インデックス）を返し、見つか...
JavaScript JavaScript 逆引き集 | find で最初の一致を取得
JavaScript配列から最初の一致を取得（find）の基本と実践「条件に合う最初の要素を1つだけ取り出したい」なら find が最適です。filterは「全部」を返しますが、findは「最初の1件...
JavaScript JavaScript 逆引き集 | reduce で集計
JavaScript配列の集計（reduce）の基本と実践「配列の値をまとめて1つにしたい」ときに使うのが reduce。合計・平均・最大値・オブジェクト化など、集計処理の万能ツールです。初心者には少...
JavaScript JavaScript 逆引き集 | filter で条件抽出
JavaScript配列の条件抽出（filter）の基本と実践「条件に合う要素だけを取り出して新しい配列を作りたい」なら、filterが最短で安全。元の配列は変えず、判定関数がtrueを返した要素だけ...
JavaScript JavaScript 逆引き集 | map で配列変換
JavaScript配列変換（map）の基本と実践「配列の各要素を加工して、新しい配列を作りたい」なら map が最短ルート。元の配列には触れず、処理結果だけを返してくれるので、初心者でも安全に“変換...
JavaScript JavaScript 逆引き集 | 配列のループ（forEach）
JavaScript配列のループ（forEach）の基本と実践「配列の全要素に同じ処理をサッと当てたい」なら、forEachがいちばん手軽。カウンターや終了条件を意識せず、読みやすく安全に“全件処理”...
JavaScript JavaScript 逆引き集 | 配列のループ（for…of）
JavaScript配列のループ（for...of）の基本と実践最初は「インデックスって必要？」と迷うかもしれないけれど、値だけ順に扱いたいなら for...of がいちばん素直で読みやすい。配列から...
JavaScript JavaScript 逆引き集 | 配列のループ（for）
JavaScript配列のループ（for）の基本と実践最初の一歩って、つまずきやすい。でも「for」は味方。配列を順番に処理するためのいちばん素直なやり方で、仕組みがわかると一気に視界が開けます。ここ...
JavaScript Python JavaScript | プログラミングの繰り返し処理でマジックナンバーを避ける方法
「なんとなく書いた数字」が、後からあなたや他の人を困らせる。それがマジックナンバー。まずは意味をつかんで、繰り返し処理（ループ）での具体的な回避テクを身につけましょう。 マジックナンバーの基礎定義: ...
JavaScript JavaScript | 「ソースマップ」付きで TypeScript や Babel コードをデバッグする方法
ここでは、「ソースマップ付きで TypeScript や Babel 変換後のコードをブラウザでデバッグする方法」を、🔰 初心者向けにステップごとで分かりやすく解説します。そもそも「ソースマップ」って...
JavaScript JavaScript | VSCode のデバッガコンソールで式を評価して調べる方法
ここでは VSCode のデバッガコンソールを使って、デバッグ中に式や変数を確認・評価する方法 を初心者向けに丁寧に解説します。デバッグを「止まって眺めるだけ」から「動かしながら調べる」に進化させるテ...
JavaScript JavaScript | 非同期処理（Promise / async）のステップ実行を例で体験
では、非同期処理（Promise / async/await）のステップ実行を、VSCodeデバッガで体験する例を、初心者向けに手順付きで進めていきます。1. サンプルコードを作るまず小さな非同期処理...
JavaScript JavaScript | Node.js 環境での「–inspect」デバッグ手順（VSCode でのステップ実行）
ここでは、Node.js の --inspect モードを使って VSCode でステップ実行（デバッグ）する方法を、プログラミング初心者向けに 手順通りに進められるチュートリアル形式で解説します。目...
JavaScript JavaScript | 非同期エラー（Promiseやasync/await）のスタックトレース
「ブラウザ開発ツール（DevTools） を使ったデバッグ」は、初心者から“実務で通用する人”へ進むための大きな一歩です。ここでは、Chrome / Edge / Firefox に共通する操作を中心...
JavaScript JavaScript | 非同期エラー（Promiseやasync/await）のスタックトレース
非同期エラーのスタックトレースは「同期コードのそれ」とは挙動が違う部分が多く、つまずきやすいポイントです。以下は 初心者が実務で遭遇するパターン を中心に、具体的なコード例と「何を見ればいいか」「どう...
JavaScript JavaScript | 月別アルバムページ × タグフィルタ × 地図表示
ここまでの要素を全部組み合わせて、「月別アルバムページ」＋「タグフィルタ」＋「地図表示」 を統合したギャラリーの仕組みを整理してみましょう。1. 処理の流れ画像を読み込みPillowでサムネイル生成E...
JavaScript JavaScript | フォームバリデーション（入力チェック）
特徴リアルタイム判定入力するたびにOK/NGを表示。NG時に修正候補をボタンで自動適用メール → 「@example.com」を補完電話 → 桁数を補正してハイフン整形URL → https:// を...
JavaScript JavaScript | 再帰とループの性能比較
「再帰」と「ループ」は同じ処理を実現できることが多いですが、性能面では違いがあります。初心者向けに整理してみます。性能比較のポイント1. 関数呼び出しのコスト再帰関数を呼ぶたびに「呼び出しスタック」に...
JavaScript JavaScript | レベル別練習問題：エレメント（HTML要素・DOM要素操作）
「エレメント」をテーマに、基礎／中級／上級（応用）の3レベル、各5問ずつ、合計15問のオリジナル練習問題を作成し、解答と解説付きでまとめます。ここでいう「エレメント」は HTML要素・DOM要素操作 ...
JavaScript JavaScript | レベル別練習問題：関数
「関数」 をテーマに、基礎 / 中級 / 上級（応用） 各レベル 5 問ずつ、合計 15 問のオリジナル練習問題＋解答＋解説を作成しました。コードはそのままブラウザのコンソールで実行できます。基礎レベ...
JavaScript JavaScript | レベル別練習問題：オブジェクト
「オブジェクト」 をテーマに、基礎 / 中級 / 上級（応用） 各レベル 5 問ずつ、合計 15 問のオリジナル練習問題＋解答＋解説を作成しました。コードはそのままブラウザのコンソールで実行できます。...
JavaScript JavaScript | レベル別練習問題：配列
「配列」 をテーマに、基礎 / 中級 / 上級（応用） 各レベル5問ずつ、合計15問のオリジナル練習問題＋解答＋丁寧な解説を作成しました。コードはそのままブラウザのコンソールで実行できます。基礎レベル...
JavaScript JavaScript | レベル別練習問題：繰り返し（for / while / do…while）
「繰り返し（for / while / do…while）」をテーマに、基礎／中級／上級（応用）、各レベル5問ずつ、合計15問のオリジナル練習問題＋解答＋解説を作成しました。基礎レベル（5問）問題1次...
JavaScript JavaScript | レベル別練習問題：条件分岐（if / else / switch）
「条件分岐（if / else / switch）」をテーマに、基礎／中級／上級（応用）、各レベル5問ずつ、合計15問のオリジナル練習問題＋解答＋解説を作成しました。基礎レベル（5問）問題1次のコード...
JavaScript JavaScript | レベル別練習問題：定数／変数と演算
「定数／変数と演算」をテーマに、基礎／中級／上級（応用）の3レベルで、各レベル5問ずつ、合計15問のオリジナル練習問題と解答・解説を作成しました。基礎レベル（5問）問題1次のコードで、コンソールに出力...
JavaScript JavaScript | 再帰を使わないと書きにくい実世界の例（DOMツリーやJSONの処理）
実務で「再帰が自然で書きやすい」代表例を具体的な説明＋実用的なコード例（再帰版と必要なら非再帰版のワンポイント）でまとめます。JavaScript（ブラウザ / Node）でそのまま試せる形にしていま...
JavaScript JavaScript | 「再帰の動き」を図解で追う
では「再帰の動き」を図解で追ってみましょう。ここでは分かりやすい例として factorial(4) を使います。コードfunction factorial(n) { if (n === 0) retu...
JavaScript JavaScript | 「再帰関数」レベル別の練習問題
では、プログラミング初心者が段階的に「再帰関数」を理解できるように、レベル別の練習問題＋模範解答＋やさしい解説をまとめます。レベル1：超入門（再帰の形を覚える）🧩 問題1：カウントダウン1から0までの...
JavaScript JavaScript | デフォルト引数
JavaScript の デフォルト引数を、プログラミング初心者向けにやさしく、例題付きで解説します。1. デフォルト引数とは？関数を呼び出すときに、引数を渡さなかった場合に自動で使われる値のことです...
JavaScript JavaScript | 可変長引数（rest パラメータ）
では、JavaScriptの restパラメータ を初心者向けにわかりやすく、例題も交えて丁寧に説明します。1️⃣ restパラメータとは？restパラメータは 関数の引数をまとめて1つの配列として受...
JavaScript JavaScript | 複数の既存配列返却関数を設定リストで一括ラップしてオブジェクト返却に変換するサンプルコード
では 複数の既存配列返却関数を設定リストで一括ラップしてオブジェクト返却に変換するサンプルコード を作ります。チーム開発でもそのまま使えるテンプレートです。1. 元の複数配列返却関数例function...
JavaScript JavaScript | arguments と …rest のメモリ消費・パフォーマンス比較
arguments と ...rest のメモリ消費＆パフォーマンス比較を視覚的に体験できるようにしていきましょう。まず理論的な違いをざっくりまとめると…項目arguments...rest型配列風オ...
JavaScript JavaScript | arguments と …rest の内部比較
では、arguments と スプレッド構文（...rest） の内部的な違いを、図解＋ブラウザ実験付きでわかりやすく説明します。arguments vs ...rest の違い（内部挙動）どちらも「...
JavaScript JavaScript | 配列で返している既存コードをオブジェクトにリファクタリングする実務的な例
では、実務でよくあるパターンとして「配列で返している関数」をオブジェクトで返す形にリファクタリングする例を、元コード → 修正版コード → 呼び出し例 でステップごとに解説します。例題：配列で返してい...
JavaScript JavaScript | 「アロー関数 this のレキシカル束縛」アニメーションつきのブラウザ教材
See the Pen Lexical binding of 'this' by MONO365 -Color your days- (@monoqlo365) on CodePen. 実行ボタンを押...
JavaScript JavaScript | クラス内でアロー関数を使う理由
クラス内でのアロー関数の使い方を、動くコード例・利点と注意点・実務での使い分けを交えてわかりやすくまとめます。アロー関数は this を「定義場所（レキシカル）」から拾う 特性があるので、クラスのイン...
JavaScript JavaScript | クラスのメソッドをイベントリスナーに登録するときの3つの方法を比較表
では「クラスのメソッドをイベントリスナーに登録するときの3つの方法」を比較表で整理してみましょう。これで状況に応じてどの書き方を選べばよいか一目で分かります。クラスのメソッドと this の扱い比較方...
JavaScript JavaScript | 関数リテラルとアロー関数の this の違い
では 関数リテラル（通常の function 式）とアロー関数の this の違い を初心者向けに、できるだけかみ砕いて説明します。実際にコードをブラウザで試すと理解が早いです。1️⃣ 基本の考え方通...
JavaScript JavaScript | 関数リテラル（無名関数）とアロー関数を初心者向けに比較
では、関数リテラル（無名関数）とアロー関数を 初心者向けにかみ砕いて比較 します。実際のコード例付きで説明します。1️⃣ 基本の書き方比較項目無名関数（Function式）アロー関数（ES6以降）定義...
JavaScript JavaScript | ボタンを押すと関数リテラル（無名関数）が動くHTMLサンプル
See the Pen Function literal (anonymous function) sample by MONO365 -Color your days- (@monoqlo365) ...
JavaScript JavaScript | 関数はオブジェクト — インタラクティブ練習ページ
See the Pen Functions are objects by MONO365 -Color your days- (@monoqlo365) on CodePen.
JavaScript JavaScript | アロー関数のthisをやさしく理解する
アロー関数のthisをやさしく理解するアロー関数は「短く書ける関数」だけではありません。いちばんの特徴は、thisが「外側のthisに固定される（レキシカルに束縛される）」ことです。つまり、アロー関数...
JavaScript JavaScript | 既存の配列返却関数を自動的にオブジェクト返却にラップして一括変換するテンプレート関数
では次は 既存の配列返却関数を自動的にオブジェクト返却にラップして一括変換するテンプレート関数 を作ります。これを使えば、チームで複数の関数を簡単にリファクタリングできます。1. 自動ラップ関数テンプ...
JavaScript JavaScript | 既存の配列返却関数を自動的にオブジェクト返却にラップして一括変換するテンプレート関数
では次は 既存の配列返却関数を自動的にオブジェクト返却にラップして一括変換するテンプレート関数 を作ります。これを使えば、チームで複数の関数を簡単にリファクタリングできます。1. 自動ラップ関数テンプ...
JavaScript JavaScript | 複数の関数を組み合わせて小さなアプリっぽい処理 – 成績集計関数 –
では「小さなアプリっぽい処理」を一緒に作ってみましょう。テーマは テストの点数をまとめて集計する関数 です。課題点数の配列を受け取り、平均点合格者リスト（60点以上）をまとめて返す関数analyzeS...
JavaScript JavaScript | APIから取ってきたデータを reduce で集計してチャート向けに整形
ではここでは「実際の開発で reduce をどう使うか」を、初心者でも理解できるように段階的に説明します。1. 想定シナリオたとえば、次のような「売上データ」を API から取得したとします👇[ {"...
JavaScript JavaScript | ブラウザで動くTODOフィルタアプリ（filter メソッド）
filterメソッドは TODOリストの「絞り込み」 にとてもよく使われます。ここでは初心者でも動かしやすい ブラウザで動く小さなTODOフィルタアプリ を例にして説明します。ゴール「すべて／完了済み...
JavaScript JavaScript | map() メソッド練習
各問題を選んで実行できるようにして、結果と処理のステップを下に表示します。 See the Pen JavaScript map() Method Practice by MONO365 -Color...
JavaScript JavaScript | map() の間違い実験コード
See the Pen JavaScript map() Mistake Experiment by MONO365 -Color your days- (@monoqlo365) on CodePe...
JavaScript JavaScript | slice() を使った ページネーション（ページ分割）サンプル
それでは、JavaScript の slice() を使った ページネーション（ページ分割）サンプルを、初心者向けにわかりやすく紹介します。ページネーションとは？たとえば「10件のデータを3件ずつ表示...
JavaScript JavaScript | 大きな配列を扱うときのパフォーマンス面
では、初心者向けに「大きな配列を扱うときのパフォーマンス面」の注意点を、わかりやすくまとめてみます。例を交えて解説します。1. 配列が大きいと何が問題？JavaScript は配列のサイズが大きくなる...
JavaScript JavaScript | concat / push / slice / スプレッド 配列メソッド体験教材
See the Pen Concat Vs Push Slice Spread Playground by MONO365 -Color your days- (@monoqlo365) on Cod...
JavaScript JavaScript | forEachを使ってWeb画面にデータを表示するミニアプリ
では次は、forEach を実践で使いこなす練習用のミニアプリを一緒に作っていきましょう！テーマ：ユーザーリストを表示して、検索＆並び替えできるアプリ（HTML + CSS + JavaScript ...
JavaScript JavaScript | 「平均・分散・標準偏差・範囲内の割合」をまとめて返す 統計サマリー関数
では「統計サマリー関数」を作ってみましょう。これは 平均・分散・標準偏差・範囲内の割合 をまとめて返す関数です。目標平均値を計算分散を計算標準偏差を計算平均 ± 1, 2, 3 標準偏差の範囲に入るデ...
JavaScript JavaScript | 「平均 ± 3標準偏差の範囲に入るデータの数」を数える関数
では「平均 ± 3標準偏差の範囲に入るデータの数」を数える関数を作ってみましょう。これは統計でよく言われる 68-95-99.7ルール の「99.7%」に対応します。目標平均値を求める標準偏差を求める...
JavaScript JavaScript | 「平均 ± 2標準偏差の範囲に入るデータの数」を数える関数
では「平均 ± 2標準偏差の範囲に入るデータの数」を数える関数を作ってみましょう。これは統計でよく使われる 68-95-99.7ルール（経験則）の「95%」に対応する部分です。目標平均値を求める標準偏...
JavaScript JavaScript | 平均 ± 標準偏差の範囲に入るデータの数を数える関数
では「平均 ± 標準偏差の範囲に入るデータの数を数える関数」を作ってみましょう。これは 標準偏差を使ったデータ分析 の基本的な応用です。目標平均値を求める標準偏差を求める範囲 = を計算その範囲に入る...
JavaScript JavaScript | 標準偏差を計算する関数
では「標準偏差を計算する関数」を作ってみましょう。標準偏差は 分散の平方根 で、データのばらつきを直感的に理解しやすい指標です。目標配列の平均値を求める偏差の二乗の平均（＝分散）を求める分散の平方根を...
JavaScript JavaScript | 分散を計算する関数
では「標準偏差を計算する関数」を作ってみましょう。標準偏差は 分散の平方根 で、データのばらつきを直感的に理解しやすい指標です。目標配列の平均値を求める偏差の二乗の平均（＝分散）を求める分散の平方根を...
JavaScript JavaScript | 分散を計算する関数
では「分散を計算する関数」を作ってみましょう。これは 偏差の二乗の平均 を求めることで、データのばらつきを数値化する練習です。目標配列の平均値を求める各要素の偏差（二乗）を計算するその二乗の平均値を返...
JavaScript JavaScript | 偏差の二乗を計算して返す関数
では「偏差の二乗を計算して返す関数」を作ってみましょう。これは 分散や標準偏差 を求めるための第一歩になります。目標配列の平均値を求める各要素の「偏差（要素 − 平均値）」を計算するその偏差を二乗して...
JavaScript JavaScript | 「配列の要素を削除」練習アプリ
See the Pen “Delete Array Element” Practice App by MONO365 -Color your days- (@monoqlo365) on CodePe...
JavaScript JavaScript | 多次元配列を HTML の に変換して表示する方法
ここでは、多次元配列を HTML の <table> に変換して表示する方法を、初心者向けにステップで解説します。ブラウザでそのままコピペして試せます。1️⃣ HTMLの基本構造<!DOCTYPE h...
JavaScript JavaScript | 「複数条件（AND / OR / NOT / ??）」を クリック操作で体験できるサンプル
この教材では、ボタンを押すと条件が切り替わり、リアルタイムで if の判定結果が表示されるようにします 。 See the Pen Multiple conditions (AND / OR / ??...
JavaScript JavaScript | do…while文を使い初心者向けのサイコロゲーム練習セット
では、初心者向けに サイコロゲーム練習セット を作ります。ポイントは：HTML・JavaScriptは分離ボタンでサイコロを振る出た目を表示条件変更で応用問題に挑戦可能1️⃣ HTMLファイル（ind...
JavaScript JavaScript | typeof演算子 学習アプリ
See the Pen typeof Operator Learning App by MONO365 -Color your days- (@monoqlo365) on CodePen. 学べる内...
JavaScript JavaScript | 文字列の連結（+演算子）練習セット
この教材は、JavaScript の「+」演算子による 文字列の連結 を学ぶための初心者向け教材です。 See the Pen String Concatenation (+ Operator) Pr...
JavaScript JavaScript | 条件演算子 練習ツール
ブラウザ上でリアルタイムに結果が見られる条件演算子 練習ツール。ユーザーが値を入力すると、条件演算子で判定した結果がその場で表示されるようにします。ブラウザ上で数値や文字列を入力すると、条件判定がどの...
JavaScript JavaScript | 論理演算子のミニ練習アプリ
では、ブラウザ上で動かせる論理演算子のミニ練習アプリを作ります。ポイントは以下です：入力欄に値を入力「チェック」ボタンで条件判定結果を画面に表示&&, ||, ! の挙動を体験できる以下は HTML ...
JavaScript JavaScript | 「論理演算子」の学習に使える可視化アニメ教材
では、「論理演算子（AND・OR・NOT）」の学習に使える可視化アニメ教材モード付きの解説＋練習問題セット を作ります。論理演算子とは？JavaScriptの論理演算子は、「条件を組み合わせて真（tr...
JavaScript JavaScript | 「等価演算子・厳密等価演算子」のインタラクティブ練習アプリ
概要このアプリでは：ユーザーが「式（例：'0' == false）」を入力実際に評価して結果を表示型変換のステップを可視化（アニメーションつき）全10問の練習問題モード＋採点機能つき See the ...
JavaScript JavaScript | ビット演算・シフト演算をリアルタイムで見られるアニメ付き教材
では、ビット演算・シフト演算をリアルタイムで見られるアニメ付き教材 を、ブラウザで動く HTML + JavaScript で作ります。この教材では、数値を入力するとビットがスライドしたり、AND・O...
JavaScript JavaScript | 「Number() / parseInt() / parseFloat() / +」の変換結果をリアルタイムで比較できる学習用ミニアプリ
See the Pen Numerical Conversion Animation Comparison by MONO365 -Color your days- (@monoqlo365) on ...
JavaScript JavaScript | 「charAt・slice・substring・codePointAt」の動きを可視化するアニメ付き学習ツール
では次は、「charAt・slice・substring・codePointAt」の動きを可視化するアニメ付き学習ツールを作りましょう。CodePenなどブラウザ上でそのまま動く形式にします（HTML...
JavaScript JavaScript | charAt() の動きを視覚的に理解するアニメーション
では、「charAt() の動きを視覚的に理解するアニメーション付き説明」を作りましょう。CodePen などでそのまま実行できる形（HTML + CSS + JS）で、インデックスがスライドして、選...
JavaScript decimal.js を使った「誤差ゼロ金額電卓」
機能概要単価・数量・税率を入力「計算する」ボタンで合計金額を表示decimal.js を使うため誤差ゼロ（0.1 + 0.2 問題なし）ダークモード切り替えボタン付きスマホ対応レスポンシブデザイン S...
JavaScript JavaScript |自分でクラスを書いて、プロトタイプチェーンを視覚的に見られる実験ツール
以下は HTML + JavaScript で動く、初心者向けの「クラス構造可視化アプリ」です。ブラウザに貼り付けて動かすだけで、class の仕組みと prototype チェーンがリアルタイムで見...
JavaScript JavaScript | 「オブジェクトの構造」と「thisの動き」
図解つきで「オブジェクトの構造」と「thisの動き」をわかりやすく説明します。テキストアート＋アニメーションイメージ風で解説します。JavaScript オブジェクトの構造1. オブジェクトの中身のイ...
JavaScript JavaScript | 実践：クラス継承 vs プロトタイプ継承の内部比較
ここでは、「クラス継承（class 構文）」と「プロトタイプ継承（prototype 直接操作）」の内部の違いを、初心者向けに「動作の中身」が見えるようにステップで比較していきます。まずは全体イメージ...
JavaScript JavaScript | プロトタイプ継承」アニメーション
JavaScript の「プロトタイプ継承」は、初心者が「？」となりやすいけど、実際に“矢印でつながる”動きを見ると一気に理解できる部分なんです。プロトタイプ継承とは？🧠 一言で言うと…「オブジェクト...
JavaScript JavaScript | 「thisの仕組み」をアニメーション付きで図解
「thisの仕組み」は JavaScript 初心者が最初につまずく代表ポイント です。ここでは、🧭 直感的なアニメーション（矢印と動き）＋図解🧩 実際にブラウザで動くデモコード（HTML + JS）...
JavaScript JavaScript | プロトタイプと継承の「中の仕組み」や「落とし穴」
ここまで理解しているなら、プロトタイプと継承の「中の仕組み」や「落とし穴」を丁寧に掘り下げていける段階。初心者でも「仕組みを感覚でつかめる」ように、図解イメージ＋コード実験付きで説明していく。ステップ...
JavaScript JavaScript | WeakMap / WeakSet の動作（GCで自動削除）を視覚化
以下は WeakMap / WeakSet の「自動ガベージコレクション（GC）によりエントリが消える様子を視覚化するデモページ」 です。実際のブラウザでは GC の発生タイミングは制御できないため、...
JavaScript JavaScript | 実際に Map / Set を操作するデモ
ラウザ上で 実際に Map / Set を操作して結果をリアルタイム表示できるインタラクティブデモ（HTML + JavaScript） です。「値の追加」「削除」「存在確認」などを自分で試せます。 ...
JavaScript JavaScript |キー付きコレクション ミニテスト（Map vs Set）
「Map vs Set」理解チェック用の自動採点ミニ練習ページ（HTML＋JavaScript）」です。ブラウザでそのまま開くと、選択肢を選んで採点できます。 See the Pen Map vs S...
JavaScript 「Keyed collections（Map・Set・WeakMap・WeakSet）」学習ワークブック
JavaScript「Keyed Collections」ワークブック構成🏁 第1章：MapとSetの基本（初級）💡 学習ポイントオブジェクトとの違いMap と Set の作り方・基本操作（追加・削除...
JavaScript 配列メソッド 実践アプリ（HTML + JS）
配列メソッド実践アプリ（sort / splice / flat / find など） を ブラウザ上で自動採点できる練習ページ（HTML + JS） として作成します。配列メソッド 実践アプリ（HT...
JavaScript JavaScript | 「AsyncFunction（非同期関数）」の基本
async / await と「AsyncFunction（非同期関数）」の基本を、プログラミング初心者向けにやさしく解説します。1. まずはざっくり説明AsyncFunction（非同期関数） は、...
JavaScript 無料で使えるAPI（2025年版）
無料で使える汎用API 一覧（2025年版）分野API名無料プラン概要主な用途登録要否備考🌦️ 天気OpenWeatherMap API月1,000回リクエスト無料現在・予報・過去の天気データ要登録（...
JavaScript JavaScript | サーバーサイド（Node.js）で Accept-Language を使ってロケールを判定する方法
では「サーバーサイド（Node.js）で Accept-Language を使ってロケールを判定する方法」を見てみましょう。ゴールブラウザから送られてくる Accept-Language ヘッダー を...
JavaScript JavaScript | ユーザーのロケール（ブラウザやOSの設定言語）を自動で使って表示を切り替える方法
では「ユーザーのロケール（ブラウザやOSの設定言語）を自動で使って表示を切り替える方法」を見てみましょう。ゴールユーザーが日本語環境なら「◯分前」「昨日」など日本語で表示英語環境なら「5 minute...
JavaScript JavaScript | Intl.RelativeTimeFormat を使って分・時間・月など、さまざまな単位で相対時間を表示する方法
では「Intl.RelativeTimeFormat を使って分・時間・月など、さまざまな単位で相対時間を表示する方法」を見てみましょう。Intl.RelativeTimeFormat の基本form...
JavaScript JavaScript | Intl.RelativeTimeFormat を使って ‘◯日前’ や ‘in ◯ days’ を表示する方法
では「Intl.RelativeTimeFormat を使って '◯日前' や 'in ◯ days' を表示する方法」を見てみましょう。Intl.RelativeTimeFormat とはJavaS...
JavaScript JavaScript | Intl API を使って多言語フォーマット対応
では「Intl API を使って多言語フォーマット対応」を見てみましょう。これを使うと、金額や日付の表記を自動で言語・地域に合わせて整えてくれるので、実務でとても役立ちます。Intl.NumberFo...
JavaScript JavaScript | 翻訳辞書を用意して本格的に i18n（多言語対応）する方法
では「翻訳辞書を用意して本格的に i18n（多言語対応）する方法」を見てみましょう。ゴール言語ごとに翻訳辞書を用意する関数の中で「キー」を使って文言を取り出す日本語・英語以外にも簡単に拡張できる翻訳辞...
JavaScript JavaScript | JavaScriptで使える小さなCSVユーティリティ
短いコードで「CSVの読み込み（文字列→配列/オブジェクト）」と「書き込み（配列/オブジェクト→文字列）」を扱えるユーティリティです。標準ライブラリだけで動き、カンマ・ダブルクオート・改行に対応します...
JavaScript JavaScript | 3次元配列を図と例題で理解する
配列の中に配列、その中にまた配列。最初はややこしく見えるけれど、「箱の中に箱が入っていて、さらにその中に箱がある」と想像できたらぐっと楽になります。3次元配列は、データを「階層」と「位置」で整理するた...
JavaScript JavaScript | 「部分失敗時にログだけ出して続行」するコード例
ここでは 複数の非同期処理のうち、一部が失敗しても処理を止めず、成功した分だけ使うパターン を解説します。ポイントは Promise.allSettled + finally を使うことです。シナリオ...
JavaScript JavaScript | Promise.allSettled + finally で部分成功・部分失敗を安全に処理するフロー図
では 「Promise.allSettled + finally」 を使った場合の処理フローを、「部分成功・部分失敗を安全に処理する」観点で図解します。前提シナリオ3つの API を同時に呼び出す：f...
JavaScript JavaScript | 「Promise.all + finally」を図でフロー解説（成功／失敗ルート図付き）
では 「Promise.all + finally」 の処理フローを、初心者でも理解しやすい図で解説します。今回は「成功ルート」と「失敗ルート」の両方を示します。前提シナリオ3つの API を同時に呼...
JavaScript JavaScript | 複数の fetch を並列で実行 → どれか失敗しても安全に処理を続ける
ここでは、複数の fetch を並列で実行して、どれか1つ失敗しても他を続行できる安全な書き方 を、初心者向けに丁寧に解説します。目的複数のAPIを同時に呼び出すとき、1つでも失敗すると全部が止まる ...
JavaScript JavaScript | finally と async/await の中で return や throw を組み合わせた高度な制御
ここでは async/await と finally を組み合わせたときの制御の流れ、特にreturn や throw を使うとどうなるか、を 具体的な例で丁寧に 解説します。目的try / catc...
JavaScript JavaScript | 非同期例外をデバッグで追う
ここでは、「非同期処理（fetch / async / Promise）で起きたエラーをデバッグで追う」 を、初心者にもわかるように ― 例題つきで ― 解説します。目的「非同期の中で発生したエラー（...
JavaScript JavaScript | 「複数のAPIを並列処理 → 一部失敗時に安全に処理を続ける」を実例で比較（良いコード / 悪いコード）
これは「非同期処理を複数まとめて実行しつつ、一部が失敗しても全体を止めずに進める」という実践的なテーマです。API連携やWebアプリで「部分的にデータ取得に失敗しても、取れる部分だけ表示したい」という...
JavaScript JavaScript | 「fetch＋async＋finally（後処理付き）」を実例で比較（良いコード / 悪いコード）
ここでは、「fetch × async/await × finally」 を組み合わせて、「通信成功・失敗どちらでも後処理を確実に実行する」コードを、初心者でも理解できるようにステップごとに解説します...
JavaScript JavaScript | 「非同期（fetch / async/await）での例外処理のコツ」と「よくある落とし穴」を実例で比較（良いコード / 悪いコード）
JavaScript の 非同期処理（fetch / async/await） の例外処理は、初心者がつまずきやすいポイントの一つです。ここでは、よくある「落とし穴」→「なぜダメか」→「良い書き方」を...
JavaScript JavaScript | 複数の fetch を並列で実行 → どれか失敗しても安全に処理を続ける
実務でも「finally の中で return や throw を書いてしまう」ミスは危険かつ気づきにくいため、ESLint（JavaScriptの静的解析ツール）で検出できるようにしておくのが効果的...
JavaScript JavaScript | Prettier＋ESLintを共存させて競合を防ぐ設定
Prettier と ESLint はどちらもコード整形・チェックを行いますが、ルールがかぶると競合して「保存時に勝手に戻される」などのトラブルが起きます。ここでは 競合を防ぎつつ両方を使う設定 をま...
JavaScript JavaScript | チーム全員で統一する VSCode 拡張＋設定テンプレート
チーム開発で VSCodeの拡張機能や設定を統一 するテンプレートを作ると、全員の開発環境で ESLint/Prettier のルールや警告が同じになり、コードスタイルの不一致やバグを減らせます。目的...
JavaScript JavaScript | Promise.all + finally の複合制御
ここは「複数の非同期処理（fetch など）をまとめて実行して、最後に共通の後処理をする」という実務で非常に役立つテクニックです。以下で、❌ 悪い例（落とし穴あり）✅ 良い例（安全で読みやすい制御）を...
JavaScript JavaScript | VSCodeで「保存時に自動修正＆警告表示」する設定（.vscode/settings.json）
では、VSCodeで 「保存時に自動修正」＋「リアルタイム警告」 を出す完全設定を、初心者にもわかるように丁寧に説明します。目的保存時に自動で ESLint を走らせて、コードの問題（例：finall...
JavaScript JavaScript | 引数の数に応じて処理を変える関数
では「引数の数に応じて処理を変える関数」を一緒に作ってみましょう。お題引数が 1つ → その値を 2倍引数が 2つ → 2つを 掛け算引数が 3つ以上 → 全部を 掛け算コード例（arguments ...
JavaScript JavaScript | eval() を使わずに安全に同じことをする方法
eval() を使わずに 安全に・再現可能に・制御された形で動的な振る舞いを実現する方法 を、実用的なパターンとサンプルコードで見せます。初心者でも試せるよう、短く分かりやすい例を中心にします。まとめ...
JavaScript JavaScript | 関数を文字列化して eval で実行するのがなぜ危険なのか
ここでは、「関数を文字列化して eval で実行するのがなぜ危険なのか」 を、実際に動かして確かめられるように、ブラウザでそのまま試せる 練習用サンプル（安全に体験できるデモ） を紹介します。目的to...
JavaScript JavaScriptとTypeScript
先にザックリ結論JavaScript（JS）：ブラウザやサーバ（Node.js）で動く「実行される言語」。動的で柔軟。今すぐ書いてすぐ動く。TypeScript（TS）：JavaScriptの上に「型...
JavaScript XserverにNode.jsを導入する方法
全体像：XserverでNode.jsを動かすとは何をしているのかまず前提として、Xserverは一般的な「レンタルサーバー」です。標準ではPHPやMySQLはすぐ使えますが、Node.jsはそのまま...
JavaScript JavaScript | タグでフィルタ表示の仕組み
「フォルダ内の画像をサムネイル化してHTMLギャラリーを作る」仕組みに、タグでフィルタ表示を加えます。これは JavaScript を少し組み合わせると実現できます。1. 基本の考え方各画像に「タグ情...
JavaScript JavaScript | 配列の中にオブジェクトを入れて管理する方法
ここからは「配列の中にオブジェクトを入れる」という、実践的なデータ管理方法を初心者向けに、イラスト的なイメージ＋実用的なコード例で丁寧に解説します！配列の中にオブジェクトを入れるとは？まず、オブジェク...
JavaScript JavaScript | 正規表現ステップアップ練習
では、初心者が手を動かしながら正規表現を学べるミニ課題集（全10問）を作り、それぞれステップごとに解説します。問題1：数字だけの文字列かチェック条件：文字列が 1桁以上の数字だけ で構成されているかヒ...
JavaScript JavaScript | 正規表現オブジェクト
主な内容の要点JavaScriptで正規表現を使うには「正規表現オブジェクト」を作成します。作り方は大きく2種類あり、/パターン/ と書く方法と new RegExp("パターン") を使う方法です。...
JavaScript JavaScript | 例外処理（try…catch） のポイント
主な内容の要点JavaScriptのtry...catchは、関数の中で発生したエラーも呼び出し元のtry...catchで捕まえられる。ただし、非同期処理（例：setTimeout）の中で起きたエラ...
JavaScript JavaScript | throw文
主な内容の要点JavaScriptでは、throw文を使うことで自分でエラー（例外）を発生させることができます。これにより「ここで処理を止めたい」「特定の条件でエラーを知らせたい」といった場面を自由に...
JavaScript JavaScript | 非同期（fetch / async）でのエラーの落とし穴（良い書き方・悪い書き方）を具体コード比較で示す
ここでは、「非同期処理（fetch / async）」でよくあるエラーの落とし穴を、「悪い書き方 → なぜダメか → 良い書き方」に整理して解説します。初心者がつまずきやすいポイントを中心に、実際のコ...
JavaScript JavaScript | 例外とエラーハンドリング
主な内容の要点JavaScriptではエラー（例外）がいくつかの種類に分かれていて、try...catchを使うと発生した例外をキャッチして処理できます。さらに、例外の種類ごとに処理を分けることができ...
JavaScript JavaScript | 例外処理（try…catch） の練習問題セット（初心者向け）
目的try…catch の基本、例外の伝搬（同期）、非同期コールバックでの落とし穴、Promise / async–await での例外処理を確実に理解すること。各問題は「問題 → 予想 → 実行例（...
JavaScript JavaScript | 非同期エラーの「良い書き方・悪い書き方」を比較するサンプル
ここでは、「非同期処理での例外（エラー）をどう扱うか」について、初心者がよくやってしまう「悪い書き方」と、実務的に安全な「良い書き方」を、コメント付きで比較解説します。テーマ：setTimeout な...
JavaScript JavaScript | try…catch…finally 文による例外処理
主な内容の要点JavaScriptのtry...catch...finallyは、エラーが起きてもプログラムを安全に続けるための仕組みです。特にfinallyは「必ず最後に実行される処理」を書けるのが...
JavaScript JavaScript | 非同期処理をブレークポイントで止める
初心者が 「非同期処理をブレークポイントで止める」 のは少し難しく感じますが、実はブラウザの開発ツール（DevTools）を使えば fetch や setTimeout の中の処理も止めて中身を確認 ...
JavaScript JavaScript | 「例外＋非同期」のデバッグ実践（Promise の中のエラー追跡）
ここからは、「例外 × 非同期処理（Promise・async/await）」で発生するエラーをデバッグする方法を、初心者向けにやさしく、具体例つきで解説します。（ブラウザ開発ツールを使った実践手順つ...
JavaScript JavaScript | 非同期エラーの落とし穴（Promise を返さない async と catch の罠）
JavaScript の「非同期エラー」まわりは、初心者が一番つまずくところの1つです。ここでは、Promise・async/await・try/catch の関係と、「Promise を返さない a...
JavaScript JavaScript | 例外のデバッグ方法
「例外（エラー）をデバッグする力」は、プログラミング初級から中級に進む大きなステップです。ここでは、「stack（スタックトレース）」の見方と活用方法を、初心者でもわかるようにかみ砕いて解説します。1...
JavaScript JavaScript | 例外処理（try…catch文）
主な内容の要点JavaScriptでエラーが起きるとプログラムが途中で止まってしまいます。これを防ぐために try...catch文 を使うと、エラーをキャッチして安全に処理を続けられます。ポイント解...
JavaScript JavaScript | デフォルト引数
JavaScriptのデフォルト引数「引数を渡し忘れても、賢く初期値が入る仕組み」がデフォルト引数です。関数のパラメータに「= 値」を書いておくと、その引数が未指定または undefined のときに...
JavaScript JavaScript | 可変長引数（rest パラメータ）
プログラミングを始めたばかりだと「…（ドット3つ）」が何をしているのか戸惑いますよね。rest パラメータは「引数の数が決まっていなくても関数で受け取れる」便利な仕組みです。例を交えながら、直感的に理...
JavaScript JavaScript | コールバック関数 と 高階関数
主な内容の要点JavaScriptでは「関数」を変数に入れたり、関数に渡したり、関数から返したりできます。こうした仕組みを使うと「コールバック関数」や「高階関数」が扱えるようになり、非同期処理やイベン...
JavaScript JavaScript | 「メモ化」を使って再帰関数を高速化する方法
ここでは、「メモ化（memoization）」を使って再帰関数を高速化する方法を、ステップ実行（呼び出しの流れを1つずつ追う）つきでわかりやすく解説します。そもそも「メモ化」とは？メモ化（memoiz...
JavaScript JavaScript | 「再帰関数」でツリー探索（Tree Traversal）
では今回は、再帰の「本領発揮」分野である ツリー探索（Tree Traversal） を、プログラミング初心者でも「実感して理解できる」ように、段階的にやさしく解説します。1. まず「ツリー構造」って...
JavaScript JavaScript | 再帰関数
主な内容の要点再帰関数とは「関数の中で自分自身を呼び出す関数」のことです。無限ループにならないように「終了条件」を必ず書くのが大事です。代表的な使い方は「階乗の計算」など、同じ処理を繰り返しながら少し...
JavaScript JavaScript | 関数関連の便利な仕組み・プロパティ
関数まわりの「ちょっと特殊な性質」を整理しておくと、JavaScript の理解がグッと深まります。初心者向けに、代表的なものをわかりやすくまとめますね。関数関連の便利な仕組み・プロパティ1. arg...
JavaScript JavaScript | 関数で受け取る引数の数を取得する
主な内容の要点JavaScript の関数には .length プロパティがあり、「その関数が定義時に受け取る引数の数」を調べることができます。ただし、実際に呼び出したときに渡された引数の数ではない点...
JavaScript JavaScript | 関数（関数定義）を 文字列として取得する方法
主な内容の要点JavaScript では、関数に対して .toString() を使うと、その関数の「中身（定義内容）」を文字列として取り出すことができます。つまり、関数がどんなコードで書かれているか...
JavaScript JavaScript | arguments を Array に変換して …rest と同じように扱う方法
ここでは「arguments を Array に変換して、...rest と同じように扱う方法」を初心者向けに、図＋実験つきでわかりやすく解説します。なぜ変換が必要なの？arguments は「配列の...
JavaScript JavaScript | arguments の内部挙動
arguments の「内部でどう動いているか」は、見た目より少し複雑で、実装や ECMAScript（仕様）のルールに依存します。ここでは 初心者〜中級者が知っておくと役立つレベル に噛み砕いて、実...
JavaScript JavaScript | arguments と strict mode の関係
arguments オブジェクトは 「通常モード」と「strict mode（厳格モード）」 で挙動が変わります。これは初心者がつまずきやすいポイントなので、やさしく整理して説明します。まず前提：st...
JavaScript JavaScript | arguments オブジェクト と 可変長引数（rest パラメータ） を比較
では arguments オブジェクト と 可変長引数（rest パラメータ ...rest） を、初心者向けにわかりやすく比較してみましょう。基本的な違い項目arguments オブジェクト...r...
JavaScript JavaScript | 関数で使う arguments オブジェクト の使い方
主な内容の要点JavaScript の arguments オブジェクトは、関数に渡された引数をまとめて扱える特別な仕組みです。引数の数が決まっていなくても、arguments を使えばすべての値を取...
JavaScript JavaScript | クラスの継承・オーバーライド・super とアロー関数の関係
では、クラスの継承・オーバーライド・super とアロー関数の関係を具体例で詳しく解説します。ポイントは「プロトタイプメソッドとアロー関数ではオーバーライドの挙動が違う」ということです。1. 基本：プ...
JavaScript JavaScript | クロージャ比較の図解
ここは Function コンストラクタで作った関数 と 通常の関数（関数リテラル／関数式） の「クロージャ（外側のローカル変数を覚えるかどうか）」を視覚的に比較する図解と説明ページです。目的なぜ n...
JavaScript JavaScript | 初心者が JavaScript の関数を練習するなら？
初心者が JavaScript の関数を練習するなら、次の順番で学ぶのが一番わかりやすく、実践的です。ステップ1：関数宣言（function 宣言）function greet(name) { ret...
JavaScript JavaScript | Function コンストラクタを使って関数を定義する
主な内容の要点JavaScript では function キーワード以外にも、Function コンストラクタを使って関数を作れる。ただし、実際の開発ではあまり使われない方法なので「こういう書き方も...
JavaScript JavaScript | クラス継承でアロー関数を使うときの実務的な注意点
では、クラス継承でアロー関数を使うときの実務的な注意点を整理してみましょう。特に React のクラスコンポーネントや、イベント処理を含むクラス設計でよく出てくる落とし穴です。通常メソッド vs アロ...
JavaScript JavaScript | クラスを継承して super 呼び出しの挙動を比較（アロー関数 vs 通常メソッド）
クラス継承における super 呼び出し は、アロー関数と通常メソッドで挙動が大きく変わります。基本ルール通常メソッドクラスのプロトタイプに登録される。super を使って親クラスのメソッドを呼び出せ...
JavaScript JavaScript | クラス内でアロー関数とプロトタイプメソッドを大量に作った場合のメモリの違い
それでは クラス内でアロー関数（class-field）とプロトタイプメソッドを大量に作った場合のメモリの違い をわかりやすく見てみましょう。実際に JS でインスタンスを作って比較するイメージです。...
JavaScript JavaScript | this の挙動を体系的に整理（グローバル・関数・メソッド・クラス・アロー関数）
それでは JavaScript における this の挙動を体系的に整理してみましょう。グローバル・関数・メソッド・クラス・アロー関数など、状況ごとにどう変わるかをマップのようにまとめます。1. グロ...
JavaScript JavaScript | classの継承（extends）
では「classの継承（extends）」について見ていきましょう。これを理解すると、オブジェクト指向の「再利用」と「拡張」ができるようになります。継承とは？あるクラスをもとにして、新しいクラスを作る...
JavaScript JavaScript | 関数リテラル（通常の function 式）とアロー関数の this の違い
JavaScriptにおける function式（関数リテラル） と アロー関数 の最大の違いのひとつが this の扱い です。初心者向けに整理してみますね。違いのまとめ種類this の決まり方特徴...
JavaScript JavaScript | 「class構文」と「関数リテラル／アロー関数」の関係を整理
では「class構文」と「関数リテラル／アロー関数」の関係を整理してみましょう。ここを押さえると、オブジェクト指向の理解がぐっと深まります。class構文とは？JavaScriptでオブジェクトを作る...
JavaScript JavaScript | 「アロー関数の使いどころと、あえて使わないほうがいい場面」を整理
では「アロー関数の使いどころ」と「あえて使わないほうがいい場面」を整理してみましょう。これを知っておくと、実際のコードで迷わなくなります。アロー関数を使うと便利な場面配列操作map, filter, ...
JavaScript JavaScript | アロー関数の省略ルール
それでは「アロー関数の省略ルール」を整理してみましょう。これを覚えると、コードがさらにスッキリ書けるようになります。アロー関数の省略ルール1. 引数が1つのときはカッコを省略できる// 通常let s...
JavaScript JavaScript | クラス内でアロー関数を使う理由
クラスの中でアロー関数を使う理由は、主に this の扱い にあります。初心者がよくつまずくポイントなので、例を交えて整理しますね。通常のメソッドとアロー関数の違い通常のメソッドclass Count...
JavaScript JavaScript | アロー関数とbindの違い
アロー関数とbindの違いを初心者向けに解説JavaScriptで「thisが思った通りにならない！」というときによく出てくるのが アロー関数 と bind。どちらも「thisを固定する」ために使われ...
JavaScript JavaScript | イベント処理での「普通の関数」と「アロー関数」の使い分け
イベント処理での「普通の関数」と「アロー関数」の使い分けイベント処理では「クリックされた要素をthisで参照したいのか」「外側のthisを保持したいのか」で、普通の関数とアロー関数を使い分けます。基本...
JavaScript JavaScript | クラスのメソッドをアロー関数にするメリットとデメリット
クラスのメソッドをアロー関数にするメリットとデメリットクラスの中でメソッドを「通常の関数」として書くか「アロー関数」として書くかで、挙動や効率が変わります。初心者向けに整理してみましょう。メリット（ア...
JavaScript JavaScript | クラスの中でアロー関数を使うとどうなるか
クラスの中でアロー関数を使うとどうなるかクラスの中でアロー関数を使うと、その関数のthisは「インスタンス」に固定されるという特徴が出てきます。これは普通のメソッド（通常の関数）との大きな違いです。基...
JavaScript JavaScript | アロー関数のthis
アロー関数のthisを初心者向けにやさしく解説JavaScriptを学び始めると「thisってややこしい！」と感じる人が多いです。特にアロー関数は、普通の関数とthisの動きが違うので混乱しやすいポイ...
JavaScript JavaScript | アロー関数 this のレキシカル束縛
アロー関数を理解するうえで最も重要なのが 「this のレキシカル束縛」（＝定義された場所の this をそのまま使う）です。ここでは、1️⃣ 通常の関数との違い2️⃣ 図解での理解3️⃣ 実際のコー...
JavaScript JavaScript | アロー関数
主な内容の要点JavaScriptの「アロー関数式」は、関数をよりシンプルに書ける新しい記法です。特に短い処理やコールバック関数を書くときに便利です。アロー関数の基本通常の関数式 let add = ...
JavaScript JavaScript | 「関数リテラル（無名関数）」と「アロー関数」の比較
「関数リテラル（無名関数）」と「アロー関数」は見た目が似ていますが、いくつか大事な違いがあります。初心者向けに整理してみましょう。書き方の違い種類書き方例関数リテラル（無名関数）let f = fun...
JavaScript JavaScript | 関数リテラル（無名関数）
主な内容の要点JavaScriptでは「関数リテラル」を使って、名前のない関数（無名関数）を変数に代入して利用できます。これにより、一度しか使わない処理や、関数を引数として渡す場面で便利です。ポイント...
JavaScript JavaScript | 関数はオブジェクト
主な内容の要点JavaScriptでは「関数」も特別な存在ではなく、オブジェクトの一種として扱われます。そのため、関数は「変数に代入できる」「別の変数にコピーできる」「引数として渡せる」といった柔軟な...
JavaScript JavaScript | 関数の定義と呼び出し位置
主な内容の要点JavaScriptの関数は「どこに書くか」「どの順番で呼び出すか」で動き方が変わります。基本は「関数を先に定義してから呼び出す」と覚えておくと安心です。ポイント整理関数定義と呼び出しの...
JavaScript JavaScript | 配列→オブジェクトにリファクタリングする手順とAPI設計視点での戻り値設計のベストプラクティス
配列→オブジェクトにリファクタリングする手順例題：配列で返す統計関数function calcStats(values) { const sum = values.reduce((a, b) => a...
JavaScript JavaScript | 「関数で複数の値を返す」というテクニックをAPI整形・フォーム検証など実務っぽい応用
ここからは、「関数で複数の値を返す」というテクニックを、実務で本当に使える APIデータ整形 や フォーム入力の検証 にどう活かすかを、初心者向けにわかりやすく紹介します。目的現実の開発では、関数は「...
JavaScript JavaScript | 関数の戻り値をさらに別の関数に渡す
では「関数の戻り値をさらに別の関数に渡す」練習に進みましょう。これはプログラムを組み合わせて使うときにとても大事な考え方です。ステップアップ練習例題1：計算結果を別の関数に渡すまずはシンプルな例から。...
JavaScript JavaScript | 関数から複数の値を返す方法
主な内容の要点JavaScriptで関数から複数の値を返す方法は「配列」と「分割代入」を使うことです。 初心者向けポイント関数の戻り値は1つだけJavaScriptの関数は return で返せる値は...
JavaScript JavaScript | 関数から値を返す（return文）
主な内容の要点JavaScriptの関数で使うreturnは、関数の処理結果を呼び出し元に返すための仕組みです。値を返す場合もあれば、処理を途中で終了させるためだけに使うこともできます。1. retu...
JavaScript JavaScript | 関数と参照渡しの注意点
主な内容の要点JavaScriptで関数に値を渡すとき、「数値や文字列」などの基本型はコピーが渡されるので元の変数は変わらない。一方で、「配列やオブジェクト」などの参照型は同じデータを共有するため、関...
JavaScript JavaScript | 「引数」を使って関数にデータを渡す
主な内容の要点JavaScriptの関数に値を渡すときに使う「引数」について解説されています。引数は関数にデータを渡す仕組みで、数が合わなくてもエラーにならず、工夫次第で柔軟に使えます。1. 引数の基...
JavaScript JavaScript | 関数の基本的な定義方法と使い方
主な内容の要点JavaScriptで関数を使うには、まず「定義」してから「呼び出す」必要があります。関数は「入力（引数）」を受け取り、「処理」を行い、「出力（戻り値）」を返す仕組みです。関数の基本定義...
JavaScript JavaScript | reduce と map/filter を組み合わせた応用パターン
ここでは、reduce と map／filter を組み合わせた実践的な使い方＋パフォーマンス面の注意を、初心者向けに かみ砕いて＋コード例つき で解説します。目標単純な合計だけでなく、「条件でしぼる...
JavaScript JavaScript | filter と reduce と組み合わせて集計処理を学ぶ
filter と reduce を組み合わせると、「条件で絞り込み → 集計」という流れをシンプルに書けます。実務でもよく使うパターンなので、例題を交えて説明します。基本の流れfilter: 配列から...
JavaScript JavaScript | 配列のすべての要素を合計する方法（reduce メソッド）
主な内容の要点JavaScriptで配列の合計を出すときは、reduceメソッドを使うのが便利です。配列の要素を順番に処理して、最終的に1つの値（合計など）を返してくれます。reduceメソッドの基本...
JavaScript JavaScript | map と filter の違い — 図（テキスト）＋コードで直感的に理解する
初心者向けにわかりやすく比較した“図”と短い解説、具体例です。まず全体像をザッと掴んで、下のコードで挙動を確認してください。図：処理のイメージ（左→右）元配列: [1, 2, 3, 4]map: 各要...
JavaScript JavaScript | 配列の中から「条件を満たす要素だけ」を取り出して、新しい配列を作る
主な内容の要点JavaScript の filter メソッドを使うと、配列の中から「条件を満たす要素だけ」を取り出して、新しい配列を作ることができます。元の配列は変わりません。基本の使い方let 新...
JavaScript JavaScript | for 文で書いた処理を map / filter / reduce に書き換える
では「for 文で書いた処理を map / filter / reduce に書き換える練習問題」を用意します。初心者でも段階的に理解できるようにしてみます。練習問題 1：配列の要素を2倍にするfor...
JavaScript JavaScript | map / filter / forEach / reduce まとめ
では「配列メソッド4兄弟」＝ map / filter / forEach / reduce をまとめてみましょう。4つのメソッドの役割メソッド返り値主な用途特徴map新しい配列要素を「変換」する元の...
JavaScript JavaScript | map() メソッドを使った 実践的な例
ここでは、JavaScript の map() メソッドを使った 実践的な例 を、プログラミング初心者でもわかるようにステップごとに解説します。今回のテーマはこの2つ👇数値を10倍にする（基本の変換例...
JavaScript JavaScript | 配列操作でよく出てくる map / filter / forEachの使い分け
JavaScript の配列操作でよく出てくる map / filter / forEach は似ているようで役割が違います。初心者向けに整理してみましょう。ざっくりイメージmap → 「変換」：配列...
JavaScript JavaScript | すべての要素に順番に同じ処理を行い、新しい配列を作る
主な内容の要点map メソッドのポイント役割配列のすべての要素に「同じ処理」を順番に行い、その結果を集めた 新しい配列 を作る。元の配列は変わらないmap は新しい配列を返すだけで、元の配列はそのまま...
JavaScript JavaScript | 配列における要素の並び替え方法（reverse / sort）
主な内容の要点1. reverseメソッド使い方: 配列.reverse()配列の要素を 逆順 に並べ替える。新しい配列を返すのではなく、元の配列そのものが書き換わる。例: let fruits = ...
JavaScript JavaScript | 配列の全要素を連結して文字列を得る方法
主な内容の要点1. join() メソッド配列の要素を 文字列に変換してつなげる ことができる書き方： 配列名.join(区切り文字);区切り文字を指定しないと カンマ ( , ) でつながる区切り文...
JavaScript JavaScript | slice() とよく比較される splice() の違い
slice() と splice() は名前が似ているので混乱しやすいですが、性質はまったく違います。初心者向けに整理するとこうなります。slice() と splice() の違い項目slice()...
JavaScript JavaScript | 配列の一部をコピーして、新しい配列を作る（slice メソッド）
主な内容の要点slice() メソッドの基本役割：配列の一部をコピーして、新しい配列を作る元の配列は変わらない（非破壊的）使い方array.slice()array.slice(開始位置)array....
JavaScript JavaScript | 配列の要素を条件で調べる便利メソッドまとめ
主な内容の要点JavaScript には、配列の中から「条件に合う要素」を探したり、チェックしたりするためのメソッドが用意されています。代表的なのは次の4つです。1. findIndex() — 条件...
JavaScript JavaScript | find / filter / some / every — 図解でスッキリ理解
初心者向けに、違いを「何を返すか」「いつ使うか」「挙動の図」をコード例つきでまとめます。イメージしやすいように同じデータで比較します。const users = [ { name: '太郎', age...
JavaScript JavaScript | indexOf() / lastIndexOf() / includes() / find() / findIndex() と比較して、どれをいつ使うか図解で説明
indexOf() / lastIndexOf() に続いて、includes()、find()、findIndex() は「配列から値や条件に合う要素を探す」ときによく使われるメソッドです。初心者で...
JavaScript JavaScript | indexOf() と lastIndexOf() を「実際のアプリでどう使えるのか？」
では、indexOf() と lastIndexOf() を「実際のアプリでどう使えるのか？」を、シンプルな TODO リスト例 でやさしく解説していきましょう。目標「同じタスクが二重登録されないよう...
JavaScript JavaScript | 配列の中身を検索（indexOf / lastIndexOf）
主な内容の要点1. indexOf メソッド配列の 先頭から 指定した値を探す見つかったらその 位置（インデックス番号） を返す見つからなければ -1 を返す書き方： 配列.indexOf(値);配列...
JavaScript JavaScript | 配列メソッドの使い分け（map / forEach / filter / reduce の違い）
いいテーマです！配列メソッドは「どれを使えばいいのか」が最初は混乱しやすいポイント。ここでしっかり整理しておきましょう。配列メソッドの使い分けメソッド目的戻り値使いどころサンプルコードforEach配...