1.見た目とデザインを合わせる
自分が作ったものとデザイナーからもらったXDファイルの見た目が異なっていた。
（※Adobe XD は、ユーザー操作性をデザイン、プロトタイプ化、共有するためのプラットフォームです。ワイヤフレーム、ビジュアルデザイン、インタラクションデザイン、プロトタイプ化、プレビュー、共有間の切り替えが簡単な、オールインワンの強力なツールです。（公式サイトより））以下、XD
どういう指摘をされたか
H殿、K氏「ここが違うよ」
例えば、XDでは文字色が白なのに、書いたコードでは黒になっていると単純なものであった。
また、自分はPC版からコードを書くため、SP版用文字サイズの変更し忘れのミスを一番指摘された。
それはなぜか
自分が書いたコードが、間違っていた。
単純に見落としでの間違いだった。
コードレビューの前に自分で最終確認をしていなかったためである。
どのように直したか
一か所ずつ確認するようになった。
もちろん、XDを確認しながらコードを書くが、一通り書き終えてから
XDの文字サイズ、文字色、余白の幅などを再確認するようになった。
まだまだ指摘はされますが....
2.不要なコードの削除
コードレビューの前にまたまた最終確認をしておらず指摘をされたこと....
どういう指摘をされたか
H殿、K氏「これいらないよね」
CSSでXDファイルでファイル通りの見た目にするために実験的に書いていたCSSプロパティが不要だった。
それはなぜか
1.見た目とデザインを合わせるでも記載したが、コードレビューの前に自分が書いたコードの最終確認を怠ったためである。
どのように直したか
実験的に書いたコードは、確認し終えたらすぐ消すように習慣づけるようにした。
また、最終確認の際も気を付けてコードを確認するようになった。
当たり前のことなのにできていなかったためミスを起こしていた.......
3.クラス名
どういうコードを書いたか
<!-- 修正前 -->
<div class="header-contents-logo">
<!-- 修正後 -->
<div class="header-logo">
修正前は、見たままの入れ子構造通りに書いていた。
どういう指摘をされたか
H殿、K氏「クラス名、関数名のつけ方が下手糞」
H殿「logoの親コンポーネントはなにー？」
ぼく「header.....」
H殿「header-logoでいい」
それはなぜか
まだ、クラス名のつけ方に慣れていなかった。
親コンポーネントなどの規則を知らなかったため。
どのように直したか
書き方を知らなかったので、
他サイトのクラス名をディベロッパーツールで確認、Bootstrapで学習するようにした。
また、CSSの命名規則を調べるようになった。