質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

新規登録して質問してみよう
ただいま回答率
85.50%
JavaScript

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

Thymeleaf

Thymeleaf(タイムリーフ)とは、Java用のテンプレートエンジンで、特定のフレームワークに依存せず使用することが可能です。

Spring Boot

Spring Bootは、Javaのフレームワークの一つ。Springプロジェクトが提供する様々なフレームワークを統合した、アプリケーションを高速で開発するために設計されたフレームワークです。

Q&A

解決済

2回答

7078閲覧

jsファイルを外部化しつつthymeleafを使用したい

morningglow

総合スコア85

JavaScript

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

Thymeleaf

Thymeleaf(タイムリーフ)とは、Java用のテンプレートエンジンで、特定のフレームワークに依存せず使用することが可能です。

Spring Boot

Spring Bootは、Javaのフレームワークの一つ。Springプロジェクトが提供する様々なフレームワークを統合した、アプリケーションを高速で開発するために設計されたフレームワークです。

0グッド

2クリップ

投稿2018/01/02 11:44

編集2018/01/17 06:38

jsを外部ファイルにするとthymeleafのタグが使用できなくなります。

HTML側ソース

<script type="text/javascript" th:inline="javascript" th:src="@{/js/test.js}"> </script> <script type="text/javascript" th:inline="javascript"> /*<![CDATA[*/ { let url = /*[[#{test}]]*/; alert(url);//① url = test(); alert(url);//② } /*]]>*/ </script>

JS側ソース(test.js)

/* <![CDATA[ */ function test(){ var url = /*[[#{test}]]*/; return url }; /* ]]> *

としています。

①の場合はtestの値が表示されますが、②はブラウザで以下のエラーが表示されアラートが表示されません。
「test.js」がインクルードできていないようです。
/*[[#{test}]]*/'hoge'にすると正常に動きます。

Uncaught ReferenceError: test is not defined

外部化したjavascriptでthymeleafを使用する方法をご教授お願いします。

気になる質問をクリップする

クリップした質問は、後からいつでもMYページで確認できます。

またクリップした質問に回答があった際、通知やメールを受け取ることができます。

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

rnosh

2018/01/19 05:28

「test.js」がインクルードできていないとのことですが、ブラウザの開発者ツール等で本当にインクルードできていないことを確認しましたか?
morningglow

2018/01/21 04:00 編集

test.jsのvar url = /*[[#{test}]]*/; の部分をvar url = "hoge"; にするとtest.jsがインクルードされhogeが表示されるため、正しくはインクルードしようとしてthymeleafの表記があるからエラーになるという感じです。ブラウザの開発者ツールで確認した際に表示されるエラーが上記質問のエラーです。一応thymeleafのhtmlインクルードを使用してそのhtmlにvar url = /*[[#{test}]]*/;を記載することで実装できましたが外部jsだと、うまくいかないのでもしご存知でしたらご教授お願いします。私の考えだと外部jsを読み込む順番と、thymeleafの値を受け取る順番がjs→thymeleafなので外部jsでthymeleafの表記を使用するのは不可能なのでは?と思っています。
guest

回答2

0

ベストアンサー

おそらくあなたもお気づきだと思いますが、tymeleafはJavaで動作(サーバー側)するテンプレートエンジンです。
レンダリング時に、指定されたHTMLないしXML,XHTMLを解析しth属性等のthymeleafの機能に関する部分を適宜通常のHTML属性等に置き換えてクライアントにHTMLを返します。

このときlink式などで指定した参照先のjsやcss、imgなどのリソースをthymeleafは読み込みません。
pathの補完はしてくれますが、そのファイルが存在しているかさえ確認しません。

結果として、外部ファイルに~~/* <![CDATA[ */ で始まるinline式を~~thymleafが評価する変数式等を記述してもブラウザは解決できずにエラーがでます。

代替案としては、jsを外部ファイルにするのではなく、inline式を含んだhtmlをfragmentとしてレンダリング時に挿入する方法等が考えられますこの方法なら間接的ではありますがjsを外部化できます。

投稿2018/02/20 06:41

編集2018/02/21 02:58
LokiTick

総合スコア27

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

0

Spring Web のControllerを経由する Content-Type=application/javascript ならば追加設定なしで thymeleaf 利用可能ですよ

投稿2018/01/21 13:15

退会済みユーザー

退会済みユーザー

総合スコア0

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

isacRu

2019/03/05 17:05

>Spring Web のControllerを経由する Content-Type=application/javascript ならば追加設定なしで >thymeleaf 利用可能ですよ 詳しく。
guest

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

15分調べてもわからないことは
teratailで質問しよう!

ただいまの回答率
85.50%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

関連した質問