[Spring]SpringMVCで簡単なWebApp作成「Hello World!」

◆はじめに

シンプルなWebApp開発です。

SpringMVCを利用して、ブラウザ上に「Hello World!」を表示させましょう。
というのが、本記事のざっくりとした内容です。

はい、仕様としては以上です。

なので、WebApp？ってなるかもしれませんが、
この「Hello World!」の延長線上に、
皆さんが思い浮かべるようなWebAppがあると思って、
大らかに捉えてもらえればと思います。

◆事前に用意するもの

・STS4(Spring Tool Suit4)

導入にあたって、以下の記事も書いてますので
ご参考ください。MacOSユーザーを想定して書いています。

[Spring] Spring Tool Suite (STS)の環境構築(for Mac)

◆本記事のゴール

まず、ブラウザ上から、「http://localhost:8080/sample/」　にアクセス。
すると、SpringMVCを利用して作成した仕組みによって、
サーバー（TomCat）にリクエストが送られて、「Hello World!」と記述されたJSPが呼び出されます。そして、ブラウザ上に「Hello World!」と表示されます。
つまり、SpringMVCを利用してWebApp開発できる環境ができているということです。

◆本記事で使用ツールに関して

・STS4(Spring Tool Suit4)
・Tomcat(ver 8.5)
また、MacOS(BigSur ver 11.4)で構築しておりますが、
Windowsでも、ほとんど同じだと思います。

STS4は、過去のSTSを踏襲せずSpring Bootでの開発に適したツールとして作成されており、SpringMVCアプリケーション開発に対しては不足している機能があるため、不足部分の補完方法については、制作手順①で説明しています。

STS4なのは、自分がSTS4を入れていたからという理由にはなります。
ただ、私がSTS4故に詰まってしまった点のSpringMVCアプリケーション開発をする際に不足部分の補完方法は載せていますし、難しくはないので問題はないと思います。

Tomcatのインストールについては、
この記事内で紹介しています。

◆本記事のレベル感

Spring Bootを使用した方が、楽に、アプリに必要な環境構築ができます。
ただ、Webアプリケーションを開発するための仕組みを十分に理解するためにも、
一度は、Spring MVCで環境を構築してみるといいと思い本記事を作成いたいしました。
なので、mvcモデルなど全く知らず、javaやTomcat,eclipseなど触るのが初めての
WebApp開発の入門レベルの方には、少々敷居が高いと思われます。
初級レベルくらいかなと思います。

◆Spring MVCとは？

まず、Javaで、Webアプリを作る場合であれば、間違いなく名前は見ることになるワードの
「MVCモデル」については、こちらでは概略図だけに留めますので、別途調べていただきたいです。

Spring MVCとは

Spring MVCとは、SpringでWebアプリケーションを開発するためのフレームワークです。MVCモデルの構造でWebアプリケーションを開発するのに便利です。

一方で、Springには、Spring Bootというフレームワークもあります。
Spring Bootは、Spring MVCの仕組み・考え方を引き継ぎながらも、
Spring MVCに比べて、最低限の選択を行うだけで一般的なアプリに必要な環境構築ができます。

ただ、便利故に、ブラックボックス化している印象はあります。
また、Spring mvcに比べると拡張性や自由度は下がるとも言えそうです。

◆Spring MVCの特徴

Spring MVCで使用されるMVCは、
Front Controllerパターンというタイプに分類されます。
通常の、MVCモデルにはないFront Controllerが用意されていることが特徴です。

簡単に説明すると、ブラウザからのリクエストに対して、
まず、Front Controllerを用意して渡すようにすれば、
そのあと、最適なControllerは勝手に選んでくれるという仕組みです。

その他には、POJOやアノテーション機能がついていたり、
サードパーティーライブラリとの連携ができ拡張性に優れているなどの特徴があります。

◆制作(7Step)

⓪STS4の設定：アプリケーション開発のため

・WTPプラグインのインストール

STS4以外の場合は不要だと思うのですが、STS4の場合は、
「Eclipse Enterprise Java and Web Developer Tools」の
プラグインをインストールします。

理由としては、STS4の場合には従来のJakarta EE（Java EE）Webアプリケーション開発向けのWeb Tools Platform (WTP)やJSPエディタが初期ではいってません。
そのため、WTPのプラグインのインストールを行う必要があります。

プラブインのインストールは、Eclipse Marketplaceから行います。
STSのメニューから、Help > EclipseMarketplaceを選択し、Eclipse Marketplaceを開きます。

「Eclipse Enterprise Java and Web Developer Tools」を検査し、
インストールします。

インストールが完了し、
Eclipseを再起動すればプラグインの導入は完了です。

・パースペクティブの変更

STS4の右上にある、ウィンドウに＋マークがついたようなアイコンを選択して、
パースペクティブの変更を行いましょう。

アイコンを選択すると、
パースペクティブの選択があこなえますので、
「Web」を選択します。

これで、STS4の画面上のレイアウトが、
WebApp開発に適したレイアウトに変更されます。

①サーバーの構築（Tomcat）

・Tomcatをダウンロード

ブラウザから↓にアクセス
https://tomcat.apache.org/download-80.cgi

表示されたページ内の「Distributions」の「Core」にある「zip」を選択し、
zipファイルをダウンロードします。
ダウンロードしたら、解凍し適当な場所に解凍されたフォルダを置きます。

・STS4のサーバーの設定

STS4上で、設定を開きます。
設定画面を開いたら、「サーバー・ランタイム環境」を開きます。

追加を押すと、以下のような画面が出るので、
「Tomcat 8.5」を選択します。
その際に、「Tomcatインストールディレクトリ」の参照先を、先ほどインストールし解凍したTomcatのフォルダのディレクトリに設定し完了します。

以下のように表示されたら、
「サーバー・ランタイム環境」の設定は終了です。

・サーバーの作成

下記のように、サーバーのウィンドウに表示されたら、
サーバーの作成は完了です。

②プロジェクトの作成(Mavenプロジェクト)

・Mavenプロジェクトの作成

それでは、Mavenプロジェクトを作成していいます。
左のエクスプローラー上で、右クリックをして、新規作成から「その他」を選びます。

Mavenプロジェクトを選択します。

□シンプルなプロジェクトの作成（アーキタイプ選択のスキップ）
にチェックをいれて、次へ。

グループidとアーティファクトidを入れましょう。
グループidは、「com.~」のような形ならなんでも大丈夫です。
アーティファクトidは、プロジェクトの名前と
WebAppにアクセスするURLの先頭にくるコンテキストルートの名前になります。

プロジェクトが作成されました。

ちなみに、プロジェクトを作成すると、
以下のようなフォルダ構成になっています。

エラーが出た場合

プロジェクトを作成したさいに、

「ビルドプランが計算できませんでした。」
のようなエラーが出た場合は、

プロジェクトを右クリックし、実行から
「Maven install」を行って下さい。

・プロジェクト・ファセットの設定（動的Webモジュール）

プロジェクト・ファセットで設定をします。
こちらをしないと、後で、サーバーにプロジェクトを追加するのですが、
その際にプロジェクトを認識してくれません。

プロジェクト・ファセットにて、動的Webモジュールにチェックを入れます。
また、JavaやTomcatのverも合わせます。
今回は、Javaは11、Tomcatは8.5にしています。
環境が違う場合は、適当に設定されてください。

ちなみに、Javaコンパイラの設定は、
以下のようになっており「JavaSE-11」になっています。

デプロイメント・アセンブリーでのMavenの依存解決設定

こちらの設定は、
Warningで、以下のようなメッセージが表示されるのですが、

これを解決せずに、サーバーでプロジェクトを起動させると、
以下のようなエラーになるかと思います。

org.apache.catalina.core.StandardContext listenerStart
重大: 前のエラーのためにアプリケーションリスナのインストールをスキップします

STS4の設定から「デプロイメント・アセンブリー」を開きます。
ここに「Mavenの依存関係」が表示されていないと思われますので、追加します。

それでは、追加ボタンを押します。
続いて、「Javaビルド　パス・エントリー」を選択し、「Mavenの依存関係」を選択して、完了します。

すると、以下のように、
デプロイメント・アセンブリーに、Mavenの依存関係が追加されたと思います。
これで、こちらの設定は完了です。

このときSTS4の場合、「Eclipse Enterprise Java and Web Developer Tools」のプラグインを入れていないと、「Javaビルド　パス・エントリー」が用事されず、設定できませんので注意してください。

また、このWarningの警告文に対しては、試せてませんが、デプロイメント・アセンブリーからではなく、.classpathファイルから、以下の方法でも対応ができるようです。

["クラスパス・エントリーはエクスポートまたは公開されません"警告を解消する]
https://takahashikzn.root42.jp/entry/20130702/1372761009

.classpathファイルを開くには、STS4でフィルター設定をしておきましょう。

③JSP（Hello World!）の作成

src.mainのフォルダ内に、新規作成からフォルダを作成して、src.main.Webapps.WEB-INF.viewsのディレクトリを作りましょう。

そして、viewsのフォルダで、新規作成からファイルを選択します。
JSPファイル「ファイル名.jsp」を作成します。

ファイル内に記述したコードは以下です。

<%@ page language="java" contentType="text/html; charset=utf-8"
	pageEncoding="utf-8"%>
<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<title>サンプル</title>
</head>
<body>
	<h1>Hello World!</h1>
</body>
</html>

④Controllerの作成

パッケージの作成

src.main.javaのフォルダの中に、
「グループid.controller」の名前でパッケージを作成しましょう。

コントローラの作成

作成したcontrollerのパッケージ内に、
controllerのjavaファイルを作成します。

コントローラーのjavaファイル内に記述したコードは以下です。

package com.N4x0leaf4m.controller;

import org.springframework.stereotype.Controller;
import org.springframework.web.bind.annotation.RequestMapping;

@Controller
public class SampleController {
	@RequestMapping("/")
	public String sample() {
		return "sample";
	}
}

⑤各種設定ファイルを作成・編集

①ライブラリのセットアップ

POM.xmlを開くと、以下のように書かれています。

・前

なので、以下のように変更します。
そのままコピペで大丈夫です。

・変更後

<project xmlns="http://maven.apache.org/POM/4.0.0" xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:schemaLocation="http://maven.apache.org/POM/4.0.0 https://maven.apache.org/xsd/maven-4.0.0.xsd">
  <modelVersion>4.0.0</modelVersion>
  <groupId>com.N4x0leaf4m</groupId>
  <artifactId>sample</artifactId>
  <version>0.0.1-SNAPSHOT</version>
  
  <properties>
    <project.build.sourceEncoding>UTF-8</project.build.sourceEncoding>
    <maven.compiler.source>11</maven.compiler.source>
    <maven.compiler.target>11</maven.compiler.target>
  </properties>
  
  <dependencies>
    <dependency>
	    <groupId>org.springframework</groupId>
	    <artifactId>spring-webmvc</artifactId>
	    <version>5.2.4.RELEASE</version>
    </dependency>
	<dependency>
	    <groupId>javax.servlet</groupId>
	    <artifactId>javax.servlet-api</artifactId>
	    <version>4.0.1</version>
	    <!-- 動作時はTomcat のライブラリを使用するので開発時だけ依存する。 -->
    	    <scope>provided</scope>
	</dependency>
  </dependencies>
  
</project>

・プロジェクトアップデート

POM.xmlを変更したら、
プロジェクトをアップデートしましょう。

もし、「コンテナー 'Maven 依存関係' が存在しないライブラリー」のような
エラーが出たら、こちらを参考にするといいでしょう。
プロジェクトをアップデートしましょう。

[エラー原因と対応｜コンテナー 'Maven 依存関係' が存在しないライブラリー '（Javaのビルド・パスの問題）]

https://www.lifestyle12345.com/2019/03/error-maven-java-buildpass.html

②DispatcherServletのセットアップ

フロントコントローラーパターン(MVCの弱点を改善したアーキテクチャパターン)を利用するためDispatcherServlet用のConfigクラスを作成します。

まず、「config」フォルダを、
src.main.resourcesに作成します。

そして、そのフォルダ内に「spring.xml」「spring-mvc.xml」
の2つのxmlファイルを作成していきます。

spring.xml作成

コードは下記です。

<?xml version="1.0" encoding="UTF-8"?>
<beans xmlns="http://www.springframework.org/schema/beans"
       xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
       xsi:schemaLocation="http://www.springframework.org/schema/beans
           http://www.springframework.org/schema/beans/spring-beans-2.5.xsd">
</beans>

spring-mvc.xml作成

コードは下記です。

<?xml version="1.0" encoding="UTF-8"?>
<beans xmlns="http://www.springframework.org/schema/beans"
    xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xmlns:context="http://www.springframework.org/schema/context"
    xmlns:mvc="http://www.springframework.org/schema/mvc" xmlns:util="http://www.springframework.org/schema/util"
    xmlns:aop="http://www.springframework.org/schema/aop"
    xsi:schemaLocation="http://www.springframework.org/schema/mvc http://www.springframework.org/schema/mvc/spring-mvc.xsd
        http://www.springframework.org/schema/beans http://www.springframework.org/schema/beans/spring-beans.xsd
        http://www.springframework.org/schema/util http://www.springframework.org/schema/util/spring-util.xsd
        http://www.springframework.org/schema/context http://www.springframework.org/schema/context/spring-context.xsd
        http://www.springframework.org/schema/aop http://www.springframework.org/schema/aop/spring-aop.xsd">

	<!-- Spring MVC の機能を使うことを宣言。 -->
	<!-- この宣言をすることで、 @Component などのアノテーションが使えるようになる。 -->
	<mvc:annotation-driven />
	
	<!-- Bean となるクラスファイルが格納されているパッケージを宣言。 -->
	<!-- Spring はこのパッケージ配下を自動でスキャンし、Bean として登録する。 -->
	<context:component-scan base-package="com.N4x0leaf4m" />
	
	<!-- JSP を使用するための宣言 -->
	<mvc:view-resolvers>
		<!-- コントローラが JSP 名（拡張子なし）を返した際、Spring が 「.jsp」を付与し「/WEB-INF/views/」配下から探すように設定。 -->
		<mvc:jsp prefix="/WEB-INF/views/" suffix=".jsp"/>
	</mvc:view-resolvers>

</beans>

ViewResolverのセットアップについて

後半にある、ViewResolverのセットアップですが、
viewにあるJSPを使うためにViewResolverの実装を行っています。
SpringMVCではビュー名を解決して使用するViewを判別するために、
ViewResolverを使います。

このときに、
<context:component-scan base-package="com.N4x0leaf4m" />
の、base-packageに入れる文字列は、Mavenプロジェクトを作成する際にいれた、
グループidをいれておきましょう。

「org.eclipse.wst.common.component」ファイルの設定

また、.settingフォルダの中の、
「org.eclipse.wst.common.component」ファイルを設定して、
[/src/main/webapps]　の配下の「/WEB-INF/views/」を参照するようにも設定が必要になります。

.settingフォルダを開くには、まず、フィルター設定をします。

すると、.settingフォルダが現るので、その中の、
「org.eclipse.wst.common.component」ファイルを開き、
下記の１文を追加します。
"""
<wb-resource deploy-path="/" source-path="/src/main/webapps" />
"""

以下のコードを参考にして、追加してください。
ファイルの上部で追加しています。

<?xml version="1.0" encoding="UTF-8"?><project-modules id="moduleCoreId" project-version="1.5.0">
    <wb-module deploy-name="sample">
        <wb-resource deploy-path="/" source-path="/src/main/webapps" /><!-- ここを追加 -->
        <wb-resource deploy-path="/WEB-INF/classes" source-path="/src/main/java"/>
        <wb-resource deploy-path="/WEB-INF/classes" source-path="/src/main/resources"/>
        <wb-resource deploy-path="/WEB-INF/classes" source-path="/src/test/java"/>
        <wb-resource deploy-path="/WEB-INF/classes" source-path="/src/test/resources"/>
        <wb-resource deploy-path="/WEB-INF/classes" source-path="/target/generated-sources/annotations"/>
        <wb-resource deploy-path="/WEB-INF/classes" source-path="/target/generated-test-sources/test-annotations"/>
        <property name="context-root" value="sample"/>
        <property name="java-output-path" value="/sample/target/classes"/>
    </wb-module>
</project-modules>

③ContextLoaderListener、CharacterEncodingFilterのセットアップ

web.xmlの設定をします。
ざっくり言えば、
ウェブブラウザに入力されたURLから呼び出されるサーブレットを設定しています。

コード内では、ContextLoaderListenerやCharacterEncodingFilterのセットアップにて、
DispatcherServletクラスをサーブレットコンテナに登録したり、DispatcherServlet用のConfigクラスを使ってアプリケーションコンテキスト（DIコンテナ）を生成しますが、どのConfigクラスを使ってDIコンテナを作るのかをここで指定したりしています。

以下が、コードです。

<?xml version="1.0" encoding="UTF-8"?>
<web-app version="4.0"
	xmlns="http://xmlns.jcp.org/xml/ns/javaee"
	xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
	xsi:schemaLocation="http://xmlns.jcp.org/xml/ns/javaee http://xmlns.jcp.org/xml/ns/javaee/web-app_4_0.xsd">
  
  <!-- ビジネスロジックのBean 定義ファイル -->       
  <context-param>
    <param-name>contextConfigLocation</param-name>
    <param-value>
      classpath:/config/spring.xml
    </param-value>
  </context-param>
  
  <!-- リスナーを登録 -->
  <listener>
    <listener-class>
      org.springframework.web.context.ContextLoaderListener
    </listener-class>
  </listener>
  
  <!-- 文字のエンコーディングを指定し  -->
  <filter>
    <filter-name>characterEncodingFilter</filter-name>
    <filter-class>
      org.springframework.web.filter.CharacterEncodingFilter
      
        </filter-class>
    <init-param>
      <param-name>encoding</param-name>
      <param-value>UTF-8</param-value>
    </init-param>
  </filter>

  <!-- 上記フィルターをすべての URL で適用する。 -->
  <filter-mapping>
    <filter-name>characterEncodingFilter</filter-name>
    <url-pattern>/*</url-pattern>
  </filter-mapping>

  <!-- Spring MVC アプリの場合、だいたいは唯一のサーブレットを登録する。 -->
  <servlet>
    <servlet-name>dispatcherServlet</servlet-name>
    <servlet-class>
      org.springframework.web.servlet.DispatcherServlet
    </servlet-class>
    <!-- Spring MVC の Bean 定義を登録 -->
    <init-param>
      <param-name>contextConfigLocation</param-name>
      <param-value>
        classpath:/config/spring-mvc.xml
      </param-value>
    </init-param>
  </servlet>

  <!-- すべての URL リクエストについて、上記で登録したサーブレットで処理する。 -->
  <servlet-mapping>
    <servlet-name>dispatcherServlet</servlet-name>
    <url-pattern>/</url-pattern>
  </servlet-mapping>

</web-app>

⑥サーバーの起動

・サーバーにプロジェクトを追加

作成したサーバーを、サーバーのウィンドウ上から右クリックすると、
「プロクラムの除去と追加」と出ますので、開いてください。

Tomcatのサーバーに追加するプロジェクトを選択したら、追加をおして
プロジェクトが追加されたら、完了です。

エラーが出た場合

「プロクラムの除去と追加」を押した際に、
このようなエラーが出るか、開いてもプロジェクトが表示されていない場合は、
動的Webモジュールの設定がうまくいっていないと思われますので、
再確認してみてください。

・サーバーの起動

初めは、停止状態ですので、緑の三角ボタンから
サーバーを起動しましょう。

すると、起動ボタンは、
以下のように、停止ボタンになります。

⑦WebAppにブラウザからアクセス

・アクセス

サーバーが起動したら、
それではいよいよ、ウェブブラウザから、
作成したWebAppにアクセスしましょう。

ブラウザ上で、「http://localhost:8080/sample/」　にアクセス。
(sampleの文字列は、コンテキストルートです。
みなさんが作成したプロジェクト名を入れて下さい。)
ブラウザ上に「Hello World!」と表示されたら成功です。

成功した場合

SpringMVCを利用して作成した仕組みによって、
サーバー（TomCat）にリクエストが送られて、Servletによって、「Hello World!」と記述されたJSPが呼び出され表示されました。

お疲れ様でした。

404エラーの場合

404エラーで、「Hello World!」と表示されない場合は、
サーガーは起動しているが、設定などに問題がありそうです。
どこかのソースコードに誤植やディレクトリ構成に違いがないか確認してみてください。

◆まとめ

以上です。
ここまでご覧いただいた方はありがとうございます。

SpringMVCを利用して、ブラウザ上に「Hello World!」を表示させるという
簡単でシンプルなWebApp開発についてご紹介しました。

「Hello World!」と表示されたということは、
SpringMVCでの環境構築ができたということですね。ここからさらに発展させていけば、
さらにすごいWebAppが開発できると思います。
また、皆様の理解が深まれば幸いです。

それでは!

◆参考

[Spring MVC を使用して Web アプリケーションの作成。Boot は使わない。]
https://www.shookuro.com/entry/2020/03/22/122906
✒︎こちらの、山崎屋の技術メモさんの記事をほとんど参考にさせていただきました。
ありがとうございました。なので、こちもご覧いただくとよりわかりやすいと思います。

[Spring MVCについて]
https://camp.trainocate.co.jp/magazine/spring-mvc/

[12.4. STS4の設定手順]
https://terasolunaorg.github.io/guideline/current/ja/Appendix/SpringToolSuite4.html

もしよろしければ、以下のまとめ記事もどうぞご覧ください。

https://zenn.dev/nakohama/articles/d505c637903339