これまで、「実装編」「解説編」に分けて、日報アプリに実装した要素を説明してきました。

　実際の開発では、周辺の補助ツールを利用することで開発生産性や品質の向上を図ります。第15回からは、前回までで作成した日報アプリケーションを題材に、実際の開発でよく使われるであろう以下のツールについて、順に説明していきます。

  • クライアントでデバッグする： 開発者ツール
  • Styleの記述の高度化： Less/Sass/Stylus
  • JavaScriptの品質向上のためのaltJS: TypeScript
  • 早期にバグを発見する: JSLint/JSHint/ESHint

　今回取り上げるのは開発者ツールです。

クライアントでデバッグする：開発者ツールの使い方

　最近のPC向けWebブラウザ－には「開発者ツール」と呼ばれる、デバッグツールが内蔵されています。JavaScriptなどのクライアントで動作するプログラムはここでデバッグできます。

開発者ツール（Google Chrome）
開発者ツール（Google Chrome）
[画像のクリックで拡大表示]

　開発者ツールは主な機能として、以下をそろえています。

  • DOM要素やスタイルの確認及び編集
  • JavaScriptのソースコードの確認やデバッグ（ブレーク、変数値の確認）
  • 通信状況の確認
  • パフォーマンスプロファイラー

　他にどのような機能があるかや各機能の詳細については、hifiveのサイトも参照してください。ここでは主に、デバッグの方法と、DOM構造・スタイルの確認について説明します。ブラウザ－によって機能に差がありますが、ここで説明する基本的な機能についてはどのブラウザーも提供しています。以降ではChromeに付属する開発者ツールを取り上げて説明します。

　開発者ツールを開くには、Webブラウザーを開いた状態で［F12］キー、［Ctrl］＋［Shift］＋［I］、またはメニューから「ツール」→「デベロッパーツール」を選択して開きます。

開発者ツールの開き方（Google Chrome）
開発者ツールの開き方（Google Chrome）
[画像のクリックで拡大表示]