Webコーディングの写経から学べること【38Web-12】
余所のWebサイトをそっくりそのまま真似してコーディングしています。これを「写経」というようですが、どういうことを学びながらやっているのかまとめました。
38歳からWebエンジニアを目指しているフェニックスA子（@lipton_milk999）です。
このnoteのファンだと言っていただけることがちらほら出てきて、やる気がでましたw ありがとうございます。
Webの写経をしている環境
まず、唐突ですが画面狭すぎて死んだのでデュアルディスプレイにしました。
【ハード環境】
・Macbook Pro 13'' 2018年（昨日買った）
・iPad Pro（夫の奪った）
・Duet display（iPadをデュアル化するアプリ）
【ソフト環境】
・Sublime Text（エディタ）
・Google Chrome デベロッパーツール
写経をしているサイト（参考）
なんでも良いのですが、私がWebエンジニアになろうと思ったきっかけである、iSaraを写経して学ぶことにしました。
Webコーディングの写経で何を学ぶか？
写経とは、そっくりそのまま同じようにコーディングすることです。
とはいえ、ソースコード見てコピペしたら1秒で終わるのでそうではなく・・・
私の場合、Chromeの開発ツールを使って次のような手順でやってます。
＜写経の手順＞
① コンテンツの大枠＊（中身は空っぽ）を作る（
＊header、about、conversion・・・のこと
② １コンテンツごとに、まずHTMLのみを写す
③ 次に１コンテンツ分で登場したclassのスタイルシートを写す
④ 画面を見比べ、違っていたら原因を探す（＊最重要項目）
①について、<div>の最上位の大枠を並べることで、大まかな構成と区分けを知ります。
②について、HTMLのみ写すことで、枠組みを知ります。どれだけ<div>で区切っているのか、その目的はなんなのか。
③について、Webデザインのキモです。コードの整理の仕方や、属性をどの要素につけているのかを見ます。（heightをimgに付けるのか、それを包括しているdivにつけるのか、など）
④が最も大切だと思うのですが、原因調査をすることには次の2つの重要な意味があります。
・Chromeデベロッパーツールの解析の仕方を覚える
・うまくいかない原因の特定の仕方（セレクタの指定、効いているclassやcssファイルの特定）を覚える
多分これが、コーディングを実際やる上で最も大切で時間も食うところかと。写経はその練習だと思ってやっています。
写経をするときの開発ツールの「見どころ」
「あれ、なんかこの部分の表示が見本と違う・・・」となった場合、見所がいくつかあります。
① 効いているCSSセレクタ（idやクラス）
まず最初に見るのは、おかしな部分に反映されているcssのクラスは何かの特定。
開発ツールでは、カーソルモード（①）にして、マウスをコード上に乗せると、対応する画面の要素をハイライトしてくれます（②）（逆も可能）。これを使って、おかしな場所のコードをまず特定します。
次に、画面右上のcss情報を見ます。対応範囲に効いているcssセレクタ（idやクラス）が表示されてます。まずここですでに、見本と写経で全然違うことが多い。
他にもこのcss部分からは、チェックを外すと要素ごとにcssを無効化することができるので、何が効いているのか／いないのかの確認に使えます。
css画面を下にスクロールしていくと、要素のmarginやpaddingなどが確認できます。
余白が見本と写経で異なる場合、この部分を比較することで原因を特定できます。
効いているcssファイルの特定
cssの右上に「style.css:1229」などとありますが、これが効いているcssファイルと行数。
ここで、style.cssなどユーザが作ったものが原因なら修正すればいいのですが、bootstrap.cssやその他の.less ファイルなどが原因となっている場合、ちょっと厄介です。
cssフレームワーク（Bootstrapや.lessなど）をどうするか
cssを楽に扱うためのツール、cssフレームワークのファイルを入れていなくて真似できない場合、対応するか力技で真似することになります。
正直、対応させなくても効いているコード自体は画面に出ているので、そのまま真似して、現在のクラスに無理やり突っ込んでもよいのですが・・・それは最終手段ですね。
まず、「.lessってなに？」と基本からググった方が、自分のためには良いと思います。
私の場合、.lessの導入まで真似する気は（今は）なかったので、諦めてcssに「/* .lessの再現 */」という枠を作って取り込みました。
Bootstrapにはバージョンの違いがある（3と4）
Bootstrapについては、3と4でかなり変わっている部分があります。ひどい話だと廃止されたクラスもたくさんあります。
写経元が古かった場合、それ真似しても正直おいしくないので、Bootstrap4に載せ替えましょう。
BS3のpanelが、BS4ではcardになっているなど。他にも対応しているアイコンフォントなどに差があります。
力技で再現することも必要
さらに、BS3とBS4ではデフォルトの余白指定が若干違うところがあるようなので、それはもう力技で上からかぶせて真似しました。
「そっくりそのまま同じコードじゃないけど、結果的に同じ見た目を作れる」ことは、多分役に立ちます。
画面って要するに見た目なんで。
気づいたことはメモしよう
写経しながら「これは使える」「こういう指定もできるのか」といったことは、すぐ忘れるのでメモしながらすすめています。
思いついた順に書いているので、Numbersのチェックリスト形式を使っています。
いずれまとめるかもしれないし、まとめないかもしれない。何割かは、写経を繰り返すうちに慣れて頭の中に入るかもしれません。
「写経」は必ずしも手ですべてのコードを打つわけじゃない
写経は構成や使っている要素、コーディングのコツを覚えることだと思ってるので、慣れてきたらコピペが増えてきます。
最初は手で打った方がいいと思いますが・・・全部は効率わるいですからね。
特に、原稿のテキスト部分なんて手で打ってもしょうがありませんし。
私の場合、慣れてきたら見た目の指定（margin, padding, color, font系）はもう全部コピペしてます。中身を目でざっとみてるだけ。
とりあえず、こんなことをしながら写経をやっています。
おかげで、ちっとも終わらないけど、デザインの数をこなす前に、まずコーディングの効率化と使える引き出しを増やすことが目的なので。
【このnoteはマガジンにまとめています。フォローしてね。】
F1クリエイターとして、そしてWebデザイナーの駆け出しとして、自らの手でサイトを立ち上げています。 ご支援を糧に素晴らしいものを作りたい。 どうぞ、よろしくお願いします。