JavaScriptの出力と入力の基本！console.log()とprompt()の使い方をやさしく解説

1. console.log()でメッセージを出力しよう

1. console.log()でメッセージを出力しよう

console.log()は、JavaScriptで画面（正確には開発者ツールのコンソール）に文字や数値などの情報を表示するための関数です。たとえば、プログラムの動作確認やデバッグ（プログラムの間違いを見つける作業）のときによく使われます。

以下は、console.log()の基本的な使い方です。

console.log("こんにちは、JavaScript！");

このコードを実行すると、ブラウザの「開発者ツール」の「コンソール」タブに次のように表示されます。

こんにちは、JavaScript！

このように、console.log()を使うことで、JavaScriptがちゃんと動いているか確認できます。

2. 開発者ツールってなに？

2. 開発者ツールってなに？

「開発者ツール」とは、ブラウザに最初から付いている、Webページの中身を調べたり、JavaScriptを実行したりできる便利な道具です。

Windowsでは F12キー、Macでは command + option + I を押すと開くことができます。

「Console（コンソール）」タブを選ぶと、console.log()で出力された内容が見られます。

3. prompt()で入力を受け取ろう

3. prompt()で入力を受け取ろう

prompt()は、ユーザーに文字を入力してもらいたいときに使います。画面に入力用のポップアップウィンドウが表示され、ユーザーが入力した内容をJavaScriptで受け取ることができます。

基本的な使い方はこちらです。

let name = prompt("あなたの名前を教えてください");
console.log("こんにちは、" + name + "さん！");

このコードを実行すると、名前を入力するウィンドウが表示され、入力した名前が「こんにちは、○○さん！」の形でコンソールに表示されます。

こんにちは、たろうさん！

このようにprompt()で受け取った入力は、変数に入れてconsole.log()で出力することができます。

4. 数値を入力して計算してみよう

4. 数値を入力して計算してみよう

prompt()で入力した値は、最初は「文字列（テキスト）」として受け取られます。もし足し算などの計算をしたい場合は、「数値（ナンバー）」に変換する必要があります。

変換にはNumber()という関数を使います。

let num1 = prompt("1つ目の数字を入力してください");
let num2 = prompt("2つ目の数字を入力してください");

let sum = Number(num1) + Number(num2);
console.log("合計は " + sum + " です。");

このように、Number()で文字列を数値に変換してから計算することで、正しく結果を出すことができます。

5. 変数（へんすう）ってなに？

5. 変数（へんすう）ってなに？

JavaScriptでは、letというキーワードを使って「変数」を作ることができます。

変数とは、「データ（たとえば名前や数字など）を入れておく箱」のようなものです。あとでその箱の中身を使うことができるので、プログラムが便利になります。

例：

let message = "こんにちは";
console.log(message);

このコードでは、messageという変数に「こんにちは」という文字を入れて、あとからconsole.log()でその中身を表示しています。

6. ちょっと応用：入力と出力を組み合わせたミニアプリ

6. ちょっと応用：入力と出力を組み合わせたミニアプリ

最後に、ユーザーの名前と好きな色を聞いて、あいさつメッセージを作る小さなアプリを作ってみましょう。

let name = prompt("あなたの名前を入力してください");
let color = prompt("好きな色を入力してください");

console.log(name + "さんの好きな色は " + color + " なんですね！");

このように、prompt()で複数の情報を聞き出して、console.log()で一緒に表示することで、簡単な対話型プログラムが作れるようになります。