まずはJavaScriptを実際に動かしてみよう
実際にJavaScriptのコードを書いて、パソコンで動かしてみましょう。
まずは、 「JavaScriptを書いて、実際に動かしてみる」 ところから始めます。
今回は、練習用のHTMLファイルを1つだけ作ります。
今回の演習で使うもの
今回必要なのは、次の2つだけです。
- コードを書くためのエディタ
- Google ChromeなどのWebブラウザ
エディタは、普段使っているもので構いません。
この記事では、無料で使えるVisual Studio Code（VS Code）を使って説明します。
すでにVS Codeなどのエディタを使っている場合は、そのまま進めてください。
① 練習用のフォルダを作ろう
まず、JavaScriptの練習用フォルダを作ります。
デスクトップなど、分かりやすい場所に新しいフォルダを作ってください。
フォルダ名は、今回は
javascript-practiceとしましょう。
② index.htmlを作ろう
先ほど作った javascript-practice フォルダをVS Codeで開きます。
そして、その中に新しいファイルを作ってください。
ファイル名は、
index.htmlとします。
最終的には、次のような状態になります。
javascript-practice
└── index.htmlこれで、JavaScriptを実行するための準備は完了です。
③ index.htmlにコードを書こう
それでは、作成した index.html に次のコードをコピーして貼り付けてください。
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>JavaScript 非同期処理の練習</title>
</head>
<body>
<h1>JavaScript 非同期処理の練習</h1>
<script>
console.log("① 開始");
setTimeout(() => {
console.log("② 3秒後");
}, 3000);
console.log("③ 終了");
</script>
</body>
</html>コードを貼り付けたら、忘れずに保存してください。
ここでは、コードの意味をすべて理解する必要はありません。
まずは「このコードを実際に動かしてみる」ことが目的です。
④ index.htmlをChromeで開こう
次に、作成した index.html をGoogle Chromeで開きます。
一番簡単なのは、ファイルをダブルクリックする方法です。
Chromeでページが表示されたら成功です。
画面には、
JavaScript 非同期処理の練習と表示されるはずです。
ただし、今回確認したいのは画面に表示された文字ではありません。
JavaScriptが出力した結果を確認してみましょう。
⑤ ChromeのConsoleを開こう
Chromeでページを表示した状態で、ページ上で右クリック →「検証」を選択します。
すると、デベロッパーツールが表示されます。
上のメニューから「Console」を選択してください。
すると、JavaScriptが出力した結果を見ることができます。