「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.まとめ について書こうと思います。
ブログ作成にかかった時間
ざっと１ヶ月半くらいです。
各工程でブログ作成にかかった時間をまとめておきます。
一日4、５時間、多い日で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とかを作るのに夢中でした。 しかし、３年もたてば成長もするんですね。意外とつまづかないでスムーズにできました。
「Gatsby x TypeScript」で作って一番難しいと感じたことはやっぱり、「デザイン」ですね。結局、cssが一番難しいと思いました。このブログを作って、前よりはレスポンシブルデザインへの苦手意識消えたかもしれません。
Gatsbyのエコシステムは整ってます。ぜひGatsbyを使ってブログを作ってみてください。力つきますよ。
今後は週１くらいでブログを更新していけたらいいかなって思います。 このブログが誰かの役にたてば幸いです。🙇♂️
以上です。
