BETA

【JAMstack】Gatsby.js + microCMS + Netlifyで読んだ本のメモを記録するアプリを作った

投稿日:2020-06-08
最終更新:2020-06-07

先日、自分が読んだ本のメモを記録するためのアプリを作りました。
https://flamboyant-varahamihira-2505ee.netlify.app/

技術構成

Gatsby.js

https://www.gatsbyjs.org/
Reactベースのフレームワークです。
これで、マークアップ、API連携、取得データの表示、静的ビルドなど、フロントエンドの実装をしています。

microCMS

https://microcms.io/
日本製のヘッドレスCMSです。
これでコンテンツの管理(追加、編集、削除)、API定義をしています。

日本語の情報が豊富なのと、管理画面のUIがシンプルで分かりやすいです。
他のヘッドレスCMSは使ったことはないですが、今のところこれで十分。
オススメです。

Netlify

静的サイトのホスティングサービス。
Githubと連携して、masterブランチにコードがプッシュされたら、自動的にビルドコマンドを実行してデプロイされるようにしています。
独自ドメインを使わなければ、無料で使える。
こちらもオススメです。

Figma

(技術構成ではありませんが)一応、FigmaでUIデザインをしてから作り始めました。
というか、「Figmaを使ったUIデザインの練習をしたい」というのが、そもそも作り始めたキッカケ。

参考にした情報

microCMSの公式ドキュメント
ドキュメントが分かりやすく、microCMSに関しては、これさえ見ればとりあえず困ることは無いと思います。
https://microcms.io/docs/

microCMSとGatsbyでサイト制作する方法をまとめた記事
こちらの記事はめっちゃ参考になりました!
Gatsbyを初めて使う、よく分からない状態だったので、非常に助かりましたm(__)m
https://note.com/youheyhey0505/n/n0593d5478a10

Netlifyの使い方
ググればたくさん情報出てくるし、めっちゃ簡単なのでこちらは困ることは無いと思います。
https://qiita.com/sugo/items/2ee64887d682b0dae635

作ってみた所感

microCMSとNetlifyに関しては、特に支障なく使えたのですが、
Gatsbyに関しては調べないと理解しにくい部分がある上に、日本語の情報が少ないのでちょっと手こずりました。
まぁ、英語が読めれば公式ドキュメントを読んで何とかなりますが。

自分は、ReactとGraphQLを普段から触っているので、特に支障なくサクッと作ることができましたが、そのあたりのベースの知識が無いと、実装は結構辛いんじゃないかなと思いました。

逆に、ReactとGraphQLをある程度知っていれば、これくらいのサイトであれば多分1日あれば作れると思います。

技術ブログをはじめよう Qrunch(クランチ)は、プログラマの技術アプトプットに特化したブログサービスです
駆け出しエンジニアからエキスパートまで全ての方々のアウトプットを歓迎しております!
or 外部アカウントで 登録 / ログイン する
クランチについてもっと詳しく

この記事が掲載されているブログ

Webサービス開発に挑む フロントエンドエンジニアの技術ブログ

よく一緒に読まれる記事

0件のコメント

ブログ開設 or ログイン してコメントを送ってみよう