はじめに

中野区在住の中野です。

Gatsby.jsでブログを作り直して3ヶ月が経ったので、振り返りながら当時考えていた思想と運用してみて感じたギャップをメモとして残しておきたいと思います。

ブログ作り直したい病を発症してから3ヶ月が経ちました

  • 前提
  • 思想の差分
  • まとめ

前提

  • 下記のディレクトリ構造を前提にしています。

ディレクトリ構造

  • 2022/01/08時点の構成(比較に不要なものは除いています)
.
├── components
│   └── post
├── gatsby-plugin-theme-ui
│   └── index.js
├── gatsby-theme-blog
│   └── components
│   ├── bio-content.js
│   ├── bio.js
│   ├── header.js
│   ├── home-footer.js
│   ├── layout.js
│   ├── post-date.js
│   ├── post-footer.js
│   ├── post-hero.js
│   ├── post-link.js
│   ├── post-list.js
│   ├── post-title.js
│   ├── post.js
│   ├── posts.js
│   └── seo.js
├── pages
│   └── 404.js
└── styles
   └── tailwind.css
  • 2022/03/07時点の構成(比較に不要なものは除いています)
.
├── content
│   ├── assets
│   └── posts
└── src
   ├── components
   │   ├── post
   │   ├── posts
   │   └── universal
   ├── gatsby-plugin-theme-ui
   │   └── index.js
   ├── gatsby-theme-blog
   │   └── components
   │   ├── post.js
   │   └── posts.js
   ├── gatsby-theme-blog-core
   │   └── templates
   │   ├── post-query.js
   │   └── posts-query.js
   ├── pages
   │   └── 404.js
   ├── styles
   │   └── tailwind.css
   └── templates
   ├── Category.js
   └── Tag.js

基本的に大きな変更はありません。 変わったのはシャドーイングしていたコンポーネントたちが消えているのとcomponentsディレクトリに複数のディレクトリが増えている点です。 今回は消えたシャドーイングのcomponentたちが何故消えて、componentsディレクトリに増えたディレクトリたちの用途について説明していきます。

消えたシャドーイングのcomponentたち

  • blogのテーマで一番重要なのは post, posts
  • 重要な理由は、この2つだけがクエリをコアでもっている
  • コアのクエリをカスタマイズすることで独自実装を回避できる
  • それ以外はただの装飾のため必ずしもシャドーイングする必要がない
  • ブログやサイトにあわせて不要な部分はシャドーイングせずに自前で作成が推奨

components配下のディレクトリの役目

  • シャドーイングのcomponentと同じ名前のディレクトリ(post, posts)は、そのページ固有のcomponentを配置
  • それ以外は名前のままの役割をもつ(例: universal は文字通りブログ全体で共通して使うものなど)

思想の差分

  • 3ヶ月前に定義した思想と今の思想の差分を書き出してみました

シャドーイングの活用

以前に思想

  • テーマごとのディレクトリ構成があるので基本的にそれをそのまま使う。
  • シャドーイングの中身を src/components へ切り出します
  • 必要なcomponentを src/components からインポートして使う
  • シャドーイングしたcomponentに機能は追加しない
  • シャドーイングしたcomponentはレイアウトのみ編集する

現在の思想

  • シャドーイングするものは最低限必要なものだけ( post, posts, +α )
  • post, posts はページのレイアウトのみを関心事とする
  • 上記以外の関心事はそれぞれ別のところで吸収するようにする

シャドーイングに関する考え方が3ヶ月で大きく変わった場所です。

元々の構成が扱いづらかったので不要な部分はシャドーイングせずに自分で作ったほうがよさそうです。

個人的にシャドーイングしておきたいと思ったのは post, posts の2つです。

post, postsgatsby-theme-blog-core にクエリがあるので、カスタマイズしたければここを編集するだけです。

根幹の部分を大きく変えずに済むのでシャドーイングするべきだと思います。

src/componentsの活用

以前の思想

  • 各シャドーイングの機能をcomponentとして保持
  • 機能の追加及び拡張はこのcomponentsの中のみで行う
  • コンテキストが明確なコンポーネントは集約する

現在の思想

  • 機能の追加及び拡張はこのcomponentsの中のみで行う
  • コンテキストが明確なコンポーネントは集約する

将来的に Atomic Design の考え方を取り入れようかとおもっています。

そうなった場合、src/components には大きな変更が入ることになります。

src/componentsの今後

以前の思想

  • デザインとロジックを分離させたい
  • useStaticQuery 便利だけどロジックとクエリが密結合してるので分離させたい

現在の思想

  • デザインとロジックを無理に分離させなくていい
  • useStaticQuery 便利だけどロジックとクエリが密結合していていい

見事に真逆になってしまいました。

デザインとロジックを分けるメリットが今の規模では感じれなかったです。

機能とデザインが固有なので分ける必要がないと思い分離させていません。

useStaticQuery はクエリだけを分離させることができなかったはずです。

まとめ

思想って大事

思想を定義して3ヶ月間試行錯誤した結果、変わった場所と変わらなかった場所がありました。 当初はこれで完璧なのでは?と思っていましたが技術に対する理解度が浅かったり、 仕様の把握などができてない部分が悪手になっていました。 しかし、思想を事前に決めていたからこそ変化させるのが容易だったというのもあります。

postとpostsが本命

blogのテーマを使う上で重要なのはシャドーイングした postposts だと思っています。 ここのクエリ部分をカスタマイズすることで自作するよりもはるかに低コストで横展開できる部分かと思います。 また src/components も シャドーイングしたテーマがimportして使う(それ以外の用途は認めない)をしているため 次リプレイスするときも再利用性があるようにできているように感じています。

さいごに

3ヶ月で見えてきて変えれた点もあれば実はまだ見えてない点もあると思います。

将来的にはまた何かこうするべきだったと思うこともあると思いますが、引き続き楽しく遊んでみようと思います。

\ Share /

全人類同時接続数No.1!バトルロイヤルゲームを生き残れ!

中野区在住の中野です。大阪生まれ大阪育ちですが就職のタイミングで上京しました。食いっぱぐれないようにすることをモットーに生存戦略を常に考えている元ネトゲ廃人現フルリモートwebエンジニア。Twitterでメンターとして駆け出しエンジニアたちをサポートしています。最近の関心事はDDDとScrum。いずれ起業することを考えてプロダクトを作成中。このブログでは生存戦略を考える上で試行錯誤した内容を記録していきます。