JavaScript Chromeを利用した開発とテスト

English version.

JavaScriptはテキストエディタとWebブラウザーがあれば作成可能です。

開発用のツールなどもありますが、それ自体が複雑で覚えることが多いため、最初は単純な環境から学習を始めましょう。

テキストエディタは練習段階ではメモ帳でも構いません。

メモ帳以外では、Notepad++、Sublime Text、サクラエディタなどが候補になります。

WebブラウザーはChromeを推奨します。

簡単なプログラム作成と実行例

メモ帳を開いて、新しいファイルを作成し、以下のコードを入力します。

<!DOCTYPE html>
<html>
<head>
	<title>JavaScript Sample</title>
</head>
<body>
	<script>
		alert("Hello, World!");
	</script>
</body>
</html>

保存ダイアログボックスが表示されるので、ファイル名を「sample.html」として保存します。

そして保存した「sample.html」を、Google Chromeで開くと、ダイアログが表示され、”Hello, world!”と表示されます。

Google ChromeでF12キーとを押すと「デベロッパーツール」が起動します。

もしエラーが発生していると、「Console」にエラーメッセージが表示されます。

プログラムが動かない場合など、ここを見ると解決に繋がる可能性があります。

「Console」タブに任意のメッセージを表示する

この例では、addEventListener()を使用して、ボタンがクリックされたときにコンソールにログメッセージを表示するイベントリスナーを登録しています。ボタンがクリックされるたびに、"Button clicked!"というメッセージがコンソールに表示されます。

<!DOCTYPE html>
<html>
<head>
  <title>Console Example</title>
</head>
<body>
  <h1>Console Example</h1>
  <button id="myButton">Click me!</button>

  <script>
    var myButton = document.getElementById("myButton");
    myButton.addEventListener("click", function() {
      console.log("Button clicked!");
    });
  </script>
</body>
</html>

Chrome DevToolsのConsoleタブは、WebページのJavaScriptコードに関する情報を表示するのに非常に役立ちます。他にも、変数の値を表示する、デバッグメッセージを表示する、関数の戻り値を表示するなど、さまざまな目的でコンソールを使用できます

---

関連記事

JavaScriptの記事一覧