HTMLコーディングをエレガントにする必要最低限の3つのツール

elegant

こんちわ。まなぶです。
WEB系のエンジニアにとって必要なスキルって
一昔前はPHPとかJavaとか、プログラミング言語がメインで
HTMLは「とりあえず書ければOK!」だったり
「見た目OKなら構造はどーでもいい」だったり
結構おざなり感が強い印象でした。
JavaScriptも設計や構造なんてものは無く「とりあえず動けー!!」みたいな。

最近はいわゆるフロント周りをキッチリ・キレイに作らないと
仕事の成果としては評価できないことが多くなった気がします。
HTMLのタグ構造がしっかりしていないとSEOの効果が得られにくいのは昔からですが
CSSスプライトを積極的に取り入れたり、JSをHTMLの最後に置くなどの
ある意味「フロントチューニング」が一般的になってきているはず。
WEB上での表現が複雑になっていくほど、サーバーサイドや
キャッシュなどのネットワークではない、
HTML/CSS/JSを中心としたパフォーマンスチューニングって技を
身につけておかなければならない時代かと。

そこで、エレガントにHTMLをコーディングするために
必要最低限、これ絶対使うだろ?ってツールを3つほどご紹介します。
どれもこれも、だいぶ今さら?感が否めませんが、一応まとめということで。


Chrome デベロッパーツール

chrome_developer-tool

最近のブラウザには大抵、この類いのツールがついているので
別にChrome デベロッパーツールに限定した話ではありませんが、
個人的に日頃つかっているブラウザがChromeなもので。。。
おそらく説明は不要かと思うので、よく使う機能を解説しますと、

  • 第3位 ちゃんとリクエストが飛んでいるか見る[Networks]
    この使い方はHTMLコーディングというよりJSやサーバー側の
    デバッグに利用する事がほとんどですが、よく使います。
    パフォーマンスを解析するのも便利ですよね。
  • 第2位 これぞデバッグ[Console]
    Sourcesのタブと掛け合わせでJavaScriptの
    デバッグを行うときに使います。HTML関係ないですね(汗
  • 第1位 CSSを調整する[Elements]
    画面を確認しながらCSSを修正して、その結果を本来の
    CSSファイルに反映するのに良く使います。
    他にも使い道が多く、だいぶお世話になっている機能です。

ちなみに、WindowsをやめてMacを使い始めてからというもの
Chromeのショートカットがいまだに覚えられず、
「ようこそメールへ」などという、とんちんかんなダイアログを
たびたび表示させてしまうのは、ここだけの内緒です。


W3C Markup Validation Service

http://validator.w3.org/
w3c_markup_validation_service

王道中の王道かも知れませんが、あえて。
念のため概要を紹介すると、あなたが書いたHTMLが
W3Cの勧告に従っているか?ってのをチェックしてくれる
サービスなんですが、これ良く考えるとすばらしいサービスですよね。
24時間365日なWEB屋さん用の赤ペン先生です。え?例えが古い?
とにかくエラーの内容を眺めるだけでHTMLについての知識が増えます。
基本、「え?これダメなんだ?」って内容しか身に付きませんが
基礎を学ぶには実はもってこいのツールなんじゃないんですかね?
当然、リリース前にチェックするってのが本来の使い方です。


Google PageSpeed Tools

https://developers.google.com/speed/pagespeed/
google_page_speed

これも最初のブラウザと同じで類似のツールがいろいろあるんですが、
SEOの効果とか考えてGoogleのものを紹介します。
ページのレスポンス速度を改善するために
「おまえ、ばか、ここ直せ!」と、ページのダメなところを
リストアップしてくれます。
これもただ眺めているだけで「ああ、基本ここやっときゃいいのね」って
基礎的な知識が得られるんじゃなかろうかと。
大体どのサイトも同じ結果ですしね。
キャッシュ、圧縮、画像の最適化、JSの位置などなど。
個人的にはあまり好きじゃなかったCSSスプライトなんかも
デフォルトで対応しておいた方がいいんだなと改心させられました。


さて、いかがでしたでしょうか。
当たり前の人にとっては、当たり前すぎる内容でしたが
個人的な経験則でいくと、汚いHTMLコーディングする人は
「W3Cって何?」って平気で言う人もいたりするので
あえて基本中の基本を取り上げてみました。
HTMLに限らずコーディングもドキュメントも「エレガント!」と
思えるものを作成したいですよね。
特に趣味のコーディングは陶芸家が焼いた皿を割るように
納得の一品ができるまで壊しては作りを繰り返そうと
改めて心に誓った、とか誓わないとか。。。
で、このページはどうなんだって?そりゃ、あーた、野暮でっせ。

コメントを残す

メールアドレスが公開されることはありません。