概要
このアプリでは：
- ユーザーが「式（例：
'0' == false）」を入力 - 実際に評価して結果を表示
- 型変換のステップを可視化（アニメーションつき）
- 全10問の練習問題モード＋採点機能つき
See the Pen Interactive Practice App for Equivalence Operators and Strict Equivalence Operators by MONO365 -Color your days- (@monoqlo365) on CodePen.
特徴
| 機能 | 内容 |
|---|---|
| 🔍 可視化モード | 型変換・比較の流れをステップでアニメーション表示 |
| 🧩 練習モード | 10問の true/false クイズ＋自動採点＋全問正解アニメ |
| 💡 即時評価 | evalで実際に結果を計算して色付きで表示 |
| 🎨 UI | シンプル・カード風デザイン・ボタンやアニメーション付き |
拡張内容
1. 型の色分け表示モード（可視化）
- 数値・文字列・真偽値などを 色で区別。
| 型 | 表示色 | 例 |
|---|---|---|
| number | 🟦 青 | 10 |
| string | 🟨 黄 | "10" |
| boolean | 🟩 緑 | true |
| undefined | ⚪ 灰 | undefined |
| object / null | 🟧 橙 | {} / null |
2. 型変換シミュレーター
==のときに どのように型変換が行われたか をステップで表示。- 変換アニメーション例：
"10" → Number("10") → 10 ✅
null == undefined → 特別ルール → true ✅
3. 学習ガイドモード
- 「はじめて学ぶ人」向けに、学習ステップを段階的に提示。
- チュートリアル進行例：
1️⃣ 値の入力
2️⃣ 型の確認
3️⃣ 比較演算（==/===）を選択
4️⃣ 実行 → 結果＋説明が出る
See the Pen Interactive Practice App for Equivalence Operators and Strict Equivalence Operators #2 by MONO365 -Color your days- (@monoqlo365) on CodePen.
学習ガイドおすすめの進め方
1️⃣ まずは型を確認するモード：typeof で「数値」「文字列」「真偽値」などを色で区別
2️⃣ == を試すモード：型変換の流れを見てみよう
3️⃣ === に切り替えて比較：違いを体感
4️⃣ 練習課題モード（中級・上級）に進む
See the Pen Interactive Practice App for Equivalence Operators and Strict Equivalence Operators #3 by MONO365 -Color your days- (@monoqlo365) on CodePen.
特徴まとめ
| 機能 | 内容 |
|---|---|
| 学習モード | 値と演算子入力で型変換の流れをアニメーションで逐次表示 |
| 型色分け | 数値・文字列・真偽値・null・undefinedを色分け表示 |
| 中級・上級問題 | 10問の true/false クイズをアプリ内で実行 |
| 結果説明 | 「== と === の違い」など学習ガイド付き |
| スコア機能 | 全問正解時にアニメーション表示 |
See the Pen Interactive Practice App for Equivalence Operators and Strict Equivalence Operators #4 by MONO365 -Color your days- (@monoqlo365) on CodePen.
追加機能
1️⃣ ヒントボタン
- 問題に対して、間違えそうなポイントや型変換ステップを表示
2️⃣ 矢印アニメーション付きステップ可視化
- 型変換の流れを逐次的に「値 → 型変換 → 比較結果」と矢印で表示
- 例：
"0" → Number("0") → 0
false → Number(false) → 0
0 == 0 → true
3️⃣ ランダム生成問題
- 中級・上級問題を毎回ランダムに並べ替え
- 何度でも学習可能
