X-HACK

【1日目】Chromeデベロッパー・ツール

javascript, tutorials1 min read

🚀 このページで学ぶこと

  • デベロッパー・ツールの使い方
  • コンソールの使い方

🚀 学ぶ理由

🚀 事前準備

Chromeブラウザのインストールを使って説明をしていきます。Chromeブラウザがない場合は、インストールを事前に行ってください。

Chromeブラウザ以外にもデベロッパー・ツールを使えるブラウザがあります。 使い慣れたブラウザでデベロッパー・ツールを使える場合は、そちらを使っても問題ありません。

🚀 Chromeデベロッパー・ツールを使ってみよう

デベロッパー・ツールとは?

Webアプリのデバッグやパフォーマンスチューニングに役立つツール群のことです。

JavaScriptを実行したり、通信の状況を確認したり、HTMLのレイアウトを確認したりといったWebアプリ開発で役に立つ便利な機能が使うことができます。

Chromeブラウザに標準で搭載された機能(Chrome以外のブラウザにも似た機能を持つものもあります)です。

これがデベロッパー・ツールです!最初はごちゃごちゃしていて恐ろしく見えるかもしれませんが、使っているうちに自然と慣れます。ご安心を😊

dev tool

コンソールでコードを書くメリット

ブラウザのコンソールはとても便利なので、いつでも使えるように使い方の練習をしておきましょう。

コンソールを使って勉強すると、学習効率が格段に違います。
JavaScriptの挙動を確かめたい場合は、コンソールで動かして確かめましょう。

そして、例示したコードは、必ず、自分の手で実行してください。

推奨しない方法

  • テキストエディタを立ち上げ
  • HTMLファイル新規作成
  • ブラウザで開く
  • 実行結果確認

推奨する方法

  • consoleタブを開く
  • コード打ち込む

それでは、一緒に練習していきましょう。


🚀 実践!consoleタブでJavaScriptを実行してみよう

コードがうまく実行されない時は?

1.別のタブを開いて試してみましょう

2.ブラウザをリロードしてみましょう

3.Webサイトによっては右クリックを「禁止」しているものもあります。違うウェブサイトへ遷移してみましょう

🚀 consoleタブを表示する手順

1. 適当なウェブページを開く

どんなページでも構いませんので、ウェブページを開いてください。下記画像の例では、Googleのトップページを開いています。

google top

2. 右クリックして「検証」を選択

ページのどこかで右クリックを押すと、メニュー画面が出てきます。メニュー画面から「検証」を選択すると、デベロッパーツールが表示されます。

google top inspect

開くと、下記画像のような画面が表示されるはずです!

google top devtool open

ショートカットキーの紹介

デベロッパーツールはショートカットキーでも開くことができます。

  • Mac PCの場合、command(⌘) + option(⌥) + i の3つのキーを同時に押す
  • Windows PCの場合、 F12 を押す

3. Consoleタブを開く

デベロッパーツールに「Elements」や「Console」などのタブが複数あります。「Console」をクリックします。

google top console open

🚀 コンソールタブでJavaScriptを実行してみよう!

変数宣言・関数・オブジェクトについては次回以降に詳しく解説します。まずは、コードを実際に書いて動かしてみましょう。

下のコードをコピーして、先ほど開いたデベロッパーツールのコンソールにペーストし、Enterを押してください。

1// - (減算)
23 - 1

下記画像のように表示されれば、コードがコンソール上で動いている証拠です!

console 01

下のコードもコピーしてコンソールに貼り付けて動かしてみてみましょう。

1// / (除算)
210 / 2
1// * (乗算)
25 * 5
1// % (余りの計算)
210 % 3
1// 変数に数値を保存して計算
2var num1 = 10
3var num2 = 15
4num1 * num2
1// ログ出力 文字の場合は`引用符`と呼ばれる記号で囲むこと
2console.log("好きな文字")
1// 警告表示
2alert("好きな文字")
1// 関数の登録
2function hello(){
3 console.log("HELLO WORLD!!")
4}
5// 関数の呼び出し
6hello()
1// JavaScriptオブジェクト
2var obj = {
3 name: "松田信介",
4 age: 34,
5 favorite_foods: ["バナナ", "りんご", "スイカ"]
6}
7obj.name
8obj.age
9obj.favorite_foods[0]

varオブジェクトなどの詳しい説明は後日行なっていきます。 今は書いてあるコードの意味がわからなくても問題ありません。コンソールを使うことに慣れましょう!

Consoleタブはめちゃくちゃ頻繁に使うので、必ず使い方を覚えるようにしてください。

🚀 プログラミングしている時のConsoleタブ使い方の一例

JavaScriptプログラミングをしている時、以下のような状況でConsoleタブを確認します

  1. 処理がどこまで進んだか確認する場合
  2. 変数に今どのような値が入っているか確認する時

下記のように console.log() というメソッドを使いながらプログラムを書くと、コンソールに結果(ログ)が表示されるため動作を確認する際に便利です。

コンソールを使って効率的に開発を進めましょう。こういったconsoleの使い方を「consoleデバッグ」と呼んだりします。重要なテクニックなので、覚えておきましょう。

大事なポイント: consoleデバッグ

consoleにデータを表示させて、プログラムの動作を確認しながらコードを書くこと。処理の流れが追いやすくしたり、変数にどんなデータが入っているかを確認しやすくできる。

1var a = 100
2a = a * 1.5
3console.log("変数a:" + a) // 変数a:150
4console.log({a}) // {a: 150}
5a = "hello"
6console.log({a}) // {a: "hello"}

しっかり理解して使いこなしてください。

🚀 コンソールの使い方

1. コンソールの見方

> (左に開いた矢印)の行は、実行されるコード

> a=10

< (右に開いた矢印)の行は、returnされた結果(式が評価された結果)

< 10

何もない行は、単にconsoleに出力された情報 (console.log で出力された文字など)

01day 04

console.log の 戻り値undefined
var n = 10 の 戻り値undefined

01day 05

2. キーボードの上キー(↑)を押すと、直前に入力したプログラムを呼び出せます

以前に実行したプログラムを再度実行したいときに便利です。
以前実行したプログラムを修正して実行することもできます。

3. 🚫マークをクリックすると、コンソールの中身をクリアできます。

consoleに出力されたlogを削除し、綺麗にしたい場合に使えます。
変数や関数などは登録されたままです。

01day 03


二日目は、変数とは何か?なぜプログラミングには変数が必要か?そして、変数の名前の付け方の解説をします

次回はこちら JavaScript道場:2日目 / 変数について