JSP紹介

この記事を書いたチーム：frontier

JSPとは
SPのメリット
基礎的なJSPの構文
静的ファイルheader.jspを作成してtest.jspファイルの利用する方法

JSPとは

【エンジニア募集中】フルリモート可◎、売上/従業員数9年連続UP、平均残業8時間、有給取得率90％、年休124日以上 etc.　　詳細はこちらから＞

JavaでJSPは「Jakarta Server Pages」と呼ばれ、元々は「JavaServer Pages」として知られていました。JSPはサーバーサイドの言語であり、WebサイトやWebアプリケーションを開発する際によく使用されます。JSPは動的かつインタラクティブなWebコンテンツを作成するのに適した言語です。

SPのメリット

・JSPは学びやすい
　JSPはHTMLをベースとしており、Javaを学んだことがないプログラマーでも利用しやすい言語です。

・JSPコードは維持しやすい
　JSPコードはビジネスロジックとプレゼンテーションロジックを分離して開発するため、メンテナンスが容易です。

・統合しやすい
　JSPは他のツールや技術と簡単に統合でき、Java APIとも併用可能です。

・JSPはすべてのJavaコンポーネントにアクセス可能
　JSPは「Java API、JNDI、JDBC、EJB」などのJavaコンポーネントに簡単にアクセスするための機能を提供します。

基礎的なJSPの構文

JSPファイルは「.jsp」拡張子を持っています。
式（Expressions）: <%= expression %> – Java式の結果を出力します。
スクリプトレット（Scriptlets）: <% code %> – 実行するJavaコードを記述します。
宣言（Declarations）: <%! code %> – フィールドやメソッドを宣言します。
ディレクティブ（Directives）: <%@ directive %> – ページ設定の構成、パッケージのインポートなどを行います。

<%@ page import="java.util.Date" %> 
<!DOCTYPE html> 
<html> 
<head> 
    <title>Welcome to JSP</title> 
</head> 
<body> 
    <h1>Welcome to JSP</h1> 
    <p>The current date and time is: <%= new Date() %></p> 
</body> 
</html>

<%@ page import="java.util.Date" %>

<!DOCTYPE html>

<html>

<head>

<title>Welcome to JSP</title>

</head>

<body>

<h1>Welcome to JSP</h1>

<p>The current date and time is: <%= new Date() %></p>

</body>

</html>

静的ファイルheader.jspを作成してtest.jspファイルの利用する方法

/WEB-INF/views/common/　のディレクトリにheader.jspを作成する

<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8" %> 
<header style="background-color: #333; color: white; padding: 10px; text-align: center;"> 
    <h1>My Simple Header</h1> 
    <nav> 
        <a href="/" style="color: white; margin-right: 10px; text-decoration: none;">Home</a> 
        <a href="/about" style="color: white; margin-right: 10px; text-decoration: none;">About</a>
        <a href="/contact" style="color: white; text-decoration: none;">Contact</a> 
    </nav> 
</header>

<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8" %>

<h1>My Simple Header</h1>

<nav>

<a href="/about" style="color: white; margin-right: 10px; text-decoration: none;">About</a>

<a href="/contact" style="color: white; text-decoration: none;">Contact</a>

</nav>

</header>

/WEB-INF/views/ ディレクトリにtest.jspを作成してtest.jspにheader.jspを実装する

<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%> 
<!DOCTYPE html> 
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="ja" lang="ja"> 
<body> 
<jsp:include page="/WEB-INF/views/common/header.jsp"/> 
<h1>Hello World </h1> 
</body>