JavaScript
JavaScript | 1 日 90 分 × 7 日アプリ学習：タイマーアプリ（初級編）
JavaScript
JavaScript JavaScript 逆引き集 | モジュールトップでの strict（ESM はデフォルト）
モジュールトップでの Strict Mode（ESM はデフォルト）JavaScript には Strict Mode（厳格モード） という「安全にコードを書くためのチェック機能」があります。通常は ...
JavaScript JavaScript 逆引き集 | Strict mode の有効化
Strict mode の有効化 — 'use strict';JavaScript の Strict mode（厳格モード） は「コードの書き方をより厳しくチェックする」ための仕組みです。初心者は「...
JavaScript JavaScript 逆引き集 | 開発時のデバッグ（debugger）
開発時のデバッグ（debugger ステートメント） — debuggerJavaScript には debugger ステートメントという特別な命令があります。初心者は「ここでプログラムを一時停止し...
JavaScript JavaScript 逆引き集 | console.table で配列表現
console.table で配列表現 — console.table(data)JavaScript の console.table は「配列やオブジェクトを表形式で見やすく表示する」ための便利な関...
JavaScript JavaScript 逆引き集 | 性能計測（console.time）
性能計測（console.time / console.timeEnd） — console.time('t'); console.timeEnd('t')JavaScript には 処理時間を計測す...
JavaScript JavaScript 逆引き集 | Proxy でオブジェクト挙動をカスタム
Proxy でオブジェクト挙動をカスタム — new Proxy(obj, { get(target, k) { } })JavaScript の Proxy は「オブジェクトの操作を横取りしてカスタ...
JavaScript JavaScript 逆引き集 | Reflect API（動的操作）
Reflect API（動的操作） — Reflect.get(obj, 'k') / Reflect.set(...)JavaScript の Reflect API は「オブジェクトを動的に操作す...
JavaScript JavaScript 逆引き集 | Symbol を key とするオブジェクトプロパティ
Symbol を key とするオブジェクトプロパティ — obj = 1JavaScript の Symbol は「ユニークな識別子」を作るための型です。オブジェクトのプロパティキーに Symbol...
JavaScript JavaScript 逆引き集 | Symbol を key とするオブジェクトプロパティ
Symbol を key とするオブジェクトプロパティ — obj = 1JavaScript の Symbol は「ユニークな識別子」を作るための型です。オブジェクトのプロパティキーに Symbol...
JavaScript JavaScript 逆引き集 | Symbol の基本
Symbol の基本 — const s = Symbol('desc')JavaScript の Symbol は「一意（ユニーク）な値」を作るための型です。初心者は「他と絶対にかぶらない特別なラベ...
JavaScript JavaScript 逆引き集 | 文字列テンプレートで複数行
文字列テンプレートで複数行 — line1\nline2複数行の文字列は「改行コードを埋め込む方法」と「テンプレートリテラルでそのまま改行を書く方法」の2通りあります。初心者は、まず「\n は改行コー...
JavaScript JavaScript 逆引き集 | 短絡評価（&&/||）を利用した条件実行
短絡評価（&& / ||）を利用した条件実行 — cond && fn()JavaScript の 論理演算子 && と || は「真偽値の判定」だけでなく、短絡評価（ショートサーキット）を利用して「...
JavaScript JavaScript 逆引き集 | 論理演算子で既定値（|| の注意）
論理演算子で既定値（|| の注意） — const v = a || 'def'（'' や 0 も代替される）JavaScript では 論理演算子 || を使って「左側が falsy（falseっぽ...
JavaScript JavaScript 逆引き集 | Nullish coalescing（??）
Nullish coalescing（??） — const v = a ?? 'default'JavaScript の Nullish coalescing 演算子 ?? は「値が null また...
JavaScript JavaScript 逆引き集 | Optional chaining の利用（安全なネスト参照）
Optional chaining の利用（安全なネスト参照） — a?.b()JavaScript の オプショナルチェイニング演算子 ?. は「存在しないかもしれないプロパティや関数を安全に参照す...
JavaScript JavaScript 逆引き集 | 配列の入れ子の安全アクセス（?.）
配列の入れ子の安全アクセス（オプショナルチェイニング ?.） — obj?.a?.bJavaScript の オプショナルチェイニング演算子 ?. は「存在しないかもしれないプロパティに安全にアクセス...
JavaScript JavaScript 逆引き集 | 引数のデフォルト値に関数
引数のデフォルト値に関数 — function f(x = Date.now()) {}JavaScript では 引数のデフォルト値に「関数の呼び出し結果」を指定できます。初心者は「引数が渡されなか...
JavaScript JavaScript 逆引き集 | 可変長引数の扱い
可変長引数の扱い — (...args) => argsJavaScript では 可変長引数（いくつでも引数を受け取れる仕組み）を rest 引数 ...args で書けます。初心者は「渡された引数...
JavaScript JavaScript 逆引き集 | rest 引数と spread 構文
rest 引数と spread 構文 — function f(...args) {} / f(...arr)JavaScript には rest 引数 と spread 構文 という似た書き方があり...
JavaScript JavaScript 逆引き集 | オブジェクトのデフォルト引数
オブジェクトのデフォルト引数 — function f(a = 1, b = {}) {}関数の引数に「値が渡されなかったときの既定値（デフォルト）」を設定できます。初心者は「未指定や undefin...
JavaScript JavaScript 逆引き集 | parseInt/parseFloat の使い方
parseInt / parseFloat の使い方 — parseInt('12', 10)（基数指定）JavaScript では文字列を数値に変換する方法として parseInt と parseF...
JavaScript JavaScript 逆引き集 | 型変換（Number/String/Boolean）
型変換（Number / String / Boolean） — Number('1'), String(1), Boolean(0)JavaScript では値の型を 明示的に変換 するために Nu...
JavaScript JavaScript 逆引き集 | isNaN と Number.isNaN の違い
isNaN と Number.isNaN の違い — Number.isNaN(x) 推奨JavaScript で「値が NaN (Not a Number) かどうか」を判定する方法は2つあります。...
JavaScript JavaScript 逆引き集 | typeof 判定（原始型）
typeof 判定（原始型） — typeof x === 'string'JavaScript の typeof 演算子は「変数や値の型」を文字列で返します。初心者は「この値は文字？数？それとも別の...
JavaScript JavaScript 逆引き集 | instanceof 判定
instanceof 判定 — obj instanceof ClassJavaScript の instanceof 演算子は「あるオブジェクトが特定のクラス（コンストラクタ関数）から生成されたかど...
JavaScript JavaScript 逆引き集 | static メソッド
static メソッド — static build(){}JavaScript の static メソッドは「インスタンスを作らなくてもクラスから直接呼び出せる関数」です。初心者は「クラスの便利関数...
JavaScript JavaScript 逆引き集 | getter/setter（アクセサ）
getter / setter（アクセサ） — get v() {} / set v(x) {}JavaScript の getter / setter は「プロパティにアクセスしたときの動作」を自由...
JavaScript JavaScript 逆引き集 | super の使用
super の使用 — super() / super.method()JavaScript の super は「親クラス（基底クラス）」を呼び出すためのキーワードです。extends で継承したクラ...
JavaScript JavaScript 逆引き集 | extends 継承
extends 継承 — class B extends A {}JavaScript の extends は「クラスの継承」を表します。親クラス（基底クラス）の機能を子クラス（派生クラス）が引き継ぎ...
JavaScript JavaScript 逆引き集 | class 構文
class 構文 — class A { constructor(x){ this.x = x } method(){} }JavaScript の class 構文は、オブジェクト指向プログラミング...
JavaScript JavaScript 逆引き集 | プロトタイプ継承（古典）
プロトタイプ継承（古典） — Child.prototype = Object.create(Parent.prototype)JavaScript には「プロトタイプ継承」という仕組みがあります。こ...
JavaScript JavaScript 逆引き集 | モジュールパターン（名前空間）
モジュールパターン（名前空間） — const My = (()=>{ return { fn(){} } })()JavaScript では昔から「モジュールパターン」という書き方がありました。これ...
JavaScript JavaScript 逆引き集 | 即時実行関数（IIFE）
即時実行関数（IIFE） — (function(){})(); / (() => {})()JavaScript では 即時実行関数 (IIFE: Immediately Invoked Funct...
JavaScript JavaScript 逆引き集 | スコープと var/let/const の違い
スコープと var / let / const の違い — var は関数スコープ、let / const はブロックスコープJavaScript で変数を宣言するときに使うキーワードは var / ...
JavaScript JavaScript 逆引き集 | call/apply/bind
call / apply / bind の基本 — fn.call(ctx, arg1) / fn.apply(ctx, ) / fn.bind(ctx)JavaScript では 関数の呼び出し時に...
JavaScript JavaScript 逆引き集 | this の扱い（関数とアロー）
this の扱い（関数とアロー関数）JavaScript の this は「その関数が呼ばれたときに参照するオブジェクト」を指します。ただし 通常の関数 と アロー関数 では挙動が違うため、初心者が混...
JavaScript JavaScript 逆引き集 | クロージャの基本
クロージャの基本 — function outer(){ let a = 1; return ()=>a++ }JavaScript の クロージャ は「関数が作られたときの変数を覚えていて、あとから...
JavaScript JavaScript 逆引き集 | EventEmitter（Node）
EventEmitter（Node.js） — const e = new EventEmitter(); e.on('x', ()=>{})Node.js には イベント駆動 の仕組みがあり、その中...
JavaScript JavaScript 逆引き集 | fs.readFile（Node）
fs.readFile（Node.js） — const data = fs.readFileSync('a.txt','utf8')Node.js でファイルを読み込むときに使うのが fs モジュー...
JavaScript JavaScript 逆引き集 | Buffer の利用（Node）
Buffer の利用（Node.js） — Buffer.from('text')Node.js には Buffer という特別なオブジェクトがあります。これは「バイナリデータ（生のデータ列）」を扱う...
JavaScript JavaScript 逆引き集 | process.env（環境変数参照）
process.env（環境変数参照） — process.env.NODE_ENV（Node.js）Node.js では 環境変数 を process.env 経由で参照できます。環境変数は「アプリ...
JavaScript JavaScript 逆引き集 | require（CommonJS）
require（CommonJS） — const x = require('x')（Node.js）Node.js では昔から使われている モジュール読み込みの仕組み が CommonJS です。r...
JavaScript JavaScript 逆引き集 | export の基本
export の基本 — export function f(){} / export default ...JavaScript の モジュール では、ファイル内の関数や変数を外部に公開するために ...
JavaScript JavaScript 逆引き集 | 動的 import（コード分割）
動的 import（コード分割） — const mod = await import('./mod.js')JavaScript の 動的 import は「必要なときにだけモジュールを読み込む」仕...
JavaScript JavaScript 逆引き集 | Module（ESM）インポート
Module（ESM）インポート — import fs from 'fs'（環境による）JavaScript には モジュール という仕組みがあり、コードを分割して再利用できます。ESM（ECMAS...
JavaScript JavaScript | 基礎構文：データ型 – typeof 演算子
typeof を一言でいうとtypeof 演算子は、「この値はどんなデータ型なのか？」を文字列で教えてくれる道具 です。実行中のコードの中で、これは数値なのかこれは文字列なのかこれは配列なのかオブジェ...
JavaScript JavaScript | 基礎構文：データ型 – オブジェクトの基本
オブジェクトを一言でいうとオブジェクトは、「ひとまとまりの情報を、“名前付きのペア”で整理して持てる入れ物」 です。人本商品設定など、「何か1つの“もの”に、いくつかの性質（プロパティ）がくっついてい...
JavaScript JavaScript | 基礎構文：データ型 – 配列の基本
配列を一言でいうと配列（Array）は、「同じような種類のデータを、順番つきでまとめて入れておける“箱の列”」 です。1人のユーザー → 1つの値（名前など）なら普通の変数で足りる10人のユーザー →...
JavaScript JavaScript | 基礎構文：データ型 – BigInt
BigInt を一言でいうとBigInt は、「ふつうの Number では正確に扱えないレベルの“超でかい整数”を、安全に扱うためのデータ型」 です。JavaScript の通常の数値（Number...
JavaScript JavaScript | 基礎構文：データ型 – Symbol
まず「Symbol（シンボル）」を一言でいうとSymbol は、「絶対にかぶらない“特別なラベル”を作るためのデータ型」 です。同じ説明を付けて作っても、毎回 必ず違う値 になります。const a ...
JavaScript JavaScript | 基礎構文：データ型 – Undefined
まず「undefined」を一言でいうとundefined は、「“値がまだ決まっていない”ことを表すための特別な値」 です。もう少し噛み砕くと、「変数は“ある”んだけど、中に“ちゃんとした値”がまだ...
JavaScript JavaScript | 基礎構文：データ型 – Null
まず「null」を一言でいうとnull は、「ここには“何もない”ことを、あえてハッキリ示すための特別な値」 です。「まだ値が決まっていない」のか「値がないことをわざと示している」のかこの違いを表現し...
JavaScript JavaScript | 基礎構文：データ型 – Boolean
まず Boolean を一言でいうとBoolean（ブーリアン）は、「真か偽か、2つの状態だけを表すためのデータ型」 です。JavaScript では Boolean 型の値はたった 2つだけです。t...
JavaScript JavaScript | 基礎構文：データ型 – String
まず「String（文字列）」を一言でいうとString（ストリング）は、「文字をならべたデータを扱うための型」 です。文章名前IDメールアドレスURLボタンのラベルなど、「人が読むための情報」はほぼ...
JavaScript JavaScript | 基礎構文：データ型 – Number
JavaScript の Number を一言でいうとJavaScript の Number は「整数も小数もぜんぶまとめて扱う “数字用の型”」です。他の言語だと「int」「float」「doubl...
JavaScript JavaScript | 基礎構文：変数・定数 – 多重代入
多重代入を一言でいうと多重代入（たじゅうだいにゅう）は、「1 行の代入文で、複数の変数にまとめて値を入れる書き方」 のことです。a にも b にも 0 を入れたいx と y に、それぞれ別の値を一気に...
JavaScript JavaScript | 基礎構文：変数・定数 – 宣言と代入の違い
まず「宣言」と「代入」を一言で分ける先にイメージだけハッキリさせます。宣言：「この名前の変数（箱）を使いますよ、とプログラムに伝えること」代入：「その変数（箱）の中に、実際の値を入れること」たとえば、...
JavaScript JavaScript | 基礎構文：変数・定数 – 初期化と未定義
「初期化」と「未定義」を一言でいうとまず言葉のイメージからはっきりさせます。「初期化（しょきか）」は、「変数を作ったタイミングで、最初の値をちゃんと入れてあげること」 です。「未定義（undefine...
JavaScript JavaScript | 基礎構文：変数・定数 – 暗黙的なグローバル
まず「暗黙的なグローバル」を一言でいうと暗黙的なグローバルは、「自分ではグローバル変数を作ったつもりがないのに、“こっそり”グローバル変数が作られてしまう現象」のことです。もっと砕くと、本当は let...
JavaScript JavaScript | 基礎構文：変数・定数 – グローバル変数の扱い
まず「グローバル変数」とは何かグローバル変数は、「プログラムの“どこからでも”読めて・書けてしまう変数」 のことです。もう少し具体的に言うと、どの関数の中にも入っていない場所（ファイルの一番上とか）で...
JavaScript JavaScript | 基礎構文：変数・定数 – ブロックスコープ
まず「ブロックスコープ」を一言でいうとブロックスコープは、「{ ... } のカタマリの中だけで有効な“変数の生息範囲”」 のことです。JavaScript の let と const で宣言した変数...
JavaScript JavaScript | 基礎構文：変数・定数 – 再代入の可否とは
「再代入の可否」を一言でいうと「再代入の可否（さいだいにゅうの かひ）」は、「一度値を入れた変数に、あとから“別の値を入れ直していいかどうか」というルールのことです。もう少しくだいて言うと、一度入れた...
JavaScript JavaScript | 基礎構文：変数・定数 – let と const の違い
まず「共通点」と「一言での違い」let と const は、どちらも 「変数（名前付きの箱）を作るためのキーワード」 です。共通しているのは、ブロックスコープ（{} の中だけ有効）var より新しい書...
JavaScript JavaScript | 基礎構文：変数・定数 – var を使わない理由
まず結論：「新しく書くコードでは var はほぼ使わない」JavaScript には変数宣言が 3 種類あります。varletconstvarletconstJavaScript昔の JavaScri...
JavaScript JavaScript | 基礎構文：変数・定数 – 変数とは何か
まず「変数」をざっくり一言でいうと変数は、「あとで使うために値を入れておく“名前付きの箱”」だと思ってください。数字文字文字列（文章）true / falseオブジェクトや配列など、プログラムの中で扱...
JavaScript JavaScript 逆引き集 | Base64 エンコード／デコード
Base64 エンコード／デコード — btoa(str) / atob(b64)JavaScript には文字列を Base64 形式に変換するための関数が標準で用意されています。Base64 は「...
JavaScript JavaScript 逆引き集 | URL 文字列エンコード／デコード
URL 文字列エンコード／デコード — encodeURIComponent / decodeURIComponentWebアプリでは「URLに文字列を安全に含めたい」場面がよくあります。検索キーワー...
JavaScript JavaScript 逆引き集 | Web Crypto API（ランダム）
Web Crypto API（ランダム値生成） — crypto.getRandomValues(new Uint8Array(16))JavaScript には Web Crypto API という...
JavaScript JavaScript 逆引き集 | Clipboard API（取得）
Clipboard API（取得） — navigator.clipboard.readText().then(t => {})Clipboard API は「クリップボードにある文字列を読み取る」こ...
JavaScript JavaScript 逆引き集 | Clipboard API（コピー）
Clipboard API（コピー） — navigator.clipboard.writeText('text')Clipboard API を使うと、JavaScriptから「クリップボードに文字...
JavaScript JavaScript 逆引き集 | geolocation API（位置取得）
geolocation API（位置取得） — navigator.geolocation.getCurrentPosition(p => {})ブラウザには「現在地を取得する」ための Geoloca...
JavaScript JavaScript 逆引き集 | Navigator.online でオンライン判定
オンライン判定 — navigator.onLineブラウザには「今ネットに接続できているかどうか」を判定するためのプロパティがあります。それが navigator.onLine です。true なら...
JavaScript JavaScript 逆引き集 | SSE（EventSource）受信
SSE（Server-Sent Events）受信 — const es = new EventSource(url); es.onmessage = e => {}SSE (Server-Sent ...
JavaScript JavaScript 逆引き集 | WebSocket 基本接続
WebSocket 基本接続 — const ws = new WebSocket(url); ws.onmessage = e => {}WebSocket は「ブラウザとサーバーが双方向でリアルタ...
JavaScript JavaScript 逆引き集 | canvas.toDataURL で画像取得
Canvas から画像を取得 — canvas.toDataURL('image/png')canvas.toDataURL() は Canvas の内容を画像データ（Base64形式の文字列）に変換...
JavaScript JavaScript 逆引き集 | 画像を Canvas に描画
画像を Canvas に描画 — ctx.drawImage(img, 0, 0)Canvas に画像を描くときの基本は「画像が読み込まれてから drawImage を呼ぶ」こと。img.onload...
JavaScript JavaScript 逆引き集 | Canvas 基本描画
Canvas 基本描画 — const ctx = canvas.getContext('2d'); ctx.fillRect(0,0,100,100)HTML5 の <canvas> は「絵を描くた...
JavaScript JavaScript 逆引き集 | input[type=file] の扱い
input の扱い — const f = input.filesブラウザでユーザーにファイルを選んでもらうときに使うのが <input type="file">。選ばれたファイルは input.fi...
JavaScript JavaScript 逆引き集 | FileReader でローカルファイル読み込み
FileReader でローカルファイル読み込み — const fr = new FileReader(); fr.onload = e => console.log(e.target.result...
JavaScript JavaScript 逆引き集 | ダウンロード（リンク生成）
ダウンロード（リンク生成） — const a=document.createElement('a'); a.href=URL.createObjectURL(blob); a.download='f...
JavaScript JavaScript 逆引き集 | Blob とファイル作成
Blob とファイル作成 — const b = new Blob(, { type: 'text/plain' })Blob（Binary Large Object）は「生のデータのかたまり」を表す...
JavaScript JavaScript 逆引き集 | popstate イベント検知
popstate イベント検知 — window.addEventListener('popstate', ()=>{})popstate イベントは ブラウザの「戻る」「進む」操作や history...
JavaScript JavaScript 逆引き集 | history.pushState／replaceState
history.pushState／replaceState の基本 — history.pushState({}, '', '/page')history.pushState と history.r...
JavaScript JavaScript 逆引き集 | URL 生成／解析（URLクラス）
URL クラスの基本 — const u = new URL('/a', 'URL クラスは「URL文字列を安全に生成・分解」するための標準APIです。相対パスと基準URLを組み合わせて絶対URLを作...
JavaScript JavaScript 逆引き集 | URLSearchParams（クエリ操作）
URLSearchParams の基本（クエリ操作） — const p = new URLSearchParams(location.search)URL の「?以降」のクエリを簡単に読み書きできる...
JavaScript JavaScript 逆引き集 | IndexedDB 基本（簡易）
IndexedDB 基本（簡易）— const req = indexedDB.open('db')IndexedDB はブラウザ内に大量・構造化データを保存できるクライアントサイドDBです。非同期A...
JavaScript JavaScript 逆引き集 | Cookie セット（簡易）
Cookie を簡単にセット・取得 — document.cookie = 'k=v; path=/; max-age=3600'Cookie はブラウザに短い文字列を保存し、同一オリジンへの次回以降...
JavaScript JavaScript 逆引き集 | sessionStorage 書き込み／読み出し
sessionStorage の基本 — sessionStorage.setItem('k', v) / sessionStorage.getItem('k')sessionStorage は「同じ...
JavaScript JavaScript 逆引き集 | localStorage 書き込み／読み出し
localStorage の基本 — localStorage.setItem('k', v) / localStorage.getItem('k')localStorage は「ブラウザに文字列とし...
JavaScript JavaScript 逆引き集 | smooth スクロール
スムーススクロールの基本 — window.scrollTo({ top: 0, behavior: 'smooth' })「スムーススクロール」は、画面を指定位置まで滑らかに移動する演出です。ユーザ...
JavaScript JavaScript 逆引き集 | スクロール位置取得
スクロール位置取得の基本 — window.scrollY と el.scrollTopページ全体のスクロール量は window.scrollY（縦）/ window.scrollX（横）。特定のスク...
JavaScript JavaScript 逆引き集 | getBoundingClientRect で座標取得
要素の座標取得の基本 — el.getBoundingClientRect() と表示制御（classList.toggle('is-hidden')）要素の「画面上での位置とサイズ」を取りたいときは...
JavaScript JavaScript 逆引き集 | 要素の表示・非表示（CSSクラス）
要素の表示・非表示（CSSクラス） — el.classList.toggle('is-hidden')クラスを切り替えて見た目を制御するのが一番安全で保守しやすい方法です。classList.tog...
JavaScript JavaScript 逆引き集 | フォーカス制御
フォーカス制御の基本 — el.focus()フォームやボタンに「今ここを操作できます」と意識を集めるのがフォーカスです。el.focus() は要素にプログラムからフォーカスを当てる最小の一手。入力...
JavaScript JavaScript 逆引き集 | イベントデリゲーション
イベントデリゲーションの基本 — parent.addEventListener('click', e => { if (e.target.matches('button')) ... })イベントデ...
JavaScript JavaScript 逆引き集 | フラグメント利用で描画高効率化
フラグメント利用で描画高効率化 — const frag = document.createDocumentFragment(); frag.append(...)大量の要素を1つずつDOMに挿入する...
JavaScript JavaScript 逆引き集 | NodeList を配列に変換
NodeList を配列に変換の基本 — Array.from(nodeList) または document.querySelectorAll() が返すのは「配列のように見える NodeList」。...
JavaScript JavaScript 逆引き集 | querySelectorAll（複数）
querySelectorAll の基本 — document.querySelectorAll('li')querySelectorAll は「CSSセレクタに一致する要素を“全部”まとめて取得」す...
JavaScript JavaScript 逆引き集 | querySelector（単一）
querySelector の基本 — document.querySelector('.cls')querySelector は「CSSセレクタで、最初に一致した1つの要素」を取得するメソッドです。...
JavaScript JavaScript 逆引き集 | 子要素の取得
子要素の取得の基本 — el.childrenel.children は「直下の子要素だけ」を順番付きで返します。返り値は配列“風”の HTMLCollection（ライブコレクション）で、テキストノ...
JavaScript JavaScript 逆引き集 | 親要素の取得
親要素の取得の基本 — el.parentElementある要素から「一つ上の箱（親要素）」を取得したいときに使うのが parentElement。DOMツリーを上に辿って、要素ノードだけを返します。...
JavaScript JavaScript 逆引き集 | CSS スタイル変更
CSSスタイル変更の基本 — el.style.display = 'none'要素を「非表示」にする最短の方法が style.display = 'none'。表示したいときは 'block' など...
JavaScript JavaScript 逆引き集 | textContent を使う（テキストのみ）
テキストのみを扱う — el.textContent = 'text'textContent は「要素の中身をテキストとして読み書きする」ためのプロパティです。HTMLタグは解釈されず、そのまま文字列...
JavaScript JavaScript 逆引き集 | innerHTML を使う（注意：XSS）
innerHTML の基本と注意点（XSS対策を含む） — el.innerHTML = '<b>hi</b>'innerHTML は「要素の中身をHTML文字列として読み書きする」ためのプロパティで...
JavaScript JavaScript 逆引き集 | 要素の挿入
要素の挿入（append / appendChild）の基本 — parent.append(child)「作った要素を画面に出す」最後の一手が挿入です。DOMの親要素に子をぶら下げることで、はじめて...
JavaScript JavaScript 逆引き集 | 要素の生成
要素の生成の基本 — const n = document.createElement('div')画面に新しい箱（要素）を追加したいときは document.createElement(tagNam...
JavaScript JavaScript 逆引き集 | dataset（data-*）の利用
Dataset の基本 — el.dataset.foo = 'bar'data-* 属性は、HTML要素に開発者が自由なカスタムデータを埋め込むための仕組みです。JavaScriptでは eleme...
JavaScript JavaScript 逆引き集 | 属性の取得／設定
属性の取得／設定の基本 — el.getAttribute('data-x') と el.setAttribute('data-x', v)HTML要素の「属性」（id, class, href, s...
JavaScript JavaScript 逆引き集 | クラス操作（classList）
クラス操作の基本 — el.classList.add('a') と el.classList.toggle('b')CSSの見た目（色、サイズ、表示/非表示など）を切り替える最もシンプルな方法が「ク...
JavaScript JavaScript 逆引き集 | フォームのsubmit防止
フォームの submit 防止 — e.preventDefault()フォームは送信するとページがリロードされます。JavaScriptで「リロードせずに自分の処理をしたい」ときは、submit イ...
JavaScript JavaScript 逆引き集 | イベントリスナー削除
イベントリスナー削除（DOM） — el.removeEventListener('click', fn)イベントを「もう受けたくない」瞬間は必ず来ます。removeEventListener は、追...
JavaScript JavaScript 逆引き集 | イベントリスナー追加（DOM）
イベントリスナー追加（DOM） — el.addEventListener('click', fn)ボタンを押す、入力する、スクロールする。こうした「イベント」が起きた瞬間に処理を実行するのがイベント...
JavaScript JavaScript 逆引き集 | throttle 実装（簡易）
Throttle 実装（簡易） — 一定間隔だけ処理するスロットル「スクロールやマウス移動のように、イベントが大量に連続発火して重くなる」問題を減らすテクが throttle（スロットル）。一定間隔ご...
JavaScript JavaScript 逆引き集 | debounce 実装（簡易）
Debounce 実装（簡易） — 入力が落ち着いたら一度だけ実行「キー入力やスクロールなど“連打されるイベント”を落ち着いてから1回だけ処理したい」—その定番テクが debounce。短いコードで、...
JavaScript JavaScript 逆引き集 | clearInterval で解除
clearInterval で解除の基本 — clearInterval(id)setInterval で始めた「一定間隔の繰り返し」を止めるのが clearInterval(id)。開始時に返される...
JavaScript JavaScript 逆引き集 | 繰り返し（setInterval）
繰り返しタイマーの基本 — const id = setInterval(()=>{}, 1000)setInterval は「一定間隔ごとに関数を繰り返し実行する」ためのタイマーです。第2引数はミリ...
JavaScript JavaScript 逆引き集 | 取消可能タイマー（clearTimeout）
取消可能タイマーの基本 — const id = setTimeout(...); clearTimeout(id)「一定時間後に一度だけ実行」するのが setTimeout。その実行予約はタイマーI...
JavaScript JavaScript 逆引き集 | タイマー（setTimeout）
タイマーの基本 — setTimeout(()=>{}, 1000)setTimeout は「指定した時間の後に、関数を一度だけ実行する」タイマーです。第2引数はミリ秒で指定し、例えば 1000 は ...
JavaScript JavaScript 逆引き集 | 再試行ロジック（簡易）
再試行ロジック（簡易） — for(i=0;i<3;i++){ try{await f();break}catch{} }「失敗するかもしれない処理を、何度か繰り返して成功を狙う」仕組みが 再試行ロジ...
JavaScript JavaScript 逆引き集 | カスタムエラー投げる
カスタムエラー投げるの基本 — throw new Error('msg')「想定外の入力」「外部APIの不整合」「ビジネスルール違反」など、続行できない状況を即座に知らせたいときは、エラーを投げて処...
JavaScript JavaScript 逆引き集 | カスタムエラー投げる
カスタムエラー投げる — throw new Error('msg') の基本と実践「想定外の入力」「外部APIの不整合」「ビジネスルール違反」など、続行できない状況を即座に知らせたいときは、エラーを...
JavaScript JavaScript 逆引き集 | エラーハンドリング（try/catch）
エラーハンドリング（try/catch）の基本と実践JavaScript では try/catch 構文を使って「エラーが起きてもプログラム全体が止まらないようにする」ことができます。初心者がまず覚え...
JavaScript JavaScript 逆引き集 | axios（外部）基本
axios（外部ライブラリ）の基本 — axios.get(url).then(r => r.data)axios は人気のある HTTP クライアントライブラリで、ブラウザや Node.js で使え...
JavaScript JavaScript 逆引き集 | fetch POST（JSON）
fetch で HTTP POST（JSON）の基本と実践fetch は HTTP リクエストを送る API。JSON を POST する場合は、メソッド指定・本文の JSON 化・ヘッダー指定（Co...
JavaScript JavaScript 逆引き集 | fetch で HTTP GET
fetch で HTTP GET の基本と実践fetch は「URLへリクエストを送り、レスポンスを Promise として受け取る」ための API です。GET/POST などの HTTP メソッド...
JavaScript JavaScript 逆引き集 | Promise.allSettled（結果全取得）
Promise.allSettled（結果全取得）の基本と実践Promise.allSettled は「複数の非同期処理が、成功か失敗かに関係なくすべて終わるまで待って、各結果のステータスと値（または...
JavaScript JavaScript 逆引き集 | Promise.race（最初）
Promise.race の基本と実践（最初に決着したひとつ）Promise.race は「複数の非同期のうち、もっとも早く“決着”したひとつの結果（成功または失敗）で返す」ための静的メソッドです。配...
JavaScript JavaScript 逆引き集 | Promise.all（並列）
Promise.all の基本と実践（並列処理）複数の非同期処理を「同時に走らせて、全部そろったら結果を受け取りたい」—その最短ルートが Promise.all。依存関係がないタスクをまとめて走らせる...
JavaScript JavaScript 逆引き集 | async/await 基本
async/await 基本 — async function f(){ const r = await p }async/await は「非同期処理を同期処理のように読みやすく書く」ための構文です。...
JavaScript JavaScript 逆引き集 | Promise 基本生成
Promise の基本生成 — new Promise((resolve, reject) => {...})Promiseは「未来のある時点で値が返ることを約束する」オブジェクト。非同期処理の結果と...
JavaScript JavaScript 逆引き集 | WeakMap の利用（ガベージに強い参照）
WeakMap の基本 — new WeakMap()WeakMap は「キーにオブジェクトだけを使える特殊なマップ」です。最大の特徴は キーとなるオブジェクトがガベージコレクション（不要メモリ解放）...
JavaScript JavaScript 逆引き集 | Map から配列へ
Map から配列へ — の基本と実践Map の「キーと値のペア」を配列にしたいときは、 が最短です。配列化すれば map/filter/sort などの配列操作が自由に使えます。基本の使い方const...
JavaScript JavaScript 逆引き集 | Set の基本
Set の基本 — new Set(arr)JavaScript の Set は「重複を許さない値の集合」を扱うための組み込みオブジェクトです。配列と似ていますが、同じ値を二度入れることはできません。...
JavaScript JavaScript 逆引き集 | Map の基本
Map の基本 — new Map(), set, getJavaScript の Map は「キーと値のペア」を保持するコレクションです。オブジェクトと似ていますが、任意の型をキーにできるのが大きな...
JavaScript JavaScript 逆引き集 | オブジェクトのキー順ソート（新規オブジェクト作成）
オブジェクトのキー順ソート（新規オブジェクト作成）の基本と実践「オブジェクトのプロパティをキー順に並べ替えて扱いたい」時は、キーを配列にしてソートし、reduceで新しいオブジェクトを組み立てます。元...
JavaScript JavaScript 逆引き集 | 動的プロパティアクセス
動的プロパティアクセス（obj）の基本と実践「キーを変数で指定したい」「ユーザー入力や設定に合わせてプロパティ名が変わる」—そんなときに使うのが角括弧記法 obj。ドット記法は固定名、角括弧は“動的名...
JavaScript JavaScript 逆引き集 | オブジェクトのプロパティ削除
オブジェクトのプロパティ削除（delete obj.key）の基本と実践delete は「そのプロパティをオブジェクトから完全に取り除く」演算子です。キーを消したいときに使い、値を未定義化したいときは...
JavaScript JavaScript 逆引き集 | プロパティの存在チェック
プロパティの存在チェック（'prop' in obj）の基本と実践「そのプロパティある？」を最短で判定するのが in 演算子。自前のプロパティだけでなく、プロトタイプから継承されたプロパティも「存在す...
JavaScript JavaScript 逆引き集 | オブジェクトのマージ
オブジェクトのマージ（浅）— スプレッド構文 {...a, ...b} の基本と実践複数の設定やデータを“上書きルール”で一つにまとめたいときに使うのがスプレッド構文のマージ。右側が勝つ（後勝ち）とい...
JavaScript JavaScript 逆引き集 | 深いコピー（JSON）（注意：関数/undef は除外）
深いコピー（JSON）— JSON.parse(JSON.stringify(obj)) の基本と実践「オブジェクトをまるっと別インスタンスにしたい」場面でよく使われる簡易テクニックが JSON.pa...
JavaScript JavaScript 逆引き集 | オブジェクトのクローン（浅）
オブジェクトのクローン（浅）— スプレッド構文 {...obj} の基本と実践浅いクローンは「一番上の層だけ」をコピーして、新しいオブジェクトを作る方法です。最短はスプレッド構文 {...obj}。ネ...
JavaScript JavaScript 逆引き集 | オブジェクトのエントリ列挙
オブジェクトのエントリ列挙（Object.entries）の基本と実践Object.entries(obj) は「オブジェクトのキーと値のペア」を の形で配列にして返す関数です。キーだけなら Obje...
JavaScript JavaScript 逆引き集 | オブジェクトの値列挙
オブジェクトの値列挙（Object.values）の基本と実践Object.values(obj) は「オブジェクトの 値だけ を配列にして返す」便利な関数です。キーは不要で値だけを処理したいときに最...
JavaScript JavaScript 逆引き集 | オブジェクトのキー列挙
オブジェクトのキー列挙（Object.keys）の基本と実践Object.keys は「オブジェクトの“自分が持つ（自前の）列挙可能なプロパティ名”」を配列で返します。設定画面の項目一覧、テーブルのヘ...
JavaScript JavaScript 逆引き集 | JSON 文字列化／復元
JSON文字列化／復元の基本と実践「オブジェクト⇄文字列」を行き来する最短ルートが JSON.stringify と JSON.parse。保存・送受信・ログ・設定ファイルで頻出です。まずは基本// ...
JavaScript JavaScript 逆引き集 | タイムゾーン指定変換（Intl）
Intl.DateTimeFormatでタイムゾーン指定表示の基本と実践Intl.DateTimeFormatは「表示するロケール」と「表示するタイムゾーン」を明示できるので、どこで実行しても同じ地域...
JavaScript JavaScript 逆引き集 | Intl.DateTimeFormat の利用
Intl.DateTimeFormat の基本と実践Intl.DateTimeFormat はロケールやタイムゾーンに合わせた日付・時刻フォーマットを簡単に行える標準APIです。文字列連結や手作業のゼ...
JavaScript JavaScript 逆引き集 | 日付フォーマット（簡易）
JavaScript日付フォーマット（簡易）の基本と実践最短で「YYYY-M-D」などの文字列にしたいなら、Dateの各値を取り出してテンプレートリテラルで組み立てます。月は0始まりなので「+1」を忘...
JavaScript JavaScript 逆引き集 | 日付の差分（日数）
JavaScriptで日付の差分（日数）を求める基本と実践「2つの日時の差を“日数”で知りたい」ときは、2つのDateの差（ミリ秒）を1日のミリ秒で割るのが基本です。まず仕組みと丸め方、そしてタイムゾ...
JavaScript JavaScript 逆引き集 | 日付を ISO 文字列に
JavaScriptで日付をISO文字列にする（toISOString）の基本と実践ISO 8601形式はシステム間で扱いやすい標準日時フォーマットです。new Date().toISOString(...
JavaScript JavaScript 逆引き集 | 日付の現在取得
JavaScriptで現在日時を取得する（new Date）の基本と実践「今の日時が欲しい」ときは new Date()。これで現在の日時を表す Dateオブジェクトが作れます。そこから年・月・日・時...
JavaScript JavaScript 逆引き集 | ランダム整数生成
JavaScriptランダム整数生成の基本と実践「0以上n未満のランダムな整数」を作る定番が Math.floor(Math.random() * n)。仕組みを理解すれば、任意の範囲の整数にも応用で...
JavaScript JavaScript 逆引き集 | 数値の丸め（Math）
JavaScript数値の丸め（Math.round / Math.ceil / Math.floor）丸めは「端数をどう扱うか」を決める操作。表示や料金計算、ページネーションなどで頻出です。まずは3...
JavaScript JavaScript 逆引き集 | 数値を固定小数点
JavaScript数値の固定小数点表示（toFixed）の基本と実践金額や割合など「小数点以下の桁数を揃えたい」ときは toFixed。指定した桁数に丸め、足りない桁は0で埋めた文字列を返します。構...
JavaScript JavaScript 逆引き集 | テンプレートリテラル
JavaScriptテンプレートリテラルの基本と実践テンプレートリテラルはバッククォートで囲み、${...}の中に変数や式を埋め込めます。文字列連結より短く、読みやすく、改行もそのまま扱えます。構文と...
JavaScript JavaScript 逆引き集 | 正規表現で部分抽出（キャプチャ）
JavaScript正規表現で部分抽出（キャプチャ）の基本と実践正規表現の キャプチャグループ (...) を使うと、文字列の一部を抜き出せます。match の返り値は配列で、 に「全体一致」、 以降...
JavaScript JavaScript 逆引き集 | 正規表現で置換（全体）
JavaScript正規表現で置換（replace）の基本と実践文字列の中の「一致した部分」を別の文字列に置き換えるのが replace。正規表現を使えば「全件置換」や「一部だけ抜き出して再配置」も柔...
JavaScript JavaScript 逆引き集 | 正規表現でマッチ
JavaScript正規表現でマッチ（match）の基本と実践文字列から「パターンに合う部分」を見つけて取り出すなら match。1件だけか、すべてか、グループ抽出かで挙動が変わるので、最初に仕組みを...
JavaScript JavaScript 逆引き集 | 文字列を大文字／小文字
JavaScript文字列の大文字・小文字変換の基本と実践文字列を「全部大文字」「全部小文字」に揃えたいときは、toUpperCase と toLowerCase が最短ルート。検索や比較、表示整形で...
JavaScript JavaScript 逆引き集 | 文字列のトリム
JavaScript文字列のトリムの基本と実践文字列の前後にある余分な空白や改行を取り除くときは trim を使います。元の文字列は変えず、前後のホワイトスペースだけを除いた新しい文字列を返します。構...
JavaScript JavaScript 逆引き集 | split で文字列分割
JavaScript文字列の分割（split）の基本と実践文字列を「区切り文字」で分けて配列にするのが split。CSVの処理、URLやパスの分解、複数行テキストの扱いなどで頻出です。初心者でもすぐ...
JavaScript JavaScript 逆引き集 | join で文字列結合
JavaScript配列の文字列結合（join）の基本と実践配列の要素を指定した区切り文字でつないで、1つの文字列にするのが join。CSV作成、UI表示、ログ出力などでよく使います。構文と基本ポイ...
JavaScript JavaScript 逆引き集 | 配列の分割（chunk）
JavaScript配列の分割（chunk）の基本と実践「配列を一定サイズごとに分割したい」場面はよくあります。例えば、ページネーションやバッチ処理など。JavaScriptには標準で chunk 関...
JavaScript JavaScript 逆引き集 | 配列をユニークに（オブジェクトキーで）
JavaScript配列をユニークに（オブジェクトキーで）lodashの _.keyBy を使うと「オブジェクト配列の重複を特定のキーでまとめて、ユニーク化」できます。プリミティブ値なら Set で十...
JavaScript JavaScript 逆引き集 | 配列の重複除去（Set）
JavaScript配列の重複除去（Set）の基本と実践配列に同じ値が何度も入っているとき、「ユニークな値だけ欲しい」場面があります。そんなときに便利なのが Set とスプレッド構文 ... を組み合...
JavaScript JavaScript 逆引き集 | 配列を逆順
JavaScript配列を逆順にする（reverse）の基本と実践reverseは配列の並びをその場で反転します。最初の要素が最後に、最後の要素が最初になります。元の配列が直接書き換えられる点が重要で...
JavaScript JavaScript 逆引き集 | 配列のソート（数値）
JavaScript配列のソート（数値）の基本と実践数値配列を正しく並べ替えるには、比較関数を渡して「数値として」比較させるのがポイントです。デフォルトのsortは文字列として比較するため、数値だと期...
JavaScript JavaScript 逆引き集 | スプレッドで配列コピー/結合
JavaScriptスプレッド構文で配列コピー／結合配列を「そのままコピーしたい」「複数の配列をつなげたい」ときに便利なのが スプレッド構文（...）。初心者でも直感的に書けて、concatよりも短く...
JavaScript JavaScript 逆引き集 | concat で配列結合
JavaScript配列の結合（concat）の基本と実践「2つ以上の配列をつなげたい」ときに使うのが concat。初心者でも直感的に扱えるメソッドで、元の配列を壊さず新しい配列を返してくれるのが特...
JavaScript JavaScript 逆引き集 | flatMap の変換＋平坦化
JavaScript配列の変換＋平坦化（flatMap）の基本と実践「mapで変換した結果が配列になってしまう → そのままでは二重配列になる」そんなときに便利なのが flatMap。mapとflat...
JavaScript JavaScript 逆引き集 | flat で1階層平坦化
JavaScript配列の平坦化（flat）の基本と実践配列の中に配列が入っていると「二重配列」「ネスト配列」と呼ばれます。これを「1階層だけまっ平らにしたい」ときに使うのが flat。初心者でも直感...
JavaScript JavaScript 逆引き集 | every で全件判定
JavaScript配列の全件判定（every）の基本と実践「配列のすべてが条件を満たす？」を一度で確かめるなら every。すべてが条件に合えばtrue、1つでも合わなければfalseを返します。最...
JavaScript JavaScript 逆引き集 | some でいずれか判定
JavaScript配列のいずれか判定（some）の基本と実践「条件に合う要素がひとつでもある？」を真っ直ぐに確かめるなら some。true/falseだけ返すので、存在チェックやバリデーションに向...
JavaScript JavaScript 逆引き集 | includes で存在確認（原始値）
JavaScript配列の存在確認（includes）の基本と実践「この値、配列に入ってる？」を一発で確かめるなら includes。true/falseだけ返すシンプルさが強みで、indexOfより...
JavaScript JavaScript 逆引き集 | findIndex でインデックス取得
JavaScript配列のインデックス取得（findIndex）の基本と実践「条件に合う要素が配列のどこにあるか」を知りたいなら findIndex。見つかった最初の位置（インデックス）を返し、見つか...
JavaScript JavaScript 逆引き集 | find で最初の一致を取得
JavaScript配列から最初の一致を取得（find）の基本と実践「条件に合う最初の要素を1つだけ取り出したい」なら find が最適です。filterは「全部」を返しますが、findは「最初の1件...
JavaScript JavaScript 逆引き集 | reduce で集計
JavaScript配列の集計（reduce）の基本と実践「配列の値をまとめて1つにしたい」ときに使うのが reduce。合計・平均・最大値・オブジェクト化など、集計処理の万能ツールです。初心者には少...
JavaScript JavaScript 逆引き集 | filter で条件抽出
JavaScript配列の条件抽出（filter）の基本と実践「条件に合う要素だけを取り出して新しい配列を作りたい」なら、filterが最短で安全。元の配列は変えず、判定関数がtrueを返した要素だけ...
JavaScript JavaScript 逆引き集 | map で配列変換
JavaScript配列変換（map）の基本と実践「配列の各要素を加工して、新しい配列を作りたい」なら map が最短ルート。元の配列には触れず、処理結果だけを返してくれるので、初心者でも安全に“変換...
JavaScript JavaScript 逆引き集 | 配列のループ（forEach）
JavaScript配列のループ（forEach）の基本と実践「配列の全要素に同じ処理をサッと当てたい」なら、forEachがいちばん手軽。カウンターや終了条件を意識せず、読みやすく安全に“全件処理”...
JavaScript JavaScript 逆引き集 | 配列のループ（for…of）
JavaScript配列のループ（for...of）の基本と実践最初は「インデックスって必要？」と迷うかもしれないけれど、値だけ順に扱いたいなら for...of がいちばん素直で読みやすい。配列から...
JavaScript JavaScript 逆引き集 | 配列のループ（for）
JavaScript配列のループ（for）の基本と実践最初の一歩って、つまずきやすい。でも「for」は味方。配列を順番に処理するためのいちばん素直なやり方で、仕組みがわかると一気に視界が開けます。ここ...
JavaScript Python JavaScript | プログラミングの繰り返し処理でマジックナンバーを避ける方法
「なんとなく書いた数字」が、後からあなたや他の人を困らせる。それがマジックナンバー。まずは意味をつかんで、繰り返し処理（ループ）での具体的な回避テクを身につけましょう。 マジックナンバーの基礎定義: ...
JavaScript JavaScript | 「ソースマップ」付きで TypeScript や Babel コードをデバッグする方法
ここでは、「ソースマップ付きで TypeScript や Babel 変換後のコードをブラウザでデバッグする方法」を、🔰 初心者向けにステップごとで分かりやすく解説します。そもそも「ソースマップ」って...
JavaScript JavaScript | VSCode のデバッガコンソールで式を評価して調べる方法
ここでは VSCode のデバッガコンソールを使って、デバッグ中に式や変数を確認・評価する方法 を初心者向けに丁寧に解説します。デバッグを「止まって眺めるだけ」から「動かしながら調べる」に進化させるテ...
JavaScript JavaScript | 非同期処理（Promise / async）のステップ実行を例で体験
では、非同期処理（Promise / async/await）のステップ実行を、VSCodeデバッガで体験する例を、初心者向けに手順付きで進めていきます。1. サンプルコードを作るまず小さな非同期処理...
JavaScript JavaScript | Node.js 環境での「–inspect」デバッグ手順（VSCode でのステップ実行）
ここでは、Node.js の --inspect モードを使って VSCode でステップ実行（デバッグ）する方法を、プログラミング初心者向けに 手順通りに進められるチュートリアル形式で解説します。目...
JavaScript JavaScript | 非同期エラー（Promiseやasync/await）のスタックトレース
「ブラウザ開発ツール（DevTools） を使ったデバッグ」は、初心者から“実務で通用する人”へ進むための大きな一歩です。ここでは、Chrome / Edge / Firefox に共通する操作を中心...
JavaScript JavaScript | 非同期エラー（Promiseやasync/await）のスタックトレース
非同期エラーのスタックトレースは「同期コードのそれ」とは挙動が違う部分が多く、つまずきやすいポイントです。以下は 初心者が実務で遭遇するパターン を中心に、具体的なコード例と「何を見ればいいか」「どう...
JavaScript JavaScript | 月別アルバムページ × タグフィルタ × 地図表示
ここまでの要素を全部組み合わせて、「月別アルバムページ」＋「タグフィルタ」＋「地図表示」 を統合したギャラリーの仕組みを整理してみましょう。1. 処理の流れ画像を読み込みPillowでサムネイル生成E...
JavaScript JavaScript | フォームバリデーション（入力チェック）
特徴リアルタイム判定入力するたびにOK/NGを表示。NG時に修正候補をボタンで自動適用メール → 「@example.com」を補完電話 → 桁数を補正してハイフン整形URL → https:// を...
JavaScript JavaScript | 再帰とループの性能比較
「再帰」と「ループ」は同じ処理を実現できることが多いですが、性能面では違いがあります。初心者向けに整理してみます。性能比較のポイント1. 関数呼び出しのコスト再帰関数を呼ぶたびに「呼び出しスタック」に...
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 を「定義場所（レキシカル）」から拾う 特性があるので、クラスのイン...
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...
JavaScript JavaScript | 「複数条件（AND / OR / NOT / ??）」を クリック操作で体験できるサンプル
この教材では、ボタンを押すと条件が切り替わり、リアルタイムで if の判定結果が表示されるようにします 。 See the Pen Multiple conditions (AND / OR / ??...
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...
JavaScript JavaScript | 翻訳辞書を用意して本格的に i18n（多言語対応）する方法
では「翻訳辞書を用意して本格的に i18n（多言語対応）する方法」を見てみましょう。ゴール言語ごとに翻訳辞書を用意する関数の中で「キー」を使って文言を取り出す日本語・英語以外にも簡単に拡張できる翻訳辞...
JavaScript JavaScript | JavaScriptで使える小さなCSVユーティリティ
短いコードで「CSVの読み込み（文字列→配列/オブジェクト）」と「書き込み（配列/オブジェクト→文字列）」を扱えるユーティリティです。標準ライブラリだけで動き、カンマ・ダブルクオート・改行に対応します...
JavaScript JavaScript | 3次元配列を図と例題で理解する
配列の中に配列、その中にまた配列。最初はややこしく見えるけれど、「箱の中に箱が入っていて、さらにその中に箱がある」と想像できたらぐっと楽になります。3次元配列は、データを「階層」と「位置」で整理するた...
JavaScript JavaScript | 「部分失敗時にログだけ出して続行」するコード例
ここでは 複数の非同期処理のうち、一部が失敗しても処理を止めず、成功した分だけ使うパターン を解説します。ポイントは Promise.allSettled + finally を使うことです。シナリオ...
JavaScript JavaScript | Promise.allSettled + finally で部分成功・部分失敗を安全に処理するフロー図
では 「Promise.allSettled + finally」 を使った場合の処理フローを、「部分成功・部分失敗を安全に処理する」観点で図解します。前提シナリオ3つの API を同時に呼び出す：f...
JavaScript JavaScript | 「Promise.all + finally」を図でフロー解説（成功／失敗ルート図付き）
では 「Promise.all + finally」 の処理フローを、初心者でも理解しやすい図で解説します。今回は「成功ルート」と「失敗ルート」の両方を示します。前提シナリオ3つの API を同時に呼...
JavaScript JavaScript | 複数の fetch を並列で実行 → どれか失敗しても安全に処理を続ける
ここでは、複数の fetch を並列で実行して、どれか1つ失敗しても他を続行できる安全な書き方 を、初心者向けに丁寧に解説します。目的複数のAPIを同時に呼び出すとき、1つでも失敗すると全部が止まる ...
JavaScript JavaScript | finally と async/await の中で return や throw を組み合わせた高度な制御
ここでは async/await と finally を組み合わせたときの制御の流れ、特にreturn や throw を使うとどうなるか、を 具体的な例で丁寧に 解説します。目的try / catc...
JavaScript JavaScript | 非同期例外をデバッグで追う
ここでは、「非同期処理（fetch / async / Promise）で起きたエラーをデバッグで追う」 を、初心者にもわかるように ― 例題つきで ― 解説します。目的「非同期の中で発生したエラー（...
JavaScript JavaScript | 「複数のAPIを並列処理 → 一部失敗時に安全に処理を続ける」を実例で比較（良いコード / 悪いコード）
これは「非同期処理を複数まとめて実行しつつ、一部が失敗しても全体を止めずに進める」という実践的なテーマです。API連携やWebアプリで「部分的にデータ取得に失敗しても、取れる部分だけ表示したい」という...
JavaScript JavaScript | 「fetch＋async＋finally（後処理付き）」を実例で比較（良いコード / 悪いコード）
ここでは、「fetch × async/await × finally」 を組み合わせて、「通信成功・失敗どちらでも後処理を確実に実行する」コードを、初心者でも理解できるようにステップごとに解説します...
JavaScript JavaScript | 「非同期（fetch / async/await）での例外処理のコツ」と「よくある落とし穴」を実例で比較（良いコード / 悪いコード）
JavaScript の 非同期処理（fetch / async/await） の例外処理は、初心者がつまずきやすいポイントの一つです。ここでは、よくある「落とし穴」→「なぜダメか」→「良い書き方」を...
JavaScript JavaScript | 複数の fetch を並列で実行 → どれか失敗しても安全に処理を続ける
実務でも「finally の中で return や throw を書いてしまう」ミスは危険かつ気づきにくいため、ESLint（JavaScriptの静的解析ツール）で検出できるようにしておくのが効果的...
JavaScript JavaScript | Prettier＋ESLintを共存させて競合を防ぐ設定
Prettier と ESLint はどちらもコード整形・チェックを行いますが、ルールがかぶると競合して「保存時に勝手に戻される」などのトラブルが起きます。ここでは 競合を防ぎつつ両方を使う設定 をま...
JavaScript JavaScript | チーム全員で統一する VSCode 拡張＋設定テンプレート
チーム開発で VSCodeの拡張機能や設定を統一 するテンプレートを作ると、全員の開発環境で ESLint/Prettier のルールや警告が同じになり、コードスタイルの不一致やバグを減らせます。目的...
JavaScript JavaScript | Promise.all + finally の複合制御
ここは「複数の非同期処理（fetch など）をまとめて実行して、最後に共通の後処理をする」という実務で非常に役立つテクニックです。以下で、❌ 悪い例（落とし穴あり）✅ 良い例（安全で読みやすい制御）を...
JavaScript JavaScript | VSCodeで「保存時に自動修正＆警告表示」する設定（.vscode/settings.json）
では、VSCodeで 「保存時に自動修正」＋「リアルタイム警告」 を出す完全設定を、初心者にもわかるように丁寧に説明します。目的保存時に自動で ESLint を走らせて、コードの問題（例：finall...
JavaScript JavaScript | 引数の数に応じて処理を変える関数
では「引数の数に応じて処理を変える関数」を一緒に作ってみましょう。お題引数が 1つ → その値を 2倍引数が 2つ → 2つを 掛け算引数が 3つ以上 → 全部を 掛け算コード例（arguments ...
JavaScript JavaScript | eval() を使わずに安全に同じことをする方法
eval() を使わずに 安全に・再現可能に・制御された形で動的な振る舞いを実現する方法 を、実用的なパターンとサンプルコードで見せます。初心者でも試せるよう、短く分かりやすい例を中心にします。まとめ...
JavaScript JavaScript | 関数を文字列化して eval で実行するのがなぜ危険なのか
ここでは、「関数を文字列化して eval で実行するのがなぜ危険なのか」 を、実際に動かして確かめられるように、ブラウザでそのまま試せる 練習用サンプル（安全に体験できるデモ） を紹介します。目的to...
JavaScript JavaScriptとTypeScript
先にザックリ結論JavaScript（JS）：ブラウザやサーバ（Node.js）で動く「実行される言語」。動的で柔軟。今すぐ書いてすぐ動く。TypeScript（TS）：JavaScriptの上に「型...
JavaScript XserverにNode.jsを導入する方法
全体像：XserverでNode.jsを動かすとは何をしているのかまず前提として、Xserverは一般的な「レンタルサーバー」です。標準ではPHPやMySQLはすぐ使えますが、Node.jsはそのまま...
JavaScript JavaScript | タグでフィルタ表示の仕組み
「フォルダ内の画像をサムネイル化してHTMLギャラリーを作る」仕組みに、タグでフィルタ表示を加えます。これは JavaScript を少し組み合わせると実現できます。1. 基本の考え方各画像に「タグ情...
JavaScript JavaScript | 配列の中にオブジェクトを入れて管理する方法
ここからは「配列の中にオブジェクトを入れる」という、実践的なデータ管理方法を初心者向けに、イラスト的なイメージ＋実用的なコード例で丁寧に解説します！配列の中にオブジェクトを入れるとは？まず、オブジェク...
JavaScript JavaScript | 正規表現ステップアップ練習
では、初心者が手を動かしながら正規表現を学べるミニ課題集（全10問）を作り、それぞれステップごとに解説します。問題1：数字だけの文字列かチェック条件：文字列が 1桁以上の数字だけ で構成されているかヒ...
JavaScript JavaScript | 正規表現オブジェクト
主な内容の要点JavaScriptで正規表現を使うには「正規表現オブジェクト」を作成します。作り方は大きく2種類あり、/パターン/ と書く方法と new RegExp("パターン") を使う方法です。...
JavaScript JavaScript | 例外処理（try…catch） のポイント
主な内容の要点JavaScriptのtry...catchは、関数の中で発生したエラーも呼び出し元のtry...catchで捕まえられる。ただし、非同期処理（例：setTimeout）の中で起きたエラ...
JavaScript JavaScript | throw文
主な内容の要点JavaScriptでは、throw文を使うことで自分でエラー（例外）を発生させることができます。これにより「ここで処理を止めたい」「特定の条件でエラーを知らせたい」といった場面を自由に...
JavaScript JavaScript | 非同期（fetch / async）でのエラーの落とし穴（良い書き方・悪い書き方）を具体コード比較で示す
ここでは、「非同期処理（fetch / async）」でよくあるエラーの落とし穴を、「悪い書き方 → なぜダメか → 良い書き方」に整理して解説します。初心者がつまずきやすいポイントを中心に、実際のコ...
JavaScript JavaScript | 例外とエラーハンドリング
主な内容の要点JavaScriptではエラー（例外）がいくつかの種類に分かれていて、try...catchを使うと発生した例外をキャッチして処理できます。さらに、例外の種類ごとに処理を分けることができ...
JavaScript JavaScript | 例外処理（try…catch） の練習問題セット（初心者向け）
目的try…catch の基本、例外の伝搬（同期）、非同期コールバックでの落とし穴、Promise / async–await での例外処理を確実に理解すること。各問題は「問題 → 予想 → 実行例（...
JavaScript JavaScript | 非同期エラーの「良い書き方・悪い書き方」を比較するサンプル
ここでは、「非同期処理での例外（エラー）をどう扱うか」について、初心者がよくやってしまう「悪い書き方」と、実務的に安全な「良い書き方」を、コメント付きで比較解説します。テーマ：setTimeout な...
JavaScript JavaScript | try…catch…finally 文による例外処理
主な内容の要点JavaScriptのtry...catch...finallyは、エラーが起きてもプログラムを安全に続けるための仕組みです。特にfinallyは「必ず最後に実行される処理」を書けるのが...
JavaScript JavaScript | 非同期処理をブレークポイントで止める
初心者が 「非同期処理をブレークポイントで止める」 のは少し難しく感じますが、実はブラウザの開発ツール（DevTools）を使えば fetch や setTimeout の中の処理も止めて中身を確認 ...
JavaScript JavaScript | 「例外＋非同期」のデバッグ実践（Promise の中のエラー追跡）
ここからは、「例外 × 非同期処理（Promise・async/await）」で発生するエラーをデバッグする方法を、初心者向けにやさしく、具体例つきで解説します。（ブラウザ開発ツールを使った実践手順つ...
JavaScript JavaScript | 非同期エラーの落とし穴（Promise を返さない async と catch の罠）
JavaScript の「非同期エラー」まわりは、初心者が一番つまずくところの1つです。ここでは、Promise・async/await・try/catch の関係と、「Promise を返さない a...
JavaScript JavaScript | 例外のデバッグ方法
「例外（エラー）をデバッグする力」は、プログラミング初級から中級に進む大きなステップです。ここでは、「stack（スタックトレース）」の見方と活用方法を、初心者でもわかるようにかみ砕いて解説します。1...
JavaScript JavaScript | 例外処理（try…catch文）
主な内容の要点JavaScriptでエラーが起きるとプログラムが途中で止まってしまいます。これを防ぐために try...catch文 を使うと、エラーをキャッチして安全に処理を続けられます。ポイント解...
JavaScript JavaScript | デフォルト引数
JavaScriptのデフォルト引数「引数を渡し忘れても、賢く初期値が入る仕組み」がデフォルト引数です。関数のパラメータに「= 値」を書いておくと、その引数が未指定または undefined のときに...
JavaScript JavaScript | 可変長引数（rest パラメータ）
プログラミングを始めたばかりだと「…（ドット3つ）」が何をしているのか戸惑いますよね。rest パラメータは「引数の数が決まっていなくても関数で受け取れる」便利な仕組みです。例を交えながら、直感的に理...
JavaScript JavaScript | コールバック関数 と 高階関数
主な内容の要点JavaScriptでは「関数」を変数に入れたり、関数に渡したり、関数から返したりできます。こうした仕組みを使うと「コールバック関数」や「高階関数」が扱えるようになり、非同期処理やイベン...
JavaScript JavaScript | 「メモ化」を使って再帰関数を高速化する方法
ここでは、「メモ化（memoization）」を使って再帰関数を高速化する方法を、ステップ実行（呼び出しの流れを1つずつ追う）つきでわかりやすく解説します。そもそも「メモ化」とは？メモ化（memoiz...
JavaScript JavaScript | 「再帰関数」でツリー探索（Tree Traversal）
では今回は、再帰の「本領発揮」分野である ツリー探索（Tree Traversal） を、プログラミング初心者でも「実感して理解できる」ように、段階的にやさしく解説します。1. まず「ツリー構造」って...
JavaScript JavaScript | 再帰関数
主な内容の要点再帰関数とは「関数の中で自分自身を呼び出す関数」のことです。無限ループにならないように「終了条件」を必ず書くのが大事です。代表的な使い方は「階乗の計算」など、同じ処理を繰り返しながら少し...
JavaScript JavaScript | 関数関連の便利な仕組み・プロパティ
関数まわりの「ちょっと特殊な性質」を整理しておくと、JavaScript の理解がグッと深まります。初心者向けに、代表的なものをわかりやすくまとめますね。関数関連の便利な仕組み・プロパティ1. arg...
JavaScript JavaScript | 関数で受け取る引数の数を取得する
主な内容の要点JavaScript の関数には .length プロパティがあり、「その関数が定義時に受け取る引数の数」を調べることができます。ただし、実際に呼び出したときに渡された引数の数ではない点...
JavaScript JavaScript | 関数（関数定義）を 文字列として取得する方法
主な内容の要点JavaScript では、関数に対して .toString() を使うと、その関数の「中身（定義内容）」を文字列として取り出すことができます。つまり、関数がどんなコードで書かれているか...
JavaScript JavaScript | arguments を Array に変換して …rest と同じように扱う方法
ここでは「arguments を Array に変換して、...rest と同じように扱う方法」を初心者向けに、図＋実験つきでわかりやすく解説します。なぜ変換が必要なの？arguments は「配列の...
JavaScript JavaScript | arguments の内部挙動
arguments の「内部でどう動いているか」は、見た目より少し複雑で、実装や ECMAScript（仕様）のルールに依存します。ここでは 初心者〜中級者が知っておくと役立つレベル に噛み砕いて、実...
JavaScript JavaScript | arguments と strict mode の関係
arguments オブジェクトは 「通常モード」と「strict mode（厳格モード）」 で挙動が変わります。これは初心者がつまずきやすいポイントなので、やさしく整理して説明します。まず前提：st...
JavaScript JavaScript | arguments オブジェクト と 可変長引数（rest パラメータ） を比較
では arguments オブジェクト と 可変長引数（rest パラメータ ...rest） を、初心者向けにわかりやすく比較してみましょう。基本的な違い項目arguments オブジェクト...r...
JavaScript JavaScript | 関数で使う arguments オブジェクト の使い方
主な内容の要点JavaScript の arguments オブジェクトは、関数に渡された引数をまとめて扱える特別な仕組みです。引数の数が決まっていなくても、arguments を使えばすべての値を取...
JavaScript JavaScript | クラスの継承・オーバーライド・super とアロー関数の関係
では、クラスの継承・オーバーライド・super とアロー関数の関係を具体例で詳しく解説します。ポイントは「プロトタイプメソッドとアロー関数ではオーバーライドの挙動が違う」ということです。1. 基本：プ...
JavaScript JavaScript | クロージャ比較の図解
ここは Function コンストラクタで作った関数 と 通常の関数（関数リテラル／関数式） の「クロージャ（外側のローカル変数を覚えるかどうか）」を視覚的に比較する図解と説明ページです。目的なぜ n...
JavaScript JavaScript | 初心者が JavaScript の関数を練習するなら？
初心者が JavaScript の関数を練習するなら、次の順番で学ぶのが一番わかりやすく、実践的です。ステップ1：関数宣言（function 宣言）function greet(name) { ret...
JavaScript JavaScript | Function コンストラクタを使って関数を定義する
主な内容の要点JavaScript では function キーワード以外にも、Function コンストラクタを使って関数を作れる。ただし、実際の開発ではあまり使われない方法なので「こういう書き方も...
JavaScript JavaScript | クラス継承でアロー関数を使うときの実務的な注意点
では、クラス継承でアロー関数を使うときの実務的な注意点を整理してみましょう。特に React のクラスコンポーネントや、イベント処理を含むクラス設計でよく出てくる落とし穴です。通常メソッド vs アロ...
JavaScript JavaScript | クラスを継承して super 呼び出しの挙動を比較（アロー関数 vs 通常メソッド）
クラス継承における super 呼び出し は、アロー関数と通常メソッドで挙動が大きく変わります。基本ルール通常メソッドクラスのプロトタイプに登録される。super を使って親クラスのメソッドを呼び出せ...
JavaScript JavaScript | クラス内でアロー関数とプロトタイプメソッドを大量に作った場合のメモリの違い
それでは クラス内でアロー関数（class-field）とプロトタイプメソッドを大量に作った場合のメモリの違い をわかりやすく見てみましょう。実際に JS でインスタンスを作って比較するイメージです。...
JavaScript JavaScript | this の挙動を体系的に整理（グローバル・関数・メソッド・クラス・アロー関数）
それでは JavaScript における this の挙動を体系的に整理してみましょう。グローバル・関数・メソッド・クラス・アロー関数など、状況ごとにどう変わるかをマップのようにまとめます。1. グロ...
JavaScript JavaScript | classの継承（extends）
では「classの継承（extends）」について見ていきましょう。これを理解すると、オブジェクト指向の「再利用」と「拡張」ができるようになります。継承とは？あるクラスをもとにして、新しいクラスを作る...
JavaScript JavaScript | 関数リテラル（通常の function 式）とアロー関数の this の違い
JavaScriptにおける function式（関数リテラル） と アロー関数 の最大の違いのひとつが this の扱い です。初心者向けに整理してみますね。違いのまとめ種類this の決まり方特徴...
JavaScript JavaScript | 「class構文」と「関数リテラル／アロー関数」の関係を整理
では「class構文」と「関数リテラル／アロー関数」の関係を整理してみましょう。ここを押さえると、オブジェクト指向の理解がぐっと深まります。class構文とは？JavaScriptでオブジェクトを作る...
JavaScript JavaScript | 「アロー関数の使いどころと、あえて使わないほうがいい場面」を整理
では「アロー関数の使いどころ」と「あえて使わないほうがいい場面」を整理してみましょう。これを知っておくと、実際のコードで迷わなくなります。アロー関数を使うと便利な場面配列操作map, filter, ...
JavaScript JavaScript | アロー関数の省略ルール
それでは「アロー関数の省略ルール」を整理してみましょう。これを覚えると、コードがさらにスッキリ書けるようになります。アロー関数の省略ルール1. 引数が1つのときはカッコを省略できる// 通常let s...
JavaScript JavaScript | クラス内でアロー関数を使う理由
クラスの中でアロー関数を使う理由は、主に this の扱い にあります。初心者がよくつまずくポイントなので、例を交えて整理しますね。通常のメソッドとアロー関数の違い通常のメソッドclass Count...
JavaScript JavaScript | アロー関数とbindの違い
アロー関数とbindの違いを初心者向けに解説JavaScriptで「thisが思った通りにならない！」というときによく出てくるのが アロー関数 と bind。どちらも「thisを固定する」ために使われ...
JavaScript JavaScript | イベント処理での「普通の関数」と「アロー関数」の使い分け
イベント処理での「普通の関数」と「アロー関数」の使い分けイベント処理では「クリックされた要素をthisで参照したいのか」「外側のthisを保持したいのか」で、普通の関数とアロー関数を使い分けます。基本...
JavaScript JavaScript | クラスのメソッドをアロー関数にするメリットとデメリット
クラスのメソッドをアロー関数にするメリットとデメリットクラスの中でメソッドを「通常の関数」として書くか「アロー関数」として書くかで、挙動や効率が変わります。初心者向けに整理してみましょう。メリット（ア...
JavaScript JavaScript | クラスの中でアロー関数を使うとどうなるか
クラスの中でアロー関数を使うとどうなるかクラスの中でアロー関数を使うと、その関数のthisは「インスタンス」に固定されるという特徴が出てきます。これは普通のメソッド（通常の関数）との大きな違いです。基...
JavaScript JavaScript | アロー関数のthis
アロー関数のthisを初心者向けにやさしく解説JavaScriptを学び始めると「thisってややこしい！」と感じる人が多いです。特にアロー関数は、普通の関数とthisの動きが違うので混乱しやすいポイ...
JavaScript JavaScript | アロー関数 this のレキシカル束縛
アロー関数を理解するうえで最も重要なのが 「this のレキシカル束縛」（＝定義された場所の this をそのまま使う）です。ここでは、1️⃣ 通常の関数との違い2️⃣ 図解での理解3️⃣ 実際のコー...
JavaScript JavaScript | アロー関数
主な内容の要点JavaScriptの「アロー関数式」は、関数をよりシンプルに書ける新しい記法です。特に短い処理やコールバック関数を書くときに便利です。アロー関数の基本通常の関数式 let add = ...
JavaScript JavaScript | 「関数リテラル（無名関数）」と「アロー関数」の比較
「関数リテラル（無名関数）」と「アロー関数」は見た目が似ていますが、いくつか大事な違いがあります。初心者向けに整理してみましょう。書き方の違い種類書き方例関数リテラル（無名関数）let f = fun...
JavaScript JavaScript | 関数リテラル（無名関数）
主な内容の要点JavaScriptでは「関数リテラル」を使って、名前のない関数（無名関数）を変数に代入して利用できます。これにより、一度しか使わない処理や、関数を引数として渡す場面で便利です。ポイント...
JavaScript JavaScript | 関数はオブジェクト
主な内容の要点JavaScriptでは「関数」も特別な存在ではなく、オブジェクトの一種として扱われます。そのため、関数は「変数に代入できる」「別の変数にコピーできる」「引数として渡せる」といった柔軟な...
JavaScript JavaScript | 関数の定義と呼び出し位置
主な内容の要点JavaScriptの関数は「どこに書くか」「どの順番で呼び出すか」で動き方が変わります。基本は「関数を先に定義してから呼び出す」と覚えておくと安心です。ポイント整理関数定義と呼び出しの...
JavaScript JavaScript | 配列→オブジェクトにリファクタリングする手順とAPI設計視点での戻り値設計のベストプラクティス
配列→オブジェクトにリファクタリングする手順例題：配列で返す統計関数function calcStats(values) { const sum = values.reduce((a, b) => a...
JavaScript JavaScript | 「関数で複数の値を返す」というテクニックをAPI整形・フォーム検証など実務っぽい応用
ここからは、「関数で複数の値を返す」というテクニックを、実務で本当に使える APIデータ整形 や フォーム入力の検証 にどう活かすかを、初心者向けにわかりやすく紹介します。目的現実の開発では、関数は「...
JavaScript JavaScript | 関数の戻り値をさらに別の関数に渡す
では「関数の戻り値をさらに別の関数に渡す」練習に進みましょう。これはプログラムを組み合わせて使うときにとても大事な考え方です。ステップアップ練習例題1：計算結果を別の関数に渡すまずはシンプルな例から。...
JavaScript JavaScript | 関数から複数の値を返す方法
主な内容の要点JavaScriptで関数から複数の値を返す方法は「配列」と「分割代入」を使うことです。 初心者向けポイント関数の戻り値は1つだけJavaScriptの関数は return で返せる値は...
JavaScript JavaScript | 関数から値を返す（return文）
主な内容の要点JavaScriptの関数で使うreturnは、関数の処理結果を呼び出し元に返すための仕組みです。値を返す場合もあれば、処理を途中で終了させるためだけに使うこともできます。1. retu...
JavaScript JavaScript | 関数と参照渡しの注意点
主な内容の要点JavaScriptで関数に値を渡すとき、「数値や文字列」などの基本型はコピーが渡されるので元の変数は変わらない。一方で、「配列やオブジェクト」などの参照型は同じデータを共有するため、関...
JavaScript JavaScript | 「引数」を使って関数にデータを渡す
主な内容の要点JavaScriptの関数に値を渡すときに使う「引数」について解説されています。引数は関数にデータを渡す仕組みで、数が合わなくてもエラーにならず、工夫次第で柔軟に使えます。1. 引数の基...
JavaScript JavaScript | 関数の基本的な定義方法と使い方
主な内容の要点JavaScriptで関数を使うには、まず「定義」してから「呼び出す」必要があります。関数は「入力（引数）」を受け取り、「処理」を行い、「出力（戻り値）」を返す仕組みです。関数の基本定義...
JavaScript JavaScript | reduce と map/filter を組み合わせた応用パターン
ここでは、reduce と map／filter を組み合わせた実践的な使い方＋パフォーマンス面の注意を、初心者向けに かみ砕いて＋コード例つき で解説します。目標単純な合計だけでなく、「条件でしぼる...
JavaScript JavaScript | filter と reduce と組み合わせて集計処理を学ぶ
filter と reduce を組み合わせると、「条件で絞り込み → 集計」という流れをシンプルに書けます。実務でもよく使うパターンなので、例題を交えて説明します。基本の流れfilter: 配列から...
JavaScript JavaScript | 配列のすべての要素を合計する方法（reduce メソッド）
主な内容の要点JavaScriptで配列の合計を出すときは、reduceメソッドを使うのが便利です。配列の要素を順番に処理して、最終的に1つの値（合計など）を返してくれます。reduceメソッドの基本...
JavaScript JavaScript | map と filter の違い — 図（テキスト）＋コードで直感的に理解する
初心者向けにわかりやすく比較した“図”と短い解説、具体例です。まず全体像をザッと掴んで、下のコードで挙動を確認してください。図：処理のイメージ（左→右）元配列: [1, 2, 3, 4]map: 各要...
JavaScript JavaScript | 配列の中から「条件を満たす要素だけ」を取り出して、新しい配列を作る
主な内容の要点JavaScript の filter メソッドを使うと、配列の中から「条件を満たす要素だけ」を取り出して、新しい配列を作ることができます。元の配列は変わりません。基本の使い方let 新...
JavaScript JavaScript | for 文で書いた処理を map / filter / reduce に書き換える
では「for 文で書いた処理を map / filter / reduce に書き換える練習問題」を用意します。初心者でも段階的に理解できるようにしてみます。練習問題 1：配列の要素を2倍にするfor...
JavaScript JavaScript | map / filter / forEach / reduce まとめ
では「配列メソッド4兄弟」＝ map / filter / forEach / reduce をまとめてみましょう。4つのメソッドの役割メソッド返り値主な用途特徴map新しい配列要素を「変換」する元の...
JavaScript JavaScript | map() メソッドを使った 実践的な例
ここでは、JavaScript の map() メソッドを使った 実践的な例 を、プログラミング初心者でもわかるようにステップごとに解説します。今回のテーマはこの2つ👇数値を10倍にする（基本の変換例...
JavaScript JavaScript | 配列操作でよく出てくる map / filter / forEachの使い分け
JavaScript の配列操作でよく出てくる map / filter / forEach は似ているようで役割が違います。初心者向けに整理してみましょう。ざっくりイメージmap → 「変換」：配列...
JavaScript JavaScript | すべての要素に順番に同じ処理を行い、新しい配列を作る
主な内容の要点map メソッドのポイント役割配列のすべての要素に「同じ処理」を順番に行い、その結果を集めた 新しい配列 を作る。元の配列は変わらないmap は新しい配列を返すだけで、元の配列はそのまま...
JavaScript JavaScript | 配列における要素の並び替え方法（reverse / sort）
主な内容の要点1. reverseメソッド使い方: 配列.reverse()配列の要素を 逆順 に並べ替える。新しい配列を返すのではなく、元の配列そのものが書き換わる。例: let fruits = ...
JavaScript JavaScript | 配列の全要素を連結して文字列を得る方法
主な内容の要点1. join() メソッド配列の要素を 文字列に変換してつなげる ことができる書き方： 配列名.join(区切り文字);区切り文字を指定しないと カンマ ( , ) でつながる区切り文...
JavaScript JavaScript | slice() とよく比較される splice() の違い
slice() と splice() は名前が似ているので混乱しやすいですが、性質はまったく違います。初心者向けに整理するとこうなります。slice() と splice() の違い項目slice()...
JavaScript JavaScript | 配列の一部をコピーして、新しい配列を作る（slice メソッド）
主な内容の要点slice() メソッドの基本役割：配列の一部をコピーして、新しい配列を作る元の配列は変わらない（非破壊的）使い方array.slice()array.slice(開始位置)array....
JavaScript JavaScript | 配列の要素を条件で調べる便利メソッドまとめ
主な内容の要点JavaScript には、配列の中から「条件に合う要素」を探したり、チェックしたりするためのメソッドが用意されています。代表的なのは次の4つです。1. findIndex() — 条件...
JavaScript JavaScript | find / filter / some / every — 図解でスッキリ理解
初心者向けに、違いを「何を返すか」「いつ使うか」「挙動の図」をコード例つきでまとめます。イメージしやすいように同じデータで比較します。const users = [ { name: '太郎', age...
JavaScript JavaScript | indexOf() / lastIndexOf() / includes() / find() / findIndex() と比較して、どれをいつ使うか図解で説明
indexOf() / lastIndexOf() に続いて、includes()、find()、findIndex() は「配列から値や条件に合う要素を探す」ときによく使われるメソッドです。初心者で...
JavaScript JavaScript | indexOf() と lastIndexOf() を「実際のアプリでどう使えるのか？」
では、indexOf() と lastIndexOf() を「実際のアプリでどう使えるのか？」を、シンプルな TODO リスト例 でやさしく解説していきましょう。目標「同じタスクが二重登録されないよう...
JavaScript JavaScript | 配列の中身を検索（indexOf / lastIndexOf）
主な内容の要点1. indexOf メソッド配列の 先頭から 指定した値を探す見つかったらその 位置（インデックス番号） を返す見つからなければ -1 を返す書き方： 配列.indexOf(値);配列...
JavaScript JavaScript | 配列メソッドの使い分け（map / forEach / filter / reduce の違い）
いいテーマです！配列メソッドは「どれを使えばいいのか」が最初は混乱しやすいポイント。ここでしっかり整理しておきましょう。配列メソッドの使い分けメソッド目的戻り値使いどころサンプルコードforEach配...
JavaScript JavaScript | 配列っぽいオブジェクト（Array-like）を本当の配列に変換する方法
JavaScript には「配列っぽいオブジェクト（Array-like）」というものがあり、見た目は配列に似ているけど本当の配列ではないため、map や filter などの便利な配列メソッドが使え...
JavaScript JavaScript | Array.isArray で配列かどうか調べる
主な内容の要点1. 配列かどうかを判定する方法JavaScript では Array.isArray(オブジェクト) を使うと、その値が配列かどうかを調べられる。結果は true / false で返...
JavaScript JavaScript | concat とスプレッド演算子のベストプラクティス（どっちをいつ使うか）
concat() と スプレッド演算子（...） はどちらも「配列を結合したりコピーしたり」できますが、実際の開発では使い分けを意識するとコードが読みやすく・安全になります。結論まとめ（先にざっくり）...
JavaScript JavaScript | concat() と似た動きをする push()／slice()／スプレッド演算子（…） の違いと使い分け
ここでは、concat() と似た動きをする push()／slice()／スプレッド演算子（...） の違いと使い分けを、初心者向けにわかりやすく解説します。配列を結合・コピーする主な方法の比較メソ...
JavaScript JavaScript | 配列を結合する方法（concatメソッド）
主な内容の要点基本の使い方concat() メソッドを使うと、複数の配列や値を1つの新しい配列にまとめることができます。元の配列は変更されず、新しい配列が返されます。let fruits = ['Ap...
JavaScript JavaScript | 各要素の平均値との差（偏差）を計算して返す関数
では「各要素の平均値との差（偏差）を計算して返す関数」を作ってみましょう。これは 統計の基礎（偏差） に触れる練習です。目標配列の平均値を求める各要素から平均値を引いて「偏差」を計算する偏差を集めた新...
JavaScript JavaScript | 平均値以上の数だけを集める関数
では「平均値以上の数だけを集める関数」を作ってみましょう。これは 平均値を計算してから条件でフィルタする 練習です。目標配列の平均値を求める平均値以上の要素だけを新しい配列に入れるその配列を返す✅ 模...
JavaScript JavaScript | 最大値と最小値の差を返す関数
では「最大値と最小値の差を返す関数」を作ってみましょう。これは 比較結果をさらに計算に使う 練習です。目標配列の中から最大値と最小値を探すその差（最大値 − 最小値）を計算して返す✅ 模範解答（for...
JavaScript JavaScript | 最大値と最小値のインデックスも一緒に返す関数
では「最大値と最小値のインデックスも一緒に返す関数」を作ってみましょう。これは 値と位置を両方追跡する 練習です。目標配列を順番に調べる最大値と最小値を見つけると同時に、そのインデックスも記録する{ ...
JavaScript JavaScript | 最大値とそのインデックス（位置）を返す関数
では「最大値と最小値の両方を返す関数」を作ってみましょう。これは 複数の比較を同時に管理する 練習になります。目標配列を順番に調べる最大値と最小値を同時に更新していく{ max: 最大値, min: ...
JavaScript JavaScript | 最大値とそのインデックス（位置）を返す関数
では「最大値とそのインデックス（位置）を返す関数」を作ってみましょう。これは 値と位置を同時に管理する 練習です。目標配列を順番に調べる最大値を見つけると同時に、その位置（インデックス）も記録する{ ...
JavaScript JavaScript | 配列の中で一番大きい数を探す関数
では「配列の中で一番大きい数を探す関数」を作ってみましょう。これは 比較と更新 の練習になります。目標配列を順番に調べる「今までで一番大きい数」を覚えておく最後にその最大値を返す✅ 模範解答（for文...
JavaScript JavaScript | 偶数と奇数を分けて、2つの配列を返す関数
では「偶数と奇数を分けて、2つの配列を返す関数」を一緒に作ってみましょう。これは「複数の結果をまとめて返す」練習になります。目標配列を順番に調べる偶数は evens 配列に、奇数は odds 配列に入...
JavaScript JavaScript | 配列の中から偶数だけを集めて新しい配列を返す関数
では「配列の中から偶数だけを集めて新しい配列を返す関数」を作ってみましょう。これは「条件に合うすべての要素を取り出す」練習です。目標配列を順番に調べる偶数だけを新しい配列に入れる最後にその配列を返す✅...
JavaScript JavaScript | 配列の中から条件に合う最初の要素を探す関数
では「最初に偶数を見つけて返す関数」を一緒に作ってみましょう。これは「配列の中から条件に合う最初の要素を探す」練習です。目標配列を順番に調べる最初に偶数を見つけたら返す見つからなければ null を返...
JavaScript JavaScript | forEachを実務レベルでどう使うか
ここからは「forEachを実務レベルでどう使うか」を、初心者でも理解できるようにやさしく解説していきます。テーマはこの2つです👇1️⃣ オブジェクト配列の処理（よくあるデータ操作）2️⃣ 非同期処理...
JavaScript JavaScript | 配列の要素を順番に取り出す方法（forEachメソッド）
主な内容の要点1. forEachメソッドとは？配列に入っている要素を 先頭から順番に取り出して処理 できる。書き方： 配列.forEach(function(要素, インデックス, 配列全体) { ...
JavaScript JavaScript | 配列の中身を 削除・置き換え・追加（splice メソッド）
主な内容の要点splice() メソッドの基本配列の中身を 削除・置き換え・追加 できる便利なメソッド。書き方は次の3パターン： array.splice(開始位置)array.splice(開始位置...
JavaScript JavaScript | 配列から要素を削除する（pop, shift）
主な内容の要点JavaScript では、配列から要素を削除する方法がいくつかあります。代表的なのは次の 4 つです。1. pop() メソッド：配列の 最後の要素 を削除配列の最後の要素を削除する削...
JavaScript JavaScript | 配列に要素を追加する（push, unshift）
要点まとめJavaScript では、配列にあとから要素を追加できます。主な方法は次の3つです。1. インデックスを指定して追加let fruits = ['apple', 'orange', 'le...
JavaScript JavaScript | 配列の要素数を調べる（length プロパティ）
主な内容の要点1. 基本の使い方配列の要素数は 配列名.length で取得できる let data = [10, 42, 52];console.log(data.length); // 3let ...
JavaScript JavaScript | 3次元配列（配列の中の配列の中に配列）
ここからは「3次元配列（配列の中の配列の中に配列）」を、初心者向けにわかりやすく、図と例題でじっくり解説します。3次元配列とは？イメージからつかもう「配列の中に配列があり、その中にさらに配列がある」構...
JavaScript JavaScript | 多次元配列（配列の中に配列）
主な内容の要点1. 多次元配列とは？配列の要素として別の配列を入れられるこうした「配列の中の配列」を 多次元配列 と呼ぶ例: let userData = [ ['Yamada', 28, 'Toky...
JavaScript JavaScript | 配列の要素の取得と代入
主な内容の要点配列の要素にアクセスする方法配列の中の値（要素）は インデックス番号 で指定するインデックスは 0から始まる例: pref → 1番目の要素書き方： 配列名[インデックス]配列名[インデ...
JavaScript JavaScript | 配列を作成する方法
主な内容の要点1. 配列リテラルで作る（基本）一番よく使う方法は []（角かっこ） を使う。要素をカンマで区切って書く。let numbers = [78, 59, 84, 92];let fruit...
JavaScript JavaScript | 配列
主な内容の要点配列とは？複数の値を1つの変数でまとめて管理できる仕組み例：3人分のテストの点数をそれぞれ変数に入れると大変だけど、配列なら1つにまとめられるlet result = new Array...
JavaScript JavaScript | switch 文
主な内容の要点switch 文の基本複数の条件分岐をシンプルに書ける構文。書き方の基本形：switch (式) { case 値1: // 式 === 値1 のとき実行 break; case 値2:...
JavaScript JavaScript | if文で複数条件を扱う
主な内容の要点1. if ... else if ... else の基本1つの条件だけじゃなく、順番に複数の条件をチェックできる書き方の流れ： if (条件1) { // 条件1がtrueのとき} ...
JavaScript JavaScript | 複数条件をまとめる（AND && / OR ||）
ここからは 複数条件をまとめる方法（AND && / OR ||） を、初心者向けに例題つきで解説します。複数条件をまとめるとは？if 文では「1つの条件」だけでなく、2つ以上の条件を組み合わせて判定...
JavaScript JavaScript | 比較演算子と論理演算子
プログラミング初心者にとって「比較演算子」と「論理演算子」は if 文の条件式 を理解するための必須アイテムです。整理して説明しますね。比較演算子（Comparison Operators）2つの値を...
JavaScript JavaScript | if文（条件分岐）
主な内容の要点JavaScript の if 文の基本if 文は「条件によって処理を分ける」ための仕組み。条件式が true なら中の処理を実行、false ならスキップ。if (条件式) { // ...
JavaScript JavaScript | for…in と forEach の違い
for...in と forEach はどちらも「繰り返し処理」に使えますが、性質や使いどころがかなり違います。初心者向けに整理してみましょう。違いのまとめ特徴for...inforEach取り出すも...
JavaScript JavaScript | for…in と for…of の違い
JavaScript の for...in と for...of は見た目が似ていますが、取り出すものがまったく違います。初心者向けに整理するとこうなります。違いのまとめ文法取り出すもの主な用途例fo...
JavaScript JavaScript | 「for」「while」「for-of」「forEach」の違い
JavaScriptで繰り返し処理を書くときに「for」「while」「for-of」「forEach」がよく登場します。それぞれの特徴と使い分けを、初心者向けに整理してみましょう。for文特徴: 回...
JavaScript JavaScript | break文とcontinue文でラベルを指定する
主な内容の要点1. ラベルとは？ラベルは、ループや文に名前をつける仕組み。書き方はシンプルで、ラベル名: のように文の前に書く。myLoop: while (count < 10) { count++...
JavaScript JavaScript | continue文
主な内容の要点1. continue文とは？繰り返し処理（for, while, do...while, for...in, for...of）の中で使える命令。実行されると、そのループの「残りの処理...
JavaScript JavaScript | break文
主な内容の要点break文の基本break文は、ループやswitch文の処理を途中で強制的に終了させる命令。書き方はシンプルに break;。break文が使える場所for文while文do...wh...
JavaScript JavaScript | for…in文
主な内容の要点for...in文の基本書き方 for (変数 in オブジェクト) { // 繰り返し処理}for (変数 in オブジェクト) { // 繰り返し処理}JavaScriptオブジェク...
JavaScript JavaScript | do…while文
主な内容の要点基本の考え方while 文と似ていて、「条件が true の間、処理を繰り返す」。違いは必ず1回は処理が実行されること。while は最初に条件をチェック → false なら1回も実行...
JavaScript JavaScript | while 文
主な内容の要点while 文の基本書き方 while (条件式) { 繰り返したい処理;}while (条件式) { 繰り返したい処理;}JavaScript条件式が true の間、中の処理を繰り返...
JavaScript JavaScript | 多重ループ（ネストされたfor文）
主な内容の要点1. for文の中にfor文を入れられる1つのfor文の中に、さらに別のfor文を書くことができます。これを 入れ子（ネスト）されたfor文 と呼びます。for (let i = 0; ...
JavaScript JavaScript | for文
主な内容の要点for文の基本for文は「決まった回数だけ処理を繰り返す」ための仕組み。書き方は次の形です：for (初期化式; 条件式; 変化式) { 繰り返したい処理;}for (初期化式; 条件式...
JavaScript JavaScript | カンマ演算子
主な内容の要点1. カンマ演算子とは？複数の式を1つの場所に書ける 特殊な演算子書き方： 式1, 式2, 式3, ...式1, 式2, 式3, ...JavaScript左から順に式が評価され、最後の...
JavaScript JavaScript | 文字列を連結する方法
主な内容の要点基本+ 演算子は、数値同士なら「足し算」、文字列が含まれていれば「文字列の連結」として使われます。 let address = '東京都' + '千代田区';console.log(ad...
JavaScript JavaScript | typeof 演算子
主な内容の要点typeof 演算子の基本役割：値の「データ型」を調べて、その型を表す文字列を返す。書き方： typeof 値typeof 値JavaScript主な返り値の例値の例結果（文字列）80"...
JavaScript JavaScript | 条件演算子（三項演算子）
主な内容の要点1. 条件演算子とは？三項演算子とも呼ばれる「条件によって結果を分ける」ための書き方if ... else を短く書ける便利な方法2. 書き方の基本条件式 ? 式1 : 式2条件式 ? ...
JavaScript JavaScript | 論理演算子を使いログイン判定のサンプル
では「ログイン判定のサンプル」を一緒に作ってみましょう。初心者でも理解しやすいように、段階を追って説明します。目標ユーザーがログインしているかどうかを判定するログインしていれば「ようこそ〇〇さん」と表...
JavaScript JavaScript | 論理演算子
主な内容の要点論理演算子の基本JavaScriptで条件分岐を作るときに使う演算子は3種類あります。論理積（AND） &&両方が true のときだけ true例: x > 10 && x < 20 ...
JavaScript JavaScript | 等価演算子
主な内容の要点1. 等価演算子の種類JavaScriptには「値が同じかどうか」を調べるための演算子が4種類あります。演算子意味特徴==等しい値だけを比較（型は自動変換される）!=等しくない値だけを比...
JavaScript JavaScript | == vs === の内部動作
JavaScript の ==（等価演算子） と ===（厳密等価演算子） は見た目が似ていますが、内部での動作がまったく違うのがポイントです。ここでは ECMAScript 仕様に基づいて、内部処理...
JavaScript JavaScript | 文字列比較のルール
JavaScriptにおける文字列比較のルール文字列比較は数値と違って「辞書順（アルファベット順）」や「文字コード（Unicode）」に基づくため、初心者がつまずきやすいポイントです。詳しく整理してみ...
JavaScript JavaScript | 関係演算子（比較演算子）
主な内容の要点1. 基本の4種類< （より小さい）<= （以下）> （より大きい）>= （以上）👉 これらは 2つの値を比べて、結果を true または false で返す。2. 使いどころ条件分岐（...
JavaScript JavaScript | 代入演算子
主な内容の要点1. 基本の代入演算子 =書き方：変数 = 値変数 = 値JavaScript右側の値を左側の変数に入れる。let num;num = 10; // num に 10 を代入consol...
JavaScript JavaScript | ビット演算子とシフト演算子
主な内容の要点1. ビット演算子とは？数値を 2進数（0と1） に変換して、ビット単位で計算する演算子。JavaScriptの数値は内部的に64ビット浮動小数点数だけど、ビット演算は 32ビット整数 ...
JavaScript JavaScript | インクリメント・デクリメント演算子
主な内容の要点1. 何をするもの？インクリメント演算子（++）：数値を 1増やすデクリメント演算子（--）：数値を 1減らすlet num = 5;num++; // numは6になるnum--; /...
JavaScript JavaScript | Number() / parseInt() / parseFloat() と + の違いを詳しく比較
JavaScript 初心者が 「数値変換」 に出会うと、必ず迷うのが「Number() と parseInt() と parseFloat() と + の違いって何？」ですよね。それぞれ似たように「...
JavaScript JavaScript | 単項演算子（マイナス・プラス）
主な内容の要点1. 単項マイナス演算子（-）数値の符号を反転させる-8 → -8-(5) → -5変数にも使える let num = 10;console.log(-num); // -10let n...
JavaScript JavaScript | 算術演算子
主な内容の要点算術演算子とは算術演算子とは、「足し算」「引き算」「掛け算」「割り算」など、数値を使った基本的な計算をプログラム内で行うための記号（演算子）のことです。JavaScript では数値はす...
JavaScript JavaScript | 変数に値を代入するときの仕組み
主な内容の要点演算子の優先順位と結合規則とは？式の中で複数の演算子が使われている場合、どの順番で演算を行うかを決めるルールが「優先順位」と「結合規則」です。優先順位：どの演算子を先に計算するかを決める...
JavaScript JavaScript | テンプレートリテラル（Template Literal）を使って文字列を表す
主な内容の要点1. テンプレートリテラル（Template Literal）とはバッククォート（`）で囲む文字列リテラルの方式。ES2015（ES6）から導入された表記法。シングルクォート（'）やダブ...
JavaScript JavaScript | 文字列を指定の区切り文字で分割（split メソッド）
主な内容の要点1. split メソッドとはString オブジェクト（文字列）のインスタンスメソッド。対象の文字列を指定した「区切り文字」で分割し、分割された各部分文字列を要素とする配列を返す。書式...
JavaScript JavaScript | charAt と slice / substring / codePointAt の比較表
これら4つは「文字列の一部を取り出す」という点では似ていますが、目的や動き方が微妙に違うため、整理して覚えると理解が一気に深まります。基本比較表（初心者向け）メソッド名目的引数（インデックス）返すもの...
JavaScript JavaScript | 文字列の中から、指定した位置の1文字を取り出す（charAt メソッド）
主な内容の要点charAt() メソッドは何をするメソッド？文字列の中から、指定した位置の1文字を取り出すためのメソッドです。書き方文字列.charAt(インデックス)文字列.charAt(インデック...
JavaScript Java | 文字列の中から 特定の位置から何文字かを取り出して（部分文字列を）取得（substr メソッド）
主な内容の要点substr() メソッドの基本役割：文字列の一部を取り出すためのメソッド書き方： 文字列.substr(開始位置, 文字数)文字列.substr(開始位置, 文字数)JavaScrip...
JavaScript JavaScript | サロゲートペア
主な内容の要点1. サロゲートペアとはJavaScript は文字を内部的に UTF-16 形式で扱う。UTF-16 では、基本多言語面（BMP, 0x0000～0xFFFF）に含まれる文字は 1 つ...
JavaScript JavaScript | プリミティブ文字列と String オブジェクトを自動で区別して安全に比較する関数
目的"abc"（プリミティブ）と new String("abc")（オブジェクト）を安全に比較したい== に頼らず、型の違いも吸収して正しく「中身」を比べるついでに、null や undefined...
JavaScript JavaScript | Stringオブジェクト
主な内容の要点1. String オブジェクトとは（ラッパークラス）JavaScript の文字列（プリミティブ型の文字列）は、内部的には String オブジェクトとしてラップされ、String の...
JavaScript JavaScript | 文字列操作で「部分文字列（文字列の一部）を取り出す」方法
主な内容の要点1. 文字列から一部を取り出す方法JavaScript では文字列の一部を取り出すのにslice() と substring() というメソッドを使う。どちらも「開始位置」と「終了位置」...
JavaScript Java | 文字列を指定した回数繰り返した新しい文字列を取得（repeat メソッド）
主な内容の要点役割文字列を「指定した回数」繰り返して、新しい文字列を作る。書き方 文字列.repeat(回数)文字列.repeat(回数)JavaScript引数（回数）について0 → 空文字列（何も...
JavaScript JavaScript | 文字列を連結する（concat メソッド）
主な内容の要点何をするメソッドかconcat メソッドは「ひとつの文字列に、別の文字列をくっつけて（連結して）、新しい文字列を作る」ためのものです。書き方は次の通り： 文字列1.concat(文字列2...
JavaScript JavaScript | 文字列を置換（replace メソッド）
主な内容の要点String.prototype.replace メソッドを使って、文字列中の指定した部分を別の文字列で置換し、新しい文字列を返します。元の文字列自体は変わりません。基本的な使い方文字列...
JavaScript JavaScript | 文字列の長さを取得する(length プロパティ)
主な内容の要点1. lengthプロパティで文字列の長さを取得できる文字列オブジェクト（String）の length プロパティを参照することで、その文字列に含まれる 文字コード単位 の個数を取得で...
JavaScript JavaScript | エスケープシーケンス（特殊文字の記述）
主な内容の要点1. エスケープシーケンスとは文字列リテラル中では、普通に入力できない文字（改行・タブなど）を表現するために「エスケープシーケンス」が使われる。エスケープシーケンスは バックスラッシュ ...
JavaScript JavaScript | 文字列リテラルの記述方法
主な内容の要点1. JavaScript における文字列（String）JavaScript では、文字列は UTF-16（16ビット Unicode）で内部的に格納される。 - ソースコード自体は ...
JavaScript JavaScript | 長整数リテラルを数値に型変換
主な内容の要点1. 背景・課題JavaScript では、BigInt 型（長整数リテラル）と通常の Number 型（数値リテラル） を混ぜて算術演算を行おうとすると、型の不一致でエラーが発生する。...
JavaScript JavaScript | 長整数リテラルで利用可能な演算子
主な内容の要点1. 算術演算子（+、−、×、÷、%、べき乗 **）BigInt（長整数リテラル）に対してこれらの算術演算子は使用可能。ただし、割り算 / の結果は整数になり、小数部は切り捨てられる（例...
JavaScript JavaScript | Numberオブジェクト
主な内容の要点1. 概要・役割Number オブジェクトは数値を扱うラッパー（包む）オブジェクトであり、通常の数値（プリミティブ型）にもメソッド呼び出しやプロパティ参照が可能。普段は明示的に new ...
JavaScript JavaScript | 数値を指定したロケールに応じた形式で文字列に変換（toLocaleString() メソッド）
主な内容の要点1. 目的／概要Number オブジェクトのインスタンスメソッド toLocaleString を使うと、指定したロケール（地域と言語の組み合わせ）に応じた数値表記の形式で文字列を取得で...
JavaScript JavaScript | 数値の有効桁数を指定して文字列に変換（toPrecision() メソッド）
主な内容の要点Number オブジェクト（または数値型）には、toPrecision というインスタンスメソッドがあり、数値を「有効桁数を指定」したうえで文字列に変換できます。 書式は次の通り：数値....
JavaScript JavaScript | 数値を固定小数点数形式で文字列に変換（toFixed() メソッド）
主な内容の要点1. toFixed メソッドの目的数値を 固定小数点数形式（例：123.4567 のような形式）で表した文字列を取得するためのメソッド。 2. 書式（構文）数値.toFixed([小数...
JavaScript JavaScript | 数値を指数形式で文字列に変換（toExponential() メソッド）
主な内容の要点1. toExponential とは何かJavaScript の数値（Number オブジェクト）のインスタンスメソッドで、数値を指数表記（例：1.52e10 など）で表した文字列を取...
JavaScript JavaScript | 数値を指定の基数の形式で文字列に変換（toString() メソッド）
主な内容の要点概要JavaScript の Number（数値型）に備わっているインスタンスメソッド toString() を使うと、数値を任意の「基数 (radix)」で表した文字列に変換できる。変...
JavaScript JavaScript | 長整数リテラルの記述方法
主な内容の要点長整数リテラル（BigInt リテラル）の書き方通常の数値リテラルと同様に書くが、末尾に n を付けるlet num = 854n;let num = 854n;JavaScript10...
JavaScript JavaScript | 数値リテラルの記述方法
主な内容の要点1. JavaScript における数値の扱いJavaScriptでは、すべての数値は 64 ビットの浮動小数点数（IEEE 754 準拠） として扱われる。ただし、プログラム上では「整...
JavaScript JavaScript | 変数に値を代入するときの仕組み
主な内容の要点JavaScriptでは、変数に代入する値の種類によって「コピーされるのか」「同じものを共有するのか」が変わります。1. プリミティブ型（値渡し）プリミティブ型 = 数値、文字列、真偽値...
JavaScript JavaScript | 変数の値が未定義値（undefined）か判定する
主な内容の要点1. 変数を宣言しただけだと undefined が入るlet num;console.log(num); // → undefinedlet num;console.log(num);...
JavaScript JavaScript | 変数への値の代入と変数の初期化
主な内容の要点1. 別の値を再代入するすでに値が入っている変数には別の値を上書きできる。例として、highScore = 78; → あとで highScore = 86; のように変更。ただし、co...
JavaScript JavaScript | 変数名のルールとよく使われる命名記法
主な内容の要点1. 変数名のルール（識別子の基礎）使用可能な文字： Unicode 文字、アンダースコア（_）、ドル記号（$）大文字・小文字は別扱い（区別される）先頭文字に数字は使えない（例：5box...
JavaScript JavaScript | 定数(再代入できない変数)を宣言
主な内容の要点1. const による定数宣言JavaScript（ES6以降）では、var に加えて let と const が導入されている。var 変数名;let 変数名;const 変数名=初...
JavaScript JavaScript | 変数を宣言
主な内容の要点1. 変数の宣言方法古くからあった var に加えて、ES6 以降では let と const も使えるようになっています。 var 変数名;let 変数名;const 変数名=初期値;...
JavaScript JavaScript | 変数を使ってできること
主な内容の要点1. 変数を使う目的・利点値を「直接書く」のではなく「変数に代入する」ことで、後から値を変えたい時や共通の値を何度も使いたい時に便利になる。例：消費税の税率を変数 tax に入れて使う。...
JavaScript JavaScript | ラッパーオブジェクトとプリミティブ型
主な内容の要点1. プリミティブ型とオブジェクト型の区別JavaScript のデータ型は大きく「プリミティブ型（原始型）」と「オブジェクト型」に分けられる。プリミティブ型には以下の 7 種類がある：...
JavaScript JavaScript | データ型
主な内容の要点JavaScript のデータ型は プリミティブ型 と オブジェクト型 に大きく分けられる。変数宣言時には型を指定しない（動的型付け）。同じ変数に異なる型の値を代入できる。プリミティブ型...
JavaScript JavaScript | 予約語
主な内容の要点JavaScript（正確には ECMAScript 規格）には 予約語（keywords / reserved words） として定義されている単語があり、これらは変数名や関数名とし...
JavaScript JavaScript | コメントを記述する
主な内容の要点コメントとはプログラム中に メモや説明を残すための記述。実行時には無視され、プログラムの動作には影響を与えない。
JavaScript JavaScript | コードを記述する上での基本ルール
主な内容の要点大文字と小文字の区別 JavaScript では変数名・予約語などで大文字／小文字を厳密に区別します。 例：name と Name は別の変数として扱われる。空白・改行の扱い 文（ステー...
JavaScript JavaScript | 文字列の長さを取得する（length プロパティ）
主な内容の要点length プロパティとは 文字列（String オブジェクト／リテラル）の文字数を取得するためのプロパティ。書式は 文字列.length。内部表現と注意点 JavaScript は文...
JavaScript JavaScript「数値と文字列」練習問題セット
初級（基本の確認）Q1. 数値の基本次の console.log の出力結果はどうなるでしょう？console.log(1 + 2);console.log("1" + 2);console.log(...
JavaScript JavaScript | 第16章「イテレーターとジェネレーター」
JavaScript「イテレーターとジェネレーター」要点まとめイテレーター（Iterator）順番に値を取り出す仕組み。next() を呼ぶと { value, done } を返す。value: 今...
JavaScript JavaScript | 第14章「プロミスの使用」
JavaScript「プロミスの使用」要点まとめPromiseの基本Promise（プロミス）とは：「非同期処理の結果（成功 or 失敗）」を表すオブジェクト。→ まだ終わっていない処理の「将来の値」...
JavaScript JavaScript | 第15章「JavaScript の型付き配列」
JavaScript「JavaScript の型付き配列」要点まとめそもそも何？**Typed Arrays（型付き配列）**は、「メモリ上の生データ（バイナリ）を型付きで扱うための仕組み」。画像・音...
JavaScript JavaScript | 第13章「クラスの使用」
JavaScript「クラスの使用」要点まとめ項目説明例クラスとはオブジェクトを作るための「設計図」。同じ形のオブジェクトを簡単に作れる。class Person { ... }インスタンス化クラスか...
JavaScript JavaScript | 第12章「オブジェクトに関する扱い方」
JavaScript「オブジェクトに関する扱い方」要点まとめ「Working with Objects（オブジェクトの扱い方）」の要点を、初心者向けにギュッと整理しました。JavaScript オブジ...
JavaScript JavaScript | 第11章「キー付きコレクション」
JavaScript「キー付きコレクション」要点まとめ1. 概要「キー付きコレクション」は キーで値を管理する特別なデータ構造。主な種類：MapWeakMapSetWeakSet2. Map（マップ）...
JavaScript JavaScript | 第10章「インデックス付きコレクション」
JavaScript「インデックス付きコレクション」要点まとめ基本の考え方「インデックス付き」＝ 番号（0, 1, 2, …）で要素を順番に管理するコレクションJavaScript では主に次の3つが...
JavaScript JavaScript | 第9章「正規表現」
JavaScript「正規表現」要点まとめ1. 正規表現とは文字列のパターンを表現するための仕組み。検索・置換・抽出などを柔軟に行える。JavaScript では RegExp オブジェクトとして扱う...
JavaScript JavaScript | 第8章「日付と時刻の表現」
JavaScript「日付と時刻の表現」要点まとめ1. 基本は Date オブジェクトJavaScript では「日付や時刻」を扱うために Date オブジェクト を使う。内部的には 1970年1月1...
JavaScript JavaScript | 第7章「数値と文字列」
JavaScript「数値と文字列」要点まとめ全体のポイントJavaScript では 数値 (Number) と 文字列 (String) がよく使われる基本データ型。数値と文字列は見た目が似ていて...
JavaScript JavaScript | JavaScript 演算子の優先順位 一覧表（初心者向け）
JavaScript を正確に理解するには、演算子の優先順位（precedence）と結合規則（associativity）を知っておくことが大切です。これが分かると「どの演算が先に実行されるか」が一...
JavaScript JavaScript | 第6章「式と演算子」
JavaScript「式と演算子」要点まとめ全体の要点概念説明式 (expression)評価されると「値」になるコード。例：3 + 4, x = 10, a > b ? a : b演算子 (oper...
JavaScript JavaScript | 第5章「関数」
JavaScript「関数」要点まとめ関数とは処理のまとまりに名前をつけて再利用できる仕組み。入力（引数）→ 処理 → 出力（戻り値） の流れで動く。JavaScriptでは関数も**値（オブジェクト...
JavaScript JavaScript | 第4章「ループと反復処理」
JavaScript「ループと反復処理」要点まとめ基本の考え方ループ＝同じ処理を何度も繰り返す仕組み反復処理（iteration）＝配列や文字列などの要素を順番に処理すること「いつ終わるか」を正しく設...
JavaScript JavaScript | 第3章「制御フローとエラー処理」
JavaScript「制御フローとエラー処理」要点まとめ基本の考え方プログラムは「上から下へ」順に実行されるが、条件やエラーによって 流れ（フロー）を変える 必要がある。その仕組みを 制御フロー、実行...
JavaScript JavaScript | 第2章「文法とデータ型」
JavaScript「文法とデータ型」要点まとめ1. コメントと空白コメントはプログラムに影響しない説明文。一行コメント：// コメント複数行コメント：/* コメント */空白・改行は基本的に無視され...
JavaScript JavaScript | 第1章「JavaScriptの基礎」
全体の趣旨この「JavaScriptの基礎」では、JavaScript（以下 JS）が何か、どんな特徴があるか、どのように学び始めればよいか、などの基本的な考え方を紹介します。まずこういう基礎的な導入...
JavaScript JavaScript | 文字列リテラルの記述方法
主な内容の要点1. JavaScript における文字列（String 型）JavaScript では、文字列は Unicode（UTF-16）によって表現され、英数字・日本語など多くの文字を扱える。...
JavaScript JavaScript | 多次元配列（配列の中に配列）とそのループ処理
では、多次元配列を初心者向けに分かりやすく、例題付きで解説します。「配列の中に配列が入っている状態」をイメージして進めます。1) 多次元配列って何？普通の配列：1列の値を持つ箱 let arr = [...
JavaScript JavaScript | 配列の splice メソッド
splice は配列を操作するときに超便利ですが、初心者には少し複雑に見えるので、図解イメージと例を交えて丁寧に解説します。splice は 配列の要素を削除・追加・置換 する万能メソッドです。arr...
JavaScript JavaScript | forEachメソッド 完全ガイド
それでは、初心者〜中級者までしっかり理解できるように、図解・例題・応用を交えた「JavaScript forEachメソッド 完全ガイド」 を作成します。forEachとは？forEach() は、配...