Blogページの目的

microCMSというサービスを知り，どこかで使ってみたいなと考えていたため，どうせなら個人サイトでBlogページを作ろうという考えに至り作成しました．インスタ・技術ブログには載せない程度のどっちつかずの出来事（学会参加など）を更新する予定です．

Blogページ作成にあたっての知見

microCMSによる記事作成およびWebページへの反映

本ページは，microCMSで記事コンテンツを作成し，それをAPI経由でjson形式で取得し，各タグごとにtailwindCSSをあてて，見た目を整えています．

サーバーレスAPIで取得できるデータは以下のとおりです．

{
    "id": "xxxx",
    "createdAt": "2025-02-14T05:13:46.912Z",
    "updatedAt": "2025-02-14T16:54:38.994Z",
    "publishedAt": "2025-02-14T05:13:46.912Z",
    "revisedAt": "2025-02-14T16:54:38.994Z",
    "title": "Blogページの開設",
    "content": "<p>インスタ・技術ブログには載せない程度のどっちつかずの出来事をまとめようと思い，<span style=\"color: #02600e\">Blogページ</span>を開設しました．</p>",
    "thumbnail": {
        "url": "xxxx",
        "height": 128,
        "width": 128
    },
    "tags": [],
    "writer": null
}

このようにmicroCMSで作成したコンテンツをJSON形式で取得できます．たとえば，data.content?.pre.codeに対して，next.js側で以下のようなCSSを適用しています．

.content pre>code {
 @apply block overflow-x-auto p-4 bg-slate-200 dark:bg-gray-800;
}

簡単にコンテンツを作成できますし，慣れている人ほどNext.js側で見た目を整えることができるのでいいですね．

記事検索機能

本BlogページはmicroCMSのテンプレートをほぼ流用している形なのですが，その中に記事の検索機能がありました．どのような仕組みになっているのか個人的に気になったのでまとめておきます．

'use client';
import { useCallback, useRef, useState } from 'react';
import { useSearchParams } from 'next/navigation';
import styles from './index.module.css';
export default function SearchField() {
const [composing, setComposition] = useState(false); // 初期値はfalse，setCompositionで値を変更
const startComposition = () => setComposition(true);
const endComposition = () => setComposition(false);
/**   
* Enterキーが押されたときに検索ページに遷移する   
* @param {React.KeyboardEvent<HTMLInputElement>} e - キーボードイベント   
* @returns {void}   * useCallBackにより不要な再レンダリングを防ぐ，composingが変わった時だけ再生成する   
*/  
const _onEnter: React.KeyboardEventHandler<HTMLInputElement> = useCallback(   
(e) => {  if (e.code === 'Enter' && !composing) 
{  location.href = /search?q=${inputRef.current?.value};   }   },
   [composing],   );  
const inputRef = useRef<HTMLInputElement>(null); // vueでいうところのrefと同じ  
const searchParams = useSearchParams();  
const defaultQuery = searchParams.get('q') || '';  
return (  <input  
type="search"  
name="q"  
ref={inputRef}  
className={styles.search}  
placeholder="Search..."  
onKeyDown={_onEnter}  
onCompositionStart={startComposition} // 日本語入力モード中である  
onCompositionEnd={endComposition} // 日本語入力モードが終了した  
defaultValue={defaultQuery}  />   );  }

location.href は 現在のページのURL を表す JavaScriptの組み込みプロパティ のことみたいです．これを書き換えることで新しいページに遷移することができます．

location.href = /search?q=${inputRef.current?.value};

Searchコンポーネント中の上記コードは， URLを /search?q=○○ に変更しリダイレクトする，この場合だとq=inputRef(ユーザ入力)に遷移するんですね．

const defaultQuery = searchParams.get('q') || ''; について | searchParams.get('q') とは？

searchParams.get('q')とは，現在のURLからqの値を取得するコードです．たとえば

http://example.com/search?q=hello

だった場合、searchParams.get('q') は "hello" になります。

つまり，Searchフィールドに文字列を入力してEnterを押すと，App Routerの/searchにqパラメータをもった状態でアクセスするということですかね．ちなみにqパラメータはmicroCMSのAPIでコンテンツの全文検索を行うことができるパラメータのようですが，内部仕様は非公開です．使ってみた感じぼちぼちの精度といったきがしますね．記事を取得するgetList関数に与えるパラメータはこちらで確認できるみたい．カスタマイズしたくなったらみてみたいですね．気になるのはcontainsパラメータですね．時間はかかるけど精度はいいらしい，，

終わりに

普段はPythonで拡散モデルやDeep Learningをやっていますが，たまにはこのようにWebページ作成をするのも楽しいので，今後も拡充していく予定です．