変数・文字列・出力

この記事では、JavaScriptの基礎となる変数・演算・文字列・出力について解説する。

これらはプログラミングの基本であり、今後のすべての学習の土台となる。

この記事で学ぶこと：

コメントについて
変数宣言のやりかた
文字列の概要
出力について

コメントとは

コメントとはプログラム上で実行されない部分のことを指す。

コメントは、プログラムの注意書きや目的などを書くときに使用する。

他人や昔自分が書いたコードは分かりにくいことがある。コメントで情報を補完すると、後から改造や修正がしやすくなるため、適宜書くことをおすすめする。

一行コメント

スラッシュ2つ「//」を書くと、その行の「//」より後ろの部分はコメントになる。

以下がコメントのサンプルである。


// 一行コメント

console.log("ここはコメントではない");  // スラッシュより後ろはコメント

複数行コメント

複数行にまたいだコメントを書きたい場合は「/* */」を書くと複数行のコメントを書くことができる。

以下が複数行コメントのサンプルである。


/*
複数行コメント
のサンプルである
*/

/* 囲んだ場所がコメントになる。 */

console.log("ここはコメントではない");  /*この間はコメント*/    console.log("ここはコメントではない");

変数

変数宣言(let, const)

変数の宣言には主に「let」と「const」を使用する。

変数に値を代入するときは「=」を使う。

let と const 使い分け：

let：値を後から変更する予定がある場合
const：値を変更しない場合(定数)

基本的には const を使い、必要な時だけ let を使うのが良い習慣とされている。

let

「let」は再代入可能な変数を宣言するときに使用する。

値を後から変更したい変数に使用する。


let a = 10;
console.log(a); // 10
a = 20;
console.log(a); // 20

const

「const」は再代入不可能な変数を宣言するときに使用する。

プログラム内で値を変更しない変数に使用する。


const b = 30;
console.log(b); // 30
b = 40;         // constは再代入不可なので「TypeError」になる

よくある間違い

1. constに再代入しようとする


const x = 10;
x = 20;         // エラー

2. 変数宣言せずに使う


console.log(name);  // エラー
let name = "太郎";  // 先に宣言が必要

3. セミコロンを忘れる


let a = 10      // セミコロンがない
let b = 20;     // セミコロンがある

※JavaScriptは多くの場合セミコロンを省略できるが、書く習慣をつけると良い

文字列

文字列とは、文字が連続したデータのことである。

JavaScriptでは文字列をクォーテーションで囲む。


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

※文字列の詳しい操作方法は「文字列操作」の記事にまとめる。

出力

JavaScriptには主に以下の2つの出力方法がある。

console.log()

コンソール(開発者ツール)に出力する。開発中のデバッグによく使う。


console.log("Hello, World");
console.log(100);
console.log(10 + 20);   // 計算結果も表示できる

window.alert()

ダイアログ(ポップアップ)で出力する。ユーザーに通知をするときに使う。


window.alert("こんにちは");
// または単に
alert("こんにちは");

使い分け：

console.log()：開発中、動作確認やデバッグに使う
alert()：ユーザーに重要な情報を伝えるときに使う

通常はconsole.log()を使うことが多い。

演習問題

ここまでの内容を理解できたか、実際に手を動かして確認しよう。

演習1：変数の基本

変数を1つ宣言して、値を代入し、console.logで出力するプログラムを作ってみよう。

解答


let a = 1;
console.log(a);

演習2：演算の基本

変数を2つ宣言して、それぞれの数値を代入し、足し算と掛け算の結果を表示するプログラムを作ってみよう。

解答


let a = 5;
let b = 8;
console.log(a + b);
console.log(a * b);

演習3：文字列の基本

変数を宣言して、文字列を代入し、文字列を表示するプログラムを作ってみよう。

解答


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

演習4：Node.jsでプログラムを実行

Node.jsを使って変数を2つ宣言して、数値を代入し、四則演算の結果を出力するプログラムを作ってみよう。

解答


const num1 = 10;
const num2 = 5;
console.log(num1 + num2);
console.log(num1 - num2);
console.log(num1 * num2);
console.log(num1 / num2);

まとめ

この記事では、JavaScriptの以下の4つを学んだ

変数：データを入れる箱
基本的な演算：演算子の使い方
文字列：文字列の基本
出力：画面に結果を出力する方法