【Spring boot】 Webjarsを利用して、jQueryを利用する【Tymeleaf】

環境　Mac, Spring boot 3

WebJarsは、JavaScriptやCSSなどのクライアントサイドのライブラリをJavaの依存関係として管理・提供するための仕組みです。WebJarsを使用すると、MavenやGradleなどのビルドツールを使ってこれらのライブラリをプロジェクトに簡単に追加できます。

WebJarsの主な利点

依存関係の管理:
- MavenやGradleの依存関係として追加できるため、バージョン管理が簡単になります。
CDN不要:
- ライブラリをローカルでホストできるため、CDNの利用を避けたい場合に便利です。
一貫性:
- ライブラリのバージョンをプロジェクトの他の依存関係と同様に一元管理できます。

では早速、build.gradleに依存性を追加

dependencies {
    implementation('org.webjars:jquery:3.6.0')
    implementation('org.webjars:webjars-locator:0.40')
}

静的ファイルへのアクセスを許可
※ requestMatchersに”/webjars/**”を追加

@Configuration
@EnableWebSecurity
public class SecurityConfig {

    @Bean
    public SecurityFilterChain securityFilterChain(HttpSecurity http) throws Exception {
        http
            .authorizeHttpRequests(authorizeRequests -> authorizeRequests
                .requestMatchers("/account/register", "/webjars/**").permitAll()  // 登録ページ
                .anyRequest().authenticated()  // その他のリクエストは認証を要求
            )
            
            .formLogin(formLogin -> formLogin
                .loginPage("/login")  // カスタムログインページを指定
                .defaultSuccessUrl("/", true)  // ログイン成功後にルートパスにリダイレクト
                .failureUrl("/login?error") //ログイン失敗時の遷移先
                .permitAll()
            )
            .logout(logout -> logout
                .permitAll()
            )
            .csrf(csrf -> csrf.disable());  // CSRF保護を無効化する

        return http.build();
    }

    @Bean
    public BCryptPasswordEncoder passwordEncoder() {
        return new BCryptPasswordEncoder();
    }
}

jQueryを読み込ませたいhtmlに追加

<script th:src="@{/webjars/jquery/3.6.0/jquery.min.js}"></script>

依存関係に’org.webjars:webjars-locator:0.40’を追加すると、ライブラリのバージョンを指定しなくても読み込むことが可能。

<script th:src="@{/webjars/jquery/jquery.min.js}"></script>