HTMLのコードを効率良く整理する方法を現役デザイナーが解説【初心者向け】
初心者向けにHTMLのコードを効率良く整理する方法について解説しています。コード整形の必要性、インデントや改行を使った整形の基本、Cloud9の機能を使った自動整形の方法を紹介します。読みやすいコードを作成するために必ず覚えておきましょう。
テックアカデミーマガジンは受講者数No.1のプログラミングスクール「テックアカデミー」が運営。初心者向けにプロが解説した記事を公開中。現役エンジニアの方はこちらをご覧ください。 ※ アンケートモニター提供元：GMOリサーチ株式会社 調査期間：2021年8月12日～8月16日 調査対象：2020年8月以降にプログラミングスクールを受講した18～80歳の男女1,000名 調査手法：インターネット調査
HTMLのコードを効率良く整理する方法について、TechAcademyのメンター（現役エンジニア）が実際のコードを使用して初心者向けに解説します。
そもそも、HTMLの記述方法がわからない場合は、 HTMLの書き方について解説した記事を読むとさらに理解が深まります。
なお本記事は、TechAcademyのオンラインブートキャンプ、Webデザイン講座のHTMLカリキュラムをもとに執筆しています。
今回は、HTMLに関する内容だね！
どういう内容でしょうか？
コードを効率良く整理する方法について詳しく説明していくね！
お願いします！
コード整形とは
可読性のための改行やインデントを取り除かれたソースコードは、人が読むためのソースコードにはなっていません。機械的に処理させて、処理速度の向上や難読化を目的に合理化されています。そのコードは、圧縮済みとも呼ばれており、ふたたび、人が読むためには、コードを整形する必要があります。
コードの整形は、インデント（半角スペース）にて構造的にすることです。下記にインデントを取り除いたサンプルコードを用意しました。
See the Pen
2020-01-20-sample14 by YOHEI INAI (@yohei_inai)
on CodePen.
なぜコードを整理すべきか
機械的に処理させて、処理速度の向上や難読化を目的に合理化されたコードは、人が読むのには適しておらず、運用やメンテナンスもしづらくなりまして、作業の効率が悪くなってしまいます。そのため、特に理由がなければ、コードにはインデントも記述してから構造的に表現されている状態にて保存されているのが望ましいです。
HTMLのコードを整理してみよう
<div><ul><li>箇条書き</li><li>箇条書き</li><li>箇条書き</li><li>箇条書き</li><li>箇条書き</li><li>箇条書き</li></ul></div>
上記のサンプルコードを例に、タグの構造にしたがって、法則性のある改行とインデントを記述していきます。
<div>
<ul>
<li>箇条書き</li>
<li>箇条書き</li>
<li>箇条書き</li>
<li>箇条書き</li>
<li>箇条書き</li>
<li>箇条書き</li>
</ul>
</div>
構造に合わせて、2個の半角スペースにて積み重ねました。これらのコードの整形は、AWS Cloud9の機能を使用して、自動化が可能です。
AWS Cloud9のメニューの「Edit」から、「Code Formatting」の「Apply Code Formatting」を選択することにて、コードを自動的に整形できます。
監修してくれたメンター
| 井内洋平
TechAcademyの現役メンター。 元Web Developerで、趣味は貯金、節税対策、投資信託、株式投資、FXなど多岐にわたる。 |
内容分かりやすくて良かったです！
ゆかりちゃんも分からないことがあったら質問してね！
分かりました。ありがとうございます！
TechAcademyでは初心者でも、オリジナルWebサイトを公開できる、オンラインブートキャンプを開催しています。
また、現役エンジニアから学べる無料体験も実施しているので、ぜひ参加してみてください。
