スポンサーリンク
JavaScript

JavaScript | 配列で返している既存コードをオブジェクトにリファクタリングする実務的な例

では、実務でよくあるパターンとして「配列で返している関数」をオブジェクトで返す形にリファクタリングする例を、元コード → 修正版コード → 呼び出し例 でステップごとに解説します。例題：配列で返してい...
2025.10.29
JavaScript
JavaScript

JavaScript | 「アロー関数 this のレキシカル束縛」アニメーションつきのブラウザ教材

See the Pen Lexical binding of 'this' by MONO365 -Color your days- (@monoqlo365) on CodePen. 実行ボタンを押...
2025.10.29
JavaScript
JavaScript

JavaScript | クラス内でアロー関数を使う理由

クラス内でのアロー関数の使い方を、動くコード例・利点と注意点・実務での使い分けを交えてわかりやすくまとめます。アロー関数は this を「定義場所（レキシカル）」から拾う 特性があるので、クラスのイン...
2025.10.29
JavaScript
React

React/Vue | Reactなどのフレームワークでの this とアロー関数の使われ方

では「Reactなどのフレームワークでの this とアロー関数の使われ方」を整理してみましょう。ReactはJavaScriptクラスや関数を多用するので、this の扱いが特に重要になります。⚛️...
2025.10.29
ReactVue.js
JavaScript

JavaScript | クラスのメソッドをイベントリスナーに登録するときの3つの方法を比較表

では「クラスのメソッドをイベントリスナーに登録するときの3つの方法」を比較表で整理してみましょう。これで状況に応じてどの書き方を選べばよいか一目で分かります。クラスのメソッドと this の扱い比較方...
2025.10.29
JavaScript
JavaScript

JavaScript | 関数リテラルとアロー関数の this の違い

では 関数リテラル（通常の function 式）とアロー関数の this の違い を初心者向けに、できるだけかみ砕いて説明します。実際にコードをブラウザで試すと理解が早いです。1️⃣ 基本の考え方通...
2025.10.29
JavaScript
JavaScript

JavaScript | 関数リテラル（無名関数）とアロー関数を初心者向けに比較

では、関数リテラル（無名関数）とアロー関数を 初心者向けにかみ砕いて比較 します。実際のコード例付きで説明します。1️⃣ 基本の書き方比較項目無名関数（Function式）アロー関数（ES6以降）定義...
2025.10.29
JavaScript
JavaScript

JavaScript | ボタンを押すと関数リテラル（無名関数）が動くHTMLサンプル

See the Pen Function literal (anonymous function) sample by MONO365 -Color your days- (@monoqlo365) ...
2025.10.29
JavaScript
JavaScript

JavaScript | 関数はオブジェクト — インタラクティブ練習ページ

See the Pen Functions are objects by MONO365 -Color your days- (@monoqlo365) on CodePen.
2025.10.29
JavaScript
JavaScript

JavaScript | アロー関数のthisをやさしく理解する

アロー関数のthisをやさしく理解するアロー関数は「短く書ける関数」だけではありません。いちばんの特徴は、thisが「外側のthisに固定される（レキシカルに束縛される）」ことです。つまり、アロー関数...
2025.10.29
JavaScript
JavaScript

JavaScript | 既存の配列返却関数を自動的にオブジェクト返却にラップして一括変換するテンプレート関数

では次は 既存の配列返却関数を自動的にオブジェクト返却にラップして一括変換するテンプレート関数 を作ります。これを使えば、チームで複数の関数を簡単にリファクタリングできます。1. 自動ラップ関数テンプ...
2025.10.28
JavaScript
JavaScript

JavaScript | 既存の配列返却関数を自動的にオブジェクト返却にラップして一括変換するテンプレート関数

では次は 既存の配列返却関数を自動的にオブジェクト返却にラップして一括変換するテンプレート関数 を作ります。これを使えば、チームで複数の関数を簡単にリファクタリングできます。1. 自動ラップ関数テンプ...
2025.10.28
JavaScript
JavaScript

JavaScript | 複数の関数を組み合わせて小さなアプリっぽい処理 – 成績集計関数 –

では「小さなアプリっぽい処理」を一緒に作ってみましょう。テーマは テストの点数をまとめて集計する関数 です。課題点数の配列を受け取り、平均点合格者リスト（60点以上）をまとめて返す関数analyzeS...
2025.10.28
JavaScript
JavaScript

JavaScript | APIから取ってきたデータを reduce で集計してチャート向けに整形

ではここでは「実際の開発で reduce をどう使うか」を、初心者でも理解できるように段階的に説明します。1. 想定シナリオたとえば、次のような「売上データ」を API から取得したとします👇[ {"...
2025.10.28 2025.10.31
JavaScript
JavaScript

JavaScript | ブラウザで動くTODOフィルタアプリ（filter メソッド）

filterメソッドは TODOリストの「絞り込み」 にとてもよく使われます。ここでは初心者でも動かしやすい ブラウザで動く小さなTODOフィルタアプリ を例にして説明します。ゴール「すべて／完了済み...
2025.10.28
JavaScript
JavaScript

JavaScript | map() メソッド練習

各問題を選んで実行できるようにして、結果と処理のステップを下に表示します。 See the Pen JavaScript map() Method Practice by MONO365 -Color...
2025.10.27
JavaScript
JavaScript

JavaScript | map() の間違い実験コード

See the Pen JavaScript map() Mistake Experiment by MONO365 -Color your days- (@monoqlo365) on CodePe...
2025.10.27
JavaScript
JavaScript

JavaScript | slice() を使った ページネーション（ページ分割）サンプル

それでは、JavaScript の slice() を使った ページネーション（ページ分割）サンプルを、初心者向けにわかりやすく紹介します。ページネーションとは？たとえば「10件のデータを3件ずつ表示...
2025.10.27
JavaScript
JavaScript

JavaScript | 大きな配列を扱うときのパフォーマンス面

では、初心者向けに「大きな配列を扱うときのパフォーマンス面」の注意点を、わかりやすくまとめてみます。例を交えて解説します。1. 配列が大きいと何が問題？JavaScript は配列のサイズが大きくなる...
2025.10.27
JavaScript
JavaScript

JavaScript | concat / push / slice / スプレッド 配列メソッド体験教材

See the Pen Concat Vs Push Slice Spread Playground by MONO365 -Color your days- (@monoqlo365) on Cod...
2025.10.26
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 | 平均 ± 標準偏差の範囲に入るデータの数を数える関数

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

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

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

JavaScript | 分散を計算する関数

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

JavaScript | 分散を計算する関数

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

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

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

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

See the Pen “Delete Array Element” Practice App by MONO365 -Color your days- (@monoqlo365) on CodePe...
2025.10.25
JavaScript
スポンサーリンク
Next