前書き
最新のブラウザには、JavaScriptやその他のWebテクノロジーと連携するための開発ツールが組み込まれています。 これらのツールには、DOMの検査、デバッグ、ネットワークアクティビティの分析を行うツールに加えて、シェルインターフェイスに似たコンソールが含まれています。
コンソールは、JavaScript開発プロセスの一部として情報を記録するために使用できます。また、ページのコンテキスト内でJavaScript式を実行することにより、Webページと対話できます。 基本的に、コンソールはJavaScriptをオンデマンドで記述、管理、監視する機能を提供します。
このチュートリアルでは、ブラウザのコンテキスト内でJavaScriptでコンソールを操作する方法について説明し、Web開発プロセスの一部として使用できる他の組み込み開発ツールの概要を説明します。
ブラウザでコンソールを操作する
標準ベースのHTMLおよびXHTMLをサポートする最新のWebブラウザーのほとんどは、ターミナルシェルに似たインターフェースでJavaScriptを操作できる開発者コンソールへのアクセスを提供します。 FirefoxおよびChromeでコンソールにアクセスする方法について説明します。
Firefox
FireFoxでhttps://developer.mozilla.org/en-US/docs/Tools/Web_Console[Web Console]を開くには、アドレスバーの横の右上隅にある[☰]メニューに移動します。
そこから、レンチアイコンで示された[開発]ボタンをクリックして、[Web開発]メニューを開きます。 それを開いた状態で、Webコンソールのメニュー項目をクリックします。
image：https：//assets.digitalocean.com/articles/eng_javascript/js-console/firefox-web-console-menu.png [Firefox Webコンソールのメニュー項目]
そうすると、ブラウザウィンドウの下部にトレイが開きます。
image：https：//assets.digitalocean.com/articles/eng_javascript/js-console/firefox-web-console-tray.png [Firefox Webコンソールトレイアイテム]
LinuxおよびWindowsの場合はキーボードショートカット + CTRL + + + SHIFT + + + K +、またはmacOSの場合は + COMMAND + + + OPTION + + `+ K +`を使用してWebコンソールに入ることもできます。
コンソールにアクセスしたので、JavaScriptでコンソール内で作業を開始できます。
クロム
Chromeでhttps://developers.google.com/web/tools/chrome-devtools/console/[JavaScript Console]を開くには、ブラウザウィンドウの右上にある3つの縦のドットで示されたメニューに移動します行で。 そこから、[その他のツール]、[開発者ツール]の順に選択できます。
image：https：//assets.digitalocean.com/articles/eng_javascript/js-console/chrome-developer-tools-menu.png [Chrome開発者ツールのメニュー項目]
これにより、パネルが開き、トップメニューバーにある[コンソール]をクリックして、JavaScriptコンソールがまだ強調表示されていない場合に表示できます。
image：https：//assets.digitalocean.com/articles/eng_javascript/js-console/chrome-console-tray.png [Chrome Developer Toolsメニュー項目]
LinuxまたはWindowsの場合はキーボードショートカット + CTRL + + + SHIFT + + + J +、macOSの場合は + COMMAND + + + OPTION + + `+ J +`を使用して、JavaScriptコンソールに入ることもできます。すぐにコンソールにフォーカスが移動します。
コンソールにアクセスしたので、JavaScriptでコンソール内で作業を開始できます。
コンソールでの作業
コンソール内で、JavaScriptコードを入力できます。
文字列 `+ Hello、World！+`を出力するアラートから始めましょう。
alert("Hello, World!");JavaScriptの行に続いて `+ ENTER +`キーを押すと、ブラウザに次のアラートポップアップが表示されます。
image：https：//assets.digitalocean.com/articles/eng_javascript/js-console/javascript-alert.png [JavaScriptコンソールアラートの例]
コンソールは式の評価結果も出力することに注意してください。式が明示的に何かを返さない場合、式は `+ undefined +`として読み込まれます。
引き続きクリックする必要があるポップアップアラートを使用するのではなく、 `+ console.log +`を使用してコンソールにログを記録することでJavaScriptを操作できます。
`+ Hello、World！+`文字列を印刷するには、コンソールに次のように入力します。
console.log("Hello, World!");コンソール内で、次の出力が表示されます。
OutputHello, World!JavaScriptを使用して、コンソールで計算を実行することもできます。
console.log(2 + 6);Output8より複雑な数学を試すこともできます：
console.log(34348.2342343403285953845 * 4310.23409128534);Output148048930.17230788さらに、変数を使用して複数の行で作業できます。
let d = new Date();
console.log("Today's date is " + d);OutputToday's date is Wed Jun 21 2017 15:49:47 GMT-0400 (EDT)コンソールを通過したコマンドを変更する必要がある場合は、キーボードの上矢印↑キーを入力して、前のコマンドを取得できます。 これにより、コマンドを編集して再送信できます。
JavaScriptコンソールは、ターミナルシェルインターフェイスに似た環境を使用できるようにすることで、JavaScriptコードをリアルタイムで試すスペースを提供します。
HTMLファイルでの作業
コンソールでHTMLファイルまたは動的にレンダリングされたページのコンテキスト内で作業することもできます。 これにより、既存のHTML、CSS、およびJavaScriptのコンテキスト内でJavaScriptコードを試すことができます。
コンソールでページを変更した後、ページをリロードするとすぐに、ドキュメントを変更する前の状態に戻るので、他の場所に保存したい変更を必ず保存してください。
コンソールを使用して変更する方法を理解するために、次の `+ 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 d = new Date();
document.body.innerHTML = "<h1>Today's date is " + d + "</h1>"コンソールに次の出力が表示されます。
Output"<h1>Today's date is Sat Jun 24 2017 12:16:14 GMT-0400 (EDT)</h1>"この時点で、ページは次のようになります。
image：https：//assets.digitalocean.com/articles/eng_javascript/js-console/javascript-console-plain.png [JavaScriptコンソールの平日の例]
背景色など、ページのスタイルを変更することもできます。
document.body.style.backgroundColor = "lightblue";Output"lightblue"ページ上のテキストの色と同様に：
document.body.style.color = "white";Output"white"これで、ページは次のようになります。
image：https：//assets.digitalocean.com/articles/eng_javascript/js-console/javascript-console-style.png [JavaScriptコンソールスタイルの日付の例]
ここから、 `+ <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 +`は次のようになります。
image：https：//assets.digitalocean.com/articles/eng_javascript/js-console/javascript-console-with-paragraph.png [段落付きのJavaScriptコンソールの例]
コンソールには、HTMLページの変更を試すスペースがありますが、コンソールで操作を行うときにHTMLドキュメントを変更しないことに注意してください。 この場合、ページをリロードすると、空白のドキュメントに戻ります。
他の開発ツールを理解する
使用するブラウザの開発ツールに応じて、他のツールを使用してWeb開発ワークフローを支援できます。 これらのツールのいくつかを見ていきましょう。
DOM-ドキュメントオブジェクトモデル
Webページが読み込まれるたびに、ブラウザはそのページの D ocument O bject M odelまたは* DOM *を作成します。
DOMはオブジェクトのツリーであり、HTML要素を階層ビュー内に表示します。 DOMツリーは、Firefoxの* https：//developer.mozilla.org/en-US/docs/Tools/Page_Inspector [Inspector] パネルまたは https：//developers.google.com/webで表示できます。 / tools / chrome-devtools / inspect-styles / [Elements] * Chromeのパネル。
これらのツールを使用すると、DOM要素を検査および編集したり、特定のページの側面に関連するHTMLを識別したりできます。 DOMは、テキストスニペットまたは画像にID属性があるかどうかを示し、その属性の値が何かを判断できます。
上記で変更したページには、ページをリロードする前に次のようなDOMビューがあります。
image：https：//assets.digitalocean.com/articles/eng_javascript/js-console/javascript-dom-example.png [JavaScript DOMの例]
さらに、サイドパネルまたはDOMパネルの下にCSSスタイルが表示され、HTMLドキュメント内またはCSSスタイルシートを介してどのスタイルが使用されているかを確認できます。 これは、Firefox Inspector内の上記のボディスタイルのサンプルページの外観です。
image：https：//assets.digitalocean.com/articles/eng_javascript/js-console/javascript-css-example.png [JavaScript CSSの例]
DOMノードをライブ編集するには、選択した要素をダブルクリックして変更を加えます。 たとえば、開始するには、 `+ <h1> `タグを変更して ` <h2> +`タグにすることができます。
コンソールと同様に、ページをリロードすると、HTMLドキュメントの保存された状態に戻ります。
ネットワーク
ブラウザの組み込み開発ツールの[ネットワーク]タブでは、ネットワークリクエストを監視および記録できます。 このタブには、ブラウザがページを読み込むタイミング、各リクエストにかかる時間など、ブラウザが行うネットワークリクエストが表示され、これらの各リクエストの詳細が表示されます。 これを使用して、ページの読み込みパフォーマンスを最適化し、リクエストの問題をデバッグできます。
JavaScriptコンソールと一緒に[ネットワーク]タブを使用できます。 つまり、コンソールを使用してページのデバッグを開始し、[ネットワーク]タブに切り替えて、ページをリロードせずにネットワークアクティビティを確認できます。
[ネットワーク]タブの使用方法の詳細については、https：//developer.mozilla.org/en-US/docs/Tools/Network_Monitor [Firefoxのネットワークモニターの操作]またはhttps://developers.googleをご覧ください。 com / web / tools / chrome-devtools / network-performance / [ChromeのDevToolsでネットワークパフォーマンスの分析を開始]。
レスポンシブデザイン
Webサイトがレスポンシブである場合、携帯電話、タブレット、デスクトップ、ラップトップなど、さまざまなデバイスで適切に表示および機能するように設計および開発されます。 画面サイズ、ピクセル密度、およびタッチのサポートは、デバイスをまたいで開発する際に考慮すべき要素です。 Web開発者として、レスポンシブデザインの原則を念頭に置いて、アクセスするデバイスに関係なくWebサイトを完全に利用できるようにすることが重要です。
FirefoxとChromeはどちらも、Web用のサイトやアプリを作成および開発する際に、レスポンシブデザインの原則に注意を払うためのモードを提供します。 これらのモードは、開発プロセスの一部として調査および分析できるさまざまなデバイスをエミュレートします。
Firefoxのhttps://developer.mozilla.org/en-US/docs/Tools/Responsive_Design_Mode [レスポンシブデザインモード]またはChromeのhttps://developers.google.com/web/tools/chrome-devtools/device-の詳細をご覧ください。 mode / [Device Mode]を使用して、これらのツールを活用して、ウェブテクノロジーへのより公平なアクセスを確保する方法の詳細をご覧ください。
結論
このチュートリアルでは、最新のWebブラウザー内でJavaScriptコンソールを操作する概要と、ワークフローで使用できる他の開発ツールに関する情報を提供しました。
JavaScriptの詳細については、https：//www.digitalocean.com/community/tutorials/understanding-data-types-in-javascript [データタイプ]、またはhttps://www.digitalocean.com/をご覧ください。 community / tutorials / an-introduction-to-jquery [jQuery]またはhttps://www.digitalocean.com/community/tutorials/how-to-make-a-bar-chart-with-javascript-and-the-d3 -library [D3]ライブラリ。