inputエリアに検索語句を入力してEnterキーを押すと、検索結果が表示される。そうではなくEnterキーを押さずに、検索処理を走らせたいなと。それも複数語句対応で。これまではonKeyDownイベントを使って、Enterキーが押されたら検索処理を行なっていました。それをonChangeイベントを使って、inputエリアの入力値に変化があったら、検索処理が走る様にしてみました。値の受け渡しにはuseStateを使っているのですが、useReducerの方がいいのかなぁ… useReducer、勉強をせねば！
inputエリアの値はgetElementById、e.target.value以外にも、querySelectorを使っても取得出来るみたいなので、試してみました。セレクタにid属性なら#、class属性なら.を指定することで値を取得出来るので、便利ですね。Enterキーが押されたかの判断は、e.key===Enterで行なっていましたが、formタグを使っての方法も試してみました。formにonSubmitを設定しただけでは、Enterを押した際に、ブラウザのリロードが行われ、検索処理が行われない事象が発生。preventDefaultを設定することで、値を取得することが出来ました。
GatsbyJSブログの検索フォームを、複数語対応にしてみました。以前はinputエリアに検索語句を入力すると、リアルタイムに記事がリストアップされる感じでしたが、検索語句は1語のみの対応でした。複数語句を入力しようとして、半角スペースを入力した時点で、何もリストアップされなくなっていました。複数語句対応にしたかったので、ひとまず検索語句は3語まで対応。inputエリアに入力し、Return（Enter）キーを押すと、記事がリストアップされます。今回はonKeyPressではなく、onKeyDownイベントを使ってみました。inputエリアの値は、getElementById、e.target.valueどちらを使っても取得出来ました。
NextJSのブログに目次（TableOfContents）を作成してみました。remarkプラグインを使った方法はGatsbyJSで試したので、別の方法はないかと探していたら、Tocbotを使った方法があるみたいなので、今回試してみる事に。contentSelectorで設定したクラス名を、表示させたい箇所に同一のクラス名を設定してあげる必要があります。headingSelectorに設定したタグをreturn内で見出しを囲むタグとして使ってしまうと、目次の項目として認識されてしまうので、注意が必要です。
TailWindCSSで最後の要素のみに適用したい場合、（:notは使えなさそうなので）要素全体に値を設定した上で、最後の要素（last）のみ値を適用しないみたいに設定する必要がありそう。@applyやlast-of-typeの使い方も調べてみました。前者はボタンやフォームなど、小さい範囲で再利用可能なものに使うのが良さそうなのかな？ 後者は意図した結果が得られなかったので、再度検証してみる必要がありそう…
NextJSとTailWindCSSで作成しているブログ。yarn devでは出なかったエラーが、yarn buildでは出てくるように。pagesフォルダ内にはlibやcomponentsフォルダを配置しないとか、next-sitemapを使ってサイトマップを作成する際には、ファイル名をnext-sitemap.config.jsに。feedを作成する際にmarkedも併せて使う場合には、（export functionと定義されているので）import {marked} from markedにするなど、注意点が沢山。デプロイ先をVercelにしようかは、思案中です。
GitHubのpersonal access tokensの有効期限が切れそうなので、更新しようかと思ったのですが、Updateするボタンみたいなのが見当たらなかったので、新規作成（Generate new token）して、古いものはDeleteしてみました。後で気づいたのですが、作成したトークン名の青色のリンクをクリックすると、画面が遷移し、Regenerate tokenボタンがありました。次回はこちらの方法でやってみようかと思っています。
GitHubで公開されているNextJSのblog-starter を色々検証してみました。画像はpublicフォルダ内に配置しておけば、markdown記法での画像配置も問題なさそうということが分かりました。公式のチュートリアルには無かった_document.jsファイルの使い方や、getStaticPathsはdynamic route内でしか使えないなど、なるほど…と思うことが沢山ありました。
NextJSも触ってみようかなと思い、まずは公式のチュートリアルを試してみることに。自分はyarnを使って、プロジェクトを作成してみました。markdownファイルのファイル名を個別記事のURLパスにしたり、固定ページの作成方法など、GatsbyJSと似ている点も。異なる点といえば、LinkコンポーネントのURL指定などでしょうか… getStaticPaths、getStaticPropsの使い方は、きちんと理解したいと思っています。
GatsbyJSで作成したブログに、検索フォームを実装してみました。Algoliaの様に全文検索とまではいきませんが、記事内の検索されそうな語句を用いて要約を作成し、それに対しfilterやindexOfを使って検索処理を行うことで、投稿された全記事から絞り込む仕様にしてみました。graphql の filter を使ったクエリは、comparatorの値で意図したものにならなかったりしたので、断念しました。
GatsbyJSの個別記事に、目次（table-of-contents）を作成してみました。Graphql のクエリにtableOfContentsを追加し、後はgatsby-remark-autolink-headersもインストールします。markdownRemarkの場合は、dangerouslySetInnerHTMLを使って簡単に表示出来ましたが、allMdxを使った場合は、一手間が必要でした。
GatsbyJSのバージョンを3から4にアップデートし、mdxの読み込みに対応したブログに作り直してみました。gatsby-plugin-mdxをインストールした後は、（allMarkdownRemarkではなく）allMdxを使うらしい。StaticImageはクエリを使わずに画像を表示出来るみたいで便利そう。今後もReact、GatsbyJS、CSSの勉強を続けながら、TypeScriptとNextJSでブログでも作ろうかなと思ったりしています。