Kaigi on Rails 2024 のトーク資料です。Hotwireを活用するための指針をStimulusの側から整理しています。
タグ検索の該当結果が少ないため、タイトル検索結果を表示しています。
Kaigi on Rails 2024 のトーク資料です。Hotwireを活用するための指針をStimulusの側から整理しています。
September 24, 2021 Stimulus 3 + Turbo 7 = Hotwire 1.0 For so long, it felt like I could only tell half the story of how we make software for the web at Basecamp. Too many of the chapters about our front-end approach were missing key pages. Sure, we had some of it out there. Turbolinks, for example, hark back to 2012, when I was inspired by Chris Wanstrath's ideas in pjax, and took them further. An
Stimulus: A modest JavaScript framework for the HTML you already have. 2020年末にリリースされた Stimulus 2.0 を試して気づいたことをメモしておく。Stimulus は Rails で有名な Basecamp のメンバーによって開発された生 DOM をベースに、できるだけ template に JS を書かずに動的な DOM の生成、変更を実現するためのライブラリである。 昨今流行りの React, Vue, Angular などの VirtualDOM 系のツールとは根本的に考え方が異なり、今からこれを採用するのはやや申し訳ないというか、正直に言うとよいイメージはなかったし、例えばフロントエンドエンジニアとしてスキルアップしたいぜーという人には合わないと思うが、ただ、どうせサーバサイドの開発が必要で、分
概要 元サイトの許諾を得て翻訳・公開いたします。 英語記事: Stimulus Features You (Didn’t) Know | Rails Designer 原文公開日: 2024/11/28 原著者: Rails Designer -- Railsフロントエンド関連記事に加えて、ViewComponentとTailwind CSSを用いた美しいUIコンポーネントを販売しています 日本語タイトルは内容に即したものにしました。 また、APIドキュメントへのリンクも追加しています。 Stimulusは、今あるHTMLで使える控えめなJavaScriptフレームワークとして喧伝されていますが、Stimulusにはおなじみの機能の他にも、あなたの知らない機能や忘れてしまった機能がいくつも詰まっています。 🔗 1: 存在確認用のプロパティ StimulusのAPI（ターゲット、CSSクラ
米国はもうベーシックインカム導入寸前の所まで追い込まれてる。Child Tax Creditは1年間の時限措置だが事実上子育て世帯向けのBIだし、もしStimulus checkで経済が上手く回れば何らかの形で恒久化しろという話が民主党左派から出るだろう。
"Turbolinksアレルギー患者に捧げるTurbo & Stimulusでの時短実装術" Kaigi on Rails 2023での登壇資料です。 https://kaigionrails.org/2023/talks/lni_T/ Turbolinksはどうしてもトラブルが多発するライブ…
The third major release of Stimulus represents a big milestone for the Hotwire community. This is the first release where every substantial new feature came as a contribution from outside of Basecamp and HEY. We've got a new package, action parameters, default values, target lifecycle callbacks, debug mode, utility-CSS support, and Controller.shouldLoad. Let's dig into what's new! New Package Firs
CodeZine編集部では、現場で活躍するデベロッパーをスターにするためのカンファレンス「Developers Summit」や、エンジニアの生きざまをブーストするためのイベント「Developers Boost」など、さまざまなカンファレンスを企画・運営しています。
Stimulusとは何か Stimulusとは、JavaScriptで書かれたクライアントサイドのライブラリです。 Basecampによって開発され、2021/12にversion2がリリースされました。 皆さんの知るところでいうとstack overflowが採用していたりします。 StimulusはHTMLを中心に考え、JavaScirptで書かれた振る舞いをHTMLから呼び出すことができるように設計されています。 それはonClickでJavaScriptコードを呼び出していた太古のコードに少し似ています。 さぁ、私と共にWeb開発を再発見しましょう！ 基本原理 StimulusはHTMLに書かれた振る舞いを与えます。 それは最初にレンダリングされたHTMLだけでのことではなく、後から挿入されたHTMLに対しても同じです。 StimulusはMutationObserverを利用して
2022.03.04 Rails 7: importmap-railsとjsbundling-railsでのStimulusの扱いの違い Rails 7でStimulusを書き始めています。Rails 7でimportmap-railsを使うかjsbundling-railsを使うかでStimulusのセットアップが少し違うことに今頃気づいたので、小ネタですがメモします。 ローカルのStimulusコントローラファイル ここでは、ローカルのapp/javascripts/controllers/以下のStimulusコントローラファイルの扱いについて書きます。 1. importmap-railsの場合 importmap-railsを使う場合は、app/javascripts/controllers/index.jsが以下のようにeagerLoadControllersFrom()を呼び
Stimulus: A modest JavaScript framework for the HTML you already have. 2020年末にリリースされた Stimulus 2.0 を試して気づいたことをメモしておく。Stimulus は Rails で有名な Basecamp のメンバーによって開発された生 DOM をベースに、できるだけ template に JS を書かずに動的な DOM の生成、変更を実現するためのライブラリである。 昨今流行りの React, Vue, Angular などの VirtualDOM 系のツールとは根本的に考え方が異なり、今からこれを採用するのはやや申し訳ないというか、正直に言うとよいイメージはなかったし、例えばフロントエンドエンジニアとしてスキルアップしたいぜーという人には合わないと思うが、ただ、どうせサーバサイドの開発が必要で、分
こんにちは、CCCMKホールディングス TECH LABの三浦です。最近は暖かくなってきました。寒い冬に比べると雨が降る日が多くなりましたが、晴れた日は外を歩くととても気持ちがいいです。あっという間に雨の季節が来て外を歩くと汗びっしょりになる夏になってしまうので、それまでに今のちょうどいい気候を楽しんでおこうと思います。 最近はLarge Language Model(LLM)に関する情報を色々と調べています。LLMの情報を調べていると、これからこのLLMとどう付き合っていくのがいいんだろう、考えてしまいます。そんな中、最近読んだ論文で提案されているLLMへのアプローチがこれまでのPrompt Engineeringのものとは少し違い、とても興味深く感じました。今回はこの論文を読んだ内容についてまとめ、感じたことを書きたいと思います。 LLMを使ってみて感じていること LLM、主にGPT-
はじめに 2020/12/5 に Stimulus 2.0 がリリースされました 🎉 Stimulus 2.0 リリースノート 以前 Rails アプリで JavaScript を書くときに少しだけ使ったことがあり便利だったので、2.0 も試してみました。 前提 $ ruby -v ruby 3.0.0p0 (2020-12-25 revision 95aff21468) [x86_64-darwin19] $ bin/rails -v Rails 6.1.1 今回はテキストエリアの文字数をカウントする処理を Stimulus で実装してみようと思います。 Rails Girls アプリ・チュートリアル でつくるアイデア投稿アプリをベースにして、アイデアの Description 項目に処理を入れていきます。 参考: How to use Stimulus JS 2.0's new Va
はじめに 先日開催されたHotwire.love Vol.42で、以下のようなMarkdownのプレビュー機能を実装してみました。 （Previewにチェックを入れると、テキストエリアに書いたMarkdownがHTMLとしてプレビュー表示される） Stimulusを使うとわずか50行未満で実装できたので、この記事ではその方法を紹介します。 動作確認したバージョン この記事で使った各ライブラリのバージョンは以下の通りです。 rails 8.0.2 stimulus 3.2.2 (stimulus-rails 1.3.4) marked 15.0.11 dompurify 3.2.5 また、コードは以下のGitHubリポジトリで公開しています。 サンプルアプリの仕様（変更前） ここではごく簡単なブログアプリをサンプルアプリとして使用します。 よくあるScaffoldを使ったRailsアプリケー
Deleted articles cannot be recovered. Draft of this article would be also deleted. Are you sure you want to delete this article?
Good // application_controller.js import { Controller } from "stimulus"; export default class extends Controller { sayHi () { console.log("Hello from the Application controller."); } } // custom_controller.js import ApplicationController from "./application_controller"; export default class extends ApplicationController { sayHi () { super.sayHi(); console.log("Hello from a Custom controller"); } }
概要 元サイトの許諾を得て翻訳・公開いたします。 英語記事: A decoupled approach to relaying events between Stimulus controllers | justin․searls․co 原文公開日: 2024/08/18 原著者: Justin Searls -- Test Doubleの共同創業者です 日本語タイトルは内容に即したものにしました。 Stimulusできらめきを放つ魅力の1つは、ブラウザに長時間居座り続けるステートフルなアプリケーションを構築「しなくても」、DOMにリッチな動的振る舞いを追加できることです。 Stimulusコントローラの1つ1つは、孤島のように独立していて互いに干渉せず、1個のコントローラが1つの振る舞いを追加し（例: クリップボードにコピーするためのコントローラや、アップロード状況を表示するコントローラ
概要 元サイトの許諾を得て翻訳・公開いたします。 英語記事: Recipe: Swapping out a model div with Turbo Streams and Stimulus | justin․searls․co 原文公開日: 2024/07/12 原著者: Justin Searls -- Test Doubleの共同創業者です 日本語タイトルは内容に即したものにしました。 RailsとHotwireの組合せは、動的な振る舞い（例: ユーザー操作へのレスポンスをHTMLとしてネットワーク経由で送信することでDOMを置き換える）について実に優れていますが、その処理内では半ダースものファイルを操作する必要があるため、、全体の印象として面倒に感じられます。 そもそもRails自身が常にそうなっています（1つ機能を足すためにルーティング/モデル/コントローラ/ビューなどの更新が必
概要 元サイトの許諾を得て翻訳・公開いたします。 英語記事: Infinite Auto Scroll using Turbo only ( No Stimulus / No Javascript ) | Saeloun Blog 原文公開日: 2022/08/10 原著者: Manmeet Singh サイト: Saeloun Blog 本記事では、Rails 7アプリケーションを作成して無限オートスクロールを実装します。この機能はHotwireのTurboだけで実現されており、JavaScriptコードは1行も書く必要がありません。 このアプリはデフォルトで10件の投稿を表示します。ページ末尾に到達すると、投稿がなくなるまで10件ずつ投稿を追加表示します。 Rails 7アプリケーションを作成する 最初にRails 7アプリケーションを作成します。 rails _7.0.3_ new
概要 原著者の許諾を得て翻訳・公開いたします。 英語記事: Building lightweight components with Rails Helpers and Stimulus | Boring Rails: Skip the bullshit and ship fast 原文公開日: 2021/04/21 著者: Matt Swanson サイト: Boring Rails 日本語タイトルは内容に即したものにしました。 Railsのカスタムヘルパーのよさは見落とされがちですが、軽量コンポーネントのビルドや、Stimulusコントローラの定形コードを削減するときの最適なオプションにもなります。 Stiumulusの良い点は、マークアップの属性を見るだけで即座に機能を推測できることです。しかし、値やアクションを複数持つコンポーネントの場合は実装の詳細の一部を隠蔽することにメリットが
概要 元サイトの許諾を得て翻訳・公開いたします。 英語記事: Connected and Disconnected Target Callbacks with Stimulus | Rails Designer 原文公開日: 2024/09/17 原著者: Rails Designer -- Railsフロントエンド関連記事に加えて、ViewComponentとTailwind CSSを用いた美しいUIコンポーネントを販売しています 日本語タイトルは内容に即したものにしました。 前回の記事では、Values APIの変更コールバックについて解説しました。今回は、targetsを対象とするConnectedコールバックとDisconnectedコールバックについて解説します。 参考: Connected and Disconnected Callbacks -- Stimulus Refer
You signed in with another tab or window. Reload to refresh your session. You signed out in another tab or window. Reload to refresh your session. You switched accounts on another tab or window. Reload to refresh your session. Dismiss alert
You signed in with another tab or window. Reload to refresh your session. You signed out in another tab or window. Reload to refresh your session. You switched accounts on another tab or window. Reload to refresh your session. Dismiss alert
概要 原著者の許諾を得て翻訳・公開いたします。 英語記事: Submit a Form Programmatically - Better StimulusJS 原文更新日: 2022/01/29 原著者: Julian Rubisch -- Stimulus Reflexのコアメンバーです サイト: Home - Better StimulusJS フォームをプログラムで送信する <div data-controller="remote-form"> <%= form_with(model: @article, html: { data: { action: "ajax:success->remote-form#onPostSuccess" } }) do |f| %> <%= select_tag "author", options_from_collection_for_select
Deleted articles cannot be recovered. Draft of this article would be also deleted. Are you sure you want to delete this article? (この記事はあくまで私の主観です。) Stimulusの公式ドキュメントはそれなりに充実しています。 しかし今のところStimulusの起源(origin)や挙動(reference)に関する記述がありますが設計についての実践的なところはあまり記述されていません。 あなたが次に読む最適なものは何でしょう？ 信頼できるのは作者だけ いろんなリソースにたどり着くかもしれません。 Better StimulusJS? Hotwire Discussion? Qiita? しかし私が本当におすすめしたいのは、作者である37signals(旧Ba
UI components for your Rails app A ready-to-use collection of 275+ UI components with minimal dependencies and a focus on simplicity
はじめに この記事の概要 こんにちは、株式会社TOKOSのツキヤです！ 今回は、RailsでJavaScriptを扱う際にはスタンダードとなりつつあるStimulusについての簡単な説明から、使い方まで解説します！ 個人的には、少ないJavaScriptの記述量でアニメーションやDOM操作が可能となるのでかなりオススメの技術です😎 あまり知らなかった人も、この機会にサラッと学んでみましょう✨ 対象読者 Stimulusが何なのか知りたい人 RailsでDOM操作を行いたい人 Stimulusとは？ Hotwireについて Stimulusについて解説するために、まずはHotwireという技術について説明します！ Hotwireをひとことで説明すると、「JavaScriptをあんまり書かずに今どきのリッチなアプリケーションを作る」技術です！ 今どきのアプリケーションは、様々な動作やアニメー
あなたにとって重要なトピックや同僚の最新情報を入手しましょう最新の洞察とトレンドに関する最新情報を即座に受け取りましょう。 継続的な学習のために、無料のリソースに手軽にアクセスしましょうミニブック、トランスクリプト付き動画、およびトレーニング教材。 記事を保存して、いつでも読むことができます記事をブックマークして、準備ができたらいつでも読めます。
Rails7 のデフォルトでインストールされる JavaScript フレームワーク Stimulus に入門してみます。 まずは公式のハンドブックやリファレンスを読みながら雰囲気を掴んでいこうと思います。 Stimulus とは HTML を中心に置いている JavaScript のフレームワークです。 React や Vue は空のページを作成してサーバーサイドから JSON を返し SPA を実現していますが、 Stimulus は通常のサーバーサイドレンダリングを強化するように設計されています。 Stimulus は Railsに依存しているわけではないですが、Rails7 にデフォルトで入っている Turbo と組み合わせるとSPAのようなUIを実現できます。 3つのコアコンセプト Stimulus には3つのコアコンセプトがあります。 コントローラー コントローラーは DOM
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く