if・switch による条件分岐、配列とループ、関数とコールバック、オブジェクトを順に組み立てる全 33 レッスン（525 分）の基礎文法コースです。FizzBuzz、作品リスト、関数への整理、作品データの構造化を通して、入力から結果を返す処理を自分で分解して書きます。DOM 操作は次のコースで扱います。
レッスン
33件
所要時間
約9時間
ランク
初級
学習環境
ブラウザ完結
summarizeWorks 関数（条件分岐・配列・ループ・関数・オブジェクトを使って、作品データを集計して結果を返す）
if・switch による条件分岐、配列とループ、関数とコールバック、オブジェクトを順に組み立てる全 33 レッスン（525 分）の基礎文法コースです。FizzBuzz、作品リスト、関数への整理、作品データの構造化を通して、入力から結果を返す処理を自分で分解して書きます。DOM 操作は次のコースで扱います。
if・else if・switch で複数の条件を読みやすく分岐できる
配列を for・for-of・while・forEach で走査し、必要な値を集計できる
関数、引数、戻り値、早期 return、コールバックを使って処理を分けられる
オブジェクト、分割代入、スプレッド、find、includes でデータを構造化して探せる
ブラウザ完結（インストール不要）
必要ツール: ブラウザ内エディタ, JavaScript 実行環境, 関数テスト
テキストでの解説
0
レッスン
コーディングの問題
29
レッスン
クイズ問題
4
レッスン
ゆめさくコード編集部
プログラミング学習をもっと身近に。初心者から実務レベルまで、わかりやすいコンテンツをお届けします。
ゆめさくエンジニア / 現役ソフトウェアエンジニア。Ruby on Rails・Nuxt.js・Next.js・CakePHPなどの実務の開発をベースに、学習コンテンツを作成しています。
レッスンの最初に、図と短い言葉で学ぶ内容をつかみます。
JavaScript基礎文法：処理を組み立てる - if / else if / else で段階判定
プロフィールに出す「入門」「初級」「中級」「上級」は、経験年数から決めています。こういう範囲で区切る判定は、if のうしろに else if を並べて書くのが定石です。else if は「上の条件に当たらなかったときだけ見る条件」という意味です。
当たった時点で残りは見ません。この「最初の 1 本だけ」を、次の図解で自分で動かして確かめます。
years が 3 なので、上から 3 番目の years < 7 で初めて当たります。
女性向けエンジニアスクール
const years = 3;
if (years < 1) {
console.log("入門");
} else if (years < 3) {
console.log("初級");
} else if (years < 7) {
console.log("中級");
} else {
console.log("上級");
}
// 中級1 / 4
JavaScript基礎文法：処理を組み立てる - FizzBuzz で複数条件を組み立てる
数を 3 で割った余りが 0 なら、その数は 3 の倍数です。JavaScript では % という記号で割り算の余りが出せます。この余りが 0 かどうかだけで、倍数の判定ができます。
3 の倍数でも 5 の倍数でもある 15 を、どちらに振り分けるのか。それを決めるのが条件を書く順番です。
15 は 3 でも 5 でも余りが 0 になります。ここが今回の山場です。
console.log(15 % 3); // 0
console.log(15 % 5); // 0
console.log(7 % 3); // 11 / 4
JavaScript基礎文法：処理を組み立てる - 配列のきほん
作品が 3 つあるからといって、変数を 3 つ用意する必要はありません。配列という入れ物を使うと、いくつもの値を 1 つの変数にまとめて置いておけます。角かっこの中にカンマで並べるだけで作れます。
取り出すときの番号は 1 からではありません。その数え方を次の枚で確かめます。
角かっこの中の番号が、何番目の値を取り出すかの指定になります。
const works = ["名刺サイト", "ミニ電卓", "todoリスト"];
console.log(works[0]); // 名刺サイト
console.log(works.length); // 31 / 4
JavaScript基礎文法：処理を組み立てる - for ループで合計を求める
作品ごとの制作日数を足し合わせたいとき、works[0] から順に手で書いていくと配列が増えるたびに書き直しになります。for 文を使うと、配列の長さに合わせて自動でくり返してくれます。
3 つの式のうち、真ん中の条件を 1 文字変えるだけで結果が壊れます。次の枚で見てください。
丸かっこの中はセミコロンで 3 つに分かれていて、それぞれ役割が違います。
const days = [3, 5, 2];
let total = 0;
for (let i = 0; i < days.length; i++) {
total += days[i];
}
console.log(total); // 101 / 4
動かしながら、仕組みや変化を目で確かめられます。
if 文の基本
if と else の二股
if / else if / else で段階判定
else if の並び順
switch 文で値を一覧から選ぶ
break を外すと落ちる
条件を組み合わせる
入れ子と &&
値・変数・演算子の次に、処理の流れを学びたい人
を目指す人
条件分岐やループを、関数とデータ構造までつなげたい人
を目指す人
DOM 操作へ進む前に JavaScript の基礎文法を固めたい人
を目指す人
陽葵「予約ページ、動くようにしてほしいの」
1問目は無料で解けます。
教材を見ないで、依頼と完成条件だけを読んで書いてみてください。
JavaScript道場 ハレノヒ珈琲を動かす10問
先にこちらを通しておくと、つまずきにくくなります
このコースを終えたあとに進むと、無理なく続けられます
