【模写コーディング②】「Write」

「Write」の模写コーディング完了！

毎日Progateというサイトでプログラミングの勉強をしていますが，それだけでは仕事としてお金を稼げるほどの技術は身につきません．

Progateで基礎を学んだ次のステップとしては，実物のWebサイトを見よう見まねで写す「模写コーディング」という勉強法がおすすめだという記事を見たことがあるので，最近は模写コーディングに取り組んでいます．

今回は練習台として2つ目の，「Write」というページを模写しました．

「Write」とは？

Writeは，WordPressのテーマの一つです．下にリンクを張っておきます．

http://demo.themegraphy.com/write-ja/

見てもらうと分かるように，シンプルで落ち着いたデザインです．

背景は白，写真や図も少ないので，初心者が模写コーディングの練習として使用するにはうってつけでしょう．

できなかたこと

できなかったことをまとめておきます．

・写真の幅を親要素の幅に合わせられない

・アイコンのサイズの微調整

・アイコンの線の太さの調整

・aタグに無駄なアニメーションがつく

・flexでの幅の微調整

勘違いでできていなかったこともありますが，今の自分が理解するには問題の根が深すぎてできなかったこともあります．

しばらくはあまり突っ込みすぎず，今後必要な知識だと判断したときに勉強します．

感想：割と似せられる

Writeは初めて見たWebサイトでしたが，割と似せることができたと思います．

初めて模写したサイトは前回取り組んだ「Progate」で，それまでに何度も触れていたことがありました．

そのために前回割とうまく模写できた時は当然と言えば当然だったのですが，今回は初見のサイトでも期待以上に書くことができたので，少し自信がつきました．

お気づきの方もいるかもしれませんが，私は細かいことを追及できない性格なので，多少レイアウトなどがずれていても「これならOKやろ！」と及第点を付けています．

気づき：スピード感大事

今回で2つのWebサイトの模写を経験して気づいたことは，短期間で模写したほうが効率がいいということです．

毎日少しずつやるより，1～2日くらいでちゃっちゃと終わらせた方がトータルでかかる時間は短くて済むと感じました．

というのも，毎日少しずつやっていると，以前の自分がどういう意図でコードを書いたのか，何を書き終えていて何をまだ書いていないのかを思い出すのに，時間がかかるのです．

少し見ればすぐ思い出せるのですが，ボリュームが増えていくほど全容を思い出すのに時間はかかりますし，毎日同じことを思い出すのは無駄だと思いました．

実際，今回は1週間ほどかけて模写したのですが，成果物を見て，「あれ？これだけの内容に1週間もかかったの？」とショックを受けました．

今度からは短期集中型で模写コーディングに取り組もうと思います．