TeaVMを利用したJavaによるhtml5開発

# TeaVMとは
**TeaVMとはJavaからJavaScript/htmlへ変換するトランスパイラです。**
TeaVMを使うことによりJavaでhtml5の開発できるようになります。

似たようなツールとしてはGoogleのGWT(Google Web Toolkit)がありますが、GWTがソース(.java)からJavaScript変換するのに対して
TeaVMはByteCode(.classや.jar)からJavaScriptへ変換します。
なのでJava以外のJVM言語などからもTeaVMを利用することができます。
(公式ページにはkotlinやScalaのサンプルプロジェクトがあります)

またリフレクションなどの機能もGWTより優れています。

# 公式ページ
TeaVMののURL http://teavm.org/
TeavVMのソース　https://github.com/konsoletyper/teavm

TeaVMを利用するにはJDKとMavenが必要になりますのでダウンロード/インストールしてください。
[JDKのダウンロード](https://www.oracle.com/technetwork/java/javase/downloads/index.html)
[Mavenのダウンロード](https://maven.apache.org/)
すでにインストールされている場合は、必要ありません。
※JDKは8が安定するかもしれません

# プロジェクトの作成

詳しくは公式HPのGetting Startedのページを参照してください。

**※TeaVMの初心者はgithubから最新のソースを落としてきて使用するのはおすすめしません**
　**安定してなかったり、コンパイルできなかったり、テストがずっと動いてたりしますので**
　**初めのうちはMavenによるTeaVMプロジェクト作成を推奨します**

MavenによるTeaVMプロジェクトの作成は次のように、コマンドラインで以下のコマンドを実行してください

```
> mvn -DarchetypeCatalog=local -DarchetypeGroupId=org.teavm -DarchetypeArtifactId=teavm-maven-webapp -DarchetypeVersion=0.6.1 archetype:generate

```

Mavenに指定する-DarchetypeVersionのバージョンは、
最新版は公式のGetting startedの画像の赤い囲みの数字のバージョン使用してください
古すぎたり新しすぎたりすると安定しない場合があります

![バージョンの画像](http://sio29.sakura.ne.jp/tmp/qiita/teavm/image/TeaVM_Version.png)

コマンドを実行すねと以下の項目を聞かれるので入力してください。
groupIDはグループID、パッケージ名でいいと思います
artifactIDはプロジェクト名を指定します。
versionはそのまま
pakageもgroupIDのものが使用されるのでそのままで
最後に「Y」を入力するとプロジェクトが作成されます

![バージョンの画像](http://sio29.sakura.ne.jp/tmp/qiita/teavm/image/TeaVM_CreateProj.png)

しばらくするとカレントディレクトリにartifactIDで指定した名前のフォルダが作成され、その中にプロジェクトが作成されます

# プロジェクトのビルド

プロジェクトが作成されたフォルダ(artifactIDで指定した名前)へ移動し

```
>mvn clean package
```

すると初回のビルドがされます。
**最初は必要なリポジトリをダウロードしてくるので時間がかかります。**
2回目以降はビルドに1分もかからないと思います

2回目以降のビルドは

```
>mvn package
```

でオッケーです。

# 生成されたJavaScript/htmlの実行

ビルドされたファイルは
target/(アーティアクトID)-(バージョン)
というフォルダに作成されます。

versionとpackageを指定しない場合は、
target/(アーティアクトID)-1.0-SNAPSHOT
というフォルダに生成されていると思います

フォルダ内のindex.htmlをブラウザで読み込めば次のような表示がそれればビルドがうまくいっています

**TeaVM generated element**
![バージョンの画像](http://sio29.sakura.ne.jp/tmp/qiita/teavm/image/TeaVM_Build.png)

ファイルの読み込みなどをしなければ、直接ブラウザにhtmlを読み込ませるだけで実行できます。
ただしファイルの読み込みやXMLHttpRequestなどを使用する場合はローカルにサーバーを立てる必要があります。(CORSになるため)

# 実行ファイルと必要なファイル
実行に必要なファイルは次のファイルだけです。srcなどは必要ありません
>index.html
>teavm/classes.js
>teavm/runtime.js (ない場合がある)

デバッグ情報が必要な場合は次のファイルが必要になります。
>teavm/classes.js.map
>teavm/classes.js.teavmdbg


# 編集
プロジェクトを作成すると
src/main/java/パッケージ名/Client.java
というファイルが作成されています。
実際のソースを弄っていくにはこのファイル編集していきます。

![Client.javaのソース](http://sio29.sakura.ne.jp/tmp/qiita/teavm/image/TeaVM_Src.png)


# Hellow World !!
簡単なコードの追加。
コンソールに「Hellow World !!」という文字を表示します。
mainメソッドの最後に画像のように

```
System.out.prinln("Hellow World !!");
```
という行を追加します。

![HellowWorld](http://sio29.sakura.ne.jp/tmp/qiita/teavm/image/TeaVM_HellowWorld.png)

```
> mvn package
```

として再度パッケージのビルドをし、index.htmlを再びブラウザで読み込みます。
するとJavaScriptコンソールに「Hellow World !!」と出ているはずです

![コンソール](http://sio29.sakura.ne.jp/tmp/qiita/teavm/image/TeaVM_HellowWorldConsole.png)

JavaScriptコンソールはブラウザによって異なります。
Firefoxではメニュー→ツール→ウェブ開発→ウェブコンソール(またはCTRL+SHIFT+KかCTRL+SHIFT+I)
Chromeはメニュー→その他のツール→デベロッパーツール→Consoleのタブをクリック(またはCTRL+SHIFT+I)

<!--
# 関連記事(予定)
-->

<!--
[TeaVMのできることできないこと]()
[TeaVMによる描画]()
[TeaVMでサウンド再生]()
[TeaVMでマウス、キーボードの読み込み]()
[TeaVMでファイルの読み込み]()
[TeaVMからJavaScriptの関数を呼ぶ]()
[TeaVMでJavaScriptクラスのバインド]()
[TeaVMでデバッグ]()
[TeaVMのスレッドと非同期関数]()
[TeaVMでソースではなくJarから既存のクラスを取り込む]()
-->

<!--
[TeaVMのできることできないこと](https://qiita.com/sio29/private/5a981bbe2ec7c8b2655c)
[TeaVMによる描画](https://qiita.com/sio29/private/fe4be6f7c53dc06a1d47)
[TeaVMでサウンド再生](https://qiita.com/sio29/private/9f47461a7b276de447b9)
[TeaVMでマウス、キーボードの読み込み](https://qiita.com/sio29/private/33f464ac7ac662d06d29)
[TeaVMでファイルの読み込み](https://qiita.com/sio29/private/4c1008f60c03185975e0)
[TeaVMからJavaScriptの関数を呼ぶ](https://qiita.com/sio29/private/8d9fa0259422b8784d93)
[TeaVMでJavaScriptクラスのバインド](https://qiita.com/sio29/private/d6c1830032f023edfb92)
[TeaVMでデバッグ](https://qiita.com/sio29/private/4b4b37fe3dd976512e00)
[TeaVMのスレッドと非同期関数](https://qiita.com/sio29/private/2d6ac0bb6c1c61502510)
[TeaVMでソースではなくJarから既存のクラスを取り込む](https://qiita.com/sio29/private/9053e41c0e9a6f619456)
-->


<!--
コメントにする方法
-->