先月末、Gatsby製のSSGお試しサイトだったシン・仮面ライターをNext.js製のポートフォリオサイトとしてリニューアル。Next.jsの開発体験、Page Speed Insightsのパフォーマンスを比較する対象として以前から気になっていたAstro（Astro.js）によるWebサイト制作が気になっていたので、使用感を覚えている間にと取り組んだ今回のリニューアル。
どちらもたった一件ずつ、現行バージョンの開発知見しか持たない私の体験にどれだけの価値があるかは分かりませんが、忘れないうちに言語化を。 「次」を検討する際、何らかの参考になれば幸いという思いで記してみましょう。
「完パケ」の文書ファイルを残したかった
2012年9月にドメインを取得して以来、永らくWordPressサイトとして実装、運営してきた本サイト。私なりのノウハウや知見を発信してみたり、純粋なブログとして個人の感想を垂れ流してみたり、完結せずに中断したままの小説や、掌編の文芸作品を掲載してみたり、Web屋さんとしての制作事例を掲載してみたり。
コンテンツがゴチャついていて見通しが悪いのと、「CMSはパフォーマンスが悪い」というJamstackの言い分にも興味が湧き、この3、4年ほど、WordPressからの脱却、Jamstackへのリプレイスを検討し続けていました。
WordPressは公式っぽいリファレンスから日本語の皆さんが離散していたり、著名なプラグインが開発を停止し始めているなど、「公式も本当は辞めたいのかなぁ」といった予兆も何となく感じていたのと合わせて、データ移行の厄介さも気になっていました。
全文検索はサーバレス構成、Jamstackなサイトより容易ですが、一つの文書ファイルとして完結したまとまりとして保有するには一手間ふた手間、余計な工数がかかってしまう。それでは、文書ファイルを活かした多面展開が難しくなる。
EPUB化したり、一連の文書ファイルとして保管するには、markdownファイルや一つのドキュメントとして完全な状態で保有できる方が良い。そういう観点からの要望もあったので、いつかmarkdownファイルを用いたSSGに切り替えたかった、と思い続けていました。それが今回、ようやく叶ったというお話です。
単純に技術的な部分も気になっていた、WordPress以外の選択肢も増やしたかった、気分を変えて遊んでみたかったという理由だけでも良かったんですが、なぜWordPressから切り替えるのか、なぜ今回のリニューアルに至ったかという背景について、最初に少し補足しておきます。
Reactっぽさが濃いNext.js、HTML、Vanilla JS由来のメリットがありそうなAstro
すでに触れている通り、私はGatsbyからNext.jsを経て、Astroへ辿り着いています。 途中でReactの文化やその変遷にも軽く触れていますが、この順番で触れられたのは非常に良かったと思っています。Gatsbyはエコシステムというか、プラグイン等が豊富でブラックボックスも多い反面、Reactにどっぷり浸からなくても、ある程度は作れてしまう印象でした。 Next.js、App routerが登場してからのバージョンだと、GatsbyよりReactを理解していた方が細かいチューニングができるのかなぁ、という感覚です。Gatsbyと比較すると、ブラックボックスっぽい要素は比較的少なめな分、Reactの影響やVercelの思想に浸からないと本領発揮が難しいのでは？ 個人的には、WebPackの文化があまり得意ではないので、SWCやTurbopack といった要素が出てきても、Viteの方が好みかなぁ、というのが正直なところです。
Astroも土台の部分ではかなりReactっぽいので、ReactやNext.jsの開発経験、開発体験があればその学習を活かして作れるのは非常に良い面だと思います。その一方で、Vanilla JSとしても実装可能な余地があり、純粋なjsx/tsxと異なり、HTMLライクに記述できる度合いも高いので、Emmetのようなコードを省略した入力もフル活用できます。
使用するエディタによるものの、Emmetの恩恵が受けられるのは個人的に非常にありがたく、Pugやその他のHTMLエンジンに対して持っていた不満がAstroでは解決されている印象です。正直、他の機能はいらないからこれだけでも良いレベルで、SSIにも似たシンプルさを昨今のデファクトスタンダードに近いjsx/tsxの構文で使えるのはこの上なくありがたかったです。
React、jsx/tsxの恩恵を目一杯受ける方向へ実装することも可能ですし、そこは最小限に留めてVanilla JSで最後まで実装してReactのデメリットを回避する構築も可能です。Reactの恩恵を目一杯受けて、Vercelの思想、方向性に特に不満がないならNext.js、もうちょっと自由に実装したいならAstroといった考え方でも良い気はします。
型に五月蝿いのはちょっぴり不満
そこまで高度な実装はしない上に、今回の作業では関与するのはほぼ自分だけなので、型に関してはそこまで気にしなくても良かったんですが、Astroのチェックがそこそこ厳しく、エディタによるファイルのハイライトや該当箇所の指摘にはちょっぴりイラッとしてしまいました。
ESlintの条件を設定ファイルから緩めてみてもチェックに引っかかったり、どこをどう書き換えれば良いのかが分かりにくい場面が多々あったので、そこは若干不満が残ります。
jsxで実装せず、最初からtsxでの実装を選んだ方が良いかもしれませんね。
生成AI、公式ドキュメントも、痒いところに手が届かない
Next.jsの方が程よく枯れていて、App Router以前と以後とで使える技術、使えない技術はそれなりにあるものの、頑張って調べればどんな課題も何となく解決できそうな印象ですが、Astroの方はそうでもない感じ？
個人的には非常に良いタイミングで、ChatGPTの4oを無料アカウントでもそれなりに使えるようになったので、生成AIの力も借りつつ実装を進めていましたが、参考とすべき一次リファレンス、公式ドキュメントの例が微妙に痒いところへ手が届かない所までしか書かれておらず、生成AIも微妙にウソのコードを提示するし、公式ドキュメントでも問題解決には至らないしと、思わぬところで難所に遭遇することもしばしばでした。
それでも必死に検索して、できるだけ日付が新しい情報、自分が求めるものと合致するコードを探し出して、根気強くAIにコードを生成してもらったり、程よく掻い摘んで正しそうなコードに直したり、そういう繰り返しを積み重ねて、なんとか自分のやりたいこと、理想の形を実装することが出来ました。
公式ドキュメントには、もうちょっと踏み込んだ例、使いやすい例を提示して欲しいとは思います。
11tyやHugo、hono SSG、Studioのノーコードが次の候補？
ウェイトが100の極細フォントをベースにしたり、detailsとsummaryを使ったレスポンシブなメニューを実装したり、content-visibility:auto とjsを用いたcontain-intrinsic-sizeの動的指定を組み合わせた実装を試してみたり、今回も細かく新しいことを取り入れてみましたが、次の比較対象としては11tyやHugo、honoのSSG、Studioのノーコード辺りでしょうか。
Astroの場合、Astroが割り振るdata-astro-source-fileやdata-astro-source-locが気になるし、その辺りが入るAstroと、11tyやHugo、hono SSGがどうなるか。Studioの方は開発体験がどうなのか。最終的な出力がPage Speed Insightsとしてどんなスコアになるのか。その辺りも、また時間ができたら試してみようと思います。
本腰を入れて発信する環境が整った
いつかJamstackに置き換えたいと思いながら、延々とWordPressサイトのまま放置してしまい、ちゃんと発信する気にならない時間が続いてしまいましたが、これでようやく環境が整いました。
何をやるにしても気になっていた大きな気がかりも解消できましたし、WordPressを使わない提案もできるようになりました。WordPressのREST APIとフロントのJamstackという構成も実装できるようになると思いますし、Google Driveへのmarkdownファイルアップロードによる多ユーザー参加型なメディアサイト実装等もできるようになると思います。Googleフォームを埋め込んだメールフォームの実装も可能でしょうし、色々と提案できる幅が広がりそうです。
ただ、まずは情報発信、共同事業のコンテンツマーケティングでは中々発信しにくい個人の思想強めのコンテンツや、中断したままの文芸系コンテンツ、その他、markdownファイルで完結している文書データとしての蓄積も可能となるので、しばらく後回しにしていた仮面ライターとしての情報発信を徐々に本格化させようと思います。
今後の情報発信をお見逃しなく！
これから個人の情報発信を強めていきますので、少しでも興味のある方は「お気に入り」登録やブックマーク、ホーム画面に追加、各種SNSのフォローなど、発信を見逃さないようにお付き合いいただけますと幸いです。
仮面ライターを今後とも、よろしくお願いいたします。