tanatiyo ようやく、一通りのチェックも終わり、提出することができました。
GW中にも関わらずレビュー依頼を提出した翌日にはもうお返事がありました。今回も早くて驚きました＾＾；
今回の記事では修正内容と反省をしながら進めていきたいと思います。
ちなみに、参考までにしょーごさんのコーディング課題【中級編】はこのようなものです↓
【修正箇所は4か所】
まず、今回は初級編に比べて修正箇所が4か所ありました。しょーごさんのブログで、修正箇所が多いところを取り上げてくれている記事があるのですが、事前にそこもチェックしておいたのに、この指摘の数には正直落ち込みました。。。
ただ、落ち込んでばかりもいられないので、反省したらしっかり切り替えて次にいきたいと思います！
指摘箇所と振り返りをしていきます！
①ファーストビューの円が切れてしまっている
コーディング中に指摘箇所の円を、見切れさせるべきか、表示させるべきか、迷いました。。。XDデザインの方では画面外では薄く表示されていたので、表示させようと一度は考えましたが、チェックで画面を透過させたときに幅が切れていたので、悩んだ結果見切れた表示にしました。
→正しくは、デザインの方で画面外に薄く表示がされていれば、基本的には画面いっぱいに表示し、画面を広げていってもその表示は見切れさせずに表示させる、でした。初級編の方でも通った道かなと思います。ここを指摘されたのは痛かったですね。次はしっかり対応しようと思います。
②フォント全体にかかっているtransformは不要
これは文字通り、transformはいらない、ということでした。
→全体的なコーディングが完成した時はフォントにtransformは設定していませんでした。デザインと透過させたときに、文字のサイズや行間はあっているにも関わらず、文字の大きさが全然合わないことに気づきました。デザインをみると、どうやら7割くらいの場所でサイズ的に縦長になっていました。悩みましたが、やはり文字数の多いところではズレが大きくなっているのと、これもデザインの一つかもしれないと考えた末、transformをつけるところに行きつきました。
そして、ここからが長かったです・・・・
transformをつけると中央を中心に拡大・縮小されるので、それをtranslateを用いて位置の調整を行いました。一つ一つ、デザインを透過させながら行ったので、とても時間がかかった場所になります。これが不要だったなんて・・・と正直がっくり＿|￣|○でした。でも、実案件ではこの経験を糧にフォント周りには特に早い段階から気を付けていこうと思います。セクション毎やモジュール毎にCSSを充てたらその都度デザインを透過させて、早い段階からある程度のかたまりをチェックしていった方が効率が良さそうですね。最終のセルフチェックの段階でこうなったら、本当に大変でした。
また、どうやらnoteにある画像やURLカンプの方のデザインは縦長になってなかったようなので、今度1ピクセル単位で余白の調整等を行う時は、はURLカンプ（XDデザインはこちらで知らぬ間に編集してしまっている可能性が残るので）基準で合わせていこうと思います。
仮に実案件でデザインが複数手に入ることがあれば、必ずどちらも確認するようにします。
そして今回のようにフォント周りでデザイン通りの数値で合わせているにも関わらず、文字の大きさ自体が違っていた場合(line-heightは考慮に入れた上で)、それがロゴ周りなど一部分だけでなくサイトの各所で見られるようなことがあれば、早いうちからデザイナーさんやクライアントに確認をした方が良いと思いました。
③チェックボックスと対応するlabelの文字がレスポンシブ対応の時にずれている
これも文字通りですね。
→ここは、しょーごさんがブログでも指摘箇所が多いと書いていたので、セルフチェックの段階で修正済みでした。
しかしローカルでファイルを複数に分けていたせいか、修正前のものを提出してしまっていたようです。さらには、アップロードした後のセルフチェック段階で、ブラウザ上でローカルを反映させたサイトを、誤ってアップロードしたサイトだと勘違いして確認していました。既に修正済みという誤った認識を持った提出してしまいました。。。
今までは必死になってとりあえず作業を進める、ということが多かったです。
しかしここからは、実案件も踏まえて、「どうやったらミスをせず、正確で素早い仕事ができるか」という観点で「環境構築」はもちろんのこと「作業環境」を見直すことが必要になってきました。
ある程度ルール作りをして、こういった失敗がないようにします。
④ハンバーガーメニューのリンクをクリックしたと同時にハンバーガーメニューを閉じて、該当箇所までスクロールすることができていない
ハンバーガーメニューは開くけど、クリックした後の動作が仕様書通りではなかった、ということかと思います。
→セルフチェック段階でエミュレータも用いて、chrom、Firefox、Edge、自分のスマホ（Android）にて、動作確認済みでした。ただし、読み込んですぐだと確かにクリックの反応が鈍いようには感じていました（メニュー項目をクリックしても何も起こらない）。しかし少し時間（その時々で変わりますが大体10秒以内）を置いたり、リロードすれば問題なく動作するので、問題なしとして提出しました。
指摘されて冷静に考えてみれば、クライアントやユーザーが画面を開いて正常に動作するのに10秒もかかっていたら離脱してしまいますし、画面を開いて1回目の操作でクリックが正常に動作しないものを納品するのはプロ意識が足りないなという気持ちになりました。
これについては、jQueryの記述をもっとシンプルに分かりやすく、かつ直接的に該当オブジェクトにささるようにすることで対処しました。
記述量が元々多かったのですが、半分くらいに減らすことが出来ました。出来るなら、始めからしてたら良かったです＾＾；
いろいろな書き方ができるからこそ、納品する時には最善な書き方にこだわって提出することが大事だと学びました。
以上です。①～④を修正することで一部新たなバグや派生して修正が必要な箇所が出てきたため、そこも対応した上でもう一度セルフチェックを行い、提出しました。
2回目のレビュー依頼フォームはまた別リンクがありました。
2回目の結果もまた載せたいと思います。