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()で一緒に表示することで、簡単な対話型プログラムが作れるようになります。

この記事を読んだ人からの質問

この記事を読んだ人からの質問

プログラミング初心者からのよくある疑問／質問を解決します

質問1：JavaScriptでプログラムの実行結果を確認するには、どのような方法が一番簡単ですか？

回答：JavaScriptのプログラミングにおいて、最も基本的かつ簡単な出力方法は、コンソールログ関数を使用することです。具体的には、命令文の中に表示させたい文字や数字を入れることで、ブラウザが提供している開発者ツールのコンソール画面に情報を表示させることができます。この方法は、プログラムが正しく動作しているかを確認する「動作確認」や、プログラムの記述ミスを探し出す「デバッグ作業」において、プログラミング初心者から現役のエンジニアまで世界中で最も頻繁に利用されている手法です。

質問2：コンソールログで出力した文字が見当たらないのですが、どこを確認すればよいでしょうか？

回答：コンソールログの出力結果は、Webページ上の見た目には表示されません。ブラウザに標準搭載されている「開発者ツール」という機能を起動する必要があります。Windowsをお使いの方はキーボードの「F12キー」を、Macをお使いの方は「コマンドキー、オプションキー、アイキー」を同時に押すことで、開発者ツールの画面が立ち上がります。その中にある「コンソール」または「Console」と書かれたタブを選択すると、JavaScriptから出力されたメッセージを確認することができます。

質問3：JavaScriptを使って、Webサイトを訪れたユーザーに文字を入力してもらうポップアップを出すにはどうすればいいですか？

回答：ユーザーからの入力を受け取るには、プロンプト関数という非常に便利な仕組みを利用します。この命令を実行すると、ブラウザの画面中央に小さな入力用ウィンドウ（ポップアップ）が表示されます。ユーザーがその中に名前や年齢、好きな食べ物などのテキストを入力して「OK」ボタンを押すと、その内容をJavaScriptプログラムの中でデータとして受け取ることが可能になります。初心者の方が最初に対話型のプログラムを作成する際に、最も手軽に実装できる入力方法です。