yoneyonekun.com Javadcriptで画面遷移させるコードを紹介しています。
コード紹介
Javascriptを書いて動くAPIやサーバーサイドのコントローラーへ送るリクエストをJavascriptで書きたいときに使える方法について書いています。
言語：Java
フレームワーク：Spring Boot
ソースコード例
以下がソースコード例となります。
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 | package com.example.demo; import org.springframework.stereotype.Controller; import org.springframework.web.bind.annotation.RequestMapping; @Controller public class TestController { @RequestMapping("/") public String homeDisp() { return "home"; } @RequestMapping("helloworld") public String helloWorld() { return "helloworld"; } } |
画面遷移を行うサーバー側のソースコードです。
遷移元：home.html
遷移先：helloworld.html
1 2 3 4 5 6 7 8 9 10 | <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>Insert title here</title> </head> <body> <span>hello world!</span> </body> </html> |
画面遷移後は”helo world!”と表示されます。
JavaScriptで書く画面遷移方法を2種類ご紹介します。1つ目はHTML側にidを仕込みJavaScriptでそのidの部分に対する処理を書く方法。2つ目はHTML側にonclickを仕込みJavaScriptの関数を直接呼び出す方法です。それぞれform1、form2として以下のコードに書いています。処理内容としては両方とも全く同じです。
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 | <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>Insert title here</title> </head> <body> <!-- form1：aタグで画面遷移を行います。 --> <form action="helloworld" name="form1"></form> <a href="#" id="button1">form1の画面遷移</a> <!-- form2：sapnタグで画面遷移を行います。 --> <form action="helloworld" name="form2"></form> <span onclick="button1_click()">form2の画面遷移</span> </body> <!-- ここからJavaScript --> <script> /* form1の画面遷移用関数 */ button1.addEventListener('click',()=>{ document.forms.form1.submit(); }); /* form2の画面遷移用関数*/ function button1_click() { document.forms.form2.submit(); } </script> </html> |
通常クライアント側(HTML)からサーバー側(プログラム側)へリクエストを送る際は、inputタグのtype=”submit”やtype=”button”、またはbuttonタグを使用します。しかしその実装では露骨に画面遷移用のボタンが表示されてしまいます。今回はこのボタンを表示させずにaタグとspanタグを用いて画面遷移を行っています。以下に詳細を書いておきます。
1 2 3 4 5 6 7 | <!-- form1：aタグで画面遷移を行います。 --> <form action="helloworld" name="form1"></form> <a href="#" id="button1">form1の画面遷移</a> <!-- form2：sapnタグで画面遷移を行います。 --> <form action="helloworld" name="form2"></form> <span onclick="button1_click()">form2の画面遷移</span> |
まずformタグの準備としては、formタグの中に後々JavaScript側で読み込む用にnameを仕込んでおきます。次にform1ではaタグにid=”(任意のid)”を、form2ではspanタグの中にonclick=”(JavaScriptの関数名)”を仕込みます。HTML側の仕込みとしてはこれだけです。
1 2 3 4 5 6 7 8 9 10 11 | <script> /* form1の画面遷移用関数 */ button1.addEventListener('click',()=>{ document.forms.form1.submit(); }); /* form2の画面遷移用関数*/ function button1_click() { document.forms.form2.submit(); } </script> |
まずはform1の以下の部分についてです。
(任意のid).addEventLinstener(‘click’,()=>{処理内容});
ほとんどJavaScriptでは定型の書き方で、このように書くことで、(任意のid)に対して行う処理を実装します。
これがform2だと関数名”button_click”の関数として書いています。書き方は以下の通りです。
function (任意の関数名){処理内容};
となります。
そしてそれぞれの処理内容の部分は全く同じであり
document.forms.(formの中に仕込んだname).submit();
となります。この部分formタグの中にあるnameが一致するものを探し出し、submitするという指示文です。これにより画面遷移を実現しています。
わざわざJavascriptで書く理由
HTMLだけで済む実装をわざわざJavascriptで書く理由ですが、APIなどJavascriptで書かれたものに対してその中に画面遷移のリンクやボタンがある場合などに使用します。
まとめ
フロントエンドとバックエンド両方を使うエンジニアなら必要になってくるテクニックです。今回は画面遷移のみのソースですが、画面遷移とJavaScriptとJavaを用いて複雑な処理を行う時に重宝されます。なかなか幅広く使えるので知っておいて損はないです。