プログラミング学習を進めサイト模写へ挑戦【ルール決めが重要】
「プログラミング学習が進んできたら模写をしてみるといいってよく聞くけど、
なにもかも手探りで不安だなあ、どんな感じでやればいいだろう？」
「あまり難しいのも困るし、模写におススメのサイトってないかなあ」
今回はこのような悩み、疑問に対してお答えしていきます。
最初の実践練習である「サイト模写」HTMLやCSSのコーディングの流れやプロパティの種類や役割、仕事の時に似た状況になるといった様々なメリットからおススメされている練習方法ですが、コードの丸写しとかをしては上達に繋がりません。
大変と思う所もありますが、ポイントを押さえて進めることで格段にレベルアップできますので、是非読み進めて自分の糧としてください。
プログラミング学習を進めサイト模写へ挑戦【ルール決めが重要】
では、いきなり結論行きますね
「ルールを決める」
模写をする上で重要なのは、ルールを決めてそれを守って進めることです。
ゲーム的に言うと「縛りプレイ」です。
この縛り状態でクリアできれば、確実に大きく成長できますので頑張ってほしいです。
では、実際に私が決めたルールを紹介しますので参考にしてください。
1：検証ツールは見ない
検証ツールには「答え」が詰まっています。
それをいきなり見てしまっては意味がありません。
そもそも、仕事の時はゼロからのコーディングです。
勿論答えはありません。
よって検証ツールは封印です。
2：レスポンシブデザインも対応させる
今はどのサイトもパソコン表示、スマホ表示出来て当たり前です。
なので、BootStrapやCSSの@mediaを駆使してレスポンシブ対応しましょう。
3：画像はダウンロードで集める
本来であれば、PhotoshopやIllustratorでデザインデータを加工したりする作業が実務ではありますがそれは別にします。
模写はコーディングの練習がメインですので、画像は同じもの、もしくは雰囲気を損なわない似たようなので構わないのでダウンロードで集めてきましょう。
4：文字はコピペOK
文面は本家サイトを見ればわかるのでコピペOKとします。
わざわざここで時間をかけることはありません。
5：フォントの種類やpx単位のズレは気にしない
ここも完璧同じでなくてもOKです。
ただし、同じ出なくてもなるべく似たフォントを探す。
デザインが崩れないレベルには同じpx単位で配置はしてください。
細かい微調整の作業自体は体験したほうがいいですよ。
6：最後に検証ツールで答え合わせ
完成したら検証ツールで答え合わせです。
divやspan、classとidの使い分け等自分とは違う答えになると思います。
ここで、自分が間違っているとは思わなくて大丈夫。
数学と違い、プログラミングのコードの書き方は一つではありません。
あなたのコードも正解なのです。
答え合わせをすることで、見慣れないタグやメソッドが使われてたりしますので、そこをチェックして使い方を調べておいて次の機会で使ってみましょう。
ほら、これでまた一つレベルアップしましたね。
7：どうしても実装出来ない所は一旦置いて先へ進める
HTMLとCSSだけでは、どうしても再現しきれない部分が出てくるかもしれません。
例えばアニメーション（メニューの開閉の動き等）はJavaScriptを利用するためどれだけ調べても答えに行きつけない場合もあります。
その場合で真似れるとこだけ真似て次へ進みましょう。
重要：分からないことはとにかく調べる
詰まるとしんどくて嫌になるかもしれませんが、Google検索を最大限利用して、分からないことは徹底的に調べて答えを導き出してください。
HTML、CSSという言葉を含めて検索していけばきっと求める答えにたどり着けます。
プログラミングには「検索力」も重要です。
「調べる」ことが、プログラミングで一番重要なスキルといってもいいかもしれません。
そのくらい「検索力」は大切です。
詰まったら投げ出さずに「成長のチャンス」と思って調べて調べて調べぬいてください。
こちらの【調べる、学び直す、質問する】プログラミングのエラー解決の方法！で検索の仕方のコツを紹介していますので参考にしてください。
おススメ模写サイトを3つ紹介
ここでは模写向きなおススメサイトを3つ用意しました。
iSaraは他のサイトでもよくおススメされている定番サイトですね。
下2つは同じ企業さんのサイトですが、ヘッダーの構成が結構違う所もあるのでどちらもおススメですよ。
更に学習を進めて手を加えてみよう
上記で書いた「7：どうしても実装出来ない所は一旦置いて先へ進める」の部分はあとで再挑戦してみましょう。
JavaScriptもしくはjQuery（JavaScript簡単に使うためのフレームワーク）まで習得すれば、ほぼ全ての見た目を真似出来るようになります。
学習が進んだら、先に模写した部分に更に手を加えてより本物と同じになるように仕上げましょう。
まとめ：プログラミング学習を進めサイト模写へ挑戦【ルール決めが重要】
- プログラミング学習を進めサイト模写へ挑戦【ルール決めが重要】
- おススメ模写サイトを3つ紹介
- 更に学習を進めて手を加えてみよう
如何でしたでしょうか？
模写をする上で、しっかり習得するためのルール作りの重要さが分かっていただけたのではないかと思います。
模写は、とにかく自力で完走することが大切です。
模写をしっかり経験して、さらにワンランク上を目指してください。
人気記事 おススメのプログラミングスクール3社、副業、独立、転職を目指す方へ【無料、返金あり】