(Eclipse)Javaアプリケーションの開発方法を解説

IT
広告

はじめに

・Javaに興味がある方
・ProgateやPaizaで学習したけどいざ自力で書くにはどうすれば良いかわからない方
・Eclipseは入っているけどコンソール画面までで終わってしまっている方

に向けた記事になります。

私はMacBookを使っているため、
違うOSの場合は進めている最中に違う場面が出るかもしれません。
その場合は他の方の環境構築記事を参照いただいた方が確実かとおもいます。

チャル
チャル

私と同じ初学者の方々のために
相性診断ゲーム」や「数字選択ゲーム
といったものを開発してみましたが、
そもそもそのJavaをどこに書いたらいいんですか!?

といった方もいらっしゃるとおもうので、
今回はJavaを書く環境の説明をしたいとおもいます。

Javaを一通り学んでみたけれどどう使えば良いかわからないよ…
という方はぜひご覧ください!!

環境構築

Eclipseの導入

まずは「Eclipse(イクリプス)」をインストールしましょう

Eclipse(イクリプス)とは
「コンパイラ,エディタ,デバッグ」機能などがまとまった統合開発環境の1種です。
これがあれば基本的なプログラムを書く環境が揃うという認識で大丈夫です。

Eclipse公式ホームページ画面
チャル
チャル

説明のために一度アンインストールして最新版の2024をインストールしようとしたのですが、
2024だとzipファイルの解凍ファイルが入手できずうまくいきませんでした。
そのため2023の方で進めます。

「Eclipse 2023」をクリックします

Eclipse公式ダウンロードページ1

自分のPCのOSおよび使用言語の「Download」をクリックします

Eclipse公式ダウンロードページ2

オレンジ丸のURLをクリックするとダウンロードが始まります。

ダウンロード完了

Eclipseアイコン

ダウンロードされたものを開き、
Eclipseアプリをアプリケーション(指定の場所)にペーストします。
そしてEclipseアプリを起動します。

Eclipse起動画面

上のような画面が表示されたら「起動」をクリックします

Eclipse起動後画面

無事起動できたらEclipseの導入完了です!!

Apache Tomcatの導入

EclipseのTomcat位置

Eclipseのインストール完了後、開いた画面上部にねこのアイコンはありますでしょうか?

こちらがWebアプリケーションの開発では必要になりますので、
表示されていない方はダウンロードをする必要があります。
私はアンインストールの際に消しきれていなかったのかアイコンが表示されてしまいました。
そのためダウンロードの手続きについてはこちらを参照ください。

プロジェクトの立ち上げ方

数字選択ゲームをコピペして実行できる状態を目指します!
そのためファイル名も指定しますが自作する際は
・servlet(パッケージの名前)
・css(フォルダの名前)
・view(フォルダの名前)
・その他プロジェクト名等
は自由に決めていただいて大丈夫です。
※「WEB-INF」の「web.xml」はこの名前になります

Eclipseの使い方1

「ファイル」→「新規」→「プロジェクト」をクリックします

Eclipseの使い方2

「Java」内の「Tomcatプロジェクト」をクリックします。

Eclipseの使い方3

プロジェクト名には任意の名前を入力します、今回は「exam」と入力しました。
入力したら「完了」をクリックします。

Eclipseの使い方4

すると新しく「exam」というプロジェクトが作成されます。
examを展開し「WEB-INF」を右クリック→「新規」→「ファイル」をクリックします。

Eclipseの使い方5

「web.xml」という名前でファイルを作成します(任意ではないです)。

Eclipseの使い方6

「web.xml」内に画像と同じ情報を入力して保存(ctrl + s)します(↓をコピペしてください)。

<web-app>
	<servlet>
		<servlet-name>trickNumberMapping</servlet-name>
		<servlet-class>servlet.TrickNumberServlet</servlet-class>
	</servlet>
	<servlet-mapping>
		<servlet-name>trickNumberMapping</servlet-name>
		<url-pattern>/trickNumber</url-pattern>
	</servlet-mapping>
</web-app>

サーブレットを呼び出す際に「web.xml」が必要になり、
http://localhost:8080/exam/trickNumber を検索窓に入力したときサーバでは、

<url-pattern>の中から「trickNumber」を探す
→発見したらその上にある<servlet-name>(<servlet-mapping>内)を見る
→その<servlet-name>と同じ<servlet-name>(<servlet>内)を探す
→<servlet-name>(<servlet>内)の下の<servlet-class>を呼び出す

という順序でservletパッケージの「TrickNumberServlet.java」を呼び出しています。

Eclipseの使い方7

続いて「exam(プロジェクト名)」を右クリック→「新規」→「フォルダー」をクリックします。
・css
・view

という名前で2つのフォルダを作成してください。

Eclipseの使い方8

「css」を右クリック→「新規」→「CSSファイル」をクリックします。

Eclipseの使い方9

「trickNumber.css」という名前をつけて、
数字選択ゲーム」記事のCSSコードを貼り付けて保存(ctrl + s)します。

Eclipseの使い方10

「view」を右クリック→「新規」→「ファイル」をクリックします。

Eclipseの使い方11

ファイル名に「trickNumber.jsp」と入力して「完了」をクリックします。

Eclipseの使い方12

数字選択ゲーム」記事のjsp(HTML)コードを貼り付けて保存(ctrl + s)します。

Eclipseの使い方13

「WEB-INF/src」を右クリック→「新規」→「パッケージ」をクリックします。

Eclipseの使い方14

名前に「servlet」と入力して完了をクリックします。

Eclipseの使い方15

作成した「servlet」を右クリック→「新規」→「クラス」をクリックします。

Eclipseの使い方16

名前に「TrickNumberServlet」と入力して「完了」をクリックします。
※Javaのファイル名は頭大文字にするルールがあるみたいです

Eclipseの使い方17

数字選択ゲーム」記事のJavaコードを貼り付けて保存(ctrl + s)します。

Tomcat起動

Eclipseの使い方18

画像上部の青◯で囲われた「Tomcat起動」アイコンをクリックします。
クリックしてコンソール画面に

情報:サーバーの起動 △ミリ秒

と表示されたらTomcatの起動完了です。

URLの説明

ブラウザを開いて検索窓に

localhost:8080/exam/trickNumber

と入力して「数字選択ゲーム」を開けたら無事成功です!!

おわりに

チャル
チャル

Eclipseをインストールして
webアプリケーションをブラウザで実行するまでの手順を記述しました!!
悩んでいた方のお役に立っていれば幸いです。

最後までお読みいただきありがとうございました!!

タイトルとURLをコピーしました