スポンサーリンク
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配...
スポンサーリンク