JS_デベロッパーツールの使い方

04デベロッパーツールの使い方

4-1 もっと簡単にJavaScriptを試してみる

これまでJavaScriptはmain.jsファイルを作成し、HTMLファイルを読み込み実行していました。
今後はデバッグや確認などで少しだけJavaScriptを試してみたいという場面が増えてくるかと思います。
そんなときに毎回ファイルを作成すると面倒ですよね。
そこでブラウザにはデベロッパーツールというものが存在します。ctrl + shift + j または右クリック→検証で表示することができます。
デベロッパーツールを開いたらConsoleというタブが上のほうに存在するはずです。Consoleをクリックしてみましょう。
以下の画像を参考に。

Consoleが開けたら以下のコードを入力してみましょう。

alert('hello JavaScript');

入力すると先ほどと同様にダイアログが表示されるかと思います。
ちなみに文字列の連結は以下のようにします。

alert('こんにちは' + '山田　太郎です');

4-2 console.logを使いこなそう

JavaScriptの機能の１つとしてconsole.log() という機能があります。(読み方：コンソールドットログ)　
console.logの役割は()に入れた文字列や変数、配列などをConsoleに出力してくれます。
今後実務においてこの変数には何が格納されているかな？正しく値が取れているかな？など確認の作業を必ず行います。
その時のこのconsole.logをもちいてデバッグを行います。
日頃からconsole.logでデバッグを行う癖をつけましょう。

デバッグとは？

コンピュータのプログラムの誤り（＝バグ）を見つけ、手直しをすることです。

早速、console.logを試してみましょう！

1-3と同様にConsoleにコードを入力してみましょう。

console.log("hello world");

Consoleが以下のようになればOKです。
alertとの違いはダイアログとしてウィンドウに表示されるか、Consoleに出力されるかです。

文字列と変数を連結する方法

①　+を使う方法
’こんにちは’ + name + ‘です。’

②　(バッククォート(shift + @))を使う方法
`こんにちは${name}です。`
バッククォートを使い変数を${}で囲うことで+を使わずに変数を文字列の中で使うことができます。

4-3 デベロッパーツールのその他の機能

他にもデベロッパーツールには様々な機能があり、一部を紹介します。

• Elements（エレメント）: HTMLやCSSをリアルタイムで編集し、スタイルの変更がページにどのように影響するかを確認できます。

• Sources（ソース）: ページに含まれるリソースを閲覧し、ブレークポイントを設定してJavaScriptのデバッグを行うことができます。

• Network（ネットワーク）: ページの読み込みに関するリクエストを監視し、パフォーマンスのボトルネックを特定できます。

• Performance（パフォーマンス）: ページの読み込みや実行時のパフォーマンスを分析することができます。

デベロッパーツールを使用することでJavaScriptの開発を効率よく実施できるのでぜひ使用してみてください！