「GWの次の祝日はいつやろ」→「69日後」→「どんだけ〜」なWebアプリを作りました


<blockquote class="twitter-tweet" data-lang="ja"><p lang="ja" dir="ltr">わい「次の祝日はいつかなーっと」<br>画面「7月15日(月)海の日まであと、69日10時間47分22秒」<br>わい「どんだけ〜」<br><br>そんなWebアプリ「次の祝日までどんだけ〜」を作りました☺️皆さんも一緒に次の祝日がくるのをカウントダウンして待ちわびてやりましょう！（絶望の69日後）<a href="https://t.co/sIvmI897Ee">https://t.co/sIvmI897Ee</a> <a href="https://t.co/lEWAKYH7Ca">pic.twitter.com/lEWAKYH7Ca</a></p>&mdash; だいぱんまん🐶技術ブログ (@donchan922) <a href="https://twitter.com/donchan922/status/1125316672565334016?ref_src=twsrc%5Etfw">2019年5月6日</a></blockquote>
<script async src="https://platform.twitter.com/widgets.js" charset="utf-8"></script>

今年のGWは夢の10連休でしたが、それも今日で終わり。なんとなく次の祝日を調べてみたらなんと**69日先**。こうなりゃもう、**次の祝日までカウントダウンして思う存分待ちわびてやろうと思い、勢いでWebアプリケーション「次の祝日までどんだけ〜」を作成しました:relaxed:**

# Webアプリケーション「次の祝日までどんだけ〜」
![1.gif](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/55366/de0f86bf-ee4a-a726-9a80-0befa718c35c.gif)
[次の祝日までどんだけ〜](https://next-holiday-dondake.herokuapp.com/)

次の祝日までをカウントダウン形式で表示してくれるWebアプリです。文字だけだと味気ないので、祝日ごとに画像を表示しています。

画像はすべて[いらすとや](https://www.irasutoya.com/)のものを使わせていただきました。どの祝日の画像もすべて用意されていて驚きました。いらすとやさんすごい。。ただ、2020年から「体育の日」が「スポーツの日」に変更されるのですが、さずがにまだスポーツの日の画像は用意されていませんでした（用意してほしいですー:pray:）。

# 技術の話
ここからは少し真面目に技術のことについて書いていきます。

## 使用技術
- フロントエンド
    - Thymeleaf
    - JavaScript
    - CSS
- バックエンド
    - Java
    - Spring Boot
    - Gradle
    - LomBok
- デプロイ
    - Heroku

いつも個人開発はRuby on Railsで作るのですが、業務でJavaを使っていることもあり勉強がてら上記構成でWebアプリケーションを作成しました。Spring Boot、慣れればサクッとWebアプリが作れますね。

デプロイ先はおなじみHerokuです。なんせデプロイが簡単なのです。どれくらい簡単かというと、以下のようにたった3行のコマンドを実行するだけです。

```sh
# たった3行でHerokuにデプロイできました
$ heroku login
$ heroku create
$ git push heroku master
```

ちなみに、画面がシンプルなのでCSSフレームワーク（Bootstrapなど）は使っていません。レスポンシブ対応はCSSをちょこちょこっと書いて行いました。ですので、スマホでも見ていただけると嬉しいです:relaxed:

ドメイン名が「next-holiday-dondake.herokuapp.com」とHerokuのデフォルトになっているのは見逃してください:joy:気が向けば独自ドメインを取得しようと思います。

## 仕組み
- 祝日のリストを用意する
    - [内閣府](https://www8.cao.go.jp/chosei/shukujitsu/gaiyou.html?PHPSESSID=013ef321a0aea2e19e3937010efdf4e3)が提供している国民の祝日のCSVを利用
- 祝日ごとの画像を用意する
    - [いらすとや](https://www.irasutoya.com/)を利用
- 次の祝日の判定ロジックを組み込む
    - 祝日のリストを読み込み、現在日時から直近の祝日を取得
- 画面を表示する
    - Thymeleafを使って次の祝日情報（名前、日付、画像名）をViewに返す
    - [JavaScriptでカウントダウンを作る](https://qiita.com/piesuke0727/items/91333b9a1ba8fe051be2)

こうやって仕組みを並べてみると、たくさんのサイトにお世話になっているなと感じます:pray:オリジナルの仕組みとしては、「次の祝日の判定ロジックを組み込む」くらいですね。

リリース最優先で開発を進めたため、コードが汚かったり、テストコードを書いていなかったりします。ソースは公開していますので、プルリクお待ちしています:bow_tone1:

[donchan922/next-holiday](https://github.com/donchan922/next-holiday)

# まとめ
連休明けは仕事や学校に行くのがおっくうになるかと思いますが、次の祝日は必ずや訪れます。皆さんも一緒に次の祝日がくるのをカウントダウンして待ちわびてやりましょう！（**絶望の69日後**）

[次の祝日までどんだけ〜](https://next-holiday-dondake.herokuapp.com/)

# 参考リンク
- [Javaで現在の日付を表示する - Qiita](https://qiita.com/vuntunan/items/f7906cb9810620470dfd)
- [文字列日付からDate型への変換 - Qiita](https://qiita.com/hiro2108/items/6f0b3b4682266a6b2a8c)
- [JavaScriptでカウントダウンを作る - Qiita](https://qiita.com/piesuke0727/items/91333b9a1ba8fe051be2)
- [国民の祝日について - 内閣府](https://www8.cao.go.jp/chosei/shukujitsu/gaiyou.html?PHPSESSID=013ef321a0aea2e19e3937010efdf4e3)
- [Next Holiday - 次の祝日は？](http://holiday.fjord.jp/)
- [Spring Boot + ThymeleafでSpringTemplateEngineをカスタマイズする - Qiita](https://qiita.com/RyoTa63292153/items/99530cd68ead2a03fc19)
- [CSSで中央寄せする9つの方法（縦・横にセンタリング）](https://saruwakakun.com/html-css/basic/centering)
- [レスポンシブ対応サクッとまとめ - Qiita](https://qiita.com/ymtm_jp/items/e8c55046429438a91903)