【具体的】実践的な模写コーディング練習方法を解説

模写コーディングを練習してるけどうまくいかない
スキルが身についた実感がない
自分一人でサイトを作れる自信がない

今回はこういった疑問について解説していきます。

模写コーディングは既存のwebサイトをそのまま自分でコーディングをして再現することを指します。いくつかレベルはありますが

PC画面の見た目をそっくりそのままコーディングする
スマホ画面の見た目を写す
スクロールや画面遷移時のアニメーションまで写す

などより本物のサイトに近づけて再現していきます。この模写コーディングですが、取り掛かる時にいくつかのことを念頭に取り組まないと、学習効率が落ちてしまいます。

何個か模写コーディングしたけど自分で完全オリジナルのサイト制作ができない
模写してる時に後々振り返ると理解できてないところが多い

こう言った人は今回の記事を参考に、より理解が深まる効果的な模写コーディングを実践してみてください！

参考

: 【初心者必見】web制作でおすすめの模写サイトを紹介します
続きを見る

模写コーディング時に意識すること

模写コーディングで意識すること

自分のプログラミングスキルと模写サイトの難易度を合わせる
先にオリジナルサイトの構想を練る
模写コーディングの手順を理解する
わからないところは一旦スルーでOK。復習時に再挑戦する。
慣れてきたらレスポンシブを意識してコーディングをする

自分のプログラミングスキルと模写サイトの難易度を合わせる

最初は、模写サイトを選択する時に「簡単すぎるサイトを選ばない」ことと「難しすぎるサイトを選ばない」ことです。それぞれの理由はこちらです。

簡単すぎるサイトを選んではいけない理由

スキルの向上につながらない
何度も同じところを学習するだけになり次のステップに進みづらくなる。

初学者の時期に陥りがちなことは何度も一度学習したところを復習してしまうことです。完璧になってから次に進もうという心理が働くと中々次のステップに進めなくなってしまいます。まずは概要だけ掴んでどんどん次に進んでいきましょう。

難しすぎるサイトを選んではいけない理由

ただソースコードを書き写すだけになり、理解しないままコーディングをしてしまうリスクがあるため。
自力で実装できない箇所が多いためほとんど答えを頼ることになり自信をつけれないまま挫折するリスクがあるため。

難しいサイトにいきなり挑戦すると、コーディングを開始した直後から「わからない！」となり最初からコードを書き写すと言ったことになるリスクが高いです。ここから1つずつ意味を調べて理解して、自分で実装できれば問題ないですが、どうしてもコードを書き写すだけの作業になりかねません。そう言った心配がある人はまずはぱっと見で自分でも作れそうというサイトから挑戦してみましょう。
2つ目の理由は、人によっては当てはまらないかもしれませんがプログラミングの挫折の大きなの理由が難しく自分には理解できないと感じることです。最初から全てを実装しようと考えるのではなく、まずはできるところからやってみましょう。

先にオリジナルサイトの構想を練る

模写コーディングの最終ゴールは「自分で想像したサイトを自力で作り上げる」ことにあります。そのために既存のサイトを再現してスキルをつけることが模写コーディングをやる意義になると考えます。
そのため模写をする前に大体でいいのでオリジナルサイトの構想を練っておきましょう。すると模写の最中に「この実装方法は自分が作りたいサイトに生かせるな」といった紐付けができるようになります。ただ練習するのではなく、目的を意識した練習をすることで学習効率を高めることができます。

模写コーディングの手順

模写コーディングは既存のサイトをそのまま自分で再現することですがその際に手順がいくつかあります。

step
1写経

まずは写経です。これは最初からソースコードを見ながら書き写すことです。答えを見ていいので早く既存サイトの詐欺減ができます。答えを見ながらといいつつ、サイトができるまでの0％〜100％までの過程を体験することができるので、どのようにサイトができていくのかイメージができます。

step
2見ずにコーディング、不明点はすぐ答え合わせ｜2回実施

次に先ほど写経したサイトを今度は見ないで再現できるか挑戦します。見ないと言ってもわからない部分に直面したらすぐに答えを見て理解します。知らないプロパティはすぐに検索しましょう。ここでわかったつもりになって調べずに進んでしまうと理解の速度が遅くなってしまいます。面倒でも毎回「position css」「transform css」などでプロパティ＋言語で検索をし、公式ドキュメントを参照して知識を深めていきます。答えをすぐ見て効率的に理解しながら、その理解が不安定にならないよう検索して調べることで定着を図ります。

これはできれば2回ほど実践しましょう。

step
3何も見ずにコーディング

最後にいよいよソースコードを見ずにコーディングしていきます。1回目の写経時に比べたら圧倒的にコーディングスキルが上達してるはずです。ここで不明点が出た時はすぐに検索するのではなく、できる限り考えて答えを出すようにします。10分以上わからないなどあれば答えを見て理解していきます。

step
4一つ一つのフォントや画像の大きさ、配置のなぜそうなってるかのロジックが説明できたら合格とする。

最終的に模写コーディングが終わった段階で、各要素の説明が全てできたOKです！

とてもしんどいですが必ず力になるので諦めずにチャレンジしましょう！

何度も簡単なサイトばかりやらない

先ほど記載した内容と重なりますが、不安要素が多いと何度も同じ学習を繰り返したくなります。プログラミングは記憶するものではなく、Googleと寄り添いながら検索していくものなので気にせず難しいサイトにもチャレンジしていくことを意識しましょう。

わからないところは一旦スルーでOK。復習時に再挑戦する

つまずいた時は一旦ソースコードを見て理解します。ソースコードを見てもわからない時はそのプロパティを検索して調べます。概要を掴んだら実装を加えて次に進みましょう。

完璧に理解しようとしてずっと足踏みするよりは先に進んで学習を進めることをおすすめします。やっていく段階で理解が深まるので先に進んだ方が効率がいいです。

慣れてきたらレスポンシブを意識してコーディングをする

模写にだいぶ慣れてきたら、最終的なサイトの構成を意識したコーディングをしていきましょう。例を挙げます。

文字サイズはpxで固定せずにem,rem,%を使用。
複数の画像にはdisplay:flexを指定し、画面幅に応じてレイアウトが崩れないようにしておく。
共通のレイアウトは最初に定義して、以降はそれを使いまわす。

最初にPC用のレイアウトでデザインする時に既にスマホ時のレイアウトをイメージしながらコーディングをすると全体的に綺麗なサイトができます。モバイルファーストでコーディングするのが現在では主流なので、先にスマホのレイアウトを決めて、その後にPC用に変更するにはどうするかを考えていきます。画像や文字サイズは固定ではなく、画面幅に応じて可変になるよう記述すると、全体のコード量も減らすことができスッキリしたコーディングができます。