無料ですぐ使えるチェックツール
コード品質は上げたいけれど、チェックにかかる手間はなるべく省きたい。
ツール自体は色々あるため自分に合ったものを選ぶべきですが、ここでは網羅的にではなく、私が実際に使っている物を中心にまとめました。
見出しをクリックすると、該当の外部サイトに飛びます。
※ツールやプラグインは随時追加予定です。
CSScomb
CSScombはSassおよびCSSのコーディングスタイルフォーマッタです。
改行やセミコロン、スペースといったコード整形に加えて、スタイルシートの各プロパティと値のセットを指定のルールに従って並びかえてくれます。
CSSは気付くと膨大な行のファイルになることが多いため、少しでも管理しやすい形にするために導入しています。一定の並びに合わせることで、同セレクタに対するプロパティの重複を防げるなど、手軽に使える割にメリットが多いと感じています。
ユーザの設定ファイルをカスタマイズすることで、独自の設定のコード整形や並べ替えルールを指定できます。
ちなみに私は Windows7、Sublime Text で同プラグインを使用しています。
調べたところ VS CODE でも使えるようです。扱いに関しては以下の記事が参考になります。
参考：
・CSScomb JS を Sublime Text 3 で使ってみる
・VS CODEでCSSのフォーマットをするまで
上記以外にも、CSScombの使い方に関する情報はたくさんあるため、必要に応じて検索してみてください。
CSScombが正常に動作せずエラーが出る場合は、SassまたはCSSの記述にミスがあるためかもしれません。
どのファイルのどこにエラーがあるのかまでは教えてくれないため、使用しているSass・CSSファイルのどこが間違っているのか確認してみてください。私が経験したパターンは以下です。
エラーでよくあるパターン
- プロパティの後ろに ;(セミコロン) がない
- セレクタのみ指定され、プロパティや値が空
HTML 5 Outliner
HTML5文書のアウトラインを確認できます。
Chrome用プラグインもあります。
チェックのたびに上記ページを開く必要がないため、使い勝手の良さは優れています。
Chromeプラグイン:HTML5 Outliner
CSS Validation Service
検証方法は「URL」「アップロード」「直接入力」の3つです。
作成途中でファイルがまだローカルにある場合は、コードをそのままコピペしてチェックできる「直接入力」を使うとよいでしょう。
PageSpeed Insights
Webページの読み込み時間を測定します。
また、診断結果としてページの読み込み時間を短くするための方法を提案します。
モバイルフレンドリーテスト
モバイルデバイスでのページの使いやすさをテストします。
ページの URL を入力するだけで、使いやすさのスコアが表示されます(原文ママ)。
Nibbler
NibblerはWebサイトをテストするための無料ツールです。
任意のWebサイトのアドレスを入力すると、アクセシビリティ、SEO、ソーシャルメディア、テクノロジなどの主要分野について、Webサイトのスコアを10点満点で評価します。
注意点としては、解析に数分程度時間がかかることと、サブディレクトリ以下のサイトを指定して解析できない点が挙げられます。