herohoroブログ

大規模リリースでも改造箇所へ適合させる工夫・考え方_まとめ



🔄   2022-12-01

easy-notion-blogで大きな改善がなされました。

アルパカ先生の解説記事「easy-notion-blog v0.4のアップデート内容紹介」によると

  • component化して繰り返しコード削減
  • componentファイルに対応したCSSファイルの仕分け

つまり、CSSをいじりにいじりまくってきた私にとっては大ピンチなわけです(´;ω;`)ブワッ

▼ 振り返るとこんな感じ

すべきことを整理
  1. CSSに関するcommit前の部分をcherry pick
  2. CSSに関するコードはcomponentも含めて調整
  3. CSSに関するcommit後はCSSとの関連を確認しつつcherry pick
  4. まとめ

CSSに関するcommit前の部分をcherry pick

本家リポジトリにcommitの追加があると自動でNotionの方に反映させているデータベースをもとに着手してしまってから気づいた。

原因はこれ!!!

image block

古いcommitから同期せずに進めてから気づく。。。。

sortして

image block

古いcommitから同期してみると・・・

image block

遅かったか〜〜〜〜

失敗しないために

  • githubサイトへ行き、必ず確認してからNotionに反映されているcommitを取り入れる

🤨
自動転記のZapierは追加後すぐに動いているわけではないから時系列はあくまでも参考程度にしかならない。

CSSに関するコードはcomponentも含めて調整

CSSを調整する上でのポイントは、

【componentフォルダやpagesフォルダ内のファイル内でどういった変更がされているか】

ということ。

考えるだけでも頭が痛くなりそうなので、

視覚的に確認&メモ&修正を繰り返しながら進めることにしました。

ブログの検証画面はこんな感じでHTMLやCSSの要素を確認できます。

image block

【見比べた検証画面】

確認

検証画面で見比べ、VSCodeで関連するファイルを確認。

index.tsxや[date].tsxからこなし全体像をなんとなく掴む。

と同時に疑問もあったり。

ありがたいことに返信いただけたり

質問して聞いたほうが早そうなことはGitHubのIssueへ投稿してみたり。

メモ

ふと思いついたことはツイートして整理してみたり。

修正

自信は無い状態で背伸びしてみたり。

とにかく開発画面で修正してはエラーの繰り返し。

なかなか乗り越えられない壁に立ち往生したり。

よく寝たら代案が思いついてなんとか集結。

実際のCSS内容はこちら

CSSに関するcommit後はCSSとの関連を確認しつつcherry pick

CSSの調整で数日格闘した影響か、

全体像をある程度理解している状態での差分検討だったので数分で完了\(^o^)/

image block

まとめ

【確認】

  • 現状と目標との差分を見比べる

👉 自分のブログページとデモページとの検証画面を見比べる

👉  クラス名の変更はないか?ある場合構成の変更もあるか?

  • つながりを辿って元を探る

👉 CSSの変更からindex.tsx・[date].tsxなどと関連付ける

👉 componentから派生した記述かどうかも意識する

👉 componentが他のファイルから参照している部分がヒントになることもある

  • 自分で解決できる課題か否かを判断する

👉  開発者だから分かる部分かもしれない場合はIssueを活用

【メモ】

  • すぐに忘れそうなことはメモする

👉 ツイートしてみる

👉 作図して考えたい場合はノートにメモ

【修正】

  • 開発画面でとにかくトライ・アンド・エラーを繰り返しながら少しずつ進む

達成感で満たされた結果、

自動ツイート機能の実装までこなして今日は充実した1日でした\(^o^)/

Twitterでは更新のお知らせを随時行っています

興味ある方はLet'sフォロー★

▼ この記事に興味があったら同じタグから関連記事をのぞいてみてね

新着記事を通知したい??


RSSリーダーにatomのリンクを登録すると通知が行くよ🐌

https://herohoro.com/atom

やってみてね(*´ω`*)(*´ω`*)

Twitter Timeline


フォロー大歓迎\(^o^)/