ただの趣味から仕事でも使うツールになったことで、
メモ帳に書き殴っていた実家時代から大幅に飛躍したweb技術領域。
その成果の第１弾がピクチャレ大会で、これは「Next.js」というフレームワークを使って作っています。
実は2022年のプロジェクト黎明期から、
実際に作り始めてみた頃まではずっと「Nuxt（ナクスト）」というフレームワークで検討していました。
これは2020年当時の同僚間の話で「Reactは難しい。Vue.jsなら昔ながらのHTMLコーダーにも理解しやすい」
というような情報がさも常識かのように飛び交っていた影響もあり、
ReactのフレームワークであるNext.jsよりVue.jsのフレームワークであるNuxtの方がハードルは低いだろう、
と思い込んでいたことによります。

しかし実際に触ってみるとReactのコンポーネント指向開発がとても面白く、
開発初期に思い切ってNext.jsへ転向することにしました。
当時の記事（#06970 / 2023年01月16日）によると、当時はNuxtがメジャーアップデートしたばかりで情報が少なく、
その情報の少なさが開発初期にしていきなり暗礁に乗り上げるきっかけになったので思い切って切り捨てた、
という感じみたいです。いまなら時間も経っているしChatGPTもいるしなんとかなりそうな気はしますね。

そんな矢先、「Nuxt Content」というNuxtのモジュールと「Nuxt Studio」というwebサービスを知りました。
Nuxt Contentは、簡単に言えばGitで管理されたMarkdownファイルをそのまま表示させる技術。
Nuxt Studioは、そのMarkdownファイルをコードベースでweb上から直接編集できるようにするサービスです。
「Markdownで書いた記事をそのまま読み込む」
というスタイルは現行の本家ブログのシステムそのままであり、大いに驚きました。
これならモジュールのサポートも受けつつシステムを変えずに運用することも不可能ではない。

本家ブログの現行システムは突貫工事で作った結果どうしてもビルドが通らなくなってしまい（#07716 / 2025年01月31日）、
ゼロベースからの作り直しを決意したばかりでした。
ChatGPTと話し合いながら、そのときは最終的にはピクチャレ大会と同じような構造にすることにしました。
すなわちDBコンテナ、バックエンドコンテナ、フロントエンドコンテナをそれぞれ別に用意する方式です。
記事をアップしたらバックエンドがDBへ変換し、APIでDBを読み込んで記事を表示するという想定です。
もちろんこれは開発が難しいということもありますが、
結局マスターデータはMarkdownでDBは中継でしかないため、
DBとしてのマスタとMarkdownとしてのマスタが共存せざるをえないというややこしさもあります。
その代わり、DB化するので全文検索などで有利なのは確か。

そもそもこの問題の根本は「ビルドが通らないこと」だったので、
ゼロベースから作り直すにしても必要以上に複雑化する必要はありません。
それならば、モジュールとしてMD-HTML変換がサポートされているNuxtの方が有望なのでは……と思った次第です。
Studioを使えば実質どの端末からでもブログ編集できるという点も魅力的。
もちろん、Markdownをそのまま扱うことのリスクやデメリットもありますけどね。
たとえばこの方式だとブログ全部の全文検索はあまり現実的ではなく、諦めざるをえません。
まあ、そもそも向こう数年は全記事公開する目処が立っていないため重要度はかなり低いのですが。

自分としては2022年当初こだわっていたNuxtの魅力を期せずして再発見でき、なかなかアツい展開です。
Nuxt Contentは実際にミニアプリを作って試してみて、有望そうならこっちで行こうかなと。
２年前なら「Vue.jsも触ったことないのに……」と尻込みしてしまうところですが、
ChatGPTのおかげで技術知識の有無はさっぱり考慮しなくていいというのは本当に便利な時代になったなと思います。

昨日大苦戦していた不具合、結局散々疑ったフロントエンドではなくバックエンドの問題でした。
しかもカッコがひとつ多いとかいう些細なことが原因でした……。
今回やろうとしていたのは、まずLaravelで生成したデータベースをAPIで渡せるようにします。
その際データは自動的にJSON形式に変換されます。
これをNuxt.jsの「useFetch」という関数が受け取り、
分割代入でデータはdataという変数に入ります。この際、JSON形式は連想配列に自動変換されます。
さらにVue.jsのv-forというディレクティブを使って、
いわゆるforeachのように連想配列を１行ごとに展開します。
最後に展開されたデータをマスタッシュ構文で表示させれば完成。
データベースの中身がHTML形式で自動ループによって１行ずつ表示されるというわけです。

このとき注意しなければならないのは、LaravelからNuxt.jsに渡すJSONの中身。
v-forディレクティブは何も指定しなければあくまでも最初の階層を基準に展開します。
もし第二階層に展開されるべきデータが入っていたら、
v-forディレクティブは表示されるべきデータを全部１行目に出力してしまいます。
昨日はこの状況をJSONが文字列として出力されていると勘違いしたわけですね。
Laravel側で準備したデータが$dataに格納されているとき、
[$data]のようにカッコで囲むと$data自体は第２階層になってしまいます。
このカッコを取れば万事解決というわけ。
たぶん、$dataの他にも格納しようとしていた経緯があって第２階層になっていたんでしょう。

とにかくJSON周りで不具合があったら中身を見てみるのも大事かもしれません。
中身を見る方法としては、「Postman」というアプリを使うとAPIをテストすることができ、
JSON形式でも生の形式でもデータの取得をチェックできるので便利です。
500エラーとかもキャッチしてくれるのでAPI生成以前と以後の問題の切り分けも簡単になります。
こういうツールは積極的に使って問題解決を早めていきたいところですね。

ともあれようやく一歩前進しました。自分がNuxt.jsを理解するのはまだまだ先になりそう……。

祖父母家帰省中に初詣に行かなかったので地元の神社に行って参拝してきました。
三が日最終日ということもあって人混みがすごかったです。
なぜかぽっぽ焼きの屋台に長蛇の列が……。県外の人がお土産を目的に並んでいるのか、
それともぽっぽ焼き好きな地域住民が並んでいるのかわかりませんが、あれ人気なんですね。
地元では有名なお菓子ですが、そう言えば20年以上食べてない気がする。

参拝はまあ良かったのですが、行き帰りの自転車でものすごく疲れてグッタリしました。
向かい風がひどかったことを差し引いても、明らかに昔より疲れやすくなっている。
加齢のせいということもあるでしょうが、やはり東京生活は身体が鈍るものだと改めて実感しました。
新潟生活時代はある意味自転車を使わざるを得ないのでそれが運動になっていましたが、
そういうことも最近はまったく無くなっていましたからね。

帰宅後は積みゲー崩しの続きをしたり、
あとは今年の一大プロジェクトであるピクチャレ大会リニューアルに向けて、
去年やっていた作業を思い出して最新のタスクに立ち向かってみました。
以前積んでいたタスクは消化できたので良かったのですが、新たな問題に足止めを食らっています。
簡単に言えば、APIで取ってきたデータをループ処理できないという問題。
Jsonで返ってきていることを想定しているのですが、ただの文字列として認識されているっぽい。
これを解決するべく検索しまくっているのですが、情報が少なく解決できていない状況です。
やはりというか前途多難な面は否めない今回のプロジェクト……。
もうちょっと枯れた技術を使えばいろいろ文献も出てきそうなので、
最悪の場合はフレームワークの乗り換えも視野に入れつつ調査をしていくつもりです。

積みゲー崩しの方は、積みゲーではないですが
去年末からハマっている『風来のシレン5plus』の「人生の落し穴」にトライ中。
25階を越えればクリアなのですが、昨日は21階まで惜しくもやられてしまいました。
むしろ復活の草３つもゲットしてなおやられるというのはなかなか理不尽に感じますが。
昨日・今日とやってみた感じだと武器、防具、そして「ちから」の値が重要っぽいです。
これらに恵まれなかった場合はもう如何ともしがたい。
まだ帰省は続くのでもう少し頑張ってみようと思います。