エンジニアのひよこ_level10

【毎日更新!】新卒4年目エンジニアブログです!

【SpringBoot】th:replaceでHTMLパーツ化したら、JSも一緒にパーツ化する【930日目】

th:replaceでパーツ化したい

HTMLをパーツ化したい。

partsA.html

<div id="parts" th:fragment="parts-fragment">
  パーツ
</div>

このパーツを読み出す

BaseB

<div th:replace="partsA::parts-fragment">

このとき、 id="parts" を使ったJavaScriptがあった。

JavaScriptもパーツ化する

partsA.html

<div id="parts" th:fragment="parts-fragment">
  パーツ
</div>

<script th:fragment="parts-js-fragment">
  $('#parts').addClass("add-class");
</script>

このパーツを読み出す

BaseB

<div th:replace="partsA::parts-fragment"></div>
<script th:replace="partsA::parts-fragment"></script>

切り分けなくてもよくないか

partsA.html

<div id="parts" th:fragment="parts-fragment">
  パーツ
</div>

このパーツを読み出す

BaseB

<div th:replace="partsA::parts-fragment"></div>
<script>
  $('#parts').addClass("add-class");
</script>

この状態でもプログラムは動きます。でもなぜ切り分けるか

JSはなぜ切り分ける?

  1. このパーツがいろんなファイルで読まれてるとき
  2. HTMLの内容が変わったとき

このとき、もしスクリプトを切り出してなかったら、
パーツの変更が起こったときに、読み出しているHTMLを全部チェックして、全部間違えてないかを確認する必要がある。

IDが変わったときには、確実に全部書き換える必要がある。

見極めは?

読み出し側のBaseB.htmlが、パーツの中身を把握しないと使えない状態の時があやしい。

今回だと、JavaScriptでIDを指定しているが、「本当にそのIDが存在しているのか?」というのは、呼び出し元はわかっていない。
従って、ID名が変わったらやばいというのが気がつけます。

このように、不要な知識を外部に漏れ出さないようにしましょう。
この意識をすることで、急な仕様変更とかにも耐えやすく、のちの開発時間が少なくなったりします。