JavaScriptのWindowフレームワークをTypeScript化する

2018-12-18 13:11:35

 Node.jsの方でTypeScriptを使ってサーバサイドのプログラムを作っていたのですが、どうせならとクライアント側のJavaScriptもTypeScriptに移植しています。


 私の想定するターゲット環境はGoogleのサーチエンジンが拾えるレベルのJavaScriptです。つまりES5ということになります。ES5のJavaScriptはclassすら使えないレガシーな状態です。しかしTypeScriptでトランスコンパイルを書ければモダンな文法を使えるので、classも問題なく使うことが出来ます。

 作成時の条件は以下の通りです
 ・トランスコンパイルはES5をターゲットとする
 ・HTMLから呼び出すときは従来通り、scriptタグのsrcから生成後のjsファイルを読み込む
  (importを使用しない)
 ・DOMはIE11で動くレベルまでしか使わない
 ・classはnamespace内に記述しexportで外に出す
 ・他人のライブラリは一切使用しない

 ちなみにこのサイトで使っているWindowフレームワークは、ES5のべた書きなのでclassは使っていません。HTMLElementをカスタム化する機能も無いので、ウインドウ作成時はDIVのノードにメソッドやプロパティを毎回追加する書き方をしていました。

 今回作っているプログラムは、ウインドウの元になるDIVタグをクラスのプロパティとする形にしました。以前のものはDIVタグそのものがクラスのような扱いです。同一にする利点は、親子関係が単純になることです。同一にしなかった場合は、ウインドウクラスの親子関係とDOMノードの親子関係を別に記述しなければなりません。そこが面倒なところですが、作ってみたら意外にコードがすっきりしました。

現時点では以下のように書くと
//ウインドウ機能を使うメイン処理
addEventListener("DOMContentLoaded", Main)

function Main() {
    //フレームウインドウの作成(タイトルあり)
    var win = new JSW.JFrameWindow()
    win.setSize(400, 300)
    win.setPos(32, 64)
    win.setTitle("ウインドウ1")

    //分割ウインドウの作成
    var splitter = new JSW.JSplitter(200)
    win.addChild(splitter, 'client')

    //ツリービューの作成
    var treeView = new JSW.JTreeView()
    treeView.addItem('あいうえお')
    treeView.addItem('かきくけこ')
    treeView.addItem('さしすせそ')
    splitter.addChild(0, treeView,'client')

    splitter.getChild(1).getClient().innerHTML = "テスト表示"
}

こうなります


開発状況はGitHubに入れてあります