JavaScript

以下は WeakMap / WeakSet の「自動ガベージコレクション（GC）によりエントリが消える様子を視覚化するデモページ」 です。実際のブラウザでは GC の発生タイミングは制御できないため、FinalizationRegistry...

ラウザ上で 実際に Map / Set を操作して結果をリアルタイム表示できるインタラクティブデモ（HTML + JavaScript） です。「値の追加」「削除」「存在確認」などを自分で試せます。 See the Pen Map/Set ...

「Map vs Set」理解チェック用の自動採点ミニ練習ページ（HTML＋JavaScript）」です。ブラウザでそのまま開くと、選択肢を選んで採点できます。 See the Pen Map vs Set Mini Practice Pro...

JavaScript「Keyed Collections」ワークブック構成🏁 第1章：MapとSetの基本（初級）💡 学習ポイントオブジェクトとの違いMap と Set の作り方・基本操作（追加・削除・取得・確認）🧩 練習問題（例）Map ...

async / await と「AsyncFunction（非同期関数）」の基本を、プログラミング初心者向けにやさしく解説します。1. まずはざっくり説明AsyncFunction（非同期関数） は、JavaScript で「非同期処理（時...

では「サーバーサイド（Node.js）で Accept-Language を使ってロケールを判定する方法」を見てみましょう。ゴールブラウザから送られてくる Accept-Language ヘッダー を使ってユーザーの希望言語を判定そのロケー...

では「ユーザーのロケール（ブラウザやOSの設定言語）を自動で使って表示を切り替える方法」を見てみましょう。ゴールユーザーが日本語環境なら「◯分前」「昨日」など日本語で表示英語環境なら「5 minutes ago」「yesterday」など英...

では「Intl.RelativeTimeFormat を使って分・時間・月など、さまざまな単位で相対時間を表示する方法」を見てみましょう。Intl.RelativeTimeFormat の基本format(value, unit) で相対時...

では「Intl.RelativeTimeFormat を使って '◯日前' や 'in ◯ days' を表示する方法」を見てみましょう。Intl.RelativeTimeFormat とはJavaScript の組み込み国際化 API「3...

では「Intl API を使って多言語フォーマット対応」を見てみましょう。これを使うと、金額や日付の表記を自動で言語・地域に合わせて整えてくれるので、実務でとても役立ちます。Intl.NumberFormat で金額をフォーマット// 日本...

では「翻訳辞書を用意して本格的に i18n（多言語対応）する方法」を見てみましょう。ゴール言語ごとに翻訳辞書を用意する関数の中で「キー」を使って文言を取り出す日本語・英語以外にも簡単に拡張できる翻訳辞書の例const translation...

短いコードで「CSVの読み込み（文字列→配列/オブジェクト）」と「書き込み（配列/オブジェクト→文字列）」を扱えるユーティリティです。標準ライブラリだけで動き、カンマ・ダブルクオート・改行に対応します。コード// CSVを配列の配列へ変換（...

配列の中に配列、その中にまた配列。最初はややこしく見えるけれど、「箱の中に箱が入っていて、さらにその中に箱がある」と想像できたらぐっと楽になります。3次元配列は、データを「階層」と「位置」で整理するための強力な道具です。3次元配列のイメージ...

ここでは 複数の非同期処理のうち、一部が失敗しても処理を止めず、成功した分だけ使うパターン を解説します。ポイントは Promise.allSettled + finally を使うことです。シナリオ3つの API を並列で呼び出す：/ap...

では 「Promise.allSettled + finally」 を使った場合の処理フローを、「部分成功・部分失敗を安全に処理する」観点で図解します。前提シナリオ3つの API を同時に呼び出す：fetchUser()fetchPosts...

では 「Promise.all + finally」 の処理フローを、初心者でも理解しやすい図で解説します。今回は「成功ルート」と「失敗ルート」の両方を示します。前提シナリオ3つの API を同時に呼び出す：fetchUser()fetch...

ここでは、複数の fetch を並列で実行して、どれか1つ失敗しても他を続行できる安全な書き方 を、初心者向けに丁寧に解説します。目的複数のAPIを同時に呼び出すとき、1つでも失敗すると全部が止まる 😱（＝悪い例）失敗したものだけスキップし...

ここでは async/await と finally を組み合わせたときの制御の流れ、特にreturn や throw を使うとどうなるか、を 具体的な例で丁寧に 解説します。目的try / catch / finally は、async ...

ここでは、「非同期処理（fetch / async / Promise）で起きたエラーをデバッグで追う」 を、初心者にもわかるように ― 例題つきで ― 解説します。目的「非同期の中で発生したエラー（例外）」を stack trace（スタ...

これは「非同期処理を複数まとめて実行しつつ、一部が失敗しても全体を止めずに進める」という実践的なテーマです。API連携やWebアプリで「部分的にデータ取得に失敗しても、取れる部分だけ表示したい」という場面で頻出します。目標複数の fetch...

ここでは、「fetch × async/await × finally」 を組み合わせて、「通信成功・失敗どちらでも後処理を確実に実行する」コードを、初心者でも理解できるようにステップごとに解説します。ゴール✅ 非同期処理での try......

JavaScript の 非同期処理（fetch / async/await） の例外処理は、初心者がつまずきやすいポイントの一つです。ここでは、よくある「落とし穴」→「なぜダメか」→「良い書き方」を、具体コードで比較しながら、ていねいに解...

実務でも「finally の中で return や throw を書いてしまう」ミスは危険かつ気づきにくいため、ESLint（JavaScriptの静的解析ツール）で検出できるようにしておくのが効果的です。目的「finally の中で re...

Prettier と ESLint はどちらもコード整形・チェックを行いますが、ルールがかぶると競合して「保存時に勝手に戻される」などのトラブルが起きます。ここでは 競合を防ぎつつ両方を使う設定 をまとめます。目的ESLint でコードの安...

チーム開発で VSCodeの拡張機能や設定を統一 するテンプレートを作ると、全員の開発環境で ESLint/Prettier のルールや警告が同じになり、コードスタイルの不一致やバグを減らせます。目的全員が同じルールで自動整形・警告を受け取...

ここは「複数の非同期処理（fetch など）をまとめて実行して、最後に共通の後処理をする」という実務で非常に役立つテクニックです。以下で、❌ 悪い例（落とし穴あり）✅ 良い例（安全で読みやすい制御）を対比しながら、Promise.all と...

では、VSCodeで 「保存時に自動修正」＋「リアルタイム警告」 を出す完全設定を、初心者にもわかるように丁寧に説明します。目的保存時に自動で ESLint を走らせて、コードの問題（例：finally内のreturn）を即警告修正できるも...

では「引数の数に応じて処理を変える関数」を一緒に作ってみましょう。お題引数が 1つ → その値を 2倍引数が 2つ → 2つを 掛け算引数が 3つ以上 → 全部を 掛け算コード例（arguments を使う場合）function smart...