今回は画面遷移について記事にしたいと思います。
リンクによる画面遷移
ウェブサイトにはよくリンクがありますよね。リンクをクリックすると、別のページに移動することができます。このようにして、あるページから別のページに簡単に移動することができます。
例：
<a href="about.html">このリンクをクリックして「About」のページに行く</a>
タグ: これはリンクを作るためのタグです。
href="about.html": ここに移動したいページのURLを指定します。この例では、「about.html」というページに移動します。
フォームによる画面遷移
リンクだけでなく、フォームを使って情報を送信し、それに応じて画面を切り替えることもできます。例えば、ログイン画面では、名前やパスワードを入力して送信ボタンを押すと、ログインの結果に応じて別の画面に移動することができます。
例：
<form action="login.html" method="POST">
<label for="name">名前:</label>
<input type="text" id="name" name="username">
<button type="submit">ログイン</button>
</form>
パラメータの送り方の違い
ウェブページを移動するときや、情報を送るときには、パラメータというデータを一緒に送ることができます。このパラメータの送り方には2つの方法があります。
GETメソッド：URLにパラメータをくっつけて送信する方法です。ブラウザのアドレスバーにパラメータが見えるので、あまり重要でないデータを送るときに使います。
例：
https://example.com/search?q=apple
q=appleの部分が、パラメータです。「apple」という検索ワードがサーバーに送られます。
POSTメソッド：パラメータを見えない形で送信する方法です。ログインフォームなどで使われることが多く、データを安全に送信するために使います。URLにはパラメータが表示されません。
. フォームからデータを送信する（calc_input.jsp）
まず、入力画面（calc_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>
<div>
<form action="calc_output.jsp">
<input type="number" name="num_x"> +
<input type="number" name="num_y"> =
<button type="submit">計算する</button>
</form>
</div>
</body>
</html>
このコードのポイント：
タグ: フォームを作成して、ユーザーが入力したデータを別のページに送信します。action="calc_output.jsp"は、送信先のページを指定しています。この場合は、結果を表示するページ（calc_output.jsp）にデータを送ります。 と: ユーザーが入力した数値データを送るためのフォーム部品です。それぞれ、name="num_x"とname="num_y"で、入力された値にラベルを付けています。後でこの名前を使って、データをサーバー側で取り出します。 2. データを受け取るページ（calc_output.jsp） フォームで送信されたデータは、別のページ（calc_output.jsp）で**request.getParameter()**メソッドを使って取得します。例：calc_output.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>
<div>
<%
// フォームから送られてきた値を取得する
String numX = request.getParameter("num_x");
String numY = request.getParameter("num_y");
// 文字列を整数に変換して計算
int x = Integer.parseInt(numX);
int y = Integer.parseInt(numY);
int result = x + y;
%>
<h1>計算結果: <%= result %></h1>
</div>
</body>
</html>
このコードのポイント：
request.getParameter("name"): このメソッドを使って、フォームから送信されたデータを取得します。getParameter("num_x")でフォームのname="num_x"に入力された値を取得し、同様にgetParameter("num_y")で別の入力値を取得します。
データ型の変換: フォームで送られるデータは基本的に文字列として送られます。そのため、Integer.parseInt()を使って文字列を数値に変換しています。これで、計算ができるようになります。
計算結果の表示: x + yの結果を計算し、<%= result %>でその結果を表示します。
メソッド呼び出しの仕組み
request.getParameter()は、フォームから送信されたデータを取得するためのメソッドです。JSPページ内では、サーバーがクライアント（ブラウザ）から送られたリクエスト情報を管理するためのrequestオブジェクトが使われます。このオブジェクトが持っているgetParameter()メソッドを呼び出すことで、フォームに入力されたデータを引数として受け取ります。
動作の流れ：
入力画面（calc_input.jsp）でデータを入力して「計算する」ボタンを押すと、num_xとnum_yに入力された値がcalc_output.jspに送信されます。
calc_output.jspでrequest.getParameter()メソッドを使ってデータを受け取る。フォームのname属性を使って、データを取り出し、計算します。
計算結果を画面に表示します。
今回は画面遷移について記事にしました。