模写コーディングで意識すべきこと[便利ツールも紹介]
こんにちは、のせです。
みなさん模写コーディングはしていますでしょうか。web制作の仕事をする上で、手っ取り早く実践で使えるスキルを身に着ける方法が模写コーディングであると言われています
今回はwebサイトの模写コーディングをやる上で意識すべきことや便利ツール、やっても無駄なことなどについて書いていこうと思います。
模写コーディングをやるときの心得
コード書く前にHTMLの構造をイメージする
いきなり適当にコードを書き始めると、だいだいヘッダーのメニューあたりを作る段階でコーディングの手が止まります。
手を動かす前に、ここがh2でこの横並びはflex-boxよりinline-blockだな、こことここは同じクラスだな、みたいな感じでHTMLの構造をイメージすることが大切です。
あらかじめ要素の配置などを意識することで、HTMLの構造ごと書き直すというミスを減らすことができます
HTMLを書き直すとほぼ確実に、それまでに記述したcssの挙動がおかしくなり、cssまで大幅に書き換えることになり、時間が勿体無いです。
わからなかったらググる、すぐに答えを見ない
どうやって記述したらいいかわからない部分があったら、それは自分が成長できるチャンスです。
ディベロッパーツールなどですぐに答えを見ずに、とりあえず精一杯調べましょう。
”わからない→自力で解決”という流れを繰り返すことで、自分のできることを増やしスキルアップすることができます。
ググるときのテクニックとして、英語で調べてみるという方法がかなりオススメです。
とはいえ、全く進まず消耗しすぎてもよくないので30分くらい調べても解決しなかったら、一旦放置して次の作業に移るなり、答えをみてしまってもいいと思います。
模写コーディングに使える便利ツール
Chromeデベロッパーツール
実案件のときも大活躍するデベロッパーツールの基本操作は早めに習得しておきましょう。
ディベロッパーツール基本操作についてはこちらのサイトにわかりやすくまとまっています。
初心者向け！Chromeの検証機能（デベロッパーツール）の使い方
live server
エディタでhtmlファイルやcssファイルを更新するたびにサイトをリロードしなきゃいけないのは非常にめんどくさいですよね。
live serverを使えばファイルを更新した瞬間にwebサイトに変更内容が反映されるので非常に便利です。
Atomやsublime textなどのエディタにはプラグイン機能としてlive serverを使うことができます。
Image Downloader
模写したいwebサイトの画像をダウンロードできるchromeの拡張機能です
ColorPick Eyedropper
サイトの色を取得できるchromeの拡張機能です
Ruler
要素の長さを取得できるchromeの拡張機能です
模写コーディングでやっても無駄なこと
以下の内容は模写コーディングのときにやってもあんまり意味はないかなとおもいます。
- 要素の幅や高さ、要素間の余白を完璧にコピー
- フォントファミリー、フォントサイズの設定
- テキストの内容をコピーする
そもそもなぜ模写コーディングをするのでしょうか、少なくとも模写したサイトが本家とどのくらい似てるかということに達成感を得るためではないはずです。
模写コーディングはコーディングに慣れることによって作業ピードを上げたり、今までできなかったサイトのアニメーションとかを勉強するためですよね。
上記の３つは基本的に完璧にコピーしても時間の無駄です。理由は単純で、一度やり方さえ覚えてしまえばそれで十分だからです。
しかし、実際に案件を受けるときはデザインデータ通りに完璧に再現しなければならないため、一回は完璧に模写するということもやっておいた方がよいかと思います。
まとめ
今回は模写コーディングのやり方について書いていきました。まとめると下記の通りです。
- コードを書く前にHTMLの構造をイメージする
- わからなかったらググる、すぐ答えを見ない
- ツールを上手く活用する
- 無駄な模写はしない
上記のことを意識して楽しく効率の良いコーディングライフを送りましょう。
今回は以上になります。
