０．はじめに

1. 自己紹介と今日の見通し
2. いいよっていう話ばかりしますが、もちろんデメリット、うまくいかないところもありますので、ご了承を。
3. notionの共有
4. 目次
   1. microCMS（ヘッドレスCMS）がいいよという話
   2. Gatsby（静的サイトジェネレータ）がいいよという話
   3. Gatsby-microCMSブログ構築デモと解説
   4. まとめ

１．microCMS（ヘッドレスCMS）がいいよという話

1. ヘッドレスCMSとは？
   • ブログサイトを例に考えてみましょう。
   • 記事のページを１つずつHTMLとCSSで書くのは大変、記事を更新、追加するのにコードをいじるのが大変
   • →　CMSコンテンツ・マネジメントシステム
     • 記事を書いて登録すれば、WEBで表示ができるいろいろなブログサービスもCMSの一つ
     • CMSとはなにか？→スライド
     • 見えている部分（フロントエンド・頭）と見えていないデータベース・管理部分（バックエンド・体）があります
     • 代表的なCMS　WordPress　表示部分をテーマ等を使ってカスタマイズできる。データベース部分もある程度カスタマイズ可能
   • CMSのうち、データベース＋管理機能の部分をあつかうツール・サービスがヘッドレスCMS　←→　カップルドCMS
     • →ヘッドレスだから相棒（レンダリング（表示）を担うツール）が必要
     • 今回はGatsby
2. ヘッドレスだと何がいい？
   • 好きなようにデータベースの構成を作れる
     1. ヘッドレスCMSではGUIでデータベースからテーブルを作成することができるので、バックエンドでプログラミングするのに近い自由度でデータベースを作れます。
   • 開発者とコンテンツ管理者の分業ができる
     • 例えば新規立ち上げのときでも、ヘッドレスCMSでコンテンツを作りつつ、フロントエンドの構築作業ができて、効率的な開発が可能
   • フロントで好きな技術を扱える
     • エンジニアの得意な技術、コンテンツや状況に応じた技術を選択できる
     • 学習したい技術を使って練習も
   • 引っ越しが簡単・フロントの技術変更が容易
     • 今回、そんの構築したものに変更を加えてあらたな機能追加した場合
     • アップデートしたら、新たにプロジェクトを起こして、連携の設定をすればOK
   • １つのデータソースから複数のところ（ウェブアプリ、ネイティブアプリ・・・）への展開が可能
     • 技術さえあれば、1つのデータをWEBアプリで、ネイティブアプリで使うことができる。
   • コンテンツ更新が簡単に
     1. コードをさわらなくてもいい
   • 一部分だけをヘッドレスCMSで管理できる
     1. 例えば、LPで３つくらい並列で「ベネフィット」とか表示するときも、その部分をヘッドレスCMSで管理できたりもします。
     2. 自分のポートフォリオ部分
     3. microCMSだとくりかえしフィールドなどを使うとかなり便利そう
   • SSGで展開することで早くて、安全で、強力なサイトに
3. ヘッドレスCMSいろいろ
   • Contentful
   • Strapi
   • DatoCMS
4. microCMSとは

   • 日本製（ヘッドレスCMSでは唯一？）

     英語のヘッドレスCMSばかりの中でUIが日本語

   • 日本語のサポート、手厚い。

     • 画像の扱いで困ったとき、日本語のチャットで問い合わせできるというのはありがたかった。→　すぐ返答いただけました。

   • どんどん開発が進んでいます。

     

   • UI/UXがわかりやすい

   • カスタムフィールド、繰り返しフィールド→いろいろなサイト構築に

     • そんのポートフォリオサイトのポートフォリオの部分
     • サイトのキャンペーン表示部分またはLPのコンテンツ部分に導入することで、ノーコードでお店の人が更新

   • 個人ブログや個人開発レベルなら無料で公開まで

   • microCMSのユースケースから 企業のDX推進にもよく用いられるようになっている

     • https://blog.microcms.io/usecase-acall
       1. アップデートのメンテナンスをしなくていい
     • https://blog.microcms.io/usecase-interspace
       1. 記事修正しやすい
     • https://blog.microcms.io/usecase-beatfit
       1. 本来ならバックエンドでデータベースや管理画面を構築するところをmicroCMSで実現　→　工数減

２．Gatsby（静的サイトジェネレータ）がいいよという話

1. Gatsbyとは？
2. SSG（静的サイトジェネレータ）
   • 早い・安全・強い
3. 豊富なプラグイン
   • プラグインでいろいろな機能を追加できる
     • 画像処理
     • SEO設定
   • いろいろスターターがあります
   • テーマを使うと、アップデートにも対応！
     • WordPressのテーマアップデートみたいな感じ
4. Reactベース
   • jsxファイル→htmlに似ている
   • コンバーターもあるので、テンプレート、自分で書いたhtmlを変換できる
     • https://transform.tools/html-to-jsx
   • cssの当て方もいろいろいい感じのものがある
     • scss,sassでもOK
     • CSSinJS
     • 今回採用
5. graphQL

※　ここでこのnotionを共有する

３．Gatsby-microCMSブログ構築デモと解説

１．Gatsbyプロジェクトの生成