Webフロントエンドエンジニアが Railsの世界を覗いてみた👀

Webフロントエンドエンジニアが Railsの世界を覗いてみた 👀 n13u / 2025.11.15 / #seb_sapporo

自己紹介 ● ● 札幌市みてきて北区生、あつべつ・く育、市電のふるさと中央区在住 Nishimura Wataru（_n13u_） ○ ○ ○ ○ ● ちょっと株式会社 プロダクト部 エンジニア 兼 プロジェクト支援チーム をやってます. 札幌市のIT人材増加事業 Sapporo Engineer Base 運営 一般社団法運営 他開発の副業お仕事 etc… 自称：北海道有数のWeb・JSフリーク ○ o’rileyのJavaScript本、初版を持っています 2

動機とキッカケ ● ● ● ● ● ● Rails Girls Sapporo 2nd にコーチとして参加した Railsアプリケーション開発する時にコマンドポチポチして開発できるの楽 全部Railsで開発できたら楽なんだよな... ○ Rails APIモードで使うの勿体無い... でも生のJavaScript書きたくないし、いい感じのフレームワークで開発したい なぁ... Webpackerってそういえば聞いたことあるな... CoffeeScriptってそういえばRailsの絡みがあったな...

RailsのJS事情ナンモワカラン

思い出される過去の記憶...

このスライドでRailsのJSの事情について 触れられていた記憶が...

DHH（プロレーサー）のブログも 紹介されていたのでいくつか読んだ

今のRailsのWebフロントエンド環境についてざっくり理解 ● めちゃくちゃ間違ってそうだが.... ● トランスパイリングやバンドリングはデフォルトの選択肢から無く なった ○ そもそもまとめる必要がなくなった...HTTP/2の恩恵 ○ ESMとImport mapsによって分割された状態のファイルを管理しやす くなった ● ReactやVueが使えなくなるが、HotwireがRailsにありその上で開発ができ る ○ Turbo ■ Turbo Drive / Turbo Frames / Turbo Streams / Turbo Native ○ Stimulus ○ Strada

これを見た自分の感想 ● あ〜めっちゃわかる ● ● 昨今のJavaScripth環境は複雑怪奇なる新情勢なので... ViteとかもES Modules（Native ESM）の上に乗っかってトランスパイルやバンドリング をするので理解度が高い ○ （ブラウザのImport maps便利なんすよねかなり...） ○ そういやesm.shとかskypackとかどこいった...? ● 極論：JSXでスコープ狭めて書きたいだけ ● ○ DHHもこれには言及していて、2022年時点ではできないよ〜といっていた。 ○ JSXで書きたい=HTMLライクに宣言的に書きたい＝erbがあれば事足りそう ただ、サーバーサイドのレンダリング結果キャッシュしないとアクセス数多いサービス だと辛そう ○ 改めてNext.jsはこの辺よく考えられてるなぁと思う（いる/いらないは別として）

• http://esm.sh

色々やってみる ● 前提環境 ○ Ruby 3.4.7 ○ Rails 8.1.1

と思ったら

🤪

Unexpected transport error (OpenSSL::SSL::SSLError: SSL_connect returned=1 errno=0 peeraddr=[2001:4860:4802:32::15]:443 state=error: certificate verify failed (unable to get certificate CRL)) (Importmap::Packager::HTTPError)

OpenSSLの証明書問題らしい..._(:3」∠)_

諦め

代わりにこれ読んだ

これまたざっくりとした理解 ● HTML Over The Wire の略らしい、オシャレ ● Hotwire👉描画更新とロジックをViewに紐づけるためのライブラリ群 ○ Turbo：描画更新のライブラリ（HTMLをサーバーサイドでレンダリン グし、その結果で置き換える） ○ Stimulus：Rubyで書いたロジックをHTMLにバインディングするため のライブラリ ● TurboはHydrationの概念がないだけで、ReactのRSCに近い概念に感じ た ○ 仮想DOM（ではないが）に近いレイヤーをサーバー側に持っていてい てる ○ JSONを返すのではなく、HTMLで管理するのはかなり納得感がでかい

感想：Railsいいぞ...！

あれ、TypeScriptは...?

最後の一文ことパンチライン TypeScript. May you bring much rigor and satisfaction to your tribe while letting the rest of us enjoy JavaScript in the glorious spirit it was originally designed: Free of strong typing. TypeScript。 あなたの部族に多くの厳密さと満足をもたらすとともに、 我々その他の者には、本来の設計思想である 強い型付けから解放された 栄光ある精神のまま JavaScript を楽しませてくれますように。

確かにTypeScriptは必要なのか？

確かにTypeScriptは必要なのか？ ● TypeScriptに僕ら（？）が求めているのはType-Awareでかつ開発時に チェックできるLinting環境が欲しい ○ 実行時に型が保証されていはいないし... ● スキーマライブラリとVSCodeのIntellisenseだけで割と事足りるかも...? ● ところで、DHHは実は数少ない文字通りの”JavaScript愛好家”なのかもしれな い ○ I'd go so far as to say it's my second favorite language after Ruby. Yes, a distant second, but a second none the less. ○ 私は Ruby に次いで 2 番目に好きな言語と言ってもいいでしょう。そう、 かなり大きく離れた 2 位ではありますが、それでも 2 位であることに変わ りはありません。

各種URL ● ● ● ● ● ● https://speakerdeck.com/takahashim/enishitechcconf2024?slide=134 https://world.hey.com/dhh/modern-web-apps-without-javascript-bundling-or-transpiling-a20 f2755 https://railsguides.jp/v8.1/working_with_javascript_in_rails.html https://zenn.dev/shita1112/books/cat-hotwire-turbo https://world.hey.com/dhh/the-time-is-right-for-hotwire-ecdb9b33 https://www.docswell.com/s/jxck/5M628L-ts-type-js#p1

• https://speakerdeck.com/takahashim/enishitechcconf2024?slide=134
• https://world.hey.com/dhh/modern-web-apps-without-javascript-bundling-or-transpiling-a20f2755
• https://railsguides.jp/v8.1/working_with_javascript_in_rails.html
• https://zenn.dev/shita1112/books/cat-hotwire-turbo
• https://world.hey.com/dhh/the-time-is-right-for-hotwire-ecdb9b33
• https://www.docswell.com/s/jxck/5M628L-ts-type-js#p1