プログラミング独学day84のアウトプットは？
今日は
・【for初心者】コードレビュー前のセルフチェック
をアウトプットします！
こんにちは。プログラミングでweb制作ができるようになりたいharuです。
2歳0歳の育児をしながら、22時〜2時に独学しています！
わかったことや、気付きをログに残します。
同じく初学者の人が、これをみてインプットや復習ができるように書いていきます。
【for初心者】コードレビュー前のセルフチェック
＃もりけん塾のもりけん先生(@terrace_tec)に模写のコードレビューをしていただきました。
（お忙しい中、細かく見ていただき本当にありがとうございました…！）
今回、ご指摘いただいた内容を繰り返さないようにチェックリストを作りたいと思います。
コードレビューの前に、自分でセルフチェックをおこない提出できるようにします。
▼レビューが追加されたら、リストも更新します。
追記：2020.8.8 【HTML】×3
コードレビュー前のセルフチェックリスト
【HTML】
□BEMでリストを書くとき、クラス名をlists > listあるいはitems > itemにしているか？
□コード内に、先頭スペースは隠れてないか？
□imgにwidthとheightを指定しているか？
□追記：PCとSPで改行位置を変えるときは、<span class=””>で対応しているか？(極力<br>は使わない。cssでinlineとblockを使って対応する）
□追記：ハンバーガーメニューのクラス名は、hamburgerなどわかりやすくなっているか？(nav2はNG)
□追記：基本的なボタンは<a>タグで作っているか？role=”button” tabindex=”0″ をつけているか？
【CSS】
□リンクは正しく動いているか？
□ハンバーガーメニューのリンクは機能しているか？
□ページ内リンクが機能しているか？
□ディベロッパーツールで、打ち消しされている不要なCSSがないか？
□クラス名と内容が合っているか？ex.)txt–yellow なのに、color:yellow以外の指定はないか？
□mainのフォントをbodyに付与、それ以外を個別で指定できているか？
□親と子で、同じプロパティを指定していないか？
□ディベロッパーツールで見て、要素におさまっていない文字やボタンはないか？
□何も指定されていない不要なクラスはないか？
□ボタンは<a>で作っているか？
□要素と要素の間はmarginで余白を取っているか？
→paddingを使う時は、背景色を入れてみて不自然じゃないかを確認する
□汎用性のあるコンポーネントが作れているか？
→このあと詳しく解説
□レスポンシブ対応は、実機でも動作確認したか？
□レスポンシブ対応したことで、見にくくなっているデザインはないか？
【できれば尚良い】
□ipad対応
□バーガーメニューのリンクを押したら、バーガーメニューを閉じる
□チェックボタンの動作確認
□バリデーション(入力チェック)
□フォームの値を取得→サーバーに値を送る
（リクエストに値を渡す）
汎用性のあるコンポーネントが作れているか？について
上のチェックリスト内の汎用性のあるコンポーネントについて詳細です。
簡単にいうと「使い回しのできる部品」を作れているか。
ボタンの例で考えてみます。
②囲んだdivにmarginやcenterを持たせる
③色などの装飾は、別のクラスで
実際に、クラスをつけるとこんな感じです。
<div class="btn--center">
<a class="btn btn--yellow">ボタンです</a>
</div>
btnクラスには、標準のボタンを。
btn–yellowクラスには、color: yellowを。
といった具合に、最低限の見た目とは切り離すことで、要素を使い回すことができます。スト
こちらのリンクも参考に、理解を深めました。
あとがき
Thanks：師匠「もりけんさん」(@terrace_tec)
もりけんさんのHPはこちら
