javascriptの変数って何？って思う人は知らずのうちにもう使っているのかもしれませんが、今回はその変数について紹介していきます。
この記事を読み終わる頃には、変数がどうゆうものなのかや使い方まで網羅していることでしょう！
変数はかなりの頻度で使われています。というか変数なしではプログラミングできないと思います。なので、これを機に変数がなんたるものなのかというのを学んでおきましょう！
変数とは何か？
変数てなんや？簡単にいうと、名付けやと思ってもらえればOKです！
人でも一緒です。一人一人名前がついています。なので、ある人を呼びたい時は名前を使うことでその人を呼ぶことができますよね！
プログラミングもそれと同じ感覚で、自分がこれから使うものに対して名前をつけます。そうすることで、名前を指定してそのものを使えるようになります。
実際にみてましょう！
// =で左に付けた名前へ代入している。
let name = "山田";
let dog = "犬";
こんな感じで変数を使います。
let(宣言) 変数名 ＝ 変数に入れたいもの
宣言については次で説明しますが、こうゆう風に変数を使うんだなーと覚えててください！
宣言とは？
宣言と聞くとすごく難しく感じるのは僕だけでしょうか？僕も最初変数を使うときに宣言って言葉だけで難しく感じました。でも。実はそんなに難しく考える必要はなく、実際は『今から変数使いますよー』っていうことだと思ってください！そう思うと少しはわかりやすくなると思います。
今から変数使うで！ 変数名 ＝ 変数に入れたいもの
let name = “山田”;
こんな感じで変数を使うことができます！なので、これから宣言と聞いても抵抗なく変数を使えると思います！
ちなみに、宣言は種類が３つあって２つはよく使うやつなので覚えておくといいでしょう！
- let
- const
- var
この３種類の使い方は例を参考にしてみましょう！
// letは１番よく使う変数の宣言、上書きもできる
let name = "田中";
name = "山田";
// constの特徴は上書きができない
const firstName = "太郎";
// これはできない
firstName = "二郎";
var number = 1;
number = 2;
// varだけどこでも使えちゃうし、上書きもできる。
// だからエラーも起きやすく非推奨になっている！
if (number === 1) {
var one = 1;
}
// 実行 1
console.log(one);
// letとconstはスコープ内でしか使えない。
if (number === 1) {
let two = 2;
}
// ここではエラーになる。
console.log(two);
上で見てもらってもわかるように、よく使うのは『let』と『const』で『var』は使わない方がいい！それは、次のスコープの話でも出てくるが、もし変数名が被ってしまった場合はvarでは普通に使えてしまうので、期待している結果にならない可能性も出てくる。
些細なミスをなくすためにも使うのは、『let』と『const』の２つを使うことを心がけよう！
スコープとは？
先ほども出てきたスコープっていうのはなに？とう話なんですが、めっちゃ簡単にいえば括弧の初めから最後まではスコープの範囲です。{ ここから } ここまで。
なんでこの話をするかというと、変数には
グローバル変数
ローカル変数
というのがあるからです。例を見てみましょう！
// グローバル変数の範囲はここから↓
let number = 10;
// グローバル変数範囲はここまで↑
if (number < 20) {// ここからローカル変数の範囲はここから↓
//いわばここがスコープ内となる
let one = 1;
}// ローカル変数はここまで↑
// ここからまたグローバル変数↓
// グローバル変数内で宣言した変数はグローバル変数の範囲内で使える
console.log(number);
// 逆にローカル変数内で宣言した変数はグローバル変数の範囲内では使えない
console.log(one);
ちょっとわかりずらいかもしれませんが、
- ローカル変数 ： 関数などの中で宣言された変数
- グローバル変数 ： 関数の外で書かれた変数
なので、ローカル変数はスコープ内でしか使えないというのは、わかっていただけたのではないでしょうか？
varがややこしいのが、どこで使ってもグローバル変数になるので、エラーやバグの原因になりやすいので、使うのをオススメしません。
型指定はどうするの？
Javascriptでは型を変数に入れる時点で、自動的に判断して型を付けてくれます。なので、型の指定をしなくていいです。
型の指定を強化したい場合は、自分で関数などを作らないといけないというデメリットもありますが、そこの曖昧さが好きな人が多いみたいです。
なんの型が入っているかはすぐに調べれます！以下を参考にしてください！
// 変数前にtypeofというおまじないをかけると
let number = 10;
// 実行 number
let strNumber = "10";
console.log(typeof number);
// 実行 string
console.log(typeof strNumber);
numberとかstringとか出てきましたが、これは型の名前でjavascriptにはプリミティブ型のデータ型が７つあります。まぁ型が７つあると思っててください。以下が７つの型の種類です！
- Boolean ： true または false
- null ： 中身が何もないってことです。
- undefined ： 値が何も定義されていない。
- Number (数値) ： 整数または浮動小数点数（小数点）
- BigInt (長整数) ； 整数値
- String (文字列) ； 文字列（文字）の値。
- Symbol (シンボル) ： シンボルは名前などつけたりできます。
この７つの型を使い分けてjavascriptを書いていくので、頭の片隅に入れといてください！
変数名の付け方
変数名ってなんでもええの？って疑問に思う人が多いと思いますが、実際はどんな名前でもつけていいです。
しかし、実務に入ったらわかりますが変数名はすごくこだわります！というのも変数名でなんの値が入っているのかなどを推測しやすくする為です。例をあげてみましょう！
// 変数名が文字列なのに数字を入れるとややこしい
let string = 100;
// このように変数名と入れる値を合わせる
let number = 12;
初心者の人ほど変な変数名を付けたり、適当につけたりしますが結構重要な作業なので、自分の子供に名付けするつもりで、『この子には名前入ってるからnameにしよう！』的な感じでしてください！
ここを意識するだけでも、自分でコード書いてる時も読みやすコードになってると気づいてきますので！
ちなみに、ローマ字読みで書く場合もありますがなるべく英語表記にしてください！誰がみてもわかりやすくなる為なので！英語がわからなければGoogle先生に聞いてくださいね！
まとめ
javascripの変数についてわかるようになりましたか？ポイント、ポイントを押さえておくだけでだいぶ意識して使えるようになると思うので頭に入れておきましょうね！
１番大事なのは、変数名をちゃんとつけることです！aとか変な名前付けないで、値に適した名前を心がけましょうね！
