- Day 14:Week 2 総復習(前半)で「土台を固める」
- 変数:値に「名前」をつけて管理する
- データ型:値の「種類」を意識する
- 演算子:値を計算・比較するための記号
- 条件分岐:状況に応じて処理を切り替える
- 繰り返し:同じ処理を何度も実行する
- 関数:処理を「部品」としてまとめて再利用する
- Week 2 総復習用テンプレート(前半)
- Day 14 前半のまとめ
- Day 14:Week 2 総復習(後半)で「つなげて動かす」力を身につける
- 総復習のゴールを「1つの小さなプログラム」にする
- 変数とデータ型で「ユーザー情報」を表現する
- 演算子で「計算」と「比較」を行う
- 条件分岐で「メッセージ」を切り替える
- 関数で「計算」と「メッセージ生成」を部品化する
- 繰り返しで「複数ユーザー」をまとめて処理する
- Week 2 総復習(後半)用テンプレート
- Day 14 後半のまとめ
- Day 14:Week 2 制作「簡易計算ツール集」で基礎をひとまとめにする
- 簡易計算ツール集の全体像をイメージする
- 消費税計算ツールを作る
- 割引計算ツールを作る
- BMI計算ツールを作る
- 年齢判定ツールを作る
- Week 2 制作「簡易計算ツール集」テンプレート
- Day 14:Week 2 制作のまとめ
Day 14:Week 2 総復習(前半)で「土台を固める」
Week 2では、JavaScriptの基礎として
- 変数
- データ型
- 演算子
- 条件分岐
- 繰り返し
- 関数
を一通り学んできました。 Day 14前半では、それぞれを 「もう一度、自分の言葉で説明できる」レベル まで整理し直すことを目標にします。
ここでは、ブラウザで動かせる総復習用テンプレートをベースに、 各要素をステップバイステップで振り返っていきます。
変数:値に「名前」をつけて管理する
変数の基本
変数は、値に名前をつけて保存しておくための箱のようなものです。
let age = 20; // 年齢を表す変数
const name = '太郎'; // 名前を表す変数(constは再代入不可)
JavaScriptlet:後から値を変更する可能性があるときに使います。const:一度決めたら変えない値に使います(設定値・定数など)。
重要ポイント
- 「何を表す変数なのか」がわかる名前をつけることが大事です。
letとconstを使い分けることで、意図しない変更を防ぐことができます。
データ型:値の「種類」を意識する
よく使う基本的なデータ型
const age = 20; // 数値(number)
const name = '太郎'; // 文字列(string)
const isStudent = true; // 真偽値(boolean)
const nothing = null; // 「何もない」を表す特別な値
let unknown; // undefined(まだ値が入っていない)
JavaScript重要ポイント
- 「数値なのか文字列なのか」を意識することで、演算や比較の意味が変わることを理解します。
- 文字列同士の
+は「結合」、数値同士の+は「足し算」になります。
演算子:値を計算・比較するための記号
算術演算子(計算)
const a = 10;
const b = 3;
console.log(a + b); // 足し算
console.log(a - b); // 引き算
console.log(a * b); // 掛け算
console.log(a / b); // 割り算
console.log(a % b); // 剰余(割った余り)
JavaScript比較演算子(条件分岐の土台)
console.log(10 > 5); // true
console.log(10 >= 10); // true
console.log(10 === 10); // true(厳密な等価)
console.log(10 !== 5); // true(厳密な不等価)
JavaScript重要ポイント
===と!==を基本として使うことで、型の違いによるバグを避けやすくなります。- 比較演算子は、条件分岐や繰り返しの「条件」を作るための基礎です。
条件分岐:状況に応じて処理を切り替える
if文の基本形
const score = 75;
if (score >= 80) {
console.log('とてもよくできました');
} else if (score >= 60) {
console.log('合格です');
} else {
console.log('不合格です');
}
JavaScriptif (条件):条件が true のときに実行されます。else if:別の条件を追加するときに使います。else:どの条件にも当てはまらないときの処理です。
重要ポイント
- 条件分岐は「ルール」をコードにするための仕組みです。
- 条件を 日本語で言い直してからコードにすると、理解しやすくなります。
繰り返し:同じ処理を何度も実行する
for文の基本形(カウンター付き)
for (let i = 1; i <= 5; i++) {
console.log(`i の値は ${i} です`);
}
JavaScriptlet i = 1;:カウンター変数の初期値i <= 5;:繰り返し条件i++:1ずつ増やす(更新)
while文の基本形(条件だけで繰り返す)
let count = 5;
while (count > 0) {
console.log(`カウントダウン:${count}`);
count--; // 1ずつ減らす
}
JavaScript重要ポイント
- 繰り返しは「パターン化された処理」をまとめて書くための仕組みです。
- カウンター変数の 初期値・条件・更新 の3つをセットで考える癖をつけると、バグを減らせます。
関数:処理を「部品」としてまとめて再利用する
関数の基本形
function greet(name) {
console.log(`こんにちは、${name}さん!`);
}
greet('太郎'); // 関数呼び出し
JavaScriptnameは「引数」:関数に渡す入力console.log(...)は「処理」greet('太郎')は「関数呼び出し」
戻り値を持つ関数
function add(a, b) {
return a + b; // 計算結果を戻り値として返す
}
const result = add(3, 5);
console.log(result); // 8
JavaScriptreturnは「結果を返す」と同時に「そこで関数を終了する」役割があります。- 戻り値を使うことで、関数の結果を別の処理に渡せるようになります。
Week 2 総復習用テンプレート(前半)
ここまでの内容をまとめて確認できる、 ブラウザで動かせる総復習用テンプレートです。
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>Day 14 前半:Week 2 総復習</title>
</head>
<body>
<h1>Day 14 前半:Week 2 総復習(変数・データ型・演算子・条件分岐・繰り返し・関数)</h1>
<p>ブラウザのコンソールを開いて、各セクションの出力を確認してください。</p>
<script>
console.log('--- 1. 変数の復習 ---');
// let と const の基本
let age = 20; // 後から変更する可能性のある値
const name = '太郎'; // 変更しない値
console.log(`年齢:${age}`);
console.log(`名前:${name}`);
age = 21; // let は再代入できます
console.log(`1年後の年齢:${age}`);
console.log('--- 2. データ型の復習 ---');
const isStudent = true; // 真偽値
const height = 170; // 数値
const message = 'こんにちは'; // 文字列
const nothing = null; // null
let unknown; // undefined(まだ値が入っていない)
console.log(`学生かどうか:${isStudent}`);
console.log(`身長:${height} cm`);
console.log(`メッセージ:${message}`);
console.log(`nothing:${nothing}`);
console.log(`unknown:${unknown}`);
console.log('--- 3. 演算子の復習 ---');
const a = 10;
const b = 3;
console.log(`a + b = ${a + b}`);
console.log(`a - b = ${a - b}`);
console.log(`a * b = ${a * b}`);
console.log(`a / b = ${a / b}`);
console.log(`a % b = ${a % b}`);
console.log(`10 > 5 は ${10 > 5}`);
console.log(`10 === 10 は ${10 === 10}`);
console.log(`10 !== 5 は ${10 !== 5}`);
console.log('--- 4. 条件分岐の復習 ---');
const score = 75;
if (score >= 80) {
console.log('とてもよくできました');
} else if (score >= 60) {
console.log('合格です');
} else {
console.log('不合格です');
}
console.log('--- 5. 繰り返しの復習(for) ---');
// 1〜5まで表示
for (let i = 1; i <= 5; i++) {
console.log(`for文:i = ${i}`);
}
console.log('--- 6. 繰り返しの復習(while) ---');
let count = 5;
while (count > 0) {
console.log(`while文:カウントダウン ${count}`);
count--;
}
console.log('--- 7. 関数の復習(挨拶関数) ---');
function greet(name) {
console.log(`こんにちは、${name}さん!`);
}
greet('太郎');
greet('花子');
console.log('--- 8. 関数の復習(足し算関数) ---');
function add(x, y) {
return x + y; // 計算結果を戻り値として返します
}
const sum1 = add(3, 5);
const sum2 = add(10, 20);
console.log(`3 + 5 = ${sum1}`);
console.log(`10 + 20 = ${sum2}`);
console.log('--- Day 14 前半:Week 2 総復習が完了しました ---');
</script>
</body>
</html>
Day 14 前半のまとめ
Day 14前半では、Week 2で学んだ
- 変数:値に名前をつけて管理する
- データ型:値の種類を意識する
- 演算子:計算・比較のための記号
- 条件分岐:状況に応じて処理を切り替える
- 繰り返し:同じ処理を何度も実行する
- 関数:処理を部品としてまとめて再利用する
を一気に振り返りました。
ここまでの内容は、今後のJavaScript学習の 土台そのもの になります。 総復習テンプレートを実際に動かしながら、 「このコードは何をしているのか」を自分の言葉で説明できるかどうかを、ぜひ確認してみてください。
Day 14:Week 2 総復習(後半)で「つなげて動かす」力を身につける
Day 14後半では、Week 2で学んだ
- 変数
- データ型
- 演算子
- 条件分岐
- 繰り返し
- 関数
を「バラバラに思い出す」のではなく、1つの流れとして組み合わせて使うことを目指します。 ここでは、ミニアプリのような形でコードを書きながら、 それぞれの要素がどうつながっているかをステップバイステップで確認していきます。
総復習のゴールを「1つの小さなプログラム」にする
目標:ユーザー情報を使ってメッセージを出すミニプログラム
今回の総復習では、次のような流れのミニプログラムを作ります。
- 変数でユーザー情報を管理する(名前・年齢・身長・体重など)
- データ型と演算子で計算する(年齢判定・BMI計算など)
- 条件分岐でメッセージを切り替える
- 繰り返しで複数ユーザーをまとめて処理する
- 関数で処理を部品化して再利用する
これを通して、「Week 2の内容が全部つながっている」感覚をつかんでいきます。
変数とデータ型で「ユーザー情報」を表現する
ユーザー1人分の情報を変数で持つ
まずは、1人分のユーザー情報を変数で表現します。
const name = '太郎'; // 文字列(string)
const age = 20; // 数値(number)
const heightCm = 170; // 数値(身長)
const weightKg = 60; // 数値(体重)
const isStudent = true; // 真偽値(boolean)
JavaScript- ここで、データ型を意識して値を選ぶことが大事です。
- 名前は文字列、年齢や身長・体重は数値、学生かどうかは真偽値で表現します。
演算子で「計算」と「比較」を行う
BMIを計算する(算術演算子)
BMIの計算式は次の通りです。
BMI = 体重(kg) ÷ 身長(m)^2
身長はセンチメートルで持っているので、メートルに変換します。
const heightM = heightCm / 100; // cm → m に変換
const bmi = weightKg / (heightM * heightM); // BMIを計算
JavaScript/と*を使って計算しています。heightM * heightMは「身長の2乗」です。
年齢で「大人かどうか」を判定する(比較演算子)
const isAdult = age >= 18; // 18歳以上なら true
JavaScript>=は「以上」を表す比較演算子です。- 結果は真偽値(boolean)になります。
条件分岐で「メッセージ」を切り替える
BMIに応じてメッセージを変える
let bmiMessage = '';
if (bmi < 18.5) {
bmiMessage = '低体重です';
} else if (bmi < 25) {
bmiMessage = '普通体重です';
} else if (bmi < 30) {
bmiMessage = '肥満(1度)です';
} else {
bmiMessage = '肥満(2度以上)です';
}
JavaScriptif〜else if〜elseで条件を段階的に分けています。- 条件は「日本語で言い直してからコードにする」と理解しやすいです。
年齢と学生かどうかでメッセージを変える
let statusMessage = '';
if (isStudent && age < 18) {
statusMessage = '未成年の学生です';
} else if (isStudent && age >= 18) {
statusMessage = '成人した学生です';
} else if (!isStudent && age >= 18) {
statusMessage = '社会人または成人です';
} else {
statusMessage = '未成年で学生ではありません';
}
JavaScript&&は「かつ」、!は「ではない」を表します。- 条件分岐は「ルール」をコードにする作業だと意識すると整理しやすいです。
関数で「計算」と「メッセージ生成」を部品化する
BMI計算を関数にする
function calcBMI(weightKg, heightCm) {
const heightM = heightCm / 100;
const bmi = weightKg / (heightM * heightM);
return bmi; // 計算結果を戻り値として返します
}
JavaScript- 引数:
weightKgとheightCm - 処理:BMIの計算
- 戻り値:計算されたBMI値
BMI判定を関数にする
function getBMIMessage(bmi) {
if (bmi < 18.5) {
return '低体重です';
} else if (bmi < 25) {
return '普通体重です';
} else if (bmi < 30) {
return '肥満(1度)です';
} else {
return '肥満(2度以上)です';
}
}
JavaScript- 引数:
bmi - 処理:条件分岐による判定
- 戻り値:メッセージ(文字列)
年齢と学生ステータスの判定を関数にする
function getStatusMessage(age, isStudent) {
if (isStudent && age < 18) {
return '未成年の学生です';
} else if (isStudent && age >= 18) {
return '成人した学生です';
} else if (!isStudent && age >= 18) {
return '社会人または成人です';
} else {
return '未成年で学生ではありません';
}
}
JavaScript- 引数:
ageとisStudent - 戻り値:ステータスを表すメッセージ
繰り返しで「複数ユーザー」をまとめて処理する
ユーザー情報を配列で持つ
const users = [
{ name: '太郎', age: 20, heightCm: 170, weightKg: 60, isStudent: true },
{ name: '花子', age: 17, heightCm: 160, weightKg: 50, isStudent: true },
{ name: '次郎', age: 30, heightCm: 175, weightKg: 80, isStudent: false }
];
JavaScript- ここでは、オブジェクトの配列で複数ユーザーを表現しています。
- 1人分の情報が1つのオブジェクトにまとまっています。
for文で1人ずつ処理する
for (let i = 0; i < users.length; i++) {
const user = users[i]; // i番目のユーザーを取り出す
const bmi = calcBMI(user.weightKg, user.heightCm); // BMIを計算
const bmiMessage = getBMIMessage(bmi); // BMI判定メッセージ
const statusMessage = getStatusMessage(user.age, user.isStudent); // 年齢・学生ステータスメッセージ
console.log('-------------------------');
console.log(`名前:${user.name}`);
console.log(`年齢:${user.age}`);
console.log(`身長:${user.heightCm} cm`);
console.log(`体重:${user.weightKg} kg`);
console.log(`BMI:${bmi}`);
console.log(`BMI判定:${bmiMessage}`);
console.log(`ステータス:${statusMessage}`);
}
JavaScriptfor文で配列を順番に回しながら、 関数を使って計算・判定・メッセージ生成を行っています。- ここで、変数・データ型・演算子・条件分岐・繰り返し・関数がすべてつながっていることがわかります。
Week 2 総復習(後半)用テンプレート
ここまでの内容を1つにまとめた、ブラウザで動かせるテンプレートです。 Day 14後半の総復習として、実際に動かしながら理解を深めてください。
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>Day 14 後半:Week 2 総復習(応用編)</title>
</head>
<body>
<h1>Day 14 後半:Week 2 総復習(変数・データ型・演算子・条件分岐・繰り返し・関数の組み合わせ)</h1>
<p>ブラウザのコンソールを開いて、出力結果を確認してください。</p>
<script>
console.log('--- 1. ユーザー情報(変数・データ型) ---');
const users = [
{ name: '太郎', age: 20, heightCm: 170, weightKg: 60, isStudent: true },
{ name: '花子', age: 17, heightCm: 160, weightKg: 50, isStudent: true },
{ name: '次郎', age: 30, heightCm: 175, weightKg: 80, isStudent: false }
];
console.log('ユーザー一覧:', users);
console.log('--- 2. BMI計算関数(演算子+関数) ---');
// BMIを計算する関数
function calcBMI(weightKg, heightCm) {
const heightM = heightCm / 100; // cm を m に変換
const bmi = weightKg / (heightM * heightM); // BMI計算
return bmi; // 戻り値としてBMIを返します
}
console.log('60kg・170cmのBMI:', calcBMI(60, 170));
console.log('--- 3. BMI判定関数(条件分岐+関数) ---');
function getBMIMessage(bmi) {
if (bmi < 18.5) {
return '低体重です';
} else if (bmi < 25) {
return '普通体重です';
} else if (bmi < 30) {
return '肥満(1度)です';
} else {
return '肥満(2度以上)です';
}
}
console.log('BMI 22 の判定:', getBMIMessage(22));
console.log('--- 4. 年齢・学生ステータス判定関数 ---');
function getStatusMessage(age, isStudent) {
if (isStudent && age < 18) {
return '未成年の学生です';
} else if (isStudent && age >= 18) {
return '成人した学生です';
} else if (!isStudent && age >= 18) {
return '社会人または成人です';
} else {
return '未成年で学生ではありません';
}
}
console.log('17歳・学生の判定:', getStatusMessage(17, true));
console.log('30歳・非学生の判定:', getStatusMessage(30, false));
console.log('--- 5. 繰り返しで複数ユーザーを処理 ---');
for (let i = 0; i < users.length; i++) {
const user = users[i];
const bmi = calcBMI(user.weightKg, user.heightCm);
const bmiMessage = getBMIMessage(bmi);
const statusMessage = getStatusMessage(user.age, user.isStudent);
console.log('-------------------------');
console.log(`名前:${user.name}`);
console.log(`年齢:${user.age}`);
console.log(`身長:${user.heightCm} cm`);
console.log(`体重:${user.weightKg} kg`);
console.log(`BMI:${bmi}`);
console.log(`BMI判定:${bmiMessage}`);
console.log(`ステータス:${statusMessage}`);
}
console.log('--- Day 14 後半:Week 2 総復習(応用編)が完了しました ---');
</script>
</body>
</html>
Day 14 後半のまとめ
Day 14後半では、Week 2で学んだ
- 変数
- データ型
- 演算子
- 条件分岐
- 繰り返し
- 関数
を、1つのミニプログラムの中で組み合わせて使いました。
ここまで来ると、JavaScriptのコードは 「バラバラの文法の集まり」ではなく、
- 変数で情報を持ち
- 演算子で計算し
- 条件分岐で判断し
- 繰り返しでまとめて処理し
- 関数で部品化して再利用する
という 1つの流れとして見えてきます。
Week 2の総復習を通して、この流れが自分の中に少しでも定着していれば、 この先のWeek 3以降の内容も、ぐっと理解しやすくなっていきます。
Day 14:Week 2 制作「簡易計算ツール集」で基礎をひとまとめにする
Week 2の総復習として、「簡易計算ツール集」を作成していきます。 ここまで学んだ
- 変数
- データ型
- 演算子
- 条件分岐
- 繰り返し
- 関数
をすべて使いながら、
- 消費税計算
- 割引計算
- BMI計算
- 年齢判定
を行うミニツールを1つのページにまとめていきます。 ステップバイステップで考え方とコードを確認していきます。
簡易計算ツール集の全体像をイメージする
何を作るかを先に言葉で整理する
今回作るのは、ブラウザのコンソールで動く「計算ツール集」です。
- 消費税計算ツール
- 税抜価格と税率から税込価格を計算する
- 割引計算ツール
- 元の価格と割引率から割引後の価格を計算する
- BMI計算ツール
- 体重と身長からBMIを計算し、判定メッセージを出す
- 年齢判定ツール
- 年齢から「未成年か成人か」「学生か社会人か」などを判定する
これらをそれぞれ関数として作り、 最後にまとめて呼び出して「ツール集」として動かします。
消費税計算ツールを作る
消費税計算の考え方
消費税計算は、次のような流れになります。
- 税抜価格(例:1000円)を受け取る
- 税率(例:0.1=10%)を受け取る
- 税額を計算する
- 税込価格を計算する
- 結果を戻り値として返す
消費税計算関数のコード
// 消費税計算ツール:税抜価格と税率から税込価格を計算する関数です
function calcTax(priceWithoutTax, taxRate) {
// 税額を計算します(例:1000円 × 0.1 = 100円)
const taxAmount = priceWithoutTax * taxRate;
// 税込価格を計算します(例:1000円 + 100円 = 1100円)
const priceWithTax = priceWithoutTax + taxAmount;
// 計算結果を戻り値として返します
return priceWithTax;
}
JavaScript動作確認の例
const price = 1000; // 税抜価格
const taxRate = 0.1; // 10%の消費税
const resultTax = calcTax(price, taxRate);
console.log(`税抜価格:${price} 円`);
console.log(`消費税率:${taxRate * 100} %`);
console.log(`税込価格:${resultTax} 円`);
JavaScript割引計算ツールを作る
割引計算の考え方
割引計算は、次のような流れになります。
- 元の価格(例:2000円)を受け取る
- 割引率(例:0.2=20%)を受け取る
- 割引額を計算する
- 割引後の価格を計算する
- 結果を戻り値として返す
割引計算関数のコード
// 割引計算ツール:元の価格と割引率から割引後の価格を計算する関数です
function calcDiscount(price, discountRate) {
// 割引額を計算します(例:2000円 × 0.2 = 400円)
const discountAmount = price * discountRate;
// 割引後の価格を計算します(例:2000円 - 400円 = 1600円)
const discountedPrice = price - discountAmount;
// 計算結果を戻り値として返します
return discountedPrice;
}
JavaScript動作確認の例
const originalPrice = 2000; // 元の価格
const discountRate = 0.2; // 20%割引
const resultDiscount = calcDiscount(originalPrice, discountRate);
console.log(`元の価格:${originalPrice} 円`);
console.log(`割引率:${discountRate * 100} %`);
console.log(`割引後の価格:${resultDiscount} 円`);
JavaScriptBMI計算ツールを作る
BMI計算の考え方
BMIの計算式は次の通りです。
BMI = 体重(kg) ÷ 身長(m)^2
流れとしては、
- 体重(kg)を受け取る
- 身長(cm)を受け取る
- 身長をメートルに変換する
- BMIを計算する
- 結果を戻り値として返す
さらに、BMI値に応じて判定メッセージを出す関数も作ります。
BMI計算関数のコード
// BMI計算ツール:体重(kg)と身長(cm)からBMIを計算する関数です
function calcBMI(weightKg, heightCm) {
// 身長をメートルに変換します(例:170cm → 1.7m)
const heightM = heightCm / 100;
// BMIを計算します(例:60kg ÷ (1.7m × 1.7m))
const bmi = weightKg / (heightM * heightM);
// 計算結果を戻り値として返します
return bmi;
}
JavaScriptBMI判定関数のコード
// BMI判定ツール:BMI値に応じて判定メッセージを返す関数です
function getBMIMessage(bmi) {
if (bmi < 18.5) {
return '低体重です';
} else if (bmi < 25) {
return '普通体重です';
} else if (bmi < 30) {
return '肥満(1度)です';
} else {
return '肥満(2度以上)です';
}
}
JavaScript動作確認の例
const weightKg = 60; // 体重
const heightCm = 170; // 身長
const bmiValue = calcBMI(weightKg, heightCm); // BMIを計算
const bmiMessage = getBMIMessage(bmiValue); // 判定メッセージを取得
console.log(`体重:${weightKg} kg`);
console.log(`身長:${heightCm} cm`);
console.log(`BMI:${bmiValue}`);
console.log(`判定:${bmiMessage}`);
JavaScript年齢判定ツールを作る
年齢判定の考え方
ここでは、次のような判定を行うツールを作ります。
- 18歳未満:未成年
- 18歳以上:成人
さらに、学生かどうかの情報も使って、 「未成年の学生」「成人した学生」「社会人」などのメッセージを出します。
年齢判定関数のコード(シンプル版)
// 年齢判定ツール:年齢から未成年か成人かを判定する関数です
function judgeAdult(age) {
if (age >= 18) {
return '成人です';
} else {
return '未成年です';
}
}
JavaScript年齢+学生ステータス判定関数のコード(拡張版)
// 年齢と学生ステータスから詳細な判定を行う関数です
function getStatusMessage(age, isStudent) {
if (isStudent && age < 18) {
return '未成年の学生です';
} else if (isStudent && age >= 18) {
return '成人した学生です';
} else if (!isStudent && age >= 18) {
return '社会人または成人です';
} else {
return '未成年で学生ではありません';
}
}
JavaScript動作確認の例
const age1 = 17;
const age2 = 20;
console.log(`年齢 ${age1} 歳:${judgeAdult(age1)}`);
console.log(`年齢 ${age2} 歳:${judgeAdult(age2)}`);
console.log(getStatusMessage(17, true)); // 未成年の学生
console.log(getStatusMessage(20, true)); // 成人した学生
console.log(getStatusMessage(30, false)); // 社会人または成人
JavaScriptWeek 2 制作「簡易計算ツール集」テンプレート
ここまでの4つのツールを1つのHTMLファイルにまとめたテンプレートです。 ブラウザで開き、コンソールを表示して動作を確認できます。
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>Day 14:Week 2 簡易計算ツール集</title>
</head>
<body>
<h1>Day 14:Week 2 簡易計算ツール集</h1>
<p>ブラウザのコンソールを開いて、各ツールの結果を確認してください。</p>
<script>
console.log('--- 消費税計算ツール ---');
// 消費税計算関数
function calcTax(priceWithoutTax, taxRate) {
const taxAmount = priceWithoutTax * taxRate;
const priceWithTax = priceWithoutTax + taxAmount;
return priceWithTax;
}
const price = 1000;
const taxRate = 0.1;
const resultTax = calcTax(price, taxRate);
console.log(`税抜価格:${price} 円`);
console.log(`消費税率:${taxRate * 100} %`);
console.log(`税込価格:${resultTax} 円`);
console.log('--- 割引計算ツール ---');
// 割引計算関数
function calcDiscount(price, discountRate) {
const discountAmount = price * discountRate;
const discountedPrice = price - discountAmount;
return discountedPrice;
}
const originalPrice = 2000;
const discountRate = 0.2;
const resultDiscount = calcDiscount(originalPrice, discountRate);
console.log(`元の価格:${originalPrice} 円`);
console.log(`割引率:${discountRate * 100} %`);
console.log(`割引後の価格:${resultDiscount} 円`);
console.log('--- BMI計算ツール ---');
// BMI計算関数
function calcBMI(weightKg, heightCm) {
const heightM = heightCm / 100;
const bmi = weightKg / (heightM * heightM);
return bmi;
}
// BMI判定関数
function getBMIMessage(bmi) {
if (bmi < 18.5) {
return '低体重です';
} else if (bmi < 25) {
return '普通体重です';
} else if (bmi < 30) {
return '肥満(1度)です';
} else {
return '肥満(2度以上)です';
}
}
const weightKg = 60;
const heightCm = 170;
const bmiValue = calcBMI(weightKg, heightCm);
const bmiMessage = getBMIMessage(bmiValue);
console.log(`体重:${weightKg} kg`);
console.log(`身長:${heightCm} cm`);
console.log(`BMI:${bmiValue}`);
console.log(`判定:${bmiMessage}`);
console.log('--- 年齢判定ツール ---');
// 年齢判定関数(成人か未成年か)
function judgeAdult(age) {
if (age >= 18) {
return '成人です';
} else {
return '未成年です';
}
}
// 年齢+学生ステータス判定関数
function getStatusMessage(age, isStudent) {
if (isStudent && age < 18) {
return '未成年の学生です';
} else if (isStudent && age >= 18) {
return '成人した学生です';
} else if (!isStudent && age >= 18) {
return '社会人または成人です';
} else {
return '未成年で学生ではありません';
}
}
const age1 = 17;
const age2 = 20;
console.log(`年齢 ${age1} 歳:${judgeAdult(age1)}`);
console.log(`年齢 ${age2} 歳:${judgeAdult(age2)}`);
console.log(getStatusMessage(17, true));
console.log(getStatusMessage(20, true));
console.log(getStatusMessage(30, false));
console.log('--- Week 2 簡易計算ツール集の動作確認が完了しました ---');
</script>
</body>
</html>
Day 14:Week 2 制作のまとめ
この「簡易計算ツール集」では、
- 変数で入力値や結果を管理し
- データ型を意識して値を扱い
- 演算子で計算し
- 条件分岐で判定し
- 関数で処理を部品化し
- 必要に応じて複数回呼び出して再利用する
という、Week 2で学んだすべての要素を使いました。
こうした小さなツールを自分で作れるようになると、 「JavaScriptで身近な計算や判定を自動化する」感覚がぐっと現実的になります。
ぜひ、このテンプレートをベースにして、 自分なりの計算ツール(例えば、貯金シミュレーターや目標達成カウンターなど)も作ってみてください。
