2025-10-14

スポンサーリンク
JavaScript

JavaScript |自分でクラスを書いて、プロトタイプチェーンを視覚的に見られる実験ツール

以下は HTML + JavaScript で動く、初心者向けの「クラス構造可視化アプリ」です。ブラウザに貼り付けて動かすだけで、class の仕組みと prototype チェーンがリアルタイムで見られます。 See the Pen Vi...
JavaScript

JavaScript | 「オブジェクトの構造」と「thisの動き」

図解つきで「オブジェクトの構造」と「thisの動き」をわかりやすく説明します。テキストアート+アニメーションイメージ風で解説します。JavaScript オブジェクトの構造1. オブジェクトの中身のイメージオブジェクトは「名前つきの箱の集ま...
JavaScript

JavaScript | 実践:クラス継承 vs プロトタイプ継承の内部比較

ここでは、「クラス継承(class 構文)」と「プロトタイプ継承(prototype 直接操作)」の内部の違いを、初心者向けに「動作の中身」が見えるようにステップで比較していきます。まずは全体イメージ比較項目クラス継承(class)プロトタ...
JavaScript

JavaScript | プロトタイプ継承」アニメーション

JavaScript の「プロトタイプ継承」は、初心者が「?」となりやすいけど、実際に“矢印でつながる”動きを見ると一気に理解できる部分なんです。プロトタイプ継承とは?🧠 一言で言うと…「オブジェクトが、親(=プロトタイプ)のプロパティやメ...
JavaScript

JavaScript | 「thisの仕組み」をアニメーション付きで図解

「thisの仕組み」は JavaScript 初心者が最初につまずく代表ポイント です。ここでは、🧭 直感的なアニメーション(矢印と動き)+図解🧩 実際にブラウザで動くデモコード(HTML + JS)の両方で説明します。thisとは何か?t...
JavaScript

JavaScript | プロトタイプと継承の「中の仕組み」や「落とし穴」

ここまで理解しているなら、プロトタイプと継承の「中の仕組み」や「落とし穴」を丁寧に掘り下げていける段階。初心者でも「仕組みを感覚でつかめる」ように、図解イメージ+コード実験付きで説明していく。ステップ1:プロトタイプチェーンの「中身」を見て...
JavaScript

JavaScript | WeakMap / WeakSet の動作(GCで自動削除)を視覚化

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

JavaScript | 実際に Map / Set を操作するデモ

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

JavaScript |キー付きコレクション ミニテスト(Map vs Set)

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

「Keyed collections(Map・Set・WeakMap・WeakSet)」学習ワークブック

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