【JavaScript 3-2】よくあるつまずき｜JavaScriptが動かない時の見直し方（初心者向け）
toshi
ToshiLab
【JavaScript 1-3】変数の入口｜const と let をやさしく見る（初心者向け）
toshi
記事内に商品プロモーションを含む場合があります
前回は、scriptタグを使ってJavaScriptを読み込み、
console.log や textContent で最初の1行を動かしました。
今回はその次として、
**変数**
を見ていきます。
変数という言葉だけ聞くと少し難しそうですが、
最初はかなりシンプルに考えて大丈夫です。
変数は、
**値に名前をつけて、あとで使いやすくするもの**
です。
- 「変数は“値に名前をつける”ためのものです」
-
最初はこの理解で大丈夫です。
- 文字を入れておく
- 数字を入れておく
- HTMLの要素を入れておく
- あとからその名前で使う
たとえば、
const userName = “toshi”;
と書くと、
「toshi」という文字に userName という名前をつけたイメージです。JavaScriptでは、この名前を使って、
画面に表示したり、計算したり、文章を作ったりできます。
Q
目次
ここまでできればOK
今回のゴール
- 変数は“値に名前をつけるもの”だと分かる
- const と let のざっくりした違いが分かる
- 変数に入れた文字や数字を使える
- 変数を使って画面の文字を変えられる
- 次のクリックで変える回へ進む準備ができる
変数とは？
変数は、
値に名前をつけて使うためのものです。
たとえば、名前や年代のような値を、
そのまま毎回書くのではなく、
分かりやすい名前に入れて使います。
const userName = "toshi";
const ageGroup = "40代";このように書くと、
– userName には「toshi」
– ageGroup には「40代」
が入っていると考えられます。
const と let の違い
| 書き方 | ざっくりした意味 | 最初の使い方 |
|---|---|---|
| const | あとから入れ直さない値 | まずはこちらを多めに使う |
| let | あとから変える可能性がある値 | 数が増える時などに使う |
最初は、こう覚えると進めやすいです。
**基本は const。**
あとから値を変えたい時だけ let。
たとえば、名前や年代のように途中で変えないものは const で十分です。
const userName = "toshi";
const ageGroup = "40代";一方で、クリック回数のようにあとから変わるものは let が向いています。
※下記の 左辺 = 右辺 は 左辺に右辺を代入するという意味です。
let count = 0;
count = count + 1;コピペOK
まずは完成形を見る
今回は、変数に入れた名前・年代・好きなことを使って、
画面の文章を書き換える例を見ていきます。
フォルダ構成は、前回と同じように考えると分かりやすいです。
javascript-01-03-example/
├─ index.html
├─ css/
| └─ style.css
└─ js/
└─ script.jsまずは index.html をこの形で作ります。
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>JavaScript 1-3</title>
<link rel="stylesheet" href="css/style.css">
</head>
<body>
<main class="page">
<section class="intro-card">
<p class="label">JavaScript 1-3 の一例</p>
<h1>変数の入口</h1>
<p class="lead">const と let を使って、値に名前をつける練習です。</p>
<p id="profileText" class="message">ここにプロフィール文が表示されます。</p>
<p id="countText" class="message">ここにカウントが表示されます。</p>
</section>
</main>
<script src="js/script.js"></script>
</body>
</html>次に、jsフォルダの中に script.js を作って、下のコードを書きます。
const userName = "toshi";
const ageGroup = "40代";
const favorite = "HTMLとCSS";
let count = 1;
const profileText = document.getElementById("profileText");
const countText = document.getElementById("countText");
profileText.textContent = userName + "さんは、" + ageGroup + "で、" + favorite + "を学んでいます。";
countText.textContent = "今日の学習回数：" + count + "回目";
今回は “値に名前をつけて、あとで文章に使う”
ところを見られればOKです。
変化のポイント
どこを見ればいい？
| 見る場所 | 起きていること |
|---|---|
| const userName | 名前の文字を入れている |
| const ageGroup | 年代の文字を入れている |
| const favorite | 好きなことの文字を入れている |
| let count | 数字を入れている |
| profileText.textContent | 画面のプロフィール文を書き換えている |
| countText.textContent | 画面のカウント文を書き換えている |
今回の例では、
文字や数字を変数に入れて、
その変数を使って文章を作っています。
つまり、
値を入れる。
名前で呼び出す。
画面に表示する。
という流れです。
この流れが分かると、
次のクリック処理でもかなり見やすくなります。
変数について①
文字を入れる変数
文字を入れる時は、基本的に ” ” で囲みます。
※他を紹介している方や本があるかもしれません。
※他のプログラムでも汎用が効くのは ” ” で囲う方です。
※最初は、” ” で囲う方で覚えたほうが良いと個人的には思います。
const userName = "toshi";
const ageGroup = "40代";
const favorite = "HTMLとCSS";このように書くと、
userName、ageGroup、favorite という名前で、
文字をあとから使えるようになります。
変数について②
数字を入れる変数
数字を入れる時は、” ” で囲みません。
let count = 1;数字は、あとで計算に使うことがあります。
たとえば、
count = count + 1;のようにすると、
count の数字を1つ増やせます。
| 値 | 書き方 |
|---|---|
| 文字 | “toshi” や “40代” のように引用符で囲む |
| 数字 | 1 や 10 のようにそのまま書く |
変数について③
変数を使って文章を作る
変数は、文章の中で使えます。
今回のコードでは、
profileText.textContent = userName + "さんは、" + ageGroup + "で、" + favorite + "を学んでいます。";と書いています。
これは、
userName
+ “さんは、”
+ ageGroup
+ “で、”
+ favorite
+ “を学んでいます。”
をつなげて、1つの文章にしています。
最初は + が少し読みづらいかもしれません。
ここでは、
**文字や変数をつなげている**
と見ることができれば大丈夫です。
const について
“基本の置き場所”として使いやすいです
- 名前のように途中で変えないものは const
- 年代のように今回のページ内で変えないものも const
- HTMLの要素を探して入れておく時も const
- 最初は迷ったら const で始める
- あとから値を変えたい時だけ let を使う
今回のコードでは、HTMLの要素も const に入れています。
const profileText = document.getElementById("profileText");
const countText = document.getElementById("countText");これは、
HTMLの中から見つけた場所に、
分かりやすい名前をつけている感覚です。
let について
let は“あとから変わる値”に使います
let は、あとから中身を変えたい時に使います。
たとえば、クリック回数やカウントのようなものです。
let count = 1;
count = count + 1;このように、
あとから入れ直す可能性があるものは let が向いています。
最初は “変わらないなら const、変わるなら let”
くらいで大丈夫です。
少しだけ変えてみる（練習）
- userName の文字を自分の名前に変えてみる
- ageGroup の文字を別の年代に変えてみる
- favorite の文字を別の内容に変えてみる
- count の数字を 1 → 3 に変えてみる
- 表示される文章を少し変えてみる
- const を let に変えなくても動くか確認してみる
今回の練習では、
変数の中身を変えると、
画面に表示される文章も変わることを確認します。
「どの値を変えると、どこの表示が変わるか」
を見るのが大事です。
ここだけ確認
よくあるつまずき
- 「つまずき①：文字を引用符で囲み忘れる
-
文字を入れる時は、” ” で囲みます。
JavaScriptconst userName = "toshi";もし、
JavaScriptconst userName = toshi;のように書くと、JavaScriptが文字として読めず、基本的にはエラーになります。
Q
- 「つまずき②：40代を数字として書こうとする」
-
40代のような表現は、数字というより文字として扱う方が分かりやすいです。
そのため今回は、
JavaScriptconst ageGroup = "40代";のように、” ” で囲んでいます。
年代や名前のような表示用の値は、文字として扱うと整理しやすいです。
Q
- 「つまずき③：const の値をあとから変えようとする」
-
const は、基本的にあとから入れ直さない値に使います。
たとえば、
JavaScriptconst userName = "toshi"; userName = "taro";のような書き方は避けます。
あとから変えたい値は let を使います。
Q
- 「つまずき④：変数名の大文字・小文字がずれる」
-
JavaScriptでは、大文字と小文字が区別されます。
userName と username は別の名前として扱われます。
最初は、同じ名前をコピーしてそろえるのがおすすめです。
Q
- 「つまずき⑤：+ が何をしているか分からない」
-
今回の + は、文字や変数をつなげるために使っています。
JavaScriptuserName + "さん"と書くと、
変数の中身と文字をつなげて文章を作れます。
※今回の場合は toshiさん と HTMLを介して表示されます。
Q
ここだけ押さえればOK
今回のまとめ
- 変数は値に名前をつけるためのもの
- const はあとから入れ直さない値に使う
- let はあとから変わる値に使う
- 文字は ” ” で囲む
- 40代のような表示用の値は文字として扱うと分かりやすい
- 変数を使うと、文章や表示を作りやすくなる
できた判定
今日のゴール確認
ここまでできたらOKです。
- const と let の入口が分かった
- 文字や数字を変数に入れられた
- 変数を使って画面の文章を変えられた
- 次の JavaScript 1-4 に進む準備ができた
参考.zip の 配布
JavaScript 1-3 の一例zipについて
この記事の内容は、zip ファイルとして用意しております。
最初はそのまま開いて動きを確認し、
そのあとで userName や ageGroup、favorite の中身を少し変えてみると進めやすいです。
“正解を暗記するもの”ではなく、
「こういう形でも作れる」という確認用として使ってください。
構成はこの形です。
javascript-01-03-example.zip
└─ javascript-01-03-example/
├─ index.html
├─ css/
└─ style.css
└─ js/
└─ script.js
次に読む
JavaScript 1-4へ
今回は、変数として値に名前をつけて使う流れを見ました。
次は、
ボタンを押した時に変化させる回へ進みます。
変数とクリック処理をつなげると、
JavaScriptらしい動きが少しずつ見えてきます。
PR：最初の1冊（必要な方だけ）
PR：JavaScriptの最初の学習に使いやすい参考(必要な方だけ)
この段階では、まず記事内のコードだけで進めて大丈夫です。
※価格や在庫は変わるため、最終確認はリンク先でお願いします。
リンク
ABOUT ME
C型肝炎や感染症の闘病を経て現在通院中
フリーランスとして今日を生きる、それがすべて。
静かな光の中で、歩みを止めずに生きていく。
実験大好きなので色々とやっていきます。
フリーランスとして今日を生きる、それがすべて。
静かな光の中で、歩みを止めずに生きていく。
実験大好きなので色々とやっていきます。
