単位変換アプリ 1日目のゴール
1日目のテーマは 「JavaScriptの関数と数値処理を使って、シンプルな単位変換アプリの“芯”を作ること」 です。
ここでは、初心者がつまずきやすい
- 関数とは何か
- 数値と文字列の違い
- 計算の基本
- 単位変換の考え方
を、実際のコードと一緒にかみ砕いて学んでいきます。
作るのは、とてもシンプルな 「メートルをキロメートルに変換する関数」 からスタートし、少しずつ応用していきます。
関数とは「処理に名前をつけたもの」
まず、JavaScriptの関数を感覚的に理解しましょう。
- 入力を受け取る
- 何か処理をする
- 結果を返す
この「箱」に名前をつけたものが関数です。
たとえば、 「メートルをキロメートルに変換する箱」を作るイメージです。
// メートルをキロメートルに変換する関数
function meterToKilometer(meter) {
const kilometer = meter / 1000; // メートルを1000で割るとキロメートル
return kilometer; // 計算結果を返す
}
深掘りポイント
function meterToKilometer(meter)meterToKilometerが関数の名前meterが「入力（引数）」
const kilometer = meter / 1000;meterを1000で割ってキロメートルに変換
return kilometer;- 関数の「出口」
- 呼び出し元に結果を返す
関数は「何度でも使える計算の部品」です。
関数を呼び出してみる
関数は作っただけでは動きません。 「呼び出す」 必要があります。
const result = meterToKilometer(1500); // 1500メートルをキロメートルに変換
console.log(result); // 1.5 と表示される
ここで重要なのは、 「関数は“値”を返すので、変数に代入できる」 ということです。
数値と文字列の違い（初心者が必ずつまずくポイント）
JavaScriptでは、
- 数値：
123,3.14 - 文字列：
"123","3.14"
というように、見た目が似ていても「型」が違います。
ブラウザから入力を受け取るとき、 prompt() を使うと 文字列 として受け取られます。
const input = prompt("メートルの値を入力してください：");
console.log(typeof input); // "string" と表示される
このまま計算すると、 文字列のままなので正しく計算できません。
そこで、 Number() を使って数値に変換する のが重要になります。
const input = prompt("メートルの値を入力してください：");
const meter = Number(input); // 文字列 → 数値 に変換
const kilometer = meterToKilometer(meter);
console.log(kilometer);
深掘りポイント
prompt()は「ユーザー入力」を文字列で返すNumber()で数値に変換しないと計算が崩れる- 数値処理では「型」を意識することがとても大事
単位変換の考え方（ロジックを言葉で整理する）
メートル → キロメートルの変換は、 「1000で割る」 だけです。
- 1 km = 1000 m
- 1500 m = 1500 ÷ 1000 = 1.5 km
この「ルール」を関数に閉じ込めるのが単位変換アプリの基本です。
同じように、
- キログラム → グラム（1000倍）
- 分 → 時間（60で割る） など、単位変換は 「掛け算か割り算」 がほとんどです。
単位変換アプリ 1日目のミニ版
ここまでの内容をまとめて、 ブラウザで動くシンプルな単位変換アプリを作ってみます。
HTML＋JavaScriptの最小構成
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>単位変換アプリ 1日目</title>
</head>
<body>
<h1>メートル → キロメートル変換</h1>
<!-- 入力欄 -->
<input id="meterInput" type="text" placeholder="メートルを入力">
<button id="convertButton">変換する</button>
<!-- 結果表示 -->
<p id="resultArea"></p>
<script>
// メートルをキロメートルに変換する関数
function meterToKilometer(meter) {
const kilometer = meter / 1000; // メートルを1000で割る
return kilometer; // 結果を返す
}
// ボタンがクリックされたときの処理
const button = document.getElementById("convertButton");
const input = document.getElementById("meterInput");
const resultArea = document.getElementById("resultArea");
button.addEventListener("click", function() {
const meterText = input.value; // 入力値（文字列）
const meter = Number(meterText); // 数値に変換
if (isNaN(meter)) { // 数値でない場合のチェック
resultArea.textContent = "数値を入力してください。";
return;
}
const kilometer = meterToKilometer(meter); // 関数で変換
resultArea.textContent = meter + " m は " + kilometer + " km です。";
});
</script>
</body>
</html>
コードの重要ポイント
meterToKilometer()- 単位変換の「ロジック」を関数に閉じ込めている
Number(meterText)- 入力値を数値に変換しないと計算できない
isNaN(meter)- 「数値でないか」をチェックする安全装置
textContent- 結果を画面に表示する
関数を増やしてみる（応用への一歩）
1日目の最後に、 もうひとつ単位変換関数を追加してみましょう。
例えば、 キログラム → グラム の変換です。
// キログラムをグラムに変換する関数
function kilogramToGram(kg) {
const gram = kg * 1000; // キログラムを1000倍するとグラム
return gram;
}
このように、 「単位変換のルールを関数にする」 というパターンを覚えておくと、 どんな単位でも同じ考え方で作れるようになります。
1日目で本当に掴んでほしいこと
● 関数は「処理に名前をつけた箱」
入力 → 処理 → 出力、という流れを意識する。
● 数値と文字列の違いは超重要
prompt() や input.value は文字列。 Number() で数値に変換してから計算する。
● 単位変換は「ルールを関数に閉じ込める」
1000で割る・1000倍する・60で割るなど、 計算ルールを関数にして再利用する。
● 小さなアプリでも「関数で整理する」癖をつける
後から機能を増やすときに、 関数で分けておくと圧倒的に楽になる。
次のステップ（2日目の予告）
2日目では、この単位変換アプリを育てて、
- 複数の単位変換（メートル・キログラム・分・時間など）
- 選択式の変換（プルダウンで変換種類を選ぶ）
- 関数の分割と整理（モジュール的な考え方）
を学びながら、 「関数を使ってアプリの構造を整える」 ところまで進んでいきます。
