コーディングの勉強に模写は必要?コーディング模写について

Web

こんにちは。

個人事業でWeb制作やコーディング代行、コーディング講座を行っているtisse designのさおりです。

よく初学者の方向けに「コーディング模写やるといいよー」なんていうアドバイスを見かけたりします。

そこで、今回はコーディング模写について思うこと、私がやってきたことなどをご紹介します!

そもそもコーディング模写って何?

コーディング模写とは、コーディングの勉強のために、既存のサイトを自分の力でどこまでコーディングできるかを勉強するための勉強方法です。

どうしても見るだけでは、コードを書くことはできるようにならないため、手を動かす、という意味ではすごく有効な勉強方法だと思いますし、私も一時期やってました。

コーティング模写のやり方

よく聞くのは、Webサイトのスクショを撮ってそのままコーディングを自分で0からやっていくという方法です。

この方法でもいいのですが、私は挫折しました(笑)

tisse design的コーディング模写のやり方

まず、ページのスクショをとります。

おすすめはChromeのプラグインを使ってとる方法です。

おすすめのプラグインで紹介している、「Full Page Screen Capture」や開発者ツールについているスクリーンショットをとったりします。

次に、XDやFigmaでざっくりレイアウトをなぞります。

もしXDを使われる場合、「mimic」というプラグインを入れると、サイトに入っている画像をDLできます。

その状態から、レイアウトの構造やheader、main、footerはどこに配置されるのか…などを考えてからコーディングを進めていきます。

コーディング模写、答えは見ない方がいい?

開発者ツール(検証ツール)を使うと、そのページでどんなコードが書かれているかわかるので、答えはわかります。

見てもいいですが、丸パクリはおすすめしていません。

その理由は、サイトによってはflexboxではなく、floatで書かれていたり、構造がわかりづらいdivタグが沢山あったりするためです。

Business photo created by freepik – www.freepik.com

無料コーディング教材配布始めました

そんなコーディング模写のために、無料でコーディング教材の配布を始めました。

詳しくはこちらの記事をご覧ください。

有料とはなりますが、コーディングの質問や相談、レビューなどもお受けしています^^

よければご活用ください!