最新！JavaScript入門講座ーconsole.logで文字を出力する

みなさんのなかには、JavaScriptの学習を始めようとしている方もいると思います。そこで、JavaScriptの基礎から、みなさんがわかりやすいようにまた、私自身も日々のプログラミング学習のアウトプットとして記事に残します。

本記事では、JavaScriptの入門講座シリーズを始めていきます。今回はその最初として、もっとも初歩のプログラミングでの文字の出力を解説していきます。

本記事のペルソナ

JavaScriptの勉強を始めていきたい方
JavaScriptが初めてのプログラミングの方
JavaScriptで出力を学びたい方

第２回変数と宣言

JavaScript基礎出力のやり方
1. Nodeのインストール
2. JavaScriptの出力
まとめ

JavaScript基礎出力のやり方

Nodeのインストール

今回は初めてプログラミングをする方を対象としているため、JavaScriptのみを使っていきます。よって、最初にNodeがインストールされている必要があります。

Nodeがインストールされていない方は、こちらの記事を参照してください。

JavaScriptをMacで始めるための環境構築を初心者向け解説！！

みなさんこんにちは、学園教頭のA.K.です。この記事を見ている皆さんはいざ、JavaScriptを始めようとしている方が多いと思います。ですが、プログラミングを始めるためには環境構築をする必要があります。そこで、今回は初心者向けに...

この記事を参考にして、Nodeを先にインストールしてください。これで、JavaScriptをターミナルで実行することができるようになります。

JavaScriptの出力

では、さっそく参りましょう。
任意のフォルダ内にファイルを一つ作成して、次のコードをまねてください。
JavaScriptのファイル拡張子は.jsです。間違えないようにしてください。

console.log("Hello JavaScript!");

次にターミナルを起動して、プログラムを実行してみましょう。
このときに、今の作業ファイルにprint.jsがなければいけませんので、注意してください。

nodeを実行する方法は以下の通りです。今回作成したファイル名はprintであるので、ファイル名にはprintを入れましょう。

//nodeの実行例
$ node ファイル名.js

$ node print.js

//実行結果
Hello JavaScript!

実行すると、ターミナルにこのように表示されます。
おめでとうございます。これで、あなたもJavaScriptの世界に入ることが出来ました。

では、他の記述もやってみましょう！

console.log("ECMAScript≒JavaScript");
console.log("You Tube");

console.log("資産運用");
console.log("S.C.I.学園ブログ");

$  node print.js

//実行結果
ECMAScript≒JavaScript
You Tube

資産運用
S.C.I.学園ブログ

このように出力結果が表示されます。上の二行は半角文字で、下の二行は全角文字の出力になります。
では次のステップに行きましょう。次のようなコードを実行してみましょう。

console.log("クレジットカード\nデビットカード");

$ node newline.js

//実行結果
クレジットカード
デビットカード"

はい、実行結果はこうなります。コードは一行しか書いていませんが、出力結果は二行になっていますね。これは、二つの単語の間にある\(バックスラッシュ)nの機能です。これを入れると、出力するときに改行してくれます。

ちなみに、プログラムのソースコードではバックスラッシュになっいて、記事では\(円マーク)になっています。これは見た目は違った記号に見えてしまいますが、同じ記号として扱われます。

//文字
console.log("31")

//数字
console.log(31);

$ node print.js

//実行結果
31

31

実行結果のように、文字だけでなく数字をそのまま入れても出力されます。
実行結果上は同じように見えますが、上と下では少々意味が違います。
上の31は先ほどの出力と同じ、文字としてJavaScriptに認識されています。しかし、下の31は数字としてJavaScriptに認識されます。

これらの違いについてはこの先で解説します。いまは、上と下の書き方では違いがあるんだな～くらいの理解で大丈夫です。