Eclipse と VJET を用いた JavaScript プログラミング

VJET とは，次の機能を持つ Eclpse のプラグインです．Eclipse で JavaScript のプログラムを実行してみます

この Web ページで行うこと

VJET の要点

前準備

Java 25（Temurin 25 JDK） のインストール

Eclipse Temurin（Adoptium）のインストールを行い、Javaのプログラムをコンパイル・実行する環境を整える。扱う環境は、Windows搭載パソコンである。現時点(2026年6月)での最新LTS版である Java 25（Temurin 25 JDK）を推奨する。

[Windows での Java 25（Temurin 25 JDK） のインストール手順を見るには、ここをクリック]

Windows での Java 25（Temurin 25 JDK） のインストール

以下のいずれかの方法で Java 25（Temurin 25 JDK）をインストールする。JDKがインストール済みの場合、この手順は不要である。

方法 1：winget によるインストール

【インストールコマンドの実行方法】

管理者権限でコマンドプロンプトを起動する（手順：Windowsキーまたはスタートメニュー → cmd と入力 → 右クリック → 「管理者として実行」）。そして、コマンド全体をコマンドプロンプトにコピー＆ペーストする。

Temurin の Windows インストーラー（.msi）は、ユーザー単位ではなくマシン単位でインストールされる（1台に1つのインストール）。そのため、システム全体（全ユーザー向け）にインストールするには管理者権限が必要である。インストール完了後、コマンドプロンプトを再起動するとPATHが反映される。

REM Java 25（Temurin 25 JDK） をインストール（PATH と JAVA_HOME を更新）
winget install --id EclipseAdoptium.Temurin.25.JDK -e --silent --accept-source-agreements --accept-package-agreements --override "ADDLOCAL=FeatureMain,FeatureEnvironment,FeatureJarFileRunWith,FeatureJavaHome INSTALLDIR=\"C:\Program Files\Eclipse Adoptium\jdk-25\" /quiet"

上記の --override 内の指定の意味は次のとおりである。FeatureEnvironment はPATH環境変数の更新、FeatureJavaHome は JAVA_HOME 環境変数の更新、FeatureJarFileRunWith は .jar ファイルとJavaアプリケーションの関連付けである。INSTALLDIR はインストール先フォルダの指定である。

方法 2：インストーラーによるインストール

  1. Adoptium公式サイト（https://adoptium.net/temurin/releases/）にアクセスし、Version として「25 - LTS」、Operating System として「Windows」を選び、.msi 形式のWindows用インストーラーをダウンロードする。
  2. ダウンロードした .msi ファイルを実行し、インストールプログラムを起動する。
  3. ライセンス条項を確認し、同意できる場合はチェックを入れて次へ進む。
  4. 「Installation Scope」画面では「Install for all users of this machine」を選ぶ
  5. 「Custom Setup（カスタムセットアップ）」画面で、インストールする機能を選択する。既定では「Add to PATH（PATH環境変数への追加）」と「Associate .jar」（.jarファイルの関連付け）が有効になっている。さらに、ツリー内でバツ印（×）が付いている「Set JAVA_HOME variable（JAVA_HOME環境変数の更新）」をクリックして有効に変更することを推奨する。これらを有効にしないと、コマンドプロンプトから java コマンドを実行できなかったり、開発ツールがJDKを見つけられなかったりする。
  6. 「次へ (Next)」をクリックし、続いて「インストール (Install)」をクリックしてインストールを開始する。完了後「Finish」で閉じる。

インストールの確認

コマンドプロンプトで以下を実行する。

java --version

バージョン番号（例：openjdk 25.x.x）が表示されればインストール成功である。「'java' は、内部コマンドまたは外部コマンドとして認識されていません。」と表示される場合は、インストールが正常に完了していないか、PATHが反映されていない（コマンドプロンプトを再起動して再度確認する）。

あわせて、コンパイラと JAVA_HOME も確認しておくとよい。

javac --version
echo %JAVA_HOME%

Eclipse のインストール

Eclipse をインストールする。扱う環境は、Windows搭載パソコンである。

[Windows での Eclipse のインストール手順を見るには、ここをクリック]

Windows での Eclipse のインストール

以下のいずれかの方法で Java 25（Temurin 25 JDK）をインストールする。JDKがインストール済みの場合、この手順は不要である。

方法 1：winget によるインストール

【インストールコマンドの実行方法】

管理者権限でコマンドプロンプトを起動する（手順：Windowsキーまたはスタートメニュー → cmd と入力 → 右クリック → 「管理者として実行」）。そして，コマンド全体をコマンドプロンプトにコピー＆ペーストする。

REM Temurin 25 JDK をインストール
winget install --id EclipseAdoptium.Temurin.25.JDK -e --accept-source-agreements --accept-package-agreements

winget が使えない場合や，インストール先・パッケージ種類を画面で選びながら導入したい場合は，次の方法を用いる。

方法 2：インストーラーによるインストール

公式サイトからダウンロードしてインストールできる。詳しくはhttps://www.kkaneko.jp/tools/win/eclipse.htmlで説明している。

Eclipse の初期設定、使用方法の基本

詳しくはhttps://www.kkaneko.jp/tools/win/eclipse.htmlで説明している。

Web Development Tools, JSDT のインストール

  1. Eclipse を起動
  2. インストールしたいので「Help」 → 「Install New Software」と操作
  3. Work With のところを設定し、しばらく待つ
  4. 「Web, XML, Java EE and OSGi Enterprise Development」を展開
  5. 必要なパッケージをチェック
    • Eclipse WebDevelpment Tool
    • JavaScript Development Tools
    • Web Page Editor
    • WST Server Adapter
  6. インストールされるパッケージの確認

    確認の後、「Next」をクリック

  7. ライセンス条項の確認
  8. インストールが始まる
  9. Eclipse の再起動

VJET のインストール

  1. Eclipse を起動
  2. インストールしたいので「Help」 → 「Install New Software」と操作
  3. Work With の右横の「Add」をクリック
  4. Name と Location の設定 
    http://www.ebayopensource.org/svn/vjet/tags/RELEASE/plugin/
  5. 「VJET」をチェックし、「Next」をクリック
  6. インストールされるパッケージの確認

    確認の後、「Next」をクリック

  7. ライセンス条項の確認
  8. インストールが始まる
  9. Eclipse の再起動

VJET プロジェクトの新規作成

  1. Eclipse を起動
  2. （オプション）テキストファイルエンコーディングの確認
  3. 新規のVJET プロジェクトを作成したいので「File (ファイル)」→「New (新規)」→「Project (プロジェクト)」と操作する．
  4. VJET Project (VJET プロジェクト) を選ぶ
  5. プロジェクト名の設定

    VJET プロジェクト名は好きにつけて良いが，全角文字は避ける．分かりやすい名前が良い． ここでは，例として，次のように指定する．

    • プロジェクト名：　好きな名前を付ける
  6. オプションの設定

    既定のままでよい。「Finish」をクリック．

  7. いま作成した VJET プロジェクトが，Script Explorer ウインドウに表示される

JavaScript ファイルの新規作成

  1. プロジェクトを右クリックし、 「New (新規)」→「JavaScript Source File」と操作する．
  2. JavaScript ファイル名の設定
  3. いまさ作成したJavaScript ファイルを編集する．

    次のようなプログラムを書いてみる

    編集が終わったら、＜コントロールキー＞＋「S」（同時押し）で保存する． 

    print("Hello, World!");

JavaScript プログラムと実行結果例

メッセージ表示

先ほど作成した JavaScript ファイルを次のように書き換え 

document.write("Hello, World!");
println("I am here");

実行したいので、index.html を右クリックし、「Run As 」→「Run on Server」と操作する．

変数と式

先ほど作成した JavaScript ファイルを次のように書き換え 

var a = 100;
var b = a * 1.05;
print("a = ", a);
print("b = ", b);

実行したいので、index.html を右クリックし、「Run As 」→「Run on Server」と操作する． 

rhino main.js

関数定義

先ほど作成した JavaScript ファイルを次のように書き換え 

function area(x) {
  var a = x * x * 3.14;
  return a;
}
var x = 100;
print("x = ", x);
print("area(x) = ", area(x));

実行したいので、index.html を右クリックし、「Run As 」→「Run on Server」と操作する． 

rhino main.js

Java のメソッドを使う

先ほど作成した JavaScript ファイルを次のように書き換え 

java.lang.System.out.println("Hello, World!");

実行したいので、index.html を右クリックし、「Run As 」→「Run on Server」と操作する． 

rhino main.js

JSON

先ほど作成した JavaScript ファイルを次のように書き換え 

var x = 100;
print( "x =", x);
print( JSON.stringify(x) );

var M = [0, 1, 2];
print( "M =", M);
print( JSON.stringify(M) );

var t = {id:1, name:"hoge"}
print( "t =", t);
print( JSON.stringify(t) );

実行したいので、index.html を右クリックし、「Run As 」→「Run on Server」と操作する．

メッセージ表示

先ほど作成した main.js を書き換え 

println("Hello, World!");
println("I am here");

実行したいので、index.html を右クリックし、「Run As 」→「Run on Server」と操作する．

変数と式

先ほど作成した main.js を書き換え 

var a = 100;
var b = a * 1.05;
document.writeln("a = ", a);
document.writeln("b = ", b);

実行したいので、index.html を右クリックし、「Run As 」→「Run on Server」と操作する．

関数定義

先ほど作成した main.js を書き換え 

function area(x) {
  var a = x * x * 3.14;
  return a;
}
var x = 100;
document.writeln("x = ", x);
document.writeln("area(x) = ", area(x));

実行したいので、index.html を右クリックし、「Run As 」→「Run on Server」と操作する．

JSON

先ほど作成した main.js を書き換え 

var x = 100;
document.writeln( "x =", x);
document.writeln( JSON.stringify(x) );

var M = [0, 1, 2];
document.writeln( "M =", M);
document.writeln( JSON.stringify(M) );

var t = {id:1, name:"hoge"};
document.writeln( "t =", t);
document.writeln( JSON.stringify(t) );

実行したいので、index.html を右クリックし、「Run As 」→「Run on Server」と操作する．