プログラミング

【あなたは正しく使えてる?】検証ツールの正しい使い方【コーディングで必須】

こんにちは、現在フリーランスのエンジニアとして3年ほど活動しているしょーごと申します。

みなさん「検証ツール」または「Chromeデベロッパーツール」という言葉を聞いたことがあるでしょうか?

検証ツールを知らずにコーディングを行うことは不可能ですし、正しく使えていない人が多いので、今回の記事を通して正しく使っていただければと思います。

しょーご
しょーご
既に使っている人も、検証ツールには多くのまだ見ぬ便利機能が詰まっているので、この機会に是非!

この記事で学べること

検証ツールを使用して正確なコーディングを行えるようになる

検証ツールとは?

検証ツール Web制作 コーディング 使い方

検証ツールで今回紹介する機能・できることは以下のとおりです。

検証ツールの機能
  1. コードチェック、デバッグ
  2. レスポンシブ確認
  3. エラーチェック(今回の重要ポイント!
  4. SEOチェック

実際にやってみたほうが早いので、今検証ツールを起動してみましょう!

検証ツールはChromeブラウザで使用することができます。

検証ツールの起動方法
  1. 右クリック→検証
  2. Ctrl+Shift+I(MacではCommand + Option + I)
検証ツール Web制作 コーディング 使い方
右クリックの場合は「検証」を選択

検証ツール① コードチェック、デバッグ

まずはコードのチェックやデバッグ方法を学んでいきましょう。

検証ツールの左上のアイコンをクリックします。

検証ツール Web制作 コーディング 使い方

すると、ホームページ上の各要素を選択することができます。

検証ツール Web制作 コーディング 使い方


カーソルを合わさった箇所は色が変わり、一つ一つの要素がどのようソースーコードで構成されているのかが分かります。

ユースケース① CSSで色を変えてみる

例えばこのボタン

検証ツール Web制作 コーディング 使い方

なんとなく「青色」にしたらどうなるだろうと変えてみるとします。

まずはボタンにフォーカスを当ててソースコードを確認します。

検証ツール Web制作 コーディング 使い方

すると、ボタンの色は.top-image-btn-color aというところにあたっているようです。

なので、ここを変えてあげればいいです。

検証ツール Web制作 コーディング 使い方
検証ツール Web制作 コーディング 使い方

検証ツールでカラーコードをblueにした結果、ボタンを青色にすることができました。

ユースケース② HTMLの変更

例えばボタンのテキストを「コーディング教材ページへ」に変えたいとします。

まさひろくん
まさひろくん
テキスト変えてみたらどうなるかな〜

という場合にソースコードをいちいち触って確認するのは億劫そうです。

その場合も変更したい部分をダブルクリックすれば変更可能になります。

検証ツール Web制作 コーディング 使い方
テキストを書き換えてEnterすると
検証ツール Web制作 コーディング 使い方

こちらの方がしっくりきそうであれば、ソースコードも変更すればいいと思います。

検証ツールでの変更は反映されない

疑問として

まさひろくん
まさひろくん
検証ツールで行った変更ってコードに反映されるのでしょうか?

という疑問があるかと思いますが、ブラウザのHTML,CSSをいじっているに過ぎないので、本番公開されているサイトを検証ツールでいじっても基本的には問題ありません。

なので、

  • ソースコードを確認するほどじゃないけど、色とか余白を変えて表示確認してみたい
  • サイトの気になる部分を検証で覗いてどういうコードになってるか確認する
  • 自分の書いたCSSがちゃんとあたっているか確認する
  • おしゃれなサイトのコードやライブラリを覗いて参考にする

みたいなときによく使います。

検証ツール② レスポンシブ確認

検証ツールではレスポンシブ表示の確認をすることができます。

ここのアイコンをクリックすると、

これはiPhone6,7,8
様々なデバイスを選択可能
これはタブレット表示

このようにレスポンシブやデバイス幅を確認することができます。

特にタブレット周りは崩れがちなので、要注意です!

ブラウザ幅を変えても確認する

同時にブラウザ幅をかえて連続的な表示の確認もしましょう。

世の中には様々なブラウザ幅やデバイスで使っている人がいるので、変な表示になっている部分は極力なくしたほうがいいです。

クライアントさん

なんかここバグってるみたいです!

と結構指摘されることになります笑

しょーご
しょーご
ちなみに残念ながら、この「検証ツールのiPhone,iPad」「実際のiPhone,iPad」では表示が違う場合のほうがはるかに多いです。なので実機で確認するかエミュレーターが必要になったりします、難しいですね。

検証ツール③ エラーチェック

恐らく日頃検証ツールを使っている人でも知らない方がいるかもしれません。

検証>Consoleの部分です。ここにエラーが出ていないか確認します

いくつかエラーが出ていますね。

(index):920 Uncaught ReferenceError: _ is not defined
    at (index):920

ここに Webサイトで起こっているエラーがまとめて表示されているので、エラー文を一つ一つ呼んで問題を解消していく作業が必要になります。

しょーご
しょーご
ちょっとこのサイト問題がありますね…

このコンソールエラーは見る人が見たらかなり分かりやすいので、納品や他人への表示チェック依頼の前に潰しておくことが最低限のマナーになります!

余談ですが、ここではJavaScriptを実行することができるので、console.logの結果を見たりできます。変数の中身を見るときとか便利ですね。

検証ツール④ SEOチェック(Lighthouse)

これは上級者向けです。サイトの改善などをする人向けです。

Lighthouseとはウェブページの品質改善の指針を「パフォーマンス」、「PWA」、「アクセシビリティ」、「ベストプラクティス」、「SEO」点でチェックしてくれるツールで、サイトの分析に使えます。

Generate Reportをクリックする

このようにレポートが作成されます。

これはあんまりよくないスコアですね…

ちなみにちゃんとしたサイトだと、ちゃんとした数値が出てきます。

敬愛するICS MEDIAさんです

ふつくしぃ…

サイトの改善施策出し

具体的なユースケースとしては、

  1. パフォーマンス
  2. PWA
  3. アクセシビリティ
  4. ベストプラクティス
  5. SEO

各項目ごとの点数を上げていくことで、サイト改善の指標に用いることができます。

検証ツールをコーディングで使い倒そう

ここまで検証ツールの使い方を説明してきました。

最近仕事柄初学者の方のコーディンチェックをすることが多いですが、特に

  1. レスポンシブチェック、タブレットなどが甘め
  2. Consoleにエラーが出まくり

の方が目立つので、今回の記事を読まれた方は是非、検証ツール使いこなしていただいてエラーのないサイトを組み上げてほしいなと思います。

お疲れさまでした!

おすすめの拡張機能も入れておきましょう!

\\\コーディング課題公開中///

HTML初心者からWordPress実案件レベルまでのコーディング演習課題noteで公開しています。

コーディング練習課題
  1. XD,PSDデザインからのコーディング
  2. 2回の表示確認特典
  3. ポートフォリオOK

初級編は初めてデザインからコーディングする方向け、中級編はJavaScriptやjQueryの練習、上級編WordPressの実案件を模擬体験できるレベル感にしています。

しょーご

自分が「これを実案件までに学習しておくと良いな」と感じたポイントを詰め込んだ教材になります!

さらに、まとめて購入していただくとかなりお得になります。

コーディングは書籍だけではなかなか実力がつかないので、ぜひ腕試しにご利用ください!!

あなたに是非読んでほしい記事です!