当記事では、JAVAでWEBアプリを開発する方法を、0から解説していきます。
- JAVAでWEBアプリを作成してみたい
- WEBアプリの作成方法を知りたい
- JAVA、Eclipseを入れたはいいけど、何から始めていいか分からない
- 初心者だけどWEBアプリの開発に必要なスキルを学びたい
といった方にオススメです。
それでは早速、WEBアプリを開発する環境の方から確認していきましょう。
WEBアプリを開発する環境
- OS Windows10
- JDK バージョン11
- Eclipse バージョン2020
JDK、Eclipseのインストール手順については下記記事で解説しているので、インストールがまだの方はこちらを参考に開発環境を用意しましょう。
今回は、JAVAを動かすための開発環境の構築手順をわかりやすく解説していきたいと思います。 未経験、初心者の方でも理解しやすいように、一つ一つの工程をすべて図解していますのでご安心ください。 JAVAを動かすために必要なもの […]
WEBアプリの開発方法
1. プロジェクトを作成しよう！
まずはEclipseを起動しましょう。
Eclipseが開けたら、画面右上の「パースペクティブを開く」から、「JAVA EE」を選択し、「開く」をクリックして、JAVA EEのパースペクティブに切り替わります。
JAVA EE はWEBアプリ開発に必要な機能が備えられています。
今回はWEBアプリを作成したいので、WEBアプリ開発に特化した機能を持つ Spring Boot というフレームワークで進めていきます。
JAVA EEの画面に移ったら、プロジェクト・エクスプローラー内の「新しいSpring スターター・プロジェクトを作成する」を押して、新規プロジェクトを作成します。
名前：「sample」、 型：Maven、 パッケージング：War、 言語：JAVA
項目をそれぞれ上記に設定して、「次へ」を押します。
Spring Boot バージョンを 「2.7.7」に設定し、「Spring Web」にチェックをいれて「完了」しましょう。
２. ファイルの初期設定をしよう！
プロジェクトの作成が完了したら、プロジェクト・エクスプローラー内に「sample」が存在していると思います。この中に、設定しなければ動いてくれないファイルが2つありますので、そちらに文言を追加していきます。設定が必要なファイルは下記2つ↓
・「sample」＞「Javaリソース」＞「src/main/resources」＞「application.properties」
・「sample」＞「pom.xml」
まずは「application.properties」からやっていきましょう。
ダブルクリックすると、画面中央にファイルが開かれます。中には何も書かれていない状態ですが、ここに下記コードを追加していきます。追加後は Ctrl + S で保存してください。
spring.mvc.view.prefix=/WEB-INF/view/
spring.mvc.view.suffix=.jspこれは「WEB-INF」＞「view」フォルダ内にある jsp ファイルを読み取ってくれるもので、ここで指定してあげないとページを表示してくれません。
続いて、「pom.xml」を編集していきます。こちらは既に色々なものが記載されていますので、間違いのないように追加しましょう。
「dependencies」タブの中に下記コードを追加します。Eclipse には ctrl + shift + F で階層を整理してくれる機能があるので、覚えておくと非常に便利です。
<dependency>
<groupId>org.apache.tomcat.embed</groupId>
<artifactId>tomcat-embed-jasper</artifactId>
</dependency>
<dependency>
<groupId>javax.servlet</groupId>
<artifactId>jstl</artifactId>
</dependency>「pom.xml」には
tomcat-embed-jasper・・・JSPを使えるようにするもの。
jstl・・・JSP内で様々な機能を使えるようにするもの。
を追加しています。
以上でファイルの初期設定は完了です！
3. サンプルWEBアプリを作ってみよう！
下準備はできたので、さっそくコードのほうを書いていきたいところですが。。
まずはディレクトリの構成として、MVC について少し解説します。既にご存じの方はスルーしていただいて大丈夫です！
MVC というのはWEBアプリの開発で使われる考え方で、「Model」、「View」、「Controller」の頭文字をそれぞれとったものです。それぞれ役割を持っていて、ファイルが複雑にならないよう役割ごとにに別のディレクトリで扱っています。
簡単に説明すると、
- Model データベースとのやり取りや条件分岐など、裏で行われている処理のほとんどを担っています。
- View Model とは対象に、表側で画面の表示や動きなどの処理を行っています。
- Controller View と Model を繋ぐものです。どの画面を表示させるか、画面から取得したデータに対してどんな処理を行うかなどの処理を行っています。
なんとなくイメージつかめましたでしょうか。
それではこの MVC を踏まえて、実際にファイルを作成してみましょう。
今回は簡単なサンプルコードということで、 View(画面表示) と Controller(View への受け渡し) のみの、戦闘力測定アプリ「スカウター」を作成したいと思います。（ランダムな数字を画面に表示するだけですが。。
それではいよいよコードを書いていきましょう！
Controller を作成しよう！
まずは View への受け渡し役である Controller から作成していきましょう。
「Java リソース」＞「src/main/java」にある「com.example.demo」を右クリックし、「新規」→「パッケージ」を選択します。
名前を「com.example.demo.controller」と入力し、「完了」を押してパッケージを作成します。これが Controller を配置する場所です。※「com.example.demo」の中と外両方に作成されているように見えますが、一度 F5キーで更新すると外側だけ残るので、そちらが正しいものです。
Controller用のパッケージができたら、そこにクラスファイルを作成していきます。
作成した「com.example.demo.controller」を右クリックし、「新規」→「クラス」を選択します。
名前に「MainController」と入力し、「完了」を押してクラスを作成します。
作成した「MainController」が自動で開かれるので、内容をすべて下記コードに書き換えてください。
package com.example.demo.controller;
import java.util.Random;
import org.springframework.stereotype.Controller;
import org.springframework.ui.Model;
import org.springframework.web.bind.annotation.RequestMapping;
import org.springframework.web.bind.annotation.RequestMethod;
@Controller
public class MainController {
@RequestMapping(path = "/", method = { RequestMethod.GET })
public String input(Model model) {
Random rand = new Random();
int num = rand.nextInt(100000000);
model.addAttribute("power", num);
return "scouter";
}
}簡単に説明すると、ランダムな数字を「power」という引数として渡し、「scouter」というviewを呼び出しています。この後 View 側も作成してくので、だんだん繋がってくると思います。
View を作成しよう！
完成まであと少しです。続いて View の作成をしていきましょう。
「src」＞「main」の中にある「webapp」を右クリックし、「新規」→「フォルダー」を選択します。
フォルダー名に「WEB-INF」と入力し、「完了」を押してフォルダーを作成します。
同様の手順で、作成した「WEB-INF」の中に「view」という名前のフォルダーを作ります。
「view」を右クリックして、「新規」→「JSPファイル」を選択します。
ファイル名は先ほど Controller で指定した「scouter」にして、「完了」を押します。
すると「scouter.jsp」が開かれるので、すべて下記コードに書き換えます。
<%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8"%>
<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c"%>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>スカウター</title>
</head>
<body>
<h1>あなたの戦闘力は<c:out value="${power}" />です。</h1>
</body>
</html>先ほど Controller から引数として渡した「power」をここで受け取ります。
Controller、View が作成できたので、実際に動かしてみましょう！
4. 作成したWEBアプリを動かしてみよう！
設定をしっかり反映させるために、まずは Maven の更新を行います。
プロジェクトを右クリック、「Maven」→「プロジェクトの更新」を選択して更新します。
もう一度プロジェクトを右クリックして、「実行」→「Spring Boot アプリケーション」を選択します。
するとサーバーが立ち上がるので、http://localhost:8080/ にアクセスして動作確認してみましょう！
画像のようになっていれば成功です。
かなり長くなってしまいましたが、最後まで読んでいただきありがとうございました。
今後は Gitでのバージョン管理方法や、Model も含めたWEBアプリ作成方法などを解説していきたいと思います。