sort と メソッドチェーン
sort と メソッドチェーン とは
sortでソートし、メソッドチェーンで高階関数を組み合わせよう。本レッスンでは、sort と メソッドチェーン の基本から実際の使いどころまでを整理し、現場で迷わず使える形に落とし込みます。
sort と メソッドチェーン
配列をソートし、複数の高階関数を組み合わせてデータを処理しましょう。
sort と比較関数
JavaScript
// ⚠️ 比較関数なしだと文字列として比較される
[10, 2, 30].sort(); // [10, 2, 30]（文字列順！）
// 数値を正しくソートするには比較関数が必要
[10, 2, 30].sort((a, b) => a - b); // [2, 10, 30]（昇順）
[10, 2, 30].sort((a, b) => b - a); // [30, 10, 2]（降順）メソッドチェーン
filter → sort → map を繋げて書けます。
JavaScript
const top3 = students
.filter(s => s.score >= 60)
.sort((a, b) => b.score - a.score)
.slice(0, 3)
.map(s => s.name);この問題では、メソッドチェーンを使って学生をフィルタ→ソート→ランク付けしましょう。
よくある質問
Q. 実務ではどんな場面でこの知識を使いますか？
A. API クライアントの実装、フロントエンドのフレームワーク内ロジック、Node.js のサーバーサイドなど幅広く登場します。React/Vue などのフレームワークもこの基礎の上に成り立っているため、ここで身につけた知識は資産になります。
Q. コードレビューで指摘されやすいポイントは？
A. var の使用、== の使用、無駄なネストの深さ、命名の曖昧さなどが頻出指摘です。Linter（ESLint）と Prettier を導入すれば機械的に防げる指摘が多いため、まずはツールで自動化するのが効率的です。
Q. 次に学ぶべき内容は何ですか？
A. Promise・async/await が理解できたら、fetch を使った API 連携、Web フレームワーク（React/Vue/SvelteKit）、ビルドツール（Vite/Webpack）に進むのがおすすめです。実プロジェクトでアウトプットしながら学ぶと定着が早まります。
次のレッスン
次は クラスとインスタンス で、クラス定義とインスタンス生成によるオブジェクト指向の基礎を学びます。
事前確認 — 進む前に次の 3 つができることを確認しましょう。
- sort と メソッドチェーン の要点を自分の言葉で説明できる
- このレッスンの最小コード (または操作手順) を見ずに書ける
- 練習問題やクイズで間違えた箇所を読み直して理解した
理解度チェック (30 秒)
Q. sort と メソッドチェーン とは何か、1 文で説明してください。
A. 本文の「このレッスンで分かること」または冒頭の説明文を見直し、自分の言葉で要約できれば OK。詰まったら本レッスンの最初の H2 セクションを読み返してみましょう。
関連レッスン
入出力例
test-cases.txt
rankStudents([{"name":"太郎","score":80},{"name":"花子","score":90},{"name":"次郎","score":70},{"name":"愛","score":90}], 75) → [{"name":"愛","rank":1,"score":90},{"name":"花子","rank":2,"score":90},{"name":"太郎","rank":3,"score":80}]
rankStudents([{"name":"A","score":50},{"name":"B","score":60}], 55) → [{"name":"B","rank":1,"score":60}]
rankStudents([{"name":"X","score":30}], 50) → []