JavaScriptの基本(1): コンソール出力とデータ型

今回からJavaScriptの基本を学ぶ記事を作成します！まずはコンソールに出力する方法を学びましょう。コンソールは、プログラムの動作を確認し、デバッグを行うために非常に重要なツールです。これを使いこなすことで、エラーの特定や変数の値の確認をスムーズに行うことができます。

\ JavaScript入門はこれ一冊でOK! /

確かな力が身につくJavaScript「超」入門 第2版 [ 狩野 祐東 ]

楽天ブックス

¥2,728 （2025/02/13 11:47時点 | 楽天市場調べ）

Amazon

楽天市場

メルカリ

ポチップ

コンソールへの出力

コンソールはWebブラウザの開発ツールの一部であり、プログラムの実行結果やデバッグ情報を表示するのに役立ちます。以下のコードを実行すると、コンソールにHello Worldという文字列が表示されます。

console.log("Hello World);

これはJavaScriptの基本的な出力方法であり、開発時に頻繁に使用されます。

文字列の扱い

JavaScriptで文字列を扱う際は""または''で括ります。例えば:

console.log("Hello");
console.log("World");

上記のコードを実行すると、コンソールには次のように表示されます。

Hello
World

このようにconsole.log()を使用すると、何回でも異なる文字列を表示することができます。特にプログラムの動作を確認する際には、複数のconsole.log()を使って適宜ログを出力すると便利です。

また、文字列の結合も可能です。例えば、以下のように+演算子を使うことで、複数の文字列をつなげて出力できます。

console.log("Hello" + " " + "World");

このコードを実行すると、Hello Worldと表示されます。文字列を適切に扱うことは、プログラムを効率的に記述する上で重要です。

数値の扱い

数値を出力する場合、""で括る必要はありません。例えば以下のように書くことができます。

console.log(123);

ここで理解しておくべきポイントを紹介します。

"123" → 文字列の123。計算には使用できない。

123 → 数値の123。計算に使用可能。

つまり、123 + 10は133になりますが、"123" + 10は"12310"という文字列連結になります。数値と文字列の違いを理解し、適切に使い分けることが重要です。

さらに、console.log()を使って数値同士の計算結果を出力することもできます。

console.log(10 + 20); // 30が出力される
console.log(50 - 10); // 40が出力される
console.log(5 * 5);   // 25が出力される
console.log(100 / 4); // 25が出力される

このように、算術演算子（+, -, *, /）を使用して計算し、結果をコンソールに出力できます。

練習問題

以下の問題を解いてみて下さい！

1. コンソールに「こんにちは」と表示する。

2. コンソールに数字の30を出力する。

3. コンソールに文字列の30を出力する。

4. 10 + 5 の計算結果をコンソールに出力する。

5. 20 - 7 の計算結果をコンソールに出力する。

練習問題の解答

console.log("こんにちは"); // (1)
console.log(30);          // (2)
console.log("30");       // (3)
console.log(10 + 5);      // (4)
console.log(20 - 7);      // (5)

JavaScriptの基本として、コンソールへの出力とデータ型の違いを理解することが大切です。特に、数値と文字列の扱いをしっかり理解することで、プログラムのバグを減らし、スムーズな開発が可能になります。

また、プログラムの挙動を確認するためにconsole.log()を活用することは、開発の基本的なテクニックの一つです。適宜ログを出力しながら、JavaScriptの動作を確認し、スキルを向上させていきましょう！