MENU

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

f:id:ami_webdev:20210221201618p:plain

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

完成図

codesandbox.io

fetch とは

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

fetch API とは

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

具体的な使用例

f:id:ami_webdev:20210221192407p:plain
技術情報共有サービス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

【JavaScript】JSONデータをエンコード、デコードする

f:id:ami_webdev:20210221174254p:plain

ときどきJSONというのを聞くけど、今までちゃんと使うことがなかったので、そのままにしていたけど、今やっているUdemyのJavaScriptのコースでついに登場したのでここにまとめます。理解するのにちょっと時間がかかってしまった。

JSONとは

JavaScript Object Notationの略でデータ形式(データフォーマット)の一種。
データを扱うときは、
①誰がみてもわかりやすい
②機械が判別してくれる
この2点のために、ルール(形式)が作られる必要がある。
JSONはそのルールの一つ。

JSONの形式はこんな

{
    "user": "太郎",
    "age": 23,
    "gender": "男"
}

オブジェクトのデータ構造をしている。

"user"は、keyと呼ぶ。
"太郎"は、valueと呼ぶ。
※ちなみに基本的にこのようにkeyとvalueが一つのセットになって扱われる概念はKVS(Key-Value Store)と呼ばれる。

エンコードする

まずエンコードするとは、データを別の形式に変換すること。
JSONの場合、JavaScriptのオブジェクトのように記述するが、中身のデータ形式文字列

そのため、JSONファイルを読み込んでもただの文字列なのでオブジェクトのように扱えない。
よってエンコードすることによって、JavaScriptのオブジェクトとして使えるようになる。

デコードする

デコードは、エンコードされたものを元の形式に戻すこと。
JSON場合、オブジェクトにエンコードされたものを文字列に戻すことが、デコードということになる。

実際にJSONエンコードする

JSON.stringifyを使う。

let json = '{"ID": 1,"name": "user01","gender": "women"}'
console.log(typeof(json))
 
let encoded_json = JSON.parse(json)
console.log(typeof(encoded_json))
 
let decoded_json = JSON.stringify(encoded_json)
console.log(typeof(decoded_json))
1. string
2. object
3. string

次は実際にJSONをでデコードする

JSON.parseを使う。

let json_s = '{"ID": 1,"name": "user01","gender": "women"}'
console.log(typeof(json_s))
 
let json_o = JSON.parse(json_s)
console.log(typeof(json_o))
console.log(json_o.ID)
1. string
2. object
3. 1

JSONときくと苦手レーダーがビビビ!となる不思議現象が起きていたのですが、これで少し一歩前進した気がします!



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

もりけん塾を運営している森田賢二さんのブログ

kenjimorita.jp


もりけん塾のTwitter

twitter.com

【JavaScript】Promiseをつかった非同期処理② ローディング画面読み込み

f:id:ami_webdev:20210221174254p:plain

ローディング画像を初めに表示。その後Promiseを使ってデータを3秒後に表示し、ローディング画像を消す実装です。



  <body>
    <div>
      <ul id="list">
        <div id="loading">
          <img src="img/loading.gif"/>
        </div>
      </ul>
    </div>
    <script>
      const ul = document.getElementById("list");
      const div = document.getElementById("loading");
      const promise = new Promise((resolve, reject) => {
        setTimeout(() => {
          resolve([
            {
              to: "bookmark.html",
              img: "img/1.png",
              alt: "画像1",
              text: "ブックマーク"
            },
            {
              to: "message.html",
              img: "img/2.png",
              alt: "画像2",
              text: "メッセージ"
            }
          ]);
        }, 3000);
      });

      promise.then((arr) => {
      // forEachで要素を取り出す
        arr.forEach((e) => {
          const a = document.createElement("a");
          const img = document.createElement("img");
          const li = document.createElement("li");

          a.href = e.to;
          // imgタグのsrc属性にimgプロパティを代入
          img.src = e.img;
          // imgタグのalt属性にaltプロパティを代入
          img.alt = e.alt;
          a.textContent = e.text;

         // 親要素に子要素を追加( ul > li > a > img )
          ul.appendChild(li);
          li.appendChild(a);
          a.appendChild(img);
        });
  // ローディング画像を消す
        loading.style.display = "none";
      });
    </script>
  </body>

MDN
Promise.prototype.then() - JavaScript | MDN


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

もりけん塾を運営している森田賢二さんのブログ

kenjimorita.jp


もりけん塾のTwitter

twitter.com

【JavaScript】Promiseをつかった非同期処理①

f:id:ami_webdev:20210221174254p:plain

非同期処理とは・・・

非同期処理とは、ある処理が実行されてから終わるまで待たずに、次に控えている別の処理を行うこと。

例えば

1秒待って次の処理をして1秒待って次の処理をして...というふうにタイミングを合わせて動作して欲しい時

setTimeout(() => console.log(5), 1000);
setTimeout(() => console.log(4), 1000);
setTimeout(() => console.log(3), 1000);
setTimeout(() => console.log(2), 1000);
setTimeout(() => console.log(1), 1000);
setTimeout(() => console.log(0), 1000);


※この処理は、1秒待って次の処理をして1秒待って次の処理をして...というふうには動作してくれない。

前の処理の完了を待たずに、次の行が実行されてしまう。
→ これが非同期処理


反対に、前の処理の完了を待ってタイミングを合わせて動作してくれる。
→ これが同期的な処理

同期的な処理をしてもらうためにすること

setTimeout()でカウントダウンを実装する。
ただし以下のようなコールバック関数地獄を避ける。
とても見辛い。

setTimeout(() => {
    console.log(5);
    setTimeout(() => {
        console.log(4);
        setTimeout(() => {
            console.log(3);
            setTimeout(() => {
                console.log(2);
                setTimeout(() => {
                    console.log(1);
                    setTimeout(() => {
                        console.log(0);
                    }, 1000);
                }, 1000);
            }, 1000);
        }, 1000);
    }, 1000);
}, 1000);

このようなコールバック関数地獄を避けるためにPromiseasync/awaitをつかう。
Promiseは処理が実行中の処理を監視し、処理が問題なく完了すればresolve、反対に問題があればrejectを呼び出してメッセージを表示する。

new Promise(resolve => {
    setTimeout(() => {
        console.log(5);
        resolve();
    }, 1000);
})
    .then(() => {
        return new Promise(resolve => {
            setTimeout(() => {
                console.log(4);
                resolve();
            }, 1000);
        });
    })
    .then(() => {
        return new Promise(resolve => {
            setTimeout(() => {
                console.log(3);
                resolve();
            }, 1000);
        });
    })
   .then(() => {
        return new Promise(resolve => {
            setTimeout(() => {
                console.log(2);
                resolve();
            }, 1000);
        });
    })
    .then(() => {
        return new Promise(resolve => {
            setTimeout(() => {
                console.log(1);
                resolve();
            }, 1000);
        });
    })
    .then(() => {
        setTimeout(() => {
            console.log(0);
        }, 1000);
    });


→ もっとスッキリ書きたい。

const promiseMaker = num => {
    return new Promise(resolve => {
        setTimeout(() => {
            console.log(num);
            resolve();
        }, 1000);
    });
};

promiseMaker(5)
    .then(() => promiseMaker(4))
    .then(() => promiseMaker(3))
    .then(() => promiseMaker(2))
    .then(() => promiseMaker(1))
    .then(() => promiseMaker(0));

だいぶすっきりする。


めちゃめちゃわかりやすい
参考資料:
qiita.com



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

もりけん塾を運営している森田賢二さんのブログ

kenjimorita.jp


もりけん塾のTwitter

twitter.com

【JavaScript】HTMLのliタグimgタグaタグをJavaScriptで作成

f:id:ami_webdev:20210221174223p:plain

もりけん塾にて課題を出していただきました。
今回はHTMLのliタグimgタグaタグをJavaScriptを使ってつくりました。

完成図

f:id:ami_webdev:20201023005410p:plain

こちらをJavaScriptで作成します。

<ul>
   <li><a href="a1.html"><img src="1.png">a1</a></li>
   <li><a href="a2.html"><img src="2.png">a2</a></li>
</ul>


HTML → JavaScript

  <body>
    <div>
      <ul id="list"></ul>
    </div>
    <script>
      let ul = document.getElementById("list");

      const items = [
        { href: "a1", text: "a1", src: "img/1.png" },
        { href: "a2", text: "a2", src: "img/2.png" }
      ];

      items.forEach((e) => {
        // <li></li>
        let li = document.createElement("li");
        // <a></a>
        let anchor = document.createElement("a");
        // <img>
        let image = document.createElement("img");

        // 変数eのプロパティをそれぞれ各属性(li, a img)に代入
        anchor.href = e.href;
        // aタグに文字
        anchor.textContent = e.text;
        image.src = e.src;

        //親ノード(ul要素)に子ノードリストの末尾へノード(li要素)を追加
        ul.appendChild(li);
        li.appendChild(anchor);
        anchor.appendChild(image);
      });
    </script>
  </body>


HTMLにタグを書くのは短く簡単ですが、
JavaScriptで書くとなると長く結構長くなりました。




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

もりけん塾を運営している森田賢二さんのブログ

kenjimorita.jp


もりけん塾のTwitter

twitter.com

CSSのviewpointを基準としたvh、vw、vmin、vmax

f:id:ami_webdev:20210221174006p:plain

Javascriptでホームページを作っていた際に、vh vw vmin vmaxが出てきたのでここにメモ。

vh、vw、vmin、vmaxとは

px、%などで値を調節せずviewpointを基準とした単位。

  • Viewport Height(vh):viewportの高さに基づく。1vhはviewportの高さの1%に相当する
  • Viewport Width(vw):viewportの幅に基づく。1vwはviewportの幅の1%に相当する
  • Viewport Minimum(vmin):viewportの(高さと幅のうち)小さいほうの寸法に基づく。viewportの高さが幅より小さい場合、1vminはviewportの高さの1%に相当する。同様にviewportの幅が高さより小さい場合、1vminはviewportの幅の1%に相当する
  • Viewport Maximum(vmax):viewportの(高さと幅のうち)大きいほうの寸法に基づく。viewportの高さが幅より大きい場合、1vmaxはviewportの高さの1%に相当する。同様にviewportの幅が高さより大きい場合、1vmaxはviewportの幅の1%に相当する

例えば

  • viewportの幅が1200px、高さが1000pxの場合、10vwは120px、10vhは100pxとなる。このviewportでは幅のほうが高さより大きいため10vmaxは120px、10vminは100pxとなる。
  • viewportの幅が1000px、高さが1200pxになると、10vhは120px、10vwは100pxとなる。10vmaxは大きいほうのviewportの値に基づいて決定されるので120pxのままである。同様に10vminも100pxのままである

ブラウザーウィンドウのサイズを変更してviewportの幅を1000px、高さを800pxにすると、10vhは80px、10vwは100pxとなる。同様に10vmaxは100px、10vminは80pxとなる

注意

  • Viewport単位は%指定と同じではない。

%指定の場合、子要素の幅や高さは親要素の幅や高さに対して決定される。

  • ルート要素のoverflowプロパティがautoに設定されていると、ブラウザーはスクロールバーが存在しないものと解釈するため、要素の幅を設定するときは慎重に。autoに設定されていると要素の幅が期待よりわずかに広くなる。
フロントエンド育成所のもりけん塾に参加しています。


もりけん塾を運営している森田賢二さんのブログ

kenjimorita.jp


もりけん塾のTwitter

twitter.com

今後の就職までの大体のスケジュール(目標)

本日もりけん塾のもりけんさんに今後の勉強や就職に向けてのスケジュールについて、相談させていただきました。

2021年4月にWEB業界へ転職することを目指して、動いていきます。

◎スケジュール

10/17 現在〜11月

働いてみたい企業を探して、そこで求められている技術を知る。
その技術を習得する。

12月〜1月末

上記技術を習得しながら、合わせてWEB制作活動に力を入れる。

2月〜3月

就職活動。

4月

転職先決定。働く(切望)。



そんなとんとん拍子に進むかは、わかりませんが、前向きに頑張ります。



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

もりけん塾を運営している森田賢二さんのブログ

kenjimorita.jp


もりけん塾のTwitter

twitter.com