Java
Java | 1 日 90 分 × 7 日アプリ学習 初級編：ミニToDoアプリ（CUI）
2025-10
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 を「定義場所（レキシカル）」から拾う 特性があるので、クラスのイン...
React React/Vue | Reactなどのフレームワークでの this とアロー関数の使われ方
では「Reactなどのフレームワークでの this とアロー関数の使われ方」を整理してみましょう。Reactは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...
Java Java | フラグ管理を使ったメニューのON/OFFを作るステップ実装
では ビット演算でフラグ管理をする実践例 を、ステップごとに初心者向けに作ってみましょう。今回は「メニューの ON/OFF」を管理する例です。1. 何を作るか3つの機能（メニュー）があります：音楽効果...
JavaScript JavaScript | 「複数条件（AND / OR / NOT / ??）」を クリック操作で体験できるサンプル
この教材では、ボタンを押すと条件が切り替わり、リアルタイムで if の判定結果が表示されるようにします 。 See the Pen Multiple conditions (AND / OR / ??...
Java Java | ビット演算・シフト演算の練習問題セット
それでは、プログラミング初心者向けにビット演算・シフト演算の練習問題セットを作り、採点付きWebテスト（HTML＋JavaScript）形式にします。このテストのポイントビット演算（&, |, ^, ...
Java Java | 逆順処理でよくあるバグ集
では「逆順処理でよくあるバグ（境界条件ミスや IndexOutOfBounds）」を整理してみます。1. 境界条件の off-by-one エラーfor (int i = arr.length - 1...
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 ...
Java Java | 実務で for文 と foreach/Stream をどう使い分けるか
for文 vs foreach / Stream の使い分けでは「実務で for文 と foreach/Stream をどう使い分けるか」の判断基準を整理します。1. インデックスが必要かどうか必要な...
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）で、インデックスがスライドして、選...
Java Java | 論理演算子を使った「採点付きミニ演習プログラム」
では、Java の論理演算子を使った「採点付きミニ演習プログラム」を作りましょう。このプログラムは、ユーザーが入力した点数をもとに「合格／不合格」や「特待生」などを判定します。論理演算子 &&, ||...
Java Java | インクリメント／デクリメント理解度チェックテスト
Java理解度チェックテスト（インクリメント／デクリメント）ではこの「インクリメント／デクリメント理解度チェックテスト」を、Java コンソールアプリ形式でつくりましょう。初心者でもそのまま コピペし...
Java Java | Java の型推論 var を使った実践例
ここでは、Java の型推論 var を使った実践例 5つを、初心者にも分かりやすく・実用的にまとめます。各サンプルはすぐ動かせるコード付きです。（Java 10以降対応）① ループ（for文）での ...
Java Java | インクリメント/デクリメントを使わずに済ませる、よりモダンで安全な書き方
インクリメントを使わないモダンな書き方では「インクリメント/デクリメントを使わずに済ませる、よりモダンで安全な書き方」を紹介します。1. 拡張 for文（foreach）配列やリストを順番に処理するな...
Java Java | レビューで「褒められる」インクリメントの使い方
レビューで褒められるインクリメントの使い方では「レビューで“褒められる”インクリメント/デクリメントの使い方（良い例集）」をまとめます。1. for文の基本形for (int i = 0; i < l...
Java Java | 実際の現場でレビューで指摘されやすい「インクリメントのアンチパターン集」
インクリメント/デクリメントのアンチパターン集では「実務でレビューでよく指摘されるインクリメント/デクリメントのアンチパターン集」をまとめます。1. 条件式に直接書くwhile (i++ < arr....
Java Java | インクリメント/デクリメントを安全に使うためのリファクタリング例（悪いコード → 良いコード）
インクリメント/デクリメントのリファクタリング例では「悪いコード → 良いコード」のリファクタリング例を紹介します。実務でありがちな“インクリメント/デクリメントの危険な使い方”を、安全で読みやすい形...
Java Java | 実務でよくあるインクリメント関連のバグパターン
実務でよくあるインクリメント関連のバグパターンでは「実務でありがちなインクリメント忘れや境界条件ミス」の典型例を整理してみましょう。1. インクリメント忘れによる無限ループint i = 0;whil...
Java Java | 実務でよく使うインクリメントの具体的なパターン集
実務でよく使うインクリメントのパターン集では「実務でよく使うインクリメントの具体的なパターン集」を整理してみましょう。1. for文のカウンタ最も典型的な使い方。配列やリストを順番に処理する。for ...
Java Java | 実務で安全にインクリメント/デクリメントを使うための最善の方法
インクリメント/デクリメントのベストプラクティス集実務で安全にインクリメント/デクリメントを使うためのベストプラクティス集を整理しました。1. ループのカウンタは i++ に統一for (int i ...
Java Java | オーバーフローを実験するJavaプログラム
では「オーバーフローを実験するJavaプログラム」を、初心者でも理解しやすいように作ってみましょう。（「オーバーフロー」とは、変数に入る最大の値を超えてしまったときに、値が反対側に回り込んでしまう現象...
Java Java | 「オートボクシングでのパフォーマンス」や「キャッシュ範囲の仕組み（-128〜127）」をコードで実験
では ①キャッシュの仕組みの確認（-128〜127） と ②オートボクシングのパフォーマンス比較（プリミティブ vs ラッパー） を実験するための Java の実行可能なコード を用意します。手元のJ...
Java Java | 複数の入力をまとめて List に格納するサンプル
ここでは 複数の入力をまとめて List<Integer> に格納するサンプル を紹介します。「Scannerで文字列として入力 → 数値に変換 → Listに追加」という流れです。サンプルコード：複...
Java Java | 実際の入力処理（Scannerで文字列を読み込んで数値に変換する例
実際に ユーザー入力（文字列）を Scanner で受け取り → 数値に変換 → オブジェクトとして扱う 流れをまとめます。入力処理の基本（Scannerを使う）例1: 整数入力 → int と In...
Java Java | 「NaN」「Infinity」など特殊値
Javaの特殊値とは？Javaでは、浮動小数点型（floatやdouble）に以下の特殊値が存在します：特殊値説明生成例Double.POSITIVE_INFINITY正の無限大1.0 / 0.0Do...
Java Java | 全ラッパークラス（Integer, Double, Boolean, etc.）ごとの変換例まとめ表
Javaの 全ラッパークラス（基本型と対応するクラス）について、「文字列 ⇄ 数値 ⇄ オブジェクト」変換の代表例 を一覧表にまとめました。ラッパークラス変換パターン一覧基本型ラッパークラス文字列 →...
Java Java | 文字列 ⇄ 数値 ⇄ ラッパークラスのオブジェクト
Javaの 「文字列 ⇄ 数値 ⇄ ラッパークラスのオブジェクト」 の変換パターンを、初心者でも見やすいように表にまとめました。変換パターン一覧表変換方向サンプルコード説明文字列 → 数値（基本型）i...
Java Java | 小数の丸め誤差
では、Javaの 小数の丸め誤差（浮動小数点誤差） を、初心者でも理解できるように 簡単なコードと図イメージ で説明します。背景：丸め誤差とは？Javaの float / double は 二進数で小...
Java Java | 桁区切りの正しい書き方と数値の意味を同時に学習できるツール
このツールを使えば、初心者でも 桁区切りの正しい書き方と数値の意味を同時に学習できます。import java.util.Scanner;public class UnderscoreLearning...
VBA Excel VBA | フィールド定義表から自動でチェックを組み立てる仕組み（メタデータ駆動）
毎回コードに「必須」「数値」「日付」などのチェックを書き込むのは大変です。そこで 「フィールド定義表」＝各列のルールを表にまとめておき、マクロはその定義を読み取って自動的にチェックを実行する 仕組みを...
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...