ブラウザだけでJavaScriptを書いてみよう

先日の誕生日前にSummally（サマリー）ページをさり気なく告知したのに、Wantsリストのモノを何ひとつ貰えませんでした。
バルセロナチェアあたり誰かくれると思ったのになぁ・・・
というわけで、まだまだ誕生日プレゼント絶賛受付中のアクアです。

今回はブラウザの「コンソール」についてのお話です。

開いてみよう

Google Chromeを例にさっそく見てみましょう。
ショートカットキーはWinなら「Ctrl + Shift + J」、Macは「Command + Option + J」で表示されます。

いじってみよう

試しに「a」と入力してみましょう。すると・・・

そうなんです。コード補完されるんです。Googleさん優しいでしょ。

Hello World!

定番のあれを入力しまして、

エンターキーで実行！

はい、出ました。
ということで、ブラウザ以外使わずHTMLファイルも作成せずにJSを書いて実行できちゃいました。

コンソールログを使ってみよう

「エンターキーで実行ということは改行しないで1行で書かなければいけないの？」と思った方はご安心を。「Shift + Enter」で改行可能です。
今度は1年が何時間／何分／何秒なのか計算してみましょう。

こんな感じで、普通に変数も使えるし改行もできます。
でも、このまま実行するとダイアログが3回も出現してスマートじゃないですよね。

そこで「コンソールログ」を使ってみましょう。

「alert()」を「console.log()」に書き換えました。
これで実行すると。

コンソール内に黒字で出力が表示されました。
「console.log()」はコンソールに出力されますが、ブラウザの画面上には表示されません。Flashのtrace的な感じで動作をトレースしたい箇所に忍ばせておけば状況確認できるというわけです。
もちろん、HTMLファイル内のJSでも外部ファイルのJSでもコンソールログは使用可能ですよ。

ページ内の要素にアクセスしてみよう

コンソールで書いたJSからもページ内のHTML要素にアクセス可能です。
例えば、

これを実行すると、

背景真っ黒。

イメージとしては最後に読み込まれる外部JSという感じでしょうか。
したがって、jQueryを読み込んでいるページならjQueryも使えちゃいますよ。

実際どういうとき使うの？

JSの動作をトレースするときに「console.log()」を使いましょう。プログラムを止めずに処理を追えてスムーズですよ。

私アクア個人的には、ちょっと複雑な計算をするときやブックマークレットを作るときにパッと開いてサクッと書くという感じで、気軽に開いて思いついたコードを実行するのに使っています。

今までコンソールに馴染みがなかったという方はぜひお試しあれ。