はじめに
・Javaに興味がある方
・ProgateやPaizaで学習したけどいざ自力で書くにはどうすれば良いかわからない方
・Eclipseは入っているけどコンソール画面までで終わってしまっている方
に向けた記事になります。
私はMacBookを使っているため、
違うOSの場合は進めている最中に違う場面が出るかもしれません。
その場合は他の方の環境構築記事を参照いただいた方が確実かとおもいます。
環境構築
Eclipseの導入
まずは「Eclipse(イクリプス)」をインストールしましょう
Eclipse(イクリプス)とは
「コンパイラ,エディタ,デバッグ」機能などがまとまった統合開発環境の1種です。
これがあれば基本的なプログラムを書く環境が揃うという認識で大丈夫です。
説明のために一度アンインストールして最新版の2024をインストールしようとしたのですが、
2024だとzipファイルの解凍ファイルが入手できずうまくいきませんでした。
そのため2023の方で進めます。
「Eclipse 2023」をクリックします
自分のPCのOSおよび使用言語の「Download」をクリックします
オレンジ丸のURLをクリックするとダウンロードが始まります。
↓ダウンロード完了↓
ダウンロードされたものを開き、
Eclipseアプリをアプリケーション(指定の場所)にペーストします。
そしてEclipseアプリを起動します。
上のような画面が表示されたら「起動」をクリックします。
無事起動できたらEclipseの導入完了です!!
Apache Tomcatの導入
Eclipseのインストール完了後、開いた画面上部にねこのアイコンはありますでしょうか?
こちらがWebアプリケーションの開発では必要になりますので、
表示されていない方はダウンロードをする必要があります。
私はアンインストールの際に消しきれていなかったのかアイコンが表示されてしまいました。
そのためダウンロードの手続きについてはこちらを参照ください。
プロジェクトの立ち上げ方
数字選択ゲームをコピペして実行できる状態を目指します!
そのためファイル名も指定しますが自作する際は
・servlet(パッケージの名前)
・css(フォルダの名前)
・view(フォルダの名前)
・その他プロジェクト名等
は自由に決めていただいて大丈夫です。
※「WEB-INF」の「web.xml」はこの名前になります
「ファイル」→「新規」→「プロジェクト」をクリックします。
「Java」内の「Tomcatプロジェクト」をクリックします。
プロジェクト名には任意の名前を入力します、今回は「exam」と入力しました。
入力したら「完了」をクリックします。
すると新しく「exam」というプロジェクトが作成されます。
examを展開し「WEB-INF」を右クリック→「新規」→「ファイル」をクリックします。
「web.xml」という名前でファイルを作成します(任意ではないです)。
「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」を呼び出しています。
続いて「exam(プロジェクト名)」を右クリック→「新規」→「フォルダー」をクリックします。
・css
・view
という名前で2つのフォルダを作成してください。
「css」を右クリック→「新規」→「CSSファイル」をクリックします。
「trickNumber.css」という名前をつけて、
「数字選択ゲーム」記事のCSSコードを貼り付けて保存(ctrl + s)します。
「view」を右クリック→「新規」→「ファイル」をクリックします。
ファイル名に「trickNumber.jsp」と入力して「完了」をクリックします。
「数字選択ゲーム」記事のjsp(HTML)コードを貼り付けて保存(ctrl + s)します。
「WEB-INF/src」を右クリック→「新規」→「パッケージ」をクリックします。
名前に「servlet」と入力して完了をクリックします。
作成した「servlet」を右クリック→「新規」→「クラス」をクリックします。
名前に「TrickNumberServlet」と入力して「完了」をクリックします。
※Javaのファイル名は頭大文字にするルールがあるみたいです
「数字選択ゲーム」記事のJavaコードを貼り付けて保存(ctrl + s)します。
Tomcat起動
画像上部の青◯で囲われた「Tomcat起動」アイコンをクリックします。
クリックしてコンソール画面に
情報:サーバーの起動 △ミリ秒
と表示されたらTomcatの起動完了です。
ブラウザを開いて検索窓に
localhost:8080/exam/trickNumber
と入力して「数字選択ゲーム」を開けたら無事成功です!!
おわりに
Eclipseをインストールして
webアプリケーションをブラウザで実行するまでの手順を記述しました!!
悩んでいた方のお役に立っていれば幸いです。
最後までお読みいただきありがとうございました!!