<h1 id="h8d027c8ed3">はじめに</h1><p>過去に私が参画したプロジェクトでSSOを使用したログインの実装をすることがありましたが、<br>OpenIDConnectを使ったSSOについてのイメージやフローについてなんとなくの理解で実装に入ってしまい、<br>思わぬ不具合や手戻りが発生することがありました。<br>OpenIDConnectを使ったSSOクライアントを実装する上で、今後同じ過ちが起きないようにするための備忘録を残しておこうと思います。<br></p><h1 id="ha05a6a746e">SSO（Single Sign-On）とは</h1><p>そもそもSSOとは何かについて軽く触れておきます。<br>SSO（Single Sign-On）は、ユーザーが複数の関連するシステムやサービスに対して、1度の認証操作でアクセスできる仕組みです。<br>1つの認証情報（ユーザー名とパスワード、または他の認証手段）を使用して、複数のシステムにログインできるようになります。<br>SSOを導入することで、ユーザーは複数のアカウントを持つ必要がなくなり、ログインの手間が省けます。また、管理者側もユーザーの認証情報を1箇所で管理することができ、セキュリティを向上させることができます。<br>InstagramにGoogleでログインできたりするのをイメージしてもらうとわかりやすいです。<br>SSO認証を利用する側のアプリケーションを「サービスプロバイダ」「SSOクライアント」といい、<br><span style="color:#3f454f">ユーザー認証を提供するサーバー側</span>を「IDp（IDプロバイダー）」と言ったりします。<br></p><h1 id="hf9616a5f67">OpenIDConnectとは</h1><blockquote><span style="color:#65717b">OpenID Connect は OAuth 2.0 認可プロセスを拡張し, 認証目的で利用できるようにする. 本拡張を利用する場合, Client は&nbsp;openid</span><br><span style="color:#65717b">&nbsp;scope を指定して Authorization Request を送信する. 認証結果は ID Token (</span><a style="color:#0f83fd" href="http://openid-foundation-japan.github.io/openid-connect-core-1_0.ja.html#IDToken" target="_blank" rel="noopener noreferrer"><strong>Section&nbsp;2</strong></a><br><span style="color:#65717b">&nbsp;参照) と呼ばれる&nbsp;</span><a style="color:#0f83fd" href="http://openid-foundation-japan.github.io/openid-connect-core-1_0.ja.html#JWT" target="_blank" rel="noopener noreferrer"><strong>JSON Web Token (JWT)</strong></a><br><span style="color:#65717b">&nbsp;[JWT] として返される. OpenID Connect をサポートする OAuth 2.0 Authentication Server は, OpenID Provider (OP) とも呼ばれる. OpenID Connect を利用する OAuth 2.0 Client は Relying Party (RP) とも呼ばれる.</span><br><span style="color:#65717b">(OpenID Connect Core 1.0 incorporating errata set 1より引用）</span></blockquote><p>OpenID Connect（OpenIDConnect、OIDC）は、先ほど説明したSSOログインの認証プロトコルの一種です。<br><a href="https://qiita.com/TakahikoKawasaki/items/e37caf50776e00e733be" target="_blank" rel="noopener noreferrer">OAuth 2.0</a>プロトコルをベースにしていますが、認証に特化しており、認証と認可の両方をサポートしています。<br>具体的には、OpenID Connectでは以下のような流れで認証が行われます。</p><ol><li>クライアントアプリケーションがユーザーを認証サーバーにリダイレクト</li><li>認証サーバーは、ユーザーにログインを要求</li><li>ユーザーがログインすると、認証サーバーはクライアントアプリケーションに認証コードをレスポンス</li><li>クライアントアプリケーションは、認証コードを使用してアクセストークン、IDトークンを取得</li><li>クライアントアプリケーションはIDトークンを検証</li><li>アクセストークンを使用して、クライアントアプリケーションはユーザー情報を取得</li><li>ログイン後画面を返却</li></ol><p><br></p><h1 id="h28d8ab4132">SSO/OpenIDConnectについて勘違いしがちなこと</h1><p>SSO全般の部分とOpenIDConnectについて勘違いしがちなことをまとめます。<br></p><h2 id="hb71763dd4d">1. SSOはセキュリティ上のリスクを増やすものではない</h2><p>SSOを導入すると、1つの認証情報で複数のサービスにアクセスできるため、セキュリティ上の懸念があると考える人もいます。<br>しかし、適切に実装されたSSOはむしろセキュリティを強化することができます。<br>例えば、たいていのSSO認証プロバイダーは多要素認証に対応しており、WAFのチューニングも適切に行われています。<br>その認証方式を丸々利用できると考えると、通常のパスワードIDのログインよりセキュリティリスクの軽減が見込まれます。<br>SSOはセキュリティのリスクが、、という不安で敬遠する方は、逆にSSOを使わなかった場合の認証方式のセキュリティリスクについても考えてみたほうが良いと思います。<br>※かといってSSOのデメリットの一つとして、認証情報が洩れるだけですべてのアプリケーションにアクセス可能になる等といった問題もあります。ここではメリデリを考えて導入を決定するべきということを主張しています。<br></p><h2 id="he0ec2e49ea">2. OpenIDConnectでのSSOログイン成功以降の認証時はIDpへリクエストを行わない</h2><p>意外と勘違いしていた人が多い印象だったのが、ログイン後のサービスプロバイダの認証方法。<br>下図はOAuth+OpenIDConnectを使用したSSOのフローです。<br>この図自体はググってもよく出てくるありきたりなフロー図ですが、皆さん勘違いしているのはログインしたその後。<br>アクセストークンを利用したリソースの取得以外で、サービスプロバイダはIDpのAPIを叩きません。<br>OpenIDConnectは認証のプロトコルであり、認証後のセッション管理やアクセス制御とは無関係です。<br>当然、IDトークン取得後の認証はサービスプロバイダーにゆだねられており、<br>IDトークンをクライアントで保存してJWT認証するか、はたまたログインセッションを発行するかは実装者次第です。<br><img src="https://images.microcms-assets.io/assets/836ad3163d294bd8906c4bb5dc834b92/e27be978a95d493484921baccea2e06f/SSO%E3%83%95%E3%83%AD%E3%83%BC.jpg" alt=""></p><h2 id="hbfb665d547">3.ログアウトを忘れないで</h2><p>ログアウト処理、ログアウト後のフローって結構後々になって考え出すこと多いですよね。<br>SSOログインを導入する場合は、ログアウトのフローについても必ず考慮する必要があります。<br>SSOを導入したアプリケーション開発では、ここら辺で多分揉めます（実体験）。<br>特に以下の点については要件定義時に必ず調査して方針を定めておくべきです。</p><ul><li>IDプロバイダーはシングルログアウトに対応しているのか。</li><li>サービスプロバイダー側の画面で、ログアウトボタンを押した際、シングルログアウトをするのか、それともシンプルにサービスプロバイダー側だけログアウトするのか。</li><li>認証元のサービスからログアウトした際、サービスプロバイダー側のアプリケーションもログアウトするのか。</li></ul><p><br></p><h2 id="h74be1c737a">4.OAuthとの違い、なぜOpenIDConnectなのかを理解しよう</h2><p>勘違いというよりか、よく理解しないまま実装する人が多い印象です。<br><span style="color:#353535">OAuthとOpenIDConnectの違いとしてよく「OAuthが認可のプロトコルであるのに対して、OpenIDは認証のプロトコルである」と説明されています。</span><br>OpenIDConnectは認証プロトコルであり、ユーザーが本人であることを証明するためのフローです。具体的には、OpenIDConnectを利用することによって得られるIDトークンにユーザーに関する基本的な情報が含まれており、その内容と署名によって改ざんを検知することにより認証を担保しています。<br>一方OAuthは認可プロトコルであり、ユーザーが本人であるかという確認（認証）ではなく、ユーザーが自分のリソースに対してアプリケーションのアクセスを許可するためのフローです。Oauthではリソースにアクセスするためのアクセストークンを取得できますが、アクセストークンはOpenIDConnectのIDトークンのように、取得したトークンの改ざんを検証することはできないので、そのアクセストークンがユーザー本人のものかという認証部分は担保できません。<br><br>アクセストークンは発行元が制御するサービスによって発行されるため、第三者がアクセストークンを入手した場合には、リソースに不正アクセスできる可能性があります。また、アクセストークンは有効期限があるため、認証情報として使用すると期限切れのアクセストークンが悪用される可能性もあります。<br><br></p><h1 id="hcbec2bf0d9">終わりに</h1><p>今回はOpenIDConnectを使ったSSOで勘違いしがちなことを実体験を元にまとめました。<br>認証認可、暗号化プロトコルは学べは学ぶほど面白くて夜も眠れなくなりますよね、今後もこういった知識系の記事もまとめていこうと思います！</p>

OpenIDConnectを使ったSSOについて

<h1 id="h8d027c8ed3">はじめに</h1><p>いままで私が実装してきたWebアプリでは、アップロードされた画像に対して、拡張子とファイルサイズの二点のみの検証しか行っていませんでした。<br>しかし、昨今のAI関連のOSSの発達で、バイナリ単位でのより高度な画像検証が簡単に実装可能になっており、画像に何が映っているのか等の高度な検証を、業務システム畑出身のど素人でも実装することができます。<br><br>今回、試しにアップロード画像に顔が映っているかどうかの検証をASP.netのカスタムバリデーションで実装していきます。<br>今回使用するライブラリは「<a href="https://github.com/shimat/opencvsharp" target="_blank" rel="noopener noreferrer">OpenCvSharp</a>」です。<br></p><h1 id="hbdc914e536">OpenCvSharpとは</h1><p>インテルが開発・公開した画像処理の有名なOSSライブラリに「<a href="https://github.com/opencv/opencv/tree/master" target="_blank" rel="noopener noreferrer">OpenCv</a>」というものがあります。<br>20年ほど前から開発、バージョンアップが続いており、画像解析だけでなく、画像編集、生成も可能な万能ライブラリです。<br>「OpenCV」は主にPythonで動かすライブラリですが、「OpenCvSharp」はそれをC#で利用するためのラッパーです。<br>もちろんNugetからインストール可能です。<br></p><h1 id="hed900658dc">環境</h1><p>今回の環境は以下となります。(古いですがCore3.1を使っています。確信は無いですが.Net6,7でも動くと思います。)</p><ul><li>ASP.net Core3.1</li><li>OpenCVSharp4(4.8.0.20230708)</li></ul><p><br></p><h1 id="h3d37611809">OpenCvSharpを使用する準備</h1><h2 id="h43b7545a9a">ライブラリインストール</h2><p>NugetでOpenCVの必要パッケージをインストールします。<br>・OpenCvSharp4<br>・OpenCvSharp4.runtime.win<br><br><img src="https://images.microcms-assets.io/assets/836ad3163d294bd8906c4bb5dc834b92/5384eaa1b12049c0ace8e0ab36f5b02f/OpenCv_Nuget.png" alt=""><br></p><h2 id="hc297c771ab">カスケード分類器？のダウンロード</h2><p>お恥ずかしながら私はAIについては全くの素人です。<br>画像から物体を検出するアルゴリズムについての知識は「ゼロ」です。<br>なので、「カスケード分類器」などと言われてもちっともぴんと来ないのですが、説明文だけ載せておきます。(間違ってたらすみません。)</p><blockquote>特定の条件をプログラムが判別できるようにまとめたものを「カスケード分類器」といいます。</blockquote><p>要するに、リンゴは「赤くて、丸くて、房が付いてて…」<br>みたいな情報をOpenCvが理解できるようにまとめたファイルみたいなものなのでしょう。<br>カスケード分類器は個人で自作も可能ですが、「人の顔」や「人の体」等の代表的なカスケード分類器はOpenCvのリポジトリからダウンロード可能です。ちなみにOpenCvのカスケード分類器はxml形式です。<br>下記リンクからダウンロードできます。<br><br>・<a href="https://github.com/opencv/opencv/tree/master/data/haarcascades" target="_blank" rel="noopener noreferrer">openCv/haarcascades</a><br><br>今回は、人の顔を識別するので、「haarcascade<em>frontalface</em>default.xml」を使用します。<br><br><a href="https://github.com/opencv/opencv/blob/master/data/haarcascades/haarcascade_frontalface_default.xml" target="_blank" rel="noopener noreferrer">https://github.com/opencv/opencv/blob/master/data/haarcascades/haarcascade_frontalface_default.xml</a><br>↑からファイルをダウンロードして、任意のフォルダに保存しておきます。<br>コピペして同名のファイルをローカルに作成すると、エラーになる可能性が高いです。なるべくダウンロードして使いましょう。<br>※私はプロジェクトフォルダの「Data/OpenCvSharp/」に保存しました。<br><br></p><h1 id="h4b4db67da6">カスタムバリデーションを実装</h1><p>カスタムバリデーションについて知識が無い方は<a href="https://qiita.com/gushwell/items/d659027304645b30b805" target="_blank" rel="noopener noreferrer">こちら</a>をご覧ください。<br>アノテーション一つで任意のフィールドにバリデーションルールを追加できます。<br><br>今回はローカルファイルではなくオンメモリでの画像読み込みなので、<code>Mat.FromStream()</code>を使用してMemoryStreamを読み込んでいますが、その際の第二引数で、オプションを指定できます。</p><pre><code> var mat = Mat.FromStream(ms,ImreadModes.Color);</code></pre><p><br>オプションの説明については<a href="https://shimat.github.io/opencvsharp_docs/html/f2c6a40e-a45a-d2da-e1fc-bbe6e4a2fd31.htm" target="_blank" rel="noopener noreferrer">こちら</a>で詳しい説明がされていますが、基本的には「UnChanged」で問題ないかと思います。<br><br>また、これはOpenCvSharpとは関係ないですが、ASP.netMVCでプロジェクトファイルのルートを取得する場合、IWebHostEnviromentをDIから取得する必要があります。<br><br>カスタムバリデーションからDIを取得するには、ValidationContext(DI)を引数で取得し、IWebHostEnviroment実装インスタンスを取得します。</p><pre><code> protected override ValidationResult IsValid(object value,ValidationContext context)</code></pre><p><br>以下がカスタムバリデーションのソースコードです。<br><br><code>PhotoFaceValidationAttribute.cs</code></p><pre><code>&nbsp; &nbsp; public class PhotoFaceValidationAttribute : ValidationAttribute
&nbsp; &nbsp; {
&nbsp; &nbsp; &nbsp; &nbsp; const String ERROR_MSG = "画像から顔を検出することができませんでした。";
&nbsp; &nbsp; &nbsp; &nbsp; protected override ValidationResult IsValid(object value,ValidationContext context)
&nbsp; &nbsp; &nbsp; &nbsp; {
&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; //ファイルがnullの場合は検証をスルー
&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; if(value==null) return ValidationResult.Success;
&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; //FormFile形式での取得
&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; var postedFile = value as IFormFile;
&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; //カスケード分類器のパスを指定します。
&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; var faceCascadeXml = System.IO.Path.Join(((IWebHostEnvironment)context.GetService(typeof(IWebHostEnvironment))).ContentRootPath, "Data","OpenCvSharp","haarcascade_frontalface_default.xml");
&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; using (MemoryStream ms = new MemoryStream())
&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; {
&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; postedFile.CopyTo(ms);
&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; //ストリーム現在位置を戻す
&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; ms.Seek(0, SeekOrigin.Begin);
&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; var mat = Mat.FromStream(ms,ImreadModes.Color);
&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; //カスケード分類器の読み込み
&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; using (CascadeClassifier cascade = new CascadeClassifier(faceCascadeXml))
&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; {
&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; //一人以上の顔が見つかったらOK
&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; if (cascade.DetectMultiScale(mat).Length &gt; 0)
&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; {
&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; return&nbsp; ValidationResult.Success;
&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; }
&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; }
&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; }
&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; return new ValidationResult(ERROR_MSG);
&nbsp; &nbsp; &nbsp; &nbsp; }
&nbsp; &nbsp; }</code></pre><p><br><code>モデル</code></p><pre><code>&nbsp;public class PhotoEntryViewModel
&nbsp; &nbsp; {
&nbsp; &nbsp; &nbsp; &nbsp; [PhotoFaceValidation()]
&nbsp; &nbsp; &nbsp; &nbsp; public IFormFile File { get; set; }
&nbsp; &nbsp; }</code></pre><p><br>実行してみると、人の顔が映っていない画像の時のみ検証に失敗すると思います。<br></p><h1 id="ha214098e44">まとめ</h1><p>はじめてAIを用いた処理を実装しましたが、専門知識無しでも簡単に実装できることに感動しました。<br>OpenCvSharpは今後の汎用性も高いと思ったので、次は、カスケード分類器を自作して、好きな画像だけ検出するような処理も作っていけたらなと思います。</p><h1 id="hcf83e1357e"><br></h1><p><br></p>

OpenCvSharpを使ってAIで人の顔が映った画像かどうかを検出し、その検証ロジックをASP.netのバリデーションに応用する方法を解説します。
C#を使っての、はじめてのAIを使った実装となりました。


【C#でAI入門】ASP.Netでアップロード画像に顔が映っているのか検証を行う

<h1 id="h8d027c8ed3">はじめに</h1><p>ASP.netでページング機能を実装するチュートリアルの記事は多いですか、どこか助長で拡張性に欠ける実装が多かったので、普段私が使用しているクラスの構成を共有します。<br></p><h1 id="hed900658dc">環境</h1><ul><li>ASP.net Core 3.1</li><li>Bootstrap4</li><li>X.PagedList.Mvc.Core 8.4</li><li>EntityFrameWork Core</li><li>BootstrapIcon4</li></ul><p><br></p><h1 id="h82ff5f5177">ヘルパークラスの実装</h1><h2 id="h1334ac44ea">インターフェース</h2><pre><code>//ページング機能付き一覧ページ(ソート機能付き)
public interface IPaginationListViewModel&lt;T&gt; : IListViewRouteCondition
&nbsp; &nbsp; &nbsp; &nbsp; where T : class&nbsp;
{
      //一覧の表示結果
 &nbsp; &nbsp; public IPagedList&lt;T&gt; Results { get; set; }
　　 
}
//検索、ソート、ページングのパラメータ
public interface IListViewRouteCondition
{
　　//ソートするフィールド名
&nbsp; &nbsp; public string SortF { get; set; }

　　 //ソートの方向
&nbsp; &nbsp;  public string Dir { get; set; }

　　//表示したいページ
&nbsp; &nbsp; &nbsp;public int? Page { get; set; }

　　 //一覧に検索項目がある場合はその値をDictionaryで取得できるメソッドを実装
&nbsp; &nbsp; &nbsp;public Dictionary&lt;string, string&gt; GetSearchKeyValues();
}</code></pre><h2 id="hcaf727aa1b">EFのOrderBy、OrderByDscendingをプロパティ名でソートできるように拡張メソッドを作成</h2><p>Expressionを使用しています。<br>SQLを発行する前に指定のプロパティ名からプロパティのオブジェクトを取得するコードをコンパイルするイメージです。</p><pre><code>/// &lt;summary&gt;
&nbsp; &nbsp; &nbsp; &nbsp; /// プロパティ名で昇順ソート
&nbsp; &nbsp; &nbsp; &nbsp; /// &lt;/summary&gt;
&nbsp; &nbsp; &nbsp; &nbsp; /// &lt;typeparam name="T"&gt;&lt;/typeparam&gt;
&nbsp; &nbsp; &nbsp; &nbsp; /// &lt;param name="source"&gt;&lt;/param&gt;
&nbsp; &nbsp; &nbsp; &nbsp; /// &lt;param name="propertyName"&gt;&lt;/param&gt;
&nbsp; &nbsp; &nbsp; &nbsp; /// &lt;returns&gt;&lt;/returns&gt;
&nbsp; &nbsp; &nbsp; &nbsp; public static IOrderedQueryable&lt;T&gt; OrderBy&lt;T&gt;(this IQueryable&lt;T&gt; source, string propertyName)
&nbsp; &nbsp; &nbsp; &nbsp; {
&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; return source.OrderBy(ToLambda&lt;T&gt;(propertyName));
&nbsp; &nbsp; &nbsp; &nbsp; }
&nbsp; &nbsp; &nbsp; &nbsp; /// &lt;summary&gt;
&nbsp; &nbsp; &nbsp; &nbsp; /// プロパティ名で降順ソート
&nbsp; &nbsp; &nbsp; &nbsp; /// &lt;/summary&gt;
&nbsp; &nbsp; &nbsp; &nbsp; /// &lt;typeparam name="T"&gt;&lt;/typeparam&gt;
&nbsp; &nbsp; &nbsp; &nbsp; /// &lt;param name="source"&gt;&lt;/param&gt;
&nbsp; &nbsp; &nbsp; &nbsp; /// &lt;param name="propertyName"&gt;&lt;/param&gt;
&nbsp; &nbsp; &nbsp; &nbsp; /// &lt;returns&gt;&lt;/returns&gt;
&nbsp; &nbsp; &nbsp; &nbsp; public static IOrderedQueryable&lt;T&gt; OrderByDescending&lt;T&gt;(this IQueryable&lt;T&gt; source, string propertyName)
&nbsp; &nbsp; &nbsp; &nbsp; {
&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; return source.OrderByDescending(ToLambda&lt;T&gt;(propertyName));
&nbsp; &nbsp; &nbsp; &nbsp; }


&nbsp; &nbsp; &nbsp; &nbsp; private static Expression&lt;Func&lt;T, object&gt;&gt; ToLambda&lt;T&gt;(string propertyName)
&nbsp; &nbsp; &nbsp; &nbsp; {
&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; var parameter = Expression.Parameter(typeof(T));
&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; var property = Expression.Property(parameter, propertyName);
&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; var propAsObject = Expression.Convert(property, typeof(object));


&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; return Expression.Lambda&lt;Func&lt;T, object&gt;&gt;(propAsObject, parameter);
&nbsp; &nbsp; &nbsp; &nbsp; }</code></pre><h2 id="h40dbf67e33"><br>抽象一覧作成用基底クラス</h2><p>デフォルト一覧表示行数10、ソート順のパラメータは"asc"、"desc"としています。<br>特に変わったことはしていませんが、</p><pre><code>public abstract class PagedListProcessBase&lt;T, T_Row&gt; where T: IPaginationListViewModel&lt;T_Row&gt;&nbsp;
&nbsp; &nbsp; &nbsp; &nbsp; where T_Row : class&nbsp;
&nbsp; &nbsp; {
&nbsp; &nbsp; &nbsp; &nbsp; protected const int DEFAULT_PAGE_SIZE = 10;
&nbsp; &nbsp; &nbsp; &nbsp; protected const int DEFAULT_PAGE = 1;
&nbsp; &nbsp; &nbsp; &nbsp; protected const string DESC = "desc";//ソートの際に使用されるパラメータ(降順)
&nbsp; &nbsp; &nbsp; &nbsp; protected const string ASC = "asc";//ソートの際に使用されるパラメータ(昇順)
&nbsp; &nbsp; &nbsp; &nbsp; protected readonly AppDbContext _context;//EFのDbContext
&nbsp; &nbsp; &nbsp; &nbsp; public PagedListProcessBase(AppDbContext context)
&nbsp; &nbsp; &nbsp; &nbsp; {
&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; _context = context;
&nbsp; &nbsp; &nbsp; &nbsp; }


&nbsp; &nbsp; &nbsp; &nbsp; public abstract Task&lt;T&gt; GetDataAsync(T vm);
&nbsp; &nbsp; &nbsp; &nbsp; /// &lt;summary&gt;
&nbsp; &nbsp; &nbsp; &nbsp; /// 基本クエリ
&nbsp; &nbsp; &nbsp; &nbsp; /// &lt;/summary&gt;
&nbsp; &nbsp; &nbsp; &nbsp; /// &lt;returns&gt;&lt;/returns&gt;
&nbsp; &nbsp; &nbsp; &nbsp; protected virtual IQueryable&lt;T_Row&gt; GetBaseQuery() =&gt; _context.Set&lt;T_Row&gt;();
&nbsp; &nbsp; &nbsp; &nbsp; /// &lt;summary&gt;
&nbsp; &nbsp; &nbsp; &nbsp; /// ソート
&nbsp; &nbsp; &nbsp; &nbsp; /// &lt;/summary&gt;
&nbsp; &nbsp; &nbsp; &nbsp; /// &lt;param name="query"&gt;&lt;/param&gt;
&nbsp; &nbsp; &nbsp; &nbsp; /// &lt;param name="sortfield"&gt;&lt;/param&gt;
&nbsp; &nbsp; &nbsp; &nbsp; /// &lt;param name="descOrAsc"&gt;&lt;/param&gt;
&nbsp; &nbsp; &nbsp; &nbsp; protected virtual void SetFieldSortQuery(ref IQueryable&lt;T_Row&gt; query, string sortfield, string descOrAsc)
&nbsp; &nbsp; &nbsp; &nbsp; {
&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; if (String.IsNullOrEmpty(sortfield)) return;
&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; if (descOrAsc == "desc")
&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; {
&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; query = query.OrderByDescending(sortfield);
&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; }
&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; else
&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; {
&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; query = query.OrderBy(sortfield);
&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; }
&nbsp; &nbsp; &nbsp; &nbsp; }
&nbsp; &nbsp; &nbsp; &nbsp; 
&nbsp; &nbsp; }

</code></pre><h2 id="h4caa7f762a">ソートのリンク生成用タグヘルパー</h2><p>IListViewSearchConditionで実装している検索パラメータ群をViewから取得し、ソート用のリンクを生成するコードです。<br>AchorTagHelperを継承していればRouteValuesプロパティにパラメータを追加するだけで、レンダリング後のhrefの値を編集できます。<br>ソートの順番やアイコンのタグなどは適宜調整してください。</p><pre><code>public class SortTagHelper : AnchorTagHelper
&nbsp; &nbsp; {
　　　　//PagedListProcessBaseと同じ値を使用するので、どこかに静的な変数として保管しておくとBetter
&nbsp; &nbsp; &nbsp; &nbsp; const string DESC = "desc";
&nbsp; &nbsp; &nbsp; &nbsp; const string ASC = "asc";
&nbsp; &nbsp; &nbsp; &nbsp; public SortTagHelper(IHtmlGenerator generator ) : base(generator)
&nbsp; &nbsp; &nbsp; &nbsp; {
&nbsp; &nbsp; &nbsp; &nbsp; }
&nbsp; &nbsp; &nbsp; &nbsp; [HtmlAttributeName("asp-for")]
&nbsp; &nbsp; &nbsp; &nbsp; //現在のソート、ページング、検索条件
&nbsp; &nbsp; &nbsp; &nbsp; public IListViewRouteCondition SortAndSearch { get; set; }
&nbsp; &nbsp; &nbsp; &nbsp; /// &lt;summary&gt;
&nbsp; &nbsp; &nbsp; &nbsp; /// リンクを作成する対象のフィールド(プロパティ名)
&nbsp; &nbsp; &nbsp; &nbsp; /// &lt;/summary&gt;
&nbsp; &nbsp; &nbsp; &nbsp; public string PropertyName { get; set; }
&nbsp; &nbsp; &nbsp; &nbsp;&nbsp;
&nbsp; &nbsp; &nbsp; &nbsp; public async override Task ProcessAsync(TagHelperContext context, TagHelperOutput output)
&nbsp; &nbsp; &nbsp; &nbsp; {
&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; //検索条件を設定
&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; foreach (var searchVerb in SortAndSearch.GetSearchKeyValues())
&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; {
&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; if(!String.IsNullOrEmpty(searchVerb.Value))RouteValues.Add($"Con.{searchVerb.Key}",searchVerb.Value);
&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; }
&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; //ページング設定を設定
&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; if (SortAndSearch.Page != null)
&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; {&nbsp;
&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; RouteValues.Add(nameof(SortAndSearch.Page), SortAndSearch.Page.ToString());
&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; }
&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; if (SortAndSearch.PageSize != null)
&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; {
&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; RouteValues.Add(nameof(SortAndSearch.PageSize), SortAndSearch.PageSize.ToString());
&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; }
&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; //ソート
&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; var descOrAscClassName ="";
&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; var sortmode = "";
&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; //現在ソート対象のフィールドである場合、ソート順を参照して次回ソート順のリンクを作成
&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; //ソートの順序：降順＝＞昇順＝＞ソート無し=&gt;降順...
&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; if (SortAndSearch.SortF == PropertyName)
&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; {
&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; descOrAscClassName = $"dir-{SortAndSearch.Dir}";//viewに反映されるクラス名
&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; if (SortAndSearch.Dir == DESC)
&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; {
&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; sortmode = DESC;
&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; RouteValues.Add(nameof(SortAndSearch.SortF), PropertyName);
&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; RouteValues.Add(nameof(SortAndSearch.Dir), ASC);
&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; }
&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; else if (SortAndSearch.Dir == ASC)
&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; {
&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; sortmode = ASC;


&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; }
&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; }
&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; //ソート対象でない場合降順ソートのリンクを作成
&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; else
&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; {
&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; RouteValues.Add(nameof(SortAndSearch.SortF), PropertyName);
&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; RouteValues.Add(nameof(SortAndSearch.Dir), DESC);
&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; }
&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; await base.ProcessAsync(context,output);
&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; output.TagName = "a";
&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; output.Attributes.Add("class", $"table-header {descOrAscClassName} text-nowrap sort-link");
&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; //昇順、降順それぞれの場合に表示するアイコン
&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; if (sortmode == ASC)
&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; {
&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; output.PostContent.SetHtmlContent($"&lt;i class=\"bi bi-caret-down-fill\"&gt;&lt;/i&gt;");
&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; }
&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; else if(sortmode == DESC)
&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; {&nbsp;
&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; output.PostContent.SetHtmlContent($"&lt;i class=\"bi bi-caret-up-fill\"&gt;&lt;/i&gt;");
&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; }
&nbsp; &nbsp; &nbsp; &nbsp; }
&nbsp; &nbsp; }</code></pre><p><br></p><h1 id="hf2fbc75167">ヘルパークラスを利用して実装してみる</h1><h2 id="hd1f3776a36">検索条件クラス</h2><pre><code>&nbsp;/// &lt;summary&gt;
&nbsp; &nbsp; /// 顧客一覧検索条件
&nbsp; &nbsp; /// &lt;/summary&gt;
&nbsp; &nbsp; public class GuestListSearchCondition
&nbsp; &nbsp; {
&nbsp; &nbsp; &nbsp; &nbsp; /// &lt;summary&gt;
&nbsp; &nbsp; &nbsp; &nbsp; /// 顧客名
&nbsp; &nbsp; &nbsp; &nbsp; /// &lt;/summary&gt;
&nbsp; &nbsp; &nbsp; &nbsp; public string Name { get; set; }
&nbsp; &nbsp; &nbsp; &nbsp; /// &lt;summary&gt;
&nbsp; &nbsp; &nbsp; &nbsp; /// 会社名
&nbsp; &nbsp; &nbsp; &nbsp; /// &lt;/summary&gt;
&nbsp; &nbsp; &nbsp; &nbsp; public string CompanyName { get; set; }
&nbsp; &nbsp; }</code></pre><p><br></p><h2 id="hf4711ba66b">一覧(ViewModel)クラス　</h2><p>IPaginationListViewModelを実装しておくだけでいいです。<br>※Guestsで定義しているのはEFでバインドされる対象のモデルです。</p><pre><code>&nbsp;/// &lt;summary&gt;
&nbsp; &nbsp; /// 顧客一覧ViewModel（検索、ソート、ページングあり）
&nbsp; &nbsp; /// &lt;/summary&gt;
&nbsp; &nbsp; public class GuestListViewModel : IPaginationListViewModel&lt;Guests&gt;
&nbsp; &nbsp; {
&nbsp; &nbsp; &nbsp; &nbsp; /// &lt;summary&gt;
&nbsp; &nbsp; &nbsp; &nbsp; /// 検索条件
&nbsp; &nbsp; &nbsp; &nbsp; /// &lt;/summary&gt;
&nbsp; &nbsp; &nbsp; &nbsp; public GuestListSearchCondition Con { get; set; } = new GuestListSearchCondition();
&nbsp; &nbsp; &nbsp; &nbsp; /// &lt;summary&gt;
&nbsp; &nbsp; &nbsp; &nbsp; /// 一覧
&nbsp; &nbsp; &nbsp; &nbsp; /// &lt;/summary&gt;
&nbsp; &nbsp; &nbsp; &nbsp; public IPagedList&lt;Guests&gt; Results { get; set; }
&nbsp; &nbsp; &nbsp; &nbsp; /// &lt;summary&gt;
&nbsp; &nbsp; &nbsp; &nbsp; /// ソートするカラム
&nbsp; &nbsp; &nbsp; &nbsp; /// &lt;/summary&gt;
&nbsp; &nbsp; &nbsp; &nbsp; public string SortF { get; set; }
&nbsp; &nbsp; &nbsp; &nbsp; /// &lt;summary&gt;
&nbsp; &nbsp; &nbsp; &nbsp; /// ソートの方向
&nbsp; &nbsp; &nbsp; &nbsp; /// &lt;/summary&gt;
&nbsp; &nbsp; &nbsp; &nbsp; public string Dir { get; set; }
&nbsp; &nbsp; &nbsp; &nbsp; /// &lt;summary&gt;
&nbsp; &nbsp; &nbsp; &nbsp; /// 現在のページ
&nbsp; &nbsp; &nbsp; &nbsp; /// &lt;/summary&gt;
&nbsp; &nbsp; &nbsp; &nbsp; public int? Page { get; set; }
&nbsp; &nbsp; &nbsp; &nbsp; /// &lt;summary&gt;
&nbsp; &nbsp; &nbsp; &nbsp; /// ページサイズ
&nbsp; &nbsp; &nbsp; &nbsp; /// &lt;/summary&gt;
&nbsp; &nbsp; &nbsp; &nbsp; public int? PageSize { get; set; }

　　　　/// &lt;summary&gt;
&nbsp; &nbsp; &nbsp; &nbsp; /// 検索条件をDictionaryで取得
&nbsp; &nbsp; &nbsp; &nbsp; /// &lt;/summary&gt;
&nbsp; &nbsp; &nbsp; &nbsp; public Dictionary&lt;string, string&gt; GetSearchKeyValues()
&nbsp; &nbsp; &nbsp; &nbsp; {
&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; return new Dictionary&lt;string, string&gt;
&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; {
&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; { nameof(Con.Name),Con.Name}
&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; };
&nbsp; &nbsp; &nbsp; &nbsp; }
&nbsp; &nbsp; }</code></pre><p><br></p><h2 id="hb31e834edc">一覧データ取得用クラスの実装</h2><p>PagedListProcessBaseを継承します。<br>検索、ソート、データ取得部分で特殊な動きを実現したい場合は検索、ソートメソッドをオーバーライドしてください。</p><pre><code>public class GuestListProcess: PagedListProcessBase&lt;GuestListViewModel, Guests&gt;
&nbsp; &nbsp; {
&nbsp; &nbsp; &nbsp; &nbsp; public GuestListProcess(AppDbContext context):base(context)
&nbsp; &nbsp; &nbsp; &nbsp; {
&nbsp; &nbsp; &nbsp; &nbsp; }
        /// &lt;summary&gt;
&nbsp; &nbsp; &nbsp; &nbsp; /// 表示データ取得
&nbsp; &nbsp; &nbsp; &nbsp; /// &lt;/summary&gt;
&nbsp; &nbsp; &nbsp; &nbsp; /// &lt;param name="vm"&gt;&lt;/param&gt;
&nbsp; &nbsp; &nbsp; &nbsp; /// &lt;returns&gt;&lt;/returns&gt;
&nbsp; &nbsp; &nbsp; &nbsp; public async override Task&lt;GuestListViewModel&gt; GetDataAsync(GuestListViewModel vm)
&nbsp; &nbsp; &nbsp; &nbsp; {
&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; //基本クエリ生成
&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; var query = GetBaseQuery();
&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; //ソート
&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; SetFieldSortQuery(ref query, vm.SortF, vm.Dir);
&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; //検索
&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; SetSearchQuery(ref query, vm.Con);
&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; //データ取得
&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; vm.Results = await query.ToPagedListAsync(vm.Page ?? DEFAULT_PAGE, vm.PageSize ?? DEFAULT_PAGE_SIZE);
&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; return vm;
&nbsp; &nbsp; &nbsp; &nbsp; }
&nbsp; &nbsp; &nbsp; 
&nbsp; &nbsp; &nbsp; &nbsp; /// &lt;summary&gt;
&nbsp; &nbsp; &nbsp; &nbsp; /// 検索
&nbsp; &nbsp; &nbsp; &nbsp; /// &lt;/summary&gt;
&nbsp; &nbsp; &nbsp; &nbsp; /// &lt;param name="query"&gt;&lt;/param&gt;
&nbsp; &nbsp; &nbsp; &nbsp; /// &lt;param name="con"&gt;&lt;/param&gt;
&nbsp; &nbsp; &nbsp; &nbsp; private void SetSearchQuery(ref IQueryable&lt;T_Guest&gt; query, GuestListSearchCondition con)
&nbsp; &nbsp; &nbsp; &nbsp; {
&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; //従業員名
&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; query = query.WhereEx(!String.IsNullOrEmpty(con.Name), x =&gt; x.Name.Contains(con.Name));
&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; //会社名
&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; query = query.WhereEx(!String.IsNullOrEmpty(con.CompanyName), x =&gt; x.CompanyName.Contains(con.CompanyName));
&nbsp; &nbsp; &nbsp; &nbsp; }
}</code></pre><h2 id="h2d51efde38">Controller</h2><pre><code>/// &lt;summary&gt;
/// 従業員一覧
/// &lt;/summary&gt;
/// &lt;returns&gt;&lt;/returns&gt;
[HttpGet]
public async Task&lt;IActionResult&gt; List(GuestListViewModel vm)
&nbsp; &nbsp; {
&nbsp; &nbsp; &nbsp; &nbsp; var proc = new GuestListProcess(_context);
&nbsp; &nbsp; &nbsp; &nbsp; return View(await proc.GetDataAsync(vm));
&nbsp; &nbsp; }</code></pre><h2 id="habf12851ff">View（ソート用のリンク部分）</h2><p>自作のタグヘルパーを利用し、asp-forにIListViewRouteConditionを実装しているModelを指定し、PropertyNameにはソート対象のプロパティ名を指定します。</p><pre><code>&lt;th scope="col"&gt;
&nbsp; &nbsp; &nbsp;&lt;sort asp-for="@Model" property-name="@nameof(Guests.Name)"&gt;従業員名&lt;/sort&gt;
&lt;/th&gt;</code></pre><p><br></p><h1 id="ha214098e44">まとめ</h1><p>今回は検索、ソート、ページング機能付きの一覧画面を実装しました。<br>この実装をしてから、一覧のViewとデータ取得処理部分の実装、保守工数が削減できました。<br>XpagedListを凌駕する便利なページングライブラリが出るまではこの方法で一覧画面を作っていく予定です。<br></p>

ASP.NET Core MVCで検索、列ソート、ページング機能付きの一覧ページを作成します。
タグヘルパーを使用してViewのコーディング時間を大幅に短縮することに成功しました。

ASP.NET Core MVCで検索、列ソート、ページング機能付きの一覧を作成する。

<h1 id="h8d027c8ed3">はじめに</h1><p>私がなぜNext.Jsでブログを作ったかというと、<strong>SPAでかつSSGできて、基本的なSEO対策も簡単にできる</strong>という点に惹かれたからです。<br>僕と同じようにNextJSでサイトを構築された方なら少なからず同じような考えで、NextJsを選定されているのではないかと思います。<br>特にSSGしている分、初期表示速度については必要以上に気になってしまう方が多いのではないかと思います。<br><br>私も同様で、表示速度について気になって気になって、自己流で何度も試行錯誤をしてきました。<br>しかし、ある程度基本的な速度対策をした後に、「この対策がどれぐらい意味を成しているのか」という疑問が生まれてきます。<br><br>そこで使ってみようと思ったのが、Google提供の「PageSpeed Insights」です。<br></p><h1 id="h124e852a10">PageSpeed Insightsとは</h1><blockquote><span style="color:#202124">PageSpeed Insights API（PSI）は、モバイル端末向けとパソコン向けの両方のページにおけるパフォーマンスに関するレポートと、そのページを改善する最適化案を提供します。参照：</span><a style="color:#202124" href="https://developers.google.com/speed/docs/insights/v5/about" target="_blank" rel="noopener noreferrer">PageSpeed Insights API について</a></blockquote><p><br>要は、ページの表示速度、サイトパフォーマンスを点数化してくれるGoogle公式のAPIです。<br>Google公式なだけあって、この点数がSEOにも影響してるとかしてないとか。<br></p><h1 id="hdcc132a15c">まずは自分のブログをPSIで診断してみた</h1><p>結果は以下の通りです。<br><code>デスクトップ</code><br><img src="https://images.microcms-assets.io/assets/836ad3163d294bd8906c4bb5dc834b92/87612fd87b3a4216a9d8d8a892de36ac/PageSpeedInsights-before..jpg" alt=""><br><br><code>モバイル</code><br><img src="https://images.microcms-assets.io/assets/836ad3163d294bd8906c4bb5dc834b92/7d6c507729f64e87812629bed1bbabf9/PSI-mobile-before..jpg" alt=""><br><strong>デスクトップは89、モバイルは65</strong>。<br>モバイルの数値が気になる、、<br><br>実はこれでも、まあまあ対策したほうです。<br><br>この数値が出る前に私がやったことは、</p><ul><li><span style="color:#384359">@next/</span><a href="https://www.npmjs.com/package/webpack-bundle-analyzer" target="_blank" rel="noopener noreferrer">bundle-analyzer</a>を使用して、クライアント側にバンドルされている不要なJavascriptを削除(hljs等)</li><li>静的画像をできるだけ圧縮</li><li>next/linkを使用したタグで、プレレンダリングが必要ない部分のprefetch属性をfalseに変更</li></ul><p><br>ここまでは調べてできる範囲の対策ですね。<br>特に、bundleanalyzerを使って不要なバンドルファイルを除外するのはかなり効果があったと思います。<br><br>しかしこの数値、、、<br><br>「いったいこれ以上何をすればええんや！！」<br><br><br>案ずるなかれ、さすがは天下のGoogle様。<br>ご丁寧にその数値が出た原因も記述されていました。<br><img src="https://images.microcms-assets.io/assets/836ad3163d294bd8906c4bb5dc834b92/66ef7fe7aa1d405abab594e6053da6f4/PSI-detail-2..jpg" alt=""><br>要するにwebpackの不要なチャンクを削除しろよと。<br><br></p><h1 id="h35bf254f20">PSI数値、上げてみた</h1><h2 id="h2220f0ef7d">やったこと</h2><ul><li>cheerioをクライアント側で使っている部分があったので、サーバー側ですべてパースできるように最適化</li><li>MUIをpaginationのみ使用していたため、React-paginationに移行、MUIを削除</li><li>開発環境でデバックしたところ、Linkコンポーネント周りで警告があったので修正</li></ul><p>	</p><h2 id="hb6509f48bf">結果</h2><p><code>デスクトップ</code><br><img src="https://images.microcms-assets.io/assets/836ad3163d294bd8906c4bb5dc834b92/215d2a00ccb24b1185ff05590cfd782b/psi_afrter1.jpg" alt=""><br><code>モバイル</code><br><img src="https://images.microcms-assets.io/assets/836ad3163d294bd8906c4bb5dc834b92/3ecf22506eea4c4b984cb4eda5773703/psi_afrter2.jpg" alt=""><br>デスクトップ<br>89→94<br>モバイル<br>65→72<br>誤差程度には上がりました。<br>理想としてはモバイルは85以上には上げたいのですが、、<br></p><h2 id="he6e3e00f90">効果があったと考えられる対策</h2><p>webpackのチャンクが大きいという警告は修正後も治っていなかったので、<br>多分そこまで効果が無かったのでしょう。<br><br>では何がPSIの点数を上げる要因になったのかというと、<br><strong>デバック時に警告があったLink周りを修正したから</strong>だと考えられます。<br><br>開発環境でプロジェクトを立ち上げると、コンソールに<br>「Warning: Prop href did not match. Server: "category/tutorial/page/1" Client: "/category/tutorial/page/1」が表示されていました。<br> NectJsでSSGされたレンダリング結果と、クライアント側でのレンダリング結果に差異があった場合、このような警告が出るみたいです。<br><br>Next.Jsでは、サーバー側で生成されたhtmlと、クライアント側でのレンダリング結果の差分を検知するようになっています。<br>差異が無かった場合、クライアントサイドでのレンダリングコストはかかりませんが、<br>差異があった場合はクライアントサイドで再度レンダリングが行われてしまいます。<br>当然、この差異があった場合はレンダリング時のパフォーマンスも悪くなってしまい、PSIの数値にも悪影響を与えます。<br><br>ちなみに、僕の場合</p><pre><code>&lt;NextLink href={`category/${categoryArticle.categoryId}/page/1`}&gt;</code></pre><p>となっていたところを</p><pre><code>&lt;NextLink href={`/category/${categoryArticle.categoryId}/page/1`}&gt;</code></pre><p> に変えただけで、パフォーマンスが上がったわけです。<br></p><h1 id="ha214098e44">まとめ</h1><p>Next.Jsで作られた当ブログのPageSpeedInsightsの数値を少しだけ改善してみました。<br>今回はデバック時の警告を直すだけでスコアが改善されました。<br><br>ここまでやっておいてなんなんですが、ぶっちゃけ数値が悪かろうがユーザーの体感値的に遅くなければ問題なくね？<br>とかも思ったりします。<br>あまりPSIの数値にセンシティブになっているより、<br>他のSEO対策やUI/UXの改善に時間を割く方が効率的なのかもしれませんね。<br></p>

Next.js(Static Site Generation)で作られたサイトのPageSpeedInsightsの数値を改善する方法についての記事です。
特にモバイルの数値が上がらない方に参考になればと思います。
JAMStack構成のブログを作成されている方、React(SPI)を使ったサイトでのPSI数値を上げる方法について考察します。


Next.JsでPageSpeed Insightsのスコアを上げたい！

<h1 id="h8d027c8ed3">はじめに</h1><p>NextJs+Typescript+MicroCMS構成のブログ作成チュートリアルは様々なQAサイト、ブログに記事があります。<br>それら記事を拝見しながら作った本ブログですが、<br>技術的に一歩踏み込んだところで、「どう実装するんだ？」となってしまった部分がいくつかありました。<br><br>その中でも今回は、「ページング付きの、カテゴリ別記事一覧」の実装方法についてまとめてみようという試みです。<br><br></p><h1 id="h8a175a9b0e">前提</h1><p>今回の記事は、以下の知識があることを前提とした説明になっています。</p><ul><li>GetStaticProps、GetStaticPathsの大まかな挙動を理解している。</li><li>TypeScriptの基礎(型や宣言)について理解している。</li></ul><p><br>また、本記事はNextJsでSSGをする方法、MicroCMSのAPI連携部分の実装等、いろいろとすっ飛ばして説明しています。<br>基本的なブログの作成方法に関する、記事は下記リンクを参考にしてください。<br><br><a style="background-color:#ffffff" href="https://blog.microcms.io/microcms-next-jamstack-blog/" target="_blank" rel="noopener noreferrer">microCMS + Next.jsでJamstackブログを作ってみよう｜MicroCMS公式Blogより</a><br><br>環境構築～デプロイの手順がとってもわかりやすくまとまっています。<br>(MicroCMS公式ブログはわかりやすくて、ためになる優良記事ばかりで、控えめに言って、最高です。<br>Next.Jsについての記事もたくさんありますので、他記事を拝読することもお勧めします。)<br></p><h1 id="h922edff87b">実装</h1><h2 id="hc6a9bd6981">ファイル作成</h2><p>pagesディレクトリに、category/[categoryId]/page/[page].tsxを追加します。<br><br>ディレクトリ構成</p><pre><code>pages
|-category
    |-[categoryId]
        |-page
           |- [page].tsx  &lt;=追加
|-_app.tsx
|-index.tsx</code></pre><p><br><code>pages.tsx</code></p><pre><code>import { GetStaticPaths, GetStaticProps, NextPage } from 'next';
//1ページに表示する最大記事数
const MAX_PAGE =10 as const;

type Props={
&nbsp; data:IMicroCMSBlogRes,
&nbsp; page:number,
&nbsp; categoryName:string,
&nbsp; categoryId:string
}

const CategoryPage:NextPage&lt;Props&gt; =({categoryName,data,page,categoryId})=&gt;{
&nbsp; return(
&nbsp; &nbsp;  &lt;&gt;&lt;/&gt;
  &nbsp; )
}

export const getStaticPaths:GetStaticPaths =async () =&gt;{
&nbsp;   return //GetStaticPathsの結果オブジェクト
}

export const getStaticProps:GetStaticProps=async({params}:GetStaticPropsContext)=&gt;{
&nbsp; &nbsp;return //Props
}
export default CategoryPage;</code></pre><p>GetStaticPaths、GetStaticProps、NextPageの中身はとりあえず空にしています。<br><br>個人的な好みで、コンポーネントごとに固有のpropsは　<br><code>type Props={}</code><br>で統一していますが、命名は好みで変えてください。<br><br>今回使用するtypescriptの型は以下のようになっています。<br><br><code>interfaces/microCMS.ts</code></p><pre><code>//MicroCMSAPIからの取得記事
export interface IArticle {
&nbsp; &nbsp; id: string
&nbsp; &nbsp; createdAt: string
&nbsp; &nbsp; updatedAt: string
&nbsp; &nbsp; publishedAt: string
&nbsp; &nbsp; revisedAt: string
&nbsp; &nbsp; title: string
&nbsp; &nbsp; content: string
&nbsp; &nbsp; description:string
&nbsp; &nbsp; eyecatch:{
&nbsp; &nbsp; &nbsp; &nbsp; url: string
&nbsp; &nbsp; height: number
&nbsp; &nbsp; width: number
&nbsp; &nbsp; }
&nbsp; &nbsp; category:ICategory
}

export interface ICategory{
&nbsp; &nbsp; id:string
&nbsp; &nbsp; name:string
}

//MicroCMAPIからのレスポンス固定のパラメータ
export interface IMicroCMSRes{
&nbsp; totalCount: number,
&nbsp; &nbsp; offset: number,
&nbsp; &nbsp; limit: number
}

//BlogエンドポイントのAPIレスポンス
export interface IMicroCMSBlogRes extends IMicroCMSRes{
&nbsp; contents:IArticle[]
}
//CategoryエンドポイントのAPIレスポンス
export interface IMicroCMSCategoriesRes extends IMicroCMSRes{
&nbsp; contents:ICategory[]
}</code></pre><p><br></p><h2 id="h3ae2ec230b">GetStaticPaths内の処理</h2><p>GetStaticPathsの処理です。</p><pre><code>export const getStaticPaths:GetStaticPaths =async () =&gt;{
　//全カテゴリ取得
&nbsp; const categories =await GetAllCategories();
　
&nbsp; const pathsNotFlat = await Promise.all(
&nbsp; &nbsp; categories.map((category:ICategory) =&gt; {
　　　//カテゴリごとに記事数を取得し、何ページ必要かを計算
&nbsp; &nbsp; &nbsp; return GetPostsCountInCategories(category.id)
&nbsp; &nbsp; &nbsp; &nbsp; .then((totalCount) =&gt; {
&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; const range = (start: number, end: number) =&gt;
&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; [...Array(end - start + 1)].map((_, i) =&gt; start + i);
          //ページの最大値を計算(記事数0でも表示)
&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; const pagesEnd =Math.max(1,Math.ceil(totalCount / MAX_PAGE));
&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; return range(1, pagesEnd ).map(
&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; page =&gt; `/category/${category.id}/page/${page}`
&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; )
&nbsp; &nbsp; &nbsp; });
&nbsp; &nbsp; })
&nbsp; )
&nbsp; const paths=pathsNotFlat.flat();

&nbsp; return { paths, fallback: false }
}</code></pre><p><br><span style="color:#222222">解説していきます。</span><br><br>まず、<strong>await GetAllCategories() </strong>で、MicroCMSに登録されているブログのカテゴリを全て取得します。<br><br>GetAllCategories()内の処理については、MicroCMSに登録されている全カテゴリを取得し、<br>IMicroCMSCategoriesResの型で返しているだけなので割愛します。<br><br>次に、<strong>Promise.All()内で、取得したカテゴリごとに、紐づいている記事の数を取得</strong>しています。<br>MicroCMSのデータ取得APIには、SQLで言うJoinにあたるクエリが無い(無いかもしれない)ので、<br><br>カテゴリ全取得 → 各カテゴリごとに記事数取得<br><br>という、とってもめんどくさいプロセスを踏んでいます。<br>(今思えば全記事を取得してreduce()でカテゴリごとの記事数をまとめたほうが良かったのかも、、)<br><br><br>GetPostsInCategories()では、該当するIDのカテゴリの記事件数を取得してきます。<br>関数の中身はこのようになっています。<br><br><code>lib/posts.ts</code></p><pre><code>export async function getPostsCountInCategories(id:string):Promise&lt;number&gt;{
&nbsp; const data:IMicroCMSCategoriesRes =await client.get({
&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; endpoint: 'blogs',
&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; queries: {filters: `category[equals]${id}`,fields: "totalcount"}
&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; });
&nbsp; return data.totalCount;
}</code></pre><p>APIでカテゴリに紐づいているブログ数を取得しています。<br>この関数をPromiseで返し、PromiseAll()で全カテゴリの件数取得を待ちます。<br><br>続いて、GetPostsCountInCategories()のメソッドチェーンになっている.then()の中身についてです。<br>range()で、表示するすべてのページ番号を配列で取得します。</p><pre><code>const range = (start: number, end: number) =&gt;[...Array(end - start + 1)].map((_, i) =&gt; start + i);</code></pre><p>start～endの数値の連番を配列を返します。<br>range(1,5)は[1,2,3,4,5]を返すといった具合です。<br><br>ちなみに、</p><pre><code>Array(end-start+1).map((_, i) =&gt; start + i);//×Array()がemptyの配列を返すため、map()が機能しない。</code></pre><p>としてしまうと、一見動きそうですが動かないので注意です。<a href="https://qiita.com/dojyorin/items/eb4f6c1562791f613d14" target="_blank" rel="noopener noreferrer">参考：【JavaScript】Array.prototype.map()とemptyな配列</a><br><strong>動的に連番を取得する上記の関数は地味によく使うので、テンプレとして覚えておくことをお勧めします</strong>。<br><br>カテゴリごとの記事の最大ページ数を計算します。</p><pre><code>const pagesEnd = Math.max(1,Math.ceil(totalCount / MAX_PAGE));</code></pre><p>「総記事数÷1ページに表示したい記事数」を切り上げることで、ページ数が取得できます。<br><span style="color:#21213b">この時の注意点としては、記事数0、すなわちページ数0でもページを表示できるようにすることです。</span><br>今回はMath.max()を使用して、ページ数の最小値を1にしています。<br><br>SSGするページのルーティングを文字列で返します。<br>当然ですが生成するパスは、category/[categoryId]/page/[page].tsxのディレクトリ名と一致させてください。</p><pre><code>return range(1, pagesEnd ).map(
&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; page =&gt; `/category/${item.id}/page/${page}`
&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; )</code></pre><p><br>pathsオブジェクトで返したい場合は、paramsを持ったオブジェクトを返してください。</p><pre><code>//これでもいけます。
return range(1, pagesEnd ).map(
&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; page =&gt; {
              params:{
                category:item.id
                page:page
              }
            }
&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; )</code></pre><p><br>await PromiseAll()によって得られる値は、配列にしたルーティングを、カテゴリでごとにさらに配列したものになります。<br><strong>string[][]となってしまっているので、string[]</strong>に直してあげます。</p><pre><code>&nbsp;const paths=pathsNotFlat.flat();//string[][]=&gt;string[]</code></pre><p><br></p><h2 id="he813800427">GetStaticProps内の処理</h2><p>getStaticPropsの処理です。</p><pre><code>export const getStaticProps:GetStaticProps=async({params})=&gt;{
&nbsp; &nbsp;const categoryId = String(params?.categoryId);//カテゴリIDを取得
&nbsp; &nbsp;const categoryPage = Number(params?.page);//ページ
&nbsp; &nbsp;const data = await getPostsInCategories(MAX_PAGE,categoryPage-1,categoryId);//記事を取得
&nbsp; &nbsp;const categoryName = await GetCategoryName(categoryId);//カテゴリ名を取得
&nbsp; &nbsp;return {
&nbsp; &nbsp; props:{
&nbsp; &nbsp; &nbsp; data,
&nbsp; &nbsp; &nbsp; categoryPage,
&nbsp; &nbsp; &nbsp; categoryName,
&nbsp; &nbsp; &nbsp; categoryId
&nbsp; &nbsp; }
&nbsp; &nbsp;}
}</code></pre><p><br>paramsのメンバにはgetStaticPathsで定義したcategoryId,pageが含まれていますが、<br>今回の例では<strong>、getStaticPathsの戻り値を厳密に型指定していないので、補完が効かないことに注意してください</strong>。<br>getStaticPaths、getStaticPropsの引数を厳密に型指定したい方はこちらが参考になります。<br><br><a href="https://zenn.dev/eitches/articles/2021-0424-getstaticprops-type" target="_blank" rel="noopener noreferrer">[Next] getStaticPropsの型の付け方、型定義について｜zenn</a><br><br>一覧にする記事情報をawait getPostsInCategories()で取得します。<br>ブログ取得のクエリにoffsetとlimitを指定して、<br>「先頭から何件目」を、「何件取得するのか」を指定することで、ページごとの記事一覧を取得できます。</p><pre><code> 

export async function getPostsInCategories(count:number,offset:number,id:string):Promise&lt;IMicroCMSBlogRes&gt;{
&nbsp; const data:IMicroCMSBlogRes =await client.get({ endpoint: 'blogs',
&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; queries: {filters: `category[equals]${id}`, 
　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　limit: count, 
　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　offset: offset}});
&nbsp; return data;
}</code></pre><p>カテゴリ名はわざわざAPIで取得せずとも、記事一覧から取得可能ですが、今回はわかりやすくするために、APIで取得するようにしています。<br><code>await GetCategoryName()</code>で、カテゴリＩＤに対応するカテゴリ名を取得しています。<br><br></p><h2 id="hf667e4873b">ページネーションの実装</h2><p>最後に、getStaticPropsによって取得した記事の一覧データを使って、NextPage関数内でページネーションを実装します。<br>ページネーションは、MUIを使うと簡単に実装できます。<br><br>MUIをインストールします。</p><pre><code>// npm
npm install @mui/material @emotion/react

// yarn
yarn add @mui/material @emotion/react</code></pre><p><br>@mui/materialからPaginationコンポーネントをインポートし、各propsを割り当てます。<br>詳しくは、<a href="https://mui.com/material-ui/react-pagination/" target="_blank" rel="noopener noreferrer">MUI/Pagination｜MUI公式</a>を参考にしてください。</p><pre><code>import { GetStaticPaths, GetStaticProps, NextPage } from 'next';
import { Pagination } from '@mui/material';//追加
//1ページに表示する最大記事数
const MAX_PAGE =10 as const;

//～～～～～～～～～～～～～～～

const CategoryPage:NextPage&lt;Props&gt; =({categoryName,data,page,categoryId})=&gt;{
　const totalPagesCount = Math.ceil(data.totalCount/MAX_PAGE);//記事数からページ数を計算
&nbsp; return(
&nbsp; &nbsp;  &lt;&gt;
       &lt;Pagination 
        count={totalPagesCount} 
        page={page} 
        siblingCount={3} /&gt;
     &lt;/&gt;
  &nbsp; )
}</code></pre><p><br>ページネーションをnext/linkで遷移できるようにします。<br>next/routerから<strong>useRouterモジュール</strong>をインポートし、<br>PaginationコンポーネントのonChangeイベントで、<strong>routerのpushイベントを発火させると、</strong><br><strong>任意のページに遷移できます</strong>。</p><pre><code>const CategoryPage:NextPage&lt;Props&gt; =({categoryName,data,page,categoryId})=&gt;{
　const totalPagesCount = Math.ceil(data.totalCount/MAX_PAGE);
　const router = useRouter();
&nbsp; &nbsp;const handlePageChange = (event: React.ChangeEvent&lt;unknown&gt;, page: number) =&gt; {
&nbsp;  &nbsp; &nbsp; let {pathname} = router;//現在のドメイン以降のパスを取得(パラメータは取得できない)
&nbsp;  &nbsp; &nbsp; router.query.page=page:
&nbsp;  &nbsp; &nbsp; router.push({
&nbsp;  &nbsp; &nbsp; &nbsp; &nbsp; pathname:pathname,
&nbsp;  &nbsp; &nbsp; &nbsp; &nbsp; query:router.query
&nbsp;  &nbsp; &nbsp; })
&nbsp;  }
&nbsp; return(
&nbsp; &nbsp;  &lt;&gt;
       &lt;Pagination 
　　　　onChange={handlePageChange}//追加
        count={totalPagesCount} 
        page={page} 
        siblingCount={3} /&gt;
     &lt;/&gt;
  &nbsp; )
}</code></pre><p>useRouter()から取得できるpathNameは、ドメイン以降のパスを取得できますが、<strong>パラメータは取得できません</strong>。<br>たとえば、category/blog/page/1のページで取得できるpathNameは”category/[categoryId]/page/[page]”となります。<br><br>よって、ページ遷移をしたいのであれば、router.queryを書き換えるのがよさそうです。<br><br>最後に、無理やり一覧画面を作るとすればこんな感じです。<br></p><pre><code>const CategoryPage:NextPage&lt;Props&gt; =({categoryName,data,page,categoryId})=&gt;{
　const totalPagesCount = Math.ceil(data.totalCount/MAX_PAGE);
  const articles = datas.contents;
　const router = useRouter();
&nbsp; &nbsp;const handlePageChange = (event: React.ChangeEvent&lt;unknown&gt;, page: number) =&gt; {
&nbsp;  &nbsp; &nbsp; let {pathname} = router;//現在のドメイン以降のパスを取得(パラメータは取得できない)
&nbsp;  &nbsp; &nbsp; router.query.page=page:
&nbsp;  &nbsp; &nbsp; router.push({
&nbsp;  &nbsp; &nbsp; &nbsp; &nbsp; pathname:pathname,
&nbsp;  &nbsp; &nbsp; &nbsp; &nbsp; query:router.query
&nbsp;  &nbsp; &nbsp; })
&nbsp;  }
&nbsp; return(
&nbsp; &nbsp;  &lt;&gt;
  　　　&lt;h1&gt;{categoryName}&lt;/h1&gt;
        &lt;ul&gt;
          {articles.map(article=&gt;
             &lt;li&gt;{article.title}&lt;/li&gt;
           )}
         &lt;/ul&gt;
         &lt;Pagination 
      　　　　onChange={handlePageChange}
              count={totalPagesCount} 
              page={page} 
              siblingCount={3} /&gt;
         &lt;/&gt;
        &nbsp; )
      }</code></pre><p><br><br>後は見た目のみですね！スタイルは適当に当てましょう。(本ブログはChakraUIを使ってスタイリングしています)<br></p><h1 id="ha214098e44">まとめ</h1><p>今回はNextJs+MicroCMSのブログでの、カテゴリ別記事一覧の実装方法について説明しました。<br>ただのカテゴリ別一覧なのに、意外と骨が折れる工程でしたね、、<br>まだまだ改善の余地があると思うので、ご自身で実装する際は自分なりに工夫してみてください！</p>

Next.Js+MicroCMS+Typescriptで、カテゴリ別の記事一覧を実装する方法です。
Pages内で、2階層以上のDynamicRoutingを実装する方法についてチュートリアル形式で説明します。
javascript /typescript/ ブログの作り方/テックブログ

カテゴリ：Web開発

Yakan

Yakan