AstroとmicroCMSでポートフォリオサイトを作る
概要
先日Astro + microCMSでポートフォリオサイトを作り直したので、その時のことを振り返りつつ感じたことをまとめます。
リポジトリはこちら
この記事で触れること
- Astroのメリット・デメリット・個人的な好き嫌い
- microCMSを使ってみてどうだったか
触れないこと
- Astroの概要、技術説明
- microCMSの説明
Astro
Astroについては公式ドキュメントを参照してください。
Astroを使った理由
100% Static HTML, No JS という点に惹かれたからです。
これの前のポートフォリオはEleventy.jsを使って開発していましたが、11tyを使っていた理由もJSが動作しない100%静的なHTMLを生成できるツールだったからでした。
（余談ですがEleventy v1.0が正式にリリースされましたね！めでたい！）
これに加えてReactやPreact、Svelteなどのフレームワークを利用できる点も面白そうだなと思っていました。Eleventyのデメリットの1つとしてTS（.tsx）を利用するの難しいことがありますが、Astroであればこの問題点をクリアできそうだなと感じました。
良かったところ
実際にポートフォリオを開発してみて、非常に素晴らしい静的サイトジェネレーターだと感じました。AstroはGatsbyとEleventyの良いとこどりをしたツールではないかと思っていましたが、まさにそのとおりでした。まだアーリーベータですが、必要な機能はおおよそ揃っており十分使えました。
コンポーネント指向で開発できる
Reactを用いて開発できるので仕事でWebアプリケーションを開発するのと同様にコンポーネントを作ることができます。とても便利です。もちろんScoped Styleも使えます。
EleventyではJSXやScoped Styleを利用できない（利用するには工夫が必要）のでこれは非常に便利だと感じました。
JSを動作させることもできる
Astroでは基本的に全てのJSは排除されますが、部分的にJSを動作させることもできます。Reactで開発しているのでインタラクティブなコンポーネントの開発もスムーズにできます。
動的ページ生成
Astroには動的にページを生成する機能もあります。getStaticPathsという関数をエクスポートし、その中で生成するページ一覧をAstro側に伝えます。
詳しくはドキュメントを読んでください。
ページネーションがサポートされている
今回は使いませんでしたが、ページネーションがサポートされているのも良いなと思いました。ブログやウェブメディアでは必須の機能だと思うのでフレームワーク側でサポートされているのは嬉しいです。
悪かったところ
CSSの書き方を統一できない
Astroでは .astro という拡張子のテンプレートを利用できます。これはAstro独自のテンプレートでほぼHTMLと同じシンタックスでコンポーネントを書くことができます。
このコンポーネントではCSSはstyleタグの中に書きます。
一方Reactで開発しているコンポーネントではCSS ModulesやCSS in JSのライブラリを利用することになるはずです。そうすると同じプロジェクトの中で違うCSSの書き方をしなければならず、非常に面倒だと感じました。
CSSが必要な部分は全てReactで開発し.astroではコンポーネントを呼び出して使うだけにすればこの問題は解決できます。
microCMS
国産Headless CMSのmicroCMS
microCMSを選んだ理由
結論：使ってみたかったから
以前のポートフォリオではマークダウンで過去の案件を管理していました。しかし画像の格納が面倒だったりGitHubの容量制限だったりがあり外部ストレージを利用したいなと考えており、今回のリニューアルではHeadless CMSを使いたいなと考えていました。
その中でも国産Headless CMSで最近周囲でも利用してる人が増えているmicroCMSを一度試しててみたかったというのが一番大きな理由です。
感想
microCMSは非常によくできているHeadless CMSだと感じました。もちろん日本語対応だしAPIの結果もすぐ確認できたり管理画面も使いやすいなと思います。シンプルな作りで大抵のプロダクトでは問題なく利用できます。しかしAPIの使いやすさや機能面でいうと、正直少しContentfulに見劣りする部分があるかなと思いました。
タグ機能
その1つがタグ機能です。
microCMSではタグを実現するために少し手間がかかります。
しかしContentfulではTag機能があり、利用しやすいインターフェースになっています。
またContentfulにはAppという機能があり、外部アプリケーション（TypeformやCloudinaryなど）と連携できます。非常に便利です。
料金体系
最近microCMSで料金体系の改定があり、Hobbyプランだとデータ転送量が20GB/月までになり超過したらAPIが停止する仕様になりました。1ヶ月あたりのアクセス数が多いウェブサイトや大きいファイル（画像や動画など）が多いウェブサイトだと個人利用するのは難しいかもしれません。
その上のTeamプランだと4900円/月〜となっていて、個人利用するのは高すぎるかなという印象です。
Contentfulは750GB/月までデータ転送できますしAppでCloudinaryなどの外部ストレージとも連携できるため、データ転送量が大きくなりそうな場合はContentfulの利用をおすすめします。
Asset bandwidth .75TB
まとめ
いかがだったでしょうか。
みなさんもぜひAstroとmicroCMSでウェブサイト作ってみてくださいね。
Discussion