ジェネレータ関数を使ってnice-color-palettesライブラリのjsonファイルをfetchしてみよう

こんにちわ。nap5です。

ジェネレータ関数を使ってnice-color-palettesライブラリのjsonファイルをfetchするやり方を紹介したいと思います。

ジェネレータ関数とはについては以下のリンクが参考になります。

yield - JavaScript | MDN

以前、少し触れていました。

fetchするURLは好きなエンドポイントをチョイスして試されてもいいです。

今回は便利そうだなと思ったnice-color-palettesライブラリのjsonファイルをfetchしてみることにしました。

nice-color-palettesライブラリについてはこちらです。

GitHub - Jam3/nice-color-palettes: nice colour palettes as JSON

今回はユースケースとしてN件ずつ取得することを想定します。

このユースケースを達成するためにはfrom,toでデータを管理するとハンディになります。

これをジェネレータ関数で実現したものが以下になります。

function* doBebop(from = 1, index, step, max) {
  step = step - 1;
  while (index < max) {
    index = index + step + 1;
    yield { from, to: index };
    from = index + 1;
  }
}
(() => {
  const iterator = doBebop(1, 0, 3, 10);
  console.log(iterator.next());
  console.log(iterator.next());
  console.log(iterator.next());
  console.log(iterator.next());
  console.log(iterator.next());
})();

実行結果はこちらになります。

$ time node index.js
{ value: { from: 1, to: 3 }, done: false }
{ value: { from: 4, to: 6 }, done: false }
{ value: { from: 7, to: 9 }, done: false }
{ value: { from: 10, to: 12 }, done: false }
{ value: undefined, done: true }

real    0m0.071s
user    0m0.051s
sys     0m0.021s

最後の実行により、4回目の実行で最大閾値の10を超えるので、5回目の実行ではundefinedが返ってきます。

それではこのデータをfetchに応用していきます。

以下が応用したプログラムになります。N件ずつ取得する実装になります。

import "isomorphic-fetch";

const doFetch = ({ url }) => {
  return new Promise(async (resolve, reject) => {
    try {
      const response = await fetch(url);
      const json = await response.json();
      resolve(json);
    } catch (error) {
      reject(error);
    }
  });
};

function* doBebop(from = 1, index, step, max) {
  step = step - 1;
  while (index < max) {
    index = index + step + 1;
    yield { from, to: index };
    from = index + 1;
  }
}

const doRequest = ({ info }) => {
  const { value, done } = info;
  if (done) {
    return Promise.resolve([]);
  }
  const { from, to } = value;
  return new Promise(async (resolve, reject) => {
    try {
      const response = await doFetch({
        url: `https://unpkg.com/nice-color-palettes@3.0.0/100.json`,
      });
      resolve(response.slice(from - 1, to));
    } catch (error) {
      reject(error);
    }
  });
};

(async () => {
  const iterator = doBebop(1, 0, 3, 10);
  let result = await doRequest({ info: iterator.next() });
  console.log(result);
  result = await doRequest({ info: iterator.next() });
  console.log(result);
  result = await doRequest({ info: iterator.next() });
  console.log(result);
  result = await doRequest({ info: iterator.next() });
  console.log(result);
  result = await doRequest({ info: iterator.next() });
  console.log(result);
})();

実行結果はこちらになります。

$ time node index.js
[
  [ '#69d2e7', '#a7dbd8', '#e0e4cc', '#f38630', '#fa6900' ],
  [ '#fe4365', '#fc9d9a', '#f9cdad', '#c8c8a9', '#83af9b' ],
  [ '#ecd078', '#d95b43', '#c02942', '#542437', '#53777a' ]
]
[
  [ '#556270', '#4ecdc4', '#c7f464', '#ff6b6b', '#c44d58' ],
  [ '#774f38', '#e08e79', '#f1d4af', '#ece5ce', '#c5e0dc' ],
  [ '#e8ddcb', '#cdb380', '#036564', '#033649', '#031634' ]
]
[
  [ '#490a3d', '#bd1550', '#e97f02', '#f8ca00', '#8a9b0f' ],
  [ '#594f4f', '#547980', '#45ada8', '#9de0ad', '#e5fcc2' ],
  [ '#00a0b0', '#6a4a3c', '#cc333f', '#eb6841', '#edc951' ]
]
[
  [ '#e94e77', '#d68189', '#c6a49a', '#c6e5d9', '#f4ead5' ],
  [ '#3fb8af', '#7fc7af', '#dad8a7', '#ff9e9d', '#ff3d7f' ],
  [ '#d9ceb2', '#948c75', '#d5ded9', '#7a6a53', '#99b2b7' ]
]
[]

real    0m0.838s
user    0m0.235s
sys     0m0.029s

5回目の実行で空配列[]が返ってきているのはfetchに応用する前の理屈と同じです。

最近では、Twitterでモックアップ動画を公開しているので、こちらもよかったら、覗いてみてください。

Tweets by napzak5

最後に、Udemyでコースを公開しました。
良かったら覗いてみてください。

FaunaDBを使用したRSSキュレーションミニシステムの構築

また、コースの内容紹介記事は以下になります。

簡単ですが、以上です。