目次
ドルの価格表記に円表記を併記する方法
Webサイトでドルの価格表記に円表記を併記したいことがあります。
例えば、「Tシャツ 29ドル(約4500円)」みたいなケースです。
ドル表記だけだと日本円でいくらなのかわかりにくいので、日本人向けのWebサイトだと円表記も併記されていることがあります。
しかし、ドル円の為替は常に変動しているため、Webページに29ドル(約4500円)と記載しても数日後や数カ月後も同じとは限りません。
そのため、WebサイトによってはJavaScriptで閲覧時のドル円の為替の情報を取得して、ドルを円にしたときの価格を自動的に表記できるようにしたほうが良いケースが多いです。
exchangeratesのAPIだと無料で使用できないので注意
exchangeratesという為替情報を取得できる有名なAPIが存在します。
Google検索やChatGPTなどでドル円の為替を取得するためのAPIを調べるとexchangeratesの情報が表示されることが多いですが、exchangeratesは有料版でないとドル円の為替情報を取得できません。
そのため、無料で使用したい方は次項で説明するGoogleスプレッドシートを利用してJavaScriptでドル円の為替の値を取得する方法で実装してください。
Googleスプレッドシートでドル円の為替情報を取得する
Googleスプレッドシートでは「=GOOGLEFINANCE("CURRENCY:USDJPY")」を使用すると1ドルの円の為替レートを取得できるので、ドル円の為替レートをJavaScriptで取得すればドル表記に円を併記できます。
やり方はまずA1セルに「=GOOGLEFINANCE("CURRENCY:USDJPY")」を追加して1ドルの円の為替レートが表示されるようにします。
次に共有設定を「リンクを知っている全員」に変更します。
「リンクを知っている全員」に変更するとJavaScriptで外部のWebサイトからセルの値を取得可能になります。
JavaScriptでドル円のレートを取得して円を併記する
JavaScriptでドル円のレートを取得するには以下の関数を使用します。
Googleスプレッドシートは以下のように「/export?format=csv&gid=0`」が語尾に付いているとCSV形式で出力できます。
async function fetchFromCsv(sheetId) {
const url = `https://docs.google.com/spreadsheets/d/${sheetId}/export?format=csv&gid=0`
const res = await fetch(url)
if (!res.ok) throw new Error('読み込み失敗！')
const text = await res.text()
return text
}sheetIdはURLの長いランダムの英数字の部分です。
https://docs.google.com/spreadsheets/d/1hk-Fb9vMwslZZ5F9YyqZB5789xIw9GX7503PjgeHRqw/edit?gid=0#gid=0
ドルに円を併記したい部分はspanタグで囲ってdata-usd属性を付けます。
<p>商品A: <span data-usd>10ドル</span></p>
<p>商品B: <span data-usd>$123</span></p>これで画面上に「10ドル (約1,575円)」や「$123 (約19,376円)」のようにドルに日本円を自動で併記できます。
JavaScriptでドルに日本円を自動で併記する処理は以下のようになります。
(async () => {
try {
const sheetId = '1hk-Fb9vMwslZZ5F9YyqZB5789xIw9GX7503PjgeHRqw'
const rateString = await fetchFromCsv(sheetId)
const usdToJpyRate = Number(rateString)
const priceElements = document.querySelectorAll('[data-usd]')
priceElements.forEach((element) => {
const originalText = element.textContent?.trim() ?? ''
const usdValue = parseFloat(originalText.replace(/[^0-9.]/g, ''))
const yenValue = Math.round(usdValue * usdToJpyRate)
const formattedYen = yenValue.toLocaleString('ja-JP')
element.textContent = `${originalText} (約${formattedYen}円)`
})
} catch (error) {
console.error('ドル円に変換できませんでした。: ', error)
}
})()- ドル円のレートを取得する
- data-usd属性が付いている要素のドルの数値を取得する
- ドルに円を併記する
…という処理になっていることがコードから確認できます。
実際に動作するサンプルも作成してあるので、実際に確認してみてください。
ちなみにドル円ではなく円ドルの為替の場合は、「=GOOGLEFINANCE("CURRENCY:JPYUSD")」で取得できます。
ユーロ円は「=GOOGLEFINANCE("CURRENCY:EURJPY")」となっており、他国の通貨でもGOOGLEFINANCEの引数の値を変えれば対応可能です。
