JavaScript
JavaScript | Web API：タイマー・スケジューリング － UI 更新との関係
2020-07
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 | 変数に値を代入するときの仕組み
主な内容の要点演算子の優先順位と結合規則とは？式の中で複数の演算子が使われている場合、どの順番で演算を行うかを決めるルールが「優先順位」と「結合規則」です。優先順位：どの演算子を先に計算するかを決める...