こんにちは、さるまりんです 🐒🔧
最近は、ChatGPTなどのAIを使ってコードを書く機会が増えてきました。
やりたいことを伝えると、
それっぽいコードをすぐに出してくれます。
とても便利ですよね。
ただ、こんなことを思ったことはありませんか？
「これ、ちゃんと理解できているかな？」
今回は、AIがよく出してくるコードを例にしながら、
JavaScriptの配列処理について整理してみます。
AIが書いてくれたコード
例えば、こんなコードです。
const result = users
.filter(u => u.active)
.map(u => u.name);シンプルですが、
いくつかの処理がつながっています。
これを一つずつ見ていきましょう。
filterは「絞り込む」
const activeUsers = users.filter(u => u.active);filterは、条件に合う要素だけを取り出します。
true→ 残るfalse→ 除外される
つまり、
「必要なデータだけに絞る処理」
です。
activeがtrue、つまり
「有効なデータだけ」に絞り込んでいます。
mapは「変換する」
const names = users.map(u => u.name);mapは、要素を別の形に変換します。
今回であれば、
- ユーザーオブジェクト → 名前だけ
「データの形を変える処理」
です。
つまり、ユーザーの配列から
名前の配列に変換しています。
なぜこの順番なのか
ここ、とても大事です。
users.filter(...).map(...)先に絞り込んでから変換しています
もし逆にすると👇
users.map(u => u.name).filter(...)この場合、
- 先に「名前だけ」に変換される
activeの情報が失われる
つまり、
同じ処理にはなりません
さらに、
- 不要な変換が増える
- パフォーマンス的にも非効率
順番で意味も効率も変わります
sortもよく出てくる
配列処理では、sortもよく登場します。
昇順（小さい順）
const sorted = users.sort((a, b) => a.age - b.age);降順（大きい順）
const sorted = users.sort((a, b) => b.age - a.age);ここ、よく迷います。
シンプルに考えると👇
「aを前に出すかどうか」を判断している
a - b→ 小さいものが前b - a→ 大きいものが前
こう覚えておくと分かりやすいです。
配列処理は「流れ」で考える
ここまでの処理は、全部つなげられます。
const result = users
.filter(u => u.active)
.map(u => u.name)
.sort();流れとして見ると
1. 絞る
2. 変換する
3. 並べる
データを加工していくパイプライン
として考えると理解しやすくなります。
よくある落とし穴
AIのコード、そのまま使うと危ないこともあります。
nullの可能性
users.filter(...)👉 usersがnullだとエラーになります
パフォーマンス
- 配列が大きいと処理コスト増
- 無駄な
mapは避けたい
sortの副作用
👉 sortは元の配列を書き換えます
const sorted = [...users].sort(...)👉 コピーしてから使うと安全です
このあたりを知っておくと、
筋の通ったコードが書けるようになります。
AIとどう付き合うか
AIはとても優秀です。
でも、
コードの意味までは保証してくれません
だからこそ、
- 書いてもらう
- でも必ず読む
- 意味を理解する
これがとても大切です。
まとめ
AIがコードを書いてくれる時代になりました。
でも、
理解できるかどうかで使いこなせるかが変わります
JavaScriptを学ぶ意味は、
- 書くためだけではなく
- 理解し、判断するため
だと感じています。
自分が何をしているかを知ること。
そして、それに興味を持つこと。
とても大切ですね。
AIと一緒に、
より良い開発体験を作っていきたいです。
読んでくださってありがとうございました。
それではまた！