私がDartを推すかは最後に記載します。JavaScriptへのコンパイルはおまけ(?)的位置付け"おまけ"はちょっと言い過ぎな気がしますが、後述する内容のポイントなので大げさに表現しています。EditorなるIDEを使うほうがよろしいかとコンパイルしてみる今回のテーマはあくまでJavaScriptとして使用することなのでJavaScriptへの変換を試みる。DartVMが搭載されているブラウザであればコンパイルは必要ないのだが、現状DartVMを搭載しているブラウザはDartiumしかなく、このブラウザをメインで使っているユーザは恐らくいない。必然的にブラウザ上で動作させるのであれば「JavaScriptへ変換」せざるを得ない。out.jsオプションとしてなにも設定しない場合は、out.jsと言う名前のJavaScriptファイルに結果を出力する出力結果JavaScriptは壮絶なものとなる為割愛--minifyオプションもあるがmainメソッドに関してはあまり変わらないdart2jsを使用して出力するJavaScriptはもはや後からJavaScriptとして改修できるものではない出力したJavaScriptはnode.jsでの直接実行不可html上で読み込まれることを想定したJavaScriptが出力される自身は動作確認用のhtmlファイルを用意して確認した。z;クラス定義とは関係ないが文字列内の${...}は実行時に展開される継承はもちろんのこと、Javaライクなインターフェースやジェネリクスの継承関係も表現できる。HaxeとくらべてJavaっぽい。Javaになれたエンジニアなら馴染みやすそうだ。Haxe同様、JavaScriptを書いていると言う感覚は皆無。この点に関しては同様のメリット・デメリットがありそう。(Haxeについては前回の記事参照)その他Dartの言語仕様はこちら外部JavaScriptライブラリの使用いろいろ調べたが、外部ライブラリの使用方法は見当たらなかった。機能としてJavaScriptライブラリの読み込みは提供されていない模様。使用したいライブラリがあれば完全にDartコードに書き起こす必要がある。ChromiumにDartVMを搭載したブラウザがDartiumである。ChromeにもDartVMが組み込まれる予定らいしい。Dartium上ではDartコードはJavaScriptに変換することなく実行できる。https://code.google.com/p/dart/source/browse/trunk/dart/samples/hi/hi.html折角なのでどのくらい実行速度が違うのかdart2jsで出力したJavaScriptと比較してみます。JavaScriptの方が早い。この結果をもってどうこう言う気はないちなみにdartコマンドで実行した場合は65msDartを簡単に紹介しました。今回の内容はあまりDartのメリットを感じて頂けなかったかと思います。自身はDartに注目しています。ここまでJavaScriptへ変換できる別言語をざっと触ってきましたが、実開発を想定した場合、コンパイル後のJavaScriptを何かの都合で少しでも触ってしまう(手を加えてしまう)ようなことがあれば、その時点で変換と言うプロセスは破綻します。触ってしまうのか、それはさわれてしまうからです。これまで紹介したアプローチは全て別言語からJavaScriptを出力する方法です。JavaScriptはもちろんヒトが編集することを想定したプログラミング言語です。さわれてしまうのです。(もちろんプロジェクトの厳格なルールとして触らせなければいいのですが、それは置いといて)Dartのアプローチは、そもそもJavaScriptを出力することを目的としていません。JavaScriptの代わりになることが目的です。JavaScriptが大変素晴らしい言語であることはもちろんのことです。昨今、JavaScriptは利用シーンや開発規模の変化から様々な問題も発生しています。このシリーズで紹介したアプローチもその問題の解決方法の一部ですが、更にDartはこれらの問題を根本的に(言語仕様から)解決しようとする試みであると感じています。静的言語からJavaScriptを生み出す仕組みではなく、静的言語をブラウザ上で実行してしまおうという試みなのです。この試みが正しいかどうか、また成功するかどうかはわかりませんが、単純な話、上述した通り、結局編集できないのなら出力結果はプログラミング言語である必要はありません。このことを考えればDartのアプローチはすごく自然な考え方で、それを実現しようとしているところに面白みを感じています。本日参考にさせていただいたサイト今回も本文には掲載しておりませんが、とても参考になりました。Dartの魅力をより詳しく紹介されています。今回シリーズを通して「静的型付けが出来るJavaScriptの上位言語」(の本当に断片)を紹介してきました。今後クライアントサイドのプログラムはますます増加します。大量のソースコードを大人数で実装するような場合、静的な型解決がうむメリットは絶大です。このシリーズで挙げたような言語は、今後かなり大きな意義を持つようになると自身は感じています。時代が変わろうとしているのかもしれませんね。23:20「静的型付けが出来るJavaScriptの上位言語」を触ってみよう。DartTweet広告を非表示にするもっと読むコメントを書く2013-07-11「静的型付けが出来るJavaScriptの上位言語」を触ってみよう。Haxe第4回までやってまいりましたこのシリーズ「静的型付けが出来るJavaScriptの上位言語」を触ってみて自身の感想をまとめています。前回までのTypeScriptとは異なりJavaScript以外の言語へのコンパイルをサポートしている点がものすご~く気になる。今回は「JavaScriptの...」と銘打っているのでJavaScriptのみ。外部JavaScriptライブラリの使用その他いろいろコンパイラインストールMac/WinはDLサイトにインストーラがあるのでダウンロードしてインストールする。sample.jsファイルの内容はコンパイルオプションの列挙コンパイルする。外部JavaScriptライブラリの使用TypeScriptの宣言ソースファイルのようにexternと言う仕組みがある。externが用意されたライブラリはもちろん型を考慮してすぐにHaxeコードに取り込める。jQueryExternjQueryExternの使用方法externが無い場合、自分で用意するか、untypedキーワードを使ってライブラリが読み込まれていることを前提としたコードを書くことになる。上記「コンパイルしてみる」の通り、Haxeは素のJavaScriptのコンパイルは行えない。このことからuntypedキーワードを使ってのコーディングはHaxe上ではあまり多用するものではないように感じる。#2で紹介したEnums、ジェネリクスももちろんある。Enum要素をオブジェクトのように扱うことができたり、先日のバージョンアップで追加された抽象型は魅力的。詳しくは以下等を参照http://haxe.org/ref/enums?lang=jphttp://haxe.org/manual/haxe3/featuresひとつの言語を語るのには全くもって情報が少なすぎるように思いますが、一旦まとめます。一言でいうと「重厚感」。TypeScriptからの流れで対応した経緯からかもしれませんが、もはやJavaScriptとは一線を画した言語であると感じました。様々な言語へコンパイルすることが目的であれば全く問題ありませんが、今回のテーマのように「JavaScriptを静的型付けする」こと(JavaScriptの代替)が目的であれば、やや重い気もします。多くのメンバーがJavaScriptに慣れ親しんでいるようなプロジェクトだと、Haxeの重さはインパクトがかなり大きいように思います。この重さが効果を発揮するような状況ももちろんあります。Haxeのメリットを最大限享受できるよう使い処をしっかり考えて使いたいと思います。自身の大本命Dartです。本日参考にさせていただいたサイト本文には載せておりませんが、いろいろ参考にさせていただきました。ありがとうございました。01:44「静的型付けが出来るJavaScriptの上位言語」を触ってみよう。HaxeTweet広告を非表示にするもっと読むコメントを書く2013-07-04「静的型付けが出来るJavaScriptの上位言語」を触ってみよう。#3前々回、前回と続けておりますこのシリーズ。自身の直感を頼りに「触ってみよう」レベルの情報を連載しております。(コアな情報は記載していません。)今日はTypeScript最終章でいきたいと思います。宣言ソースファイルのコンパイルIDEではいってみましょAnyTypeScriptにはany(aは小文字)と言う型があります。これはなんだと言うと、なんでも型です。これを指定すると全ての型チェックが無効になります。え、そもそも型指定する為にTypeScript使うんじゃ...こちらではこのように記載されています。形式のデータを扱うような場合に便利なことがあります。キャストするとどんな式でもあらゆる型チェックを回避できるので、どうしてもうまく書けない時の回避策としても重要です。既存コードなど型を意識しないコードになんでも型を使用することで、柔軟に、簡潔に流用することが出来るような仕組みになっています。thisの解決JavaScriptでなにが厄介かと言うとこれです。使用箇所よってthisの中身は変化する為、いちいち気を使わないといけない。usethis.jshelloもちろん「hello」と自身のプロパティが表示されるここまではわかる。型を指定出来ないクロージャとかでのthisの扱いが問題。usethis.jsundefinedundefined。}のような関数定義をアロー関数と呼ぶらしい。require("./utils");別ファイルとしてのexportやrequireについては前回参照*.d.ts宣言ソースファイルというらしい。既存JavaScriptを元にTypeScriptとしての定義のみを書き出したファイル。/>宣言ソースファイルのコンパイル勘違いをしておりまして。過去の記事で「jsファイルからのコンパイル」と書いていましたが、JavaScriptファイルから宣言ソースファイルを生成する方法はありませんでした。TypeScriptでJavaScriptをライブラリとして展開する場合に、宣言ソースファイルを実装した.tsファイルから生成することができます。-d)オプションを加えてコンパイルすることで宣言ソースファイルを出力できます。sample.tssample.tsで実装した型定義がsample.d.tsファイルとして出力されますIDEここまで自身は全てテキストエディタで実装し、コマンドでコンパイルしてきました。実際にTypeScriptを使ってアプリケーションを作成するのであれば、IDEを使うことが理想的です。TypeScriptの型解決はIDE上で更に効果を発揮します。型が定まっていることで、充実したコード補完やリアルタイムにコンパイルエラーを確認できるからです。デモ動画を見てもらうとその効果がよく分かるのではないかと思います。TypeScriptはどんなIDEに対応しているか。2012を初め、以下のエディタを公式にサポートをしています。TextViEmacs公式サポートエディタ後、IntelliJはプラグインがある模様(JetBrainsすげぇ!!ということはWebStormでも使える?!)さてさて。ここまで3回にわたってTypeScriptをざっくり触ってきたんですが、感想をこれまたざっくりとまとめたいと思います。型解決できているって健康的アプリケーションは複数のデータと処理を統合することで動きます。他のデータ・処理がどのような責務を持ってどのように振る舞うかを型によって表現し保証することでスムーズな連携を可能とします。JavaScript上で他の部品を使用する場合の言い知れぬ不安を、静的に型を定義することで事前に解決することができます。これは精神衛生上かなり健康的!!オブジェクト指向プログラミング(OOP)に適している素のJavaScriptでもOOPは可能です(若干異論ありそうな気がしますが...)。これじゃない感が拭えません。OOPは型と言う概念があっての賜物かなと自身は思います。記述するコード量が増えます。以前に記載した通り、コンパイル済JavaScriptに型は一切反映されません。言うことは実際動くプログラム以外のコードを書く必要があります。!!ここでIDEがいい仕事をします。IDEが型を理解することで↑に挙げたような入力補完やコンパイルエラーのリアルタイム検知ができます。コードを書く量は増えますが、このようなIDE機能を活用することで、実質的にコードをタイプする量は、型解決しないコードを書く場合と大差ないと思われます。このようなIDEの機能を使用できるのも型と言う概念があってこそです。柔軟性に優れているTypeScriptとして自身が一番優れていると感じた点はここです。素のJavaScriptも書ける。みたいな部分的な使い分けが可能です。造るモノ・ヒトに応じたいい塩梅を実現できます。既存コードがそのまま動作する↑でも挙げましたがTypeScriptはJavaScriptをそのまま記述できます。言うことは既存資源をそのまま流用できます。今JavaScriptでなにかしようとした場合、ライブラリを使用しないことはほぼ皆無です。既存のライブラリをそのまま使用できるメリットは非常に大きいと思います。(使えるというだけで、素のJavaScriptは型解決できません。今度は同じノリでHaxeを試してみたいと思います。00:04「静的型付けが出来るJavaScriptの上位言語」を触ってみよう。#3Tweet広告を非表示にするもっと読むコメントを書く2013-06-26「静的型付けが出来るJavaScriptの上位言語」を触ってみよう。0.9の新機能)えぇとですね。前回終わりにこんな事を書いてました次回「TypeScript後半戦」として以下のようなことを試してみます。Anythisの解決...が、しかし。0.9」を早速触ってみようと思います。0.9」から実装された新機能を試してみます。公式アナウンスを参考にします。Genericsジェネリクスですねぇ。実装時に型指定するあれですねぇ。出した後なんのオブジェクトかわからないから結局型チェック的なことが必要になったり。これで入れる側・使う側双方スッキリですね。4.サンプルコードのまんまですね。関数本体は1箇所に定義して引数パターンをチェックオーバーロードはv0.8以前にもあった機能ですが、今回のバージョンアップで関数本体以降にオーバーロードが定義できなくなったらしいです。関数本体が一箇所にしか定義できないのはぐぬぬな感じなのでこのくらいで。require('./client');はい。このmodule.exportsとrequireはなんなんだと。これはnode.js等のサーバサイドJavaScriptで実行することを想定した定義です。ブラウザ上では動作しませんnode.jsのrequire,module.exportsはこちらで詳しく解説されています。ある程度のボリュームのJavaScriptを書くと絶対ほしくなる。return;↑のコードはOKです。コンパイルエラーになりません。コンパイル後のJavaScriptに値が反映されます。{}));greet('typescript');greet();以上、ざっと新機能紹介してみました。触れる程度しか紹介できてませんでしたが、型に厳密な言語では必須になっているGenericsやEnumが実装されたことで、かなり実用的になった感が増したのは私だけでしょうか。TypeScriptを使用するメリットの一つとして、必ず型を定義する必要はないと言うことが挙げられます。厳密に型を定義するところと、柔軟にサクサク実装するところを上手く使い分けることで、よりTypeScriptの魅力が引き立つのではないかと考えています。今度こそほんまに「TypeScript最終回」です。以下のようなことを試してみます。Anythisの解決module(namespace)exportimportファイルインポート*.d.tsjsファイルからのコンパイル外部ライブラリの使用IDE本日参考にさせていただいたサイトありがとうございました。09:27「静的型付けが出来るJavaScriptの上位言語」を触ってみよう。失敗ルートのフェロモンは行きの1回しか付けられていない為、一定時間で消える。後続のアリはフェロモンの濃いルートを選択することで目的にに辿り着く。後続のアリがまたフェロモンを出すので、最適なルートは常にフェロモンが常に一番濃くなる。複数の目的地を通りセンターへ戻る為の最適ルートの検索。宇宙探査船の使用するエネルギーを減らす為、衛星軌道を利用している。どのルートを通ればどの惑星の衛星軌道にのり、よりエネルギーを節約できるかを分析。今後なにかの際に使えるアイデアかも。20:22アリの行動原理をルート検索プログラムに利用するTweet広告を非表示にするもっと読むコメントを書く2013-06-19「静的型付けが出来るJavaScriptの上位言語」を触ってみよう。考えた結果、やはり型の表現が難しいことが理由のひとつかと思ったりした。そこで!!!「静的型付けが出来るJavaScriptの上位言語」を触ってみよう。今日はその第一弾なにやんの??探すといろいろある、どれがいいとかはわからないので、とりあえずちょろりと書いて感覚を味わってみようと思う。(このシリーズはあくまで導入部分のみを記載、詳細な部分にはふれません。typescriptこれだけ。scopeyがないっておこられちゃいましたね。'string'ですね。'foo';が怒られますね。Point3D;})(Point);当たり前ですが、ちゃんと継承が実装されてる継承すると__extendsメソッドが自動生成される継承を全く使ってなければ__extendsは生成されないBackbone.jsなんかはUnderscoer.jsの_.extendを使うけど、この場合はextendsは使えない??(これは後半で記載します)んんん、なるほど、もはやこれだけでも素晴らしと思ってしまった。こっからが面白いんですが、情報量が多くなってしまったので今日はここまで。次回「TypeScript後半戦」として以下のようなことを試してみます。Anythisの解決module(namespace)exportimportファイルインポート*.d.tsjsファイルからのコンパイルIDE本日参考にさせていただいたサイトありがとうございました。23:59「静的型付けが出来るJavaScriptの上位言語」を触ってみよう。けが出来るJavaScriptの上位言語」を触ってみよう。Dart「静的型付けが出来るJavaScriptの上位言語」を触ってみよう。Haxe「静的型付けが出来るJavaScriptの上位言語」を触ってみよう。#3「静的型付けが出来るJavaScriptの上位言語」を触ってみよう。ブログを報告するスターをつけました引用をストックしましたストック一覧を見る閉じる引用するにはまずログインしてくださいログイン閉じる引用をストックできませんでした。再度お試しください閉じる限定公開記事のため引用できません。