コンソールで最初のJavaScriptを実行してみよう

学習の目標

本章では、以下の内容を学習します。

前章では、開発者ツールの基本的な使い方を学びました。今回は、開発者ツールのConsoleタブを使って、実際にJavaScriptのコードを書いて実行してみましょう。

コンソールは、JavaScriptを学習する上で非常に便利なツールです。ファイルを作成せずに、すぐにコードを試すことができるため、「これはどう動くんだろう？」と思った時に即座に確認できます。

まずは基本的なコードから始めて、JavaScriptがどのように動作するかを体験してみましょう。

後のレッスンで詳しく学んでいきますので、今回はコンソールを使って簡単なコードを実行することに集中しましょう。

JavaScriptでメッセージを表示する最も基本的な方法がconsole.log()です。まずはこの機能を使って、コンソールにメッセージを表示してみましょう。

任意のWebページを開き、開発者ツールのConsoleタブを開いてください。コンソールの入力欄に以下のコードを入力し、Enterキーを押してみましょう。

console.log("はじめてのJavaScript");

コンソールに「はじめてのJavaScript」というメッセージが表示されましたね。これがconsole.log()の基本的な使い方です。

はじめてのJavaScript

console.log()の括弧の中に、表示したい内容を記述します。文字列（テキスト）を表示する場合は、ダブルクォーテーション（"）またはシングルクォーテーション（'）で囲む必要があります。

他のメッセージも試してみましょう。

console.log("今日は良い天気です");

このように、コンソールに任意のメッセージを表示することができます。

今日は良い天気です

console.log()では、文字列だけでなく数値も表示できます。

console.log(42);
console.log(100);

数値の場合は、クォーテーションで囲む必要がありません。そのまま数字を書くだけで表示されます。

42
100

console.log()では、カンマ（,）で区切ることで、複数の値を同時に表示することもできます。

console.log("名前:", "田中太郎");
console.log("年齢:", 25);

このように、説明と値をセットで表示すると、何の情報なのかがわかりやすくなります。

名前: 田中太郎
年齢: 25

console.log()の使い方を理解したところで、今度はコンソールで簡単な計算を実行してみましょう。

コンソールでは、電卓のように数値計算を行うことができます。

console.log(10 + 5);
console.log(20 - 8);
console.log(6 * 7);
console.log(15 / 3);

これらのコードを順番に実行すると、それぞれ 15、12、42、5 という結果が表示されます。

数値同士の計算では、クォーテーションで囲む必要がありません。

計算結果を変数に保存して、後で使用することもできます。

let number1 = 10;
let number2 = 20;
let result = number1 + number2;
console.log("計算結果:", result);

このように変数を使うことで、値を保存し、繰り返し使用することができます。

計算結果: 30

変数は、値を保存するための箱のようなものです。コンソールで変数の基本的な使い方を練習してみましょう。

let userName = "田中太郎";
let userAge = 25;
console.log("ユーザー名:", userName);
console.log("年齢:", userAge);

変数を定義するときは let キーワードを使用し、等号（=）を使って値を代入します。

let count = 1;
console.log("最初の値:", count);

count = 5;
console.log("変更後の値:", count);

一度定義した変数の値は、後から変更することができます。

最初の値: 1
変更後の値: 5

本章では、コンソールを使ったJavaScriptの基本的な実行方法について学習しました。以下のポイントを理解できたことと思います。

これからJavaScriptの様々な機能を学んでいく中で、コンソールを積極的に活用して、実際に手を動かしながら理解を深めていきましょう。