サイトをWordPressからAstroへ移行
サイトのコンテンツ管理システムとしてWordPressを使用していましたが、 Astro×NotionAPIを使った自作コンテンツ管理システムに移行しました。
というわけで、 WordPressを採用した経緯から、 今回、システム移行した経緯までを以下に記載。
WordPressを使用していたワケ
2年半前、個人事業主として独立するにあたり、 仕事用のポートフォリオサイトを用意しようと思い、このサイトを開設したわけですが、 その際に、記事を何で管理しようかと検討し。
以前から運営しているプライベート用サイトは、 トップページをReactで開発して、 そこに、はてなブログへのリンクを貼る形で、 記事的なものは管理していました。
その運用で特に問題なかったので、 新しく作る仕事用サイトも、リンクで連携させれば、 トップページと記事を管理するシステムは別システムでいいと考えました。 ただ、仕事用サイトなので、広告は出ない方がいいな、と。
私自身は、記事コンテンツ管理システムの開発にはあまり興味がなく、 どうせ先達が色々と開発してくれているのだから、 それを利用させてもらおう、 と考えて、試しにWordPressを触ってみた。
WordPressは10年くらい前に、 当時所属していた会社の社内サイトを構築するために、ちょっと使ってみた以来だったのだけど、 触ってみて、10年の間にだいぶ進化したなぁ、と。 プラグインを活用すれば、やりたいことは大体何でも実現できそうだし、 デザインにこだわりがないなら、 わざわざ自作してレスポンシブ対応に四苦八苦するよりも、 これを使えば十分そう。 と結論して、WordPressを採用することにしました。
WordPressを使用して良かったこと
WordPressの使い方やできることを知れたことが、 やっぱり良かったです。
10年前は、テンプレートをゼロから作るのは、そんなに大変じゃなかったのに、 今回試しにゼロからテンプレートを作ってみようとしたら、 「これは大変だ……ゼロからテンプレート作るくらいなら、WordPressを採用しない方がいい…」 と学習したり、 プラグインの充実っぷりに驚いたり。
あと、開業する前後から、 「ホームページ作ろうと思うんだけど、何のサービスを使えばいいと思う？」 と、非エンジニアの知人たちから相談を受けるようになったのですが、 その際に、やっぱりWordPressの具体的な知識があると、 アドバイスできる幅が広がる。
ちなみに、知人たちの相談に乗っていると、 WordPress以外にも、JimdoとかペライチとかSquareとか、 色々なホームページ作成サービスのことを知れるのですが、 それも良いです。
私自身は、インターネット黎明期から、ホームページは自作するものだったので、 ホームページ作成サービスのことを知る機会などなかったのだけど、 知人の相談に乗りながら、色々なホームページ作成サービスを触ってみると、 いやぁ、本当によくできてるなぁ、と感心する。 現在は、こういったサービスを活用すれば、 非エンジニアでも素敵なホームページが作れちゃうんだな、と。
エンジニアの技術スキル向上の観点からは、 自分のサイトを自作するのは良いことだけど、 提案スキルやデザインスキル向上の観点からは、 多くの人に使われているシステムをあれこれ触ってみるのが、 とても大切だなと思います。
既に、とてもイケているシステムが世の中に存在しているのに、 その存在を知らずに、 「自分、開発者なんで作りますよ！」 と言って、多額の開発費をかけてゼロから自作して顧客に提供するのは、 プロとしては違うだろうな、と思うのです。
まぁ、そんなわけで、 WordPressをガシガシ触って、メリット・デメリットを知れたことは良かったです。
WordPressをやめることにしたワケ
スタイルテンプレートやCSSと悪戦苦闘するのに疲れた
デザインにそこまでこだわりはないんですが、 それでも既存のスタイルをカスタマイズしたい局面はあって、 その時に、CSSの管理が大変でね…。
「VueやReactだったら瞬殺のことに、なんで私はこんなに時間をかけているんだ！？」 と思わずにいられない局面が多々ありまして、 コンポーネントベースの仕組みの上で自分で実装する方がストレスなさそうだなと思うようになりました。
ページ読み込み速度改善に限界を感じた
色々試行錯誤してみたのだけど、 どうにもページの読み込みがもっさりするのを解消できず。
私はWebデザイナーではないので、デザインがもっさりしていることについては、 「ソレガ、ナニカ？」 と開き直れるのだけど、 エンジニアなので、速度がもっさりしていることについては、やっぱり恥ずかしい。
Reactで作ったトップページの表示速度は問題ないし、
同じサーバーで動かしている動的コンテンツを表示する別システムの表示速度もそこまで遅くないので、
読み込み速度が遅い原因は、 サーバーのスペックや、サービスを色々動かしていることではなく、 WordPressにあるのだろうと考えました。
Astro×NotionAPIで自作することにしたワケ
WordPressから別のシステムに乗り換えることを決めた時点で、 Notionをコンテンツ管理システムとして使うのがいいかな、 と思いました。
以前からNotionをかなり愛用していて、 NotionAPIも色々活用させてもらっているので、 NotionAPIを介したNotionによるコンテンツ管理システムを構築するのは そんなに難しくないし、 運用もしやすいだろう、という目算がありました。
ゼロから自分で作ってもいいけど、 NotionAPI使ってホームページ作成するOSSが既にいくつかあるから、 そのうちのどれかを使わせてもらうのがいいかも、 と思って、いくつか探してみたところで、 astro-notion-blogというものを発見。
Astroというフレームワークは、この時、初めて知ったのですが、 性能面で優れたフレームワークということで、今回の目的に照らしてもなかなか良さげ。 新しい技術を知る良い機会にもなるので、 astro-notion-blogを利用して、デザインまわりを自分用にカスタマイズする形にしよう。 と決めました。
ただ、astro-notion-blogをGitHubからcloneしてきて、動作確認して、 さぁデザインをカスタマイズしよう！ と始めたところで、 「これは、カスタマイズするよりも、これを参考にしながら、ゼロから自分で作った方が早くないか…？」 と思い。
そうして、Astroについて調べていくと、 なんと、「Astroの中にReactコンポーネントを埋め込める」という情報を発見。
現在のサイトのトップページはReactで作っているのですが、これをAstroの中に包含することで、 トップページとコンテンツページを１つのシステムとして統合できるじゃないか！！ と、おぉぉ！となりました。
そういうわけで、Astroフレームワークを使って、 ゼロから作ることにした経緯です。
Astroで作ってみて
Astroは、公式ドキュメントも丁寧で、 新規プロジェクト作成方法も簡単で、 プロジェクトテンプレートを用いれば、あっという間に、サイトの雛形が出来上がるので、 導入はスムーズでした。
「ReactやVueのコンポーネントも含めることができる」 というのも、大きかったです。 Astroでの実現方法がわからなくなったら、Reactで書いて突っ込む、ということができるので、 「Reactだったら、すぐに書けるのに…！」 みたいなストレスがなく済みました。
もしかしたら、この先、 「ReactやVueで作った小さなコンポーネントを、色々組み合わせてサイトを作る」 みたいなサイト構築方法が一般的になっていくのかもな、 と思いました。
自分用にカスタマイズするにあたって、所々でつまづきはしたので、何のかんので完成まで時間はかかったんですが、 WordPressでつまづくのと、 完全自作サイトでつまづくのでは、 ストレスが全く違うな、ということも実感。
WordPressでつまづいている時って、 その問題が解決してもしなくても、 得られる技術知識がほとんどないので、 すごく不毛な時間が費やされている感じがしてストレスだけど、 Astroで自作していると、 つまづいても、必ず何らかの技術知識が得られるので、 不毛感がない。
あと、やっぱり、
「完全に自分の好きなように作れる」
というのは大きい。
というわけで、
開発者が自分のサイトを作るなら、やっぱり自作が一番かもな、と思った今日この頃です。