同じ作成日付の複数記事を降順で表示する

修正前の状態

同じ作成日付の記事が複数存在した場合、それらの記事に表示順は存在しませんでした。今まで同じ日に記事を2つ書いていなかったからです。
今回、同じ日に2つ記事を書くことでこの不具合を発見出来ました。

下記のように、「複数の記事で…」と書かれている記事が最新の記事ですが、「タグ一覧を…」という記事が先頭に表示されています。これを修正します。

このサイトは、SvelteKitというフレームワークで構築しています。SvelteKitは、フレームワーク内でサーバー側の処理も書くことが出来ます。

/src/routes/api/posts/+server.ts というファイルを作成し、サーバー側の処理を記述しています。
表示順に関して、今までは作成日付である createdAt というメタ情報を元に記述していました。

posts.sort(
	(first, second) => new Date(second.createdAt).getTime() - new Date(first.createdAt).getTime()
);

このコードでは、posts配列を createdAt で降順に並び換えのみ行っています。今まではこれで問題ありませんでした。

このコードに「同じ作成日付の場合は記述ファイル名で並び換えを行う」という処理を追加しました。

posts.sort((first, second) => {
	const dateDiff = new Date(second.createdAt).getTime() - new Date(first.createdAt).getTime();
	if (dateDiff !== 0) {
		return dateDiff;
	} else {
		return parseInt(second.slug.slice(0, 3)) - parseInt(first.slug.slice(0, 3));
	}
});

slug名で並び換える

まず、作成日付の差分を dateDiff で定義します。

JavaScriptの Array.sort() では、配列の要素をソートして、ソートされた同じ配列の参照を返します。

first と second という引数で配列の前後の要素を比較しています。

私は記事のファイル名の先頭に「001」や「002」といった番号を書いているので、 first.slug.slice(0, 3) のようにslug(ファイル名)の先頭3文字で比較しています。

このままでは、001や002などが文字列として扱われるので parseInt を使用して数値として扱っています。

記事番号による降順並び換えが実現出来ました。

見る側だと気にならない記事の順番ですが、開発していて違和感があったため修正しました。