Chrononglyph

webサイト制作作業

#7727

最先端に飛び付けない

数日前、ビルドできない現行CMSの後継として「Nuxt Content」が有望だという話を書きました(#07727 / 2025年02月11日)。
ただ、いろいろ試行錯誤した結果、実際にはあまり有望とも言えない現状が明らかに。


前回、Nuxtを断念した理由はバージョンアップ直後でノウハウが転がっていないからでしたが、
今回は同じことがNuxt Contentで起きました。メジャーバージョンアップはなんと先月末ということで、
現行最新のver.3は生まれたてほやほやです。
こうなると、まずChatGPTと二人三脚で行うプロンプトエンジニアリングはかなり難しい。
ver.3で作るのは難しいのでver.2以前でということになるのですが、
Nuxt Contentは結構マイナーらしくそもそもバージョン関係なくノウハウが転がっていない。
これでは自分みたいにサクッと作って長期運用したいズボラなユーザーはついていけません。


Nuxt ContentやNuxt Studioは画期的で面白い技術だと思いますが、
さすがにこの現状は開発やその後の保守運営で苦しむことが明白なので、断念せざるを得ませんでした。
そこでさらに掘り下げてみると、「Astro」というフレームワークを発見。
これはアイランドアーキテクチャと呼ばれる技術によって作られており、
コンポーネント単位でそれぞれ別のフレームワーク、つまりReactやVue.jsなどを柔軟に使える特徴を持っています。
そして、AstroもMarkdownを直接読み込むルーティングに対応しているため、
特定のフォルダにMarkdownファイルを格納するだけでそれを表示することができるもよう。
要するに自分が作ろうとしているブログなどに適しているというわけですね。


Nuxt Contentにしろ、Astroにしろ、テンプレートを改造して形だけ整えることはできると思います。
実際、表示してみるだけなら本当に爆速で実現できました。
ただ、それを末永くメンテ・機能追加していけるかと言われると……。
10年後、それらの技術が衰退している可能性の方が高いのではないかと思ってしまいます。
結局のところ、可能なかぎりミニマムなところから設計してオリジナルのCMSを作った方が長期的にはいいのかなと。
APIとフロントエンドを別々に作る方法が遠回りのようで実は一番手っ取り早いのかも。
そうなるとNext.jsで作ってしまうのが無難だという話に立ち戻ってくるわけで。
地盤がしっかりした技術でないとAIに訊けないというのもあり、
AI以前よりも新しい技術に飛びつきにくくなっている側面はかなりあると思っています。
面倒ですが、基本設計からちゃんとやってみましょうかねぇ……。


#7516

半年ぶりの開発反省まとめ

07月06日からピクチャレ大会開発の機運が高まり、短期集中でweb開発作業に打ち込んでいました。
今日でようやく本番リリースできたので反省等々を書き残しておきます。


まず何よりも、「やはりブログとの両立は難しい」という事実と向き合わざるを得ません。
開発モチベが上がると基本的に他はすべて犠牲になります。
出社勤務が復活した以上趣味関連に費やせる時間はどうしても限定的になるため、
尚更犠牲にせざるを得ないところがあります。特に平日は退勤後1時間〜90分程度しか確保できませんからね。
そうなると、どう頑張ってもブログを書く時間は絞り出せない。
だからと言ってブログを優先にして半年ぶりに復活したモチベを無視するなんて以ての外。
結局昨日までの9日間で書き切れた記事は2本でした。これでは4代目ブログ設立は難しいのが現実でしょう。
ただ、これは開発作業云々というより出社が復活したことによる影響の方が大きい可能性も看破できず、
開発作業のせいでブログが書けないと言い切ってしまうのは早計かなと思っています。
まぁでも意欲が開発に向いている分、どうしてもブログを書くモチベを捻出しにくいのはあると思いますが。


これについては、まず開発自体の1日の作業量を減らしてもう少し長いスパンで取り組むのが妥当かなと。
まあ半年ぶりの開発でテンションが上がっていたので今回は仕方ないと思いますが、
1日のうち確実に確保できるのが90分だとしたら、そのうち30分はブログに回したいところ。
開発の方は最低1タスク消費できればまあまあの達成感はあり、
1タスクと1記事を90分で片付ける習慣が根付けば理想的かなと思っています。


実務的なところでは、本番リリースは想像以上に手強いというのが所感ですね。
今回も水曜日にはもう当初予定のタスクは全部できていたのにポコポコ出てくる不具合に対処するうちに休日に入り、
さすがに土曜日にリリースできるか……と思いきや本番相当のビルドをしてからさらに不具合がどんどん出てきて、
結果的に3連休を全部潰してしまいました。
さらに本番リリースでも100GBのストレージをDockerのビルドキャッシュとNext.jsのページキャッシュで
全部埋め尽くしてしまい、ほとんどのコマンドがエラーを吐くという恐ろしい事態にもなりました。
これはイメージごとバックアップしてから.next/server/page/の中身を全部物理削除して、
Dockerが動くようになったところでdocker builder pruneコマンドでビルドキャッシュを削除で解決。
解決方法自体は簡単でしたがここに辿り着くまでは冷や汗ものでした。


あとまったく身に覚えがないのにModule build failedというエラーでビルドが通らなくなったのもビビった。
エラーでググってもネットにはそれらしき対処方法はなさそうだし、
ChatGPTもNode.jsをバージョンアップしましょう等の提案しかしてくれないので詰みかけましたが、
実際にはバックエンドからフロントエンドへAPIの一部をコピペした際、
IDEの機能でコピペ先にimport fetch from 'node-fetch'が自動挿入されたのが原因でした。
Node.jsの管轄外であるフロントの処理なのにnode-fetchを参照しようとしているので怒られた感じですかね。
高性能IDEは便利だけどこういう罠もあるというのは良い教訓になりました。


それから正月に奮闘していたCSSクラス不一致のバグですが、今回もなんやかんやで再発して対応に追われました。
これはもうStyled-Componentsを廃止するのが一番シンプルで確実な解決方法なので、
ピュアCSSに回帰することになるんじゃないかと思っています。


全体としては、メンターとしてのChatGPTくんも以前より適切に利用できている感じがするし、
実質1週間で主な不具合は一通り直せたので及第点かなとは思っています。
とはいえwebサービスとしてはまだまだまだまだ課題もやりたいこともあるので今後も頑張りたいところ。
このままピクチャレ大会の開発に注力したいところですが、
4代目ブログのフロントも然り他にやるべきことが多すぎるのでこれはここで一区切りが妥当かなと……。


#7101

レガシーからの脱却

毎週土曜日は元同僚と『Apex Legends』をやる日なのですが、
その同僚が風邪でダウンしているため今週は中止となり、時間が予想外に空きました。
ここでスーパー銭湯に行ってもいいかもしれないと一瞬思いましたが、
今月内に基本機能を完成させたいピクチャレ大会開発に注ぎ込むことにしました。
朝はなぜか05時に起きてからしばらく二度寝できなかったのでその時間にも開発していて、
その後10時半から13時まで昼寝したあと、すぐに昼食を済ませてコワーキングスペースへ。
そこから21時半までずーっと作業をしていました。
今日だけで10時間以上は作業していたことになります。


しかし10時間もやれば相当進んだのかと思いきやそうでもない。
やはり新技術を学びながらなのでとにかく足が遅いです。まだまだ無限にやることが出てくる。
正直、今月内の基本機能完成はかなり怪しい情勢です。
来月前半まで延長してようやくという感じかな……。
デザイン関係は個人的に初めてクラウドソーシングによる発注を試してみる予定なので、
それのために最低3週間は確保したい。
なおかつ、デザイナーさんにサイトの雰囲気を伝えるためには
ある程度フロントエンドが完成している必要がある。
1ヶ月残して基本機能を完成させようとしていたのはそういう事情もあるのですが、
いかんせん現実的なタスクの進捗を考えるとこの辺も同時並行にならざるを得なくなりそうです。
デザインの発注は実費がかかってくるので失敗したくありません。
しかしサイトが完成する前から動き始めてしまうと、
完成してから「やっぱりこっちのデザインが良かった」と後悔してしまいそうな予感がします。
だからこそ見た目の完成は最優先したいのですが……。


とはいえ、年初の状況から考えるとこれでも相当進んだ方だとは思います。
なにしろ500時間近くは費やしたであろうサイトをゼロベースから作り直しているので、
時間がいくらあっても足りないのは承知の上。
それでもなんとか勝負できているのはモダンな開発環境があまりにも快適だからです。
フルスクラッチから開発していたらあと20倍は時間が必要だったでしょう。
コンポーネント指向開発が快適すぎて、もはやフルスクラッチ開発には二度と戻れなさそう……。
去年まであれほど理由もなく敬遠していたReactも、理解すればするほど好きになっています。
ある意味今回のこの経験で自分はレガシーな開発から完全に卒業したと言えると思います。


明日は今月最後のがっつり開発できる休日。果たして明日でどこまで行けるか……。
明日も今日と同じようにコワーキングスペースでずっと開発する一日になりそうです。


#7091

完成へ一直線

このところ低速飛行が否めなかったピクチャレ大会開発、今日はめちゃくちゃ進みました。
難関だと思っていたカスタムメニューをほぼ一日で実装できたのは大きい。
これをピュアjavascriptで実装しようと思ったらとてつもない大作業になったと思いますが
(実際に旧ピクチャレ大会のナビゲーションメニューはそれ単独で数十時間かかっています)、
Material UIとNext.jsを使ったことでいともたやすく実装することができました。
素晴らしきかなモダンフレームワーク。もうレガシーになんて戻れない。


リリースまでの最低要件は基本機能を一通り実装することですが、
残っている山場はトップページのカスタマイズと投稿機能周り、スマホ対応の3つです。
この3つをクリアできれば『ピクミン4』を迎える準備はできたものと考えていいと思っています。
それ以外に実装したい応用的なことはリリース後にじっくり作っていけばいいかなと。
とにかく今回のリメイク作業はイチから再構築して新作発売日に間に合わせることが最大の目的です。
無駄にタスクを詰め込んでその目的を達成できないようでは本末転倒ですしね。


そしてその目的を達成するためには、もうそろそろモチベがどうのこうのと言っていられません。
今回掴み取った勢いはもうなるべくリリースまで手放さないようにしたいところ。
そのためには、どんなに少なくてもいいから毎日少しずつ着手してコミットすることが大事です。
1日でも間が空くと翌日はどうしても心理的に着手しづらくなるし、
それは2日、3日と連続すると心理的ハードルは指数関数的に高くなっていきます。
ブログの維持と同じく、とにかく毎日やることそのものが大事なのかなと。
ただブログと違って開発作業はタスクによって難易度に波があり、
高難易度はそれだけで着手するのが躊躇われることがあります。
そしてそれがきっかけで開発そのものから離れてしまうということがわりとあります。
これから1ヶ月ほどの山場ではそういう局面をいかに乗り越えるかがポイントになりそう。
高難易度でいまは無理と思ったら代替のタスクを用意するなどしてなんとか凌ぎたいところです。


にしても、コワーキングスペースはめっちゃくちゃ捗りますね。
今日のタスク進捗が良かったのはほとんど環境のおかげだと思っています。
最近ずっとカフェの方を優先していて使っていなかったから新鮮味も手伝って捗る捗る。
このコワーキングスペースによるブーストもうまく活用していきたいところです。


#7059

複雑怪奇なクエリ

新ピクチャレ大会開発作業、今月末には基本機能の完成を目指しているのですが、
どうも暗礁に乗り上げてしまっています。
と言うのも、SQLが難しすぎる!!


いまやりたいのは、各ユーザーごとにそれぞれ同じユーザーIDとステージIDを持つ記録のうち、
最もスコアの大きい記録のみ抽出し、それをスコアの降順に並び替えるという処理。
共通した記録を1つに絞るのはGROUP BY句で実現できるのですが、
同じユーザーIDの記録をグループ化する際、基本的には最も古い記録が代表の記録になります。
しかし記録テーブルは当然新しいほどスコアが高いのでそれでは困る。
SELECT句にMAX関数を使うことで最大スコアを抽出することはできるのですが、
それに付随する情報を持ってくることはできない。
ORDER BY句で並び替えてからグループ化できればそれが一番早いのですが、
SQLの優先度の法則ではGROUP BYよりORDER BYを先に適用することはできない……。
サブクエリを作れば解決できそうな雰囲気はありますが、
最もスコアの高い記録だけを抽出したところで同値はたくさんあるので、
LEFT JOINで繋ぐなどといった処理は現実的ではありません。
かといってユニークIDはランダム値なので使えないし……。
散々ググっているのですが現状まだ解決できていない状況です。誰か教えてくれ。


なんというかSQLって論理思考力を高く求められる気がして、自分には向いていないかも。
そろそろwebデザインをやらせてくれと思いながら取り組んでいました。
とにかく何日も同じところで詰まっているとモチベに強い悪影響を及ぼすので、
このSQL問題はいったん支障の無い形で仮完成としておいて、
スキップして次のタスクに移ることにしました。
そうしないと今月完成も危うくなってしまいそうで……。


ゴールデンウィーク終了時に最低限リリースできることを目標とするならば、猶予は約半月。
今週過ごした感じだとそのうち作業に集中できるのは金・日・月曜日のみなので、
単純計算で作業できる日は11日ということになります。
途中ゴールデンウィークがあるけど、まあ結局確保できる時間は同じくらいでしょう。
1日3時間として33時間……基本機能作成はもう後半戦なので、
これくらいあればできるような気がしますが難解なバグが出てくるとわからないかも。
とにかく今月後半はこれを重点的に進めたいところです。


#6970

最先端の迷走

今年完成を目標としている新サイト制作プロジェクトが前途多難であることは
ブログで何度も言及していますが、ちょっとかなりの方向転換を余儀なくされつつあります。
というのも、去年1年間で迷いに迷って「Laravel+Nuxt3の疎結合」という答えを出し、
年初からさっそく具体的な開発に動き出しているのですが……。
Laravelはともかく、Nuxt.jsがあまりにも足元の危うい感じが否めないため
さすがにちょっと他のフレームワークにいまからでも乗り換えようかと考えています。


Next.jsはフロントエンドフレームワーク「Vue.js」をさらに包括するフレームワーク。
バージョン3は去年の12月に安定版がリリースされたばかりという最新鋭の開発環境です。
しかし、あまりにも新しすぎて情報が少なすぎるんですよね。
少ないならまだマシで、散々探して「無い」という結論に至ることもあるから困ったもの。
たとえば今日なんかはログイン機能を作ろうと思っていろいろ調べていました。
Nuxt.jsには「Nuxt-Auth」という認証機能プラグインが公式に存在するのですが、
これはどうやらバージョン3には未対応らしい。
サードパーティで比較的早く対応しているプラグインもあるものの、それはLaravel非対応。
藁をすがる気持ちで探しに探した結果Githubでわずか10いいねのリポジトリを発見するも、
マニュアルが簡潔すぎて大事なことが書かれていないため実装ができないという……。


Nuxt.jsはバージョン3で後方互換性をかなり切り捨てているため、
それ以前の知見があまり役に立ちません。これが情報収集の難易度を上げています。
さらに公式マニュアルも発展途上なので、
つい最近まで正しい書き方だったのがいつの間にか通用しなくなっていることもザラ。
つまり、情報収集が難しい上に最新情報を探し当てないと正確な開発ができないと。
しかもそれら情報源はほぼほぼ英語です。
英語をスラスラ読める人ならともかく、自分のように翻訳ソフト頼みの場合はさらにキツいです。


いままでは、それでも自分の情報収集能力の低さが原因なんだろうと食いついてきましたが、
ログイン周りの仕様の揺れ具合やプラグイン未対応の惨状でさすがに諦めつつあります。
情報収集の難易度を考えると、
フレームワーク選定は単に新しければ新しいほど良いというわけではなく、
むしろ適度に枯れた技術の方が知見が溜まっていて開発しやすいんでしょうね。


さて、仮にNuxt3から撤退するとなった場合に考えられる選択肢は4つ。
①Nuxt2で開発する、②React/Next.jsで開発する、③フロントはノンフレームワークで開発する、
④それ以外のフレームワークを探す、のいずれかになります。
①は将来性という観点からあまり望ましくないものの、今日まで頑張ってきた経験値を活かせます。
②はまあ安牌かなという感じ。ただ習得難易度は高く、こっちもNuxtと同じでない保証はありません。
その代わり習得すればこれだけでネイティブアプリも作れるので可能性の大きさはダントツです。
③は要するにLaravelのblade機能をフロントの代わりに使うということになります。
ただHTMLベースだとサイトで動的なコンテンツを作りたい場合に障壁になる可能性があります。
④は、突拍子もない候補として「jQueryを使う」という案がなくも無いです。
散々jQueryはオワコンと言われてきたわけですが、逆にここまで枯れていれば情報収集は簡単。
いままでもそれなりに触ってきたので技術的ハードルも低く、
これまでに悩まされてきた未知の技術との戦いが無くなる安心感は正直あります。
ただ、今回みたいなログイン機能をjQuery単独でサクッと実装できるのかと言われると……。


というわけでどれも一長一短で非常に悩ましいです。また振り出しからか……。
まあ、強いて言えばVue.js系列がダメということを身をもって知ったわけですから、
薄々これが最適解だろうと思っていたReactに手を出してみるのが無難なような気がします。
もはや習得難易度よりも情報収集が可能かどうかの方が大事ということが明らかになったわけで。
その観点で言えばリリースされて半月しか経っていないNuxt3よりは
さすがにハードルは若干下がるのではないでしょうか。触ってみないとわからないけど。


今月上旬はなんだかんだでコードとそれなりに格闘してきましたが、
その結果が「Nuxt3は自分には無理かも」ということがわかっただけというのはなんとも世知辛い。
さすがにコードの書き方など多少は共通部分もあり、
試行錯誤はまったくの無駄ではなかったと思いたいところですが……。
ともあれ、前途多難ながら開発は少しずつ進んでいます。