プログラミングを学び始めたばかりの方にとって、「コードを書いて生活に役立つツールを作れる」ことは大きなモチベーションになります。これまでの100日チャレンジ（#100DaysOfCode / #100日チャレンジ）では、タイマーやゲーム、ToDo管理、天気予報アプリなどを作ってきました。
Day06では、日常でよく使う 単位変換アプリ を制作しました。テーマは「距離・重さ・温度」の3カテゴリ。入力した値を瞬時に変換し、結果を表示するシンプルな仕組みです。
一見シンプルですが、学習ポイントは多く、フォーム入力・条件分岐・数値計算・リアルタイム更新 といった初心者がぜひ押さえておきたい基礎を網羅できます。
完成アプリの紹介
今回の単位変換アプリは以下のように動作します。
- 距離：キロメートル（km） ⇄ マイル（mile）
- 重さ：キログラム（kg） ⇄ ポンド（lb）
- 温度：摂氏（℃） ⇄ 華氏（℉）
入力欄に数値を入力すると、自動的に変換結果が表示されます。カテゴリを切り替えると、対応する変換式が適用される仕組みです。
👉 実際に触ってみる
Day06 — 単位変換アプリ 公開ページ
シンプルですが、毎日の生活で「ちょっと単位を変換したい」ときに便利に使えます。
開発の流れ
1. HTML：入力欄とカテゴリ選択を作成
まずはユーザーが入力できるフォームを用意します。
<h1>単位変換アプリ</h1>
<select id="category">
<option value="distance">距離 (km ⇄ mile)</option>
<option value="weight">重さ (kg ⇄ lb)</option>
<option value="temperature">温度 (℃ ⇄ ℉)</option>
</select>
<input id="inputValue" type="number" placeholder="数値を入力">
<div id="result"></div>
selectタグでカテゴリを切り替え、inputタグで数値を入力します。divには計算結果を表示します。
2. CSS：フォームと結果を見やすく整える
シンプルなアプリでも、CSSで見た目を整えると格段に使いやすくなります。
- 入力欄とセレクトボックスを中央揃えに
- 結果表示部分はカード風にデザイン
- モバイルでも崩れない余白とフォントサイズ
こうした工夫で「使いたくなるアプリ」へと近づきます。
3. JavaScript：変換ロジックを実装
JavaScriptでは入力値を取得し、カテゴリに応じた計算を行います。
例：距離変換（km ⇄ mile）
function kmToMile(km) { return km * 0.621371; }
function mileToKm(mile) { return mile / 0.621371; }
温度変換（℃ ⇄ ℉）
function cToF(c) { return (c * 9/5) + 32; }
function fToC(f) { return (f - 32) * 5/9; }
イベントリスナーで入力値が変わるたびに計算を実行し、結果を即時表示します。
input.addEventListener("input", updateResult);
category.addEventListener("change", updateResult);
学習ポイント
今回の単位変換アプリでは、以下の基礎スキルを身につけられます。
フォーム入力の扱い
input.value や select.value を使ってユーザーの入力を取得する方法。
条件分岐の活用
カテゴリごとに if や switch で処理を分岐させる方法。
数値計算の基礎
変換式をコードに書き下ろすことで、数値処理の練習になる。
リアルタイム更新
イベントリスナーを使い、ユーザーが入力した瞬間に結果が更新されるUI体験を作る。
公開方法（GitHub Pages）
完成したらGitHub Pagesで無料公開します。
- GitHubで新しいリポジトリを作成
index.htmlをアップロード- 「Settings → Pages」で公開を有効化
- 公開URLを確認
わずか数分で「自分が作ったWebアプリ」を世界に公開できます。
まとめ
- 単位変換アプリは初心者にも作りやすく、実用性が高い
- 入力処理・条件分岐・数値計算をまとめて学べる
- GitHub Pagesで無料公開すれば、誰でも利用可能
「小さな便利アプリ」を作れると、学習が一気に楽しくなります。
次回予告
Day07では「ストップウォッチ」を制作します。
Start / Stop / Lap 機能を持ち、時間処理と状態管理を深く学ぶアプリです。
「時間を操るアプリ」は学習の幅をさらに広げてくれます。どうぞお楽しみに！
