この記事は、「ten986 Advent Calendar 2022」の 3 日目の記事です。
https://qiita.com/advent-calendar/2022/ten986

何もない状態からコードを書く試験 とかあるじゃないですか。
あれ ぼくは無理 なんですよ。

一切他のコードやネットの情報を参照せずにコードを書くことってぼくはできないですね。
できる人はすごいと思います。よく細かい文法覚えてますね、イヤミとかではなくすごい。

そらでコードを書けませんが、別に直す気は無いです。
細かいコードの書き方を覚えるよりも、使うライブラリや言語の考え方を覚えて、コードの書き方を毎回再現できるようにする方が筋がいい と考えているからです。
特にWeb業界では言語やライブラリの流行り廃りが激しいため、個々の細かい点を突き止めるよりも、「なぜそのライブラリを導入するのか？」という 背景を把握 しておく方がよく、そうすればそのライブラリが廃れた後でも背景知識は活きることが多いと考えています。

コードの書き方の再現方法として、細かい文法は調べればよいですが、実質的には既にプロダクトにあるコードを参照する方が早い ことが多い気がします。
恐らくこの考え方により、プロダクトにあるコードを参照するだけして、よくないコードが生まれることがあります。
この「よくないコードが生まれる現象」を回避しつつ既存のコードを参照するには、そのコードが書かれた背景を考える必要があります。 背景を確認するには、たとえばその箇所のPRを見るなり、書いた人に聞いてみるなりすると分かることが多いです。
なぜこのような背景を考える必要があるかというと、いくつか理由があります。
1つには、あなたのプロダクトのコードがすべていいコードとは限らないということです。急ピッチで書かれたコードを参考にしても意味がないことはあります。
2つ目に、それがいいコードだったとしても、特殊な背景(例えば特定のドメイン知識に依存しているなど)があれば、即座に参考にできるものではないということもあります。
プロダクトのコードには、基本的にどのような背景で書かれたかが存在している ので、意識するとよいと思います。

ちなみに、コードの書き方を覚えることが全くの無意味とは思いません。これは特にコーディング速度が上がることによる生産性の向上につながります。
その点で、言語の文法を覚えてる人はえらいと思っています。

悪い話として、ミクロな視点しか持たない人（たとえば、フロントエンドから技術を学び、フロントエンドしかやっていない人であればあり得る）の場合、コードがそらで書けるのは当たり前では？と思うこともある気がします。妄想ですけど。
多分、分かり合えません。

「記事一覧機能」を追加した。 ヘッダーの「ten986.net（仮）」をクリックすることで、記事一覧を表示できるようになった。

この機能の実装の上で、コンポーネントの共通化が必要になった。
記事ページのコンポーネントにヘッダーやフッターの記述がされていたため、これを分離した。
また、ヘッダーやフッターコンポーネント、またheadタグ内の記述を共通化できるように、Layoutコンポーネントを追加した。

ヘッダーの箇所や、ヘッダーに使うcssのクラスを初期実装段階で分けておいたので、分離は比較的容易だった。
「急いで書くコードでありつつ、後でリファクタがしやすいコード」を書くの、案外高度な技術じゃないですか？知らんけど。