模写コーディングを練習してるけどうまくいかないスキルが身についた実感がない自分一人でサイトを作れる自信がない今回はこういった疑問について解説していきます。模写コーディングは既存のwebサイトをそのまま自分でコーディングをして再現することを指します。いくつかレベルはありますがPC画面の見た目をそっくりそのままコーディングするスマホ画面の見た目を写すスクロールや画面遷移時のアニメーションまで写すなどより本物のサイトに近づけて再現していきます。この模写コーディングですが、取り掛かる時にいくつかのことを念頭に取り組まないと、学習効率が落ちてしまいます。web制作でおすすめの模写サイトを紹介します続きを見る模写コーディング時に意識すること模写コーディングで意識すること自分のプログラミングスキルと模写サイトの難易度を合わせる先にオリジナルサイトの構想を練る模写コーディングの手順を理解するわからないところは一旦スルーでOK。慣れてきたらレスポンシブを意識してコーディングをする自分のプログラミングスキルと模写サイトの難易度を合わせる最初は、模写サイトを選択する時に「簡単すぎるサイトを選ばない」ことと「難しすぎるサイトを選ばない」ことです。それぞれの理由はこちらです。簡単すぎるサイトを選んではいけない理由スキルの向上につながらない何度も同じところを学習するだけになり次のステップに進みづらくなる。初学者の時期に陥りがちなことは何度も一度学習したところを復習してしまうことです。完璧になってから次に進もうという心理が働くと中々次のステップに進めなくなってしまいます。概要だけ掴んでどんどん次に進んでいきましょう。難しすぎるサイトを選んではいけない理由ただソースコードを書き写すだけになり、理解しないままコーディングをしてしまうリスクがあるため。自力で実装できない箇所が多いためほとんど答えを頼ることになり自信をつけれないまま挫折するリスクがあるため。難しいサイトにいきなり挑戦すると、コーディングを開始した直後から「わからない!」となり最初からコードを書き写すと言ったことになるリスクが高いです。ここから1つずつ意味を調べて理解して、自分で実装できれば問題ないですが、どうしてもコードを書き写すだけの作業になりかねません。言った心配がある人はまずはぱっと見で自分でも作れそうというサイトから挑戦してみましょう。2つ目の理由は、人によっては当てはまらないかもしれませんがプログラミングの挫折の大きなの理由が難しく自分には理解できないと感じることです。最初から全てを実装しようと考えるのではなく、まずはできるところからやってみましょう。先にオリジナルサイトの構想を練る模写コーディングの最終ゴールは「自分で想像したサイトを自力で作り上げる」ことにあります。そのために既存のサイトを再現してスキルをつけることが模写コーディングをやる意義になると考えます。そのため模写をする前に大体でいいのでオリジナルサイトの構想を練っておきましょう。すると模写の最中に「この実装方法は自分が作りたいサイトに生かせるな」といった紐付けができるようになります。練習するのではなく、目的を意識した練習をすることで学習効率を高めることができます。模写コーディングは既存のサイトをそのまま自分で再現することですがその際に手順がいくつかあります。step1写経まずは写経です。これは最初からソースコードを見ながら書き写すことです。答えを見ていいので早く既存サイトの詐欺減ができます。答えを見ながらといいつつ、サイトができるまでの0%〜100%までの過程を体験することができるので、どのようにサイトができていくのかイメージができます。次に先ほど写経したサイトを今度は見ないで再現できるか挑戦します。見ないと言ってもわからない部分に直面したらすぐに答えを見て理解します。知らないプロパティはすぐに検索しましょう。ここでわかったつもりになって調べずに進んでしまうと理解の速度が遅くなってしまいます。css」などでプロパティ+言語で検索をし、公式ドキュメントを参照して知識を深めていきます。答えをすぐ見て効率的に理解しながら、その理解が不安定にならないよう検索して調べることで定着を図ります。これはできれば2回ほど実践しましょう。step3何も見ずにコーディング最後にいよいよソースコードを見ずにコーディングしていきます。1回目の写経時に比べたら圧倒的にコーディングスキルが上達してるはずです。ここで不明点が出た時はすぐに検索するのではなく、できる限り考えて答えを出すようにします。10分以上わからないなどあれば答えを見て理解していきます。step4一つ一つのフォントや画像の大きさ、配置のなぜそうなってるかのロジックが説明できたら合格とする。最終的に模写コーディングが終わった段階で、各要素の説明が全てできたOKです!とてもしんどいですが必ず力になるので諦めずにチャレンジしましょう!何度も簡単なサイトばかりやらない先ほど記載した内容と重なりますが、不安要素が多いと何度も同じ学習を繰り返したくなります。プログラミングは記憶するものではなく、Googleと寄り添いながら検索していくものなので気にせず難しいサイトにもチャレンジしていくことを意識しましょう。わからないところは一旦スルーでOK。復習時に再挑戦するつまずいた時は一旦ソースコードを見て理解します。ソースコードを見てもわからない時はそのプロパティを検索して調べます。概要を掴んだら実装を加えて次に進みましょう。完璧に理解しようとしてずっと足踏みするよりは先に進んで学習を進めることをおすすめします。やっていく段階で理解が深まるので先に進んだ方が効率がいいです。慣れてきたらレスポンシブを意識してコーディングをする模写にだいぶ慣れてきたら、最終的なサイトの構成を意識したコーディングをしていきましょう。文字サイズはpxで固定せずにem,rem,%を使用。複数の画像にはdisplay:flexを指定し、画面幅に応じてレイアウトが崩れないようにしておく。共通のレイアウトは最初に定義して、以降はそれを使いまわす。最初にPC用のレイアウトでデザインする時に既にスマホ時のレイアウトをイメージしながらコーディングをすると全体的に綺麗なサイトができます。モバイルファーストでコーディングするのが現在では主流なので、先にスマホのレイアウトを決めて、その後にPC用に変更するにはどうするかを考えていきます。画像や文字サイズは固定ではなく、画面幅に応じて可変になるよう記述すると、全体のコード量も減らすことができスッキリしたコーディングができます。まとめ今回は模写コーディングの練習をする時に意識したいことを解説しました。勉強方法は人それぞれのため正解はありませんが、自分なりのいい学習方法を模索しながら、参考になる点は参考にして効果的に学習できるように頑張っていきましょう。コメントをキャンセルメールアドレスが公開されることはありません。※サイト次回のコメントで使用するためブラウザーに自分の名前、メールアドレス、サイトを保存する。