女性向けエンジニアスクール
JavaScript入門の導入スライド
JavaScript入門 - エラーを読んでみる
わざと間違えて、出た文字を見る
プログラムは間違えると止まりますが、そのとき何がまずかったのかを画面に書き残してくれます。まずは変数の名前をわざと書き間違えて、何が出るのかを見てみます。
英語がずらりと並ぶと読み飛ばしたくなりますが、見る場所は3か所だけです。
name と書くつもりが nama になっています。実行するとこう出ます。
const name = "田中太郎";
console.log(nama);
// Uncaught ReferenceError: nama is not defined1 / 4
読み取るのは3か所だけ
エラーの表示は、種類・メッセージ・場所の3つでできています。この3つを拾えれば、直す場所はほぼ決まります。
ReferenceError種類nama is not definedメッセージprofile.js:2:13場所読み取れたこと
| 読み取るもの | この例では何か |
|---|---|
| 種類 | ReferenceError（名前が見つからない） |
| メッセージ | nama という名前が定義されていない |
| 場所 | profile.js の 2 行目 13 文字目 |
囲った行までたどり着けば、開くファイルと直す行が決まります。
メッセージの英語が分からなくても、種類と行番号だけで半分は解決します。
2 / 4
考えてみよう外しても進めます
const title = "フロントエンドエンジニア"; と書いたあと、次の行で title.toUpperCase() を title.toUppercase() と打ち間違えました。出るのはどの種類ですか。
選ぶと、この枚の中で答えと理由を確かめられます。
3 / 4
よく会う4種類
エラーの種類は数えきれないほどありますが、書き始めのうちに出会うのはほとんどこの4つです。名前から原因の見当が付くようになると、調べる時間がぐっと減ります。
ReferenceError
存在しない名前を呼んだ
TypeError
名前はあるが、その値にできない操作をした
SyntaxError
書き方が壊れていて、実行される前に止まった
RangeError
値が許される範囲から外れた
SyntaxError だけは実行される前に出ます。だから console.log の結果が1つも出ないまま止まったら、まずカッコや引用符の閉じ忘れを疑います。
4 / 4
JavaScript入門 - let と const を使い分ける
値を入れる箱には2種類ある
変数は値をしまっておく箱です。JavaScript にはその箱を作る書き方が2つあり、あとから中身を入れ直せるかどうかで分かれています。作品数のように増えていく値は、入れ直せる let で作ります。
では、入れ直せないほうの箱で同じことをするとどうなるのかを次で見ます。
2行目の works = 4 が入れ直しです。let で作った箱なので通ります。
let works = 3;
works = 4;
console.log(works); // 41 / 4
const に入れ直すと、その行で止まる
const で作った箱は、一度入れたら別の値に取り替えられません。取り替えようとした行でエラーになり、そこから下は実行されません。
const name入れ直せない箱let works入れ直せる箱name = "田中花子"ここで止まる実行の様子
| 行 | 何が起きるか |
|---|---|
| 1 | name に 田中太郎 が入る |
| 2 | works に 3 が入る |
| 3 | works が 4 になる |
| 4 | TypeError（定数には入れ直せない） |
囲った4行目で止まります。以降に何行書いてあっても実行されません。
止まってくれるのは困ることではなく、変えるつもりの無かった値を守ってもらえたということです。
2 / 4
考えてみよう外しても進めます
const tags = ["React", "TypeScript"]; と書いたあと、tags.push("CSS") を実行するとどうなりますか。
選ぶと、この枚の中で答えと理由を確かめられます。
3 / 4
JavaScript入門 - let と const を使い分ける
どちらで書くかの決め方
迷ったらまず const で書き、入れ直しが必要になった行でエラーが出たら、そこだけ let に直します。この順番だと、変わる値がどれなのかがコードを読むだけで分かるようになります。
配列を const にしても中身は足せるので、プロフィールの作品一覧のような箱は const のままで困りません。
| こういう値 | どちらで書くか |
|---|---|
| 名前や肩書きなど、後で変えない値 | const |
| 作品数のように数えて増やす値 | let |
| くり返しの回数を数える変数 | let |
| 配列やオブジェクトを入れる箱 | const でよい |
| 古い教材で見かける var | 今は使わない |
4 / 4
JavaScript入門 - 型を変換する
見た目が数字でも、数値とは限らない
入力欄から受け取った値は、数字を打ったつもりでも文字列として届きます。文字列のまま足し算をすると、計算ではなく文字のつなぎ合わせになります。型とは、その値が数値なのか文字列なのかという種類のことです。
Number() を通すと数値に変わります。この変換を自分で書くのが明示変換です。
同じ 12 でも、文字列のままだと 13 になりません。
const worksText = "12";
console.log(worksText + 1); // "121"
console.log(Number(worksText) + 1); // 131 / 4
自分で変える変換と、勝手に起きる変換
Number や String のように自分で書くのが明示変換です。それとは別に、+ や == を使ったときに JavaScript が黙って型をそろえる暗黙変換もあります。困るのはいつも後者のほうです。
"5" + 1+ だけ文字列に寄るNumber("5")自分で数値にするString(5)自分で文字列にする結果
| 式 | 結果 |
|---|---|
| "5" + 1 | "51" |
| "5" - 1 | 4 |
| Number("5") + 1 | 6 |
| String(5) + 1 | "51" |
| Boolean("") | false |
囲った2行が非対称の正体です。同じ 5 と 1 なのに答えの型が違います。
+ は文字のつなぎ合わせにも使う記号なので、片方が文字列だと文字列に寄ります。- は文字では使わないので、両方を数値に直してから計算されます。
2 / 4
考えてみよう外しても進めます
入力欄から受け取った作品数が works = "3" のとき、works + 1 は何になりますか。
選ぶと、この枚の中で答えと理由を確かめられます。
3 / 4
JavaScript入門 - 型を変換する
変換の早見
使う変換はこれだけです。受け取った値を最初に整えてしまえば、あとの計算で型を気にする場面はほとんど無くなります。
== は比べる前に勝手に型をそろえます。型もそろっているか見る === を既定にしておくと、暗黙変換に振り回されなくなります。
| やりたいこと | 書き方 |
|---|---|
| 文字列を数値にする | Number("3") で 3 |
| 数値を文字列にする | String(3) で 3 の文字列 |
| 真偽値にする | Boolean("") で false |
| 数値に直せたか確かめる | Number.isNaN(Number(v)) |
| いまの型を見る | typeof v |
4 / 4
JavaScript入門 - 真偽値と falsy な値
if には true 以外も書ける
if のカッコの中には、true や false だけでなくどんな値でも書けます。書かれた値は、その場で true 寄りか false 寄りかに判定されます。false 寄りと判定される値を falsy、true 寄りと判定される値を truthy と呼びます。
空文字列は falsy なので else の側に進みます。ではどの値が falsy なのかを次で並べます。
if に渡しているのは true でも false でもなく、ただの文字列です。
const nickname = "";
if (nickname) {
console.log("ニックネームがあります");
} else {
console.log("空なのでフルネームを出します"); // こちらが出る
}1 / 4
空に見えても truthy な値がある
Boolean() に通すと、その値が truthy と falsy のどちらなのかをそのまま確かめられます。直感と食い違うものが2つ混ざっています。
"0"中身のある文字列[]空でも truthyBoolean() を通した結果
| 値 | if での扱い |
|---|---|
| "" | falsy |
| "0" | truthy |
| 0 | falsy |
| [] | truthy |
| {} | truthy |
| null | falsy |
囲った2行が引っかかりどころです。文字の 0 と数値の 0 で答えが逆になります。
空の配列と空のオブジェクトは truthy です。中身が空かどうかは見ていないので、件数を知りたいときは length を自分で見ます。
2 / 4
考えてみよう外しても進めます
作品数 works が 0 のとき、if (works) { 作品数を表示する } の中は動きますか。
選ぶと、この枚の中で答えと理由を確かめられます。
3 / 4
JavaScript入門 - 真偽値と falsy な値
falsy はこの6つを覚えれば足りる
実際に書いていて出会う falsy は、この6つでほぼ全部です。ここに無い値は、空の配列でも空のオブジェクトでも全部 truthy になります。
この表を丸暗記するより「ここに無いものは truthy」と覚えるほうが早いです。プロフィールの作品数のように 0 があり得る値だけ、if の書き方に気をつけます。
| falsy な値 | どんなときに出てくるか |
|---|---|
| false | 比較の結果そのもの |
| 0 | 件数や金額が 0 のとき |
| 空文字列 | 入力欄が空のまま送られたとき |
| null | 無いと決めて入れたとき |
| undefined | まだ何も入れていないとき |
| NaN | 数値に変換できなかったとき |
4 / 4
JavaScript入門 - null と undefined を見分ける
まだ入っていない場所を読む
オブジェクトに無いキーを読んでも、JavaScript はエラーで止めません。undefined という値を返して先に進みます。undefined は「まだ何も入っていない」という意味の、それ自体がひとつの値です。
これに対して、書き手が自分で「無い」と決めて入れるほうの値が null です。
title は書いていないので undefined が返ります。エラーにはなりません。
const profile = { name: "田中太郎" };
console.log(profile.name); // "田中太郎"
console.log(profile.title); // undefined1 / 4
誰が入れたのかで呼び名が変わる
undefined は JavaScript が置いていく値、null は書き手が自分で置く値です。意味は近いのに別物なので、typeof で見ると答えも変わります。
let title;入れていない= null無いと決めたtypeof nickname有名なバグ結果
| 式 | 結果 |
|---|---|
| title | undefined |
| nickname | null |
| typeof title | "undefined" |
| typeof nickname | "object" |
| null == undefined | true |
| null === undefined | false |
囲った2行が覚えどころです。typeof では null を見分けられません。
typeof null が "object" になるのは JavaScript が生まれた頃の不具合です。直すと世界中の既存のサイトが壊れるので、そのまま残されています。
2 / 4
考えてみよう外しても進めます
nickname が null か undefined のどちらかのときだけ「未設定」と出したいとき、条件はどれで書きますか。
選ぶと、この枚の中で答えと理由を確かめられます。
3 / 4
どちらが出てきているのかの見分け
画面に undefined と出てしまったときは、値が壊れたのではなく「まだ入れていない場所を読んだ」というだけです。どこで置かれた値なのかをたどると、直す場所が決まります。
変数を宣言しただけで何も入れていない
undefined
オブジェクトに無いキーを読んだ
undefined
関数に引数を渡さなかった
undefined
自分で null を入れた
null
探して見つからなかったと返された
null のことが多い
自分のコードから出てくるのが null、JavaScript が置いていくのが undefined、と考えるとだいたい合います。
4 / 4
JavaScript入門 - && と || が返すもの
|| は「はい / いいえ」を返していない
&& と || は、条件をつなぐ演算子として紹介されることが多い書き方です。ただし返ってくるのは true や false ではなく、左右どちらかの値そのものです。プロフィールの表示名を決める場面で、この性質がそのまま既定値の書き方になります。
true が返るなら画面には true と出てしまいます。文字がそのまま出るのは、値そのものが返っているからです。
左に中身があればその値が、空っぽなら右の値が、そのまま返ってきます。
const nickname = "";
const displayName = nickname || "名無し";
console.log(displayName); // 名無し
const title = "フロントエンドエンジニア";
console.log(title || "肩書き未設定"); // フロントエンドエンジニア1 / 4
左で決まったら右は動かさない
|| は左の値を先に見ます。左だけで答えが決まるときは、右に書いた式をそもそも実行しません。これを短絡評価と呼びます。右に重い処理を置いても、必要なときしか走らないということです。
loadFromServer()必要なときだけ動くsaved先に見るのは左saved を差し替えて動かす
| saved の値 | loadFromServer は動くか | name に入る値 |
|---|---|---|
| "田中花子" | 動かない | 田中花子 |
| "" | 動く | 山田太郎 |
| null | 動く | 山田太郎 |
1 行目だけ「サーバーに問い合わせた」が出ません。右の関数が呼ばれていないからです。
&& も同じ仕組みで、左が空っぽなら右を見ずに左の値を返します。
2 / 4
考えてみよう外しても進めます
作品をまだ 1 件も登録していない人の画面です。const worksCount = 0; と書いてから worksCount || "作品はまだありません" を評価すると、何が返るでしょうか。
選ぶと、この枚の中で答えと理由を確かめられます。
3 / 4
JavaScript入門 - && と || が返すもの
空っぽ扱いになる値
|| や && が「左は空っぽだ」と判断する値は決まっています。書いていて出会うのはこの 6 つで、ここに無いものは中身があるものとして左が返ります。
0 と空の文字列まで既定値に置き換わるのが困る場面があります。次のレッスンで、そこだけ避ける演算子を使います。
| 空っぽ扱いになる値 | プロフィールで出てくる場面 |
|---|---|
| false | 公開フラグを未設定のままにした |
| 0 | 作品数がまだ 0 件 |
| "" (空の文字列) | 肩書きを入力せずに保存した |
| null | 自己紹介を意図的に空にした |
| undefined | その項目をまだ作っていない |
| NaN | 数値に変換できない文字を計算に使った |
4 / 4
JavaScript入門 - ?? で既定値を用意する
空っぽの範囲を 2 つだけに絞る
?? は既定値を用意する演算子です。左が null か undefined のときだけ右の値に差し替え、それ以外は左をそのまま返します。値が「まだ無い」のか「0 という値がある」のかを、書き分けられるようになります。
null と undefined はどちらも「値がまだ無い」を表します。?? が面倒を見るのはこの 2 つだけです。
下の行は 0 のまま返ります。0 は値が無いわけではないからです。
const bio = null;
console.log(bio ?? "自己紹介はまだありません"); // 自己紹介はまだありません
const worksCount = 0;
console.log(worksCount ?? "未登録"); // 01 / 4
作品数 0 で || と ?? を比べる
作品数を画面に出す場面で、同じ既定値を || と ?? の両方で書いてみます。中身がまったく同じ 0 という値なのに、返るものが変わります。
worksCount || "未登録"空っぽ 6 種類すべてを拾うworksCount ?? "未登録"null と undefined だけ拾う左の値ごとの結果
| 左に置いた値 | || の結果 | ?? の結果 |
|---|---|---|
| 0 | 未登録 | 0 |
| "" (空の文字列) | 未登録 | "" のまま |
| false | 未登録 | false |
| null | 未登録 | 未登録 |
| undefined | 未登録 | 未登録 |
下 2 行は結果が同じです。違いが出るのは上の 3 行だけです。
作品数を 0 と出したいなら ??、0 件のときに案内文を出したいなら || です。どちらが正しいかは画面の要件で決まります。
2 / 4
考えてみよう外しても進めます
肩書きを入力せずに保存した人がいます。const title = ""; と書いてから title ?? "肩書き未設定" を評価すると、画面には何が出るでしょうか。
選ぶと、この枚の中で答えと理由を確かめられます。
3 / 4
JavaScript入門 - ?? で既定値を用意する
どちらを使うか決める手順
迷ったら「0 や空欄を本物の値として扱いたいか」だけを考えます。答えが はい なら ??、いいえ なら || です。
?? は || や && と丸括弧なしで並べると、書いた時点でエラーになります。混ぜるときは必ず丸括弧を付けます。
| やりたいこと | 書き方 |
|---|---|
| 作品数 0 を 0 と表示したい | worksCount ?? "未登録" |
| 作品数 0 のときは案内文を出したい | worksCount || "作品はまだありません" |
| 肩書きの空欄を既定値で埋めたい | title || "肩書き未設定" |
| 項目そのものが無いときだけ埋めたい | title ?? "肩書き未設定" |
4 / 4
JavaScript入門 - 演算子の優先順位
1 つの式に演算子が 2 つ以上並んだとき
算数で掛け算が足し算より先に計算されるのと同じで、JavaScript の演算子にも効く順番が決まっています。順番を変えたいときは丸括弧で囲みます。まず打ち間違えやすい ! から見ます。
「作品数が 0 ではない」と書いたつもりの上の行は、まったく別の判定になっています。
上の行の ! は === より先に効くので、worksCount だけをひっくり返しています。
const worksCount = 3;
console.log(!worksCount === 0); // false
console.log(!(worksCount === 0)); // true1 / 4
&& は || より先に効く
プロフィールの編集ボタンを出すかどうかを、公開状態と持ち主と管理者の 3 つで決めます。丸括弧を書かないと、&& のほうが先にまとまります。
isPublic && isOwner || isAdmin&& が先にまとまる(isOwner || isAdmin)丸括弧が最優先丸括弧を補って読み直す
| 書いた式 | 実際にまとまる形 | 結果 |
|---|---|---|
| isPublic && isOwner || isAdmin | (isPublic && isOwner) || isAdmin | true |
| isPublic && (isOwner || isAdmin) | 書いた丸括弧のまま | false |
| isAdmin || isOwner && isPublic | isAdmin || (isOwner && isPublic) | true |
| (isAdmin || isOwner) && isPublic | 書いた丸括弧のまま | false |
&& と || の並び順を入れ替えても、先にまとまるのはいつも && の側です。
同じ 3 つの値でも、丸括弧の有無だけで編集ボタンが出たり出なかったりします。
2 / 4
考えてみよう外しても進めます
const canEdit = isOwner || isAdmin && isPublic; と書きました。この式に丸括弧を補うとしたら、どの形になるでしょうか。
選ぶと、この枚の中で答えと理由を確かめられます。
3 / 4
JavaScript入門 - 演算子の優先順位
この章で出てくる分だけの早見表
全部を覚える必要はありません。上にあるものほど先に効きます。同じ段の中では左から順に効きます。
順番に自信が無いときは、迷わず丸括弧を書きます。読む人にも意図が伝わるので、余分に書いても損はありません。
| 先に効く順 | 演算子 |
|---|---|
| 1 番目 | 丸括弧 ( ) |
| 2 番目 | ! (否定) |
| 3 番目 | * / % (掛ける、割る、余り) |
| 4 番目 | + - (足す、引く) |
| 5 番目 | < <= > >= (大小の比較) |
| 6 番目 | === !== (等しいかの比較) |
| 7 番目 | && のあとに ||、そして ?? |
| 8 番目 | = (変数への代入) |
4 / 4