JavaScript の基本をマスターしよう（前編）

ここから、いよいよJavaScriptのコードを書いていきます！最初は、基本的な書き方と、ブラウザのコンソールに文字を表示する方法を学びましょう。

1. JavaScript の書き方

JavaScriptのコードは、どこに書けば良いのでしょうか？主に2つの方法があります。

`<script>` タグで HTML に埋め込む

1つ目は、HTMLファイルの中に、<script>というタグを使って、JavaScriptのコードを直接書き込む方法です。

例えば、index.htmlの</body>タグの直前に、以下のように書き加えてみましょう。

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>
        console.log("HTMLの中からこんにちは！");
    </script>
    <script src="script.js"></script>
</body>
</html>

<script>タグで囲まれた部分が、JavaScriptのコードです。ここでは、console.log()を使って、コンソールにメッセージを出力しています。

ファイルを保存して、ブラウザを再読み込み（リロード）してみましょう。開発者ツールのコンソールに、「HTMLの中からこんにちは！」と表示されるはずです。

外部ファイルに書いて読み込む（こっちがおすすめ！）

2つ目は、JavaScriptのコードを別のファイル（script.js）に書いて、HTMLファイルから読み込む方法です。通常はこちらの方法が推奨されます。

先ほどindex.htmlに書き加えた<script>タグの中身を、script.jsに移動させましょう。

index.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>

script.js:

javascript

console.log("HTMLの中からこんにちは！");

<script>タグのsrc属性に、読み込みたいJavaScriptファイルのパス（ここではscript.js）を指定します。

ファイルを保存して、ブラウザを再読み込みしてみましょう。先ほどと同じように、コンソールにメッセージが表示されればOKです！

なぜ、外部ファイルに書く方が良いのでしょうか？それは、HTMLとJavaScriptのコードを分けて管理できるからです。そうすることで、コードが読みやすくなり、修正もしやすくなります。

コメントの書き方

プログラムの中に、メモ書きを残したいときは、コメントを使いましょう。コメントは、プログラムの実行には影響しないので、自由に書くことができます。

JavaScriptでは、2種類のコメントの書き方があります。

1行コメント: // の後に書く。その行の終わりまでがコメントになる。
複数行コメント: /* と */ で囲まれた部分がコメントになる。複数行にまたがって書くことができる。

javascript

// これは1行コメントです。

/*
これは
複数行
コメントです。
*/

console.log("コメントの書き方"); // この部分もコメントです。

コメントをうまく活用すれば、コードの意図を説明したり、一時的にコードを無効化したりすることができます。

2. コンソールに文字を表示してみよう

先ほど、console.log()を使って、コンソールにメッセージを表示しました。これは、JavaScriptの学習において、最も基本的な、そして最も重要な機能の一つです。

console.log()は、ブラウザの開発者ツールのコンソールに、好きな文字や値を出力できる命令です。これを使えば、プログラムの実行結果を確認したり、変数の中身を調べたりすることができます。

例えば、script.jsに以下のように書いてみましょう。

javascript

console.log("Hello, world!");
console.log("JavaScriptって楽しい！");
console.log(123);
console.log(true);

ブラウザを再読み込みすると、コンソールに

Hello, world!
JavaScriptって楽しい！
123
true

と表示されます。console.log()のカッコの中に、出力したい文字や値を入れれば、何でも表示できるのです！

文字列と数値の違い

上の例で、"Hello, world!"や"JavaScriptって楽しい！"は、ダブルクォーテーション（”）で囲まれていることに気づきましたか？これは、文字列を表すための記法です。

一方、123は、ダブルクォーテーションで囲まれていません。これは、数値を表しています。

文字列と数値は、コンピュータにとっては別のものです。console.log()で出力するときは、あまり違いがないように見えるかもしれませんが、後で学ぶ「演算子」を使った計算などでは、大きな違いが出てきます。

文字列の中に変数を埋め込む

console.log()では、文字列の中に変数の値を埋め込んで表示することもできます。これには、テンプレートリテラルを使うと便利です。テンプレートリテラルは、文字列をバッククォートで囲み、変数を埋め込む場所に${}を記述します。

例えば、以下のように変数を宣言して、

javascript

let name = "あなたの名前";
let age = 30;

次のように書くと、

javascript

console.log(`私の名前は${name}です。年齢は${age}歳です。`);

コンソールには、

私の名前はあなたの名前です。年齢は30歳です。

と表示されます。

コンソールで遊んでみよう！

console.log()は、JavaScriptの学習において、強力な武器になります。プログラムの途中で、変数の中身を確認したり、処理の流れを追ったりするのに、とても便利です。

ぜひ、script.jsに色々なコードを書いて、console.log()で出力して、遊んでみてください！

例えば、

自分の名前や年齢を、変数を使って表示してみる
好きな食べ物や趣味を、リスト形式で表示してみる
簡単な計算をして、その結果を表示してみる

など、自由に試してみましょう！