JavaScriptを学ぶ

コードを動かし、WebページとAPIへ広げる。

Webページの動きからReact・Node.js・API開発まで。実際にコードを書きながら、JavaScriptを段階的に学びます。

全6コース・141レッスン（約35時間）

この道のりに含まれますフロントエンドエンジニアへの道バックエンドエンジニアへの道 JavaScript基礎ロードマップ Web制作・コーダーへの道

小さく修了しながら、できることを増やそう

実行と基礎文法、DOM、データ処理、非同期通信を一段ずつ進みます。目的に合わせて、ReactとNode.jsのどちらにもつなげられます。

STEP 1｜まずは、JavaScriptのコードを動かす

学習無料

JavaScriptをはじめる

実行・変数・型・演算子

HTMLからJavaScriptを読み込み、変数・データ型・演算子を使います。エラーを読みながら、値を組み立てて実行できるようになります。

23レッスン

始める

STEP 2｜条件とデータから、処理を組み立てる

学習無料

JavaScript基礎文法

条件・配列・ループ・関数

条件分岐、配列、繰り返し、関数、オブジェクトを学びます。複数の考え方を組み合わせて、小さなプログラムを作れるようになります。

33レッスン

始める

STEP 3｜クリックや入力に反応するページをつくる

学習無料

DOM・イベント

Webページに動きをつける

DOM操作、イベント、フォーム、タイマー、localStorageを使います。設定を覚え、操作に反応するプロフィールサイトを完成させます。

20レッスン

始める

STEP 4｜データを扱い、読みやすいコードを設計する

学習有料プラン

モダンJavaScript

データ処理とコード設計

map・filter・reduce、関数、クラス、エラー処理、正規表現を学びます。データと表示を分け、変更しやすいコードへ整えられるようになります。

36レッスン

始める

STEP 5｜外部サービスのデータで、アプリを動かす

学習有料プラン

非同期・API

Promise・fetch・モジュール

Promise、async / await、HTTP、fetch、import / exportを学びます。 API通信の成功・待機・失敗を扱い、機能をモジュールへ分けます。

19レッスン

始める

読めるのと、書けるのは別もの

教材があれば読める。でも白紙を前にすると手が止まる。その差を埋めるために、HTMLとCSSだけ用意された画面を自分で動かします。

チャレンジしてみよう!

道場有料プラン

JavaScript道場

陽葵「予約ページ、動くようにしてほしいの」

HTMLとCSSは用意してあります。書くのはJavaScriptだけ。クリックへの応答から始めて、最後は予約ページの一連の流れまで組み上げます。

10レッスン

道場に挑む

チャレンジしてみよう!

実践買い切り

タスク管理アプリ

Node.js / Prisma / React で、JWT 認証つきの業務 SaaS を組み上げます。

全17章・約67時間

実践内容を見る

スライドで復習する

手を動かす前に、図解でざっと思い出せます

JavaScript入門：コードを動かす

わざと間違えて、出た文字を見る

プログラムは間違えると止まりますが、そのとき何がまずかったのかを画面に書き残してくれます。まずは変数の名前をわざと書き間違えて、何が出るのかを見てみます。

英語がずらりと並ぶと読み飛ばしたくなりますが、見る場所は3か所だけです。

name と書くつもりが nama になっています。実行するとこう出ます。

const name = "田中太郎";
console.log(nama);
// Uncaught ReferenceError: nama is not defined

1 / 4

読み取るのは3か所だけ

エラーの表示は、種類・メッセージ・場所の3つでできています。この3つを拾えれば、直す場所はほぼ決まります。

Uncaught ReferenceError: nama is not defined

ReferenceError種類

nama is not definedメッセージ

at profile.js:2:13

profile.js:2:13場所

Uncaught ReferenceError: nama is not defined

種類

メッセージ

at 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

エラーを読んでみる

4枚

JavaScript入門：コードを動かす

値を入れる箱には2種類ある

変数は値をしまっておく箱です。JavaScript にはその箱を作る書き方が2つあり、あとから中身を入れ直せるかどうかで分かれています。作品数のように増えていく値は、入れ直せる let で作ります。

では、入れ直せないほうの箱で同じことをするとどうなるのかを次で見ます。

2行目の works = 4 が入れ直しです。let で作った箱なので通ります。

let works = 3;
works = 4;
console.log(works); // 4

1 / 4

const に入れ直すと、その行で止まる

const で作った箱は、一度入れたら別の値に取り替えられません。取り替えようとした行でエラーになり、そこから下は実行されません。

const name = "田中太郎";

const name入れ直せない箱

let works = 3;

let works入れ直せる箱

works = works + 1;

name = "田中花子";

name = "田中花子"ここで止まる

const name = "田中太郎";

入れ直せない箱

let works = 3;

入れ直せる箱

works = works + 1;

name = "田中花子";

ここで止まる

実行の様子

行	何が起きるか
1	name に田中太郎が入る
2	works に 3 が入る
3	works が 4 になる
4	TypeError（定数には入れ直せない）

囲った4行目で止まります。以降に何行書いてあっても実行されません。

止まってくれるのは困ることではなく、変えるつもりの無かった値を守ってもらえたということです。

2 / 4

考えてみよう外しても進めます

const tags = ["React", "TypeScript"]; と書いたあと、tags.push("CSS") を実行するとどうなりますか。

選ぶと、この枚の中で答えと理由を確かめられます。

3 / 4

JavaScript入門：コードを動かす

どちらで書くかの決め方

迷ったらまず const で書き、入れ直しが必要になった行でエラーが出たら、そこだけ let に直します。この順番だと、変わる値がどれなのかがコードを読むだけで分かるようになります。

配列を const にしても中身は足せるので、プロフィールの作品一覧のような箱は const のままで困りません。

こういう値	どちらで書くか
名前や肩書きなど、後で変えない値	const
作品数のように数えて増やす値	let
くり返しの回数を数える変数	let
配列やオブジェクトを入れる箱	const でよい
古い教材で見かける var	今は使わない

4 / 4

let と const を使い分ける

4枚

JavaScript入門：コードを動かす

見た目が数字でも、数値とは限らない

入力欄から受け取った値は、数字を打ったつもりでも文字列として届きます。文字列のまま足し算をすると、計算ではなく文字のつなぎ合わせになります。型とは、その値が数値なのか文字列なのかという種類のことです。

Number() を通すと数値に変わります。この変換を自分で書くのが明示変換です。

同じ 12 でも、文字列のままだと 13 になりません。

const worksText = "12";
console.log(worksText + 1);         // "121"
console.log(Number(worksText) + 1); // 13

1 / 4

自分で変える変換と、勝手に起きる変換

Number や String のように自分で書くのが明示変換です。それとは別に、+ や == を使ったときに JavaScript が黙って型をそろえる暗黙変換もあります。困るのはいつも後者のほうです。

console.log("5" + 1);

"5" + 1+ だけ文字列に寄る

console.log("5" - 1);

console.log(Number("5") + 1);

Number("5")自分で数値にする

console.log(String(5) + 1);

String(5)自分で文字列にする

console.log(Boolean(""));

console.log("5" + 1);

+ だけ文字列に寄る

console.log("5" - 1);

console.log(Number("5") + 1);

自分で数値にする

console.log(String(5) + 1);

自分で文字列にする

console.log(Boolean(""));

結果

式	結果
"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

型を変換する

4枚

このコースのスライドをすべて見る