フィーリングでHTMLとCSSを書いていた新卒が模写コーディングをやった話

Ateam Lifestyle Advent Calendar 2019の21日目は
株式会社エイチームライフスタイル @kmfjが担当します！
初めての投稿で至らぬ点もありますがよろしくお願いします。

はじめに

新卒でwebデザイナーをやっています。
普段はビジュアル〜マークアップ領域までを業務として行なっています。

きっかけ

一からサイトを作った経験はあるものの独学で生き抜いてきたため、入社前までは

• コピペで組み立て
• コードの意味はなんとなく理解
• 見た目を見ながら無理やり調整

のパワー型脳筋コーディングでなんとか組み立てていました。

なんとなくは理解しているため、ProgateのHTML、CSSコースなどは問題なくクリアできました。
ですが、いざ実務レベルでコーディングとなると「どう構造化して実装したら良いか」がわかりませんでした。
その対策として取り組んだ模写コーディングが勉強になったと思っているので、どのように行なって、何がよかったかを記載したいと思います。

やったこと

行ったことは以下の通りです。

1. 模写するサイトを選ぶ

選んだ基準としては、サイト構造が自社のサイトに近く、今後活かせそうなものを選びました。デザインが好みのサイトなど、自分が楽しんでできるサイトなどでもいいそうです。

2. 同じ見た目になるよう自分なりにコードを書く

どうしたら同じようになるか考えながらHTMLとCSSでコードを書いていきます。

3. 本物のサイトと比較する

Chromeの検証機能などを活用して、自分が書いたコードとどこが違うか？違う場合はどうして違うか？を考えます。

気をつけた点

模写元のコードは基本的に見ない

自分で構成することを身に付けることが目的なので、極力コードは見ないようにしました。ですが、画像やカラーコードなど考えても意味のないものはコピペしたり省略したりしました。

px単位での正確性は追求しない

見た目からコードに落とし込むことが重要なので、サイズや余白などは全体レイアウトが合っていれば問題ないと思います。
「良いレイアウトを学ぶこと」や「デザインに対して完璧なコードを書くこと」が目的であればもちろんpx単位で合わせるべきですが、今回の目的とはズレるためこのルールを設定しています。

よかったこと

見た目からHTMLの組み立て方がわかってくる

ここはこういう構造にするとうまくいきそう、という勘所がわかってきます。

単純に実装パターンの幅が広がる

これが表現したい時はこうすればいいのか、が調べながら制作するうちにわかってきました。

学んだこと

上記に書いた「よかったこと」以外にも、自分で書いたコードと模写元のコードを比較すると気づくことも多かったです。大きく感じた差異は以下の2点です。

意味を考えてタグを選ぶこと

意味に合わせてタグを選ぶことで、共同作業者も理解しやすく、機械も理解しやすいコードになるのだと分かりました。
例えば、似たようなリンク要素が並んでいるコードに以下のような違いがありました。

私の書いたコード

<div class="p-content__list">
  <a href="/" class="p-card">
    <img src="images/xx.png" alt="ほげ" class="p-card__img" />
    <div class="p-card__caption">
      <span class="c-textS">ほげ</span>
    </div>
  </a>
  <a href="/" class="p-card">
    <img src="images/yy.png" alt="ほげほげ" class="p-card__img" />
    <div class="p-card__caption">
      <span class="c-textS">ほげほげ</span>
    </div>
  </a>
</div>

模写したサイトのコード

<ul>
  <li>
    <div class="category">
      <a href="/" class="item">
        <p class="thumb">
          <img src="images/xx.png" alt="ほげ">
        </p>
        <div class="categoryLabel">
          <span>ほげ</span>
        </div>
      </a>
    </div>
  </li>
  <li>
    <div class="category">
      <a href="/" class="item">
        <p class="thumb">
          <img src="images/yy.png" alt="ほげほげ">
        </p>
        <div class="categoryLabel">
          <span>ほげほげ</span>
        </div>
      </a>
    </div>
  </li>
</ul>

※内容を変更しています

いくつか異なる点がありますが、例えば複数の要素が並列で並んでいる場合、私は単純に<div>で囲んでいましたが、模写元のサイトでは<ul>要素で囲んでいました。意味を考えると、<ul>要素でくくるべきだと思います。

要素が単体で存在できるような記述

長期的に運用していく場合は、要素が入れ替わったり、無くなったりしても崩れないコードが理想だと思います。現在利用されているサイトでは、そういった今後の運用を見越した実装になっていると思いました。

例えば私が書いたコードは周りを囲う要素にpaddingを持たせていましたが、模写元は要素それぞれにpaddingを持たせていました。要素が入れ替わる可能性のある場合、そちらの方がいいかもしれません。

それ以外にも、コーディングだけでなくレイアウトや命名の仕方で学ぶ点も多々ありました。

まとめ

部分部分でのコードはかけるけど、一から作ることが苦手な人にとっては、組み立て方を学ぶいい手段になると思います。
また、実際に利用されているサイトのコードと比較することで、気づかされることも多くあると思いました。

最後に

ここまで読んでいただきありがとうございました！

Ateam Lifestyle Advent Calendar 2019の22日目は、@hytkgamiがお送りします！

"挑戦"を大事にするエイチームグループでは、一緒に働けるチャレンジ精神旺盛な仲間を募集しています。興味を持たれた方はぜひエイチームグループ採用サイトを御覧ください。
https://www.a-tm.co.jp/recruit/