LoginSignup
9
9

More than 3 years have passed since last update.

IDEA(Ult)+SpringBoot+MavenでHello Worldなwebアプリをサクッと書いてみる

Last updated at Posted at 2017-10-01

経緯

  • IntelliJ IDEAで、かつMavenを使って、SpringBootのHelloWorldを(なるべく)サクッと書いてみたい。
  • ネットで検索してみると、Eclipseを使ったサンプルとか、IDEA+Gradleのサンプルとかはよく見かける。
  • あと、結果をWebじゃなくてコンソールに表示するやつとかも多いが、結果はWeb画面に表示したいし、最低限のコントローラとかテンプレートとかも使ったサンプルにしたい。
  • あと、UltimateのIDEAだと、SpringBootのサポート機能があって、よりサクッと作れそう。

環境

  • Windows10 Enterprise
  • IntelliJ IDEA Ultimate 2017.2.4
  • JDK1.8

あと、使用したSpringBootのバージョンは、この時点でのCURRENT GAの1.5.7

手順

IDEAを起動する

idea_s.png

新規プロジェクトの作成

  • すでに何らかのプロジェクトが開いていたら、File - New - Project...
  • プロジェクトが開いていない状態だったら、Create New Projectをクリック
  • New Projectの画面が開く

image.png

  • 左のリストからSpring Initializrをクリック
  • Project SDKはPCに入っているJDKを適当に選択
  • Nextをクリック
  • Project Metadataの画面に切り替わる

image.png

  • Mavenを使いたかったので、TypeMaven Projectを指定
  • 他の項目はとりあえずこのままでNextをクリック
  • Dependenciesの画面に切り替わる

image.png

  • WebWebと、Template EnginesThymeleafを選択。
  • Nextをクリック

image.png

  • Project nameProject locationを適当に設定。
  • Finishをクリック。
  • プロジェクトが作成される。

image.png

  • 画面右下にMaven projects need to be importedと表示されていたら、Enable Auto-Importをクリックしておくと、pom.xmlを書き換える都度、必要な依存関係を自動的にインポートしてくれる。

コントローラの作成

  • 画面左のProjectビューのdemoプロジェクトのツリーを開き、src - main - java - com.example.demo を右クリックし、New - Java Classを選択
  • Namecontroller.HelloControllerと入力し、OKをクリック
  • クラス宣言の上に@Controllerアノテーションを追加
  • クラスの中にgetHello()メソッドを追加
    @GetMapping
    public String getHello() {
        return "hello";
    }

image.png

テンプレートの作成

  • demoプロジェクトツリーの src - main - resources - templatesフォルダを右クリックし、New - HTML Fileを選択
  • Namehelloと入力し、OKをクリック
  • <body>タグにHello World!と書く
  • あと、<meta>タグがこのままだと実行時にthymeleafのエラー(タグが閉じてないよ!エラー)になるので、末尾を/>に書き換える

image.png

アプリケーションの起動

  • 画面右上を見ると、すでにDemoApplicationという名前で実行設定が作られているので、その横にある緑の三角ボタンをクリックする。
  • アプリケーションが起動され、コンソールログがつらつらと表示され始める。

image.png

  • そのうちTomcat started on ...と表示され、内部のTomcatが起動されたことがわかる。
  • 最後にStarted DemoApplication in ...と表示されれば起動完了。

動作確認

  • ブラウザから、localhost:8080にアクセスする。

image.png

  • できた。
9
9
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
9
9