はじめに こんにちは。Ruby on Railsを学習しているmockeyと申します。 現在作成中のアプリにはチャットbot機能がありますが、入力フォームから送信した後にフォームから入力内容をクリアにする実装をしたいと思います。 今回は、JavaScriptのフレームワークの一つである「Stimulus」を使用していきます。 どなたかの参考になれば嬉しいです。 前提 この記事ではChatbot機能の実装についての記載はありません。 Chatbot機能はturboを使用しています。 バージョン Ruby 3.2.3 Rails 7.1.3.4 開発環境 Docker Stimulusとは？ Stimulusは、JavaScriptフレームワークの一つで、HTML属性を利用して動的なUIを作る事ができます。 ボタンをクリックしたらテキストが変わる ボタンが押下された時に色が変わる モーダル画面
Rails7 のデフォルトでインストールされる JavaScript フレームワーク Stimulus に入門してみます。 まずは公式のハンドブックやリファレンスを読みながら雰囲気を掴んでいこうと思います。 Stimulus とは HTML を中心に置いている JavaScript のフレームワークです。 React や Vue は空のページを作成してサーバーサイドから JSON を返し SPA を実現していますが、 Stimulus は通常のサーバーサイドレンダリングを強化するように設計されています。 Stimulus は Railsに依存しているわけではないですが、Rails7 にデフォルトで入っている Turbo と組み合わせるとSPAのようなUIを実現できます。 3つのコアコンセプト Stimulus には3つのコアコンセプトがあります。 コントローラー コントローラーは DOM
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
Controllers A controller is the basic organizational unit of a Stimulus application. import { Controller } from "@hotwired/stimulus" export default class extends Controller { // … } Controllers are instances of JavaScript classes that you define in your application. Each controller class inherits from the Controller base class exported by the @hotwired/stimulus module. ﹟ Properties Every controlle
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をあんまり書かずに今どきのリッチなアプリケーションを作る」技術です！ 今どきのアプリケーションは、様々な動作やアニメー
半年くらい前にこんな記事を書きました。 様々なプロダクトにメインとして使用しているNext.js製のフロントエンドをStimulusとTurboに書き換えて運用してみました。 今回は実際に運用してみた所管などをまとめたいと思います。 はじめに とはいえ、Hotwireたちは飽くまでフロントエンドのみ。バックエンド側のロジックを持つことのできないこれらのライブラリとの単純な比較対象としては、サーバーレスでも運用できるNext.jsとは若干ズレが出てきます。 今回私はNode.js製のバックエンドサーバーの上にNext.jsが乗っかていたもののフロントエンドの部分を、従来型のpugのマークアップとHotwireに置換し運用しました。 ですので、今回はNext.jsではなくReactとの比較を行っていきます。 ここは一つご留意ください。 ちなみにVercelなどのPaasなどでHotwireを使
はじめに 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
昨今のフロントエンドトレンドを鑑みてフロントエンドの技術構成を考えると今はどんな選択肢が主流でしょう？ それぞれ並列なものではないですが、React? Vue? Next? Nuxt?そんなワードがきっと頭に浮かぶでしょう。 今の時代、jQueryでゴリゴリUIを記述するとなんだか白い目でみられる。 そう、令和とはそういう時代です。 界隈の最先端おじさんをみると、build processがあるのは当然で、HTML/CSSはjsが吐き出すもので、それが最大限正しいように語られています。 確かにExising Domのアプローチで界隈から評価されてるライブラリはなく、さほどいい選択肢には見えません。(個人の主観) ではそれらのアプローチの何がそんなにいいんでしょう？ 過去から現在まで我々は何に苦心して、それらはそれをどう解決してくれたのでしょう？ 雑に紐解いていきましょう。(今回はUI構築の
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 系のツールとは根本的に考え方が異なり、今からこれを採用するのはやや申し訳ないというか、正直に言うとよいイメージはなかったし、例えばフロントエンドエンジニアとしてスキルアップしたいぜーという人には合わないと思うが、ただ、どうせサーバサイドの開発が必要で、分
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く