JavaScriptで静的型付けを実現できる代替言語まとめ

by moongift : 2017/04/21

JavaScriptを使っていて常に悩みのタネなのが変数の型付けです。スクリプト言語に慣れた方であれば気にならないかも知れませんが、サーバサイドやアプリ開発でコンパイルするのに慣れているプログラマーにとっては書いていて不安に感じる点もあるでしょう。

そこで今回はJavaScriptの代替言語の中でも静的型付けをサポートするものを紹介します。

HaxeはJavaScriptだけでなくJava、C++、PHP、C#、Python、ActionScript3などに変換できます。例えば次のようなコードになります。

	@:generic
	class MyValue<T> {
	public var value:T;
	public function new(value:T) {
	this.value = value;
	}
	}

	class Main {
	static public function main() {
	var a = new MyValue<String>("Hello");
	var b = new MyValue<Int>(42);
	}
	}

view raw index.hxml hosted with ❤ by GitHub

開発対象としてはiOS/Androidを含め、サーバサイドまで幅広く対応します。

elmで書く場合、HTML/JavaScript/CSSを直接書くことはできません。すべてelm上で提供されるので、Webアプリケーション全体の記述ができます。ベースになっているのはHaskellで強力な静的型付けが特徴になっています。

コード例ですが、これで表示まで含めてサポートされます。

	-- Read more about this program in the official Elm guide:
	-- https://guide.elm-lang.org/architecture/user_input/buttons.html

	import Html exposing (beginnerProgram, div, button, text)
	import Html.Events exposing (onClick)


	main =
	beginnerProgram { model = 0, view = view, update = update }


	view model =
	div []
	[ button [ onClick Decrement ] [ text "-" ]
	, div [] [ text (toString model) ]
	, button [ onClick Increment ] [ text "+" ]
	]


	type Msg = Increment \| Decrement


	update msg model =
	case msg of
	Increment ->
	model + 1

	Decrement ->
	model - 1

view raw index.hs hosted with ❤ by GitHub

主にAndroidアプリを開発するのに用いられるKotlinですが、JavaScriptとして変換もできます。Androidで動作するレベルでの静的型付けがWeb上でも可能となっています。

	/**
	* A reference must be explicitly marked as nullable to be able hold a null.
	* See http://kotlinlang.org/docs/reference/null-safety.html#null-safety
	*/
	package multiplier

	// Return null if str does not hold a number
	fun parseInt(str: String): Int? {
	try {
	return str.toInt()
	} catch (e: NumberFormatException) {
	println("One of the arguments isn't Int")
	}
	return null
	}

	fun main(args: Array<String>) {
	if (args.size < 2) {
	println("No number supplied");
	} else {
	val x = parseInt(args[0])
	val y = parseInt(args[1])

	// We cannot say 'x * y' now because they may hold nulls
	if (x != null && y != null) {
	print(x * y) // Now we can
	} else {
	println("One of the arguments is null")
	}
	}
	}

view raw index.kts hosted with ❤ by GitHub

Kotlinの開発元はJetBrainsとなっています。

RapydScriptはPythonにインスパイアされたaltJSになります。型を定義せずに記述もできますが、定義することで間違った使い方をした際にエラーを起こすこともできます。

def optimizeMe(a: Number, b:Number) -> Number:

view raw index.py hosted with ❤ by GitHub

Pythonの書き方に慣れた方はCoffeeScriptよりも手軽に使えるかも知れません。

既存のコードに対して型定義を行い、ビルド時に除去することによって既存のコードに影響を与えずに型付け機能だけを追加できます。

	// @flow
	function square(n: number): number {
	return n * n;
	}

	square("2", "2"); // Error!

view raw index.js hosted with ❤ by GitHub

開発する言語自体は変えずに追加できるのが便利です。

Microsoftが開発し、Googleの社内標準言語にも取り入れられたaltJSです。Visual Studio Codeとの親和性も高く、入力補完機能なども便利に使えます。より大規模な開発に向いています。

	class Greeter {
	constructor(public greeting: string) { }
	greet() {
	return "<h1>" + this.greeting + "</h1>";
	}
	};

	var greeter = new Greeter("Hello, world!");

	document.body.innerHTML = greeter.greet();

view raw index.ts hosted with ❤ by GitHub

ECMAScript2017の先進的な機能も取り込まれているので、より新しいJavaScriptの機能を使っていきたいという方にもぴったりです。

業務システムであったり、エンタープライズ寄りになればなるほど、開発規模が大きくなって参加するプログラマも多くなります。そうした中ではスクリプト言語の変数の型が決まっていない開発は混乱をきたすこともあります。

今回紹介したような言語を使ってWebシステム開発を効率化してください。

コメントは受け付けていません。