お菓子様がお菓子辞典からピックアップするで～ #codepen #HTML

やはりお菓子は素敵

以前LINE Botでお菓子ガチャを作成したが、キーワードでピックアップする仕様のため、「チョコレート」で引いてもお煎餅のチョコ味等が出てくる事が…。（チョコ掛けの柿の種も美味しいけどね）

なので、例えばチョコだけのピックアップが出来れば、甘いものだけを眺めたいときにより活用できるはず！
しかも、今回はWEBアプリにしたので、お菓子が登録された年度も指定できるようバージョンアップ！！
「この年にはこんなお菓子があったのね～」と懐かしみつつ、お菓子ライフを楽しみましょう！

お菓子辞典できました

お菓子様に辞典を引いてもらえる仕様にしました。

こんな感じで引いてくれます

作り方

使用環境

・CodePen
・Netlify
・背景
　→使い方
・お菓子の虜API

プログラム

CodePenのリンクを付ければプログラムが載るので便利

See the Pen
お菓子 by IshikawaIkumi (@ishikawaikumi)
on CodePen.

APIが通らない事件

LINE Botと同じお菓子の虜APIを使用しているのだが、今回まったくAPIが通らない問題が発生。
どうやら、CORSエラーというものが発生していたようで、axiosが叩くAPIのURLの前にプロキシサーバーのURLを付ける形で無事取得できるようになりました。

画面上に入力した西暦年をJavaScriptで使いたい

任意の西暦年を入力したら、その値をAPIの抽出条件に入れたところ、うまく数字が取れない…。
console.logだと値が表示されるのに、URLに組み込むと年部分が「object HTMLInputElement」と表示されてしまう。
どうやら、画面の入力エリアに値を入れると文字型と認識されるため、数字に変換する必要があるとのこと。

変数「year」に画面の入力エリアに入れた値を一度格納し、文字型を数字に変換する「Number();」を使用して、数字として認識してもらえるよう変換して使用しました。

    //画面上の西暦情報を取得
    let year = document.getElementById('Y').value;
    year = Number(year);

最後に

当初、地域ごとの限定お菓子をピックアップする作りを考えていましたが、APIでのデータ抽出条件に地域コードが入っていなかったため、急遽お菓子のジャンルごとに仕様を変更しました。
APIも奥深く、環境によってプロキシサーバーを使用しないと取得できなくなるケースもある事を学んだので、今後の活用の参考になりました。