プログラミング

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

スポンサーリンク

こんにちは!とも(@tomo_ITBizBlog)です!

今回は

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

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

本記事の内容

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

変数とは?

変数のイメージ

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

変数のイメージ②

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

変数の使用方

変数は値を代入して使う

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の変数と定数の使用方
について学んでいきました。

とも

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

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

とも

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

ありがとうございました

  • この記事を書いた人
  • 最新記事

とも

■エンジニア歴 8年目(2017~現在)
■複業ブロガー歴 5年目(2020~現在)
現在29歳
AWS全冠エンジニアブロガー

閲覧有難うございます!!

『新しい分野に挑戦する
大人初心者=ことな
に向けて,
「分からないが分からない」
を脱出して一歩踏み出せるよう
背中を押して応援すること』
を理念に記事を作ってます!

★プロフィールはこちら
■見やすいプロフィール
■詳細プロフィール

★Amazonアソシエイト・プログラムの参加者であり、ブログ内で紹介する書籍や商品はアフィリエイトリンク、PRである場合があります ★被リンク,コラボ依頼,
企業案件,ご意見ご質問も
ご気軽にお問合せください

📄イチ推し記事はこちらから!

1

スポンサーリンク AWS初心者必見!CloudTechを徹底レビュー! AWS初学者を導く体系的な動画学習サービス「CloudTech」 こんにちは!とも(@tomo_ITBizBlog)です! こん ...

2

スポンサーリンク 初心者必見!AWS全冠資格勉強におすすめの問題集5選と一発合格のコツ 初心者必見!AWS全冠資格勉強におすすめの問題集5選と一発合格のコツ こんにちは!とも(@tomo_ITBizB ...

【高的中率】クラムメディアで人気IT資格に合格しよう 3

スポンサーリンク 【高的中率】クラムメディアで人気IT資格に合格しよう 【高的中率】クラムメディアで人気IT資格に合格しよう こんにちは!とも(@tomo_ITBizBlog)です! 本記事はこんな悩 ...

4

スポンサーリンク オーダーシャツのおすすめはこれ!Yシャツとの比較やお得なクーポンも! オーダーシャツのおすすめはこれ!Yシャツとの比較やお得なクーポンも! こんにちは!とも(@tomo_ITBizB ...

-プログラミング
-, ,

© 2024 ことなの学校 Powered by AFFINGER5