Vue.jsでObnizを操作する基本－単純Lチカ（メモ）

Vue.jsからのObniz操作でエラーになったのでメモ。Webアプリでボタン押下でLEDを点灯。

#Consoleエラー
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/725039/9d6d8587-858e-549c-4faf-573710fd7f47.png)

#原因
* **"obniz.onconnect"内で処理が必要？　※Vue.jsでは良くないらしい** <br>
[デバイスへの接続 - obniz公式](https://obniz.com/ja/doc/reference/common/connection/)
* **Vue.js での書き方が悪かった　※Vue.jsでは以下のほうが良さそう** <br>
[Vue.jsでobnizをつかおう - Qiita](https://qiita.com/wicket/items/569afb7c10b55a9fccd2)<br>

```javascript:
  if (obniz.connectionState === "connected") {
    // **** 実行する処理 ****
  } else {
    obniz.on('connect', () => {
      // **** 実行する処理 ****
  })
```

* **コールバック関数、アロー関数のメモ**<br>
[JavaScriptの「コールバック関数」とは一体なんなのか](https://sbfl.net/blog/2019/02/08/javascript-callback-func/) <br>
[JavaScript アロー関数を説明するよ - Qiita](https://qiita.com/may88seiji/items/4a49c7c78b55d75d693b)<br>
[書き方で変わる?! Vue.jsでthisのスコープを調査した](https://tadaken3.hatenablog.jp/entry/vue-scope-this)

#修正後のコード
```html:.html
<!DOCTYPE html>
<html lang="jp" >
<head>
  <meta charset="UTF-8">
  <title>Obniz Test</title>
  <meta name="viewport" content="width=device-width, initial-scale=1">
</head>

<body>
  <!-- 全体をVue.js有効にする -->
  <div id="app">
    <!-- タイトル -->
    <h1>Obniz Test</h1>

    <!-- 設定 -->
    <h5>Obniz ID</h5>
    <input v-model="ObnizID[0]" type="text" maxlength="4">
    <label>-</label>
    <input v-model="ObnizID[1]" type="text" maxlength="4">
    <!-- LED-ON -->
    <button v-on:click="PowerON">LED-ON</button>
    <button v-on:click="PowerOFF">LED-OFF</button>
  </div>

  <!-- CDN -->
  <script src='https://cdnjs.cloudflare.com/ajax/libs/vue/2.6.11/vue.min.js'></script>
  <script src='https://unpkg.com/obniz@3.9.0/obniz.js'></script>

  <!-- 実行script -->
  <script  src="./script.js"></script>

  </body>
</html>
```

```javascript:script.js
const app = new Vue({
  el: '#app', // Vueが管理する一番外側のDOM要素
  obniz: null,    // Obniz関数
  data: {
    // Vue内部で利用する変数定義
    ObnizID: ['0000', '0000'],
  },

  methods: {
    // 関数はココに記述
    ObnizConect: function(func){
      // Obnizへの接続を確認してfuncに渡した関数を実行するコールバック
      console.log(this.obniz.connectionState);
      if (this.obniz.connectionState === 'connected') {
        func();
      } else {
        this.obniz.on('connect', () => {
          this.ObnizConect(func);
        })
      }
    },

    PowerON: function() {
      // LED ON
      // Obniz ID 指定
      let obnizid = `${this.ObnizID[0]}-${this.ObnizID[1]}`;
      if (this.obniz == null) {
        this.obniz = new Obniz(obnizid);
      }
      console.log(obnizid);

      let me = this; // thisを関数内で使えないので変数に代入
      // connect関数を呼んで、connect関数内で以下のFunctionを実行
      this.ObnizConect(async function() {
        const led = me.obniz.wired('LED', { anode: 0, cathode: 1 });
        me.obniz.display.clear();
        me.obniz.display.print('ON');
        led.on();   // LED点灯
      });
    },

    PowerOFF: function() {
      // LED OFF
      // Obniz ID 指定
      let obnizid = `${this.ObnizID[0]}-${this.ObnizID[1]}`;
      if (this.obniz == null) {
        this.obniz = new Obniz(obnizid);
      }
      console.log(obnizid);

      let me = this; // thisを関数内で使えないので変数に代入
      // connect関数を呼んで、connect関数内で以下のFunctionを実行
      this.ObnizConect(async function() {
        const led = me.obniz.wired('LED', { anode: 0, cathode: 1 });
        me.obniz.display.clear();
        me.obniz.display.print('OFF');
        led.off();   // LED消灯
      });
    },
  },
});
```