Webサイトの模写は、コードを深く理解するのに良い勉強になる。
自分は、2つのパターンでそれぞれ模写をした。
<パターン1>
見本のWebサイトとコードを見ながら、コードを書く。
<パターン2>
見本のWebサイトだけを見て、コードを書く。(見本のコードは見ない!)
パターン1の場合でも、ただコードをコピーするのではなく、見本コードの意味や構成を考えながらコードを打つと非常に勉強になる。
そして、パターン2では、さらにコードの理解が深まる。
見本のWebサイトだけを頼りに、どのようにコードを書けばよいか調べたり試行錯誤するうちに実力がついていく。
そして、パターン2の場合、見本コードと自分でつくったコードが違ってくるため、それらを比較すると新しい発見をすることも。
例えば、次のようなものである。
横並びするコンテンツでも、1つのコンテンツがページ幅いっぱいだと縦並びのようになる。
見本のコードでは縦並びになるように指定をしている。
一方、自分が書いたコードではその指定をしていなかったのだが、上記の要因から結果的に縦並びになっていた。
コードの書き方に正解はなく、いろんなやり方がある。
自分が知らなかった書き方を発見できると、嬉しい気持ちになる。楽しくなる。
パターン1、パターン2の模写を通じて、プログラミングのスキルを上げていこう!!


