自分がよく使うJavascript関数まとめ

毎度使っているフレームワークにおいて、利用頻度が高く忘れやすい関数の使い方をまとめておきます。

poruruba/amplify_template

https://github.com/poruruba/amplify_template

[前提]
・amplify_templateを利用していること
・vue2ベース
・bootstrap3ベース

[内容]
・Vueコンポーネントの書き方
・Vue Routerの書き方
・Vueの$setの書き方
・Vuexの書き方
・ダイアログボックスの書き方
・comp-fileの使い方
・ローディング画面の有効化

# Vueコンポーネントの書き方

Vueコンポーネントは、毎度こんな感じで書いています。

```js:public/js/comp/comp_test1.js
'use strict';

var comp_test1 = {
  mixins: [mixins_bootstrap],
  store: vue_store,
  template: `
<div>

  <h1>Test1</h1>

</div>`,
  data: function () {
    return {
    }
  },
  methods: {
  },
  mounted: function(){
  }
};
```

Vueコンポーネントの中でVuexを使わない場合は、「store: vue_store」の行は不要です。

```html:public/index.html
    <script src="js/comp/comp_test1.js"></script>
```

Vuexを使う場合は、上記を```<script src="js/store.js"></script>```の後に宣言します。

start.jsの最後の方で以下の行を追加します。

```js:public/js/start.js
/* add additional components */
vue_add_global_component("comp_test1", comp_test1);
```

htmlで以下のように記載すれば、Vueコンポーネントの内容が表示されます。

```html:public/index.html
<comp_test1></comp_test1>
```

# Vue Routerの書き方

指定されたルーティングに従って、表示するVueコンポーネントを切り替えることができます。
ルーティングは以下のように記載します。

```js:public/js/router.js
const vue_router = new VueRouter({
  routes: [
      { path: '/test1', component: comp_test1 },
  ]
});
```

切り替えたいところに以下を記載します。

HTMLのリンクのように切り替える場合、
```html
<router-link to="/test1">test1</router-link>
```
または、Javascript上から切り替える場合
```js
this.$router.push("/test1");
```

切り替え表示される内容は、以下の場所に表示されます。

```html:public/index.html
<router-view></router-view>
```

# Vueの$setの書き方

Vue2を使っている場合、以下のようなオブジェクト内のフィールドを変更する場合は、バインドされた内容がHTMLとして表示されない場合があります。

```js
this.someObject['b'] = 'hello';
this.someArray[1] = 'hello';
```

その場合、$setを使って明示的に変更・通知する必要があります。

```js
this.$set(this.someObject, 'b', 'hello')
this.$set(this.someArray, 1, 'hello')
```

# Vuexの書き方

Vueコンポーネント間で共通の双方向データバインディング可能な変数を定義します。

```js:public/js/store.js
const vue_store = new Vuex.Store({
  state: {
    test_data: "Hello"
  },
  mutations: {
  }
});
```

あとは、HTMLで以下のように参照します。v-modelにも指定できます。

```html:public/index.html
{{$store.state.test_data}}
```

また、以下のようにJavascriptから参照・変更できます。

```js:public/js/start.js
this.$store.state.test_data
```

# ダイアログボックスの書き方

bootstrap3.0を使ったダイアログのテンプレートです。

```html:public/index.html
        <div class="modal fade" id="my_dialog">
          <div class="modal-dialog">
            <div class="modal-content">
              <div class="modal-header">
                <h4 class="modal-title">ヘッダテキスト</h4>
              </div>
              <div class="modal-body">
                // ダイアログの内容
              </div>
              <div class="modal-footer">
                <button class="btn btn-default" v-on:click="dialog_close('#my_dialog')">閉じる</button>
              </div>
            </div>
          </div>
        </div>
```

# comp-fileの使い方

Inputファイルを扱うためのVueコンポーネントを用意しています。

```html:public/index.html
<comp_file id="file_test" accept="text/*" v-bind:callback="file_callback"></comp_file>
```

以下のように、Javascriptから操作できます。

```js:public/js/start.js
        file_callback: async function(files){
            if( files.length <= 0 )
                return;
            
            let reader = new FileReader();
            reader.onload = e => {
                console.log(e.target.result);
              };
            reader.readAsText(files[0]);
        },
```

# ローディング画面

HTMLロード直後のVueのテンプレート文字列が表示されてしまうのを避けるために、ローディング画面を挿入します。

```html:public/index.html
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/spinkit/2.0.1/spinkit.min.css" />

    <div id="loader-background">
      <div class="sk-plane sk-center"></div>
    </div>
```

あとは、mountedのタイミングで```loader_loaded()```を呼び出せばよいです。

```js:public/js/start.js
    mounted: function(){
        proc_load();

        loader_loaded();
    }
```

以上