並び順を設定するUIをどのように作るのが良いか。近いうちに作る機会がありそうなので、考えてみる。ReactやVue.jsを使う機会はなさそうなので、jQueryベースで。やりたいこと既に商品マスタはあり、ソート順を設定できるカラムもあるとする。できるだけ楽にランキングを変更できて、データの更新数が最小限になる方法を見つけたい。やり方はありそうだけど、まずは一番簡単に実装できそうな方法で作ってみよう。並び順を楽に変更する方法としては、ドラッグしてリストの順序を変更するUIがオーソドックスで良さそう。これはjQueryUIのsortableウィジェットで実現できる。並び替え後のソートNoと比較して変更があったものだけを更新する、という方法を取ればとりあえず全件更新するよりは更新数は少なくなりそう。下記のようなリストをソートする画面を作成する。完成版をCodePenに置いたので、先に載せておこう。CodePen.商品ごとに新旧ソートNoを確認できるように表示してある。右側のハンドラで並び順を変更すると新ソートNoが再設定される。実際にアプリを作成する際は、新旧ソートNoが異なる商品の情報をサーバに送信するイメージ。コードbowerでjQuery関連ライブラリを取得しておく。addLog('started');});おわりこれで十分な気がしてきた。はてなブログProおいしいものを食べてぐーたらすることしか考えていない、2児の父。noteにもエッセイを載せてます。Versionnoteはてなブログをはじめよう!piro_sukeさんは、はてなブログを使っています。ブログを報告するスターをつけました引用をストックしましたストック一覧を見る閉じる引用するにはまずログインしてくださいログイン閉じる引用をストックできませんでした。再度お試しください閉じる限定公開記事のため引用できません。