💨

AstroとmicroCMSでポートフォリオサイトを作る

3 min read

概要

先日Astro + microCMSでポートフォリオサイトを作り直したので、その時のことを振り返りつつ感じたことをまとめます。

https://twitter.com/takanoripe/status/1477962561077530625?s=20

リポジトリはこちら

https://github.com/takanorip/takanorip.com.v4

この記事で触れること

  • Astroのメリット・デメリット・個人的な好き嫌い
  • microCMSを使ってみてどうだったか

触れないこと

  • Astroの概要、技術説明
  • microCMSの説明

Astro

Astroについては公式ドキュメントを参照してください。

https://docs.astro.build/ja/getting-started/

Astroを使った理由

100% Static HTML, No JS という点に惹かれたからです。

https://astro.build/blog/introducing-astro/

これの前のポートフォリオはEleventy.jsを使って開発していましたが、11tyを使っていた理由もJSが動作しない100%静的なHTMLを生成できるツールだったからでした。
(余談ですがEleventy v1.0が正式にリリースされましたね!めでたい!)

https://www.11ty.dev/

これに加えてReactやPreact、Svelteなどのフレームワークを利用できる点も面白そうだなと思っていました。Eleventyのデメリットの1つとしてTS(.tsx)を利用するの難しいことがありますが、Astroであればこの問題点をクリアできそうだなと感じました。

良かったところ

実際にポートフォリオを開発してみて、非常に素晴らしい静的サイトジェネレーターだと感じました。AstroはGatsbyとEleventyの良いとこどりをしたツールではないかと思っていましたが、まさにそのとおりでした。まだアーリーベータですが、必要な機能はおおよそ揃っており十分使えました。

コンポーネント指向で開発できる

Reactを用いて開発できるので仕事でWebアプリケーションを開発するのと同様にコンポーネントを作ることができます。とても便利です。もちろんScoped Styleも使えます。

EleventyではJSXやScoped Styleを利用できない(利用するには工夫が必要)のでこれは非常に便利だと感じました。

JSを動作させることもできる

Astroでは基本的に全てのJSは排除されますが、部分的にJSを動作させることもできます。Reactで開発しているのでインタラクティブなコンポーネントの開発もスムーズにできます。

https://docs.astro.build/en/core-concepts/component-hydration/

動的ページ生成

Astroには動的にページを生成する機能もあります。getStaticPathsという関数をエクスポートし、その中で生成するページ一覧をAstro側に伝えます。

詳しくはドキュメントを読んでください。

https://docs.astro.build/en/core-concepts/routing/

ページネーションがサポートされている

今回は使いませんでしたが、ページネーションがサポートされているのも良いなと思いました。ブログやウェブメディアでは必須の機能だと思うのでフレームワーク側でサポートされているのは嬉しいです。

https://docs.astro.build/en/guides/pagination/

悪かったところ

CSSの書き方を統一できない

Astroでは .astro という拡張子のテンプレートを利用できます。これはAstro独自のテンプレートでほぼHTMLと同じシンタックスでコンポーネントを書くことができます。
このコンポーネントではCSSはstyleタグの中に書きます。

https://docs.astro.build/en/core-concepts/astro-components/

一方Reactで開発しているコンポーネントではCSS ModulesやCSS in JSのライブラリを利用することになるはずです。そうすると同じプロジェクトの中で違うCSSの書き方をしなければならず、非常に面倒だと感じました。

CSSが必要な部分は全てReactで開発し.astroではコンポーネントを呼び出して使うだけにすればこの問題は解決できます。

microCMS

国産Headless CMSのmicroCMS

https://microcms.io/

microCMSを選んだ理由

結論:使ってみたかったから

以前のポートフォリオではマークダウンで過去の案件を管理していました。しかし画像の格納が面倒だったりGitHubの容量制限だったりがあり外部ストレージを利用したいなと考えており、今回のリニューアルではHeadless CMSを使いたいなと考えていました。
その中でも国産Headless CMSで最近周囲でも利用してる人が増えているmicroCMSを一度試しててみたかったというのが一番大きな理由です。

感想

microCMSは非常によくできているHeadless CMSだと感じました。もちろん日本語対応だしAPIの結果もすぐ確認できたり管理画面も使いやすいなと思います。シンプルな作りで大抵のプロダクトでは問題なく利用できます。しかしAPIの使いやすさや機能面でいうと、正直少しContentfulに見劣りする部分があるかなと思いました。

タグ機能

その1つがタグ機能です。
microCMSではタグを実現するために少し手間がかかります。
しかしContentfulではTag機能があり、利用しやすいインターフェースになっています。

http://help.microcms.io/ja/knowledge/categories-and-tabs
https://www.contentful.com/help/tags/

またContentfulにはAppという機能があり、外部アプリケーション(TypeformやCloudinaryなど)と連携できます。非常に便利です。

https://www.contentful.com/help/apps-at-contentful/

料金体系

最近microCMSで料金体系の改定があり、Hobbyプランだとデータ転送量が20GB/月までになり超過したらAPIが停止する仕様になりました。1ヶ月あたりのアクセス数が多いウェブサイトや大きいファイル(画像や動画など)が多いウェブサイトだと個人利用するのは難しいかもしれません。
その上のTeamプランだと4900円/月〜となっていて、個人利用するのは高すぎるかなという印象です。

https://microcms.io/new-pricing

Contentfulは750GB/月までデータ転送できますしAppでCloudinaryなどの外部ストレージとも連携できるため、データ転送量が大きくなりそうな場合はContentfulの利用をおすすめします。

https://www.contentful.com/pricing/

Asset bandwidth .75TB

まとめ

いかがだったでしょうか。
みなさんもぜひAstroとmicroCMSでウェブサイト作ってみてくださいね。

GitHubで編集を提案

Discussion

ログインするとコメントできます