概要

このサイトについて

このサイトは、すでにある程度Hotwireを学んだものの、自分なりのベストプラクティスが固まらないエンジニアを対象にしています。

ここでは私の経験を元にした、自分なりのHotwireに対する考え方と取り掛かり方を紹介します。

Hotwireで最高のUI/UXを作る

このサイトの目的は「Hotwireで高いレベルのUI/UXを作る」ことです。

「Hotwireを使えばJavaScriptを使わないで済む」や「Hotwireを使えば簡単にUIが作れる」を紹介することが目的ではありません。そのような情報はインターネットでチュートリアル系を検索していただければたくさん見つかると思います。もちろんHotwireはそういう使い方もできますが、このサイトではReact/Next.js等で作るのと同等以上のUI/UXを作るのが目的です

本サイトで紹介するのは、いわゆる偶有的複雑さ(Accidental Complexity)をHotwireがどのように解消してくれるかです。簡単なUIの作り方は紹介しませんので、この点はご了承ください。フロントエンドはどうやっても複雑なので、その分は複雑な話をします

具体例を通して

ここで紹介しているテクニックは、すべてのこのサイトで体験できるようにしています。各項目でどこにデモがあるかを紹介しています。

またコードはすべてGitHubで公開しています。こちらも見ながら、あるいダウンロードしてローカルで試しながら、読んでいただければと思います。

技術構成

このサイトは主に下記の技術から構成されています

  • Ruby on Rails
  • Hotwire
  • SQLite3
  • Tailwind CSS

ローカルでのインストール

GitHubのREADMEをご確認ください。SQLite3は自動的にインストールされますので、依存性はRubyだけです。Rubyが動く環境は各自でご用意していたくことになります。