Webエンジニアを目指すならぜひ使ってほしい、HTMLの整形ツールについて
  • facebookページ
  • twitterページ
  • 2020.06.03

    Webエンジニアを目指すならぜひ使ってほしい、HTMLの整形ツールについて

    HTMLの自動整形ツールを使い、読みにくいHTMLを整形しておくと、後からそのHTMLを直すことになった場合、とても楽です。また、読み易いHTMLの書き方が解らない、という方は、ぜひ、整形後のHTMLを真似て書けば、読み易いHTMLが書けるようになります。今回は、HTMLの自動整形ツールについて紹介します。

    読み易いHTMLに整形するメリット

    HTMLは、「」で囲ったタグをたくさん使い、Webページに表示するコンテンツを記述します。しかも、タグとタグの間に改行を入れずに書くことも可能です。そのため、書き方によっては、かなり読みにくいHTMLも書けてしまいます。

    そして、そのような読みにくいHTMLを読み易くするのが整形です。次から、HTMLを整形するメリットについて解説します。

    HTMLは読みにくい

    他の人の書いたHTMLを編集することになり、あまりに読みにくいコードに閉口した経験のある方は、意外に多いのではないでしょうか。なお、HTMLは、Webブラウザが処理するための言語のため、人が読み易いようにはできていません。

    特にHTMLのタグは「」で囲まれており、人が読んだ場合、その開始と終了が解り難いうえ、何重にも階層構造が作られていると同じタグが連続したりします。さらに、複数のタグを使ったHTMLが1行で書かれていたりすると、編集箇所を探すだけでかなり時間がかかってしまいます。

    このように、HTMLは、人が読み易いコードではありません。そのため、普段から読み易いHTMLを書く習慣が必要です。ただし、自分にとって読み易いコードが、他の人にとっても読み易いとは限りません。そのため、一定のルールに従って整形することが重要であり、そのための自動整形ツールが使われることもあります。

    HTMLの整形の基本はインデント

    インデントとは、プログラムを読み易くするための空白、またはタグを使い、行の開始位置を右側にずらすことを言います。そして、プログラムでは、繰り返しループや条件分岐した際の処理などで、よくインデントが使われます。

    このインデントは、HTMLでもよく使用されます。例えば、HTMLには階層を持つタグが幾つかありますが、そういったタグで続けて書いてしまうと、その構造が解り難くなるでしょう。そこで、下の階層を書く際、改行して行の開始位置を2文字または4文字ずらすことで、その階層構造が見やすくなります。そしてこれが、HTMLの整形の基本です。

    インデントを適用した例

    例えば、ulタグとliタグを使い、HTMLのリストを作った場合、次のように書けます。

    インデントを意識しない書き方の例

    <ul><li>リスト1</li><li>リスト2</li><li>リスト3</li></ul>

    しかし、これでは、後から修正しようとすうると、その構造が解り難くなります。そこで、インデントと改行を使って次のように整形してみましょう。いかがでほうか、見やすくなったのではないでしょうか。

    インデントを意識した書き方の例

    <ul>
    <li>リスト1</li>
    <li>リスト2</li>
    <li>リスト3</li>
    </ul>

    とはいえ、慣れていないと、どこを改行したり、インデントを入れたら良いのか解りません。そういった方は、自動で改行やインデントを入れてくれる自動整形ツールを活用しましょう。

    HTMLを整形してくれるサイト

    HTMLの整形を手軽に利用しようと思ったら、オンラインで誰でも無料で利用できるWebサイトがおすすめです。このようなサイトを使えば、HTMLをコピペするだけで、整形後のHTMLが表示されるので、ぜひ、利用してください。ただし、このようなサイトは、HTMLの整形とはどういったことかを知りたい方向け、または、HTMLを簡単に整形してみたいという方が利用するサイトです。業務で利用するなら、後述の別の方法を利用しましょう。

    次から、代表的なサイトを紹介します。

    Syncer Webツール

    Syncerは、あらゆさんが公開しているHTML・CSS・JavaScriptの整形が可能なWebツールです。そして、HTMLなどのコードをコピペするだけで、即座に整形後のコードが表示されます。

    HTMLのコード整形ツール

    HTML整形ツール(プチ・デバッグ機能付き)

    このサイトも個人の方が作成した、HTMLをコピペするだけで簡単に使えるシンプルなWebツールです。また、整形後、HTMLのバイト数や行数などを表示する機能もあります。

    HTML整形ツール(プチ・デバッグ機能付き)

    FREEFORMATTER.COM

    このサイトは、英語のWebツールなので、何か難しいことが書いてあるのかと思われるかもしれません。しかし、使い方は、上の2つの日本語のサイトと同じで、HTMLをコピペするだけです。また、もちろん日本語も使えるうえ、サイズが大きい場合は、ファイルをアップロードして整形させることも可能です。

    Free Online HTML Formatter – FreeFormatter.com

    HTML編集ツールの自動整形を活用する

    普段、HTMLを書くために、どのようなツールを使っているでしょうか。OS付属のテキストエディタとWebブラウザがあれば、最低限HTMLを作ることは可能です。しかし、プロとしてHTMLを作っている方なら、何か専用のツールを使うのが一般的です。

    そして、そのHTML編集ツールに、自動整形が付いているのではないでしょうか。よく利用されているHTML編集ツールの自動整形について紹介します。

    Dreamweaver

    Dreamweaverは、Adobe社がサブスクリプションで提供しているプロ向けのHTML編集ツールです。同じAdobe社の画像編集ソフト、PhotoshopやIllustratorとの連携に優れており、ファイル管理機能など多くのメリットがあることから、多くのWeb制作会社が利用しています。

    なお、DreamweaverはWebサイト開発専用の統合開発環境であり、HTMLを作るテキストエディタの他に、Webブラウザと同等の表示機能や文法チェック機能など、HTML開発に必要な機能が全て揃っているツールです。そして、そのようなDreamweaveには、「ソースフォーマットの適用」という機能があり、この機能を活用することで、乱雑に書かれたHTMLコードを、見やすく書き直してくれます。

    Adobe Dreamweaverの購入 | webデザインソフトウェア

    プログラム開発用の統合開発環境

    プログラム開発を仕事にしている人なら、Visual Studio CodeやEclipseといった無料で使える統合開発環境を利用されている方が多いでしょう。このような統合開発環境は、HTMLやCSS、JavaScriptの開発にも対応しています。そして、HTMLを書く際に、自動整形機能が利用できます。

    さらに、そのような統合開発環境では、HTMLとCSSを効率よく書くためのプラグイン、Emmetが利用可能です。ショートカットでインデント済のひな型コードを追加する、といったことができるので、ぜひ活用してください。

    テキストエディタを使う

    これまで説明したDreamweaverやプログラム開発用の統合開発環境は、高機能な分、パソコンに大きな負担をかけます。そのため、会社支給のパソコンにインストールして使うと、かなり遅いので不便、という方もいるでしょう。そして、そのような方の多くは、フリーで使えるテキストエディタを活用しています。

    今、プログラム開発にも使われるオープンソースのテキストエディタは、マクロやプラグインなど、機能を追加可能です。そして、その中にはHTMLを自動整形してくれるマクロやプラグインがあります。テキストエディタが使いやすい、という方は、ぜひ、このようなマクロやプラグインを利用してください。

    無料で使えるテキストエディタの例

    サクラエディタ

    Atom

    統合開発環境のHTML整形をカスタマイズする

    統合開発環境やテキストエディタのHTML整形を、デフォルト設定の状態で使うことも可能ですが、所属する会社やチームの方針に合っていないこともあります。そのような場合は、統合開発環境のHTML整形をカスタマイズして利用しましょう。

    Visual Studio CodeのHTML整形のカスタマイズ

    プログラム開発用の統合開発環境であるVisual Studio Codeは、HTML開発用としてもよく利用されています。そして、そのHTML整形機能は、Visual Studio Codeの設定ファイルのsettings.jsonを編集することで、修正可能です。

    なお、このsettings.jsonは、HTML整形以外にもいろいろな設定で使われており、かなり大きなテキストファイルです。ネットの記事などを参考に修正して、その機能を試してみてください。また、会社やチームで同じ設定ファイルを使っている場合もあります。その場合は、詳しい方に設定内容を教えてもらいましょう。

    まとめ

    HTMLを書く仕事をするのなら、どのツールを使うかが重要です。それは、使っているツールによって、生産性にかなり差があるからで、プロなら効率良く作れる多機能な統合開発環境を使いこなしましょう。そして、そのような統合開発環境には、自動整形が付いています。ぜひ、自動整形も使いこなし、編集しやすいHTMLが作れるようになってください。



    優良フリーランス案件多数掲載中!
    フリーランスエンジニアの案件をお探しなら
    ポテパンフリーランス

    この記事をシェア

    • Facebookシェア
    • Twitterシェア
    • Hatenaシェア
    • Lineシェア
    pickup









    ABOUT US

    ポテパンはエンジニアと企業の最適なマッチングを追求する企業です。

    READ MORE