JavaScriptで静的型付けを実現できる代替言語まとめ
JavaScriptを使っていて常に悩みのタネなのが変数の型付けです。スクリプト言語に慣れた方であれば気にならないかも知れませんが、サーバサイドやアプリ開発でコンパイルするのに慣れているプログラマーにとっては書いていて不安に感じる点もあるでしょう。
そこで今回はJavaScriptの代替言語の中でも静的型付けをサポートするものを紹介します。
Haxe
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); | |
| } | |
| } |
開発対象としてはiOS/Androidを含め、サーバサイドまで幅広く対応します。
Home – Haxe – The Cross-platform Toolkit
elm
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 |
Kotlin
主に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") | |
| } | |
| } | |
| } |
Kotlinの開発元はJetBrainsとなっています。
RapydScript
RapydScriptはPythonにインスパイアされたaltJSになります。型を定義せずに記述もできますが、定義することで間違った使い方をした際にエラーを起こすこともできます。
| def optimizeMe(a: Number, b:Number) -> Number: |
Pythonの書き方に慣れた方はCoffeeScriptよりも手軽に使えるかも知れません。
RapydScript | Pythonic JavaScript that doesn't suck
Flow
既存のコードに対して型定義を行い、ビルド時に除去することによって既存のコードに影響を与えずに型付け機能だけを追加できます。
| // @flow | |
| function square(n: number): number { | |
| return n * n; | |
| } | |
| square("2", "2"); // Error! |
開発する言語自体は変えずに追加できるのが便利です。
Flow: A Static Type Checker for JavaScript
TypeScript
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(); |
ECMAScript2017の先進的な機能も取り込まれているので、より新しいJavaScriptの機能を使っていきたいという方にもぴったりです。
TypeScript – JavaScript that scales.
業務システムであったり、エンタープライズ寄りになればなるほど、開発規模が大きくなって参加するプログラマも多くなります。そうした中ではスクリプト言語の変数の型が決まっていない開発は混乱をきたすこともあります。
今回紹介したような言語を使ってWebシステム開発を効率化してください。
コメントは受け付けていません。