すべての初心者が知っておくべき重要な JavaScript メソッド

JavaScript はプログラミングにおけるスイス アーミー ナイフのようなものです。多用途で不可欠なツールであり、必要だと知らなかったツールが満載されています。しかし、初心者の場合、ループに巻き込まれたり、長く反復的なコードに圧倒されてしまいがちです。乱雑なツールボックス内の項目を手動で検索することを想像してみてください。面倒ですよね?

ここで JavaScript メソッドが登場します。これらの組み込みツールを使用すると、配列の操作、データのフィルター処理、複雑なタスクの簡素化が簡単に行えます。これらは、時間と労力を節約し、乱雑なコードをクリーンで効率的なものに変えるショートカットと考えてください。

この記事では、map()、filter()、reduce()、forEach()、find() という 5 つの重要な JavaScript メソッドについて説明します。これらをマスターすると、コードをよりシャープに、より速く、書くことがさらに楽しくなります。

「プログラミングとは、何を知っているかが重要なのではありません。それはあなたが何を理解できるかです。」 – クリス・パイン

1.map() – 配列の変換

機能:
map() は、To-Do リストを取得し、すべての項目のタスクを実行し、結果を含む新しいリストを渡すパーソナル アシスタントと考えてください。元のデータに手を加えずにデータを変換するのに最適です。

白紙の T シャツの束があり、そのすべてにデザインを印刷したいと想像してください。元のスタックを変更する代わりに、デザインを適用した新しいスタックを作成します。これが、map() の仕組みです。各項目に関数を適用し、新しい配列を提供します。

例:
ここでは、map() を使用して配列内のすべての数値を 2 倍にする方法を示します:

const numbers = [1, 2, 3, 4];
const doubled = numbers.map(num => num * 2);
console.log(doubled); // Output: [2, 4, 6, 8]

内訳:

• 数値: 元の配列はそのまま残ります。
• num * 2: 各要素に適用される関数。
• doubled: 変換された値を含む新しい配列。

実際の使用例:
ドル単位の製品価格のリストがあり、それを別の通貨に換算したいとします。 map() を使用すると、変換を 1 ステップで実行できます。

const pricesInUSD = [10, 20, 30];
const pricesInEUR = pricesInUSD.map(price => price * 0.85);
console.log(pricesInEUR); // Output: [8.5, 17, 25.5]

なぜ役に立つのか:
map() を使用すると、反復的なタスクを回避し、コードをクリーンな状態に保つことができます。ループを使用して配列を操作する代わりに、このメソッドは面倒な作業を自動的に実行します。

map() は新しい配列を作成することを常に覚えておいてください。データをその場で変更したい場合、これはその用途に適したツールではありません。

2. filter() – 特定の項目の選択

機能:
filter() は、特定の条件を満たす要素のみを含む新しい配列を作成します。条件に合う人だけを入れるクラブの用心棒のようなものだと考えてください。

ワードローブを整理していて、自分にぴったりの服だけを保管していると想像してください。 filter() は、必要なものだけを選択し、残りを除外するのに役立ちます。シンプルかつ効率的です。

例:
配列から偶数をフィルターで除外しましょう:

const numbers = [1, 2, 3, 4];
const doubled = numbers.map(num => num * 2);
console.log(doubled); // Output: [2, 4, 6, 8]

内訳:

• 数値: 元の配列はそのまま残ります。
• 条件: num % 2 !== 0 は数値が奇数かどうかをチェックします。
• 結果: フィルタリングされた値を使用して、新しい配列 oddNumbers が作成されます。

実際の使用例:
製品のリストを管理していて、在庫切れの商品を除外したいとします。

const pricesInUSD = [10, 20, 30];
const pricesInEUR = pricesInUSD.map(price => price * 0.85);
console.log(pricesInEUR); // Output: [8.5, 17, 25.5]

いつ使用するか:

• データセットから関連データのみを抽出します。
• 必要なものだけを扱うことでプロセスを簡素化します。

初心者が好む理由:
ループとは異なり、filter() は簡単です。これによりエラーの可能性が減り、より少ないコードでより多くのことを達成できます。

3.reduce() – データの集約

あなたが食料品店のレジにいて、レジ係がすべての商品の価格を合計して合計額を出してくれたとします。これはまさにreduce()の仕組みです。配列内のすべての要素を合計、積、カスタム結果などの単一の値に結合します。

機能:
reduce() は配列を要素ごとに処理し、定義した関数に基づいて単一の出力値に削減します。

例:
配列の合計を計算してみましょう:

const numbers = [1, 2, 3, 4, 5];
const oddNumbers = numbers.filter(num => num % 2 !== 0);
console.log(oddNumbers); // Output: [1, 3, 5]

内訳:

• アキュムレータ: 進行中の合計を追跡します (0 から始まります)。
• currentValue: 処理されている配列内の現在の項目を参照します。
• 結果: すべての数値を 1 つの合計に結合します。

実際の使用例:
オンライン ショッピング カートを構築しているとします。ユーザーが選択したすべてのアイテムの合計コストを計算する必要があります。

const products = [
  { name: 'Laptop', inStock: true },
  { name: 'Phone', inStock: false },
  { name: 'Tablet', inStock: true }
];

const availableProducts = products.filter(product => product.inStock);
console.log(availableProducts);
// Output: [{ name: 'Laptop', inStock: true }, { name: 'Tablet', inStock: true }]

それが特別な理由:
reduce() は数値だけを扱うものではありません。次の目的で使用できます。

• 文字列を結合します。
• 配列を平坦化します。
• オブジェクトを動的に構築します。

楽しいひねり:
創造的になりましょう! reduce() を使用すると、単語内に各文字が何回出現するかをカウントできます。

const numbers = [5, 10, 15, 20];
const total = numbers.reduce((accumulator, currentValue) => accumulator + currentValue, 0);
console.log(total); // Output: 50

初心者が学ぶべき理由:
最初は、reduce() は少し高度に感じるかもしれませんが、これをマスターすると、複雑な操作を簡素化する無限の可能性が広がります。これは、アレイメソッドのスイスアーミーナイフのようなもので、多用途かつ強力です。

「まず問題を解決してください。次に、コードを書きます。」 – ジョン・ジョンソン。
reduce() を使用すると、エレガントで最小限のコードで問題を効率的に解決できます。

4. forEach() – 配列の強力な主力製品

シーンを設定しましょう:
自分自身がキッチンでいくつかの料理を準備するシェフであると考えてください。リスト内の各材料を確認し、必要に応じて刻んだり、さいの目切りにしたり、調味料を加えたりします。成分リスト自体を変更するのではなく、各項目に対してアクションを実行するだけです。これはまさに forEach() が行うことです。

内容:
forEach() を使用すると、配列をループして要素ごとに関数を実行できます。 map() や filter() とは異なり、新しい配列を返しません。単にアクションを実行するだけです。

例:
それぞれの果物をリストに出力してみましょう:

const numbers = [1, 2, 3, 4];
const doubled = numbers.map(num => num * 2);
console.log(doubled); // Output: [2, 4, 6, 8]

ここで何が起こるか:

• 入力: フルーツの配列。
• アクション: この関数は、果物ごとにパーソナライズされたメッセージを記録します。
• 結果: 新しい配列は作成されません。アクションが実行されるだけです。

実際の使用例:
タスクのリストを管理していて、それらを「完了」として記録したいとします:

const pricesInUSD = [10, 20, 30];
const pricesInEUR = pricesInUSD.map(price => price * 0.85);
console.log(pricesInEUR); // Output: [8.5, 17, 25.5]

他の方法と異なる理由:
新しい配列を作成する map() とは異なり、forEach() は副作用、つまり直接の結果を生成しないが、配列の外部の何かを変更したり操作したりするアクションのみに焦点を当てています。

例:

• リスト内の各項目に対する API リクエストを送信します。
• 要素のリストの DOM を更新します。
• コンソールに値を記録します。

いつ使用するか:

• 次の場合に forEach() を使用します。
• 配列を反復処理したいだけです。
• 新しい配列を必要とせずに操作を実行する必要があります。

初心者が注意すべきこと:
forEach() は何も返さないため、操作の連鎖には適していません。変換された配列が必要な場合は、map() または filter() を使用してください。

クリエイティブ例:
リスト内の各顧客に感謝のメールを送信してみましょう (シミュレーションのみ):

const numbers = [1, 2, 3, 4, 5];
const oddNumbers = numbers.filter(num => num % 2 !== 0);
console.log(oddNumbers); // Output: [1, 3, 5]

初心者が好む理由:
forEach() はシンプルで直感的です。これは、配列を効果的に操作する方法を学ぶための最初のステップです。

これを覚えておいてください: 「コードの単純さは、複雑さがないことではありません。それは、コードを習得する技術です。」
forEach() は、複雑さを簡単な方法で処理するための最初のツールです。

5. find() – 最初の一致を検出する

あなたは地図を持って宝探しをしていますが、そのヒントには「森で最初の金貨を見つけてください」と書かれています。あなたは探し始めますが、木の下で光っている最初のコインを見つけるとすぐに止まります。必要なものは見つかりました。残りのコインは問題ありません。これがまさに find() の仕組みです。条件に一致する配列内の最初の項目を見つけて、それ以降の検索を停止するのに役立ちます。

機能:
find() は配列をスキャンし、関数内の条件を満たす最初の要素を返します。一致するものが見つからない場合は、unknown が返されます。

コード例:
20 より大きい最初の数値を見つけてみましょう:

const numbers = [1, 2, 3, 4];
const doubled = numbers.map(num => num * 2);
console.log(doubled); // Output: [2, 4, 6, 8]

何が起こっているのか:

• 条件番号>各要素に対して 20 がチェックされます。
• 25 が条件を満たすと、検索は停止し、25 が返されます。
• 最初の一致の後、それ以上の要素はチェックされません。

find() は、「最初の赤い花を見つけてください」と言われる宝探しのようなものだと考えてください。すべての赤い花を集めるわけではありません (filter() が行うことです)。代わりに、見つけたらすぐに立ち止まって「分かった！」と叫びます

実際の使用例:
あなたが連絡先リストを管理していて、特定の電子メール アドレスを持つ最初の人を見つけたいとします。

const pricesInUSD = [10, 20, 30];
const pricesInEUR = pricesInUSD.map(price => price * 0.85);
console.log(pricesInEUR); // Output: [8.5, 17, 25.5]

初心者が好む理由:
find() は使い方が簡単で、結果が 1 つだけ必要な場合に時間を節約できます。これは、暗い部屋で懐中電灯を使用して 1 つのオブジェクトを探すようなものです。部屋全体を照らそうとするわけではありません。

クリエイティブ例:
これを電子商取引の世界に当てはめてみましょう。製品のリストがあり、セール中の最初の製品を見つけたいとします。

const numbers = [1, 2, 3, 4, 5];
const oddNumbers = numbers.filter(num => num % 2 !== 0);
console.log(oddNumbers); // Output: [1, 3, 5]

エッジケースの処理:
条件に一致するアイテムがない場合はどうなりますか?心配しないでください。find() は未定義を返します。フォールバックを使用すると、これを適切に処理できます。

const products = [
  { name: 'Laptop', inStock: true },
  { name: 'Phone', inStock: false },
  { name: 'Tablet', inStock: true }
];

const availableProducts = products.filter(product => product.inStock);
console.log(availableProducts);
// Output: [{ name: 'Laptop', inStock: true }, { name: 'Tablet', inStock: true }]

find() が強力な理由:

• 効率: 最初の一致が見つかるとすぐに停止します。
• 明確さ: 単一の項目を検索することで、コード内の意図を明確にします。
• 現実世界での使用: 大規模なデータセット内の単一のユーザー、製品、またはデータ ポイントを見つけるのに最適です。

結論

JavaScript は強力なツールであり、これら 5 つのメソッド、map()、filter()、reduce()、forEach()、find() がその真の可能性を引き出す鍵となります。これらは、無限ループや冗長なタスクを回避しながら、よりクリーンで効率的なコードを作成するのに役立ちます。開発者ツールボックスの中にあるスイス アーミー ナイフのようなものだと考えてください。多用途で信頼性が高く、作業を楽にするために作られています。

これらのメソッドを習得するには、構文を学ぶだけではなく、プログラマーのように考えることが重要です。 map() でデータを変換する場合でも、filter() でノイズを除去する場合でも、reduce() ですべてを合計する場合でも、forEach() でシームレスに反復処理する場合でも、find() で隠れた宝石を見つける場合でも、構築しているのはコードをよりプロフェッショナルで影響力のあるものにするスキル。

コーディングの魔法は、長く複雑なプログラムを書くことではなく、日常の問題に対する洗練された解決策を見つけることにあることを覚えておいてください。小さなことから始めてください。方法を 1 つ選択し、試して、次のプロジェクトで試してください。練習すればするほど、これらの方法が自然に身につくようになります。

「最良のコードとは、説明する必要のないコードです。」 – マーティン・ファウラー
これらのメソッドを使用して、それ自体を伝えるコードを作成します。

コメント欄であなたのご意見をお聞かせください!プロジェクトでこれらの方法を使用したことがありますか?あなたの経験をぜひ聞きたいです。

この記事はもともと Hashnode で公開されたものです

以上がすべての初心者が知っておくべき重要な JavaScript メソッドの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。