初心者必見!サイト模写するときに陥りがちなミス!

どうも~、 かす(@kasumoto666)です!

皆さんサイト模写はもう始めましたか?この記事を見ている人はおそらく、もうプログラミングの基礎学習を終えて次のステップに進んでいる人が多いと思います。

それでサイト模写始めたら、びっくりすると思います。自分の無力さ、知識の少なさ、技術の低さ…。挙げて行けばきりがないないですが、安心してください。それはみんな同じです。

自分も毎日それで苦しんでました。そこで自分が今考えれば避けれたミスがたくさんあったのでそれをいくつか紹介したいと思います。これを見て少しでも皆さんの苦痛が減れば幸いです。

初心者が模写し始めにやってしまうミス!

基礎学習が終えて模写しようと思っても、結構そこで挫折しちゃうと思うんですよね。模写ってやる前は「元のサイトただ真似すればいんでしょ?」みたいな感じだったんですど、それが想像を絶するほど難しい。

ここからは自分が模写し始めの頃の失敗を実体験に基づいて紹介していきます。コーディングの勉強し始めの初心者の方は是非参考にしてください!

デベロッパーツール開いてコード丸写し

一つ目の失敗はコードの丸写しですね。これは自分がやった失敗の中ではかなり辛いほうですね。そもそも「模写」って単語の意味を若干履き違えていて、「模写=丸写し」だと思ってたんですよね。

それは模写ではなく「写経」ですね。僕はそもそも日本語が理解できてなかったってことですね(笑)でも意外とこういう人いるんじゃないかなっと思って紹介してみました(笑)

この丸写しをしようとするとものすごい時間かかる。なぜかというと元のサイトには見た目をマネするだけなら必要のないコードが大量に書かれていることが多いんですよね。

僕が模写していたあるサイトなんですが、例えばこんなんとか↓

最初デベロッパーツールで開いたとき、なんじゃこりゃってなりました(笑)こんなん見たことねーよって。でも見た目模写するだけなら必要ないんですよね。でも最初はわからないからこんなコードまで模写しなきゃって思ってしまう。

僕も訳も分からず、全く意味不明なコードを丸写しして、いざページ更新したら全然反応しないなんてことしょっちゅうやってました(笑)これめちゃくちゃメンタルやられます。

しかも意味わかんないでコード丸写ししても全く力付きません。

なので今まで身に着けてきた基礎知識でまず再現できる部分はないかを考えて、自分でコード考えて書いてみる。それでわからなかったら調べる。その繰り返しです。その方が丸写しよりもよっぽど知識も身につきます。

でも実はこれは一概に失敗ともいえないんですよね。というのも丸写し、写経を勧めている人も実際いるからです。こんな感じで。

でもこれはあくまでコードを理解しながら、やるから意味があるわけで何も考えずにただ「とりあえず丸写しすれば成長できる!」みたいな考え方はやめましょう(自分がそうだった)。理解しながら写経するのは動画でも話されている通り絶対力になると思います。

ただサイトによっては意味不明なコードとかもあったり、クラス名がわけわかんないものになっていたりということも多いのでサイトを模写する上では丸写しはあまりおすすめはしないです。

でも動画でも言われているように動画学習やドットインストールで勉強する際は写経しながら手を動かすことは絶対するべきなのでそこは忘れないように!

そもそも模写するサイトが難しい(量が多い)

そもそも最初に模写するサイトが自分のレベルよりはるかに高い。レベルが高いというよりかは量の多さですね。コーディングの量が多いとなかなか完成しなくて、モチベーションが下がりがちです。

粘り強さに自信がある人はそれでも全然いいと思うんですが、僕みたいなせっかちな人間は多少しょぼくてもいいから完成物がないと不安になるんですよね(笑)

なので最初は簡単で量の少ないサイトを模写してみて、ちょっと自分なりにカスタマイズするみたいな感じもいいと思います。

僕は一番最初はこのサイトを模写するのをおすすめします。

Airbnb公式サイト

このサイトは正直そこまでコードの量は多くないと思います。jQueryを使って動きをつける部分もありますが、最初は無視しちゃっていいと思います。まずはHTML/CSSで見た目をマネしましょう。それだけでもかなり大変だと思いますが、僕みたいなかすでもでもできたので大丈夫です(笑)

ちなみにこれを模写したものを近所のweb制作会社に送ったらインターン的な感じで採用してもらえました!なので是非初心者にはおすすめです!

完璧を目指す

次にやりがちなミスが最初から100%を目指してしまうことです。これにこだわってしまうと作業が行き詰まったり、精神衛生上良くないです。いきなり完璧にマネするなんてことは最初は中々難しいです。

勿論100%の仕上がりにできるなら、それに越したことないのですが完璧を目指しすぎるとどうしても挫折しやすくなっていしまいます。挫折して辞めるくらいなら8割くらいの完成度でいいので、どんどん学習進めた方がよっぽど自分の成長にもつながります。

自分がインターン先に提出したポートフォリオも完成度で言えば本当に7~8割のかすみたいなポートフォリオでした(笑)でもそれまでの過程を見てくれたので、案外簡単に採用してもらえました。

その辺の詳しい話はこちらでも紹介しています。

なので8割程度でいいのでとにかく作業進めて、インターンなりバイトなり、クラウドソーシングなりに応募しちゃいましょう。やっぱりそうやって実務をこなすのが一番の近道だと思います。

まとめ

  • 8割の完成度でいい!
  • サイト選びは慎重に!
  • 漠然とコード丸写しは最悪…!

以上、いかがだったでしょうか。コーディング初心者の方の少しでも助けになれたら嬉しいです。日々の愚痴でもなんでも、気軽にTwitterのDMでもブログのコメントでも受け付けてます!

最後まで読んで頂きありがとうございました!またね!