プログラミング

【プログラミング初心者】1から学ぶJavaScript(ES6)/第2回:変数と定数の使用方

とも

どうもエンジニア×ブロガーのともです!

今回は

とも
  • 変数ってなに?使い方を知りたい!
  • 定数ってなに?使い方を知りたい!

という疑問/悩みを解決していきます。

本記事の内容

  • 変数とは?
  • 変数の使用方
  • 変数使用のメリット
  • 変数の値の更新方
  • 定数とは?
  • テンプレートリテラルとは?
  • まとめ

スポンサーリンク

変数とは?

変数のイメージ

一般的に変数はデータ(値)を入れる箱に例えられます

ゆみ
変数のイメージ②

実際に使い方を見てみましょう!

ゆみ

変数の使用方

変数は値を代入して使う

let 変数名 = 値」で右辺の値を左辺に代入して,変数名を定義します。

ゆみ
let name = "tomo";
console.log(name);
実行結果: tomo
とも

nameが代入したtomoに置き換わって出力されているね!
僕も書いてみよっと!

let name = "tomo";
console.log("name");
実行結果: name
とも

あれっ?そのまま出てきちゃった

 console.log("変数名"); 
 console.log(変数名);

変数名をクォーテーション(""or'')で囲むと
文字列として出力されちゃうから注意が必要だよ!

ゆみ
とも

ちなみに変数を用いて下のように
文字列や数値と同様の扱い方が可能です。

let name = "tomo";
console.log("Mr."+name);
let number = 5;
console.log(number +5);
実行結果:
Mr.tomo
10

チェックポイント

①「let 変数名 = 値」で変数名を定義
②「console.log(変数名);」 変数を出力するときはクォーテーションはつけない
③文字列や数値と同様の扱い方が可能

変数使用のメリット

とも

変数を使用するメリットを紹介します!

同じ値を繰り返し使える

let Language = "JavaScript";
console.log(”第1回"+ Language +"の概要を学ぼう");
console.log(”第2回"+ Language +"の変数の使用方を学ぼう");
実行結果: 
第1回JavaScriptの概要を学ぼう
第2回JavaScriptの変数の使用方を学ぼう

あえて繰り返し使うとわかっているものは変数に置き換えて使えます!

ゆみ

変更に対応しやすい

let Language = "C++";
console.log(”第1回"+ Language +"の概要を学ぼう");
console.log(”第2回"+ Language +"の変数の使用方を学ぼう");
実行結果: 
第1回C++の概要を学ぼう
第2回C++の変数の使用方を学ぼう

定義を変えればすべての変数に反映されるので横展開しやすいですね!

ゆみ

値の意味がわかりやすい

わかりやすい名前をつけてあげることで変数としての役割を果たします。

ゆみ
とも

いい名前の付け方,悪い名前の付け方とかあるの?

例えばこんな付け方はGoodパターンね
○ 「name, age, number」・・・英単語を用いる
○ 「FirstName」・・・2語以上は大文字で区切る

ゆみ
とも

逆に悪い名前の付け方は?

Badパターンはこんな感じ
✗ 「365days」・・・ 数字開始はエラーが起こる
△ 「namae」・・・ローマ字使用は見づらく,望ましくない
△ 「名前」・・・日本語使用は統一感がなく,望ましくない

ゆみ

変数のメリット!

同じ値を繰り返し使える
変更に対応しやすい
③値の名前がわかりやすい ⇒ GoodパターンとBadパターンは要Check!!

変数の値の更新方

変数はletなしで上書き

let Greeting ="Hello";
console.log(Greeting + " World");
Greeting = "Good Morning";
console.log(Greeting + " World");
実行結果: 
Hello World
Good Morning World
とも

こんにちは世界をおはよう世界に変えるのもラクラク!

値を上書きする時は
「let」をつけないを忘れずに!

ゆみ

変数自身も更新できる

let number ="5";
console.log(number);
number = number + 5;
console.log(number);
実行結果: 
5
10
とも

numberに5を足した値をnumberに代入しているイメージだね!

大正解!

ゆみ

変数更新の省略形

基本形⇒省略形
x = x + 10 ⇒ x += 10
x = x - 10 ⇒  x -= 10
x = x * 10 ⇒  x *= 10
x = x / 10 ⇒  x /= 10
x = x % 10 ⇒ x %= 10

省略形を覚えておくと見やすくコードが書けるね!

ゆみ

チェックポイント

①変数の値を更新する時は 「let」をつけない
②変数自身の更新も可能
③変数更新の省略形(+=,-=,*=,/=,%=)

定数とは?

定数は変数に似ていますが,
値の更新ができない特徴を持ちます。
※更新するとエラーが起きます。

定数は Const を使います。

ゆみ
とも

「値の更新ができない」ことで
予期しない更新を防ぐ事ができるんだ

Const name = "tomo";
console.log(name);
実行結果: tomo

チェックポイント

①定数はConstを使う。
②後から値の更新ができない(エラーが出る)
③予期しない更新を防ぐ目的

テンプレートリテラルとは?

定数(変数)の埋め込みには
テンプレートリテラル」
を使います。

ゆみ
const name = "tomo";
console.log(`Hello, ${name} .`);
実行結果: Hello, tomo.

${定数}」のような形で書きます。
またconsole.log()の中の文字列全体を
バッククォーテーション(`)で囲む必要があります。

ゆみ

チェックポイント

①テンプレートリテラルは定数(変数)の埋め込みに使う
②埋め込みたい定数(変数)は「${定数(変数)}」の形で書く
③文字列全体をバッククォーテーション(`)で囲む

まとめ

今回はJavaScriptの変数と定数の使用方
について学んでいきました。

ゆみ
とも

変数,定数,テンプレートリテラル
しっかり押さえようね!

次はプログラミングでよく使う処理の一つ
"条件分岐”に関して学んでいくよ!

ゆみ
とも

ご覧頂きありがとうございました!

ありがとうございました

ゆみ

スポンサーリンク

更新情報

-プログラミング
-, ,

© 2021 ことなの学校 Powered by AFFINGER5