JavaScript

スポンサーリンク
JavaScript

JavaScript | forEachを使ってWeb画面にデータを表示するミニアプリ

では次は、forEach を実践で使いこなす練習用のミニアプリを一緒に作っていきましょう！テーマ：ユーザーリストを表示して、検索＆並び替えできるアプリ（HTML + CSS + JavaScript だけで動く、初心者向けのシンプル構成）学...
2025.10.26
JavaScript
JavaScript

JavaScript | 「平均・分散・標準偏差・範囲内の割合」をまとめて返す 統計サマリー関数

では「統計サマリー関数」を作ってみましょう。これは 平均・分散・標準偏差・範囲内の割合 をまとめて返す関数です。目標平均値を計算分散を計算標準偏差を計算平均 ± 1, 2, 3 標準偏差の範囲に入るデータの割合（%）を計算まとめてオブジェク...
2025.10.26
JavaScript
JavaScript

JavaScript | 「平均 ± 3標準偏差の範囲に入るデータの数」を数える関数

では「平均 ± 3標準偏差の範囲に入るデータの数」を数える関数を作ってみましょう。これは統計でよく言われる 68-95-99.7ルール の「99.7%」に対応します。目標平均値を求める標準偏差を求める範囲 = を計算その範囲に入る要素の数を...
2025.10.26
JavaScript
JavaScript

JavaScript | 「平均 ± 2標準偏差の範囲に入るデータの数」を数える関数

では「平均 ± 2標準偏差の範囲に入るデータの数」を数える関数を作ってみましょう。これは統計でよく使われる 68-95-99.7ルール（経験則）の「95%」に対応する部分です。目標平均値を求める標準偏差を求める範囲 = を計算その範囲に入る...
2025.10.26
JavaScript
JavaScript

JavaScript | 平均 ± 標準偏差の範囲に入るデータの数を数える関数

では「平均 ± 標準偏差の範囲に入るデータの数を数える関数」を作ってみましょう。これは 標準偏差を使ったデータ分析 の基本的な応用です。目標平均値を求める標準偏差を求める範囲 = を計算その範囲に入る要素の数を数える✅ 模範解答（for文バ...
2025.10.26
JavaScript
JavaScript

JavaScript | 標準偏差を計算する関数

では「標準偏差を計算する関数」を作ってみましょう。標準偏差は 分散の平方根 で、データのばらつきを直感的に理解しやすい指標です。目標配列の平均値を求める偏差の二乗の平均（＝分散）を求める分散の平方根を返す（＝標準偏差）✅ 模範解答（for文...
2025.10.26
JavaScript
JavaScript

JavaScript | 分散を計算する関数

では「標準偏差を計算する関数」を作ってみましょう。標準偏差は 分散の平方根 で、データのばらつきを直感的に理解しやすい指標です。目標配列の平均値を求める偏差の二乗の平均（＝分散）を求める分散の平方根を返す（＝標準偏差）✅ 模範解答（for文...
2025.10.26
JavaScript
JavaScript

JavaScript | 分散を計算する関数

では「分散を計算する関数」を作ってみましょう。これは 偏差の二乗の平均 を求めることで、データのばらつきを数値化する練習です。目標配列の平均値を求める各要素の偏差（二乗）を計算するその二乗の平均値を返す（＝分散）✅ 模範解答（for文バージ...
2025.10.26
JavaScript
JavaScript

JavaScript | 偏差の二乗を計算して返す関数

では「偏差の二乗を計算して返す関数」を作ってみましょう。これは 分散や標準偏差 を求めるための第一歩になります。目標配列の平均値を求める各要素の「偏差（要素 − 平均値）」を計算するその偏差を二乗して新しい配列に入れる✅ 模範解答（for文...
2025.10.26
JavaScript
JavaScript

JavaScript | 「配列の要素を削除」練習アプリ

See the Pen “Delete Array Element” Practice App by MONO365 -Color your days- (@monoqlo365) on CodePen. See the Pen “Dele...
2025.10.25
JavaScript
JavaScript

JavaScript | 多次元配列を HTML の に変換して表示する方法

ここでは、多次元配列を HTML の <table> に変換して表示する方法を、初心者向けにステップで解説します。ブラウザでそのままコピペして試せます。1️⃣ HTMLの基本構造<!DOCTYPE html><html lang="ja">...
2025.10.25
JavaScript
JavaScript

JavaScript | 「複数条件（AND / OR / NOT / ??）」を クリック操作で体験できるサンプル

この教材では、ボタンを押すと条件が切り替わり、リアルタイムで if の判定結果が表示されるようにします 。 See the Pen Multiple conditions (AND / OR / ?? ) by MONO365 -Color...
2025.10.25
JavaScript
JavaScript

JavaScript | do…while文を使い初心者向けのサイコロゲーム練習セット

では、初心者向けに サイコロゲーム練習セット を作ります。ポイントは：HTML・JavaScriptは分離ボタンでサイコロを振る出た目を表示条件変更で応用問題に挑戦可能1️⃣ HTMLファイル（index.html）<!DOCTYPE ht...
2025.10.24
JavaScript
JavaScript

JavaScript | typeof演算子 学習アプリ

See the Pen typeof Operator Learning App by MONO365 -Color your days- (@monoqlo365) on CodePen. 学べる内容typeof 演算子の使い方と結果デー...
2025.10.24
JavaScript
JavaScript

JavaScript | 文字列の連結（+演算子）練習セット

この教材は、JavaScript の「+」演算子による 文字列の連結 を学ぶための初心者向け教材です。 See the Pen String Concatenation (+ Operator) Practice Set by MONO36...
2025.10.24
JavaScript
JavaScript

JavaScript | 条件演算子 練習ツール

ブラウザ上でリアルタイムに結果が見られる条件演算子 練習ツール。ユーザーが値を入力すると、条件演算子で判定した結果がその場で表示されるようにします。ブラウザ上で数値や文字列を入力すると、条件判定がどのステップで true/false になる...
2025.10.24
JavaScript
JavaScript

JavaScript | 論理演算子のミニ練習アプリ

では、ブラウザ上で動かせる論理演算子のミニ練習アプリを作ります。ポイントは以下です：入力欄に値を入力「チェック」ボタンで条件判定結果を画面に表示&&, ||, ! の挙動を体験できる以下は HTML + JavaScript のサンプルです...
2025.10.24
JavaScript
JavaScript

JavaScript | 「論理演算子」の学習に使える可視化アニメ教材

では、「論理演算子（AND・OR・NOT）」の学習に使える可視化アニメ教材モード付きの解説＋練習問題セット を作ります。論理演算子とは？JavaScriptの論理演算子は、「条件を組み合わせて真（true）か偽（false）を判定」するため...
2025.10.24
JavaScript
JavaScript

JavaScript | 「等価演算子・厳密等価演算子」のインタラクティブ練習アプリ

概要このアプリでは：ユーザーが「式（例：'0' == false）」を入力実際に評価して結果を表示型変換のステップを可視化（アニメーションつき）全10問の練習問題モード＋採点機能つき See the Pen Interactive Prac...
2025.10.23
JavaScript
JavaScript

JavaScript | ビット演算・シフト演算をリアルタイムで見られるアニメ付き教材

では、ビット演算・シフト演算をリアルタイムで見られるアニメ付き教材 を、ブラウザで動く HTML + JavaScript で作ります。この教材では、数値を入力するとビットがスライドしたり、AND・OR・XOR・NOT・シフト演算の結果がす...
2025.10.23
JavaScript
JavaScript

JavaScript | 「Number() / parseInt() / parseFloat() / +」の変換結果をリアルタイムで比較できる学習用ミニアプリ

See the Pen Numerical Conversion Animation Comparison by MONO365 -Color your days- (@monoqlo365) on CodePen. 仕組みの説明入力欄に文...
2025.10.23
JavaScript
JavaScript

JavaScript | 「charAt・slice・substring・codePointAt」の動きを可視化するアニメ付き学習ツール

では次は、「charAt・slice・substring・codePointAt」の動きを可視化するアニメ付き学習ツールを作りましょう。CodePenなどブラウザ上でそのまま動く形式にします（HTML + CSS + JavaScript）...
2025.10.23
JavaScript
JavaScript

JavaScript | charAt() の動きを視覚的に理解するアニメーション

では、「charAt() の動きを視覚的に理解するアニメーション付き説明」を作りましょう。CodePen などでそのまま実行できる形（HTML + CSS + JS）で、インデックスがスライドして、選ばれた文字がハイライトされるアニメーショ...
2025.10.23
JavaScript
JavaScript

decimal.js を使った「誤差ゼロ金額電卓」

機能概要単価・数量・税率を入力「計算する」ボタンで合計金額を表示decimal.js を使うため誤差ゼロ（0.1 + 0.2 問題なし）ダークモード切り替えボタン付きスマホ対応レスポンシブデザイン See the Pen Zero-Erro...
2025.10.15 2025.10.17
JavaScriptWeb
JavaScript

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

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

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

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

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

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

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

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

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

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

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

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