日本ソフトウェア科学会第 30 回大会 (2013 年度) 講演論文集

TypeScript によるソフトウェア開発の効率に関する経験報告
森谷 鴻平

志田 駿介

倉光 君郎

近年，JavaScript によるソフトウェア開発は大規模化している．JavaScript の特徴は，動的言語かつプロトタイプベースのオブジェクト指向プログラミング言語である．しかし，従来の静的なクラスベースのオブジェクト指向プログラミングで培われたソフトウェア工学手法が適用しにくいケースが多い．そのため，静的言語からの JS 生成言語の導入が検討されている．本研究では，静的 JS 生成言語の一種である TypeScript を用い，JS アプリケーションのリファクタリングを行った経験に基づき，ソースコード理解しやすさ，テストケースの量，機械検査にバグの発見など，ソフトウェア工学的見地から開発効率を論じる予定である．

More recently, the scale of a software development using JavaScript increases rapidly. A notable feature ofJavaScript is that it is a dynamically typed, prototype-based, and object-oriented scripting language anda software engineering method used for statically typed languages tends not to be applied for JavaScript.
Thus a statically typed language that produces JavaScript programs is strongly needed. In this research, we
describe the maintainability and the readability of the JavaScript programs produced by TypeScript, whichis statically typed, prototype-based, and object-oriented programming language, based on our approaches
to refactoring of JavaScript program.

JavaScript コードの TypeScript 化について報告す1 はじめにる．第 4 章で関連する研究を概観し，第 5 章で本論TypeScript はマイクロソフト社が開発したコンパ文を総括する．

イルによって JavaScript コードを生成するプログラ
ミング言語であり，JavaScript を用いた大規模な開発

2 TypeScript を用いたソフトウェア開発の際にコードが複雑になってしまうという問題を解決

JavaScript は多くの Web ブラウザ上で動作し，するために設計されている．したがって，JavaScript

Web ページを構成する HTML を操作するためのを用いて開発されたコードを TypeScript へ置き換

API を持っていることから，ブラウザ上で動作するえる事で，コードのメンテナンス性が向上し今後のアプリケーションの開発に広く用いられている．プ

拡張が容易に行えるようになる．本研究では我々がロトタイプベース言語の JavaScript ではオブジェク

JavaScript アプリケーションの TypeScript 化によるトのプロパティを追加・削除を自由に出来るため柔軟リファクタリングを行った経験に基づき，コードの理な記述が可能な反面，メンテナンス性の高いコード解しやすさ，メンテナンス性について述べる．本論を記述するのが難しい [8]．それに加えて近年の Web

文の構成は以下の通りである．第 2 章で TypeScript

アプリケーションの複雑化に伴って JavaScript を用の概要について述べ，第 3 章で我々が実際に行ったいた開発が大規模化しており，開発のコストを増加さ

A study of software development eﬃciency of TypeScript code.
Kouhei Moriya, Shunsuke Shida, and Kimio Kuramitsu, 横 浜 国 立 大 学, Yokohama NationalUniversity.

せている．TypeScript [6] はこうした JavaScript の持つ問題を解決するために設計された言語であり，静的な型付けを特徴とするクラスベースのオブジェク
ト指向言語である．TypeScript のコードはコンパイ

ラによって JavaScript のコードへと変換されるため，

表1

グラフ記述ツールの開発規模

JavaScript と同一の環境で動作する．TypeScript は使用言語

JavaScript

クラス定義や型付けによりコードのメンテナンス性をファイル数14 個高めている一方で，JavaScript のソースコードとのコード行数3557 行互換性が高く，JavaScript のコードをごくわずかな修正のみでコンパイル可能である．以下に TypeScript(SVG) と HTML5 Canvas を用いたグラフ構造の編の特徴を示す．

集と閲覧を行う機能を持っている．

• 静的な型検査
TypeScript は静的な型付けを行っており，数値3. 1 TypeScript 化の方針

は number 型，文字列は string 型といったよう

JavaScript は最小限の変更で TypeScript としてコに取り扱いが可能になるため，関数定義や変数宣ンパイルが可能なものの，それだけでは静的な型や言の際に，型による検査を行える．

クラス・モジュール等を利用しておらず，TypeScript• モジュール化とクラス定義の機能を十分に活用しているとはいえない．このためプロトタイプベースの JavaScript とは異なり，我々は TypeScript 化に際して以下のような方針をた

TypeScript ではクラスベースを採用しているたてた．

め，あるクラスのインスタンスへのプロパティの追加と削除を行うコードは型検査によってエラーが発生する．

• 既存の JavaScript ライブラリへの型付け• データ構造の再定義
既存の JavaScript コードのデータ構造をクラスやモジュールに置き換える．Richards らの調査
[7] から多くの JavaScript コードにおいてプロパ

上記の特徴はあくまでオプショナルなものであティの追加の大部分はコンストラクタで行われ，り，JavaScript と同様に変数をプロトタイプベープロパティの削除はめったに行われないことがわスのオブジェクトとして扱う事も，型付けの行わかっているため，既存のデータ構造のクラスやモれていない外部の JavaScript ライブラリを使用ジュールへの置き換えは容易に行えることが予想する事も可能である．ただしこの場合は型検査をされる．

無視することになり，TypeScript の特徴を十分に利用出来ているとはいえない．

• モジュール化とクラス定義
コード内の変数に型を付けることで TypeScriptの型検査を活用する．前述のとおり TypeScript

3 JS コードの TypeScript 化

では型宣言を省略することが許容されているが，上で述べた通り，JavaScript のコードに対してごTypeScript の型チェック機構により型が推論出

く僅かな修正を行う事で TypeScript のコードとし来ない場合は JavaScript の変数と同様に全てのてコンパイルを行う事が可能であるため，既存のプロパティへのアクセスが可能な any 型としてJavaScript コードのリファクタリングの際に Type-解釈され，型検査を回避してしまう．

Script 化を行う事が有用であると考えられる．そこで我々は JavaScript で記述された，Web ブラウザ上

3. 2 TypeScript 化の結果で動作するグラフ記述ツールに対して TypeScript 化

前述の方針に基づいた JavaScript コードの Type-を行い，ソフトウェア開発におけるメンテナンス性

Script 化を行った結果定義されたクラスとモジュールについての検証を行う．TypeScript 化に用いるツーの数と，any 型を使用する必要があった箇所の一覧を

ルの概要を表 1 に示す． 本ツールはファイル数が

表 2 に示す．

14 個，コード行数が 3557 行で構成されており，全体が JavaScript で記述され，Scalable Vector Graphics

表2

TypeScript 化の概要

クラス数

45 個

モジュール数2個

any 型の使用

79 箇所なるスコープへの予期しない宣言を防止する事が出来る．

4 関連研究JavaScript はプロトタイプベースを採用している

3. 2. 1 データ構造の定義方法の比較

ことからコードを柔軟に記述出来る点が特徴として挙TypeScript では 45 個のクラスの定義が出現してげられるが，それ故同一の動作を様々な方法で記述すいる．JavaScript では複数の方法でオブジェクトをることが出来てしまう．この問題に対処するために，生成することが出来るが，リファクタリング前のコー

JavaScript を用いて大規模な開発を行う際の指針がドでは以下の二つの方法で定義が行われていた．

提案されてきている [3] ．また，プログラムの振る舞• コンストラクタの定義と new

いを変更することなしにコードの整頓を行うリファク• オブジェクトリテラルによる定義

タリング [1] による JavaScript コードのメンテナンス

一部のデータ構造ではこれら二つの方法による定義性の向上も試みられており [4]，リファクタリングのを同時に使っているものも存在する．それぞれの定義自動化手法の提案もされている [5]．しかし，リファクのうちどちらを利用するか明確な区別がされておらタリングの指針は JavaScript の記述の仕方に対するず，開発時にコードの見通しが悪くなる原因となって指針であり，言語的な制約に基づいたものでは無いたいた．

めプロジェクト毎に大きく異なり，混乱が生じる可能3. 2. 2 型付けによる検査性がある．また，静的な型付けを行う Java と比較し変数宣言に型を付与していった結果，any 型によるて十分なリファクタリングを自動的に行う事が難し宣言を行った箇所が 79 箇所存在したものの，その他い．一方で TypeScript を用いたリファクタリングはについては静的に型を付与している．

TypeScript の持つ構文や型検査機構を活用しているため表記に差が出にくいため有効なアプローチである

3. 3 潜在的なバグの発見といえる．TypeScript の他にも JavaScript の機能をTypeScript 化における過程で，現在は顕在化して補うために設計されコンパイルによって JavaScriptいないものの将来拡張を行った際にバグの原因となるのコードを生成する言語が存在する．CoﬀeeScript [2]

コードを TytpeScript の型検査によって発見していはコードの記述のしやすさに注目して設計された言る．以下に抽象化したコードを示す．

語であり，JavaScript にはないパターンマッチなどの構文をサポートしている．

function f() {var i = 0; j = 0;}

5 おわりに
本研究では既存の JavaScript で記述されたアプリ
ケーションの TypeScript 化を伴うリファクタリング

関数 f では二つのローカル変数 i と j を宣言しようとを行い，今後の拡張に向けたメンテナンス性の向上をしている．しかし上記のコードでは i の宣言と j の宣試みた．TypeScript 化を行う際にデータ構造の定義

言の区切りにセミコロンを使用しており，二つの式とや型の付与を行い，簡潔なコードへの置き換えやいくして扱われてしまうため，j がローカル変数としてでつかの潜在的なバグの発見に成功している．現在はリはなくグローバル変数として定義されてしまう．別ファクタリングの結果どの程度コードの質が上がったの箇所でグローバル変数 j が定義されてしまっていかなどの評価が十分でないため，今後はコードのメンた場合は判別が不能なものの，上記のようなコードテナンス性の評価などに取り組んでいく予定である．

を TypeScript のコンパイラはエラーとして表示し異謝辞

本研究は，JST/CREST「実用化を目指した組込みシステム用ディペンダブル・オペレーティン
グシステム」領域の研究助成を受けて行われた．

参 考 文 献[1] : Refactoring: improving the design of existing code, Addison-Wesley Longman Publishing Co.,
Inc., Boston, MA, USA, 1999.
[2] Bates, M.:
Programming in CoﬀeeScript,
Addison-Wesley Professional, 1st edition, 2012.
[3] Crockford, D.: JavaScript: The Good Parts,
O’Reilly Media, Inc., 2008.
[4] Feldthaus, A., Millstein, T., Møller, A., Schäfer,M., and Tip, F.: Refactoring towards the good partsof javascript, Proceedings of the ACM international
conference companion on Object oriented program-ming systems languages and applications companion, SPLASH ’11, New York, NY, USA, ACM, 2011,pp. 189–190.
[5] Feldthaus, A., Millstein, T., Møller, A., Schäfer,M., and Tip, F.: Tool-supported refactoring for
JavaScript, Proceedings of the 2011 ACM international conference on Object oriented programming
systems languages and applications, OOPSLA ’11,
New York, NY, USA, ACM, 2011, pp. 119–138.
[6] Maharry, D.:
TypeScript Revealed, Apress,Berkely, CA, USA, 1st edition, 2013.
[7] Richards, G., Lebresne, S., Burg, B., andVitek, J.: An analysis of the dynamic behavior
of JavaScript programs, Proceedings of the 2010
ACM SIGPLAN conference on Programming language design and implementation, PLDI ’10, New
York, NY, USA, ACM, 2010, pp. 1–12.
[8] Zakas, N. C.: Maintainable JavaScript, O’Reilly
Media, Inc., 2012.