シャッフルボタンを作る
著者は自身のメモブログに実装した「シャッフル」機能の改良について詳しく解説。以前は全ページに全ノートIDを埋め込んでいたが、ビルドが遅くなる問題があった。そこで、単一のHTMLページにシャッフルロジックを集約する手法に変更。ユーザーが「シャッフル」ボタンを押すと専用ルートに遷移し、「Shuffling…」というフィードバック表示と共に、意図的に300msの遅延を入れてからランダムなノートへ移動する仕組みを採用した。昔のCDプレイヤーのシャッフル機能のような体験を再現したという。
背景メモ
- 著者のJim Nielsenは、ウェブ開発（特にCSSやフロントエンド）に関するブログで知られるソフトウェアエンジニア。2025年現在も個人サイトを手作りで運用しており、静的サイトジェネレーター（SSG）として独自開発の「Web Origami」を使っている。
- この記事の背景には、「サーバー不要、できるだけJavaScriptに頼らず、ビルド時に生成した静的なHTMLファイルをホスティングする」という、近年のウェブ界隈で根強い「静的サイト／ミニマルJS」の設計思想がある。NetlifyのようなCDN型ホスティングが前提で、ランタイムサーバーを持たない構成。
- 「シャッフル機能」自体はSNS時代の「ランダムに過去の投稿を掘り起こす」系のお楽しみ機能。技術的には些細だが、アーキテクチャ上のトレードオフ（全ページのハッシュ再計算 vs. 単一JSONファイルの更新、JS必須 vs. No-JS）を丁寧に検討するのが、このブログの読者層が好むテーマ。
- 著者が最終的に選んだ「シャッフル用HTMLページに遷移してからJSでリダイレクト」という回りくどい実装は、実用性より「CDプレイヤーの疑似フィードバック」という体験設計へのこだわりが動機。実務ではまず取らない手法だが、個人制作ならではの遊び心として語られている。