JavaScript を動かす準備をしよう

JavaScriptのコードを書く前に、まずは準備をしましょう。必要なものは、テキストエディタとウェブブラウザの2つだけです！

1. エディタを用意しよう

エディタとは、プログラムのコードを書くためのソフトウェアです。Windowsに最初から入っている「メモ帳」でも書けないことはないですが、プログラミング専用のエディタを使う方が、ずっと効率的に作業できます。

エディタの設定（好みでOK！）

エディタをインストールしたら、使いやすいように設定を調整しましょう。ここでは、VS Codeを例に、よく使う設定をいくつか紹介します。

フォントサイズ: メニューの「ファイル」→「ユーザー設定」→「設定」から、「Editor: Font Size」で文字の大きさを調整できます。
タブサイズ: 同じく「設定」から、「Editor: Tab Size」でタブの幅を調整できます。スペース2つ分が一般的です。
テーマ: 「設定」の「Color Theme」から、エディタの配色を変更できます。
自動保存: 「設定」の「Files: Auto Save」を「afterDelay」などに設定すると、一定時間ごとに自動的にファイルを保存してくれるので、便利です。

これらの設定は、後からいつでも変更できるので、まずはデフォルトのままでも大丈夫です。使いながら、自分好みに調整していきましょう。

2. ファイルを作ってみよう

エディタの準備ができたら、早速ファイルを作ってみましょう。

まずは `index.html` から！

まずは、HTMLファイルを作成します。HTMLは、ウェブページの骨組みを作るための言語でしたね。

エディタを開き、「ファイル」→「新規ファイル」を選択します。
ファイルに以下の内容を書き込みます。

html

<!DOCTYPE html>
<html lang="ja">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>JavaScript 超入門</title>
</head>
<body>
    <h1>JavaScript 超入門</h1>

    <script src="script.js"></script>
</body>
</html>

「ファイル」→「名前を付けて保存」を選択し、index.htmlという名前で保存します。保存場所は、分かりやすい場所（例えばデスクトップ上のjavascript-practiceという名前のフォルダ）にしましょう。

`script.js` も作ろう！

次に、JavaScriptのコードを書くためのファイルを作成します。

エディタで、再び「ファイル」→「新規ファイル」を選択します。
今度は、ファイルに何も書き込まずに、「ファイル」→「名前を付けて保存」を選択します。
script.jsという名前で、index.htmlと同じ場所に保存します。

これで、index.htmlとscript.jsという2つのファイルが作成できました！

3. ブラウザで確認してみよう！

作ったファイルをブラウザで開いて、正しく表示されるか確認してみましょう。

作ったファイルをブラウザで開く

index.htmlファイルを保存したフォルダを開きます。
index.htmlファイルをダブルクリックします。
ブラウザが起動し、「JavaScript 超入門」という見出しが表示されればOKです！

もし、うまく表示されない場合は、ファイル名や保存場所、HTMLの記述に間違いがないか、確認してみてください。

開発者ツールって何？

ブラウザには、開発者ツールという、ウェブ開発に役立つ機能が備わっています。JavaScriptの学習でも、頻繁に使うことになるので、今のうちに使い方を覚えておきましょう。

ブラウザでindex.htmlを開いた状態で、右クリックして「検証」または「要素を調査」を選択します（ブラウザによって表記が異なります）。
画面の下部や右側に、開発者ツールが表示されます。
上部のタブから「コンソール」(Console) を選択します。

この「コンソール」タブに、JavaScriptの実行結果やエラーメッセージが表示されます。

例えば、コンソールに

javascript

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

と入力してEnterキーを押すと、「Hello, world!」と表示されます。これは、console.log()という、コンソールに文字を出力するJavaScriptの命令を実行した結果です。

開発者ツールは、他にも様々な機能を備えていますが、まずはコンソールの使い方を覚えておけば大丈夫です。