async awaitのサンプル例～webpack使用～

MAGAZINE

: Twitter

: Facebook

KEYWORDS: Javascript webpack

WEB

今までJavascriptのasync / awaitの使い方が不明瞭だったので勉強を兼ねてサンプルを作りました。

今回はオブジェクトが右側に移動し、その後文字が書き換わるように設定しました。

サンプルHTML

<div style="overflow: hidden">
  <div class="object">tset</div>
</div>

</div>

サンプルJS

動作させるオブジェクトを指定

var object = document.querySelector('.object')

1	var object = document.querySelector('.object')

指定オブジェクトを移動させる関数

  function move() {
    return new Promise((resolve, reject) => {
      var player = object.animate([
        {transform: 'translate(0)'},
        {transform: 'translate(90vw, 0)'}
      ], 1500);
      resolve(player)
    })
  }

function move() {

return new Promise((resolve, reject) => {

var player = object.animate([

{transform: 'translate(0)'},

{transform: 'translate(90vw, 0)'}

], 1500);

resolve(player)

})

}

指定したオブジェクトの終了時の場所を指定する関数

  function finish() {
    return new Promise((resolve, reject) => {
      var moveend = object.style.transform = "translate(90vw, 0)"
      setTimeout(() => {
        resolve(moveend)
      }, 1700)
    })
  }

function finish() {

return new Promise((resolve, reject) => {

var moveend = object.style.transform = "translate(90vw, 0)"

setTimeout(() => {

resolve(moveend)

}, 1700)

})

}

指定したオブジェクトの文字を変更する関数

  function rename() {
    return new Promise((resolve, reject) => {
      resolve(object.innerText='移動が完了')
    })
  }

function rename() {

return new Promise((resolve, reject) => {

resolve(object.innerText='移動が完了')

})

}

3つの関数を順番に実行させるasyncファンクション

  async function myfuncA() {
    await move()
    await finish()
    await rename()
  }

async function myfuncA() {

await move()

await finish()

await rename()

}

functionを実行

  myfuncA();

1	myfuncA();

発生したエラー

[regeneratorRuntime is not defined]
このエラーが出た場合、下記の方法で対応が可能でした

@babel/polyfillをインストール

yarn add @babel/polyfill

1	yarn add @babel/polyfill

webpack.config.jsのentryに書き加える

entry: ['@babel/polyfill', './js/○○○.js']

1	entry: ['@babel/polyfill', './js/○○○.js']

このentryは、自分のエントリーファイルに合わせて適宜調整してください

YAS

2011年よりweb制作に従事。現在は主にWordpressによるサイト制作の他、DNS切替時や、サーバー移管時の各種トラブル解決を行っています。