🐶

マークアップエンジニア未経験の人に知ってもらいたい保守性の高い最低限HTML設計

2022/07/24に公開

なぜこの記事を書こうと思ったか

私が実際にマークアップエンジニアがいないEC開発のプロジェクトを経験した際にかなり苦労しました。
私はそのプロジェクトに途中参加し、マークアップ側を整理する役割でした。
が、私が参画するまではマークアップエンジニアを経験したエンジニアがおらず、かなりコードが煩雑化していました。

たかがマークアップ、されどマークアップ。

少しでもマークアップに知識を持った人がいれば、私はあんなに苦労することもなかったのに、、、。
今からマークアップを勉強するには少し腰が重い人のために、最低限の知識を身につけていただけたらと思ってこの記事を書きました。

HTML設計はどのように設計するべきなのか

ここは絶対に決まっているわけではないですが、以下のように設計すると、コードの可読性がグッと上がります。

HTML設計でまず最初に意識してほしいのは、「見出し」を軸に設計してほしいということです。
「見出し」とは「h1、h2、h3、h4、h5」といったhタグのことです。

セマンティックコード「section」を使用しない場合

例えば以下のようなコードがあったとします。

<div>
  <h1>見出しh1</h1>
  <p>見出し1の文章です。</p>
  <div class="flexbox">
    <div class="left">
      <span>flexboxの左です</span>
    </div>
    <div class="right">
      <span>flexboxの右です</span>
    </div>
  </div>
  <div>
    <h2>見出しh2</h2>
    <p>見出し2の文章です。</p>
  </div>
  <div>
    <h2>見出しh2</h2>
    <p>見出し2の文章です。</p>
    <div>
      <h3>見出しh3</h3>
      <p>見出し3の文章です。</p>
    </div>
  </div>
</div>

これ、すごく見づらいと思いませんか。
どこでdivタグが閉じてるんだよ！！って言いたくなってストレスが溜まってきそうです。

実はセマンティックHTMLでは「sectionタグ」というものがあります。
見出しがある「divタグ」を「sectionタグ」に変えるだけでかなり可読性が上がります。
ちなみに「divタグ」と「sectionタグ」の動作は同じなので、cssで調整することなどは特にありません。

セマンティックコード「section」を使用した場合

それでは先ほどのコードを「sectionタグ」で記載してみましょう。

<section>
  <h1>見出しh1</h1>
  <p>見出し1の文章です。</p>
  <div class="flexbox">
    <div class="left">
      <span>flexboxの左です</span>
    </div>
    <div class="right">
      <span>flexboxの右です</span>
    </div>
  </div>
  <section>
    <h2>見出しh2</h2>
    <p>見出し2の文章です。</p>
    <div>
      <h3>見出しh3</h3>
      <p>見出し3の文章です。</p>
    </div>
  </section>
  <section>
    <h2>見出しh2</h2>
    <p>見出し2の文章です。</p>
    <section>
      <h3>見出しh3</h3>
      <p>見出し3の文章です。</p>
    </section>
  </section>
</section>

どうでしょう？かなりコードが見やすくなったと思いませんか？
この「divタグ」を「sectionタグ」に変更することで、「あぁ、ここはh2タグのsectionなんだな」と一目でわかるようになります。

また、エディタやIDEによっては、コードを畳むことができるかと思います。
コードを畳むときも、「divタグ」ではどこを畳めばいいのかわからなくなったりしますが、
「sectionタグ」にすると、どこを畳めば良いのか一目瞭然ですよね。

HTMLコードの理想

最終的にHTMLコードはこうなってほしいといった私からの願いを込めた理想コードです。
コードを畳んだときにこうなるのが理想系です。

h1タグの「section」コードを畳んだとき

<section>...
</section>

h2タグの「section」コードを畳んだとき

<section>
  <section>...
  </section>
  <section>...
  </section>
</section>

h3タグの「section」コードを畳んだとき

<section>
  <section>
  </section>
  <section>
    <section>...
    </section>
  </section>
</section>

こんな感じでコードを畳んだときにsectionで閉じているとすぐにどこを指しているのかがわかりやすいです。

まとめ

セマンティックコード「section」を使用した場合のメリット

■ コードの可読性が良くなる。
■ CSS設計の「FLOCSS」との相性が抜群に良くなる。
■ 実際に画面を見たときに、どの画面がどのコードを指しているのかもわかりやすい。

「HTML設計なんてマークアップエンジニアの仕事だろ！」と言う方もいるかもしれませんが、開発はチームプレーなので、ぜひこの機会に少しでもマークアップにも興味を持っていただけたらと思います。

その少しの気遣いがプロジェクトを成功にもたらしてくれることを願っています。