3stepで出来るjQuery設置方法を解説【eclipse編】

jquery

javaデベロッパとeclipseは切っても切れない縁です。javaデベロッパがHTMLやJavaScript(jQuery)の開発をする時、eclipseを使うことが多いと思います。
HTMLやJavaScript(jQuery)の開発もeclipseを使ったほうが効率がよいとわたしは信じています!
今回はeclipseのWTPプラグインを使った、「静的Webコンテンツのプロジェクト」にjQueryをセットする方法を解説します。

[スポンサーリンク]

Step1 静的Webコンテンツのプロジェクトを作成します

eclipseの「Web Tools Platform (WTP)」を使って静的Webコンテンツを作成します。
「Web Tools Platform (WTP)」がeclipseに入っていない場合は、別途プラグインを入れて下さい。

「eclipse」内で、右クリック>新規>その他>Web>静的Webプロジェクト をクリックします。
jquery-setting1

プロジェクト名を指定して、完了をクリックします。
jquery-setting2

静的Webプロジェクトが完成しました。

jquery-setting3

Step2 jQueryを設置します

まずは、jQuery本家からjqueryをダウンロードします。
URLはhttp://jqueryui.com/です。

赤枠部分をクリックします。
jquery-setting4

デフォルトで全てにチェックが入った状態なので、そのまま画面下のダウンロードボタンをクリックします。
jquery-setting5

ダウンロードしてきたファイルを先ほど作ったプロジェクトの「WebContent」へ入れます。

jquery-setting6

Step3 動作確認用ソースを作ります

先ほど入れたindex.htmlが既に動く状態ですが、自分でサンプルhtmlファイルを作って動作確認しましょう。
動作確認用htmlファイル「sample.html」のソースです。「index.html」と同じ場所に設置します。

<!doctype html>
<html lang="us">
<head>
	<meta charset="utf-8">
	<title>jQuery sample</title>
	<link href="css/smoothness/jquery-ui-1.9.1.custom.css" rel="stylesheet">
	<script src="js/jquery-1.8.2.js"></script>
	<script src="js/jquery-ui-1.9.1.custom.js"></script>
	<script>
	$(function() {
		$( "#sample-button" ).click(function() {
			alert("ok");
		});
	});
	</script>
</head>
<body>

<h1>sample</h1>
<input type="button" id="sample-button" value="click" />

</body>
</html>

解説

今回は、jQueryのみを使用しているので、7行目のみでも動きます。6行目、8行目が含まれていても問題ありません。
10行目からのスクリプト部分で、ボタン(id="sample-button")がクリックされた時にアラート画面が表示されます。

実行します

「sample.html」をブラウザで開いて動作確認をします。
せっかくjQueryを使っているのに多少寂しいですね。動作確認用なので極力シンプルなソースにしました。

jquery-setting8

さいごに

jqueryの設置と簡単な動作確認ですが、フロントエンドエンジニアには簡単すぎることだと思いますが、バックエンドがメインのjavaエンジニアには、残念ながらjqueryに不慣れなこともあって最初の設定が上手くいかないこともあります。
jqueryの設定自体は簡単なので、何度かやってしまえば体が覚えてくれると思います。