Web プログラミング

【もりけん塾94記事】おさないさんのJavaScript講座「変数・定数編」

完全未経験でJavaScriptを独学している、まゆ(@Ymayu_it)です。

 

Web万屋エンジニアチャンネルを運営されている、おさないさんの動画「JavaScrip入門講座」を受けつつ実際にvscodeにコードを書いていきました。

 

記事の流れは、

  • 変数と定数の基本
  • 変数と定数は何が便利なのか
  • let、var、constについて
  • ブロックスコープとグローバルスコープ
  • 記事のまとめ

こちらでまとめていきます。

 

変数は基礎中の基礎で必要な部分のようなので動画や記事、本などで理解するまでやっていきます。

 

おさないさん:初心者向けJavaScript入門講座4

 

おさないさんの動画は初学者でもわかりやすくJavaScriptを教えて下さいますが1回だと、

  • どの場面で

使うかなどが分かっていないと動画を見ている時は理解ができても実際にコードを書くときに意味が分からないといった結果になるので再度動画を見ることが流れ的に良さそう。。

 

変数と定数の基本

変数と定数はデータにあだ名を付ける機能のこと。

 

変数にはvar、let、constがあり使い方は以下の3つがあります。

  1. 宣言:あだ名を作る
  2. 代入:あだ名と値を紐付ける
  3. 参照:あだ名に紐付いている値を使う

 

例えば以下のようなコードだとします。

 JavaScript
var mikan = 1;
console.log(mikan);

 

上記の場合、

  • varが変数
  • mikanが変数のあだ名
  • =1が値

となるので、

変数varにmikanというあだ名を宣言しmikanに=1を代入、console.log(mikan)が参照

となる。

 

上記の結果、GoogleChromeのconsole画面で表示されたのは「1」でした。(以下の画像参照)

 

 

mikanという変数名に=1を代入し、console.logでmikanを指定したので結果的に1が表示される流れになります。

 

変数につけて良い名前のルール

変数の名前はなんでも付けて良いわけではありません。

 

変数につけて良いものがあります。

それは、

  • 英字
  • 数字
  • _(半角アンダースコア)
  • $(半角ドル記号)

上記4つになります。

例えば、

 JavaScript
var mikan = 1;
var mikan1 = 1;
var $mikan = 1;
var _mikan =1;

これらが可能。

 

ただし変数の名前につける注意点があります。

  • 数字は先頭文字として利用できない
  • 予約語は利用できない
    ※予約語を変数名の一部としての利用はできる

 

上記の2つ目である予約語を変数名の一部としての利用はできるを例として挙げると、

 JavaScript
var force =1;

forはJavaScriptで予約語として使うのでNGですがforceだと変数名に加えて「ce」が加えられているので利用可能だということになります。

 

変数と定数の何が便利なのか

変数や定数を宣言しておくと1箇所だけの変更で全部の値を変更することが可能。

 

例えば、

 JavaScript
const mikan = "みかんが美味しい";
const remon = "レモンが美味しい";
const yuzu = "ゆずが美味しい";
console.log(mikan);
console.log(remon);
console.log(yuzu);

上記のように3つの文には「美味しい」という文字がかぶっています。

 

これを変数で定義することで1箇所さえ変更すれば、全て変更してしまうという便利なものに。

 JavaScript
const aji = "美味しい";
const mikan = "みかんが" +aji ;
const remon = "レモンが" +aji;
const yuzu = "ゆずが" +aji;
console.log(mikan);
console.log(remon);
console.log(yuzu);

 

「美味しい」をconst oishiで定義するだけで一気に変更することができます。

 

「美味しい」から「まずい」に変更する場合は、

const aji = "まずい";

にするだけで以下の結果になります。

 

コードは以下のとおりで「const aji = "まずい";」の部分しか変更していません。

 JavaScript
const aji = "まずい";
const mikan = "みかんが" + aji ;
const remon = "レモンが" + aji;
const yuzu = "ゆずが" + aji;
console.log(mikan);
console.log(remon);
console.log(yuzu);

 

これがあったらすごい楽そう〜

constとif文を使ってBMIを作成

BMIをconstとif文で作成できるんじゃ・・と思って作成!

 

 JavaScript
const bmi = 39;
if(bmi < 18.5){
console.log("痩せ");
} else if (bmi < 25) {
console.log("普通");
} else if (bmi < 30) {
console.log("肥満(1度)");
} else if (bmi < 35) {
console.log("肥満(2度)");
} else if (bmi < 40) {
console.log("肥満(3度)");
} else {
console.log("肥満(4度)");
}

const bmi = 39;とBMI39って肥満(3度)ですが、しっかりconsoleで表示された!

 

メモ

肥満は体脂肪が過剰に蓄積した状態のこと。

脂質異常症や高血圧、高尿酸血症・痛風などのような健康障害とBMIで肥満・肥満症・高度肥満症・高度肥満に分類されます。

肥満は高血圧、脂質異常症、耐糖能異常などのような代謝異常の原因から動脈硬化の進行に繋がると言われているので減量治療が必要なもの。

肥満の人が急に断食などをすると不整脈や低血糖症状などが生じやすいので専門の指導者のもとで治療をしたほうが良いでしょう。

 

身長と体重を入力したらBMIが計算されて痩せ・普通・肥満に分類したいと思って以下を作成したら、、

 JavaScript
const height = 1.6;
const weight = 160;
const bmi = weight/(height * height);
if(bmi < 18.5){
console.log("痩せ");
} else if (bmi < 25) {
console.log("普通");
} else if (bmi < 30) {
console.log("肥満(1度)");
} else if (bmi < 35) {
console.log("肥満(2度)");
} else if (bmi < 40) {
console.log("肥満(3度)");
} else {
console.log("肥満(4度)");
}

身長160で体重160kgってどう考えてもって思うけど、、

できた!

 

あれ、でも小数点って使ってよかったのかな?

データ型を見直したら良いのかな。

メモ

浮動小数点リテラルというものがデータ型にはあり、小数点や指数を利用して実数を扱える。

参考:独学JavaScriptp,P39

ってあるから使って良さそう!

 

ちゃんと頭を使って自分が作りたいものが作れた!(嬉しい)
時間を置いてから再度学び直すの良いな。。

 

変数と定数の使い方の違いをここで再度学びなおしておくために、自分なりにまとめていきます。

 

let、var、constについて

var let const
優先度 3位 2位 1位
エラーに対して 厳しい
再宣言
再代入
初期値
ブロックスコープ
変数宣言
備考 宣言と代入がセット

簡単にvar、let、constの違いを表にまとめました!

 

できるだけエラーに厳しいconstを使用するようにすることというのはいろんな動画でも説明にありました。

 

ただ動画での例として使っていたのはvarが多かったので、コード数が少なく再宣言や再代入を試すためにしていたのかな・・?

 

ブロックスコープとグローバルスコープ

ブロックスコープとグローバルスコープもJavaScriptでは必要な部分だと、おさないさんの動画では紹介されていたのでまとめていきます。

 

ブロックスコープ

ブロックスコープはあだ名の有効範囲のことで{}で表す。

 

また{}内のことをブロックという。

 

{}のブロックスコープ内と外の違いは何があるのかと思っていると説明がありました。

  • ブロックスコープ内:変数の宣言がブロックスコープ内であれば値が存在するため表示される
  • ブロックスコープ外:変数の宣言がブロックスコープの内であれば値が存在しないと表示される

ブロックスコープ内で宣言した変数は存在を認められるけど、外でconsole.logでブロックスコープ内の変数を表示しようと思ってもできないということのようです。

 

また注意点としてブロックスコープ内で同じ変数名は2度以上は使えないようにしているようです。

グローバルスコープ

<script>~</script>の~の最も外側部分のエリアのこと。

 

まとめ

おさないさんのJavaScript動画はスッキリと初学者にもわかりやすくまとめてくれています。

 

動画とこの記事のまとめとして、

  • 変数と定数の基本は「データにあだ名を付ける機能のこと」
  • 変数につけても良い名前は英字、数字、_(半角アンダースコア)、$(半角ドル記号)
  • 変数と定数が便利な理由は1箇所だけの変更で全部の値を変更することが可能
  • let、var、constはエラーが少ないconstを最優先で使う
  • ブロックスコープは{}で、グローバルスコープは{}の最も外側

とJavaScript初学者なりのまとめです。

 

 

おわりに

JavaScriptやPC、勉強方法について混乱していました。

 

混乱した時や理解ができない時ってこれまでどうしていたかなって思った時、

  • 違うことをして頭を切り替える
  • かなり時間がたって理解する
    (高1の数学が理解できなかったとき、高2で高1のことが理解できるなど)

だったので一旦、頭の休憩したおかげでBMIのすっごく簡単なJavaScriptができた…!

自分にあった勉強方法を探すことに苦戦したな〜><

 

簡単なものから積み重ねていけたらいいな!

 

もりけん塾(@terrace_tech

Thanks:もりけんさん

 

もりけんさんの『武骨日記』へ

 

-Web, プログラミング

© 2020 Mayu_Yamada