https://b.hatena.ne.jp/YassLab/ViewComponent/ ViewComponentに関するYassLabのはてなブックマーク (11) https://zenn.dev/osiro/articles/6c6627e6b6ad3c “GitHub謹製のライブラリであるViewComponentを利用しても良いと思います。GitHubではSystem TestやViewSpec,Helper Specで課題を抱えていたためにこのライブラリを作ったそうです。当然ながら、Componentに対してもSpecが書けます” YassLab 2024-11-13T05:19:57Z GitHub Ruby Rails Test ViewComponent <blockquote cite="https://zenn.dev/osiro/articles/6c6627e6b6ad3c" title="Rails system tests 倒し方"><cite><img src="https://cdn-ak2.favicon.st-hatena.com/64?url=https%3A%2F%2Fzenn.dev%2Fosiro%2Farticles%2F6c6627e6b6ad3c" alt="" /> <a href="https://zenn.dev/osiro/articles/6c6627e6b6ad3c">Rails system tests 倒し方</a></cite><p><a href="https://zenn.dev/osiro/articles/6c6627e6b6ad3c"><img src="https://cdn-ak-scissors.b.st-hatena.com/image/square/2c6be202df7e2c8df8c1cefb47ddea28ccb6e0ff/backend=imagemagick;height=90;version=1;width=120/https%3A%2F%2Fres.cloudinary.com%2Fzenn%2Fimage%2Fupload%2Fs--kVtit74T--%2Fc_fit%252Cg_north_west%252Cl_text%3Anotosansjp-medium.otf_55%3ARails%252520system%252520tests%252520%2525E5%252580%252592%2525E3%252581%252597%2525E6%252596%2525B9%252Cw_1010%252Cx_90%252Cy_100%2Fg_south_west%252Cl_text%3Anotosansjp-medium.otf_34%3Awebuilder240%252Cx_220%252Cy_108%2Fbo_3px_solid_rgb%3Ad6e3ed%252Cg_south_west%252Ch_90%252Cl_fetch%3AaHR0cHM6Ly9zdG9yYWdlLmdvb2dsZWFwaXMuY29tL3plbm4tdXNlci11cGxvYWQvYXZhdGFyLzYxNWM3OGQwOWMuanBlZw%3D%3D%252Cr_20%252Cw_90%252Cx_92%252Cy_102%2Fco_rgb%3A6e7b85%252Cg_south_west%252Cl_text%3Anotosansjp-medium.otf_30%3AOSIRO%252520%2525E3%252583%252586%2525E3%252583%252583%2525E3%252582%2525AF%2525E3%252583%252596%2525E3%252583%2525AD%2525E3%252582%2525B0%252Cx_220%252Cy_160%2Fbo_4px_solid_white%252Cg_south_west%252Ch_50%252Cl_fetch%3AaHR0cHM6Ly9zdG9yYWdlLmdvb2dsZWFwaXMuY29tL3plbm4tdXNlci11cGxvYWQvYXZhdGFyLzE5OWUzODgyNWUuanBlZw%3D%3D%252Cr_max%252Cw_50%252Cx_139%252Cy_84%2Fv1627283836%2Fdefault%2Fog-base-w1200-v2.png%3F_a%3DBACAGSGT" alt="Rails system tests 倒し方" title="Rails system tests 倒し方" class="entry-image" /></a></p><p>最初にまとめ Railsでsystem testsを減らすにはロジックをRailsに集中させ、MinitestやRSpecでのユニットテストが書きやすい技術を選定し、開発する 初めに DHHがXで、自身のプロジェクトであるHEYで359件ものsystem testsをやめて、ControlletでのIntegration Testで代替してるというポストしていました。 意図や具体的...</p><p><a href="https://b.hatena.ne.jp/entry/s/zenn.dev/osiro/articles/6c6627e6b6ad3c"><img src="https://b.hatena.ne.jp/entry/image/https://zenn.dev/osiro/articles/6c6627e6b6ad3c" alt="はてなブックマーク - Rails system tests 倒し方" title="はてなブックマーク - Rails system tests 倒し方" border="0" style="border: none" /></a> <a href="https://b.hatena.ne.jp/entry/s/zenn.dev/osiro/articles/6c6627e6b6ad3c"><img src="https://b.st-hatena.com/images/append.gif" border="0" alt="はてなブックマークに追加" title="はてなブックマークに追加" /></a></p></blockquote> 2 https://github.com/jonspalmer/view_component-storybook “The ViewComponent::Storybook gem provides Ruby api for writing stories describing View Components and allowing them to be previewed and tested in Storybook via its Server support. ” YassLab 2024-08-09T09:58:15Z Ruby Rails ViewComponent Storybook <blockquote cite="https://github.com/jonspalmer/view_component-storybook" title="GitHub - jonspalmer/view_component-storybook: ViewComponent previews and testing in Storybook"><cite><img src="https://cdn-ak2.favicon.st-hatena.com/64?url=https%3A%2F%2Fgithub.com%2Fjonspalmer%2Fview_component-storybook" alt="" /> <a href="https://github.com/jonspalmer/view_component-storybook">GitHub - jonspalmer/view_component-storybook: ViewComponent previews and testing in Storybook</a></cite><p><a href="https://github.com/jonspalmer/view_component-storybook"><img src="" alt="GitHub - jonspalmer/view_component-storybook: ViewComponent previews and testing in Storybook" title="GitHub - jonspalmer/view_component-storybook: ViewComponent previews and testing in Storybook" class="entry-image" /></a></p><p></p><p><a href="https://b.hatena.ne.jp/entry/s/github.com/jonspalmer/view_component-storybook"><img src="https://b.hatena.ne.jp/entry/image/https://github.com/jonspalmer/view_component-storybook" alt="はてなブックマーク - GitHub - jonspalmer/view_component-storybook: ViewComponent previews and testing in Storybook" title="はてなブックマーク - GitHub - jonspalmer/view_component-storybook: ViewComponent previews and testing in Storybook" border="0" style="border: none" /></a> <a href="https://b.hatena.ne.jp/entry/s/github.com/jonspalmer/view_component-storybook"><img src="https://b.st-hatena.com/images/append.gif" border="0" alt="はてなブックマークに追加" title="はてなブックマークに追加" /></a></p></blockquote> 1 https://zenn.dev/cobachie/articles/tried-view-component “Rails 6.1 から ViewComponent がデフォルトでサポート / 使いやすいし早いしテストもできて安心なので、これからは部分テンプレートではなく ViewComponent を使うようにしたらよさそう！と思いました” YassLab 2024-06-26T03:13:18Z Ruby Rails ViewComponent <blockquote cite="https://zenn.dev/cobachie/articles/tried-view-component" title="ViewComponent を試してみた"><cite><img src="https://cdn-ak2.favicon.st-hatena.com/64?url=https%3A%2F%2Fzenn.dev%2Fcobachie%2Farticles%2Ftried-view-component" alt="" /> <a href="https://zenn.dev/cobachie/articles/tried-view-component">ViewComponent を試してみた</a></cite><p><a href="https://zenn.dev/cobachie/articles/tried-view-component"><img src="https://cdn-ak-scissors.b.st-hatena.com/image/square/bfb0212c693bf04a98b8b5df21dee3e4bf1a6a4a/backend=imagemagick;height=90;version=1;width=120/https%3A%2F%2Fres.cloudinary.com%2Fzenn%2Fimage%2Fupload%2Fs--3JVRv1r6--%2Fc_fit%252Cg_north_west%252Cl_text%3Anotosansjp-medium.otf_55%3AViewComponent%252520%2525E3%252582%252592%2525E8%2525A9%2525A6%2525E3%252581%252597%2525E3%252581%2525A6%2525E3%252581%2525BF%2525E3%252581%25259F%252Cw_1010%252Cx_90%252Cy_100%2Fg_south_west%252Cl_text%3Anotosansjp-medium.otf_37%3Acobachie%252Cx_203%252Cy_121%2Fg_south_west%252Ch_90%252Cl_fetch%3AaHR0cHM6Ly9saDMuZ29vZ2xldXNlcmNvbnRlbnQuY29tL2EtL0FPaDE0R2lsQUxDVWItR3hGdE1GZUhtT25qQTMwVnJLOC1oYW9mOUs0RDRhPXM5Ni1j%252Cr_max%252Cw_90%252Cx_87%252Cy_95%2Fv1627283836%2Fdefault%2Fog-base-w1200-v2.png" alt="ViewComponent を試してみた" title="ViewComponent を試してみた" class="entry-image" /></a></p><p>はじめに Rails 6.1 から ViewComponent がデフォルトでサポートされるようになったそうなので試してみました。 ViewComponent github/view_component Document ViewComponent は HTML を出力する Ruby オブジェクトです。 使いどころとしては部分テンプレート（partial）と同じと考えればよさそうですが、ViewComponent...</p><p><a href="https://b.hatena.ne.jp/entry/s/zenn.dev/cobachie/articles/tried-view-component"><img src="https://b.hatena.ne.jp/entry/image/https://zenn.dev/cobachie/articles/tried-view-component" alt="はてなブックマーク - ViewComponent を試してみた" title="はてなブックマーク - ViewComponent を試してみた" border="0" style="border: none" /></a> <a href="https://b.hatena.ne.jp/entry/s/zenn.dev/cobachie/articles/tried-view-component"><img src="https://b.st-hatena.com/images/append.gif" border="0" alt="はてなブックマークに追加" title="はてなブックマークに追加" /></a></p></blockquote> 5 https://zenn.dev/tor_inc/articles/43e3ad4a99d29c “RailsのAction ViewでReactライクにHTMLコーディングができるViewComponentを触ってみた。 CSSをTailwindCSSで書く場合はコンポーネント機能は必須だ。従来のERBのパーシャル機能だけではつらくなってくるはず。” YassLab 2024-04-30T13:16:30Z Ruby Rails ViewComponent <blockquote cite="https://zenn.dev/tor_inc/articles/43e3ad4a99d29c" title="RailsのViewComponentを触ってみた"><cite><img src="https://cdn-ak2.favicon.st-hatena.com/64?url=https%3A%2F%2Fzenn.dev%2Ftor_inc%2Farticles%2F43e3ad4a99d29c" alt="" /> <a href="https://zenn.dev/tor_inc/articles/43e3ad4a99d29c">RailsのViewComponentを触ってみた</a></cite><p><a href="https://zenn.dev/tor_inc/articles/43e3ad4a99d29c"><img src="https://cdn-ak-scissors.b.st-hatena.com/image/square/fc70f32cd650408b0269c63f9c69c69af7e788b6/backend=imagemagick;height=90;version=1;width=120/https%3A%2F%2Fres.cloudinary.com%2Fzenn%2Fimage%2Fupload%2Fs--EKAqBzKB--%2Fc_fit%252Cg_north_west%252Cl_text%3Anotosansjp-medium.otf_55%3ARails%2525E3%252581%2525AEViewComponent%2525E3%252582%252592%2525E8%2525A7%2525A6%2525E3%252581%2525A3%2525E3%252581%2525A6%2525E3%252581%2525BF%2525E3%252581%25259F%252Cw_1010%252Cx_90%252Cy_100%2Fg_south_west%252Cl_text%3Anotosansjp-medium.otf_34%3AKatsushi%252520OUGI%252Cx_220%252Cy_108%2Fbo_3px_solid_rgb%3Ad6e3ed%252Cg_south_west%252Ch_90%252Cl_fetch%3AaHR0cHM6Ly9zdG9yYWdlLmdvb2dsZWFwaXMuY29tL3plbm4tdXNlci11cGxvYWQvYXZhdGFyLzg2YWFmMzM0ZWIuanBlZw%3D%3D%252Cr_20%252Cw_90%252Cx_92%252Cy_102%2Fco_rgb%3A6e7b85%252Cg_south_west%252Cl_text%3Anotosansjp-medium.otf_30%3A%2525E6%2525A0%2525AA%2525E5%2525BC%25258F%2525E4%2525BC%25259A%2525E7%2525A4%2525BE%2525E3%252583%252588%2525E3%252582%2525A5%2525E3%252583%2525BC%2525E3%252582%2525A2%2525E3%252583%2525BC%2525E3%252583%2525AB%252Cx_220%252Cy_160%2Fbo_4px_solid_white%252Cg_south_west%252Ch_50%252Cl_fetch%3AaHR0cHM6Ly9saDMuZ29vZ2xldXNlcmNvbnRlbnQuY29tL2EtL0FPaDE0R2lFWm1BU2xvcmFhclM4VjZQM2tnVDE0SFlWVl9IUU96bmhmS0gzS1E9czI1MC1j%252Cr_max%252Cw_50%252Cx_139%252Cy_84%2Fv1627283836%2Fdefault%2Fog-base-w1200-v2.png%3F_a%3DBACAGSGT" alt="RailsのViewComponentを触ってみた" title="RailsのViewComponentを触ってみた" class="entry-image" /></a></p><p>RailsのAction ViewでReactライクにHTMLコーディングができるViewComponentを触ってみた。 CSSをTailwindCSSで書く場合はコンポーネント機能は必須だ。従来のERBのパーシャル機能だけではつらくなってくるはず。 ViewComponentはRailsのデフォルト機能ではないので、Gemに追加する。</p><p><a href="https://b.hatena.ne.jp/entry/s/zenn.dev/tor_inc/articles/43e3ad4a99d29c"><img src="https://b.hatena.ne.jp/entry/image/https://zenn.dev/tor_inc/articles/43e3ad4a99d29c" alt="はてなブックマーク - RailsのViewComponentを触ってみた" title="はてなブックマーク - RailsのViewComponentを触ってみた" border="0" style="border: none" /></a> <a href="https://b.hatena.ne.jp/entry/s/zenn.dev/tor_inc/articles/43e3ad4a99d29c"><img src="https://b.st-hatena.com/images/append.gif" border="0" alt="はてなブックマークに追加" title="はてなブックマークに追加" /></a></p></blockquote> 2 https://zenn.dev/kuromitsu/articles/viewcomponent-hotwire-tailwindcss-description "JavaScriptの動作をテストするための方法も用意されており、コンポーネント単位でのユニットテストを少ないコストで実装できる / ViewComponentのプレビュー機能とcapybaraのsystem specを組み合わせることで、簡単に実装できます" YassLab 2024-04-27T12:39:37Z Ruby Rails ViewComponent Hotwire テスト 開発 JavaScript <blockquote cite="https://zenn.dev/kuromitsu/articles/viewcomponent-hotwire-tailwindcss-description" title="Rails7 + ViewComponent + Hotwireでのコンポーネント指向なフロントエンド開発を試してみた"><cite><img src="https://cdn-ak2.favicon.st-hatena.com/64?url=https%3A%2F%2Fzenn.dev%2Fkuromitsu%2Farticles%2Fviewcomponent-hotwire-tailwindcss-description" alt="" /> <a href="https://zenn.dev/kuromitsu/articles/viewcomponent-hotwire-tailwindcss-description">Rails7 + ViewComponent + Hotwireでのコンポーネント指向なフロントエンド開発を試してみた</a></cite><p><a href="https://zenn.dev/kuromitsu/articles/viewcomponent-hotwire-tailwindcss-description"><img src="https://cdn-ak-scissors.b.st-hatena.com/image/square/49ecb6f57d7796ca0b312ed1f14a2f5ac3c6856d/backend=imagemagick;height=90;version=1;width=120/https%3A%2F%2Fres.cloudinary.com%2Fzenn%2Fimage%2Fupload%2Fs--kF3j7Juq--%2Fc_fit%252Cg_north_west%252Cl_text%3Anotosansjp-medium.otf_55%3ARails7%252520%25252B%252520ViewComponent%252520%25252B%252520Hotwire%2525E3%252581%2525A7%2525E3%252581%2525AE%2525E3%252582%2525B3%2525E3%252583%2525B3%2525E3%252583%25259D%2525E3%252583%2525BC%2525E3%252583%25258D%2525E3%252583%2525B3%2525E3%252583%252588%2525E6%25258C%252587%2525E5%252590%252591%2525E3%252581%2525AA%2525E3%252583%252595%2525E3%252583%2525AD%2525E3%252583%2525B3%2525E3%252583%252588%2525E3%252582%2525A8%2525E3%252583%2525B3%2525E3%252583%252589%2525E9%252596%25258B%2525E7%252599%2525BA%2525E3%252582%252592%2525E8%2525A9%2525A6%2525E3%252581%252597%2525E3%252581%2525A6%2525E3%252581%2525BF%2525E3%252581%25259F%252Cw_1010%252Cx_90%252Cy_100%2Fg_south_west%252Cl_text%3Anotosansjp-medium.otf_37%3Akuroweb%252Cx_203%252Cy_121%2Fg_south_west%252Ch_90%252Cl_fetch%3AaHR0cHM6Ly9zdG9yYWdlLmdvb2dsZWFwaXMuY29tL3plbm4tdXNlci11cGxvYWQvYXZhdGFyLzcxNGM4NmVmMzMuanBlZw%3D%3D%252Cr_max%252Cw_90%252Cx_87%252Cy_95%2Fv1627283836%2Fdefault%2Fog-base-w1200-v2.png%3F_a%3DBACAGSGT" alt="Rails7 + ViewComponent + Hotwireでのコンポーネント指向なフロントエンド開発を試してみた" title="Rails7 + ViewComponent + Hotwireでのコンポーネント指向なフロントエンド開発を試してみた" class="entry-image" /></a></p><p>はじめに 本記事では環境構築について取り扱いません。 詳細につきましてはリポジトリを参照してください。 Railsのフロントエンド開発でつらいところ Railsでフロントエンド開発する場合に、よく使う部品はPartialなどで共通化しますよね？ 小規模であればPartialだけで十分なのですが、コードベースが成長したり、複雑...</p><p><a href="https://b.hatena.ne.jp/entry/s/zenn.dev/kuromitsu/articles/viewcomponent-hotwire-tailwindcss-description"><img src="https://b.hatena.ne.jp/entry/image/https://zenn.dev/kuromitsu/articles/viewcomponent-hotwire-tailwindcss-description" alt="はてなブックマーク - Rails7 + ViewComponent + Hotwireでのコンポーネント指向なフロントエンド開発を試してみた" title="はてなブックマーク - Rails7 + ViewComponent + Hotwireでのコンポーネント指向なフロントエンド開発を試してみた" border="0" style="border: none" /></a> <a href="https://b.hatena.ne.jp/entry/s/zenn.dev/kuromitsu/articles/viewcomponent-hotwire-tailwindcss-description"><img src="https://b.st-hatena.com/images/append.gif" border="0" alt="はてなブックマークに追加" title="はてなブックマークに追加" /></a></p></blockquote> 4 https://github.com/kuroweb/viewcomponent-hotwire-tailwindcss “Rails7, Hotwire, ViewComponent, TailwindCSS でのサンプルプロジェクト. Hotwire + ViewComponent + TailwindCSS の組み合わせにより、/componentsでコンポーネント指向な実装を目指す.” YassLab 2024-04-27T12:38:25Z Ruby Rails Hotwire GitHub ViewComponent Components <blockquote cite="https://github.com/kuroweb/viewcomponent-hotwire-tailwindcss" title="GitHub - kuroweb/viewcomponent-hotwire-tailwindcss: Hotwire + ViewComponent + TailwindCSS の組み合わせにより、/componentsでコンポーネント指向な実装を目指す"><cite><img src="https://cdn-ak2.favicon.st-hatena.com/64?url=https%3A%2F%2Fgithub.com%2Fkuroweb%2Fviewcomponent-hotwire-tailwindcss" alt="" /> <a href="https://github.com/kuroweb/viewcomponent-hotwire-tailwindcss">GitHub - kuroweb/viewcomponent-hotwire-tailwindcss: Hotwire + ViewComponent + TailwindCSS の組み合わせにより、/componentsでコンポーネント指向な実装を目指す</a></cite><p><a href="https://github.com/kuroweb/viewcomponent-hotwire-tailwindcss"><img src="https://cdn-ak-scissors.b.st-hatena.com/image/square/d409b4ef0265b07b3082a349a1a273ef2b53a9d0/backend=imagemagick;height=90;version=1;width=120/https%3A%2F%2Fopengraph.githubassets.com%2Fe253f5797a1823dae6e54d819be5744c02b8bfce6a7a65fd6838792e73df9c86%2Fkuroweb%2Fviewcomponent-hotwire-tailwindcss" alt="GitHub - kuroweb/viewcomponent-hotwire-tailwindcss: Hotwire + ViewComponent + TailwindCSS の組み合わせにより、/componentsでコンポーネント指向な実装を目指す" title="GitHub - kuroweb/viewcomponent-hotwire-tailwindcss: Hotwire + ViewComponent + TailwindCSS の組み合わせにより、/componentsでコンポーネント指向な実装を目指す" class="entry-image" /></a></p><p>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</p><p><a href="https://b.hatena.ne.jp/entry/s/github.com/kuroweb/viewcomponent-hotwire-tailwindcss"><img src="https://b.hatena.ne.jp/entry/image/https://github.com/kuroweb/viewcomponent-hotwire-tailwindcss" alt="はてなブックマーク - GitHub - kuroweb/viewcomponent-hotwire-tailwindcss: Hotwire + ViewComponent + TailwindCSS の組み合わせにより、/componentsでコンポーネント指向な実装を目指す" title="はてなブックマーク - GitHub - kuroweb/viewcomponent-hotwire-tailwindcss: Hotwire + ViewComponent + TailwindCSS の組み合わせにより、/componentsでコンポーネント指向な実装を目指す" border="0" style="border: none" /></a> <a href="https://b.hatena.ne.jp/entry/s/github.com/kuroweb/viewcomponent-hotwire-tailwindcss"><img src="https://b.st-hatena.com/images/append.gif" border="0" alt="はてなブックマークに追加" title="はてなブックマークに追加" /></a></p></blockquote> 3 https://viewcomponent.org/viewcomponents-at-github.html "ViewComponent framework to help manage the growing complexity of the GitHub.com view layer. We’ve accumulated thousands of templates over the years, almost entirely through copy-pasting. A lack of abstraction made it challenging to make sweeping design, accessibility, and behavior improvements." YassLab 2024-03-01T06:58:17Z GitHub ViewComponent <blockquote cite="https://viewcomponent.org/viewcomponents-at-github.html" title="ViewComponents at GitHub"><cite><img src="https://cdn-ak2.favicon.st-hatena.com/64?url=https%3A%2F%2Fviewcomponent.org%2Fviewcomponents-at-github.html" alt="" /> <a href="https://viewcomponent.org/viewcomponents-at-github.html">ViewComponents at GitHub</a></cite><p><a href="https://viewcomponent.org/viewcomponents-at-github.html"><img src="" alt="ViewComponents at GitHub" title="ViewComponents at GitHub" class="entry-image" /></a></p><p></p><p><a href="https://b.hatena.ne.jp/entry/s/viewcomponent.org/viewcomponents-at-github.html"><img src="https://b.hatena.ne.jp/entry/image/https://viewcomponent.org/viewcomponents-at-github.html" alt="はてなブックマーク - ViewComponents at GitHub" title="はてなブックマーク - ViewComponents at GitHub" border="0" style="border: none" /></a> <a href="https://b.hatena.ne.jp/entry/s/viewcomponent.org/viewcomponents-at-github.html"><img src="https://b.st-hatena.com/images/append.gif" border="0" alt="はてなブックマークに追加" title="はてなブックマークに追加" /></a></p></blockquote> 1 https://techracho.bpsinc.jp/hachi8833/2023_05_30/130488 "ViewComponent 3.0が4月にリリースされていた / Rubyでビューのロジックを書けるViewComponentはまだ実践する機会がないけど、何度か述べているように筋はよいものだと思いますし、GitHubが作って熱心にメンテしている点は安心感" YassLab 2023-05-31T15:05:45Z ViewComponent GitHub Rails Ruby <blockquote cite="https://techracho.bpsinc.jp/hachi8833/2023_05_30/130488" title="週刊Railsウォッチ: キャッシュシリアライザに`:message_pack`が追加、ViewComponent 3リリースほか（20230530前編）｜TechRacho by BPS株式会社"><cite><img src="https://cdn-ak2.favicon.st-hatena.com/64?url=https%3A%2F%2Ftechracho.bpsinc.jp%2Fhachi8833%2F2023_05_30%2F130488" alt="" /> <a href="https://techracho.bpsinc.jp/hachi8833/2023_05_30/130488">週刊Railsウォッチ: キャッシュシリアライザに`:message_pack`が追加、ViewComponent 3リリースほか（20230530前編）｜TechRacho by BPS株式会社</a></cite><p><a href="https://techracho.bpsinc.jp/hachi8833/2023_05_30/130488"><img src="https://cdn-ak-scissors.b.st-hatena.com/image/square/e172342308b69edec078dedebdad891460711dad/backend=imagemagick;height=90;version=1;width=120/https%3A%2F%2Ftechracho.bpsinc.jp%2Fwp-content%2Fuploads%2F2023%2F05%2Frailswatch_20230530_eyecatch-min.png" alt="週刊Railsウォッチ: キャッシュシリアライザに`:message_pack`が追加、ViewComponent 3リリースほか（20230530前編）｜TechRacho by BPS株式会社" title="週刊Railsウォッチ: キャッシュシリアライザに`:message_pack`が追加、ViewComponent 3リリースほか（20230530前編）｜TechRacho by BPS株式会社" class="entry-image" /></a></p><p>週刊Railsウォッチについて 各記事冒頭には🔗でパーマリンクを置いてあります: 社内やTwitterでの議論などにどうぞ 「つっつきボイス」はRailsウォッチ公開前ドラフトを（鍋のように）社内有志でつっついたときの会話の再構成です👄 お気づきの点がありましたら@hachi8833までメンションをいただければ確認・対応いたし...</p><p><a href="https://b.hatena.ne.jp/entry/s/techracho.bpsinc.jp/hachi8833/2023_05_30/130488"><img src="https://b.hatena.ne.jp/entry/image/https://techracho.bpsinc.jp/hachi8833/2023_05_30/130488" alt="はてなブックマーク - 週刊Railsウォッチ: キャッシュシリアライザに`:message_pack`が追加、ViewComponent 3リリースほか（20230530前編）｜TechRacho by BPS株式会社" title="はてなブックマーク - 週刊Railsウォッチ: キャッシュシリアライザに`:message_pack`が追加、ViewComponent 3リリースほか（20230530前編）｜TechRacho by BPS株式会社" border="0" style="border: none" /></a> <a href="https://b.hatena.ne.jp/entry/s/techracho.bpsinc.jp/hachi8833/2023_05_30/130488"><img src="https://b.st-hatena.com/images/append.gif" border="0" alt="はてなブックマークに追加" title="はてなブックマークに追加" /></a></p></blockquote> 5 https://github.com/ViewComponent/view_component “A framework for building reusable, testable & encapsulated view components in Ruby on Rails.” YassLab 2023-02-28T12:23:27Z ViewComponent Ruby Rails GitHub <blockquote cite="https://github.com/ViewComponent/view_component" title="GitHub - ViewComponent/view_component: A framework for building reusable, testable &amp; encapsulated view components in Ruby on Rails."><cite><img src="https://cdn-ak2.favicon.st-hatena.com/64?url=https%3A%2F%2Fgithub.com%2FViewComponent%2Fview_component" alt="" /> <a href="https://github.com/ViewComponent/view_component">GitHub - ViewComponent/view_component: A framework for building reusable, testable &amp; encapsulated view components in Ruby on Rails.</a></cite><p><a href="https://github.com/ViewComponent/view_component"><img src="https://cdn-ak-scissors.b.st-hatena.com/image/square/355d50a7b49fe3e74ea46fd61a72c219536386e0/backend=imagemagick;height=90;version=1;width=120/https%3A%2F%2Fopengraph.githubassets.com%2F61085ba1c9c8b0a275191a6bf530193e3e27afeb29a4cc81a2aa1df5664924ea%2FViewComponent%2Fview_component" alt="GitHub - ViewComponent/view_component: A framework for building reusable, testable &amp; encapsulated view components in Ruby on Rails." title="GitHub - ViewComponent/view_component: A framework for building reusable, testable &amp; encapsulated view components in Ruby on Rails." class="entry-image" /></a></p><p>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</p><p><a href="https://b.hatena.ne.jp/entry/s/github.com/ViewComponent/view_component"><img src="https://b.hatena.ne.jp/entry/image/https://github.com/ViewComponent/view_component" alt="はてなブックマーク - GitHub - ViewComponent/view_component: A framework for building reusable, testable &amp; encapsulated view components in Ruby on Rails." title="はてなブックマーク - GitHub - ViewComponent/view_component: A framework for building reusable, testable &amp; encapsulated view components in Ruby on Rails." border="0" style="border: none" /></a> <a href="https://b.hatena.ne.jp/entry/s/github.com/ViewComponent/view_component"><img src="https://b.st-hatena.com/images/append.gif" border="0" alt="はてなブックマークに追加" title="はてなブックマークに追加" /></a></p></blockquote> 6 https://techracho.bpsinc.jp/hachi8833/2022_11_25/123684 “ViewComponentの効果は絶大でありながら、コアとなるアイデアは信じられないほどシンプルです。すなわち、1個のビューコンポーネントは、ERBやSlimなどのテンプレートに関連付けられた単なるRubyオブジェクトなのです” YassLab 2023-02-28T12:20:37Z ViewComponent Rails Ruby Hotwire SPA <blockquote cite="https://techracho.bpsinc.jp/hachi8833/2022_11_25/123684" title="実践ViewComponent（1）: 現代的なRailsフロントエンド構築の心得（翻訳）｜TechRacho by BPS株式会社"><cite><img src="https://cdn-ak2.favicon.st-hatena.com/64?url=https%3A%2F%2Ftechracho.bpsinc.jp%2Fhachi8833%2F2022_11_25%2F123684" alt="" /> <a href="https://techracho.bpsinc.jp/hachi8833/2022_11_25/123684">実践ViewComponent（1）: 現代的なRailsフロントエンド構築の心得（翻訳）｜TechRacho by BPS株式会社</a></cite><p><a href="https://techracho.bpsinc.jp/hachi8833/2022_11_25/123684"><img src="https://cdn-ak-scissors.b.st-hatena.com/image/square/2f390fe1ce24862895b6081e2d14551ca43b724e/backend=imagemagick;height=90;version=1;width=120/https%3A%2F%2Ftechracho.bpsinc.jp%2Fwp-content%2Fuploads%2F2022%2F11%2Frails_viewcomponent_in_the_wild_1_eyecatch-min.png" alt="実践ViewComponent（1）: 現代的なRailsフロントエンド構築の心得（翻訳）｜TechRacho by BPS株式会社" title="実践ViewComponent（1）: 現代的なRailsフロントエンド構築の心得（翻訳）｜TechRacho by BPS株式会社" class="entry-image" /></a></p><p>概要 元サイトの許諾を得て翻訳・公開いたします。 英語記事: ViewComponent in the Wild I: building modern Rails frontends—Martian Chronicles, Evil Martians’ team blog 原文公開日: 2022/10/12 原著者: Alexander Baygeldin（バックエンドエンジニア）、Travis Turner（テック編集者） サイト: Evil Martians -- ...</p><p><a href="https://b.hatena.ne.jp/entry/s/techracho.bpsinc.jp/hachi8833/2022_11_25/123684"><img src="https://b.hatena.ne.jp/entry/image/https://techracho.bpsinc.jp/hachi8833/2022_11_25/123684" alt="はてなブックマーク - 実践ViewComponent（1）: 現代的なRailsフロントエンド構築の心得（翻訳）｜TechRacho by BPS株式会社" title="はてなブックマーク - 実践ViewComponent（1）: 現代的なRailsフロントエンド構築の心得（翻訳）｜TechRacho by BPS株式会社" border="0" style="border: none" /></a> <a href="https://b.hatena.ne.jp/entry/s/techracho.bpsinc.jp/hachi8833/2022_11_25/123684"><img src="https://b.st-hatena.com/images/append.gif" border="0" alt="はてなブックマークに追加" title="はてなブックマークに追加" /></a></p></blockquote> 15 https://techracho.bpsinc.jp/hachi8833/2022_11_28/124509 “ #Storybook でも検索・カテゴリ・動的パラメータなどの様々な機能が使えたらさらに素晴らしいと思いませんか？ / それが #Lookbook です。最近Evil MatiansのあるプロジェクトでもLookbookを採用して大成功を収めた” YassLab 2023-02-28T12:14:28Z Lookbook Storybook Rails ViewComponent <blockquote cite="https://techracho.bpsinc.jp/hachi8833/2022_11_28/124509" title="実践ViewComponent（2）: コンポーネントを徹底的に強化する（翻訳）｜TechRacho by BPS株式会社"><cite><img src="https://cdn-ak2.favicon.st-hatena.com/64?url=https%3A%2F%2Ftechracho.bpsinc.jp%2Fhachi8833%2F2022_11_28%2F124509" alt="" /> <a href="https://techracho.bpsinc.jp/hachi8833/2022_11_28/124509">実践ViewComponent（2）: コンポーネントを徹底的に強化する（翻訳）｜TechRacho by BPS株式会社</a></cite><p><a href="https://techracho.bpsinc.jp/hachi8833/2022_11_28/124509"><img src="https://cdn-ak-scissors.b.st-hatena.com/image/square/aa89850c0699fd832a109fcaa0e67c722958e2b0/backend=imagemagick;height=90;version=1;width=120/https%3A%2F%2Ftechracho.bpsinc.jp%2Fwp-content%2Fuploads%2F2022%2F11%2Frails_viewcomponent_in_the_wild_2_eyecatch-min.png" alt="実践ViewComponent（2）: コンポーネントを徹底的に強化する（翻訳）｜TechRacho by BPS株式会社" title="実践ViewComponent（2）: コンポーネントを徹底的に強化する（翻訳）｜TechRacho by BPS株式会社" class="entry-image" /></a></p><p>🔗 コンポーネントを徹底的に強化する ViewComponentはやるべきことをうまくやってくれますが、Railsほど手取り足取り懇切丁寧にやってくれるわけではありません。この方面の規約がまだ不足しているため、自分で考える以外に切り抜ける方法がない場面もちょくちょくあります。 しかし心配ご無用です。本章ではEvil Marti...</p><p><a href="https://b.hatena.ne.jp/entry/s/techracho.bpsinc.jp/hachi8833/2022_11_28/124509"><img src="https://b.hatena.ne.jp/entry/image/https://techracho.bpsinc.jp/hachi8833/2022_11_28/124509" alt="はてなブックマーク - 実践ViewComponent（2）: コンポーネントを徹底的に強化する（翻訳）｜TechRacho by BPS株式会社" title="はてなブックマーク - 実践ViewComponent（2）: コンポーネントを徹底的に強化する（翻訳）｜TechRacho by BPS株式会社" border="0" style="border: none" /></a> <a href="https://b.hatena.ne.jp/entry/s/techracho.bpsinc.jp/hachi8833/2022_11_28/124509"><img src="https://b.st-hatena.com/images/append.gif" border="0" alt="はてなブックマークに追加" title="はてなブックマークに追加" /></a></p></blockquote> 6