async/awaitを使った非同期処理を使ってみた。

はじめに

先月初めてのハッカソンに参加し、ガチャ機能付きの簡単なゲームを制作した際に、一定時間経過したらその処理を終わり次の処理を行うという「非同期処理」について理解できておらず、結果ゴリ押しでコードを書くことになってしまったので、今回は非同期処理について勉強しました。

async/await

関数の前にasyncをつけると非同期関数にしてくれるという非常に便利なものです。
今回はHTML、CSS、JavaScriptを使って非同期関数をなるほどこれが非同期処理か！ってなるものを作っていきたいと思います。

実際に書いてみる

まずは非同期処理をしたい対象を作ります。

<div class="all">
   
<div id="one" class="">
    <div class="box" >
    サンプル１
</div></div>
<div id="two" class="">
    <div class="box" >
    サンプル２
</div></div>
<div id="three" class="">
    <div class="box">
    サンプル３
</div></div><div id="four"  class="">
    <div  class="box">
    サンプル４
</div></div><link href="/qiita.css" rel="stylesheet">
    <script src="/qiita.js"></script>
</div>

.box{
    margin-left: 20px;
    margin-right: 20px;
    height: 100px;
    width: 100px;
    background-color: black;
    color: white;
    border-radius: 10px;
    font-weight: bolder;
    text-align: center;
    
}

.all{  
    display: flex;

}
.fadein
    {
        animation:fadein ease-in-out 4s  alternate;
        -webkit-animation:fadein ease-in-out 4s  alternate;
        -moz-animation:fadein ease-in-out 4s  alternate;
      }
      @keyframes fadein{
        0%   { transform:translate(0%, 0%);  opacity:0;}
        100% { transform:translate(-30px, 0%); opacity:1;}
      }
      @-webkit-keyframes fadein{
        0%   { -webkit-transform:translate(0%, 0%);  opacity:0;}
        100% { -webkit-transform:translate(-30px, 0%); opacity:1;}
      }
      @-moz-keyframes fadein{
        0%   { -moz-transform:translate(0%, 0%);  opacity:0;}
        100% { -moz-transform:translate(-30px, 0%); opacity:1;}
      }

黒い四角を４つ用意し,右から左にフェードインしてくるようなアニメーションを加えました。
これらを非同期処理を使って順番にアニメーションが動くようにしていきます。

まずこちらがJavaScriptの全体像です。

const wait =(time = 1000)=>{
    return new Promise((resolve,reject)=>{
        setTimeout(()=>resolve(),time)
    });
};
const qiita =  async function koton(){
  document.getElementById('one').classList.add("fadein");
  await wait();
  document.getElementById('two').classList.add("fadein");
  await wait();
  document.getElementById('three').classList.add("fadein");
  await wait();
  document.getElementById('four').classList.add("fadein");

}
qiita();

1行目~　4行目のwaitは次の処理を行うまでの待機時間のようなものです。　待機させたい時間を引数timeとして設定することで、自由に時間を変えることができます。

次に実際に非同期関数を使っていきます。
今回は関数qiitaを非同期関数として定義していきます。
kotonという関数にasyncをつけることで、{}の中は非同期関数になっています。

document.getElementById('n').classList.add("fadein")

これは、それぞれの要素を取得しその要素のclass　にfadein
を追加するといったものです。
この処理でfadeinクラスが追加されることで、アニメーションが開始します。

await wait();

waitのような非同期処理を含む関数をawaitをつけて呼び出すと、関数の実行が終わった後に次のコードが実行されます。
この例では、前行のdocument.getElementById().classList.add("fadein")
が実行された後wait();でtime（デフォルトは１０００）[Mm/s]の待機時間が経過した後に次の行の処理が行われます。
その結果この通りに左から順番にアニメーションが実行されるようになりました。

おわりに

今回はasync/await を使って非同期処理をしてみました。実は、この記事を書く前にbarba.jsを使った非同期遷移をしたかったのですが初心者には理解しきれず断念したので、またチャレンジしてみたいと思います。
初の投稿なので見やすさ等に注力はできませんでしたが、とても楽しかったです。
ありがとうございました。