問題点

Javaの動的プロジェクトのWEB-INF配下のJSPファイルから、CSSやJavaScript（Bootstrap）が読み込めない現象が起きており、先に進めません。

原因お分かりの方、ご指摘よろしくお願いいたします。

環境

・Windows 10
・Java 11
・Tomcat 9 (Eclipse内蔵)
・Bootstrap4.3
・jQuery3.6.0
・動的プロジェクト（FW未使用）

#試したこと
・JSPからリソースへのパスが正しいか確認。下記記事を参考に、JSPから各静的コンテンツへのパスをコンテキストパスからとなるようにしました。
http://ksk428.hatenablog.com/entry/2015/04/21/204309

・JSやCSSがWEB-INF外に存在することを確認しました。

フォルダ構成

#問題のJSP(login.jsp、Bootstrapが適用できない)
下記のようにコンテキストルートからのパスを指定しています。

<link rel="stylesheet" href="${pageContext.request.contextPath}/css/bootstrap.min.css">
<script src="${pageContext.request.contextPath}/js/jquery-3.6.0.min.js"></script>
<script src="${pageContext.request.contextPath}/js/bootstrap.bundle.min.js"></script>

<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="vewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<link rel="stylesheet" href="${pageContext.request.contextPath}/css/bootstrap.min.css">
<title>ログイン画面</title>
</head>
<body class="text-center">
    <form class="form-signin"action="${pageContext.request.contextPath}/login" method="POST">
        <input class="form-control" type="text" name="userName"><br>
        <input class="form-control" type="password" name="password">
        <button class="btn btn-lg btn-primary btn-block">Log in</button>
    </form>
<script src="${pageContext.request.contextPath}/js/jquery-3.6.0.min.js"></script>
<script src="${pageContext.request.contextPath}/js/bootstrap.bundle.min.js"></script>
</body>
</html>

ブラウザのデベロッパーツール

なぜかjQueryとbootstrap.bundle.min.jsでエラーが起きています。

dodox86

2021/04/22 06:48

「jquery-3.6.0.min.js」はJavaScriptファイルであるはずなのに、ブラウザのデベロッパーツールの画面でそのファイル名で参照しているのはログイン画面のHTMLであるように見えます。その為、<!DOCTYPE html> でJavaScriptとしてエラー。ファイルの配置やファイル名を間違っているということはありませんか。

daphnia99

2021/04/22 08:53

ご指摘ありがとうございます。K_35781様へのご回答したとおり、ファイル配置は問題ない認識です。ファイル名もコピペで貼り付けをいたしました。とはいえ、パスの指定の仕方を再点検してみたいと思います。

行動規範の内容に同意します

回答1件

ベストアンサー

この手のエラーだと多分ですけど、
問題があるのはjsだと思います。存在しないjsファイルをパスで指定してたりしないですか？

投稿2021/04/22 05:40

K_3578

総合スコア1282

daphnia99

2021/04/22 08:51

ご回答ありがとうございます。画像にあります通り、WebContent直下にjsとcssフォルダが、その配下にjQueryやbootstrap.bundle.min.jsが確かに配置されています。エクスプローラーでも配置されているのが確認できました。今回のコンテキストパスは/jspservletbbs/なのですが、例えばjQuery.jsまでのパスは "/jspservletbbs/js/jquery-3.6.0.min.js"であっているのではと思っています。もう一度パスの指定の仕方などを参考書で再確認してみたいと思います。

行動規範の内容に同意します