async/await 使い方

asyncとは、

・非同期通信を行う時に宣言する。

index.js

const number1 = () => {
  setTimeout(()=>{
    console.log("number1")
  }, 1000)
 }
 
 const number2 = () => {
  console.log("number2")
 }
 
 const number3 = () => {
  console.log("number3")
 }
 number1()
 number2()
 number3()

//=>number2
//=>number3
//=>number1

index.js

const number = async() => {
  const number1 = () => {
    return new Promise((resolve, reject)=>{
      setTimeout(()=>{
        console.log("number1")
        resolve();
      }, 1000)
    })
  }
 
  const number2 = () => {
    console.log("number2")
  }
 
  const number3 = () => {
    console.log("number3")
  }
 
  await number1()
  number2()
  number3()
 }
 
 number()


//=>number1
//=>number2
//=>number3

このようにasync/awaitをしようする事により処理の時間が話からないものや、順番を指定したい時に使えます。

連想配列に要素を追加

index.js

/*

このようにしたい
let dateDropDown = {items : [
  {label: 0, value: 0},
  {label: 1, value: 1},
  {label: 2, value: 2},
  {label: 3, value: 3},
]}

以下のように記述
*/

let dateDropDown = {items : []}

for (let i = 0; i < 4; i++){
  let option = {}
  option.label = i
  option.value = i
  dateDropDown.items.push(option)
}

あれ？anyncを宣言しているのにawaitが使えない😔

index.js

const number = async() => {
  const main = () => {
    await number1()
  }

  const number1 = () => {
    return new Promise((resolve, reject)=>{
      setTimeout(()=>{
        console.log("number1")
        resolve();
      }, 1000)
    })
  }
  main()
 }

 number()

//=>SyntaxError: await is only valid in async function

asyncの中で関数からawaitを呼び出す場合でも、再度asyncを宣言する必要がある
上記のコードを修正すると以下のようになる。

index.js

const number = async() => {
  const main = async () => { //<=asyncを宣言する
    await number1()
  }

  const number1 = () => {
    return new Promise((resolve, reject)=>{
      setTimeout(()=>{
        console.log("number1")
        resolve();
      }, 1000)
    })
  }
  main()
}

 number()

//=>number1

クリックイベントが反応しない😭

index.js

(function() {
  'use strict';
  kintone.events.on('app.record.index.show', function(event) {
    createhtml()
    $(".kintoneplugin-button-normal").on('click', function() {
      let number = $(".kintoneplugin-row")[0].innerText
      $(".kintone-app-header-space")[0].innerHTML = "";
      createhtml()
      $(".kintoneplugin-row")[0].innerText = Number(number) + 1
    });
    
    function createhtml (){
      const $html = `
        <div class="kintoneplugin-button-normal" style="margin:10px;">ボタン</div>
        <div class="kintoneplugin-row" style="margin-left:10px;">0</div>
      `
      $(kintone.app.getHeaderSpaceElement()).append($html);
    }
  });
})();

上記のコードだと、ボタンを押した時に前のボタンを削除して新たに同じクラスのボタンを作成しています。
これでは以下の動画のように、初めに作成した時と別のボタンになってしまうので、２回目は反応しません。

index.js

(function() {
  'use strict';
  kintone.events.on('app.record.index.show', function(event) {
    createbotton()
    createhtml()
    $(".kintoneplugin-button-normal").on('click', function() {
      let number = $(".kintoneplugin-row")[0].innerText
      document.getElementsByClassName("kintone-app-header-space")[0].removeChild(document.getElementsByClassName("box")[0])
      createhtml()
      $(".kintoneplugin-row")[0].innerText = Number(number) + 1
    });
    
    function createbotton (){
      const $botton = `
        <div class="kintoneplugin-button-normal" style="margin:10px;">ボタン</div>
      `
      $(kintone.app.getHeaderSpaceElement()).append($botton);
    }
    
    function createhtml (){
      const $html = `
        <div class="box">
          <div class="kintoneplugin-row" style="margin-left:10px;">0</div>
        </div>
      `
      $(kintone.app.getHeaderSpaceElement()).append($html);
    }
  });
})();

上記のコードのようにボタンと変更されるテキストを分けて作成すると、以下のように問題なくボタンが反応します。

忘れた時に　=== と == の違い

最近、何気に使っている、「==」は「===」もありますよね！
何となく違いは分かっているが、何となくでは使えない。忘れた時の為に、今回記述します✊

結論

==は、文字列と数値の比較の場合、文字列を数値に変換してくれるので、trueを返します。
===は、文字列は数値にに変換されないので、falseを返します。

index.js

const number = 1
const number1 = "1"
console.log(number == number1)
console.log(number === number1)
//=>true
//=>false

ページ更新前の情報を保持する方法☕️

最近ぶち当たった問題何ですが、

ボタン押す　👉　ページ更新　👉　ページ更新前の情報が欲しい😭

このような問題の解決方法について今回記述していこうと思います。

失敗例）

index.js

(function() {
  'use strict';
  kintone.events.on('app.record.index.show', function(event) {
    createbotton()
    createhtml()
    $(".kintoneplugin-button-normal").on('click', function() {
      let number = $(".kintoneplugin-row")[0].innerText
      document.getElementsByClassName("kintone-app-header-space")[0].removeChild(document.getElementsByClassName("box")[0])
      createhtml()
      $(".kintoneplugin-row")[0].innerText = Number(number) + 1
    });

    function createbotton (){
      const $botton = `
        <div class="kintoneplugin-button-normal" style="margin:10px;">
          <a href="https://${document.domain}/k/${kintone.app.getId()}/?view=${event.viewId}">ボタン</a>
        </div>
      `
      $(kintone.app.getHeaderSpaceElement()).append($botton);
    }

    function createhtml (){
      const $html = `
        <div class="box">
          <div class="kintoneplugin-row" style="margin-left:10px;">0</div>
        </div>
      `
      $(kintone.app.getHeaderSpaceElement()).append($html);
    }
  });
})();

上記のコードですと、ページが更新され、更新前の情報が取って来れていません。

URL生成するタイミングで、URLにパタメーターを設定する方法

index.js

(function() {
  'use strict';
  kintone.events.on('app.record.index.show', function(event) {
    let number

    let query = decodeURI(location.search)

    createhtml()
    if (query.indexOf("number") !== -1) {
      const len = query.split('=').length
      number = Number(query.split('=')[len - 1]) + 1
      $(".kintoneplugin-row")[0].innerText = number
    } else {
      number = $(".kintoneplugin-row")[0].innerText
    }
    createbotton(number)

    //ボタン作成
    function createbotton (number){
      const $botton = `
        <div class="kintoneplugin-button-normal" style="margin:10px;">
          <a href="https://${document.domain}/k/${kintone.app.getId()}/?view=${event.viewId}&number=${number}">ボタン</a>
        </div>
      `
      $(kintone.app.getHeaderSpaceElement()).append($botton);
    }
    
    //html作成
    function createhtml (){
      const $html = `
        <div class="kintoneplugin-row" style="margin-left:10px;">0</div>
      `
      $(kintone.app.getHeaderSpaceElement()).append($html);
    }
  });
})();

上記のコードのように、更新タイミングでURLに、欲しい情報を付与する事により、前の情報を取って来ることができます。

sessionStorageを使う方法

sessionStorageを使う場合は、以下のようになコードになります。
参考記事　https://qiita.com/flmil/items/e9f5e91c9293bb3823b8

index.js

(function() {
  'use strict';
  kintone.events.on('app.record.index.show', function(event) {
    let number

    createhtml()
    if (window.sessionStorage.getItem(['number'])) {
      $(".kintoneplugin-row")[0].innerText = Number(window.sessionStorage.getItem(['number'])) + 1
    }
    createbotton()

    $("#botton").click(function() {
      number = $(".kintoneplugin-row")[0].innerText
      window.sessionStorage.setItem(['number'],[number]);
    })

    //ボタン作成
    function createbotton (){
      const $botton = `
        <div class="kintoneplugin-button-normal" style="margin:10px;">
          <a id="botton" href="https://${document.domain}/k/${kintone.app.getId()}/?view=${event.viewId}">ボタン</a>
        </div>
      `
      $(kintone.app.getHeaderSpaceElement()).append($botton);
    }
    
    //html作成
    function createhtml (){
      const $html = `
        <div class="kintoneplugin-row" style="margin-left:10px;">0</div>
      `
      $(kintone.app.getHeaderSpaceElement()).append($html);
    }
  });
})();