プログラミング初心者の方で「API連携を学んでみたいけれど難しそう」と感じていませんか？
この記事では、100日チャレンジの Day08 として開発した 為替レート変換アプリ を紹介します。
通貨ペアを入力すると最新のレートを取得して換算できるシンプルなWebアプリです。
HTML・CSS・JavaScriptだけで実装でき、GitHub Pagesを使えば誰でも公開可能。副業やポートフォリオ作成にも役立ちます。
アプリの概要
今回作成した「為替レート変換アプリ」では、以下のことができます。
- 通貨の組み合わせを選択（例：USD → JPY）
- 金額を入力すると、最新のレートで自動換算
- 結果を即時表示して利用可能
- データは無料API（exchangerate.host）から取得
「シンプルに動くこと」を優先したので、初心者でも迷わず実装できます。
👉 実際に公開したアプリはこちらから試せます：
為替レート変換アプリ — GitHub Pages
学習のポイント
このアプリを通じて学べる技術的テーマは次のとおりです。
1. 外部APIの利用
JavaScriptの fetch() を使って外部APIにリクエストを送り、JSON形式のレスポンスを受け取ります。
「外部のサービスからデータを取得して使う」という体験は、Webアプリ開発で非常に重要です。
※ APIを使った別の例としては Day05｜天気予報アプリ開発で学ぶAPI連携の基礎 も参考になります。
2. 状態管理の基礎
入力された金額・選択された通貨ペア・APIからのレート。この3つの情報を組み合わせて計算し、結果を表示します。
これにより「アプリ内部でどのように状態を管理するか」を体験できます。
3. エラーハンドリング
APIが失敗した場合や通信が不安定な場合に「エラーが発生しました」と表示する仕組みを入れています。
初心者はつい見落としがちなポイントですが、実用的なアプリには欠かせません。
4. UI設計
- 入力フォーム
- 通貨選択セレクトボックス
- 結果表示エリア
このように役割を分けて設計することで、コードの見通しが良くなります。
5. セキュリティの観点
無料APIを利用する場合、APIキーを必要としないサービスを選ぶことが安全です。
今回は exchangerate.host を利用したため、キー管理の複雑さを避けつつ学習できます。
実装ステップ
初心者がつまずきやすい部分も踏まえながら、実装の流れを整理します。
1. HTML
- 金額を入力する
<input> - 通貨を選ぶ
<select> - 結果を表示する
<div>
といった基本要素を準備します。
2. CSS
レスポンシブデザインを意識し、スマートフォンでも見やすいUIを実装。
シンプルに「背景・ボタン・テキストの見やすさ」を整えることがポイントです。
3. JavaScript
- fetch()でAPIからデータを取得
- JSONをパースしてレートを取り出す
- 入力金額にレートを掛けて換算結果を計算
- HTML要素に表示
わずか数十行のコードでも「リアルタイムに動くアプリ」になります。
数値処理に慣れるためには Day06｜単位変換アプリ開発で学ぶ数値計算と条件分岐 も合わせて読むと理解が深まります。
4. GitHub Pages公開
完成した index.html をリポジトリに追加し、GitHub Pages を有効化すれば誰でもアクセス可能になります。
自分の学習成果を「公開できる形」にすることは、副業やポートフォリオにとって大きな価値があります。
アプリのデモ
動作確認ポイント：
- 入力額を変えるとすぐに結果が更新される
- 通貨ペアを切り替えると換算額が変わる
- ネットワークが切断されるとエラーメッセージが出る
プログラミング学習の広がり
このアプリは、これまでに作成したアプリとの関連性も高く、学びの積み上げを実感できます。
学習の流れをまとめて確認したい方は Day01〜Day07振り返りまとめ記事 をどうぞ。
- Day05（天気予報アプリ）：同じく外部APIを利用して情報を取得
- Day06（単位変換アプリ）：数値計算を中心にした内部処理
- Day07（ストップウォッチ）：setIntervalなど時間制御を学習
Day08はその延長として「外部データを使った実用アプリ」という新しい体験を追加できました。
将来的な応用としては、
- 通貨一覧の自動取得
- 複数通貨の同時換算
- 過去レートをグラフで表示
といった拡張も可能です。
まとめ
プログラミング初心者にとって、外部APIを使った開発は「一段上のステップ」と感じがちですが、為替レート変換アプリのようなシンプルな仕組みであれば十分に挑戦できます。
- 学習メリット：fetch()・JSON処理・状態管理・UI設計を一度に体験
- 実用メリット：普段の生活や副業ブログでも役立つアプリを公開可能
- 副業メリット：ポートフォリオや教材化に発展しやすいテーマ
ぜひこの記事を参考に、自分の環境で為替レート変換アプリを作ってみてください。
「作って公開する」経験が、あなたのプログラミング学習と副業の第一歩を後押しします。
