JP

JavaScript・はじめの一歩

変数って何？

プログラミングでいちばん最初に出会う「変数」。むずかしくありません。名前をつけた“箱”のことです。

JavaScriptを学ぶと、すぐに「変数」という言葉に出会います。身構えなくて大丈夫。変数は名前をつけた箱のことです。

書いてみよう

let name = "しまちゃん";
部分意味
let「箱を用意するよ」の合図
name箱につけた名前
"しまちゃん"箱に入れた中身

以降 name と書けば、中の「しまちゃん」を呼び出せます。たとえば同じ名前を何度も使う場面で、いちいち書くかわりに name と呼ぶだけで済む——それが箱にしまっておくうれしさです。

数字も入れられる

箱に入るのは文字だけではありません。数字もそのまま入ります。

let age = 3;
let city = "北海道";

文字は " " で囲み、数字はそのまま書く。この違いだけ覚えておけば十分です。数字を入れておけば、あとで「1増やす」といった計算にも使えます。

中身はあとから入れかえられる

「変（か）わる数」と書いて変数。その名のとおり、中身はあとから入れかえられます。

let count = 0;
count = 1;

はじめ 0 を入れた箱に、あとから 1 を入れ直しています。この「入れかえ」ができるからこそ、「押すたびに数が増える」ような動きが作れるのです。

名前のつけ方には少しルールがある

「自由につけられる」と言いましたが、いくつかだけ約束ごとがあります。

  • 使えるのは半角の英数字（と_）。1stのように数字から始めるのはダメ
  • とちゅうにスペースを入れられない（my nameはエラー）
  • 大文字と小文字は別あつかい（nameとNameは別の箱）

スペースが使えないので、2つ以上の単語をつなげたいときは、2語目からの頭を大文字にしてつなげます。thanksMessage（thanks＋message）のような形です。大文字の部分がラクダのこぶに見えることから「キャメルケース」と呼ばれる、プログラミングで定番の書き方です。

入れかえない箱：const

letとよく似た仲間にconstがあります。書き方は同じですが、constで作った箱はあとから中身を入れかえられません。

const city = "北海道";

「入れかえる予定がない値にはconst、入れかわる予定がある値にはlet」——これが使い分けの目安です。実際のコードでは、letよりconstを使う場面のほうがよく出てきます。迷ったら、まずconstを試してみましょう。

このレッスンのまとめ

  1. 変数＝名前をつけた箱
  2. let 名前 = 中身; で箱を用意する
  3. 中身はあとから入れかえられる（だから“変わる数”）
  4. 入れかえない箱にはconst。迷ったらconstから

やってみよう：お礼の文章を変数にしまう

しまちゃんのページにscript.jsを用意し、あとで使うお礼の文章を、変数にしまっておきましょう。index.htmlやstyle.cssと同じフォルダに、新しいファイルを作ります。

（作業フォルダ）
├─ index.html
├─ script.js   ← 今回作る
└─ style.css
const thanksMessage = "おたより ありがとう！ しまちゃんに とどきました。";

そして、作ったscript.jsをindex.htmlに読みこませます。</body>の直前に、この1行を足しましょう（これを忘れると、この先どれだけ書いてもページは何も反応しません）。

  <script src="script.js"></script>
</body>

letではなくconstを使っていますね。constも同じ「名前つきの箱」ですが、あとから中身を入れかえない箱を作りたいときに使います。お礼の文章はこの先ずっと同じでよいので、ここはconstがぴったりです。

まだ画面には何も起きません。この文章は、この先のレッスンで実際に画面に表示するときに使います。まずは「あとで使う言葉を、先に変数へしまっておく」——この感覚を覚えておきましょう。

よくある質問

letとconstはどちらを使えばいいの？
迷ったらconstです。あとから中身を入れかえたくなったときだけletに変える、の順で考えると、「うっかり書きかえてしまった」というまちがいを減らせます。
変数の名前に日本語は使えますか？
じつは使えますが、一般的ではありません。世界中のコードが英語の名前で書かれているので、ageやnameのような英単語の名前に慣れておくのがおすすめです。