プログラムのモジュール化

テストコードや再利用可能なプログラムを作っていくためには、モジュールシステムを利用する必要があります。ですが、kintone�の上でプログラムを書くとIE11をサポートする関係でモジュール機能を利用することができません。

今回は、TypeScriptとWebpackという技術を使ってモジュール機能を実現します。

TypeScriptとは

Microsoftが開発しているJavaScriptをコンパイルするための言語。 JavaScriptに対して型情報をつけることができる。

例えば、次の関数があるとする。次の関数をみるといろいろ疑問が湧いてくる

function sumOf(a, b) {
    return a + b;
}

JavaScriptは動的言語と呼ばれている。安全にJavaScriptを利用するために、型付の言語から JavaScriptに変換することで、型安全(≒品質の高い)なプログラムを書くことができる。

function sumOf(a:number, b:number):string {
    return new String(a + b);
}

numOf("123", "456");

これをコンパイルしてみよう。コンパイルエラーが起きてしまう。関数の安全な呼び出しを保証できます。メンテナンスの回数が増えていけば増えていくほど、型の恩恵に預かることができる。

node node_modules/typescript/bin/tsc src/add.ts

TypeScriptとWebpackという仕組みを使って、利用しているプログラムを一つにまとめることができます。最近のモダンなWeb開発で採用されている仕組みです。

先程の関数を sum.tsとして保存して、呼び出せるようにしてみよう。

とりあえず覚えておくことはこれだけです。

export function sumOf(...)

さらにインポートの仕方は次のようになります。

import {sumOf} from './sum'

sumOf(1,2); // -> returns "3"

前にも書いたとおりImport,Export機能は使えるブラウザが限られている。だがwebpackを利用すると必要なプログラムをすべてインクルードして、1つのファイルにまとめてくれる。

これを利用すれば、kintoneに登録するファイルは一つでいい。

package.jsonのscript.build の中に内容が入っている。 webpackの設定はwebpack.conf.js

npm run build

コンパイルされたコードを見てみよう。

モジュールシステムが利用できるようになると、テストコードを書く準備が整う。テストコードを試しに書いてみよう。