【忘却のJavaScript#4】Vue.jsでガントチャートを表示してみる
やること
- 前回使ったFullCalendarでDayGridとは別のタイプのカレンダーを表示させる
- Timeline Viewというガントチャートが書けるライブラリを使ってみる
用意するもの
- 「【忘却のJavaScript#3】Vue.jsでカレンダーを表示してみる」で構築したVue.js環境
- FullCalendar
FullCalendarのインストール
> npm install --save @fullcalendar/resource-timeline
- 以下のようなメッセージが出たら、インストール成功
・・・ + @fullcalendar/resource-timeline@4.1.0 added 3 packages from 1 contributor and audited 43477 packages in 29.741s
Timeline.jsの作成
- src\components配下にTimeline.vueを作成
- 以下の通り、FullCalendarライブラリの読み込みと画面表示を実装
Timeline.vue：
<template>
<!-- Timeline Viewを表示 -->
<FullCalendar
:schedulerLicenseKey="calendarCustomize.schedulerLicenseKey"
:plugins="calendarCustomize.plugins"
:defaultView="calendarCustomize.defaultView"
:height="calendarCustomize.height"
:resources="calendarCustomize.resources"
:events="calendarCustomize.events"
:slotDuration="calendarCustomize.slotDuration"
/>
</template>
<style lang="scss">
@import "~@fullcalendar/core/main.css";
@import "~@fullcalendar/timeline/main.css";
@import "~@fullcalendar/resource-timeline/main.css";
</style>
<script>
import FullCalendar from "@fullcalendar/vue";
import resourceTimelinePlugin from "@fullcalendar/resource-timeline";
export default {
components: {
FullCalendar // make the <FullCalendar> tag available
},
data() {
return {
calendarCustomize: {
// ライセンス要求表示を非表示化
schedulerLicenseKey: "GPL-My-Project-Is-Open-Source",
// 使用するプラグイン
plugins: [resourceTimelinePlugin],
// 表示形式 (今回はTimeline View)
defaultView: "resourceTimelineDay",
// タイムラインの高さ (項目数に応じて自動調整)
height: "auto",
// 時間軸の表示幅 (今回は2時間ごと)
slotDuration: { hours: 2 },
// Resourcesのデモデータ
resources:
"https://fullcalendar.io/demo-resources.json?with-nesting&with-colors",
// Resourcesごとのイベントのデモデータ
events:
"https://fullcalendar.io/demo-events.json?single-day&for-resource-timeline"
}
};
}
};
</script>
【忘却のJavaScript #3】Vue.jsでカレンダーを表示してみる
目次
やること
FullCalendarをVue.jsに取り込んで、カレンダーを表示させてみる
「FullCalendar」とは？
- オープンソースのJavaScriptライブラリ
- カレンダーのUIと機能を簡単に実装できる
用意するもの
- 「【忘却のJavaScript#2】Windows10でVue.js動かしてみる」で構築したVue.js環境
- FullCalendar
- Sass
FullCalendarのインストール
- コマンドプロンプトから以下のコマンドを実行し、ライブラリをインストールする
- 今回は"daygrid"という卓上カレンダーによくあるタイプのカレンダーのライブラリを使ってみる
- "core"と"vue"とはFullcalendarのメインコードとvue用のアダプタ
> npm install --save @fullcalendar/vue @fullcalendar/core @fullcalendar/daygrid
- 以下のようなメッセージが出たら、インストール成功
- エラーが出る場合は後述の「npm installにてエラーが出る場合」を参照してみください
・・・ + @fullcalendar/core@4.1.0 + @fullcalendar/daygrid@4.1.0 + @fullcalendar/vue@4.1.1 added 150 packages from 218 contributors, removed 52 packages, updated 1474 packages and audited 42927 packages in 128.145s
Sassのインストール
> npm install sass-loader > npm install node-sass
- 以下のようなメッセージが出たら、インストール成功
・・・ + sass-loader@7.1.0 added 10 packages from 17 contributors, updated 14 packages and audited 42949 packages in 48.009s ・・・ + node-sass@4.12.0 added 58 packages from 58 contributors in 43.488s
Calendar.jsの作成
- src\components配下にCalendar.vueを作成
- 以下の通り、FullCalendarライブラリの読み込みと画面表示を実装
Calendar.vue：
<template> <FullCalendar defaultView="dayGridMonth" :plugins="calendarPlugins" /> </template> <script> import FullCalendar from '@fullcalendar/vue' import dayGridPlugin from '@fullcalendar/daygrid' export default { components: { FullCalendar // make the <FullCalendar> tag available }, data() { return { calendarPlugins: [ dayGridPlugin ] } } }; </script>
router.jsの更新
- src\router.jsにCalendar.vueへのリクエストパスを記述
router.vue：
import Vue from "vue"; import Router from "vue-router"; Vue.use(Router); export default new Router({ routes: [ { path: "/calendar", name: "calendar", component: () => import("./components/Calendar") } ] });
カレンダーの表示
- "yarn serve"して、"http://localhost:8080/#/calendar"にアクセス
- 以下の通りカレンダーが表示されれば成功
npm installにてエラーが出る場合
"EPERM: operation not permitted"エラーが出る場合
エラー内容
以下のようなエラーが出てしまうことがある。
VSCodeでプロジェクトフォルダを開いていたせいか、ファイルを掴まれていて正常にインストールできていない模様。
npm ERR! Error: EPERM: operation not permitted, ・・・
"Maximum call stack size exceeded"エラーが出る場合
エラー内容
上記の"operation not permitted"を解消されても、以下のようなエラーが出てしまうことがある。
エラーメッセージ的には一度に実行できるシステムコールの回数を上限を超えている模様。
npm ERR! Maximum call stack size exceeded
【忘却のJavaScript#2】Windows10でVue.js動かしてみる
Vue.jsをインストールして、動かしてみたいと思います。
今回はローカル環境をつくるところまでしかやりませんが、Web上にたくさん公開されている画面テンプレを利用すれば、かなり簡単にきれいな画面をつくることができる代物です。
「Vue.js」とは？
- SPAを実装するためのJavaScriptフレームワークの1つ
- Angular.js (Google提供) / React.js (Facebook提供)と並ぶ代表的なフレームワーク
やりたいこと
yarnを使って、Windowsローカル環境にVue.jsをインストールし、サンプルページを表示させる
用意するもの
- OS： Windows10
- エディタ： VSCode (ver1.3.3)
- パッケージ管理SW： YARN (ver1.16.0)
- YARNのインストーラ用： Node.js (ver10.15.3)
- JavaScriptフレームワーク： Vue.js (ver3.7.0)
VSCodeインストール
- 以下にアクセスし、「Download for Windows」を選択して、exeファイルをダウンロード
- ダウンロード後、exeファイルを実行し、VSCodeをインストール
- インストールウィザードでは全てデフォルト設定を選択
- インストール完了後、起動してみて以下のような画面が立ち上げればOK
YARNインストール
- 以下にアクセスし、「YARNをインストール」を押下
- YARNの利用にはNode.jsが必要となるため、事前にインストールしておく
- YARNのダウンロードページに戻り、[Windows]、[安定版1.16.0]を選択し、[インストーラをダウンロードする]を押下
- ダウンロード後、msiファイルを実行し、YARNをインストール
- インストールが完了したら、コマンドプロンプトから以下のコマンドを実行し、想定バージョンが表示されればOK
> yarn --version 1.16.0
Vue.jsインストール
- コマンドプロンプトから以下のコマンドを実行し、Vue.jsをインストールする
- 1、2分くらいかかる
> yarn global add @vue/cli
- 以下のコマンドを実行し、想定バージョンがインストールされていることを確認する
> vue --version 3.7.0
プロジェクトの作成
> vue create sample-app
- 上記、コマンド内でインタラクティブにプロジェクトの作成を行っていく
- 状態管理やら静的解析やらテストやらプロジェクトで使うツールを選ぶのですが、詳細な説明は割愛・・
- 今回はひとまず今後使いそうなものを以下の通り選択していく
- Please pick a preset: ⇒ "Manually select features"
- Check the features needed for your project:
- (＊) Babel
- ( ) TypeScript
- ( ) Progressive Web App (PWA) Support
- (＊) Router
- (＊) Vuex
- ( ) CSS Pre-processors
- (＊) Linter / Formatter
- (＊) Unit Testing
- (＊) E2E Testing
- (＊) CSS Pre-processors
- User history mode for router? ⇒ "n"
- Pick a liner / formatter config: ⇒ "ESLint + Prettier"
- Pick additional lint features: ⇒ "Lint on save"
- Pick a unit testing solution: ⇒ "Jest"
- Pick a E2E testing solution: ⇒ "Cypress (Chrome only)"
- Where do you prefer placing config for Babel, PostCSS, ESLint, etc.? ⇒ "In package.json"
- Save this as a preset for future projects? ⇒ "y"
- Save preset as: ⇒ "sample-app"
- Pick the package manager to use when installing dependencies: ⇒ "Use Yarn"
- 一通り選択してEnterを押下するとプロジェクト作成が開始される
- 10分くらいかかる (Cypressが重い・・・)
- プロジェクトをVSCodeから開いて確認してみる
プロジェクトのビルドとアプリ起動
- コマンドプロンプトから作成したプロジェクトディレクトリの第一階層に移動し、以下のコマンドを実行してビルド＆起動を行う
- 以下の通り、"DONE Compiled successfully"と"App running at"が表示されればOK
> yarn serve DONE Compiled successfully in 9367ms 22:24:31 App running at: - Local: http://localhost:8080/ - Network: http://192.168.10.9:8080/ Note that the development build is not optimized. To create a production build, run yarn build.
- 以下のURLにアクセスし、画像のように「Welcome to Your Vue.js App」のページが表示されれば成功
以上。
JSON ServerでサクッとAPIモックサーバをつくってみる
直近でフロントエンドの開発に携わることになりました。
APIモックがあると何かと便利かと思い、ググったところJSON Serverなるものがあるということで試してみました。
目次
「 JSON Server」とは？
JSON Server(ジェイソン サーバ)とは、JSONファイルを元にしてWebAPIサーバモックアップを作成できる簡易サーバです。
開発中のWebAPIテストなどに活用できます。
引用元： 「オープンソースのAPI連携／JSON Serverとは」
用意するもの
- CentOS7.6サーバ (ここで構築したものを使用)
- Node.js 8.16.0
- JSON Server 0.14.2
Node.jsインストール
リポジトリ追加
以下のコマンドを実行し、yumからNode.jsを落とせるようにリポジトリ追加する。
# curl -sL https://rpm.nodesource.com/setup_8.x | bash -
Node.jsインストール
以下のコマンドを実行し、Node.jsをインストールする。
(10分くらいかかる)
# yum install -y nodejs gcc-c++ make
APIモック作成
JSON Serverの起動
以下のコマンドを実行し、先ほど作成したJSONファイルをインプットにJSON Serverを起動する。
"--host"はJSON Server(192.168.10.4)のリクエストURLにIPアドレスを指定したい場合は使用。
"--host"がない場合はlocalhostを指定すればアクセス可能。
# json-server --host 192.168.10.4 memberlist.json
以下のように表示されれば、成功。
“http://192.168.10.4:3000/memberlist"でGETリクエストを受け付けて、JSONを返す準備が整っている状態。
\{^_^}/ hi!
Loading memberlist.json
Done
Resources
http://192.168.10.4:3000/memberlist
Home
http://192.168.10.4:3000JSONファイルの更新を自動反映させたい場合は以下のように"--watch"を指定することで実現可能。
# json-server --watch memberlist.json
JSONデータの取得
リクエスト送信
Chromeを開き、以下のURLにアクセス
「http://192.168.10.4:3000/memberlist」
JSONデータ取得
以下の通り、無事に取得成功
これはお手軽で便利！
ローカル以外からJSON Serverにアクセスしたい場合
実はローカル以外の環境からこのAPIをcurlで呼んでみたところ、エラーが発生した。
エラー内容
# curl http://192.168.10.4:3000/memberlist curl: (7) Failed connect to 192.168.10.4:3000; 接続を拒否されました
原因
エラー文言でググったところ、以下の記事を発見。
普通にポートが開放されていなかっただけの模様。。
StackOverflow：
「json-server cannot access via local IP」
対策
以下のコマンドでfirewallのポート穴あけを実施
# firewall-cmd --zone=public --add-port=3000/tcp --permanent # firewall-cmd --reload # firewall-cmd --list-all
これでちゃんと繋がるはずです。
参考
以下のサイトの参考にさせていただきました
以上。
【忘却のJava#7】JSUG勉強会#4の参加レポート
勉強会に参加して、良い刺激を受けたので書き残したいと思います。
個人用の備忘で文章が拙劣なのは、あしからずでございます。
これまでインフラまわりの勉強会には参加してきましたが、アプリよりは初めてだったので少し緊張しました。笑
登壇者の方々は発表は苦手と言いつつ、一生懸命伝えようとしてくれた所が好印象でした。
目次
開催概要
テーマ
JSUG勉強会 2019その4 初心者による初心者のSpring入門
日時
2019/04/25(金) 19:00～21:00
場所
六本木ヒルズ森タワー20F Pivotal Japan
セッション
4つのセッションが用意されていました。
- JSUGの正しい参加方法 (柴田 洋平さん - JSUGスタッフ）
- Spring Coreの解説 (田村 英雄さん - Guildhub)
- Spring 歴約１年初心者の Test 奮闘記 (内藤千静さん - タグバンガーズ)
- Spring Boot × Vue.jsでSPAを作る (宮坂 豪さん - アクロクエストテクノロジー)
以下はその所感とメモです。
JSUGの正しい参加方法
概要
JSUGの成り立ちや参加スタイルについて教えてくださいました。
登壇者を絶賛募集中とのことです。
所感
おそらくSpring界隈でテックメインでやっていくことはないので登壇という形でお役立てはできないかもしれませんが、これからも参加していきたいと思いました。
Spring Coreの解説
概要
DIコンテナがどのように機能しているのか、自身が理解するまでの流れをFactoryやBean定義ファイルをもとに説明してくださいました。
所感
技術者として簡単な技術を上手く使えるということも大事ですが、原則原理や成り立ちを知っているということもまた大事だと個人的には思うので、そのような説明が聞けたのは良かったです。
でも実は私はSpringBootのHelloWorldレベルしかやってなくてスプリングのスの字も分かってないので、肝心のDIコンテナやらFactoryやらBeanやらの中身はポカーンでした。
なので、ここに備忘として書いておいて、次回までには抑えておければと思ってます。
メモ
- 以前はSpring(DIコンテナ)がどうやってServiceとRepositoryをインスタンス化しているか分からなかった。。
- Controller -> Service -> Repository -> DBのような関係性でServiceがnewされる度にRepositoryが勝手に作られる蜜結合の状態を避けたい
- ⇒インタフェースとFactoryを利用すればよい
- Factoryクラスを毎回作るのは大変⇒設定ファイルからインスタンス化対象を読み取り、インスタンス化したい
- クラスの置き換えには実装の変更が必要⇒設定ファイルから依存関係を読み取り、インスタンス化したクラスに注入したい
- これらはReflectionを使えば実現できる！
- Reflectionはクラス名(文字列)から、インスタンスの生成ができる
- setter injectionとかauto wiredとか
- これらを理解する前にBean定義ファイルを勉強せよ
- Bean定義ファイルを使っての開発はSpringの基礎なので、しっかり勉強しておくことがオススメ！
- 金融案件なんかではまだ使っているところもある
Spring 歴約１年初心者の Test 奮闘記
概要
Springを使った開発におけるTestの自動化方法について説明してくださいました。
所感
Springもよく知らない、Testもよく知らない状態から実際に仕事で使えるところまで成長されたところが素晴らしいと思いました。
SpringやTestをあまり知らない人向けに説明してくれていたので分かりやすかったです。
メモ
- 依存している未完成のクラス多くてmockないとTestきついとき
- Mockitoを使ってMockitoJUnitRunner.classを差し込めばいける
- @Mock / @InjectMockを使ってTest対象のクラスをUnit Testする
- SpringRunnerとは？
- Bean同士の連携テストを行いたい、テスト上でDIコンテナを活用したいときに使用する機能
- @RunWith(SpringRunner.class)をおまじないとして書く
- @WebMvcTestで仮想Web層をたててレスポンスステータスのチェックTestとかできる
- MockMvcResultMatchers.jsonPathでjsonのエラーメッセージのチェックも可能
- データベースへのIntegration Test
- DB接続は＠DataJpaTestでTest
- DBのTestにはデータがいるのでH2という内臓DBでデータをつくる
- SpringRunnerを使用することでテストの幅が広がる (Web MVCいける)
- SpringでのUnitTestは書きやすい（一年初心者の私でも書けた！）
Spring Boot × Vue.jsでSPAを作る
概要
まさにタイトルの通りですが、ご自身が作成されたSpring Boot + Vue.jsのアプリ構成や構築するまでの流れを解説していただきました。
所感
登壇者の方も言っていましたが、平成最後に聴いたプレゼンとなりました。
そう思うと感慨深いです。
仕事的にタイムリーな内容だったので楽しく聴かせていただきました。
いまどきはVueでSPAつくって処理はフロントエンドに寄せるんだよ、なんて話をどこかで聞いていはいましたが、まさにそのような構成になっていてだいぶイメージが湧きました。
メモ
- SPAとは？
- 構成は？
- クライアント <-> Vue.js <-> Spring Boot <-> Mybatis <-> MySQL
- やったことの流れ
- (1)Spring Bootプロジェクトの雛形作成
- (2)Spring Bootに書くAPIの機能を実装
- (3)Spring Security認証周りを整備
- (4)Vue.jsで画面周りを実装
- (5)Vue.jsのビルド媒体をSpring Boot内に配置
- (6)Spring Bootだけでアプリ起動可能に
- (1)Spring Bootプロジェクトの雛形作成
- Spring Initializrで雛形を作成
- Webページからさくっと雛形を作れる
- (2)Spring Bootに各APIの機能を実装
- (3)Spring Security認証周りを整備
- (4)Vue.jsで画面周りを実装
- (5)Vue.jsのビルド媒体をSpring Boot内に配置
- (6)Spring Bootだけでアプリ起動可能に
- あとは java -jar xxx.jarで起動するだけ
- Spring Securityとして静的ファイルへのアクセス許可が必要
- はまりどころ
- ユーザ情報はクライアントサイドでどう管理する？
- stateで一元的に管理する
- セッション管理はVue.jsの設定等でも実現できるのでは？
- サーバ再起動時などサーバとクライアント側で整合性が取れなくなる場合もあると考え、同期がとれる方式にした
資料
まだ公開されていないようなので追って更新します。
以上。
【忘却のJava#6】IntelliJ IDEA + Spring BootでHello Worldしてみる
Webアプリをつくる必要が出てきたのでSpring Bootを試してみました。
目次
やりたいこと
Spring Boot環境を構築し、WebブラウザからHello Worldを表示する
環境情報
流れ
IntelliJ IDEAのインストール
- IntelliJ IDEAの公式サイトからexeファイルをダウンロードする
- Community版の「Windows, JBR 11 (.exe)を選択
- exeを実行し、インストールを開始する
- 全部デフォルト設定で[next]で進めていき、[install]ボタンを押下する
- 10分くらいかかる
- プログラムを開き、以下の通り進める
- Import IntelliJ IDEA Settings From..というページが開くので、[Do not import settings]を選択する
- Privacy Policyに同意する
- Data Sharingで[Don't send]を選択する
- UI themeで好きなテーマを選択する
- [Skip Remaining and Set Defaults]を選択すると以下のようなメニュー画面が開く
OpenJDKのダウンロードとPath設定
- OpenJDKのアーカイブ からzipファイルをダウンロードする
- 今回は「11.0.2 Windows 64-bit」を選択する
- ダウンロードができたらzipを解凍し、jdk-11.0.2フォルダを適当な場所に配置する
- 今回は「C:\Program Files\Java\jdk-11.0.2」というかたちで配置する
- システムの詳細設定から環境変数のPathを設定する
Spring Initializrによる雛形プロジェクトのダウンロード
- Spring InitializrのWebページにアクセスする
- 以下のように選択する
- Project: Gradle Project (変更)
- Language: Java (デフォルト)
- Spring Boot: 2.1.4 (デフォルト)
- Project Metadata:
- Group: com.example (デフォルト)
- Artifact: demo (デフォルト)
- Name: demo (デフォルト)
- Description: Demo project for Spring Boot (デフォルト)
- Package Name: com.example.demo (デフォルト)
- Packaging: Jar (デフォルト)
- Java Version: 11 (デフォルト
- Dependencies：DevTools / Lombok / Web / Thymeleaf / JDBC
(後でbuild.gradleにて編集できるので、ひとまず必要になりそうなものを選ぶ)
画面上は下図のようになる。
- [Generate Project]を押下し、zipファイルをダウンロードする
- zipファイルを解凍し、ワークスペースに配置する
- 今回は「C:\work\demo」に配置する
雛形プロジェクトを開き、Gradleビルドの実行
- [Welcome to IntelliJ IDEA]メニューの[Open]を押下する
- 「C:\work\demo」を選択し、[OK]を押下する
- [Import Project from Gradle]の画面が表示されたら、[Gradle JVM]にて先ほど配置したJDKのパス「C:\Program Files\Java\jdk-11.0.2」を指定して[OK]を押下する
- [Tips of the day]が表示されるので[Close]を押下する
- アノテーション機能を有効化する
- Crtl+Alt+SでSettings画面を開く
- 下図の通り「Enable annotation processing」のチェックを入れ、[OK]を押下する
- 左ペインの[build.gradle]をダブルクリックすると新しいバージョンのGradleを使用してビルドすることを推奨されるので、[OK, apply suggestion!]を押下する
- 10分くらいかかる
コントローラとHTMLの追加
- 「com.example.demo」配下に「HelloWorld」パッケージを追加し、その配下に「HelloWorldController.java」を作成する
- 「resouces/templates」配下に「HelloWorld.html」を作成する
- 「HelloWorldController.java」と「HelloWorld.html」はそれぞれ以下のように記述する
HelloWorldController.java
package com.example.demo.HelloWorld; import org.springframework.stereotype.Controller; import org.springframework.web.bind.annotation.GetMapping; @Controller public class HelloWorldController { @GetMapping("/helloworld") public String HelloWorld() { return "HelloWorld"; } }
HelloWorld.html
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Hello World</title> </head> <body> <h1>Hello World!</h1> </body> </html>
IntellJ IDEA上ではこのようになります。
アプリケーション実行
ここまで来たらあとは実行するだけです。
- Intellij IDEAにてDemoApplicationを選択し、[Run 'DemoApplication.main()']を押下する
- 以下の通り、[Started DemoApplication...]と表示されれば起動成功
こんな風にSpringの文字が出ます。
（これは少し崩れてますが・・）
. ____ _ __ _ _ /\\ / ___'_ __ _ _(_)_ __ __ _ \ \ \ \ ( ( )\___ | '_ | '_| | '_ \/ _` | \ \ \ \ \\/ ___)| |_)| | | | | || (_| | ) ) ) ) ' |____| .__|_| |_|_| |_\__, | / / / / =========|_|==============|___/=/_/_/_/ :: Spring Boot :: (v2.1.4.RELEASE) 2019-04-24 01:17:39.645 INFO 8464 --- [ restartedMain] com.example.demo.DemoApplication : Starting DemoApplication on DESKTOP-ROVHDC9 with PID 8464 (C:\work\demo\out\production\classes started by wingg in C:\work\demo) 2019-04-24 01:17:39.645 INFO 8464 --- [ restartedMain] com.example.demo.DemoApplication : No active profile set, falling back to default profiles: default 2019-04-24 01:17:39.724 INFO 8464 --- [ restartedMain] .e.DevToolsPropertyDefaultsPostProcessor : Devtools property defaults active! Set 'spring.devtools.add-properties' to 'false' to disable 2019-04-24 01:17:39.724 INFO 8464 --- [ restartedMain] .e.DevToolsPropertyDefaultsPostProcessor : For additional web related logging consider setting the 'logging.level.web' property to 'DEBUG' 2019-04-24 01:17:41.626 INFO 8464 --- [ restartedMain] o.s.b.w.embedded.tomcat.TomcatWebServer : Tomcat initialized with port(s): 8080 (http) 2019-04-24 01:17:41.657 INFO 8464 --- [ restartedMain] o.apache.catalina.core.StandardService : Starting service [Tomcat] 2019-04-24 01:17:41.657 INFO 8464 --- [ restartedMain] org.apache.catalina.core.StandardEngine : Starting Servlet engine: [Apache Tomcat/9.0.17] 2019-04-24 01:17:41.801 INFO 8464 --- [ restartedMain] o.a.c.c.C.[Tomcat].[localhost].[/] : Initializing Spring embedded WebApplicationContext 2019-04-24 01:17:41.801 INFO 8464 --- [ restartedMain] o.s.web.context.ContextLoader : Root WebApplicationContext: initialization completed in 2077 ms 2019-04-24 01:17:42.082 INFO 8464 --- [ restartedMain] o.s.s.concurrent.ThreadPoolTaskExecutor : Initializing ExecutorService 'applicationTaskExecutor' 2019-04-24 01:17:42.379 INFO 8464 --- [ restartedMain] o.s.b.d.a.OptionalLiveReloadServer : LiveReload server is running on port 35729 2019-04-24 01:17:42.457 INFO 8464 --- [ restartedMain] o.s.b.w.embedded.tomcat.TomcatWebServer : Tomcat started on port(s): 8080 (http) with context path '' 2019-04-24 01:17:42.457 INFO 8464 --- [ restartedMain] com.example.demo.DemoApplication : Started DemoApplication in 3.311 seconds (JVM running for 3.917)
ブラウザでの動作確認
- Chromeを起動する
- 「http://localhost:8080/helloworld」にアクセスする
- 以下の通り「Hello World!」が表示される
実はこの前に1度エラーで実行に失敗してます
エラー事象
DemoApplicationを実行後、以下のエラーが発生し、起動に失敗しました。
2019-04-24 01:03:24.778 ERROR 8712 --- [ restartedMain] o.s.b.d.LoggingFailureAnalysisReporter : *************************** APPLICATION FAILED TO START *************************** Description: Failed to configure a DataSource: 'url' attribute is not specified and no embedded datasource could be configured. Reason: Failed to determine a suitable driver class Action: Consider the following: If you want an embedded database (H2, HSQL or Derby), please put it on the classpath. If you have database settings to be loaded from a particular profile you may need to activate it (no profiles are currently active). Class transformation time: 0.049822762s for 5710 classes or 8.725527495621715E-6s per class Process finished with exit code 0
エラー内容の調査
エラー文言でググると以下の記事がヒット。
データソースの自動設定を無効化すると解消されるという内容です。
StackOverFlow
「Failed to configure a DataSource: 'url' attribute is not specified and no embedded datasource could be configured. SPRING」
原因
不明です。
というか今回やりたいことに対して本質的な問題ではないので、詳しくは調べていません。
何となくですが、Spring Bootとして基本的な挙動なのか、JDBCをDependenciesに追加しているせいなのかで、データストアに関する設定が事前にできていないとエラーになると思われます。
対策
上記の記事に書いてあるとおり以下のコードをDemoApplication.javaに追加しました。
追加後、改めて実行するとエラーが解消し、無事に起動成功しました。
@EnableAutoConfiguration(exclude={DataSourceAutoConfiguration.class})」
【とはメモ#3】「Spring Boot」とは？
Spring Bootを使ってWebアプリを作ることになりそうなので、調べておくことにしました。
「Spring Boot」とは？
- Javaを使ったWebアプリケーション開発を簡単にするためのフレームワーク
- アプリケーションをつくるために必要なライブラリ群をまとめたSpring Frameworkをコア技術としている
- Spring Frameworkベースのアプリケーションを素早く簡単に作成、実行、配布するためのサポート機能を提供する
具体的にどんなことができるのか？
- ライブラリ群とコードの雛形が用意されており、一からコーディングする必要がない
- アノテーション（注釈）を記述するだけでWebAPI等が実装でき、コード量を削減できる
- Spring Frameworkでは必須だったXMLファイルによる複雑な設定（DB接続情報など）が不要になった
- Tomcat、JettyなどWebコンテナをjarに内蔵することで、jar単体でWebアプリケーションが実行できる
まだ使ってないので、ピンと来ていないところもあります。
そもそも今回は書かなかったですが、Spring Frameworkの概念としてDIとかAOPとかBeanとか何じゃそれ状態なので勉強しないとですね。
実際使ってみたら、所感を書きたいと思います。
参考
以下のサイトを参考にさせていただきました。
多様化するJavaのフレームワーク問題を解決する、「Spring Boot」とは？ (1/3)：CodeZine（コードジン）
【Java】SpringBootとは？
以上。
