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のダウンロード
 Mavenのダウンロード
すでにインストールされている場合は、必要ありません。
※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の画像の赤い囲みの数字のバージョン使用してください
古すぎたり新しすぎたりすると安定しない場合があります

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

しばらくするとカレントディレクトリに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

ファイルの読み込みなどをしなければ、直接ブラウザに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
というファイルが作成されています。
実際のソースを弄っていくにはこのファイル編集していきます。

Hellow World !!

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

System.out.prinln("Hellow World !!");

という行を追加します。

> mvn package

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

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