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

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

poruruba/amplify_template

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

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

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

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

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」の行は不要です。

public/index.html

    <script src="js/comp/comp_test1.js"></script>

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

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

public/js/start.js

/* add additional components */
vue_add_global_component("comp_test1", comp_test1);

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

public/index.html

<comp_test1></comp_test1>

Vue Routerの書き方

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

public/js/router.js

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

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

HTMLのリンクのように切り替える場合、

<router-link to="/test1">test1</router-link>

または、Javascript上から切り替える場合

this.$router.push("/test1");

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

public/index.html

<router-view></router-view>

Vueの$setの書き方

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

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

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

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

Vuexの書き方

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

public/js/store.js

const vue_store = new Vuex.Store({
  state: {
    test_data: "Hello"
  },
  mutations: {
  }
});

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

public/index.html

{{$store.state.test_data}}

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

public/js/start.js

this.$store.state.test_data

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

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

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コンポーネントを用意しています。

public/index.html

<comp_file id="file_test" accept="text/*" v-bind:callback="file_callback"></comp_file>

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

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のテンプレート文字列が表示されてしまうのを避けるために、ローディング画面を挿入します。

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()を呼び出せばよいです。

public/js/start.js

    mounted: function(){
        proc_load();

        loader_loaded();
    }

以上