リンク

前回は開発ツール周りを説明しました。
今回からは実際の実装部分についてです。
最初はJavaScript Frameworkについて説明します。

github

JavaScript FrameworkはVue.jsを使います。
Vue.jsはReact.jsにかなり似ています。
あくまで個人的な感想ですが、React.jsの微妙な部分をよくしたのがVue.jsみたいな認識です。
（jsx、reduxとvuex、formまわりなどなど）
Vue.jsは単独でも動作しますが、ライブラリとしてVue-Router.jsやVuexを使うとさらに複雑なことができます。
今回はルーター、Vuex、イベント、双方向バインディング、ネットワークのサンプルソースを作りました。

開発用のhtml

開発用のhtmlはwebRoot/index.htmlです。
webRootLive/index.htmlは本番用になる想定です。

http://localhost:3000/ にアクセスするとindex.htmlを開きます。

webRoot/index.html

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
</head>
<body>

<div id="navigation"></div>
<div id="app"></div>
<div id="footer"></div>

<script src="/public/main.min.js" type="text/javascript"></script>
<script src="/public/style.min.js" type="text/javascript"></script>

</body>
</html>

head　にはレスポンシブの設定viewportがあるのと、divが３つあって、webpack dev serverで作られたjs読み込んでいるくらいです。

ルートファイル

style.ts

開発用のファイルになります。
SASSファイルをJSとして読み込んでいます。

style.ts

import "../scss/index.scss"

main.ts

javascriptのルートファイルになります。
実際では、カテゴリーごとに複数のルートファイルを作ることになるかと思います。

main.ts

/// <reference path="./index.d.ts"/>
import Vue from 'vue'
import Vuex from 'vuex'
import VueRouter from 'vue-router'

import {MainComponent} from "./view/component/MainComponent";
import {FooterComponent} from "./view/component/FooterComponent";
import {NavigationComponent} from "./view/component/NavigationComponent";

Vue.use(Vuex)
Vue.use(VueRouter)

function start() {
    const navigation = new NavigationComponent()
    navigation.$mount('#navigation')

    const footer = new FooterComponent()
    footer.$mount('#footer')

    const app = new MainComponent()
    app.$mount('#app')
}

start()

index.htmlの3つのdivにDOMを設定するようにしています。

TypeScriptの型宣言

index.tsはTypeScriptの型宣言を設定するクラスです。
TypeScriptのアンビエント宣言を記述しています。

index.ts

declare var process: any

declare module '*.vhtml' {
	import Vue = require('vue')
	interface WithRender {
		<V extends Vue>(options: Vue.ComponentOptions<V>): Vue.ComponentOptions<V>
		<V extends typeof Vue>(component: V): V
	}
	const withRender: WithRender
	export = withRender
}

htmlのLoaderのアンビエント宣言はここを参考にさせていただきました。
拡張子はhtmlでもよかったのですが、vueのhtmlなのでvhtmlにしました。
別にhtmlでもいいんですがね。

ルーター(vue router)

今回はmainRouter.tsのみになります。
ルーターを設定するとURLとComponentをマッピングしてくれます。

mainRouter.ts

import VueRouter from 'vue-router'

import {SampleComponent} from "../component/SampleComponent";
import {PageNotFoundComponent} from "../component/PageNotFoundComponent";
import {SampleButtonComponent} from "../component/SampleButtonComponent";
import {SampleParameterComponent} from "../component/SampleParameterComponent";
import {SampleBindComponent} from "../component/SampleBindComponent";
import {SampleLoadComponent} from "../component/SampleLoadComponent";
import {SampleModalButtonComponent} from "../component/SampleModalButtonComponent";
import {SampleColumnComponent} from "../component/SampleColumnComponent";

export default new VueRouter({
    mode: 'history',
    routes:[
        { path: "/", component:  SampleComponent},
        { name: 'sample', path: '/sample', component: SampleComponent},
        { name: 'sample-button', path: '/sample-button', component: SampleButtonComponent},
        { name: 'sample-parameter', path: '/sample-parameter/:id', component: SampleParameterComponent},
        { name: 'sample-bind', path: '/sample-bind', component: SampleBindComponent},
        { name: 'sample-load', path: '/sample-load', component: SampleLoadComponent},
        { name: 'sample-modal-button', path: '/sample-modal-button', component: SampleModalButtonComponent},
        { name: 'sample-column', path: '/sample-column', component: SampleColumnComponent},
        { path: '*', component: PageNotFoundComponent},
    ]
})

URLとクラスのマッピングは以下のようになります。

http://localhost:3000/の場合はSampleColumnComponent.ts
http://localhost:3000/sample-buttonの場合はSampleButtonComponent.ts

どれにもマッチングしなかった場合は、404としてPageNotFoundComponentにマッピングするようになっています。

詳しくはVue Router HTML5 History モード
を参考にしてください。

データストア(Vuex)

データストアのライブラリはVuexを使います。
データストアのライブラリを使わなくてもWEBアプリは開発できますが、SPAで開発する場合に必須ではと思います。
iOSやandroidアプリにライフサイクルがあるようにWEBアプリをSPAで作る場合にもライフサイクルがでてきます。
その際にビュー側のライフサイクルによるコンポーネントの生存期間は画面遷移の度などに削除されますが、データの保存期間は画面がリロードするまでずっとメモリに残り続けたりします。
SPAで作らない場合は、画面遷移でデータが消失され、コンポーネントとデータの削除のタイミングが同じになりがちです。
その際に、便利にデータを管理するのがVuexとなるのです。
たぶん。

Vuex(Store)

MainStore.tsはVuexのクラスです。

MainStore.ts

/// <reference path="../../index.d.ts"/>

import Vue from 'vue'
import Vuex, {MutationTree} from 'vuex'
import EnvironmentUtility from "../../utility/EnvironmentUtility";
import sampleLoadModule from '../module/SampleLoadModule'
import sampleBindModule from '../module/SampleBindModule'
import sampleModalModule from '../module/SampleModalModule'

const NAMESPACE = 'main';
const NAMESPACE_ACTION = `${NAMESPACE}/a/`
const NAMESPACE_GETTER = `${NAMESPACE}/g/`
const NAMESPACE_MUTATION = `${NAMESPACE}/m/`

Vue.use(Vuex)

export const ActionKey = {
}

export const GetterKey = {
}

export const MutationKey = {
}

export class MainState {
    public sampleLoad
    public sampleBind
    public sampleModal
}

function createStore():any{
    const mutations = {
    } as MutationTree<MainState>

    return new Vuex.Store<MainState>({
        state: new MainState(),
        mutations,
        strict: EnvironmentUtility.isDevelopment(),
        modules:{
            sampleLoad:sampleLoadModule,
            sampleBind:sampleBindModule,
            sampleModal:sampleModalModule,
        }
    })
}

export default createStore()

今回は３つモジュールを読み込んでいるだけのクラスになっています。
あと、strictの設定をしています。
strictの設定とは厳格モードにするためです。
本番では厳格モードを有効してはいけないです。
詳しくはVuex 厳格モードを参考にしてください。

EnvironmentUtility.ts

開発用と本番用の設定を切り替えられるクラスです。
webpackでtrue falseの設定しています。
開発ツール編を参考にしてください。

EnvironmentUtility.ts

/// <reference path="../index.d.ts"/>

export default class EnvironmentUtility {
    static isDevelopment(){
        return !this.isProduction();
    }

    static isProduction(){
        return process.env.NODE_ENV === 'production';
    }
}

Vue(コンポーネント)

Vueのコンポーネントは表示をコントロールするためのクラスです。

枠のコンポーネント

今回の枠のコンポーネントはMainComponent.tsになります。

MainComponent.ts

/// <reference path="../../index.d.ts"/>
import Vue from 'vue'
import Component from 'vue-class-component'
import HtmlTemplate from '../../../vhtml/main.vhtml'

import store from '../store/MainStore';
import router from '../router/mainRouter'

@HtmlTemplate
@Component({
  router,
  store,
})
export class MainComponent extends Vue {
  message: string = 'Hello Vue.js typescript!!'
}

main.vhtml

<section class="section">
    <div class="container">
        <h1 class="title">
            {{message}}
        </h1>

        <router-view></router-view>
    </div>
</section>

MainComponent.tsのmesseageプロパティに文字列が定義されています。
main.vhtmlの{{message}}で出力されます。

あと、今回、vue-routerを使っているので、
パスに対してマッチしたコンポーネントをrouter-viewに描画してくれます。

Vue Hello World

Vue Hello Worldって自分で書いておきながらよくわからないですが、
SampleComponent.tsはrouter-viewに簡単に描画したいと思った場合のサンプルになります。

SampleComponent.ts

/// <reference path="../../index.d.ts"/>
import Vue from 'vue'
import Component from 'vue-class-component'
import HtmlTemplate from '../../../vhtml/sample.vhtml'

@HtmlTemplate
@Component({
})
export class SampleComponent extends Vue {
}

sample.vhtml

<div>
    <h1>sample</h1>
</div>

vhtmlには１つのタグをルートとしたdomしか記述できません。

Vueイベント

今回はとりあえずクリックイベントのみ扱います。
http://localhost:3000/sample-button

SampleButtonComponent.ts

/// <reference path="../../index.d.ts"/>
import Vue from 'vue'
import Component from 'vue-class-component'
import HtmlTemplate from '../../../vhtml/sample-button.vhtml'

@HtmlTemplate
@Component({
})
export class SampleButtonComponent extends Vue {
    clickByAlertButton() {
        alert("clicked test");
    }
}

sample-button.vhtml

<div>
    <h1>sample-click</h1>
    <a class="button is-light" @click="clickByAlertButton">test</a>
</div>

ポイントは@clickです。

Vueの双方向バインディング

SampleBindComponent.ts

SampleBindComponent.ts

/// <reference path="../../index.d.ts"/>
import Vue from "vue";
import Component from "vue-class-component";
import HtmlTemplate from "../../../vhtml/sample-bind.vhtml";
import {MutationKey} from "../module/SampleBindModule";

@HtmlTemplate
@Component({
})
export class SampleBindComponent extends Vue {
  get comment() {
    return this.$store.state.sampleBind.comment
  }

  set comment(value) {
    this.$store.commit(MutationKey.SET_COMMENT, value)
  }
}

SampleBindModuleへのアクセッサーです。

SampleBindModule.ts

/// <reference path="../../index.d.ts"/>

import {ActionTree, GetterTree, ModuleTree, MutationTree} from "vuex";
import {MainState} from "../store/MainStore";

const NAMESPACE = 'sample-bind';
const NAMESPACE_ACTION = `${NAMESPACE}/a/`
const NAMESPACE_GETTER = `${NAMESPACE}/g/`
const NAMESPACE_MUTATION = `${NAMESPACE}/m/`

export const ActionKey = {
}

export const GetterKey = {
}

export const MutationKey = {
    SET_COMMENT: `${NAMESPACE_MUTATION}SET_COMMENT`,
}

function createStore(){
    class State {
        constructor(
            public comment: String = null,
        ) { }
    }

    const getters = {
    } as GetterTree<State, MainState>

    const actions = {
    } as ActionTree<State, MainState>

    const mutations = {
        [MutationKey.SET_COMMENT] (state, comment:String) {
            state.comment = comment;
        },
    } as MutationTree<State>

    return {
        state: new State(),
        getters,
        actions,
        mutations
    } as ModuleTree<State>
}

export default createStore()

SET_COMMENTというメソッドがあります。
stateのcommentを引数の値に変更しています。
stateの変数はmutation内でしか変更してはいけません。
これは大事です。
action内やgetter内、他では変更できないのです。
詳しくはVuex フォームの扱いを参考にしてください。

sample-bind.vhtml

<div>
    <h1>sample-bind</h1>
    comment: <input type="text" v-model="comment"><br>
    comment: {{comment}}<br>
</div>

ポイントはv-modelです。
これでSampleBindComponent.tsのcommentへアクセスしています。

VueのパスパラメータとQueryパラメータ

SampleParameterComponent.ts

http://localhost:3000/sample-parameter/123
http://localhost:3000/sample-parameter/aaa?test=bbb

SampleParameterComponent.ts

/// <reference path="../../index.d.ts"/>
import Vue from 'vue'
import Component from 'vue-class-component'
import HtmlTemplate from '../../../vhtml/sample-parameter.vhtml'

@HtmlTemplate
@Component({
})
export class SampleParameterComponent extends Vue {
    get pathVariable() {
        return this.$route.params.id;
    }

    get getVariable() {
        return this.$route.query.test;
    }
}

sample-parameter.vhtml

<div>
    <h1>sample-parameter</h1>
    <div>path variable:{{pathVariable}}</div>
    <div>get variable:{{getVariable}}</div>
</div>

http://localhost:3000/sample-parameter/123
http://localhost:3000/sample-parameter/aaa?test=bbb

１つ目のURLはid、１２３が取得できます。
2つ目のURLはaaaを取得しています。
さらに２つ目のURLにはクエリパラメータ付きです。
キーはtest値はbbbにとなっています。

ネットワーク

ネットワーク周りをやる上で押さえておきたいのがPromiseとasync/awaitです。
SampleLoadComponent.tsではちょっと複雑に作ってしますが、引き続きよろしくお願いします。

SampleLoadComponent.ts

/// <reference path="../../index.d.ts"/>
import Vue from 'vue'
import Component from 'vue-class-component'
import HtmlTemplate from '../../../vhtml/sample-load.vhtml'
import {ActionKey} from "../module/SampleLoadModule";

@HtmlTemplate
@Component({
})
export class SampleLoadComponent extends Vue {
  /**
   * ライフサイクル
   */
  async created(){
    console.log("load 1");
    console.log(`message:${this.$store.state.sampleLoad.message}`);
    await this.$store.dispatch(ActionKey.LOAD_MESSAGE)
    console.log(`message loaded:${this.$store.state.sampleLoad.message}`);
    console.log("load 2");
    await this.$store.dispatch(ActionKey.LOAD_TITLE, "fff")
    console.log("load 3");
  }

  /**
   * プロパティ
   */
  get message(){
    return this.$store.state.sampleLoad.message;
  }

  get title(){
    return this.$store.state.sampleLoad.title;
  }
}

ブラウザ実行時のconsoleログ

load 1
message:null
message loaded:sample message
load 2
load 3

consoleログには順番にログが出ています。
順番にログが出ているのがポイントです。
通信もしているのにです。

sample-load.vhtml

<div>
    <h1>sample-load</h1>
    message: {{message}}<br>
    title: {{title}}<br>
</div>

SampleLoadModule.ts

/// <reference path="../../index.d.ts"/>

import {ActionTree, GetterTree, ModuleTree, MutationTree} from "vuex";
import SampleAPI from "../../network/api/SampleAPI";
import {SampleEntity} from "../../network/entity/SampleEntity";
import {MainState} from "../store/MainStore";
import {Sample2Parameter} from "../../network/parameter/Sample2Parameter";
import {Sample2Entity} from "../../network/entity/Sample2Entity";

const NAMESPACE = 'sample-load';
const NAMESPACE_ACTION = `${NAMESPACE}/a/`
const NAMESPACE_GETTER = `${NAMESPACE}/g/`
const NAMESPACE_MUTATION = `${NAMESPACE}/m/`

export const ActionKey = {
    LOAD_MESSAGE: `${NAMESPACE_ACTION}LOAD_MESSAGE`,
    LOAD_TITLE: `${NAMESPACE_ACTION}LOAD_TITLE`,
}

export const GetterKey = {
}

export const MutationKey = {
    SET_LOAD_MESSAGE: `${NAMESPACE_MUTATION}SET_LOAD_MESSAGE`,
    SET_LOAD_TITLE: `${NAMESPACE_MUTATION}SET_LOAD_TITLE`,
}

function createStore(){
    class State {
        constructor(
            public message: String = null,
            public title: String = null,
        ) { }
    }

    const getters = {
    } as GetterTree<State, MainState>

    const actions = {
        [ActionKey.LOAD_MESSAGE]: ({ commit }) => {
            return SampleAPI.getSample()
                .then((res) =>{
                    commit(MutationKey.SET_LOAD_MESSAGE, res)
                })
                .catch(function(error) {
                    alert(error);
                })
        },
        [ActionKey.LOAD_TITLE]: ({ commit }, p1) => {
            const parameter:Sample2Parameter = {
                abc:p1
            };
            return SampleAPI.getSample2(parameter)
                .then((res) =>{
                    commit(MutationKey.SET_LOAD_TITLE, res)
                })
                .catch(function(error) {
                    alert(error);
                })
        },
    } as ActionTree<State, MainState>

    const mutations = {
        [MutationKey.SET_LOAD_MESSAGE] (state, payload:SampleEntity) {
            state.message = payload.message;
        },
        [MutationKey.SET_LOAD_TITLE] (state, payload:Sample2Entity) {
            state.title = payload.title;
        },
    } as MutationTree<State>

    return {
        state: new State(),
        getters,
        actions,
        mutations
    } as ModuleTree<State>
}

export default createStore()

SampleAPI.ts

import BaseAPI from "./BaseAPI";

import {SampleEntity} from "../entity/SampleEntity";
import {Sample2Entity} from "../entity/Sample2Entity";
import {Sample2Parameter} from "../parameter/Sample2Parameter";
import {WebUrlParams} from "../WebUrlParams";

export default class SampleAPI extends BaseAPI {
    static getSample() {
        const apiUrl = `/data1.json`;

        return this.get<SampleEntity>(apiUrl);
    }

    static getSample2(parameter:Sample2Parameter) {
        const apiUrl = `/data2.json`;

        var params = new WebUrlParams();
        params.append("abc", parameter.abc);

        return this.get<Sample2Entity>(apiUrl, params);
    }
}

Sample2Entity.ts

export interface Sample2Entity {
    title
}

Sample2Parameter.ts

export interface Sample2Parameter {
    abc
    ddd?
}

abcは必須、ddd?はnullable変数になります。

BaseAPI.ts

import {WebParams} from "../WebParams";
import {WebUrlParams} from "../WebUrlParams";

export default class BaseAPI {
    static post<T>(apiUrl:string, params:WebParams = null){
        let body = params ? params.data : null;
        return this.send<T>(apiUrl, {
            credentials: 'include',
            method: "POST",
            body: body
        })
    }

    static get<T>(apiUrl:string, params:WebUrlParams = null){
        var url = apiUrl;
        if(params){
            url += "?" + params.data;
        }
        return this.send<T>(url, {
            credentials: 'include'
        })
    }

    private static send<T>(apiUrl, config){
        return new Promise<T>((resolve, reject) => {
            fetch(apiUrl, config).then(res => {
                res.json().then(json => {
                    if(res.status >= 400 && res.status < 500){
                        reject(res)
                        return
                    }

                    resolve(json);
                });
            }).catch(e => {
                reject(e)
            });
        });
    }
}

一番大事なところなのに説明が少ないところが多々ありますが、
とりあえずこんな感じでおわりにします。。

github