tubone

tubone

Boyaki makes a new world


 Recent posts  6 / 77

MayJunJulAugSepJetson Nanoを触る報告 ~立派なタワーPCみたいだろ? 小型なんだぜ?~tiny_yolov2_onnx_camを使って物体検知するJetson nano + SainSmart IMX219でアニメ風自撮り動画を作るStyleGANとStyleGAN2を使って美少女キャラを無限増殖させるRaspberry PIを使って植物の水やり監視システムを作る2020年のデスクトップはこれだ!かっこいいあつもりを始めてしまいましたクロスルート証明書について考えてみるReact Iframeを使ってPortfolioサイトにSoundCloudのメディアプレーヤーをつけるGitHub ProfileにREADMEをつけよう!Arctic Code Vault Contributorになったらしい4連休を使ってGASとLINE BOTとFirebaseを使ってラーメン食べたいBOTを作ってみたGitHub JavaScript Action で GitHub ReleaseのUpdate Releaseを作ってみた。MonWedFri
GitHub JavaScript Action で GitHub ReleaseのUpdate Releaseを作ってみた。4連休を使ってGASとLINE BOTとFirebaseを使ってラーメン食べたいBOTを作ってみたArctic Code Vault ContributorになったらしいGitHub ProfileにREADMEをつけよう!React Iframeを使ってPortfolioサイトにSoundCloudのメディアプレーヤーをつけるクロスルート証明書について考えてみる


 WordCloud

wordCloud

 SearchBox

Search your interesting by Algolia in this blog.


この記事は51文字約4分で読めます

前回の続きです。

前回Nuxt.jsのmodulesをCompositionAPIで使ってみる(@nuxtjs/toast編) ではNuxt.jsのmodulesを使ってtoastを出してみました。

ただ、前回の実装だとどこからともなく

特に再利用もしてないし、共通処理も定義してないからpluginsとか使ってあげれば、modulesじゃなくていいんじゃないんですかねぇ

という声が聞こえてきそうです。

いやはやその通りだとは思いますのでmodulesのもう一つの魅力、global optionsの実装を進めようかと思います。

Table of Contents

toastのoption問題

toastを使う際にはtoastを出す場所(position), toastをひっこめるまでの時間(duration)、色合いなどをtoastを呼び出す際に設定しますが・・・。

const doDownload = async (filePath: string): Promise<void> => {
  const options = {    position: 'top-center',    duration: 2000,    fullWidth: true,    type: 'error',  } as any;  try{
    const blob = await downloadPDF(filePath);
    const link = document.createElement('a');
    link.href = window.URL.createObjectURL(blob);
    link.download = 'result.pdf';
    link.click();
  } catch (e) {
    if (e instanceof PdfFileNotFoundError) {
      toast.show('No File!!', options)    } else {
      toast.show('UnknownError!!', options)
    }
  }
}

コードの見通しが悪いですね・・。

同じような設定を複数のtoastにoptionsで設定するのはめんどくさい・・。

modules global optionを使ってみる

では、こちらを改善していきます。

@nuxtjs/toastにはglobal optionsの機能があります。

//nuxt.config.ts

  modules: [
    '@nuxtjs/toast',
  ],
  toast: {
    position: 'top-center',
    duration: 2000,
    fullWidth: true,
    iconPack : 'material',

  },

このようにmodules@nuxtjs/toastを読み込んだ後、toast共通設定を入れます。

たったこれだけ簡単!

もっと見通しをよくしたい。registerを使おう

さらにコードの見通しをよくしたければ、registerという機能を使うことができます。

たとえば致命的なエラーの時は共通のメッセージを出すtoastを各コンポーネントに量産しなければならない場合など、コードのコピペはしんどいしメンテナンスもよくないのでこいつが便利です。

//nuxt.config.ts

  modules: [
    '@nuxtjs/toast',
  ],
  toast: {
    position: 'top-center',
    duration: 2000,
    fullWidth: true,
    iconPack : 'material',
    register: [      {        name: 'nofileError',        message: 'No File!!',        options: {          type: 'info',        },      },      {        name: 'unknownError', //toast名: 利用するときに使う名前        message: 'UnknownError!!', //toastのmessage        options: {          type: 'error', //個別に設定したいオプションがあれば        },      },
    ],
  },

とtoastの情報を登録しておくことにより利用側で

const doDownload = async (filePath: string): Promise<void> => {
  try{
    const blob = await downloadPDF(filePath);
    const link = document.createElement('a');
    link.href = window.URL.createObjectURL(blob);
    link.download = 'result.pdf';
    link.click();
  } catch (e) {
    if (e instanceof PdfFileNotFoundError) {
      toast.global.nofileError(); //呼び出し    } else {
      toast.global.unknownError(); //呼び出し
    }
  }
};

とtoastのインスタンスに対してglobal.nameと宣言するだけで使えちゃいます!!

img

当然、見た目は同じですね。

結論

modulesのglobal optionsをつかうことによりコードの見通しが良くなった気がします。

˚