【Javascript 入門】その2 : Javascript の処理の作り方(変数・条件式・演算子)
shiranashiどうも！こんにちは！
シラナシです！
前回は、javascript を書く準備を進めましたので、開発に向けて基礎知識についてしばらく触れていきたいと思います！
今回やる基礎知識については、プログラム全般でも共通して重要になってくることなので、しっかり身に着けていきましょう！
シリーズ目次
- 【Javascript 入門】その1 : Javascript を使う準備
- 【Javascript 入門】その2 : Javascript の処理の作り方(変数・条件式・演算子)
- 【Javascript 入門】その3 : Javascript の繰り返し文
- 【Javascript 入門】その4 : Javascript のエラーは救世主！？
- 【Javascript 入門】その5 : Javascript のデータ型
- 【Javascript 入門】その6 : Javascript の配列
- 【Javascript 入門】その7 : Javascript のオブジェクト
- 【Javascript 入門】その8 : Javascript の関数
※これ以降は、タイトルや内容を思いついたら追記する予定です。
本日の目次
- 変数の使い方
- 変数の宣言と値の代入
- 値や変数を使った計算
- 計算によく使う演算子の種類
- 条件式の基本 if 文
- 色々な条件式
- [本日のコラム] プログラムにおける 1 と 0
変数の使い方
まず変数って何？って話ですが、簡単に言うと「数値や文字列などの値を格納しておくラベル」のことです。
・数値・・・・プログラム上で出てくる数字の値。「10」「0.1」など。
・文字列・・・プログラム上で出てくる文字列の値。「"mojiretu"」「"文字列"」など。
・値・・・・・プログラム上で実際にやり取りされるデータのこと。
※ピンと来なくても、「へぇ・・・」くらいで大丈夫です。
プログラムにおいて変数は、
・決まった使い方をする数値や文字列があった時に、毎回同じことを書かなくてもいいように
・計算した結果を格納するために
などで使うように用意されております。
たとえば、10＋20 の結果を保存しておきたい、というときは、変数に格納しておきましょう。
let result = 10 + 20;
console.log(result); // 30
上記のように書くと、「result」という変数に、「10 + 20」を入れておく、という意味になります。
2行目のようにこの「result」をコンソールログで表示すると、開発者モードで表示しているコンソールに 30 と表示されるようになります。
変数の宣言と値の代入
さて、変数を使うときの注意ですが、使うときは「宣言」をしてから使う必要があります。
(厳密には、Javascript では宣言しなくても使えてしまうのですが、「必ず宣言が必要」くらいの勢いで覚えておいてください。)
この宣言の仕方についてですが、いくつかのやり方とルールがあります。
let result = 50;
①最初の「let」は宣言をするときに必ずつける記号のようなものです。
変数を付けるときは使う前に必ずこれを付けます。
Javascript では同時に値を代入することもできます。
宣言するときに付けるものは他にも種類があります。
・var・・・・再代入が可能な変数宣言。let より変数の有効範囲が広い。
・let・・・・再代入が可能な変数宣言。 var より変数の有効範囲が狭い。
・const・・・再代入できない定数の宣言。
上記で上げた中で、基本的には const を使い、再代入が必要な変数が欲しい場合は、let を使うようにしましょう。
var は基本的には使わないほうがいいです。
var は有効範囲が広く、システムが大きくなればなるほど、有効範囲を見失い、予期せぬ不具合を発生させたり、読みにくいコードになり、修正などが困難になる可能性があるので、なるべく、const と let のみで変数を宣言するようにしましょう。
②「let」の次に来ている「result」は変数名です。
これは、一部の記号と半角英数字で、任意の名前を付けることができます。(全角文字でも可能ですが、推奨はしません)
ただし、変数の最初の文字は、数字以外でないといけません。
それ以外であれば、概ね好きな言葉で付けることが可能なので、役割に沿ったわかりやすい変数名を付けるようにしましょう。
③最後に「=50」の部分の説明です。
「=」は「変数に値を入れるよ」という意味です。
数学の「=」とは意味が違うので注意しましょう。
「=50」はそのまま「50」という値を変数に入れるよ、という意味になります。
変数に値を入れることを「代入」といい、「let (var)」で宣言した変数には、「再代入」することが可能です。
再代入とは、文字通り、一度作った変数に再度値を入れることです。
その時には、「let (var)」を再度宣言しなおすことは必要ありません。
「let (var)」 (constも) は、「この名前の変数をこれから使うよ」という宣言をするためのものです。
let result = 50;
result = 30;
console.log(result); // 30
値や変数を使った計算
さて次は、プログラミングの計算についてです。
まず大前提として、「=」についてですが、算数や数学の計算式で使われるものとは根本的に違います。
プログラムでの「=」は、「右辺の計算結果や値を、左辺の変数に代入する」という意味になります。
上記の説明でピント来なければ、「変数に値を代入するための記号」くらいの認識で最初は大丈夫です。
「=」については、一旦上記で覚えてもらえれば、この後の緑枠の説明は何となくで大丈夫です。
そのうちプログラミングに慣れてきたら改めて読んでみてください。
【「=」について】
算数や数学では、左辺と右辺の値が一致するという意味になりますが、プログラムではそのことを忘れてください。
プログラムにおける「=」は、前述しましたが、「右辺の計算結果や値を左辺に代入する」という意味になります。
これによって具体的にどういう違いが出るかというと
[ x = x + 2; ]
という式が、プログラミングでは成立します。
プログラミングでは、右辺の計算結果を左の変数に再代入することになるので、x がもともと 2 であれば、新たに x に 4 が代入される結果となります。
数学の場合、両方の値が同一になることはないので、「こんな式は存在しない」と判断されると思います。
さて、「=」について説明しましたので、本格的にプログラムの計算について書いていきたいと思います。
四則演算
まず数学でお馴染みの四則演算です。
Javascript でも同じく四則演算で使えますが、記号に若干の違いがあります。
・+ (プラス) ・・・・・足し算
・- (マイナス) ・・・・・引き算
・* (アスタリスク) ・・・掛け算
・/ (スラッシュ) ・・・・割り算
前述でも少し使っていましたが使い方は概ね同じです。
let plus = 10 + 10;
console.log(plus); // 20
let minus = 10 - 10;
console.log(minus); // 0
let multi = 10 * 10;
console.log(multi); // 100
let divis = 10 / 10;
console.log(divis); // 1
文字列の足し算
ただし、今までのは成立するのは数値の場合です。
文字列の場合、値が数字でも結果が変わるので注意しましょう。
(文字列と数値の明確な違いは「【Javascript 入門】その5 : Javascript のデータ型」で説明予定です)
let str = "10" + "10";
console.log(str); // 1010
let str2 = "それは" + "未経験";
console.log(str2); // "それは未経験"
計算の優先順位の調整
また計算の優先順位も数学と同じで、四則演算の中では、掛け算、割り算が優先的に計算されます。
let result = 10 + 40 * 10;
console.log(result); // 410;
計算によく使う演算子の種類
さて、四則演算については、前項で触れましたが、次は他にどんな演算子や書き方があるのか見てみましょう。
・%・・・割り算したときに整数値の余りを算出する。
・()・・・優先的に計算する
let per = 101 % 10;
console.log(per); // 1
let result = 10 * (40 + 10);
console.log(result); // 500;
計算でよく使う演算子を挙げるとしたら、四則演算と上記くらいかと思います。(個人の感想です。)
他にもいくつかありますが、スタートダッシュではこのあたりを理解していれば問題なく処理を作ることができると思います。
条件式の基本 if 文
さて計算について覚えたところで、次はプログラムするなら「これは知らないと」パート1です。
「同じ処理を通った場合でも、入力した値によって処理を変えたい」そんな時に使うのが条件式です。
その中でも最も基本的なものが、if 文となります。
Javascript では、if 分は次のように使います。
if (true) {
console.log("true");
} else {
console.log("false");
}
上記を手元の js ファイルに書いて実行してみましょう。
上記だと、常にコンソールには true しか出ません。
次に上記の if の括弧の中を false に変えてみましょう。
if (false) {
console.log("true");
} else {
console.log("false");
}
そうすると今度は、false しか、出なくなったと思います。
さて if 文の説明に入る前に、まず「true」と「false」について説明したいと思います。
この二つは変数ではなく、Javascript において特殊な意味を持ちます。
それぞれ真偽の意味を持ち、条件式の判定などでよく使う文字になります。
・true ・・・ 真 の意味を持つ文字
・false・・・ 偽 の意味を持つ文字
これらは if 文を使う上で、とても重要なものになります。
if の括弧の中が ture の場合は、if の波括弧の中の処理が行われ、false の場合は if 文の波括弧の処理は無視されます。
else 文がある場合は、false の時にそのあとの波括弧の中の処理だけ行われます。
これはどんな場合でもいえることで、条件式とは、このどちらかの結果が出る式のことを言います。
簡単なものだと、
let test = 10;
if (test === 10) {
console.log("true");
}
「test」には 10 が入っており、同等の数値かどうかを比較する厳密演算子「===」が使われてるので、この式の結果は true になり、コンソールに true が表示されます。
「test」に 10 以外の値を入れたときは、違う値のため、false になります。
その式が成り立つかどうかで true、false が判断されると考えるとわかりやすいかもしないです。
同じように、条件式では下記のような演算子もよく使います。
・> ・・・・左より右の方が小さいと true
・< ・・・・左より右の方が大きいと true
・>= ・・・左が右以上だと true （同じ数値の場合も true）
・<= ・・・左が右以下だと true
これらは数値でよく使う演算子となります。
「===」は文字列でも使える演算子となるので、数値以外にも、特定の文字列が入っているか確認するためにも よく使うので覚えておきましょう。
色々な条件式
条件式で if 文を紹介しましたが、他にも条件式は有ります。
その代表的ないくつかを紹介したいと思います。
switch 文
switch 文は、true、false の 2 判定ではなく、もっと複数の数の判定をしたいときに使います。
例えば、変数の値が 1 の場合と、 2 の場合、 3 の場合でそれぞれ処理を変えたい場合に有効です。
let test = 1;
switch (test) {
case 0:
console.log(0);
break;
case 1:
console.log(1);
break;
case 2:
console.log(2);
break;
default:
console.log("default");
break;
}
switch の括弧に入れた変数が、各 case の後ろの値と一致したときに、次の break まで処理を実施します。
そのため、case ごとに処理を書いたら 次の case を書く前に必ず break を入れましょう。
そうすれば、その処理が終わったら break の時点で switch 文の処理が終わり、波括弧が終わり、括弧の中のそれ以上の処理は行いません。
ただ、意図的に case の後ろに break を入れず、次の case 文でも実施する処理を行うように書く場合もあります。
慣れてきたら、その処理も書いてみて、実際にどういう動きになるか試してみましょう。
三項演算子
三項演算子は、例えば変数や定数に条件によって違う値を入れたい場合によく使います。
let test = 10;
const result = (test === 10) ? true : false;
三項演算子は、「?」と「:」で区切り、必ず 3 つのブロックを使って書きます。
・最初の「?」の前が条件式。
・「?」と「:」が、条件式が true の場合に変数に入る値。
・最後の「:」の後ろが、条件式が false の場合に変数に入る値。
となります。
これもよく使う条件式になるので、是非覚えてみてください。
さて、今回は変数と条件式をやりました。
これらだけでもいろいろな使い方をしてみて、プログラムっぽいことができるようになります。
また、これらを使えずにプログラミングはできないと思いますので、是非何度も使って覚えていきましょう。
さて、次回は「プログラミングの基本 その2」ともいえる繰り返し文です。
これを覚えたら、よりプログラミングっぽいことができるようになります。
ここまで読んでいただきありがとうございました！
また次回もよろしくお願いいたします！
おすすめの本！
基本的な情報から、痒い所に手が届く細かな情報もあります！
Javascript やるなら是非買ってみてください！
[本日のコラム] プログラムにおける 1 と 0
プログラミングにおける 1 と 0 って実はすごく重要な意味を持ちます。
分かりやすい代表例としては、Javascript でも 0 は false と同等で、それ以外の数字は true となることでしょう。
では、なぜこういった特徴が出るのかというと、コンピュータの根本的なシステムに関わってくることです。
今の コンピュータは突き詰めるとスイッチの ON と OFF の集合体で動いています。
たくさんのスイッチが存在し、それをわかりやすく表現する方法として、2進数があります。
2進数も スイッチ と同じように 2 つの値で表現できる表現方法です。
0 であればOFF、1 であればON と、複数のスイッチをグループ化するときにとても扱いやすい数字なんですね。
昔の原初のコンピュータは、0 と 1 でプログラミングしてたこともあるようです。
(筆者も詳しく知りませんが。)
ここまでくれば最初に話した true と false の話も分かるかもしれません。
0 がスイッチのOFF にあたるので、スイッチがついてない状態で false、逆に 1 は ON となるので true とコンピュータに判断させやすいため、この慣習が残り続けているのだと思います。
