こんにちは！フロントエンドの世界へようこそ。
HTMLのリストタグ（`
- `や`
- `）って、Web制作を始めて最初に覚える「基本のき」ですよね。でも、いざ「このリストを価格順に並び替えたいな」とか「名前順にソートしたいな」と思ったとき、どうすればいいか迷ってしまうことはありませんか？
今日は、そんな「リストの並び替え」というちょっとハードルが高そうなテーマを、お買い物の整理整頓に例えて、ふんわり優しく紐解いていきましょう。大丈夫、コードの仕組みさえ分かれば、魔法のようにリストが踊り出しますよ！
—
リストの並び替えって、何が起きているの？
想像してみてください。あなたは今、冷蔵庫の中にある「食材リスト（`
- `）」を、賞味期限が近い順に並べ替えようとしています。
人間なら、パッと見て「これとこれを入れ替えよう」と動かせますが、ブラウザ（コンピュータ）はとても正直で不器用です。「どの要素を、どの位置に移動させるか」を一つずつ教えてあげる必要があります。
実は、JavaScriptでリストを並び替えるとき、裏側ではこんなことが起きています。
1. データを取り出す： リストの中身（テキストや数値）を読み取る。
2. ルールを決める： 「数字が小さい順に並べよう」などのルールで並び順を計算する。
3. 実際に動かす： DOM（Web上の要素）を物理的に入れ替える。この「3」が一番の難所です。でも、安心してください。効率的なコツがあるんです。
—
効率のいい「引っ越し」術：DocumentFragmentを使おう
リストが100個、1000個と増えたとき、一つずつDOMを書き換えると、ブラウザは「えっ、また書き換え？ ちょっと待ってよ！」と悲鳴を上げて動作が重くなってしまいます。
そこで登場するのが「DocumentFragment（ドキュメント・フラグメント）」です。これは、いわば「一時的な仮置き場（段ボール箱）」のようなもの。
直接Webページの上で作業するのではなく、一旦この「箱」の中に並び替えた要素を詰め込んで、最後にドサッとページに戻す。こうすると、ブラウザの負担がぐっと減って、サクサク動くようになるんです。
—
実践！リストの並び替えコード
それでは、実際にコードを書いてみましょう。今回は「数字」を基準に並び替える例です。
// リストの親要素を取得します
const list = document.querySelector(‘#my-list’);// リストの中身（
- ）を配列として取り出します
const items = Array.from(list.querySelectorAll(‘li’));// 並び替えのルール！今回は数値で比較します
items.sort((a, b) => {
return parseInt(a.innerText) – parseInt(b.innerText);
});// 一時的な箱「DocumentFragment」を用意！
const fragment = document.createDocumentFragment();// 箱の中に並び替えた順に詰めていきます
items.forEach(item => {
fragment.appendChild(item);
});// 最後に、親要素の中身を並び替えたもので丸ごと置き換えます！
list.appendChild(fragment);どうでしょう？ 意外とシンプルだと思いませんか？ `Array.from`でリストを配列にして、`sort`で並び替えて、最後に`appendChild`する。この流れさえ押さえれば、どんなリストも自由自在です。
—
動きを滑らかにする「魔法（アニメーション）」
ただ並び替わるだけだと、ちょっと味気ないですよね。最近のWebサイトのように、スッと滑らかに移動させるには、「FLIP」という考え方がヒントになります。
1. First（最初）： 移動前の位置を記録する。
2. Last（最後）： 移動後の位置を決定する。
3. Invert（反転）： 移動前の位置に戻っているように見せるCSSを当てる。
4. Play（再生）： CSSのtransitionを使って、元の位置から新しい位置へアニメーションさせる。最初は難しく感じるかもしれませんが、「今の場所から新しい場所まで、軌跡を描いて移動させる」というイメージです。最近では `View Transitions API` という新しい技術も登場しているので、これを使うと、もっと簡単にアニメーションが実装できるようになっていますよ。
—
最後に：つまずいても大丈夫
プロの現場でも、最初は「DOM操作？ 配列のソート？ わけがわからない！」と悩みます。でも、リストを並び替えるという作業は、Web開発の「動的な表現」を学ぶための最高の教材です。
まずはこのコードをコピーして、`
- `の中に適当な数字を入れて試してみてください。動いたときの「おっ、動いた！」という感動こそが、エンジニアへの第一歩です。
分からないことがあれば、いつでもまた聞きに来てくださいね。あなたのWeb制作ライフを、これからも心から応援しています！
コメント