執筆のきっかけ
Javaのサーバサイドから開発業務を始めることになり、
それから約1年後、ある日突然フロントサイドをJavaScriptと一部Ajaxで修正する業務が回ってきました。
画面描画にはJSPを使用しているシステムでしたが、とにかく各役割が混同してしまい
どのような流れで処理しているのか全く理解できませんでした。
- JSPとJavaScriptの役割がよくわからない
- 値の渡し方が複数あるため混乱する
- Ajaxって書いてあるけど...なに？
という状態になりました。
これらをまとめて覚える必要あり、かなりハマったことを記憶しています
JSP, JavaScript, Ajaxについて基本を整理してみます。
前提
この記事の内容は以下のような方を対象としています
- JSP / JavaScript 初学者
- Ajaxの仕組みから理解
各役割について
JSP, JavaScript, Ajaxというものがそもそも何なのかを整理します
| 名称 | 役割 |
|---|---|
| JSP | サーバーでJavaとHTMLを組み合わせて作る技術 |
| JavaScript | ウェブサイトに動きや処理を実装するプログラミング言語 |
| Ajax | サーバーと非同期通信を行う技術 |
JSPからJavaScriptへの値の渡し方
方法①：直接埋め込む
<script>
const userName = "<%= user.getName() %>";
</script>
変数から直接値を取り出す方法です。
javaに馴染みがあるとわかりやすい書き方ですね。
方法②：data属性で取得
<div id="user" data-name="<%= user.getName() %>"></div>
const userName = document.getElementById("user").dataset.name;
体感としては、当時よく使用されていた書き方かと思っています。
方法③：hiddenで渡す
<input type="hidden" id="userId" value="<%= user.getId() %>">
const userId = document.getElementById("userId").value;
hiddenは見た目としては表示されませんが、
フォームを送信した際に値を保持しておくことのできる属性です。
hiddenの意味の通り、裏側で値を渡したい場合に使用します。
Ajaxについて
Ajaxとは
Ajaxは、Webアプリケーションにてユーザー操作のレスポンス性を高めるための技術です。
具体的な例えとしては、ユーザーがボタンなどの画面部品をクリックしたときなどにデータのやり取りが行われますが、
その際にAjaxを使用していると、Webアプリケーションはバックグラウンドでデータを送受信できるため、
ページ内の特定の表示箇所への更新とすることが可能になります
Ajaxの基本
jQueryを使用したAjaxのサンプルのです。
$.ajax({
url: "https://com.xxx.api/data",
method: "POST",
contentType: "application/json",
data: JSON.stringify({ name: "Taro" }),
success: function (data) {
$("#message").text("ID : " + data.id);
}
});
"#message"という画面表示箇所に対して、Ajax処理で取得したIDを表示しているイメージです。
Ajaxの流れ
① JavaScriptがリクエスト送信
② サーバー（Servletなど）が受け取る
③ 処理して結果を返す（JSONなど）
④ JavaScriptが受け取って画面更新
リクエストとレスポンスがどのように流れているのか、
基本をおさえることで理解が早まった印象です
まとめ
JSP, JavaScript, Ajaxと業務でまとめて覚える必要がありましたが、
ざっくり関連性をまとめると以下の流れになります
① 初回
[ブラウザ] → [JSP] → HTML表示
② 操作後
[ユーザー]
↓
[JavaScript]
↓
[Ajax通信]
↓
[サーバー(API/Servlet)]
↓
[JavaScript]
↓
[画面更新]
この流れをざっくりでもイメージできていると、
実装する際やソースコードを確認する際に頭に入ってきやすくなると体感できました。
おわりに
過去のプロジェクトについて考えながら思いついたことを書いていたら、
結果的にまとまりのない記事になってしまいました。
当時はどの処理からどこに流れていくのかという基本を
理解しないまま日々の業務に追われていたので大変でした。
(今でも久々に触ると「どうやるんだっけ？」という感覚になります)
少数かもしれませんが、もし同じようにこれから触る方がいらっしゃったら
少しでも参考になる部分がありますと嬉しいです