今回の記事ではサーブレットとjspの入門者の方に向けて、値を受け渡す方法について解説します。
この記事を読むことで
- jsp → サーブレットに値を受け渡す方法
- サーブレット → jspに値を受け渡す方法
両方の値の渡し方がわかります。
値の受け渡しはWebアプリを開発する際に必須の技術となりますので、ぜひ習得しましょう！
このブログでは初心者の方向けにサーブレットとjspでwebアプリを開発する方法をサンプルコード付きで解説しています。ぜひチャレンジしてみてください。
今回作るWebアプリ
今回開発するアプリケーションは次のようなものです。
【１】jspで値の入力
まず最初にjspで苗字、名前に加えて年齢の入力を行います。
【２】入力された値の表示
送信ボタンを押すと入力された値をもとに自己紹介を画面に表示します。
処理の流れと値の受け渡し
今回作るWebアプリでは次のように値を受け渡します。
- Input.jspで値の入力
- SampleServlet.javaで入力値を受け取る
- SelfIntroduction.jspでサーブレットからの値を受け取る
この流れを図にすると次のようになります。
今回はEclipseを使ってWebアプリを作成します。
Eclipseがインストールされていない方は次の記事を参考にインストールしてみてください。
EclipseでWebプロジェクトを作成する方法に関してはこちらの記事を参考にしてみてください。
SampleServlet.javaの作成
まず最初にSampleServlet.javaを作成します。
SampleServlet.javaではInput.jspで入力された値を受け取ります。
受け取った値を編集して、次のSelfIntroduction.jspに値を受け渡します。
jspから値の受け取り
jspから送られてきた値を受け取るためには「request.getParameter」メソッドを使います。
引数として指定する文字列は送られてくるjspのフォーム内のname属性と一致させる必要があります。
今回は次のようにします。大切なのはrequest.getParameterメソッドの引数が
- lastName
- firstName
- age
となっていることです。
// jspから送られてきた値を受け取る
name1 = request.getParameter("lastName"); // 苗字の受け取り
name2 = request.getParameter("firstName"); // 名前の受け取り
age = Integer.parseInt(request.getParameter("age")); // 年齢の受け取り
// name1 と name2を繋げてfullNameに格納
fullName = name1 + " " + name2;jspから送られてきた値をサーブレットで受け取るためにはgetParameterメソッドを使う！
jspへの値の受け渡し
次サーブレットから次のjspに値を受け渡していきます。
値の受け渡しは「request.setAttribute」メソッドを利用します。
第一引数として、データの名前を指定します。ここの第一引数で指定した値を使って、jsp側でデータを受け取ることができます。
第二引数では実際に受け取りたいデータを渡します。
// 次の画面(jsp)に値を渡す
request.setAttribute("fullName", fullName);
request.setAttribute("age", age);サーブレットからjspへの値の受け渡しはsetAttributeメソッドを使う！
最終的にSampleServlet.javaは次のようになります。
SampleServlet.java
package uhablog;
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("/SampleServlet")
public class SampleServlet extends HttpServlet {
private static final long serialVersionUID = 1L;
public SampleServlet() {
super();
}
/**
* jspから値を受け取って、結果を返却する
*/
protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
request.setCharacterEncoding("UTF-8"); // 文字化け防止
String name1 = ""; // 苗字を格納する変数
String name2 = ""; // 名前を格納する変数
String fullName = ""; // フルネームを格納する変数
int age = 0; // 年齢を格納する変数
// jspから送られてきた値を受け取る
name1 = request.getParameter("lastName"); // 苗字の受け取り
name2 = request.getParameter("firstName"); // 名前の受け取り
age = Integer.parseInt(request.getParameter("age")); // 年齢の受け取り
fullName = name1 + " " + name2;
// 次の画面(jsp)に値を渡す
request.setAttribute("fullName", fullName);
request.setAttribute("age", age);
// 次の画面に遷移
request.getRequestDispatcher("/SelfIntroduction.jsp").forward(request, response);
}
}jspの作成
続いてjspを作成します。
Input.jsp
まずはサーブレットに値を受け渡すInput.jspから作成します。
最初にformタグを作ります。
formタグでは画面で入力された値をサーブレットに送ることができます。
methodにGETを指定することで、サーブレットのdoGetメソッドを実行することができます。
またactionでは実行したいサーブレットのクラス宣言の「@WebServlet("/SampleServlet")」となっているパスを指定します。
<form method="GET" action="SampleServlet">
</form>formタグの中身を書いていきます。
inputタグを使うことで画面に入力欄を作ることができます。
inputタグのtypeでtextやnumberとすることで、文字の入力や数字の入力といった制限をすることが可能です。
またtypeをsubmitとすると、このボタンが押されたときにフォーム全体がサーブレットに送られます。
ここで大切なのが、inputタグの中のnameに指定している値です。
先ほどサーブレットのgetParameterメソッドの中で指定した値と同じ値をinputのnameに設定する必要があります。
- lastName
- firstName
- age
formタグの中身は次のようになります。
<form method="GET" action="SampleServlet">
<!-- 苗字の入力 -->
苗字:<input type="text" name="lastName"><br>
<!-- 名前の入力 -->
名前:<input type="text" name="firstName"><br>
<!-- 年齢の入力 -->
年齢:<input type="number" name="age"><br>
<!-- 送信ボタン -->
<input type="submit" value="送信"><br>
</form>最終的なInput.jspは次のようになります。
Input.jsp
<%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>値の入力画面</title>
</head>
<body>
<form method="GET" action="SampleServlet">
<!-- 苗字の入力 -->
苗字:<input type="text" name="lastName"><br>
<!-- 名前の入力 -->
名前:<input type="text" name="firstName"><br>
<!-- 年齢の入力 -->
年齢:<input type="number" name="age"><br>
<!-- 送信ボタン -->
<input type="submit" value="送信"><br>
</form>
</body>
</html>formタグを使って、jspからサーブレットにデータを送ることができる！
SelfIntroduction.jsp
次にサーブレットから値を受け取って表示するSelfIntroduction.jspを作成します。
サーブレットから値を受け取るためにはrequest.getAttributeメソッドを使います。
引数にサーブレットのsetAttributeメソッドの第一引数で指定した値と同じ値を指定することで、値を取得することができます。
request.getAttribute("fullName")
request.getAttribute("age")上のメソッドを画面の表示したい箇所で<%= xxxx %>で囲ってあげることで画面に表示することができます。
最終的なSelfIntroduction.jspは次のようになります。
SelfIntroduction.jsp
<%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>自己紹介</title>
</head>
<body>
<p>こんにちは！僕の名前は<%= request.getAttribute("fullName") %>です！</p>
<p>年齢は<%=request.getAttribute("age") %>さいです</p>
</body>
</html>getAttributeメソッドを使うことで、サーブレットから送られてきた値をjspで使うことができる！
今回はサーブレットとjspの値の受け渡し方法について簡単なWebアプリを開発しながら解説しました。
まとめると次のようになります。
- jspからサーブレットへの値の受け渡し→formを使って送る
- サーブレットで送られてきた値を受け取る→「request.getParameter」メソッドを使う
- サーブレットから別のjspに値を送る→「request.setAttribute」メソッドを使う
- jspでサーブレットから送られた値を受け取る→「request.getAttribute」メソッドを使う
プログラミング学習はUdemyがおすすめ
私はプログラミングの学習はUdemyで行うのが一番おすすめです。
Udemyでは動画講座でプログラミングなどのスキルを身につけることができます。
現役エンジニアがUdemyをオススメする理由は
・動画で好きなときに学べる
・一流の講師に学ぶことができる
・講師の方に質問ができる
・返金保証もある
・セールを頻繁に開催している
といったたくさんの理由があります。
現在Udemyではセールを開催しています！
通常時1万円から2万円前後の価格で講座が販売されていますが、セール時には1500円前後(ランチ代くらい)で一つの講座を購入することができます。
UdemyにはサーブレットでWebアプリ開発が学べる講座もあるので、JavaでWebアプリ開発する方法を学んでみたい！という方は今がチャンスです！
独学が不安な人へ
独学で学んでいく意志がある方にはUdemyなどで学習するのがおすすめですが、プログラミングを独学するにはそれなりにハードルがあります。
- プログラミングで一度挫折した経験がある
- 一人で学習する自信がないので、サポートが欲しい
という方にはプログラミングスクールを検討してみるのがおすすめです。
