今回の記事では、以下の3つの重要なプログラミング技術を使いながら、簡単な電卓アプリを作成します。
- switch 文（条件分岐）
- parseFloat（文字列から数値への変換）
- 関数分割（処理の整理・再利用）
プログラミング初心者でも無理なく理解できるよう、ステップごとに丁寧に解説していますので、ぜひ一緒に手を動かして学んでみましょう。
シンプルなアプリを作成した後は、電卓っぽさを出すためにCSSを活用したデザインのアップデートを行う手順も解説します。
switch 文（条件分岐）とは？
switch 文は、ある値に応じて複数の分岐処理を行いたいときに使う構文です。if...else if...else のように条件が多くなると読みづらくなるコードも、switch を使えばすっきり整理できます。
例えば、演算子が + や - のように複数あり、どの処理をするかを分岐させたい場合は次のように書きます。
const operator = "+";
switch (operator) {
case "+":
console.log("足し算します");
break;
case "-":
console.log("引き算します");
break;
default:
console.log("未対応の演算子です");
}
caseに一致したブロックが実行されます。breakを書かないと、下のcaseにも処理が流れてしまうので注意。
parseFloat（文字→数値変換）とは？
Webアプリでは、フォームから取得した値はすべて**文字列（string）**として扱われます。たとえ「3」や「5.5」など数字を入力しても、それは "3" や "5.5" といった文字列です。
そのままでは計算できないため、数値型（number）に変換する必要があります。そのときに使えるのが parseFloat() 関数です。
const input = "3.14";
const number = parseFloat(input); // → 3.14（数値になる）
console.log(typeof number); // "number"
もし数値に変換できない文字列（例: “abc”）を渡すと、NaN（Not a Number）になります。
関数分割とは？
プログラムが長くなってくると、「何をしているのか」がわかりにくくなります。そこで使うのが関数分割です。
「入力を取得する」「計算する」「結果を表示する」など、目的ごとに処理を関数にまとめることで、コードが整理されて読みやすくなります。
関数分割なしの例：
button.addEventListener("click", () => {
const a = parseFloat(inputA.value);
const b = parseFloat(inputB.value);
const result = a + b;
resultDisplay.textContent = result.toString();
});
関数分割した例：
function getInputs(): [number, number] {
return [parseFloat(inputA.value), parseFloat(inputB.value)];
}
function add(a: number, b: number): number {
return a + b;
}
function showResult(result: number): void {
resultDisplay.textContent = result.toString();
}
button.addEventListener("click", () => {
const [a, b] = getInputs();
const result = add(a, b);
showResult(result);
});
このように関数で処理を分けることで、「どこで何をしているのか」がはっきり見えるようになります。
バグが起きたときの修正もしやすくなるため、実践でもよく使われるテクニックです。
電卓アプリを実際に作成してみる
1. 開発環境を構築する
まずは、プロジェクトの作業環境を整えましょう。
mkdir ait-ts-calculator4
cd ait-ts-calculator4
npm init -y
npm install typescript --save-dev
npx tsc --initこの手順で、TypeScriptを使った開発に必要な初期設定が整います。
2. tsconfig.json の編集
続いて、生成された tsconfig.json を以下のように編集してください。
{
"compilerOptions": {
"target": "ES6",
"module": "ES6",
"outDir": "./dist",
"rootDir": "./src",
"strict": true,
"esModuleInterop": true
}
}この設定により、
srcフォルダにあるTypeScriptファイルをdistに出力- ES6（最新のJavaScript仕様）で変換
- 厳格な型チェックを有効化（バグ防止）
といった構成になります。
3. HTML ファイルの作成
次に、ブラウザでアプリケーションを表示し、操作するためのHTMLファイルを用意します。
プロジェクトのルートディレクトリ（ait-webapp2 フォルダ直下）に index.html という名前でファイルを作成します。
(Windowsの場合は、エディタで直接 index.html を作成してください。)
touch index.html作成したhtmlファイルに以下のコードを記述します。
4. index.htmlを作成する
今回は、以下のようにタイトルに電卓アプリと記載しました。
<title>電卓アプリ</title>
これでWebブラウザで開いたときにタブに電卓アプリと表示されるようになります。
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8" />
<title>電卓アプリ</title>
</head>
<body>
<h1>電卓アプリ</h1>
<input type="text" id="num1" placeholder="数値1">
<select id="operator">
<option value="+">＋</option>
<option value="-">−</option>
<option value="*">×</option>
<option value="/">÷</option>
</select>
<input type="text" id="num2" placeholder="数値2">
<button id="calcBtn">計算</button>
<p id="result">結果：</p>
<script src="./dist/index.js"></script>
</body>
</html>このHTMLでは、2つの数値入力と演算子を選択できるUIを用意しています。
ユーザーが「計算」ボタンを押すと、JavaScriptが起動し、結果を表示します。
５. TypeScript ファイルの作成
最後に、TypeScriptのソースコードを格納するディレクトリを作成し、その中にメインとなるファイルを作成します。
mkdir src
touch src/index.tsこのコマンドを実行すると、src/index.ts の中身が dist/index.js に出力され、ブラウザで読み込めるようになります。
src/index.tsにコードを記述する
次に、src/index.ts に以下のようなコードを書きます。
const num1Input = document.getElementById("num1") as HTMLInputElement;
const num2Input = document.getElementById("num2") as HTMLInputElement;
const operatorSelect = document.getElementById("operator") as HTMLSelectElement;
const resultDisplay = document.getElementById("result") as HTMLParagraphElement;
const calcBtn = document.getElementById("calcBtn") as HTMLButtonElement;
calcBtn.addEventListener("click", () => {
const num1 = parseFloat(num1Input.value);
const num2 = parseFloat(num2Input.value);
const operator = operatorSelect.value;
if (isNaN(num1) || isNaN(num2)) {
resultDisplay.textContent = "結果：数値を正しく入力してください。";
return;
}
let result: number;
switch (operator) {
case "+":
result = num1 + num2;
break;
case "-":
result = num1 - num2;
break;
case "*":
result = num1 * num2;
break;
case "/":
result = num2 !== 0 ? num1 / num2 : NaN;
break;
default:
resultDisplay.textContent = "結果：不正な演算子です";
return;
}
resultDisplay.textContent = `結果：${result}`;
});ポイント
- ユーザー入力を
parseFloat()で数値化switch文で演算子に応じた処理を実行
6. TypeScript を JavaScript に変換
ここまでの準備が整ったら、TypeScriptファイルをJavaScriptに変換（トランスパイル）します。この手順は前回までも実施しているため復習となります。
npx tsc最後に、作成した index.html ファイルをブラウザで開き、アプリケーションの動作を確認します。
7. ブラウザ上で作成したアプリを確認
エクスプローラーやFinderで index.html ファイルをダブルクリックするか、ブラウザのアドレスバーにファイルのパスを入力して開いてください。
2つの数字の四則演算を行う電卓アプリが完成しました。
CSSを導入してアプリの見た目を大幅に変更
これまでのステップで電卓の基本的な計算ロジックは実装できましたが、現状ではHTMLのデフォルトの見た目のままで、お世辞にも「電卓らしい」とは言えません。
ここからは、CSS を導入し、HTML構造も修正してアプリケーションの見た目を本格的な電卓へと刷新していきます。
TML、CSS、TypeScriptがどのように連携して一つのウェブアプリケーションを形作るのか理解していきましょう。
ステップ1：HTML構造を変更
まず、電卓の見た目の基礎となるHTML構造を大幅に変更します。
以前のシンプルな入力フィールドとボタンから、より電卓らしいレイアウトにするために、divタグで各部分を区切り、ボタンの配置も調整します。
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>電卓アプリ</title>
<link rel="stylesheet" href="style.css" />
</head>
<body>
<div class="calculator">
<div class="display" id="display">0</div>
<div class="buttons">
<button class="btn orange" data-value="AC">AC</button>
<button class="btn orange" data-value="(">(</button>
<button class="btn orange" data-value=")">)</button>
<button class="btn orange" data-value="/">÷</button>
<button class="btn orange" data-value="+/-">+/-</button>
<button class="btn orange" data-value="%">%</button>
<button class="btn orange" data-value="C">C</button>
<button class="btn orange" data-value="*">×</button>
<button class="btn" data-value="7">7</button>
<button class="btn" data-value="8">8</button>
<button class="btn" data-value="9">9</button>
<button class="btn orange" data-value="-">−</button>
<button class="btn" data-value="4">4</button>
<button class="btn" data-value="5">5</button>
<button class="btn" data-value="6">6</button>
<button class="btn orange" data-value="+">＋</button>
<button class="btn" data-value="1">1</button>
<button class="btn" data-value="2">2</button>
<button class="btn" data-value="3">3</button>
<button class="btn equal orange" data-value="=">=</button>
<button class="btn zero" data-value="0">0</button>
<button class="btn" data-value=".">.</button>
</div>
</div>
<script src="./dist/index.js"></script>
</body>
</html>ポイント
<link rel="stylesheet" href="style.css" />
新たに作成するCSSファイルstyle.cssを読み込むための記述です。これがHTMLとCSSを繋ぐ重要な役割を果たします。<div class="display" id="display">0</div>: 計算結果や入力中の数値を表示するディスプレイ部分です。id="display"はTypeScriptから操作するために付与しています。初期値として “0” を表示させています。
ステップ2：CSSデザイン（style.css）を作成
次に、電卓の見た目を整えるためのCSSを記述します。プロジェクトのルートディレクトリ（index.html と同じ場所）に style.css という名前の新しいファイルを作成してください。
style.css作成後は、以下の画像のような階層構造となります。
作成した style.css に以下のコードを記述します。
body {
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
background: #f4f4f4;
margin: 0;
font-family: sans-serif;
}
.calculator {
width: 300px;
background: #333; /* 電卓本体の背景色を濃いグレーに */
border-radius: 10px; /* 角を丸くする */
overflow: hidden; /* 角丸からはみ出る要素を隠す */
box-shadow: 0 5px 15px rgba(0,0,0,0.2); /* 影をつけて立体感を出す */
}
.display {
background: #444; /* 表示画面の背景色 */
color: #fff; /* 表示文字の色を白に */ font-size: 2em;
text-align: right;
padding: 20px;
}
.buttons {
display: grid;
grid-template-columns: repeat(4, 1fr);
}
.btn {
font-size: 1.5em;
padding: 20px;
border: 1px solid #666;
background: #eee;
cursor: pointer;
}
.btn:hover {
background: #ddd;
}
/* 演算子や特殊機能ボタン用のスタイル */.orange {
background: orange;
color: white;
}
/* 「=」ボタンを縦に2マス分にする */.equal {
grid-row: span 2;
}
/* 「0」ボタンを横に2マス分にする */.zero {
grid-column: span 2;
}これらのCSSを適用することで、HTMLで定義した骨組みに肉付けがされ、ぐっと電卓らしい見た目に近づきます。
ステップ3：TypeScriptロジック（src/index.ts）
HTMLの構造とボタンの仕様が変わったため、src/index.ts のTypeScriptコードも合わせて更新します。主な変更点は、ボタンの取得方法と、各ボタンがクリックされた際の処理の分岐です。
const display = document.getElementById("display") as HTMLDivElement;
const buttons = document.querySelectorAll(".btn");
let currentInput = "";
buttons.forEach(button => {
button.addEventListener("click", () => {
const value = (button as HTMLButtonElement).dataset.value;
switch (value) {
case "=":
try {
// evalの代わりに安全な関数で置き換えてもOK
const result = eval(currentInput.replace("÷", "/").replace("×", "*"));
display.textContent = result.toString();
currentInput = result.toString();
} catch {
display.textContent = "エラー";
}
break;
case "AC":
currentInput = "";
display.textContent = "0";
break;
case "C":
currentInput = currentInput.slice(0, -1);
display.textContent = currentInput || "0";
break;
case "+/-":
if (currentInput.startsWith("-")) {
currentInput = currentInput.slice(1);
} else {
currentInput = "-" + currentInput;
}
display.textContent = currentInput;
break;
default:
currentInput += value;
display.textContent = currentInput;
break;
}
});
});
このコードによって新しいHTML構造とCSSデザインに対応した、より高機能で使いやすい電卓の動作が実現されます。
再度ビルドコマンドを実行する
TypeScriptファイル (src/index.ts) を変更したので、再度トランスパイルしてJavaScriptファイル (dist/index.js) を更新する必要があります。
ターミナルで以下のコマンドを実行してください。
npx tscこのコマンドを実行すると、src/index.ts がコンパイルされ、dist/index.js が最新の状態に更新されます。
ブラウザは
dist/index.jsを読み込むため、このステップを忘れると変更が反映されません。
そして index.html をブラウザで開けば、見た目も機能も一新されたリアルな電卓アプリが完成しているはずです！
実際に操作して、様々な計算を試してみてください。例えば、「（8-3）☓ 5 = 25」のような括弧を含む計算や、複数の演算子を組み合わせた計算も（eval を使用している場合）正しく行えるはずです。
（8-3）☓ 5 = 25
3項以上で足し算と掛け算など複数の計算を組み合わせた計算が可能なことも確認できました。
また、意図しない入力（例えば演算子が連続するなど）や、0での除算など、計算できない式を入力した場合に「エラー」と表示されることも確認しましょう。
これにより、アプリケーションが予期せぬ状況にもある程度対応できていることがわかります。
これで、見た目も機能もより本格的な電卓アプリが完成しました。CSSによるスタイリングと、それに応じたHTML構造およびTypeScriptのロジック変更が、アプリケーションの使い勝手や印象を大きく向上させることを体験できたでしょう。
まとめ
今回の記事では、基本的なプログラミング技術である switch 文、parseFloat、関数分割を活用し、見た目も機能も本格的な電卓アプリを作成しました。
HTML、CSS、TypeScriptが連携することで、シンプルなコードから実用的なWebアプリへと発展していく流れを体験できたと思います。
ぜひ、今回学んだ内容を応用して、より高度なアプリ開発にもチャレンジしてみてください。
第５回では、外部APIを活用した天気表示アプリを作成していきます。ぜひそちらもご覧ください。
コメント