JavaScript開発時に便利なツールたち

はじめまして。アメーバ事業本部でディベロッパーをしています、平木(id:Layzie)です。

先日2/9に行なわれたFrontrend Vol.4で"JavaScript Development Tools – JavaScript開発の効率アップ"というテーマで登壇させていただいたのですが、セッションでは時間の都合でお話できなかった補足や、その他のツールのご紹介をしていきたいと思います。

こちらの公式サイトで各講演のスライドと動画を見ることができますので、残念ながらイベントにいらっしゃらなかった方は、ぜひご覽になってください。

Chrome Canaryビルドについて

講演ではお話できませんでしたが、Chromeには複数のバージョンが存在しており、開発時にはその内のChrome Canaryビルドを使用すると便利です。

便利な理由としては以下です。
  • ほぼ毎日ビルドが更新されているので最新の機能が使用できること
  • プロファイルが正式版とは別になり、余計なCookieや拡張機能などが入らないので普段使いのChromeと開発用のCanaryビルドと使い分けができること
Web Develoer Toolsでの最新機能例としては、Canvas要素のFrameのProfileが取れたり、Networkタブのパスを右クリックすると、URLがcurlコマンドとしてコピーできたりなどなど。また、もちろんchrome://flagsからアクセスできる試験運用機能も正式版より豊富になっています。

Chrome(WebKit)の最新のAPIなどを使用したい場合は、特にこちらのCanaryビルドの使用をお勧めします。

余談ですが、ChromeのDeveloper ToolsはCSSを変えることによっていつもの見た目とは違うテーマを使うことができたりします。
たまに気分を変えてみるのも良いかもしれません(例：http://github.com/frontdevDE/mnml-devtools-theme)

Charles

デバッキングプロクシとして、ご紹介したCharlesについてです。時間の都合で結構端折ってしまったのですが、このソフトはやたらと高機能です。講演でご紹介できなかった機能を一部ご紹介したいと思います。

HTTP通信の内容が気軽に見れる

$1 pixel｜サイバーエージェント公式クリエイターズブログ

これに関しては、特定の1ページだけの通信などは前述のChrome Developer Toolなどでも確認が可能ですが、一度ベージ遷移したりリロードしてしまうと、以前のリクエストなどは分からなくなってしまいます。

Charlesの場合は独立したソフトのため、どのブラウザのいつの通信でも記録してくれるのが特徴です。Chromeの拡張機能の通信なども記録してくれますので、拡張機能の開発時などには重宝するのではないでしょうか。JSONのレスポンスなどもきちんと分かりやすく構造化して見れます。

$1 pixel｜サイバーエージェント公式クリエイターズブログ

モバイルブラウザの通信内容のキャプチャ

例えばMacでCharlesを動作させておき、iPhoneの通信内容をCharlesでキャプチャしたいという場合には以下のような手順で作業することにより実現可能です。
  1. まずはPCとモバイル機器が一緒の無線ルーターに繋っていることが前提になります。
  2. CharlesのメニューのProxy→Proxy Settings→Proxiesタブの"HTTP Proxy"のPort番号をメモ

    $1 pixel｜サイバーエージェント公式クリエイターズブログ
    $1 pixel｜サイバーエージェント公式クリエイターズブログ
  3. PCのIPアドレスをメモ(Macだとシステム環境設定→ネットワーク→IPアドレスが該当します)
  4. iPhone前提ですと、設定→Wi-fi→自分の無線ルーターの項目にHTTPプロキシという項目があるので"手動"に設定し、サーバーに3のIPアドレス、ポートに2のポート番号を入れる

    $1 pixel｜サイバーエージェント公式クリエイターズブログ
以上でiPhoneなどのモバイル機器の通信内容がCharlesで見れると思います。

HTTPのリクエスト・レスポンスの書き換え

メニューからTools…→Rewrite…→Rewrite Settingsで"Enable Rewite"にチェックを入れて、ルール設定をすると、HTTPリクエスト・レスポンスなどを書き換えすることができます。

$1 pixel｜サイバーエージェント公式クリエイターズブログ

HeaderやBody、Queryなどを好きなように書き換えすることが可能になります。これを使うと特別ブラウザで設定しなくてもUAなどの偽装が可能になったりします。

$1 pixel｜サイバーエージェント公式クリエイターズブログ

まだ他にも色々と機能があるのですが、正直自分も全ての機能を使った…ということはないので、「こんな機能を使ったら開発が楽になった」など事例があれば、教えていただけると嬉しいです。

1つ注意点として、開発時にCharlesでローカルのCSSやJavaScriptを見るように設定していると、他の人がサーバーにアップした変更がいつまで経っても反映されない…ということがあります。「修正してくれたって言ってたのに何も変わってない…」という場合はCharlesのMap Localの機能を切ってみることをオススメします。自分はこれで何回か泣きました。

jshint

.jshintrcファイル

サイトの下にあるチェックボックスでどのエラー内容を細かくセッティングするようになっています。CUIでも同じようにセッティングしたいと思うのが人情です。

このセッティングをするのが".jshintrc"という設定ファイルになります。俗にrcファイルというものですが、コマンドラインのツールでは".hogerc"などのようにピリオドを先頭にし、コマンド名+rcという名前が設定ファイルとして良く使われます。

書き方としてはJSONファイルになっており、設定したい項目(サイトのチェックボックスの項目)をkeyにして、valueを真偽値で設定するのが一般的な設定項目になっています。一例として自分がサンプルとしてGistに上げたものをご覽ください。

こちらのファイルを自分の$HOMEディレクトリか、プロジェクトのトップディレクトリに置いて`--config`オプションでそのファイルを指定してあげるなどして使います。

詳しい項目はjshintのドキュメントにもあるのですが、日本語で解説をしてくださっている方がいらっしゃいますので、そちらの方が見やすいかと思います。

JSHintで気軽なコーディングを

jshintのエラーの対処

jshintのエラーメッセージは分かりやすいものもあれば、「何でこんなエラー出てるの？」と思うものもあるかと思います。JSLint Error Explanationsでエラーのテキストを検索すると、どのような時に出るエラーか？なぜエラーにされるのか？正しい対応の仕方が1ページにまとまって参照できるようになっているので、便利です。

ただ単に読むだけでも、JavaScriptの勉強になるのではないかと思います。

jshint-i

jshintをコマンドとして叩いた場合、エラーの数が多いと画面をスクロールしないと最初のエラーが分からなかったりと不便な場合があります。色々と対処の仕方はあるかと思いますが、jshint-iというツールを入れるのも良いかもしれません。

使い方はほとんどjshintと変わりがありません。
npm install -g jshint-i
npmコマンドでグローバルオプションを付けて、jshint-iをインストール後に
jshint-i path/to/jsfile
とすると
line: 23
Character: 12

> }))
Missing semicolon.

[n] Next; [r] Rescan; [q] Quit; Action:
とエラーを1個ずつ表示してくれるようになります。次のエラーを見たい場合はn、もう一度最初から調べる場合はr、jshint-iから抜ける場合はqを入力してください。こじんまりとして中々見やすいのではないかと思います。

Plato

最後に、講演でご紹介しようかどうか迷った末に、結局やめてしまったPlatoというコマンドラインツールをご紹介したいと思います。

このツールはどんなものかというと、JavaScriptを静的に解析した上でHTML上でその結果をグラフなどにして見せてくれるというツールです。

こちらもNode.js製のツールになりますので、npmでインストールします。
npm install -g plato

インストール後にソースを解析したいプロジェクトに移動して以下のようなコマンドを打ってください。
plato -r -d report path/to/js

コマンドオプションはGitHubのREADMEをご覽いだきたいですが、このコマンドの意味としてはjsファイルがあるディレクトリを再帰してreportという名前でplatoのレポートを作成するディレクトリを作るというものになります。

その後report/index.htmlをブラウザで開くと以下のような画面で、メンテナンスの容易さやコード行数、潜在的なバグが発生する確率などが各JavaScriptファイル毎にグラフで表示されます。(例は自分が作ったライブラリなので1つのファイルですが)

$1 pixel｜サイバーエージェント公式クリエイターズブログ

またグラフの中のファイル名をクリックすると各JavaScriptファイルの詳細画面に遷移してこのようになります。円グラフは各関数の行数や複雑さなどを表示しており、円グラフをクリックすると該当の関数を表示してくれます。

該当関数にはjshintでのエラー内容などが確認できるようになっています。

$1 pixel｜サイバーエージェント公式クリエイターズブログ

このツールの使い所としては、リファクタリングする際などにどのファイルから取りかかれば良いか？などの指針を決める時や、コードレビューなんかに使うことができます。ビジュアルもキレイなので、分かりやすいかと思います。

まとめ

今回はFrontrend Vol.4でお話させていただいた、JavaScript開発環境についての補足を書かせていただきました。

講演のまとめの繰り返しになるのですが、JavaScriptは開発に際して敷居が低く取っつきやすい言語ですが、本格的な開発をする時には逆にJavaのIDEであるEclipseなどのように「これがあれば必要十分」というようなツールが少ないです。(IDEとしてWebStormのような優秀なツールも出てきてはいますが…)

このために、色々なツールを必要に応じて組み合わせることにより、開発効率を格段にアップさせることが必要不可欠になると思います。例えば、はてなブックマーク、や、Qiitaなどのサイトのウォッチや、英語にはなりますがDailyJS、JSPro、JavaScript Weeklyの購読などしておくと色々と自分の知らない便利なツールが見つかり、幸せなJavaScript開発ができるようになるかもしれません。

ここまで読んでいただき、ありがとうございました。