Zenn
🐈

【初心者向け/ITスクール43日】JSPのELについて

2023/09/11に公開
Java
HTML 5
tech

はじめに

今日は、ITスクールに通った43日目の日で、今日学んだ知識を記事にシェアしたいと思います。本記事が、ITを勉強を始めた方々にもロードマップになればいいと思います。

43日目は、JSPのELを利用して、より簡単にページを遷移する練習をしました。

EL

EL(Expression Language)はJavaBeanのpropertyをJSPの<%= %>を使わずに簡単にoutputできる表現方式です。

V1

簡単な概念の説明の前に、まずGET方式で、リクエストパラメータがない場合は、V1をある場合はV2をforwardするようにControllerのdoGet methodを宣言します。

V1.html
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
</head>
<body>
	<h1>掛け算</h1>
	<form action="C">  <!-- /C?x=value&y=valueに移動   -->
		x: <input name ="x"><p>
		y: <input name="y"><p>
	   <button>計算</button>
	</form>
</body>
</html>

C

C.java
@WebServlet("/C")
public class C extends HttpServlet{
protected void doGet(HttpsServletRequest request, HttpsServletResponse response){
  if(!request.getParameterNames().hasMoreElement){
	 //リクエストパラメータの名前を取得し、
	 //パラメータがあれば、true なければ、false  
	 //=> falseなら条件文発動
	 request.getRequestDispatcher("V1.html");
	  }else{
	  M.multiply(request);
	  request.getRequestDispatcher("V2.jsp");
	  }
    }

}

M

V1からxとyを入力して提出すれば、自然にリクエストパラメータができますので、Mのmultiplayメソッドのargumentになります。

package com.hyon.sep111.main;

import java.util.ArrayList;
import javax.servlet.http.HttpServletRequest;

public class M {
public static void multiply(HttpServletRequest request) {
	int x = Integer.parseInt(request.getParameter("x"));
	int y = Integer.parseInt(request.getParameter("y"));
	int z = x * y;
	request.setAttribute("z", z);
	//既存のV1にはない属性を追加します。
	
	Beaver b = new Beaver("비버", 3, 50.5, 10.1);
	request.setAttribute("b", b);
	//既存のV1にはない属性を追加します。	
	
	ArrayList<Beaver> bvs = new ArrayList<>();
	bvs.add(b);
	bvs.add(new Beaver("빕어", 2, 40.4, 9.4));
	bvs.add(new Beaver("비붜", 5, 30.3, 6.6));
	bvs.add(new Beaver("빕워", 1, 50.5, 3.3));
	request.setAttribute("bvs", bvs);
	//既存のV1にはない属性を追加します。
	
	}
}

x,yというリクエストパラメータにある値と、setAttributeから入れたz,b
,bvsもattributeの値として入っています。これをjspから活用しましょう。

V2

以前は<% %>の中に、オブジェクトとインスタンス化したり、parsingする作業が必要でしたが、ELという表現式を使えば、簡単に表現することが可能です。


<h1>結果<h1>
<h2>${param.x} x ${param.y} = ${param.x*param.y}
	
${b} //object address	<!--object address    -->
${b.name} //getName(); 不要！ <!--getName()    -->
	
${param.sadasdadas}	<!--Exceptionが起こらないようにnullをわざわざ入れる    -->

${bvs}  <!--ArrayList address  -->
${bvs[0]}	<!--ArrayList object address  -->
${bvs[0].name } <!--ArrayList objectのname attribute  -->

今まで、(Integer）などでダウンキャストをしたり、計算した値をzという変数を作成したり、DTOをimportする必要がありましたが、${}で簡単に解決することが可能になりました。

EL自習

写真を押せば、クー、チョキ、パーの中でその写真に合うvalueを転送するじゃんけんWEBサイトを作る実習でした。レイアウトを組まずに、まず機能が具象することに集中したので、時間内には作成できました。
まずは、先生の解答を見る前のコードです。

// じゃんけん　ゲームページを作成すること!
// チョキー/グー/パー イメージを押せばゲームの1回戦が進ま)
// WAS 終了まで戦績は募る=> ラウンドが終わるたび、戦績の累積を見せる。

最初はDAOにstatic fieldを作成しましたが、何かの違和感がありました。よりオブジェクトとオブジェクトの関係性を表現できないかと考えたとたん、Single ton pattern ならstatic-fieldではなく、DAOのinstance fieldとして相互作用ができるのではないかという思いがつきました。
シングルトーンパターンをとDTO、V1、V2を活用しましたが、残念なところとしてはsetAttributeとELを効率的に使うことができませんでした！

修正前（自分で組んだコード）

修正前
V1
<!DOCTYPE html>
<html lang="kr">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>가위바위보</title>
  </head>
  <body>
    <header>
      <h1>가위바위보</h1>
    </header>
    <main>
      <div class="computer-result"></div>
      <div class="user-choice">
        <form action="HomeController" class="user-choice__column">
          <button name="rsp" value="가위">가위</button>
          <button name="rsp" value="바위">바위</button>
          <button name="rsp" value="보">보</button>
        </form>
      </div>
    </main>
  </body>
</html>
DTO
package com.hyon.sep112.main;

public class RSP {
	private String rsp;
	private String comrsp;
	private String result;
	
	
public RSP() {
		super();
		// TODO Auto-generated constructor stub
	}


public RSP(String rsp, String comrsp, String result) {
	super();
	this.rsp = rsp;
	this.comrsp = comrsp;
	this.result = result;
}


public String getRsp() {
	return rsp;
}


public void setRsp(String rsp) {
	this.rsp = rsp;
}


public String getComrsp() {
	return comrsp;
}


public void setComrsp(String comrsp) {
	this.comrsp = comrsp;
}


public String getResult() {
	return result;
}


public void setResult(String result) {
	this.result = result;
}


	
}
DAO
package com.hyon.sep112.main;

import java.io.UnsupportedEncodingException;
import java.util.Random;
import javax.servlet.http.HttpServletRequest;

public class RSPReferee {
	
	private static final RSPReferee rspr = new RSPReferee();
	private RSPReferee(){}
	
	public static RSPReferee getInstance() {
		return rspr;
	}
	
	private int win=0;
	private int draw=0;
	private int lose=0;	 
	
	public void result(HttpServletRequest request) throws UnsupportedEncodingException {
			
		request.setCharacterEncoding("UTF-8");
	
		Random random = new Random();
		String rsp = request.getParameter("rsp");		
		String result;
		String comrsp="";
		int player=0;
		int com =random.nextInt(3)+1;
		
		switch(rsp) {
		case "가위" :{
			player = 1; break;
		}
		case "바위" :{
			player = 2; break;
		}
		case "보" :{
			player = 3; break;
		}
		}
		
		switch(com) {
		case 1 :{
			comrsp = "가위"; break;
		}
		case 2 :{
			comrsp = "바위"; break;
		}
		case 3 :{
			comrsp = "보"; break;
		  }
		}
		
		if(player-com == 0) {
			result="무승부";
			draw++;
		}
		else if(player-com == 1 || player-com == -2){
			result="승리";
			win++;
		}
		else
		{
			result="패배";
			lose++;
		}
		
		RSP rspResult = new RSP(rsp, comrsp, result); 
		request.setAttribute("rspResult", rspResult);
	}

	public int getWin() {
		return win;
	}

	public int getDraw() {
		return draw;
	}

	public int getLose() {
		return lose;
	}
	
	public void init() {
		win=0;
		draw=0;
		lose=0;
	}
	   
}
Controller
package com.hyon.sep112.main;

import java.io.IOException;
import javax.servlet.ServletException;
import javax.servlet.annotation.WebServlet;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;

@WebServlet("/HomeController")
public class HomeController extends HttpServlet {
	//Java + JSP + CSS + Servlet
	// 가위바위보 게임 페이지를 만들 것!
	// 디자인은 알아서... (가위/바위/보 이미지를 누르면 게임 한판 진행)
	// WAS 종료할 때까지 전적은 쌓이게 => 매판 진행할 때마다 전적 보이도록(바뀌도록)
	
	protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
	RSPReferee r = RSPReferee.getInstance();
	if(!request.getParameterNames().hasMoreElements()) {
	request.getRequestDispatcher("RSPstart.html").forward(request, response);
	}else {
		r.result(request);
		request.getRequestDispatcher("RSPresult.jsp").forward(request, response);
	}
	
	}

	protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
	}

}
V2
<%@page import="com.hyon.sep112.main.RSPReferee"%>
<%@page import="com.hyon.sep112.main.RSP"%>
<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html lang="kr">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>가위바위보</title>
  </head>
  <body>
  <%
   
    RSPReferee rspReferee = RSPReferee.getInstance(); 
  
  %> 
    <header>
      <h1>가위바위보 결과</h1>
    </header>
    <main>
      <div class="computer-choice"></div>
      <div class="user-choice">
        <form action="HomeController" class="user-choice__column">
          <button name="rsp" value="가위">가위</button>
          <button name="rsp" value="바위">바위</button>
          <button name="rsp" value="보">보</button>
        </form>
      </div>
      <div class="rsp-result">
      <h1>당신은 ${rspResult.rsp}</h1>
      <h1>컴퓨터는 ${rspResult.comrsp}</h1>
      <h1>결과는 ${rspResult.result}</h1>
      </div>
      <div class="rsp-record">
      <h1><%=rspReferee.getWin() %>승</h1>
      <h1><%=rspReferee.getDraw() %>무</h1>
      <h1><%=rspReferee.getLose() %>패</h1>
      </div>
    </main>
  </body>
</html>

先生の場合は、DTOを作成せず、Vも一つで処理しました。
また、相手が選んだじゃんけんもイメージに出るように設定したり、<%= >を一切つか分かったコードでしたので、それに合わせて少しアレンジしました。

V 修正後

<%@page import="com.hyon.sep112.main.RSPGameEngine"%>
<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html lang="kr">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>가위바위보</title>
  </head>
  <body>
  <%
  RSPGameEngine rspReferee = RSPGameEngine.getInstance();
  %> 
    <header>
      <h1>가위바위보</h1>
    </header>
    <main>
      <div class="computer-choice"></div>
      <div class="user-choice">
        <form action="HomeController" class="user-choice__column">
          <button name="userhand" value="1"><img src="1.png" alt="가위"></button>
          <button name="userhand" value="2"><img src="2.png" alt="바위"></button>
          <button name="userhand" value="3"><img src="3.png" alt="보"></button>
        </form>
      </div>
      <div class="rsp-result">
      <h1>player: <img name="user" src="${user}"></h1>
      <h1>com: <img name="com" src="${com}"></h1>
      <h1>${r} </h1>
      </div>
      <div class="rsp-record">
      <h1>${w }</h1>
      <h1>${d }</h1>
      <h1>${l }</h1>
      </div>
    </main>
  </body>
</html>

C 修正後

Controller

package com.hyon.sep112.main;

import java.io.IOException;
import javax.servlet.ServletException;
import javax.servlet.annotation.WebServlet;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;

@WebServlet("/HomeController")
public class HomeController extends HttpServlet {
	//Java + JSP + CSS + Servlet
	// 가위바위보 게임 페이지를 만들 것!
	// 디자인은 알아서... (가위/바위/보 이미지를 누르면 게임 한판 진행)
	// WAS 종료할 때까지 전적은 쌓이게 => 매판 진행할 때마다 전적 보이도록(바뀌도록)
	
	protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
	if(!request.getParameterNames().hasMoreElements()) {
		request.setAttribute("user", "https://upload.wikimedia.org/wikipedia/commons/8/88/Start_%28%D0%BA%D0%B8%D0%BD%D0%BE%D1%82%D0%B5%D0%B0%D1%82%D1%80%29.jpg");
		request.setAttribute("com", "https://upload.wikimedia.org/wikipedia/commons/8/88/Start_%28%D0%BA%D0%B8%D0%BD%D0%BE%D1%82%D0%B5%D0%B0%D1%82%D1%80%29.jpg");
	}else {
		RSPGameEngine r = RSPGameEngine.getInstance();
		r.result(request);
	}
	 request.getRequestDispatcher("RSPresult.jsp").forward(request, response);
	}
	
	

	protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
	}

}

M 修正後

DAO
package com.hyon.sep112.main;

import java.io.UnsupportedEncodingException;
import java.util.Random;
import javax.servlet.http.HttpServletRequest;

public class RSPGameEngine {
	
	private static final RSPGameEngine rspr = new RSPGameEngine();
	private RSPGameEngine(){}
	
	public static RSPGameEngine getInstance() {
		return rspr;
	}
	
	private int win;
	private int draw;
	private int lose;	 
	
	public void result(HttpServletRequest request) throws UnsupportedEncodingException {
		
		
		request.setCharacterEncoding("UTF-8");
	
		int player = Integer.parseInt(request.getParameter("userhand"));	
		request.setAttribute("user", player+".png");
		
		int com =new Random().nextInt(3)+1;		
		request.setAttribute("com", com+".png");
		
		if(player-com == 0) {
			request.setAttribute("r", "무승부");
			draw++;
		}
		else if(player-com == 1 || player-com == -2){
			request.setAttribute("r", "승리");
			win++;
		}
		else
		{
		    request.setAttribute("r", "패배");
			lose++;
		}
		
		request.setAttribute("w", win + "승");
		request.setAttribute("d", draw + "무");
		request.setAttribute("l", lose + "패");
		
	}

	public void init() {
		win=0;
		draw=0;
		lose=0;
	}
	   
}

Discussion