【STEP.02】
JavaScriptのコードの書き方を学ぼう!

JavaScriptで「こんにちは、世界!」

まずは、JavaScriptでごく基本的な「こんにちは、世界!」アプリを作成してみましょう。

[1]新規にコードを作成する

エディターで新規文書を作成し、次のコードを入力します。

<!DOCTYPE html>  
<html lang="ja">
<head>
  <meta charset="UTF-8">
  <title>ユタスク【Utask】</title>
</head>
<body>
<script type="text/javascript">
  // window.alertは、指定された文字列をダイアログ表示するための命令です。
  window.alert('こんにちは、世界!');
</script>
<noscript>JavaScriptが利用できません。</noscript>
</body>
</html>

使用するエディターは、なんでも構いません。

このページでは、無償で利用できる Visual Studio Code(https://azure.microsoft.com/ja-jp/products/visual-studio-code/)を利用しています。

その他にも次のようなエディターが有力な選択肢となるでしょう。

もちろん、Windows標準で付属している「メモ帳」を利用しても構いません。

要は、使い慣れたエディター(または統合開発環境)を利用すればよいのです。

[2]作成したコードを保存する

作成したコードは、任意のフォルダーにhello.htmlという名前で保存してください。

VSCodeのメイン画面

.htmlファイル.jsファイル.cssファイルをはじめ一連のファイルは、文字コードをUTF-8で統一することをおすすめします。

UTF-8は国際化対応にも優れ、HTML5をはじめとした、さまざまな技術で推奨されている文字コードです。

他の文字コードを利用することもできますが、特にAjax通信などの外部サービスと連携する際には、思わぬ不具合、文字化けの原因ともなります。

特別な理由がなければ、また、文字コードについて十分な理解がないうちは、すべてのファイルをUTF-8で統一しておくことを強くお勧めします。

Bracketsであれば、エディター右下のステータスバーで文字コードを確認できます。

[3]ブラウザーから動作を確認する

エクスプローラーからhello.htmlをダブルクリックします。

以下のようにダイアログが表示されれば、正しく動作しています。

hello.htmlの実行結果

ダイアログが表示されない場合、開発者ツール(Windowsの場合はF12ボタン/macOSの場合は + option + I)からエラーを確認してみましょう。

開発者ツールでのエラー表示

コンソールには、問題のあった行数も表示されるので、該当行と、その前後について、次の観点で再確認を行います。

  1. スペリングに誤りがないか(特に<script>要素の中には要注意)
  2. 日本語(ここでは「こんにちは、世界!」)以外の部分は、すべて半角文字で記述しているか
  3. ファイルの文字コードが誤っていないか

特に(2)については、セミコロン(;)、クォート(’)、スペースなどでは全角/半角の違いを発見しにくい場合があるので、注意が必要です。

初めてのJavaScriptコードは、正しく実行できたでしょうか?

以降では、これからJavaScriptの学習を進めていくうえで最低限知っておきたい、基本的な文法やルールを説明していきます。

文(Statement)のルール

JavaScriptのコードは、一般的に1つ以上の文(Statement)から構成されます。

たとえば、「window.alert('Hello、JavaScript!');」が1つの文です。

文には以下のようなルールがあります。

文の末尾にセミコロン(;)をつける

セミコロンは省略することも可能ですが、文の区切りが不明確になることから、一般的には良いスタイルとは見なされません。

特別な理由がない限り、セミコロンは省略しないで記述すべきです。

window.alert('Hello、JavaScript!') エラーではないが非推奨です。

文の途中で改行やインデント(空白・タブ)を含めることも可能

1つの文が長い場合などには、文の途中で改行やインデント(空白・タブ)を加えることもできます。

たとえば、以下に示すのは正しいJavaScriptのコードです。

window.
alert
('Hello、JavaScript!');

もちろん、この場合は改行を加えてもかえってコードが冗長になるだけで意味はありません。

しかし、もっと長い文の場合には適当な場所で改行することで、コードを見やすくすることができます。

ただし、改行できるのは、あくまでも意味ある単語(キーワード)や記号の後ろだけです。

たとえば、次のコードでは、windowという単語の途中で改行しているので、エラーとなります。

win
dow.alert('Hello、JavaScript!');

以下のように改行によって正しく動作しなくなるコードもあります。

function square(height, width) {
  return
  height * width;
}

console.log(square(2,3));

square関数は、与えられた引数に対して四角形の面積を返すことを期待した関数です。

しかし、実際に呼び出してみればわかるように、意図したような結果は得られません。

引数の内容にかかわらず、square関数はundefined(未定義値)を返すはずです。

これは、JavaScriptがセミコロンを自動的に補完した結果です。

太字部分(ソースコードの2~3行目)は、JavaScriptからは以下のように見えているのです。

return;  セミコロンを補完
height * width;

結果、square関数は戻り値として既定のundefinedを返し、後続の式「height * width;」は無視されているのです。

意図した動作をさせるには、以下のようにreturn命令の途中の改行を除去します。

return height * width;

このような、「エラーは発生しないが、意図した動作もしない」というケースは、後々のデバッグを難しくする原因でもあります。

もちろん、この程度の短い式の途中に改行を入れることはないかもしれませんが、戻り値としてより長い式を指定する場合に、無意識に改行を加えてしまわないよう、十分注意する必要があります。

MEMO
break、continue、throwなども注意
return命令と同じ理由から、以下のような文についても、途中で改行を含めてはいけません。
  • ラベル付きbreak/continue
  • throw
  • ++、--演算子(後置)

以上をまとめると、JavaScriptでは文の途中で改行することは可能ですが、無制限に改行すべきではありません。

改行を含める際には、左カッコ、演算子、カンマの直後など、文の継続が明確である場合に限定するのが安全です。

大文字/小文字が厳密に区別される

JavaScriptの文はかなり柔軟に記述できますが、1点だけ、大文字/小文字が厳密に区別されるという点に注意が必要です。

たとえば、以下のような記述は不可です。

window.Alert('Hello、JavaScript!');

「alert」と「Alert」とは別の命令と見なされるためです。

「スペリングは間違っていないのに大文字/小文字の違いでエラーとなっていた」などは、よく陥りがちな誤りの一つなので、十分に注意が必要です。

【補足】複数の文を単一行で書くこともできる(非推奨)

セミコロンで文の終わりを表すということは、1つの行に複数の文を含めることもできるということです。

たとえば以下も、正しいJavaScriptのコードです。

window.alert('Hello、JavaScript!');window.alert('こんにちは、JavaScript!');

ただし、これは望ましいコードではありません。

というのも、デバッガーによるコードの追跡が困難となるためです。

一般的なデバッガー(ブラウザーの開発者ツールなど)では、ステップ実行という機能が備わっています。

しかし、これらの実行単位は一般的に行です。

つまり、1行に複数の文が含まれていると、文単位の追跡ができません。

文の長短に関わらず、複数の文を1行にまとめないのが鉄則です。

<script>要素

HTMLページにJavaScriptのコードを直接記述する

HTMLページにJavaScriptのコードを直接記述するには<script>要素を利用します。

以下は、 HTMLページにJavaScriptのコード(window.alert('Hello、JavaScript!'))を直接記述する例です。

<!DOCTYPE html>
<html lang="ja">
<head>
    <meta charset="UTF-8">
    <title>ユタスク【Utask】</title>
</head>
<body>
    ...ページ本文...
    <script type="text/javascript">
	window.alert('Hello、JavaScript!');
    </script>
</body>
</html>

type属性は、スクリプトの種類を表します。

ただし、HTML5での既定値はtext/javascriptなので、省略してもかまいません。

MEMO
language属性
昔のコードでは、language="JavaScript"のような指定をしているものもありますが、現在は非推奨です。

以前は、古いブラウザとの互換性のために、language/typeを併記するようなケースもありましたが、現存するブラウザーのほとんどはtype属性に対応しているので、あえてそのようにする意味はありません。

HTMLページから外部スクリプトを参照する

HTMLファイルの中に直接記述されたJavaScriptのことを、インラインスクリプトといいます。

これに対して、外部ファイルとしてHTMLファイルとは別に定義されたJavaScriptのことを、外部スクリプトといいます。

HTML(レイアウト)とJavaScript(ロジック)を明確に分離するという意味では、JavaScriptを外部スクリプトとして分離するのが、よりあるべき姿です。

外部ファイル化されたJavaScriptをHTMLページから参照するには、次の構文を利用します。

<script>要素(外部ファイル化)
<script type="text/javascript" src="path" [charset="encoding"]>
<script>
path      スクリプトファイルへのパス
encoding  スクリプトファイルで利用している文字コード

具体的な例を見てみましょう。

以下は、外部ファイル化されたJavaScript(hello_ex.js)をHTMLページから参照する例です。

<!DOCTYPE html>  
<html lang="ja">
<head>
  <meta charset="UTF-8">
  <title>ユタスク【Utask】</title>
  <script type="text/javascript" src="./hello_ex.js" charset="UTF-8"></script>
</head>
<body>	
</body>
</html>
window.alert('Hello、JavaScript!');

JavaScriptのコードを外部ファイル化するメリット

コードの外部化には、以下のようなメリットがあります。

  • レイアウトとスクリプトを分離することで、コードを再利用しやすくなる
  • スクリプトを外部化することで、.htmlファイルの見通しが良くなる

これらの理由から、本格的なアプリ開発では、できるかぎりJavaScriptは外部ファイル化すべきです。

ただし、実際にはコード部分が非常に短いなどのケースで、外部化したほうがかえって冗長になるということもあります。

そのような場合はインラインスクリプトの記法を用いるなど、状況に応じて使い分けるようにします。

インラインスクリプトと外部スクリプトを併用する場合の注意点

インラインスクリプトと外部スクリプトを併用する場合、以下のような記述はできないので注意が必要です。

<script type="text/javascript" src="lib.js">
  window.alert('Hello、JavaScript!'); // 無視される
</script>

src属性を指定した場合、<script>要素配下のコンテンツは無視されるためです。

もしも外部スクリプトとインラインスクリプトを併用する場合には、以下のように<script>要素も別にしなければなりません。

<script type="text/javascript" src="lib.js"></script>
<script type="text/javascript">
  window.alert('Hello、JavaScript!');
</script>

<script>要素を記述する場所

<script>要素を記述する場所は、大きく以下の3つに分類できます。

  • <body>要素の任意の場所
  • <body>閉じタグの直前
  • <head>要素の配下

それぞれの場所に記述した場合に生じる問題点やメリットを順番に解説していきます。

<body>要素の任意の場所に記述する場合

<script>要素での処理結果を、ページに直接出力するために利用します。

昔はよく見かけた書き方ですが、コンテンツとコードが混在するのは、ページの可読性/保守性の観点からも望ましくありません。

現在ではほとんど使われることはありませんし、また、一部の例外を除いては使うべきではありません。

<body>閉じタグの直前に記述する場合

一般的なブラウザーでは、スクリプトの読み込みや実行が完了するまで、以降の描画を行いません。

このため、読み込みや実行に時間がかかるスクリプトは、そのままページ描画の遅れに直結します。

巨大なスクリプトがある場合にはなおさらです。

そこで、ページ高速化の手法として末尾(<body>閉じタグの直前)に、<script>要素を配置することがよく行われます。

これによって、ページの描画を終えた後スクリプトを読み込み/実行できるので、見た目の描画速度が改善します。

一般的に、JavaScriptによる処理は、ページがすべて準備できてから行うべきであるはずなので、これによる弊害もほぼありません。

<head>要素の配下に記述する場合

ただし、<body>閉じタグの直前に記述する方法ではまかなえないケースがあります。

JavaScriptでは、「関数を呼び出すための<script>要素よりも、関数定義の<script>要素を先に記述しなければならない」というルールがあるためです。(関数の定義、呼び出しが一つの<script>要素にまとまっていても構いません。)

たとえば、<body>要素の配下で呼び出す必要がある関数は、<head>要素の配下で事前に読み込んでおく必要があります。

また、スクリプトからスタイルシートを出力するような状況でも、本文の出力に先立って<head>要素の配下で<script>要素を記述すべきです。

【結論】原則:<body>閉じタグの直前(例外:<head>要素の配下)

以上をまとめると、まずは<body>閉じタグの直前に記述する方法を基本とし、それでまかなえない場合にだけ、<head>要素の配下に記述する方法を利用する、と理解して置けばよいでしょう。

繰り返しですが、<body>要素の任意の場所に記述する方法を利用する状況は、外部のウィジェットを埋め込むなどの状況を除けば、ほとんどありません。

<body>要素の任意の場所に記述する方法を使いたくなったら、まずは他の方法でまかなえないかを検討すべきです。

なお、<script>要素は、.htmlファイルの中に何度も記述しても構いません。

ページとしては、最終的に<script>要素をすべてひとまとめにしたもので解釈されるからです。

script要素の記述場所

async属性/defer属性

async属性/defer属性を利用するメリット

一般的なブラウザーではスクリプトの読み込み/実行が完了するまで、以降のコンテンツを描画しません。

ページの先頭にサイズの大きなスクリプトがあったりすると、それだけ何も表示されない時間が長くなるということです。

これを避けるための1つの方法として<body>閉じタグの直前に<script>要素を配置するというものがありますが、 モダンブラウザーを対象としているならば、HTML5で新たに加わったasync属性やdefer属性を利用するという方法もあります。

これによって、本来のコンテンツを先に表示した後、スクリプトを読み込むので、ユーザーの体感速度を改善することができます。

async属性とは

<script>要素にasync属性を追加した場合、src属性に指定された外部スクリプトを非同期にロードし、ロードが完了し次第、実行します。

具体例を見てみましょう。

<script src="main.js" async></script> 

これによって、main.jsを非同期にロードし、読み込みが完了し次第、実行するようになります。

ただし、その性質上、複数の外部スクリプトを非同期ロードした場合、その実行順序は保証されません。

そのため、例えば以下のコードで、main.jsmylib.jsに依存しているような状況では、コードが正しく動作しない可能性があります。(mylib.jsがロードされる前にmain.jsが実行される可能性があるからです。)

<script src="mylib.js" async></script>
<script src="main.js" async></script>

このような問題は、次のdefer属性を利用することで解決が可能です。

defer属性とは

<script>要素にdefer属性を追加した場合、src属性に指定された外部スクリプトを非同期にロードし、HTMLの解析が終了するまで待機した後、記述された順序で実行します。(正しくは、DOMContentLoadedイベントの前に実行します。)

<script src="mylib.js" defer></script>
<script src="main.js" defer></script>

async属性とdefer属性の違いまとめ

asyncdefer属性の挙動の違いを表にまとめると以下のようになります。

【async属性とdefer属性の違いまとめ】
async属性defer属性
実行タイミングの違いsrc属性に指定された外部スクリプトを非同期にロードし、ロードでき次第、実行します。src属性に指定された外部スクリプトを非同期にロードし、HTML解析後に実行します。(正しくは、DOMContentLoadedイベントの前に実行します。)
実行順序が保証されるかどうかの違い複数の外部スクリプトをロードする場合、その実行順序は保証されません。複数の外部スクリプトをロードする場合、その実行順序が保証されます。(記述された順序で実行されます。)

asyncdefer属性の挙動の違いを図示すると以下のようになります。

async属性とdefer属性の違い

integrity属性

アプリを開発する際、CDN(ContentDeliveryNetwork)経由でライブラリ(リソース)を取得する状況はよくあります。

しかし、対象のリソースが悪意ある第三者によって改ざんされていたらどうでしょうか?リソースの取り込みが、そのままセキュリティリスクになる恐れがあります。

そこで、リソースの改ざんがないことを検証するのがintegrity属性の役割です。

以下は、jQuery(https://jquery.com/)をインポートするための<script>です。

<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity ="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin ="anonymous"></script>

integrity属性には、インポート対象のコードをもとに生成したハッシュ値を「接頭辞-ハッシュ値」の形式で指定します。

利用できる接頭辞はハッシュの種類(sha256、sha384、sha512)です。

ブラウザーは、integrity属性でもって、インポートしたコードとハッシュ値とを比較し、正しく対応している場合にのみ実行します。

これによって、不正に改ざんされたコードを排除できるわけです。

以下は、integrity属性で指定されたハッシュ値が、リソース本体と一致しなかった場合のエラーです(デベロッパーツールのコンソールから確認できます)。

Failed to find a valid digest in the 'integrity' attribute for resource 'https:// code. jquery. com/ jquery-3. 3. 1. slim. min. js' with computed SHA-256 integrity '3 edrmyu...='. The resource has been blocked.

なお、crossorigin属性はリクエスト時に認証情報を渡すかどうかを表します。

具体的にはanonymousを指定した場合に、クッキー、クライアントサイドのSSL証明書、HTTP認証などの情報が送信されなくなります。

認証情報が不要な状況では(大概は不要なはずです。)、原則としてcrossorigin属性を明示しておくことをお勧めします。

integrity属性は、「SRIHashGenerator」(https://www.srihash.org/)というページを利用することで、手軽に生成できます。

SRIHASHGenerator

テキストボックスにリソースのURLを入力し、[Hash!]ボタンをクリックすると、下部のテキストエリアにintegrity属性付きの<script>要素が表示されます。

<noscript>要素

ブラウザーでは、JavaScriptの機能を無効にすることもできます。

その場合に表示すべき代替コンテンツを表すのが、<noscript>要素です。

本来、ページ開発者はJavaScriptが動作していない場合でも、必要最低限のコンテンツを閲覧できるように、ページをデザインすべきです。

しかし、「ページの仕組みとして、どうしてもJavaScriptに依存せざるを得ない」という場合には、JavaScriptを有効にしたうえでアクセスしてほしい旨を、メッセージ表示することもできるでしょう。

あるいは、代替するページへのリンクを表示するのにも利用できます。

たとえば、Google Chrome 81環境で、JavaScript機能を無効にするには、(Google Chromeの設定)ボタン設定を選択します。

次に、詳細設定プライバシーとセキュリティサイトの設定JavaScriptと選択していくと以下のような画面になるのでこの画面でJavaScriptを無効にすることができます。

JavaScript,無効,許可

JavaScript疑似プロトコル

HTMLページにJavaScriptを埋め込む方法には<script>要素で記述する方法のほか、アンカータグのhref属性に「JavaScript:~」の形式で埋め込む方法もあります。

このような記法をJavaScript疑似プロトコルといいます。

<a href="JavaScript:スクリプトコード">リンクテキスト</a>

たとえば「リンクをクリックした時にダイアログを開きたい」という場合には、以下のように記述します。

<a href="JavaScript:window.alert('Hello、JavaScript!')">ダイアログを表示</a>

リンククリックすると、ダイアログを表示

あくまでもちょっとしたスクリプトを埋め込むための記法ですが、意外とよく利用するので覚えておきたいところです。

開発者ツールの使い方を学ぼう

開発者ツールとは

ブラウザー標準で搭載されている開発者ツール(デベロッパツール)は、JavaScript/CSSを使ったフロントエンド開発には欠かせない強力なツールです。

Chrome環境を例に主な機能を見ていきましょう。

デベロッパーツールはF12キー(Windowsの場合)、 + option + I(macOSの場合)で起動できます。

Chromeの開発者ツール

ブラウザー下部に開発者ツールが表示されるので、まずは、よく利用する機能(メニュー)を確認しましょう。

【Chrome開発者ツールの主な機能】
メニュー概要
Elements文書ツリー/スタイルシートの状態を確認
Consoleコンソール(ログ出力、エラーメッセージの確認)
SourcesJavaScriptコードのデバッグ(ブレイクポイントの設置、ステップ実行)
Applicationストレージ/クッキーの内容を確認/編集
Networkブラウザーで発生した通信内容をトレース

HTML/CSSのソースを確認する([Elements]タブ)

[Elements]タブからは、現在のページ(文書ツリー)の状態を確認できます。

JavaScriptによって操作された結果がリアルタイムに反映されるので、アプリの実行結果を確認する際にも利用できます(いわゆる[ページのソースを表示]は、あくまでオリジナルの.htmlファイルを表示するだけです)。

[Elemetns]タブで現在のページの状態を確認

(Select an element in the page to inspect it)を選択すれば、ページをクリックすることで、対応するソースを選択状態にできますし、右の[Styles]ペインでは、選択された要素のスタイルも確認できます。

開発者ツール上で、HTML/CSSを編集すれば、ページにもリアルタイムに反映されるので、細かな見た目の調整にも便利です(ファイルに反映されるわけではないので、あくまで暫定的な確認用途です)。

ログ確認/オブジェクト操作などの万能ツール([Console]タブ)

[Sources]タブと並んで、JavaScriptのデバッグに欠かせない機能が、[Console]タブです。

[Console]タブ

[Console]タブには、大きく2つの役割があります。

エラーメッセージやログを確認する

1つに、エラーメッセージやログの確認です。

ツール右肩に(xx Error)のような表示がされていたら、まず[Console]タブでエラーメッセージを確認することをおすすめします。

また、console.logメソッドで出力したログ情報もコンソールで表示できます。

[Sources]タブを利用するまでもない簡単な変数の確認などに便利です。

対話的にコードを実行する

もうひとつ、コンソールからは対話的にJavaScriptのコードを実行できます。

たとえばgetElementByIdメソッドで指定された要素を取り出すならば、以下のようにします。

コンソール上でJavaScriptのコードを実行

スクリプトをデバッグする([Sources]タブ)

[Sources]タブは、主にデバッグのための機能を提供します。

デバッグには、まず、コード左の行番号をクリックして、ブレイクポイントを設置します。

ブレイクポイントとは、実行中のコードを一時停止させるための機能、または、停止のためのポイントです。

[Sources]タブでデバッグ

ブレイクポイントでコードが中断すると、該当の行が反転します。

この状態での変数情報は、右ペインの[Scope]から確認できます。

特定の変数(式)の値を監視したい、という場合には[Watch]から特定の式を登録しておくこともできます。

また、ブレイクポイントからは、次に掲げる表のようなボタンを利用して、行単位にコードを進めることもできます(これをステップ実行といいます)。

【ステップ実行関連のボタン】
ボタン概要
ステップイン(行単位に実行)
ステップオーバー(行単位に実行。ただし、関数は実行した後、次へ)
ステップアウト(現在の関数を呼び出し元に戻るまで実行)

デバッグでは、ブレイクポイントでコードを中断し、ステップ実行でその時々の状態(変数)の変化を確認していくのが基本です。

ステップ実行を終了し、通常の実行モードに戻すには、Resume script executionボタン(Resume script execution)ボタンをクリックしてください。

コードの整形

最近のJavaScriptライブラリは、ダウンロード時間を短縮するためにあらかじめ圧縮しておくのが一般的です。

この場合の圧縮とは、コード内の不要な空白/改行、コメントを除去することをいいます。

しかし、圧縮されたコードは人間にとっては読みにくいものです。

そこで、[Sources]タブでは下部のprettyprint(Pretty print)をクリックすることで、コードを改行/インデント付きの読みやすい形式に整形でいます。

class Member{constructor(firstName, lastName) {this.firstName = firstName;this.lastName = lastName;}}let mem = new Member('流星','横浜');mem.getName = function (){return this.lastName + this.firstName;};console.log(mem.getName());// 結果:横浜流星
class Member {
  constructor(firstName, lastName) {
    this.firstName = firstName;
    this.lastName = lastName;
  }
}
let mem = new Member('流星','横浜');
mem.getName = function () {
  return this.lastName + this.firstName;
}
;
console.log(mem.getName());
// 結果:横浜流星

本格的なアプリを開発するようになると、自分だけでなく、ライブラリ/フレームワークの中身を確認する機会は増えてきます。

そのような場合に、開発時だけは非圧縮版のライブラリを利用する方法もありますが、それができない(面倒くさい)という場合には、Pretty print機能を積極的に利用していくと良いでしょう。

通信状況をトレースする([Network]タブ)

[Network]タブを利用することで、ブラウザーで発生した通信の内容をHTTPレベルで確認できます。

特に、fetchメソッド/XMLHttpRequestオブジェクトによる非同期通信は確認が難しく、問題が起こった場合にも原因が特定しにくい傾向にあります。

しかし、[Network]タブを利用することで、意図したリクエスト/レスポンスが行き来しているかを確認できます。

非同期通信で得たコンテンツをJavaScripで加工している場合も、まずは通信で得たデータ本体を確認することで、問題を特定しやすくなるでしょう。

[Network]タブですべての通信を確認

右肩のNetwork Settingsボタンから、Show overviewをクリックすると、ダウンロードにかかった時間も表示されますので、表示のボトルネックとなっている要素を特定するためにも利用できます。

一覧から目的の通信をクリックすることで、通信の詳細(ヘッダーとコンテンツ本体)も確認できます。

非同期通信では、Headers(リクエスト/レスポンスヘッダー)、Response(応答本文)などをチェックすることが多いでしょう。

[Network]タブ(詳細)

ストレージ/クッキーの内容を確認する([Application]タブ)

[Application]タブでは、現在のページを構成するファイルのほか、ストレージ/クッキーを確認できます。

リストから値を追加/編集/削除することも可能です。

クッキー/ストレージの内容をリスト表示

ストレージ/クッキーに関しては、以下のページで詳しく解説しています。


コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です