「Gatsby x TypeScript」でブログを作りました (4. まとめ)

Gatsbyでブログを作った人の最初の記事と言えば、だいたい「Gatsbyでブログ作りましたー」でしょう。なので許してください。

「Gatsby x TypeScript」でブログを作る時に役に立った情報などを自分用のメモというか棚卸しというかまとめていきたいと思います。

このブログ一見シンプルに見えて、ワードプレスで作られたブログと引けを取らないくらい実はいろんな機能が盛り込まれてます。

  • Disqusによるブログコメント投稿機能
  • Algoliaによる全文検索機能
  • Mailgunによる自動返信メール(お問い合わせ時)
  • Google reCAPTCHA v3 (サーバーサイドバリデーションもあり)
  • Google Analytics
  • Iframelyによる記事へのiframeの埋め込み機能
  • JSONLDを使った構造化マークアップ(SEO対策)

全4回に分けて、gatsbyのプラグインで一瞬で実装が終わったものもあればそうでないものもあるので実装する上で参考になったサイトと要点を軽くまとめなながら紹介できたらいいかと思います。

「Gatsbyでのブログ作成手順」は他のブログにあるので手順に関しては紹介しません。

この投稿では 4.まとめ について書こうと思います。

ブログ作成にかかった時間

ざっと1ヶ月半くらいです。

各工程でブログ作成にかかった時間をまとめておきます。
一日4、5時間、多い日で8〜10時間は開発してました。

工程 詳細 開始日時 終了日時 時間・日数
トップページ作成 PostCard・PostListを作るまでの時間 2020-04-25 2020-04-26 1日
サイドバー作成 ProfileCard・RatestPostList・CategoryList・TagListを作るまでの時間 2020-04-26 2020-04-28 2日
ヘッダー・フッター作成 2020-04-29 2020-04-29 1日
カテゴリーページ・カテゴリーボード作成 2020-05-03 2020-05-03 1日
検索機能実装 現在はAlgoliaに置き換えたが、lunrを使って検索機能を作成した 2020-05-04 2020-05-05 2日
サブカテゴリーページ・サブカテゴリーボード作成 2020-05-06 2020-05-06 1日
ページネーション作成 2020-05-07 2020-05-07 1日
投稿画面作成 BlogPostを作るまでの時間
- typographyの適用
- コードのシンタックスハイライトの設定
- TOCの作成
- SNSShareボタンの作成
2020-05-08 2020-05-11 4日
styled-componentsの使用をやめる 2020-05-12 2020-05-13 1日
投稿画面作成 PrevNext・Breadcrumbsを作るまでの時間 2020-05-14 2020-05-15 1日
サイドバー(ProfileMenuボタン)の作成 2020-05-16 2020-05-16 1日
GoTopの作成 2020-05-17 2020-05-17 1日
お問い合わせ画面作成 2020-05-19 2020-05-20 2日
lunrからAlgoliaに置き換え 2020-05-22 2020-05-22 1日
Disqusの設定 2020-05-23 2020-05-23 1日
プライバシーポリシー画面作成 2020-05-24 2020-05-24 1日
SEO対策 2020-05-25 2020-05-26 2日
Google reCAPTCHAの導入 Google Analyticsも一緒に設定した 2020-05-26 2020-05-27 2日
404画面作成 2020-05-27 2020-05-27 1日
投稿画面へのIframelyの追加 2020-05-28 2020-05-28 数時間
レスポンシブル対応 2020-05-28 2020-06-02 5日
投稿画面へのPersonWhoWroteの追加 2020-06-03 2020-06-03 数時間
約32日

通勤時間(合計約2時間)が節約できたり、コロナで自粛しなくちゃいけなくてちょうど時間が取れました。 自分の自粛生活はかなり充実したものになりました。

とりあえずブログとして機能するレベルにはできたものの
この表といいもうちょっとデザインにこだわっていく必要がありますね。

作ったコンポーネントの総数

種類 総数
atoms 10
molecles 18
organisms 12

そんなに多くないですね。普通でしょうか?

作ったページ

  • トップページ
  • カテゴリーページ
  • サブカテゴリーページ
  • タグページ
  • 投稿ページ
  • お問い合わせフォーム
  • プライバシーポリシー
  • 404ページ

可もなく不可もなくといった感じでしょうか

ブログを作って身についた知識

  • Gatsbyの使い方

    • プラグインの作り方
  • GraphQLの書き方

    • フラグメントの使い方
  • Reactの知識

    • React.fragmentの使い方
    • HOCの使い方・作り方
    • React.hooksの使い方(useState・useEffect・useCallback・useRefなど)
    • React.FCコンポーネントの作り方
    • 簡単なライブラリーの作り方(GoTopはライブラリー化しようかと思ってます。)
  • TypeScriptの知識(ちょっとだけ)

    • 相変わらずジェネリクスとかよくわからない。(TとかKとか使ってやるやつ)
  • Mailgunを使った自動メール送信機能の作り方
  • Algoliaの使い方
  • Google reCAPTCHA(v3)の実装の仕方
  • Netlify Functionsの使い方
  • JSONLDを使った構造化マークアップの仕方
  • レスポンシブルデザインのやり方(まだまだ下手くそだけど)
  • CSSモジュールの作り方(module.scss)
  • 便利なライブラリーの知識

    • classnames
    • styled-component
    • lodash.throttle

まとめ

Gatsby自体はエンジニアになった3年前から名前だけ知っていたのですが、なんか難しそうだという勝手なイメージでスルーしてました。ブログを作るものとは知ってましたが興味が惹かれなかった。当時はgemとかを作るのに夢中でした。 しかし、3年もたてば成長もするんですね。意外とつまづかないでスムーズにできました。

「Gatsby x TypeScript」で作って一番難しいと感じたことはやっぱり、「デザイン」ですね。結局、cssが一番難しいと思いました。このブログを作って、前よりはレスポンシブルデザインへの苦手意識消えたかもしれません。

Gatsbyのエコシステムは整ってます。ぜひGatsbyを使ってブログを作ってみてください。力つきますよ。

今後は週1くらいでブログを更新していけたらいいかなって思います。 このブログが誰かの役にたてば幸いです。🙇‍♂️

以上です。

yukihirop

この記事を書いた人

フロントエンド兼バックエンドなWEBエンジニアです。 既存の考え方に囚われずに自由にツールを作るのが好きです。

いつかBioに「Creator of ...」と書けるようなプログラマを目指している人のブログ

関連記事