# 変数と定数

## 変数

**変数**は値に名前を付けて、保存するもので、JavaScriptだけでなく全てのプログラミング言語において大事な概念です。

JavaScriptでは以下のように**変数**を定義します。下記の場合は、`nickname`という変数名に、`tarou`という文字列を代入しました。これで`nickname`を呼び出すことで、`tarou`を取り出すことができます。

<pre class="language-javascript" data-title="index.js◎"><code class="lang-javascript"><strong>let nickname = 'tarou';
</strong><strong>console.log(nickname);
</strong></code></pre>

ブラウザにて、以下のように確認できるかと思います。

<figure><img src="https://1869761657-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FcUBbYqol4PMzZJggiMqV%2Fuploads%2F5sOMiaCX1RptMExzhfn4%2F%E3%82%B9%E3%82%AF%E3%83%AA%E3%83%BC%E3%83%B3%E3%82%B7%E3%83%A7%E3%83%83%E3%83%88%202023-11-29%2013.04.23.png?alt=media&#x26;token=c97352f8-984c-44b0-a00d-ac7d010f9553" alt=""><figcaption></figcaption></figure>

変数を定義する際に以下のルールがあります。

1. 予約後を使えない(プログラミング言語ですでに意味が割り当てられている文字列、letやifなど）
2. 1文字目に数字を使わない
3. スペースや-(ハイフン)を含めない
4. キャメルケースで定義する（firstNameやphoneNumberのような形）
5. なるべく一目で変数の意味がわかるようにする

1\~3は定義するとエラーとなります。

変数は値を変えることができます。以下の記述を追加しましょう。

<pre class="language-javascript" data-title="index.js◎"><code class="lang-javascript">let nickname = 'tarou';
console.log(nickname);
<strong>nickname = 'sample';
</strong><strong>console.log(nickname);
</strong></code></pre>

ブラウザにて以下のように表示されるかと思います。

<figure><img src="https://1869761657-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FcUBbYqol4PMzZJggiMqV%2Fuploads%2F3JvTVdSLETVPi5g6BB0T%2F%E3%82%B9%E3%82%AF%E3%83%AA%E3%83%BC%E3%83%B3%E3%82%B7%E3%83%A7%E3%83%83%E3%83%88%202023-11-29%2013.20.17.png?alt=media&#x26;token=82094499-3ed7-47d2-97fb-f00e4e43bbaf" alt=""><figcaption></figcaption></figure>

これは、2行目では、`nickname`に`tarou`が格納されていましたが、3行目に`sample`と上書きしているため、`tarou`と`sample`とコンソールに表示されました。

## 定数

**定数**は変数と異なり、一度定義した値を変更することができません。

定数は以下のように定義します。

<pre class="language-javascript" data-title="index.js◎"><code class="lang-javascript">let nickname = 'tarou';
console.log(nickname);
nickname = 'sample';
console.log(nickname);

<strong>const firstName = ('jirou');
</strong><strong>console.log(firstName);
</strong></code></pre>

以下のように表示されているかと思います。

<figure><img src="https://1869761657-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FcUBbYqol4PMzZJggiMqV%2Fuploads%2F3ybUkkR3bSmDmlnXuPb8%2F%E3%82%B9%E3%82%AF%E3%83%AA%E3%83%BC%E3%83%B3%E3%82%B7%E3%83%A7%E3%83%83%E3%83%88%202023-11-29%2013.29.18.png?alt=media&#x26;token=fcd9143d-db4c-441c-b096-1d0ff848dd39" alt=""><figcaption></figcaption></figure>

もし上書きしようとすると、ブラウザにてエラーが出力されます。

```javascript
const firstName = "jirou';
firstName = 'saburou';
```

<figure><img src="https://1869761657-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FcUBbYqol4PMzZJggiMqV%2Fuploads%2FiQQOxZaVy8sC43CM88tv%2F%E3%82%B9%E3%82%AF%E3%83%AA%E3%83%BC%E3%83%B3%E3%82%B7%E3%83%A7%E3%83%83%E3%83%88%202023-11-29%2013.31.44.png?alt=media&#x26;token=712aaf9e-d615-41cb-a57c-5faa51224f0f" alt=""><figcaption></figcaption></figure>

変数と定数の使い分けは、値の書き換えを行わない場合は`const`を使うようにしましょう。
