January Sunday,30th 2022: PM

ページネーションとrange Array.length

フロントエンド側の実装でよくlengthを割った数値でリストを作るシーンあると思いますがlengthだと配列の長さなので0~14を割ることになるので10で止まります。

例を出すとgetStaticPropsのリミットを15に設定したとします。 Pythonを思い出してくださいrange15で作られる配列は [ 0 1 2 3 4 5 6 7 8 9 10 11 12 13 14 ]

ですよね。 ここに5で除算してもらうとわかると思うんですが0から始まってるため[ 5 ]は二つしか入りません。3個目は空という扱いになります。

Array.length - JavaScript | MDN

length プロパティの値を現在より大きな値に変更すると、配列内の要素数も増加します。例えば length が現在 2 のところに 3 をセットすると、配列内の要素数は 3 になり、3番目の要素は反復処理できない空のスロットになります。

したがってrange15リストは5で割る場合、空の3の数字を返すことになるため最終ページまでマップで表示することが出来ません。 invalid array lengthエラーに悩まされlengthプロパティを指定してしまうのですが。 値で割る場合Array.lengthは極力使用しない方が無難です。 getStaticPathsのrange関数も例によってlengthを付けるのはやめましょう。