路線・駅データのAPIサービスをRuby on Rails 7 + Tailwind CSSで構築しました

概要#

• Ruby on Rails 7 から Tailwind CSS がサポートされました。
• Rails が公式でサポートするからにはさぞかし良いものだろうと思うので使ってみたいと思い、ゴールデンウィークの 1 日を使って構築してみました。
• 路線・駅データのAPI

スクリーンショット#

まずは成果物の紹介です。

% curl -s  https://train.teraren.com/lines/11302/stations.json | jq -r '.[] | [.station_name, .lat, .lon]'
[
  "大崎",
  "35.619772",
  "139.728439"
]
[
  "五反田",
  "35.625974",
  "139.723822"
]
[
  "目黒",
  "35.633923",
  "139.715775"
]
[
  "恵比寿",
  "35.646685",
  "139.71007"
]
[
  "渋谷",
  "35.658871",
  "139.701238"
]

なぜ駅・路線のAPIサービスを作ったのか？#

• 駅データのサイトにて10年以上前から路線と駅のマスタデータがCSVファイルで公開されていました。
• 上記のサイトにてAPIからデータを取得できるようになっていたようですが、サービスが停止されていました。
• 類似サービスは様々な会社が提供していますが、無料でユーザ登録なしに簡単に利用できるAPIがありませんでした。
• 駅データのマスタ情報は、運営元の方がオープンなライセンスを適用してくださっているので、それを有効活用したかった。

作業の流れと使った時間#

• ekidataのマスタ情報の学習: 1h
• Tailwind CSSのチュートリアル: 1h
• 開発環境構築: 2h
  • rails new . -c tailwind
  • docker-compose設定
• プログラム開発: 6h
  • model作成
  • migrations作成
  • i18n
• daisyUIの学習: 1h
• UIコーディング: 4h
• Lighthouse用チューニング: 1h
• OpenAPI Specification 3形式でのAPIドキュメント作成: 1h
• サーバ設定: 1h

Railsの主な設定#

gem 'rails-i18n', '~> 7.0.0'
gem 'kaminari'
gem 'sitemap_generator'
gem "meta-tags"
gem "rack-cors"
gem "google-tag-manager-rails", "~> 0.1.3"
gem "gretel", "~> 4.4"
gem "geocoder", "~> 1.8"

## for dev and test
gem 'rubocop', '~> 1.28'
gem 'openapi3_parser'
gem 'openapi_parser'
gem 'annotate'

gem 'rspec-rails'
gem 'capybara-screenshot'

index 34c0c84..01f8719 100644
--- a/config/tailwind.config.js
+++ b/config/tailwind.config.js
@@ -17,5 +17,16 @@ module.exports = {
     require('@tailwindcss/forms'),
     require('@tailwindcss/aspect-ratio'),
     require('@tailwindcss/typography'),
-  ]
+    require('daisyui'),
+  ]
 }

工夫した点#

• Lighthouse のスコアがほとんどチューニングしないで 95 点も出せました。

感想#

• Tailwind CSS だけではプリミティブな UI ライブラリ集なので、Tailwind CSS だけを使ってページを作るのはかなり大変です。
• UI の部品であるコンポーネントは daisyUIを使いました。
  • Twitter Bootstrap は Tailwind CSS + デフォルトでそこそこ見栄えの良いアセットが提供されているのに対して Tailwind ではマークアップのライブラリとそれを使った UI のアセットは綺麗に分割されています。

Tailwind だけだと、左のように書かないといけないのですが右のように書けます。daisyUI はこのように Tailwind の 1 段階上位で提供されている UI のアセット集という位置づけです。その結果、Twitter Bootstrap と同じような DSL で UI をマークアップできます。

• Tailwind が node に依存していないということもあり、全体的にコンパイルが速くて良いです。
• ページ内で使っているスタイルしかコンパイルされないので、必要最低限の CSS がコンパイルされるのでファイル容量が少なくて良いです。
• DSL (Domain-Specific Language) が 1 つ増えるのは辛いところではありますが、daisyUI のおかげで覚える項目はほとんど無いです。

まとめ#

• UI ができないエンジニアでも良い感じの UI を作れました。
• 今は基本的な API しか作っていませんが、もっと便利なユースケースの API を増やしていきます。
• そのうちテクニカル編を書きたいと思います。