HTML に JavaScript を読み込むところから始め、コンソール、文字列と数値、let と const、データ型、型変換、比較・論理・三項・null 合体演算子を学ぶ全 23 レッスン（335 分）の入門コースです。最後は、変数と式を使ってプロフィールの見出し用の値を組み立てます。if 文、配列とループ、DOM 操作は後続コースで扱います。
レッスン
23件
所要時間
約5.5時間
ランク
初級
学習環境
ブラウザ完結
buildHeader 関数（変数・データ型・演算子を使って、プロフィールの表示名と見出し用の値を組み立てる）
HTML に JavaScript を読み込むところから始め、コンソール、文字列と数値、let と const、データ型、型変換、比較・論理・三項・null 合体演算子を学ぶ全 23 レッスン（335 分）の入門コースです。最後は、変数と式を使ってプロフィールの見出し用の値を組み立てます。if 文、配列とループ、DOM 操作は後続コースで扱います。
HTML から script.js を読み込み、console.log の出力と基本的なエラーを確認できる
文字列・数値・真偽値・null・undefined を見分け、必要な型変換を選べる
let と const、テンプレートリテラル、比較・論理・三項・null 合体演算子で値を組み立てられる
ブラウザ完結（インストール不要）
必要ツール: ブラウザ内エディタ, JavaScript 実行環境, コンソール
テキストでの解説
0
レッスン
コーディングの問題
20
レッスン
クイズ問題
3
レッスン
ゆめさくコード編集部
プログラミング学習をもっと身近に。初心者から実務レベルまで、わかりやすいコンテンツをお届けします。
ゆめさくエンジニア / 現役ソフトウェアエンジニア。Ruby on Rails・Nuxt.js・Next.js・CakePHPなどの実務の開発をベースに、学習コンテンツを作成しています。
レッスンの最初に、図と短い言葉で学ぶ内容をつかみます。
JavaScript入門 - エラーを読んでみる
プログラムは間違えると止まりますが、そのとき何がまずかったのかを画面に書き残してくれます。まずは変数の名前をわざと書き間違えて、何が出るのかを見てみます。
英語がずらりと並ぶと読み飛ばしたくなりますが、見る場所は3か所だけです。
name と書くつもりが nama になっています。実行するとこう出ます。
女性向けエンジニアスクール
const name = "田中太郎";
console.log(nama);
// Uncaught ReferenceError: nama is not defined1 / 4
JavaScript入門 - let と const を使い分ける
変数は値をしまっておく箱です。JavaScript にはその箱を作る書き方が2つあり、あとから中身を入れ直せるかどうかで分かれています。作品数のように増えていく値は、入れ直せる let で作ります。
では、入れ直せないほうの箱で同じことをするとどうなるのかを次で見ます。
2行目の works = 4 が入れ直しです。let で作った箱なので通ります。
let works = 3;
works = 4;
console.log(works); // 41 / 4
JavaScript入門 - 型を変換する
入力欄から受け取った値は、数字を打ったつもりでも文字列として届きます。文字列のまま足し算をすると、計算ではなく文字のつなぎ合わせになります。型とは、その値が数値なのか文字列なのかという種類のことです。
Number() を通すと数値に変わります。この変換を自分で書くのが明示変換です。
同じ 12 でも、文字列のままだと 13 になりません。
const worksText = "12";
console.log(worksText + 1); // "121"
console.log(Number(worksText) + 1); // 131 / 4
JavaScript入門 - 真偽値と falsy な値
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
動かしながら、仕組みや変化を目で確かめられます。
JavaScript を初めてコードで動かす人
を目指す人
HTML に動きを加える前に、値と式の基礎を固めたい人
を目指す人
エラーを読みながら一行ずつ試す習慣を身につけたい人
を目指す人
陽葵「予約ページ、動くようにしてほしいの」
1問目は無料で解けます。
教材を見ないで、依頼と完成条件だけを読んで書いてみてください。
JavaScript道場 ハレノヒ珈琲を動かす10問
先にこちらを通しておくと、つまずきにくくなります
このコースを終えたあとに進むと、無理なく続けられます
同時に進めると、理解が早くなる組み合わせです
