命名規則

何をキャメルケースで書くのか、コードを読む際に何が変数なのかなど綺麗に書くためには必要なこと。
（cssも同様で、こっちはこっちでECSSやBEMなどいろんな管理方法がある）

JSは大体こんな感じで括られて

• クラス名
• メソッド名
• 定数
• グローバル変数
• 変数
• 関数
• プロパティの名前
• コンポーネント

命名規則は基本こんな感じで当てはめる↓

• クラス名→パスカルケース（Hoge）
• メソッド名→キャメルケース（hogeFuga）
• 定数→大文字（HOGE、HOGE_FUGAなども）
• グローバル変数→大文字
• 変数→キャメルケース
• 関数→キャメルケース
• プロパティの名前→キャメルケース
• コンポーネント→パスカルケース（※Vueの場合はケバブケースで書くのが一般的）

参考

Naming Conventions
Google JavaScript Style Guide

変数

文字や数字に名前をつけて繰り返し使えるようにする。
それが「変数」

↓これらを使いまわしたい場合、変数にする

• りんごやみかん、ベリーなど
• 単純に数字100,500,1500など

これは「つがる」!
これは「ジョナゴールド」!
これは「サンふじ」!
これは「1500円」!
とかのようになにか（この場合変数）決定して作ったりすることを「宣言」という。

変数宣言するには

大事なキーワードがある。
var、 let、 const
の3つである

一番使うのはconstとlet。
var は値が再代入できletと同じような機能だが、なんでも再代入できてしまう....
つまりなんでも変更できてしまう魔法のようで悪魔な宣言方法なのである。
一見便利で多用しがちだが、後々の実装で痛い目みがちなのでこの説明だけでとどめておく。

const

一度宣言した後は変更できないです。（再代入できない）
constに設定したものに対して変更をかけようとするとエラーが出ます。

• 変数に対して再代入する必要がない場合

のみに使います。

再代入する必要がないものというのはりんごでいうと

ジョナゴールドやサンふじ、つがるを宣言したい時に使います

const tsugaru ＝ "つがる";
const jonaGold = "ジョナゴールド";
const sunFuji ="サンふじ";

let

一方で値の再代入が可能なのがlet。
undefinedが返ってくるが初期値を設定していなくても宣言できてしまう

let apple;
↓
`apple` is undefined

代入の変更の仕方の簡単な一例としては

let apple  = "Hello Apple World!";
apple = "ようこそ、りんごの世界へ";

や

let apple;
apple  = "Hello Apple World!";

という感じ。

「＝」は代入演算子という。
これを使うと代入ができます。

varが非推奨な訳

再代入の上書きができすぎてしまう。

例えばletは最初に宣言した後に同じものを宣言するとエラーが出る

// 1回目の宣言
let apple;
//ここにずらっと何かしらの処理がある

// 2回目に同じ宣言をする
let apple;　//これはエラーが出る

しかしvarは上の書き方でもエラーが出ない

// 1回目の宣言
var apple;
//ここにずらっと何かしらの処理がある

// 2回目に同じ宣言をする
var apple;　//エラーが出ないで最新のappleとして宣言される（上書き）

一見「var」の方が便利じゃん!!!と思ってしまうが
処理の中で関数やスコープを使ってくると、場合によっては凄絶な先祖返りや上書き合戦で意図しない挙動になることがあります。（原因特定や修正に時間かかるからやだ）

letやconstはこういった問題が起きないように改良されたキーワードになるので、
varはあまり多用せず、適切にletやconstを使っていく方が長い目で見たときに良いです。

変数に使える名前

こちらの記事から抜粋

let $; // OK: $が利用できる
let _title; // OK: _が利用できる
let jquery; // OK: 小文字のアルファベットが利用できる
let TITLE; // OK: 大文字のアルファベットが利用できる
let es2015; // OK: 数字は先頭以外なら利用できる
let 日本語の変数名; // OK: 一部の漢字や日本語も利用できる

大まかなルールは

1. 全角はもちろん使えません。文字は半角で使います
2. 数字で始まるのはだめ
3. コードの中で出てくるifやlet、trueなどの被りは機能に影響するのでだめ

参考

JavaScript Primer
MDN

データ型

プログラミングには組み込みデータ構造がある。
JavaScriptはその中でも型付けが弱い。良くも悪くもなんでもできてしまう。
プログラミングにおいて型付けはしっかり定義されるので、間違ったものを入れると宣言時点でエラーが出る。

例えばりんごの価格を150円と設定した時
const apple = 150;
迂闊に
const cost = apple + "円";としたいところ
const cost = apple + "0";にしてしまうと
150円が1500という結果で出力されてしまう。

このように意図しない結果が生まれ悲しい気持ちになる。

プリミティブ型

プリミティブ値というのは変数の例えで出した「りんご」や「つがる」などの値のこと。
特徴としては「シンプルで変わらない」
一つ一つの値がそれ以上分解できず、それとして存在する（一つのりんごや一つのみかんのように）

ではプリミティブ型とは

1. 数字（1,23,456..などの数字）
2. 文字（「りんご」や「つがる」などの文字）
3. 真偽値（はいかいいえで答えるようなものtrueとfalse）

の3つがある。

参考

MDN