noseblog

menu

2019.4.21

模写コーディングの後にやるべき3つのこと

こんにちは、のせです

progateや書籍での学習を終え、初めてサイト模写が完了したときはなんとも言えぬ達成感がありますよね!

しかしみなさんサイト模写をしたあと、達成感のあまり復習することを忘れていませんか?せっかく頑張って模写したのに、やりっぱなしは非常にもったいないです!

今回は模写コーディング後にやるべきことを3つ紹介します。5分で読める内容となっていますのでよければお付き合いください。

模写コーディング後にやるべきこと3つ

模写コーディング後にやるべきことは以下の3つです

  • ブレイクポイント付近でミスがないか再度確認
  • 実際のコードを確認してより良い記述方法があればそれをインプット
  • インプットした部分をアウトプットする

この3つについて以下で詳しく解説していきます。

ブレイクポイント付近でミスがないか再度確認

そもそも本当にサイト模写は完了しているのか?ということですね。

サイト模写において、フォントサイズや余白など細かいところまで完璧にコピーする必要はありません。

しかし明らかに要素の高さが不自然であったり、jQueryの挙動がおかしかったりする場合はしっかりと修正しましょう。

特にブレイクポイント付近ではこのようなミスが起きやすいのでしっかり確認しておきましょう。

実際のコードを確認してより良い記述方法があればそれをインプット

ミスがないかを点検したらディベロッパーツールを使って、模写したサイトのコードを確認しましょう。

ディベロッパツールを使う最大のメリットは、初心者でもプロの記述したコードを勉強することができるという点にあると思います。

大抵の場合、初心者のコードの量と比べてプロが記述したのコードの量はびっくりするほど少ないです。

”量が少ない=効率良い”ということなので自分が苦戦したポイントで、プロはどのような記述をしているのか勉強し、それをインプットしましょう。

例えば最近僕は、

  • flex-boxを使わなくてもdisplay: inline-blockでなんとかなる場合も多い
  • テキストの横にアイコンを表示させるときはbeforeやafterなどの擬似要素を使うとdivの個数を節約できる

みたいなことを学びました。

「模写するたびにそんなにインプットしてたら、時間かかりすぎちゃうじゃん」みたいな反論もありそうですが、模写や案件をこなしていくごとにインプットの量も確実に減っていきますのでキツイのは最初だけです。

それよりも、いつまでも効率の悪い記述をしている方がリスクであると思います。

インプットした部分をアウトプットする

最後にインプットしたことをアウトプットしてみましょう。

インプットだけでも十分ですが、アウトプットすることによってプロのコードを完全に自分のものにできます。

この作業は1回やれば十分だと思います。

こんなにコスパよく実装できるんだと感動することができれば、次に同じような記述が求められた時にすぐに実装できるかと思います。

まとめ

模写コーディング後にやるべきことをもう一度確認してみましょう

  • ブレイクポイント付近でミスがないか再度確認
  • 実際のコードを確認してより良い記述方法があればそれをインプット
  • インプットした部分をアウトプットする

いかがでしたでしょうか?この記事を読んだことでみなさんの学習効率が高まれば幸いです。

また、模写コーディングで意識するべきことについては下記の記事に書いたのでよければ読んでみてください。

模写コーディングで意識すべきこと[便利ツールも紹介]

今回は以上になります