JavaScript
無料で使えるAPI（2025年版）
JavaScript
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...