4
1

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

More than 1 year has passed since last update.

Stimulus 公式ハンドブックの次に読むものは?

Last updated at Posted at 2023-03-13

(この記事はあくまで私の主観です。)

Stimulusの公式ドキュメントはそれなりに充実しています。

しかし今のところStimulusの起源(origin)や挙動(reference)に関する記述がありますが設計についての実践的なところはあまり記述されていません。

あなたが次に読む最適なものは何でしょう?

信頼できるのは作者だけ

いろんなリソースにたどり着くかもしれません。

Better StimulusJS? Hotwire Discussion? Qiita?

しかし私が本当におすすめしたいのは、作者である37signals(旧Basecamp社)がどのようにこのStimulusを使ってるかを観察することです。

37signalsはBasecampというプロジェクトマネジメントツールやheyと呼ばれるメールサービスをリリースしています。

そしてそれらのプロダクトはStimulusで動いています。

それらがStimulusを学習する上で最も素晴らしい学習リソースだと私は信じています。

ソースをのぞき見ることに背徳感がありますか?

安心してください、DHHはこう言っています。

heyのソースを読んでコントローラを拝借してるといった人に対するDHHのコメントです。

「小声でそれをいう必要はない。heyから好きなコントローラをもっていってくれ。 sourcemap付きで出してるよ!」という具合です。

過去のツイートや記事を読むと

「OSSによって育てられた私はJavaScriptを難読化するようなことはしない。 プロダクション環境でもsource mapsをつけて輸出する」 的なことも言ってます。

心が洗われますね。

Stimulusのコミッターは37signalsの中の人であれ外の人であれ大概heyのコードを読んでるっぽい発言をちょいちょいしてます。

heyのソースを読む

できることならheyサービスに課金してあげるとよいのですが、アカウントを持っていなくてもログイン画面からソースは読めます。

見るべき場所はproduction.hay-stack-assets.com/assets/controllersの中です。

devtoolsのsourcesパネル production.hay-stack-assets.com/assets/controllersの中にコントローラが列挙されている。

以前はbundleされてたのでどのページでも全てのコントローラが読めましたがRails7がリリースされ、stimulus-autoloaderができたタイミング(厳密には少し後)にbundle運用が終わったため、ページで必要な分だけの読み込みになっており少し少ないです。

もっと読みたい方は課金してログイン後のページのソースを読みましょう。(一応メニューのTry it Freeから無料でお試しアカウントをつくることもできますが)

このページから読めるコードで最もアツいコードはfocus-trapコントローラでしょうか。

これはモーダルダイアログなど、独立したタブシーケンスを持つようなUIを構築する時によく使うものになります。

dialog要素を使えば同等のことがネイティブでできますが、ios15系をサポートするなどの制約がある場合はこの辺の実装を自前で行う必要があり、そういった時にこのコードを参考、拝借することができます。

こういったコードを読みながらコントローラの粒度・設計のあり方を学ぶことができます。

他のJavaScriptライブラリを使ってきた方はコントローラをUI単位で書いてしまうことが多いと思います。

heyのコードから読み解けるコントローラの単位はUIではなく"振る舞い"です。

表示と振る舞いを切り離すことで再利用性を高めるというノウハウをここから学ぶことができます。

まだハンドブックを読んでません。

もしあなたがまだハンドブックを読んでいないのであればまずはThe Origin of Stimulusを読みましょう。

37signalsがなぜStimulusを作ったのか。何を実現したかったのかが記述されています。

これを理解した上で読み進めるといろんなことがすんなり受け入れられるようになるんじゃないかと思います。

また同じく背景を説明した記事に拙作ですが妄想的DHH理解というのもあります。よければご参照ください。

4
1
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
4
1

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?