JavaScript開発者コンソールの使用方法

JavaScript

導入

現代のブラウザには、JavaScriptや他のウェブ技術と連携するための開発ツールが組み込まれています。これらのツールには、シェルインタフェースに類似したConsoleが含まれており、DOMの検査、デバッグ、ネットワークアクティビティの分析などの機能が備わっています。

Consoleは、JavaScript開発プロセスの一部として情報を記録するために使用できるほか、ページのコンテキスト内でJavaScript式を実行してウェブページと対話することも可能です。基本的に、ConsoleはJavaScriptを必要に応じて書き込み、管理し、監視する機能を提供します。

このチュートリアルでは、ブラウザのコンテキストでConsoleとJavaScriptを使用する方法について説明し、ウェブ開発プロセスの一環として使用できる他の組み込み開発ツールの概要を提供します。

注意：このチュートリアルを進めるにつれて、ブラウザとConsoleが画像の例とは異なることに気付くかもしれません。ブラウザは頻繁に更新され、新しいツールや可能性は新しいビジュアルスタイルが含まれることがあります。これらの更新は、ブラウザでConsoleを使用する能力に影響を与えるべきではありません。

ブラウザでConsoleを使用する

ほとんどの最新のWebブラウザは、標準ベースのHTMLとXHTMLをサポートしており、開発者コンソールにアクセスできます。このコンソールでは、ターミナルシェルに似たインターフェースでJavaScriptを操作できます。このセクションでは、FirefoxとChromeでコンソールにアクセスする方法について説明します。

Firefox

FirefoxでWeb Consoleを開くには、アドレスバーの横にある右上隅の☰メニューに移動します。

More Toolsを選択します。それが開いたら、Web Developer Toolsアイテムをクリックします。

これを行うと、ブラウザウィンドウの下部にトレイが開きます。

また、LinuxとWindowsではキーボードショートカットCTRL + SHIFT + K、macOSではCOMMAND + OPTION + KでWeb Consoleに入ることもできます。

これでコンソールにアクセスできたので、JavaScriptで作業を開始できます。

Chrome

ChromeでJavaScriptコンソールを開くには、ブラウザウィンドウの右上にあるメニューに移動します。メニューは垂直な3つの点で示されています。そこから、その他のツールを選択し、開発者ツールを選択します。

これにより、パネルが開き、メニューバーの上にあるコンソールをクリックすると、JavaScriptコンソールが表示されます（すでにハイライトされていない場合）。

また、LinuxやWindowsでは、キーボードショートカットCTRL + SHIFT + Jを使用してJavaScriptコンソールに移動できます。macOSでは、COMMAND + OPTION + Jを使用します。これにより、すぐにコンソールにフォーカスが移ります。

コンソールにアクセスしたら、JavaScriptで作業を開始できます。

コンソールでの作業

コンソールでは、JavaScriptコードを入力して実行できます。

Hello, World!という文字列を出力するアラートで始めてみましょう：

alert("Hello, World!");

JavaScriptの行に続いてENTERキーを押すと、ブラウザにアラートポップアップが表示されます：

式を評価した結果がコンソールに表示されることに注意してください。式が明示的に何かを返さない場合、undefinedと表示されます。

ポップアップアラートをクリックして閉じる代わりに、JavaScriptを使用してコンソールにログを出力することができます。

「Hello, World!」文字列を印刷するには、次のようにコンソールに入力します:

console.log("Hello, World!");

コンソールでは、次の出力が表示されます:

OutputHello, World!

また、コンソールで数学演算を行うこともできます:

console.log(2 + 6);

Output8

さらに複雑な数学を試すこともできます:

console.log(34348.2342343403285953845 * 4310.23409128534);

Output148048930.17230788

さらに、変数を使用して複数行で作業することもできます:

let today = new Date();
console.log("Today's date is " + today);

OutputToday's date is Wed May 18 2022 15:06:51 GMT-0500 (Central Daylight Time)

コンソールで渡したコマンドを変更する必要がある場合は、キーボードの上向き矢印(↑)キーを入力して前のコマンドを取得します。これにより、コマンドを編集して再送信することができます。

JavaScriptコンソールは、JavaScriptコードをリアルタイムで試すためのスペースを提供し、ターミナルシェルインターフェースに似た環境を使用できます。

HTMLファイルで作業する

HTMLファイルまたは動的にレンダリングされたページのコンテキストでコンソールで作業することができます。これにより、既存のHTML、CSS、およびJavaScriptのコンテキスト内でJavaScriptコードを実験する機会が提供されます。

ページを変更した後にリロードすると、ページがコンソール内で変更された状態に戻りますので、変更を保持したい場合は他の場所に保存しておく必要があります。

次の index.html ファイルのような HTML ドキュメントを取り、それを変更するためにコンソールを使用する方法を理解します。お気に入りのテキストエディタで、index.html ファイルを作成し、次の HTML の行を追加します。

index.html

<!DOCTYPE html>
<html lang="en-US">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Today's Date</title>
</head>

<body>

</body>

</html>

上記の HTML ファイルを保存し、選択したブラウザでロードすると、タイトルが Today's Date の空白のページがブラウザに表示されます。

コンソールを開き、JavaScript を使用してページを変更し始めます。まず、JavaScript を使用して HTML に見出しを挿入します。

let today = new Date();
document.body.innerHTML = "<h1>Today's date is " + today + "</h1>"

コンソールには、次の出力が表示されます。

Output"<h1>Today's date is Wed May 18 2022 15:06:51 GMT-0500 (Central Daylight Time)</h1>"

ページは次のようになります。

ページのスタイルを変更することもできます。たとえば、背景色を変更できます。

document.body.style.backgroundColor = "lightblue";

Output"lightblue"

また、ページ上のテキストの色も変更できます。

document.body.style.color = "white";

Output"white"

今、ページは次のように表示されるはずです。

ここから、<p> 段落要素を作成できます。

let p = document.createElement("P");

この要素が作成されたら、段落に追加できるテキストノードを作成できます。

let t = document.createTextNode("Paragraph text.");

テキストノードを変数 p に追加してください。

p.appendChild(t);

そして、最後に、p をその段落 <p> 要素と追加されたテキストノードと共にドキュメントに追加します。

document.body.appendChild(p);

これらの手順が完了したら、HTML ページ index.html には次の要素が含まれます：

コンソールは、HTML ページを変更して実験するスペースを提供しますが、コンソールで操作しても HTML ドキュメント自体は変更されないことを心に留めておくことが重要です。ページをリロードすると、それは空のドキュメントに戻ります。

他の開発ツールの理解

使用するブラウザの開発ツールによっては、ウェブ開発のワークフローを支援するための他のツールを利用できます。

DOM — ドキュメントオブジェクトモデル

Web ページが読み込まれるたびに、そのページが存在するブラウザは、ページのDocument Object Model（DOM）を作成します。

DOM はオブジェクトのツリーであり、階層ビュー内の HTML 要素を示します。DOM ツリーは、Firefox のInspectorパネルまたは Chrome のElementsパネルで表示できます。

これらのツールを使用すると、DOM要素を検査および編集し、特定のページの特定の側面に関連するHTMLを特定することができます。DOMは、テキストスニペットや画像にID属性があるかどうかを示し、その属性の値が何であるかを判断するのに役立ちます。

上記で変更したページは、ページをリロードする前にこのようなDOMビューを持つでしょう：

また、DOMパネルの横にまたは下にCSSスタイルが表示され、HTMLドキュメント内またはCSSスタイルシート経由でどのスタイルが使用されているかを確認できます。たとえば、Firefox Inspectorでサンプルページのbodyスタイルに含まれるものに注目してください：

DOMノードをライブで編集するには、選択した要素をダブルクリックして変更を行います。たとえば、<h1>タグを変更して<h2>タグにすることができます。

Consoleと同様に、ページをリロードするとHTMLドキュメントの元の保存された状態に戻ります。

ネットワーク

ブラウザの組み込み開発ツールのネットワークタブでは、ネットワークリクエストを監視および記録することができます。このタブでは、ブラウザがリクエストを行うタイミングや、各リクエストがどれくらいかかるか、および各リクエストの詳細など、ブラウザが行うネットワークリクエストの詳細が表示されます。これはページの読み込み性能を最適化し、リクエストの問題をデバッグするために使用できます。

JavaScriptコンソールと併用してネットワークタブを使用できます。つまり、コンソールでページのデバッグを開始し、ページをリロードせずにネットワークアクティビティを表示するためにネットワークタブに切り替えることができます。

ネットワークタブの使用方法について詳しく学ぶには、Firefoxのネットワークモニターでの作業やChromeのDevToolsでのネットワークパフォーマンスの分析の始め方について読むことができます。

ウェブサイトがレスポンシブであるとは、さまざまなデバイス（モバイル電話、タブレット、デスクトップ、およびラップトップ）で見た目と機能の両方が適切に設計され、開発されていることを意味します。画面サイズ、ピクセル密度、およびタッチのサポートは、デバイス間で開発する際に考慮する要因です。ウェブ開発者として、レスポンシブデザインの原則を心に留めておくことは重要です。これにより、人々がアクセスできるデバイスに関係なく、ウェブサイトが完全に利用可能になります。

FirefoxとChromeの両方に、ウェブサイトやアプリケーションを作成して開発する際にレスポンシブデザインの原則に注意を払うためのモードが用意されています。これらのモードを使用して、開発プロセスの一環として調査および分析できるさまざまなデバイスをエミュレートします。

FirefoxのResponsive Design ModeまたはChromeのDevice Modeについて詳しく読んで、これらのツールを活用して、より公正なウェブテクノロジーへのアクセスを確保する方法を学びましょう。

結論

このチュートリアルでは、モダンなWebブラウザ内でのJavaScriptコンソールの操作の概要と、ワークフローで使用できる他の開発ツールに関する情報を提供しました。

JavaScriptについてさらに学ぶには、データ型や、jQueryやD3ライブラリについて読むことができます。

Source:
https://www.digitalocean.com/community/tutorials/how-to-use-the-javascript-developer-console