はじめに

2010年ごろからフロントエンドの技術は大幅に複雑化しました。かなり高いレベルでJavaScriptを理解し、状態管理に習熟し、関数型プログラミングのコンセプトもある程度わからないと歯が立たないものとなってしまいました。負担軽減のためにフロントエンドとバックエンドの分業が進んだにも関わらず、技術のトレンドは次から次へと入れ替わり、技術変化についていくのが大変厳しいという声もよく聞かれました。

確かにフロントエンド技術の発展により、より高度なウェブサイトが作れるようになりました。特にFigmaやExcalidrawなどはネイティブアプリケーションに匹敵する滑らかさと高度なUIを実現しています。しかし私たちが通常使用したり製作したりしているウェブサイトは、本当にこのような高度な技術が必要でしょうか？これは真剣に向き合うべき問題だと思います。

一方でその流れに乗らず、より簡単なアプローチを追求する人たちもいました。GitHubのPJAX、Ruby on RailsのTurbolinksなどがこれにあたります。流行りの技術がネイティブアプリ開発をウェブで実現しようとしていたのに対して、シンプルにHTMLを拡張しようというアプローチです。2020年ごろになるとこれらの技術が徐々に脚光を浴びるようになります。大きなきっかけはRuby on RailsがHotwireをデフォルトで採用したことです。これをきっかけに、Elixir PhoenixのLiveview, HTMX, Alpine.js, Laravel Livewireにも大きく注目が集まるようになりました。そして2024年のRuby on Rails Community Surveyでは、RailsのフロントエンドとしてHotwireのStimulusが何とReactを追い抜き、Ruby on Rails開発者が最も使っているJavaScriptライブラリとなりました。

そんな中でも、まだまだHotwireの本当のポテンシャルは十分に理解されていないと私は感じています。私はフリーランスなのでいくつもの現場に参画します。Hotwireの使用比率は間違いなく向上しているものの、まだまだうまく使いこなせなかったり、「管理画面なら良いけど、ユーザ向け画面はダメでしょ？」と言った誤解をしている人が大多数です。

本サイトはこの現状を改善する試みとして作成しています。Hotwireは少し学習してみたけれども、今一つピンと来ない人。Hotwireによる開発のコツや考え方を知りたい人。Reactとの違いを理解した上で乗り換えるべきかを検討したい人。本サイトはこのような人を主な対象と考えて作成しています。

2010年前後のjQueryの時代はデザイナーがHTML/CSS/JavaScriptのフロントエンドを担当することは一般的でした。例えばウェブデザイナーのツールであるAdobe DreamWeaverにはJavaScriptをウェブサイトに埋め込むツールがあったほどです。またjQueryに戻ってしまっては流石に発展がないのですが、Hotwireによって過剰な分業が見直されたら良いのではないかと思っています。

私が目指す未来は、デザイン、フロントエンド、バックエンド、インフラがもっとギュッと濃縮されて、チームのすべての開発者がすべての工程に関わっていく姿です。必ずその方が良いものが作れると思いますし、何よりも楽しいはずです。Hotwireや同類の技術の普及を通して、それぞれの専門の距離が近くなり、深い分業ではなくより密接な協働となることを夢見ています。

本サイトは決してチュートリアルではありません。しかしコンセプトの理解に関わるところは掘り下げて丁寧に解説しているつもりですので、中途半端な理解であってもある程度ついていけるのではないかと思います。