1.見た目とデザインを合わせる

自分が作ったものとデザイナーからもらったXDファイルの見た目が異なっていた。

（※Adobe XD は、ユーザー操作性をデザイン、プロトタイプ化、共有するためのプラットフォームです。ワイヤフレーム、ビジュアルデザイン、インタラクションデザイン、プロトタイプ化、プレビュー、共有間の切り替えが簡単な、オールインワンの強力なツールです。（公式サイトより））以下、XD

H殿、K氏「ここが違うよ」
例えば、XDでは文字色が白なのに、書いたコードでは黒になっていると単純なものであった。
また、自分はPC版からコードを書くため、SP版用文字サイズの変更し忘れのミスを一番指摘された。

自分が書いたコードが、間違っていた。
単純に見落としでの間違いだった。
コードレビューの前に自分で最終確認をしていなかったためである。

一か所ずつ確認するようになった。

もちろん、XDを確認しながらコードを書くが、一通り書き終えてから
XDの文字サイズ、文字色、余白の幅などを再確認するようになった。

まだまだ指摘はされますが....

2.不要なコードの削除

コードレビューの前にまたまた最終確認をしておらず指摘をされたこと....

H殿、K氏「これいらないよね」
CSSでXDファイルでファイル通りの見た目にするために実験的に書いていたCSSプロパティが不要だった。

1.見た目とデザインを合わせるでも記載したが、コードレビューの前に自分が書いたコードの最終確認を怠ったためである。

実験的に書いたコードは、確認し終えたらすぐ消すように習慣づけるようにした。
また、最終確認の際も気を付けてコードを確認するようになった。

当たり前のことなのにできていなかったためミスを起こしていた.......


<!-- 修正前 -->
<div class="header-contents-logo">

<!-- 修正後 -->
<div class="header-logo">

修正前は、見たままの入れ子構造通りに書いていた。

H殿、K氏「クラス名、関数名のつけ方が下手糞」

H殿「logoの親コンポーネントはなにー？」

ぼく「header.....」

H殿「header-logoでいい」

まだ、クラス名のつけ方に慣れていなかった。
親コンポーネントなどの規則を知らなかったため。

書き方を知らなかったので、
他サイトのクラス名をディベロッパーツールで確認、Bootstrapで学習するようにした。
また、CSSの命名規則を調べるようになった。