【JavaScript】通貨変換アプリを作ってみた

※Fetch API を使って、通貨のレート情報を取得し他の通貨に変換します。

完成図

codesandbox.io

fetch とは

日本語で、取ってくる、呼んでくる、(行って)取ってくる、連れてくるという意味です。
JavaScriptのfetchメソッドは、非同期通信でリクエストを発行、そのレスポンスを取得ができるようになります。
つまりサーバー上にある情報を取得（fetch）することができます。

fetch API とは

まずAPIとは、アプリケーションプログラミングインタフェース（API、英: Application Programming Interface）の略で、ソフトウェアの一部を公開して、他のソフトウェアと機能を共有できるようにしたものです。
このAPIを活用すると例えば、Google、Facebook、TwitterなどのAPIキーを取得して、１から会員登録のシステムを作らなくてもよくなります。
fetch APIを利用することで、このような外部のデータ取得することが可能になります。

具体的な使用例

技術情報共有サービスQiitaもAPIを使用しています。

実際にfetch API を使った箇所の解説

外貨レートをサーバー上にあるデータから取得しました。

  fetch(`https://api.exchangerate-api.com/v4/latest/${currency_one}`)
  .then(res => res.json())
  .then(data => {

    const rate = data.rates[currency_two];
    rateElement.innerText = ` 1 ${currency_one} = ${rate} ${currency_two}`;
    amountElement_two.value = (amountElement_one.value * rate).toFixed(2);
  });

fetch()

サーバー上にあるデータを取得する。
※URLの最後に${}を使用しているのは、URLの最後が"USD" "JPY"などの通貨表記となっているため

.then(res => res.json())

jsonファイルを取得する。
※.thenと記述することでfetchが返すPromiseオブジェクトにより、データ取得が終わった後に実行される。

.then(data => { const rate = data.rates[currency_two];

dataを使用した処理を実行する。
※.thenと記述することでjsonメソッドが返すPromiseオブジェクトにより、JSONとして解釈が終わった後に実行される。

フロントエンド育成所のもりけん塾に参加しています。

大変お世話になっている、もりけん塾を運営している森田賢二さんのブログ

kenjimorita.jp

もりけん塾のTwitter

twitter.com