目次

開発ツール

ウェブブラウザーの Firefox (ファイヤーフォックス)には「開発ツール」という機能が搭載されているらしく HTML , CSS , javascript の編集などを行えるようです。

今回の投稿では、この開発ツールを使用して javascript の作成・実行テストを行ってみたいと思います。

Firefox の開発ツール。スクラッチパッドの画面。
Firefox の開発ツールのスクラッチパッドという javascript の作成と実行テストができる画面です。

今まで javascript の実行テストを行う時は、パソコンのデスクトップに test.html などを作って、 HTML の基本的な構造を書いて、そこに javascript を足していくというやり方をとっていました。

HTML とセットで編集する時は良いのですが、 javascript だけを少しテストしてみたい時は、開発ツールも便利かもしれません。

目次まで戻る

それでは

それでは開発のツールの起動から javascript の作成・実行テストまで行ってみたいと思います。以下 Step.1 - 5 までありますがよければごらんください。

Step.1

まずは開発ツール自体を表示します。

  1. ブラウザの右上にあると思いますが、横棒 3 本のアイコンをクリックします。
  2. スパナのアイコンになっている「開発ツール」をクリックします。余談ではありますが今回の投稿のアイキャッチ画像はメカ的なイメージで歯車の画像にしてみました。

Ctrl + Shift + I のキーボードショートカットからも表示できるようです。

Firefox の開発ツールを表示します。
Firefox の開発ツールを表示します。 ( 1 ) の横棒 3 本のアイコンはハンバーガーメニューというらしいです。納得の命名です。

Step.2

  1. 開発ツールの歯車のアイコンの「オプション」ボタンをクリックします。
  2. 「スクラッチパッド」にチェックを入れます。
Firefox の開発ツール。オプション設定の画面。
スクラッチパッドを表示する設定に変更します。
  1. 「スクラッチパッド」が表示されている思いますので「スクラッチパッド」のタブをクリックします。
  2. 「スクラッチパッド」のタブの中に javascript を書いて実行テストまで行えるようです。これは手軽そうです。
Firefox 開発ツールの画面。スクラッチパッドを表示したところ。
スクラッチパッドに javascript を書いて javascript 実行テストができるようです。

Step.3

それでは何かの javascript を書いてテストしてみたいと思います。内容は何が良いかと思い、いまだに私がよく理解できていない json (ジェイソン)のテストに決めてみました。この少しのテストをなかなかやらなかったのでよい機会ができました。

  1. コードを入力してみます。以下のコードを入力してみました。
    var j={"a":100,"b":200};
    console.log(j);
    console.log(j.a);
    console.log(j.b);
    console.log(j["a"]);
    console.log(j["b"]);
    
  2. 「実行」ボタンをクリックします。
Firefox 開発ツールのスクラッチパッドで javascript の実行テスト。
javascript のコードを書いて、実行してみます。

Step.4

  1. 「コンソール」タブをクリックします。
  2. 「コンソール」タブの配下に現れるタブの中の「ロギング」をクリックして選択状態にします。初期状態ですでに選択状態になっているかもしれません。
  3. 実行結果が表示されていると思いますので、内容を見てみます。
  4. Object 自体を出力したためか、 Object の文字はリンクになっています。このリンクをクリックしてみます。
Firefox の開発ツール。コンソールの画面。
「コンソール」の画面です。 javascript の実行結果が表示されています。

Step.5

  1. そうすると右側の画面にオブジェクトの中身が表示されました。オブジェクトの内部構造が分かりやすくて便利な機能だと思います。
コンソールでオブジェクトの中身を表示。
オブジェクトの中身が表示されています。

目次まで戻る

多次元の JSON

多次元ということでよいのかはっきりとわかりませんが入れ子になっている JSON データのテストも行ってみたいと思います。

今度は 2 ステップで完成までいきます。

Step.1

次は以下のコードを入力してテストしてみます。

var j={"a":{"a1":100,"a2":200},"b":{"b1":300,"b2":400}};
console.log(j);
console.log(j.a);
console.log(j.b);
console.log(j.a.a1);
console.log(j.a.a2);
console.log(j.b.b1);
console.log(j.b.b2);
console.log(j["a"]);
console.log(j["b"]);
console.log(j["a"]["a1"]);
console.log(j["a"]["a2"]);
console.log(j["b"]["b1"]);
console.log(j["b"]["b2"]);

私の中のイメージでは以下のような感じです。

  • j ※ j の中身はオブジェクトの予定です。
    • a ※ a の中身はオブジェクトの予定です。
      • a1 ※値は 100
      • a2 ※値は 200
    • b ※ b の中身はオブジェクトの予定です。
      • b1 ※値は 300
      • b2 ※値は 400
Firefox の開発ツールのスクラッチパッドで多次元 JSON のテスト。
入れ子になっている JSON データを入力してテストしてみます。

Step.2

結果は以下のようになりました。

コンソールで多次元 JSON のテスト結果表示。
入れ子になっている json データを出力した結果の画面です。

少し行数があるので入力データと出力データを並べて見てみます。

var j={"a":{"a1":100,"a2":200},"b":{"b1":300,"b2":400}};
console.log(j); //Object { a: Object, b: Object }
console.log(j.a); //Object { a1: 100, a2: 200 }
console.log(j.b); //Object { b1: 300, b2: 400 }
console.log(j.a.a1); //100
console.log(j.a.a2); //200
console.log(j.b.b1); //300
console.log(j.b.b2); //400
console.log(j["a"]); //Object { a1: 100, a2: 200 }
console.log(j["b"]); //Object { b1: 300, b2: 400 }
console.log(j["a"]["a1"]); //100
console.log(j["a"]["a2"]); //200
console.log(j["b"]["b1"]); //300
console.log(j["b"]["b2"]); //400

目次まで戻る

参考情報

スクラッチパッド - 開発ツール | MDN
https://developer.mozilla.org/ja/docs/Tools/Scratchpad
console - Web API インターフェイス | MDN
https://developer.mozilla.org/ja/docs/Web/API/console

目次まで戻る

あとがき

以下のようにすると表形式で出力されるのでオブジェクトの中身が更にわかりやすいと思います。 console.table(j); の部分です。

var j={"a":{"a1":100,"a2":200},"b":{"b1":300,"b2":400}};
console.table(j);
console.table(); を使用。
console.table(j); を使用してみます。
console.table(); の出力結果。
console.table(j); を使用した出力結果です。

それにしても JSON データは簡潔で便利な技術です。開発ツールも相当に便利に思いました。

以上、閲覧ありがとうございました。

目次まで戻る

[ Amazon.co.jp アソシエイト ] JavaScript 関係の本
https://amzn.to/48EoeGM

同じカテゴリの投稿(ブラウザ)

前後の投稿