HotwireとNext.jsをちゃんと見て比較しよう#本サイトでは、React/Next.jsに詳しいフロントエンドエンジニアを対象に、実際に動くコードと実際に動くデモを体感しながら HotwireとReact/Next.jsを比較します。 各技術でのUIの作り方を伝えるだけでなく、さまざまな状況での動きを確認していただくために、仕組みや限界も紹介します。そのため、かなり細部の議論もしています。 HotwireでもNext.jsと同等か、それ以上のUI/UXが実現できます。「Hotwireは簡単だけど、React/Next.jsの方が優れたUI/UXが作れる」というのは、かなり特殊なものでない限りは誤解ですHotwireはバックエンド非依存です。Rails, Laravel, Django, Go, Nodeでも関係なく動きます。実際、本サイトのHotwireコードはNext.js AP
Hotwire よもやま話 Anecdotes on Hotwire 経験したこと、感じたこと、Hotwireのこと 概要 このサイトについて Hotwireとは何か？ Hotwireはどいういう時に向いているか？ あなたはHotwireを採用するべきか？ Hotwireは管理画面限定？ コード例 トグル アコーディオン ドロップダウン リアルタイム検索 サイドバーメニュー カルーセル 引き出し トースト モーダル 「いいね」ボタン Apple Store模写（複雑なステート） Chart.js埋め込み 考える手順 HotwireはMVPのMPAから作る TurboとStimulus: どっちを使う？ Hotwire, React, jQueryのアプローチ コンセプト JavaScriptは使おう！ Stimulus中のHTML生成を避ける理由 サーバから見たTurbo FramesとT
Deleted articles cannot be recovered. Draft of this article would be also deleted. Are you sure you want to delete this article? 概要 Stimulus の簡単な機能を学習したので記載します。 これからStimulusを学習する方の参考になればと思います。 前提条件としてdockerとrails6で実装しています。 他の方法も一応記載しているので、参考になれば嬉しいです！ Stimulusとは Stimulusは、JavaScriptフレームワークです。 StimulusはHTMLを中心に考え、JavaScirptで書かれたHTMLを呼び出すことができるように設計されています。 基本説明 呼び出すJavaScriptオブジェクトはコントローラーと呼ばれ、Stimu
はじめに 本記事は錆びかけたRailsの知識を頑張ってアップデートするアドベントカレンダー24日目です。 自分なりに整理するために、Stimulusの使い始め方についてまとめておきます。 Stimulusとは Stimulusは、JavaScriptフレームワークでです。Webページに富んだインタラクティブな機能を簡単に追加できます。Railsによって開発されたこのフレームワークは、DOM要素とJavaScriptオブジェクトを「コントローラ」として結びつけることで、ユーザーインターフェースの振る舞いを容易に管理します。StimulusはHTMLマークアップ内で独自の属性を使用し、JavaScriptのコードを宣言的に適用します。これにより、クリーンで保守しやすいコードを書くことが可能になり、特にRailsアプリケーションにおいて効果を発揮します。Stimulusは、非同期通信、フォーム処
はじめに この記事の概要 こんにちは、株式会社TOKOSのツキヤです！ 今回は、RailsでJavaScriptを扱う際にはスタンダードとなりつつあるStimulusについての簡単な説明から、使い方まで解説します！ 個人的には、少ないJavaScriptの記述量でアニメーションやDOM操作が可能となるのでかなりオススメの技術です😎 あまり知らなかった人も、この機会にサラッと学んでみましょう✨ 対象読者 Stimulusが何なのか知りたい人 RailsでDOM操作を行いたい人 Stimulusとは？ Hotwireについて Stimulusについて解説するために、まずはHotwireという技術について説明します！ Hotwireをひとことで説明すると、「JavaScriptをあんまり書かずに今どきのリッチなアプリケーションを作る」技術です！ 今どきのアプリケーションは、様々な動作やアニメー
（自分はRailsを書くことが多く、フロントエンドの経験は乏しいです。見方にだいぶ偏りがあると思いますので、そのあたり差し引いてお読みいただければと思います〜🙇♂️） こんにちは〜。Hotwireを仕事で使う機会があったので、実際に使ってみて感じた、良かった点、辛かった点、向いているケース、向いていないケースを共有します〜。 Hotwireとは？ Turbo Driveとは？ Turbo Framesとは？ Turbo Streamsとは？ Stimulusとは？ Hotwireのデモ 良かった点 サーバーサイドに集中できる Railsの資産をフルに活かせる 後付けで段階的にSPA風の挙動を追加できる 学習コストが低い 開発コストが低い WebSocketは必須ではない 辛かった点・辛くなりそうな点 DOM更新時にレスポンスを待たないといけない SPAのユーザー体験とはだいぶ違う He
半年くらい前にこんな記事を書きました。 様々なプロダクトにメインとして使用しているNext.js製のフロントエンドをStimulusとTurboに書き換えて運用してみました。 今回は実際に運用してみた所管などをまとめたいと思います。 はじめに とはいえ、Hotwireたちは飽くまでフロントエンドのみ。バックエンド側のロジックを持つことのできないこれらのライブラリとの単純な比較対象としては、サーバーレスでも運用できるNext.jsとは若干ズレが出てきます。 今回私はNode.js製のバックエンドサーバーの上にNext.jsが乗っかていたもののフロントエンドの部分を、従来型のpugのマークアップとHotwireに置換し運用しました。 ですので、今回はNext.jsではなくReactとの比較を行っていきます。 ここは一つご留意ください。 ちなみにVercelなどのPaasなどでHotwireを使
Ruby on Rails7ではWebpackerがデフォルトで無くなったらしい... え？マジ？じゃあJavaScriptのバンドルとかどうすんの？ Rails7に触れる機会がなかったのでこの辺りの疑問をながらく放置してきたが、いい加減調べることにした。 何番煎じだい？という内容だが、2023年初頭時点で見えているものとして、まとめることに意味があると信じたい。 前提 対象読者 Rails7のフロントエンド周りに関して、大きく変わったらしいということは知っていてもそれ以上詳しいことは知らない人。 この記事の目標 個人的に 採用する Rails7のフロントエンド周りの選択を固める まとめ importmap-rails Hotwire(turbo-rails + stimulus-rails) sprockets-rails tailwindcss-rails を個人的には採用していこうと
（自分はRailsを書くことが多く、フロントエンドの経験は乏しいです。見方にだいぶ偏りがあると思いますので、そのあたり差し引いてお読みいただければと思います〜🙇♂️） こんにちは〜。Hotwireを仕事で使う機会があったので、実際に使ってみて感じた、良かった点、辛かった点、向いているケース、向いていないケースを共有します〜。 Hotwireとは？ Turbo Driveとは？ Turbo Framesとは？ Turbo Streamsとは？ Stimulusとは？ Hotwireのデモ 良かった点 サーバーサイドに集中できる Railsの資産をフルに活かせる 後付けで段階的にSPA風の挙動を追加できる 学習コストが低い 開発コストが低い WebSocketは必須ではない 辛かった点・辛くなりそうな点 DOM更新時にレスポンスを待たないといけない SPAのユーザー体験とはだいぶ違う He
概要 原著者の許諾を得て翻訳・公開いたします。 英語記事: Thinking in Hotwire: Progressive Enhancement | Boring Rails: Skip the bullshit and ship fast 原文公開日: 2022/08/16 原著者: Matt Swanson サイト: Boring Rails 日本語タイトルは内容に即したものにしました。 Turboについては以下の記事もどうぞ。 参考: 猫でもわかるHotwire入門 Turbo編 Hotwireを始める方法や個別のパーツの利用法を学べるチュートリアルはたくさんあります。しかし私は「Hotwireで考える」コツを会得するのにしばらく時間がかかりました。 Hotwireそのものは「HTML-over-the-wire」という包括的なコンセプトに過ぎず、以下のような部品をいつどのように
はじめに hotwire-railsの勉強にあたって、スクリーンキャストの内容を写経しながら理解した動作について、備忘録として投稿させていただきます。 投稿してる人の理解度 Hotwireを利用すればRailsアプリでSPAが実現できる。 もくじ スクリーンキャストを写経しながらHotwireを理解する（その１） - 0:00 ~ 0:55 Hotwire の 説明 - 0:56 ~ 2:21 Hotwire を 導入する準備 スクリーンキャストを写経しながらHotwireを理解する（その２） - 2:22 ~ 3:16 ページの一部 を turbo-frame にする - 3:17 ~ 3:35 turbo-frame内のリンク から 別ページへ遷移できるようにする スクリーンキャストを写経しながらHotwireを理解する（その３） - 3:36 ~ 4:38 turbo で ページ全体
昨今のフロントエンドトレンドを鑑みてフロントエンドの技術構成を考えると今はどんな選択肢が主流でしょう？ それぞれ並列なものではないですが、React? Vue? Next? Nuxt?そんなワードがきっと頭に浮かぶでしょう。 今の時代、jQueryでゴリゴリUIを記述するとなんだか白い目でみられる。 そう、令和とはそういう時代です。 界隈の最先端おじさんをみると、build processがあるのは当然で、HTML/CSSはjsが吐き出すもので、それが最大限正しいように語られています。 確かにExising Domのアプローチで界隈から評価されてるライブラリはなく、さほどいい選択肢には見えません。(個人の主観) ではそれらのアプローチの何がそんなにいいんでしょう？ 過去から現在まで我々は何に苦心して、それらはそれをどう解決してくれたのでしょう？ 雑に紐解いていきましょう。(今回はUI構築の
概要 原著者の許諾を得て翻訳・公開いたします。 英語記事: Hotwire: Reactive Rails with no JavaScript? — Martian Chronicles, Evil Martians’ team blog 原文公開日: 2021/04/12 原著者: Vladimir Dementyev -- Evil Martiansリード開発者。 サイト: Evil Martians -- ニューヨークやロシアを中心に拠点を構えるRuby on Rails開発会社です。良質のブログ記事を多数公開し、多くのgemのスポンサーでもあります。 長文につき前編と後編に分割しました。今回は後編です。 HotwireはRailsを「ゼロJavaScript」でリアクティブにできるか？前編（翻訳） 前編: TurbolinksをTurbo Driveに置き換える 前編: Turb
概要 原著者の許諾を得て翻訳・公開いたします。 英語記事: Hotwire: Reactive Rails with no JavaScript? — Martian Chronicles, Evil Martians’ team blog 原文公開日: 2021/04/12 原著者: Vladimir Dementyev -- Evil Martiansリード開発者。 サイト: Evil Martians -- ニューヨークやロシアを中心に拠点を構えるRuby on Rails開発会社です。良質のブログ記事を多数公開し、多くのgemのスポンサーでもあります。 長文につき前編と後編に分割しました。 サマリー The HEY stack: - Vanilla Ruby on Rails on the backend, running on edge - Stimulus, Turbolink
「iCARE Dev Meetup #18」�で発表した資料です https://icare.connpass.com/event/201662/
はじめに DHH 兄貴が公開してくれた Hotwire 、Websocket でリアルタイム更新が反映できて便利だなと思いましたが、ちょっと触ってみたら、 get で画面遷移なしでHTMLを取得する時ってどうすればできるんだろう と疑問が出てきたので、 rails g scaffold の画面を SPA にしてみました。 Hotwire の基本については、公式のビデオと Hotwireでリアルタイムなチャットを作る を参考すればイメージできると思います。 結論 できたもの https://github.com/blueplanet/hotwire-scaffold 入力フォームを index に直接に表示することで、SPA にできました bootstrap を導入して入力フォームを modal でやりたかったんですが、HTML が取得できたものの、 それを受けてから modal を表示する
はじめに 12/23にRuby on Railsの生みの親:DHH氏がHotwireという新しいgemについて言及され、それが話題になっているようだったので試してみた記事です。 Also cross-posted the screencast from the Hotwire to YT. That fucking thing nearly killed me. Hours and hours of work to get this just like I wanted it. But it's a clean 10 minutes on the main tech, then another 3 on showing it in real life. ACTION! 😄 https://t.co/0MWpEPnSzx — DHH (@dhh) December 22, 2020 本記事
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
