模写コーディングでスキルアップしよう！

こんにちは！昨年9月に入社をしたエンジニアのハットリです。　　　　　　　

勉強方法の1つとして模写コーディングをしたので、その手順などを紹介したいと思います。

模写コーディングとは

模写コーディングとは、「既存のサイトの見た目を真似てコーディングすること」です。
すでに世の中にあるサイトをコーディングできるので、実務に近いレベルでコーディングができます。実際に手を動かしながら勉強することができ、アウトプットにはもってこいの勉強方法です。

模写コーディングの手順

模写するオリジナルサイトを選ぶ
選んだサイトのキャプチャを取る＆画像をダウンロードする
実際にコーディングする
コーディング後のチェック

1. 模写するサイトを選ぶ

模写するサイトは自分自身の目的に合うサイトを選ぶべきです。
つまり、模写コーディングをしてどんなことを勉強したいか、が大切です。
たとえば、複雑なレイアウトのサイトで、レスポンシブでも崩れないコーディングを勉強したい時と、ECサイトのようなレイアウトのコーディングを勉強したい時は、選ぶサイトが違ってくると思います。

模写コーディングをする時は目的に合うサイトを選んだ方が、ある程度ゴールがわかり、取り組みやすいです。

模写コーディングの目的とルール

模写コーディングは目的が大切ということで、今回の僕の目的は「文章構造を意識したセマンティックなhtmlとムダのないscss記述」でした。

その際にルールも決めて行いました。

<今回の作業時のルール>

コーディング時はデベロッパーツールを使わない
わからないことは調べて解決する
レスポンシブ時の可変を同じ動きにする

ちなみに、今回は弊社の実績にあるページを選び、コーディングをしました。
弊社の実績はこちら

2. 選んだサイトのキャプチャと画像をダウンロード

模写するサイトが決まったら、サイトのキャプチャを取ります。そして、画像もダウンロードします（模写コーディングの目的やルールによります）。
※cssで背景画像として表示されている画像は一括でダウンロードできないので、個別にダウンロードする必要があります。

キャプチャを撮る方がいい理由は、実際の案件の流れに沿って模写コーディングができるからです。
実際の案件では、完成されたデザインデータから、margin、paddingなどの情報を確認して作業をします。
模写コーディングの時も、キャプチャをPhotoshopなどで開き、デザインの情報を確認しながら作業を進めるといいと思います！

3. 実際にコーディングする

それでは実際にコーディングをします。コーディングをするときは、前述したこと（模写コーディングの目的）をもう一度思い出してから作業しましょう！

そして、その目的に応じてルールも作りましょう。

<ルールの例>

コーディング時はデベロッパーツールを使わない
ピクセルパーフェクトで作成する
ページの情報を調べるときはできるだけ拡張機能を使う

etc…

ルールの内容は人それぞれだと思いますが、ルールを作ることによって、効率的に模写コーディングを進めることができます。
たとえば、「文章構造を意識してセマンティックなコーディングを勉強したい」という目的のみであれば、フォントや画像をまったく同じにコーディングするよりも、その時間で別なサイトを同じルールでコーディングした方が目的に沿っているのではないでしょうか。

4. コーディング後のチェック

実際に作業が終わったら、答え合わせをします。デベロッパーツールを使って、ソースコードを確認します。
htmlにはどんなタグが使われているか、cssはどんなプロパティが使われているかを確認しましょう。確認&修正を繰り返して、完成形に近づけていきます！

こちらは、実際に模写コーディングしたページとオリジナルページを並べたものです。

また会社の先輩や同じチームの方にソースレビューをしていただくのもいいですね。レビューに関しての質問や悩んだ部分なども直接聞くことができるので、とても勉強になると思います。
（僕はまだソースレビューを出していませんが、今後レビューいただきたいと思っています。エンジニアチームのみなさん、よろしくお願いいたします！！）

模写コーディングで使った便利なgoogle chrome拡張機能

ここで、模写コーディングをする時に使える便利な機能を紹介したいと思います。

キャプチャを取る時: →Awesome screenshot