プログラミング

スポンサーリンク
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左から順に式が評価され、最後の...
スポンサーリンク