CINXE.COM

<!DOCTYPE html> <html lang="ja" data-page-scope="EntrySearch" data-stable-request-url="https://b.hatena.ne.jp/q/hotwire" data-device-type="PC" data-sentry-environment="production" data-sentry-sample-rate="0.1" data-entry-search-query="hotwire" data-page-subtype="entrysearch" data-page-type="entrysearch" > <head>  <script> (function(w,d,s,l,i){w[l]=w[l]||[];w[l].push({'gtm.start': new Date().getTime(),event:'gtm.js'});var f=d.getElementsByTagName(s)[0], j=d.createElement(s),dl=l!='dataLayer'?'&l='+l:'';j.async=true;j.src= 'https://www.googletagmanager.com/gtm.js?id='+i+dl;f.parentNode.insertBefore(j,f); })(window,document,'script','dataLayer','GTM-5TDHQX'); </script>  <meta charset="UTF-8"> <title>hotwireの人気記事 140件 - はてなブックマーク</title> <script src="https://b.st-hatena.com/0f6f9dfc8b21c8af9c2db850a25d9527a7bbe0df/js/v4/bookmark.js" async></script> <link type="text/css" rel="stylesheet" href="https://b.st-hatena.com/0f6f9dfc8b21c8af9c2db850a25d9527a7bbe0df/css/v4/pikaday.css" /> <link type="text/css" rel="stylesheet" href="https://b.st-hatena.com/0f6f9dfc8b21c8af9c2db850a25d9527a7bbe0df/css/v4/triangle.css" /> <link type="text/css" rel="stylesheet" href="https://b.st-hatena.com/0f6f9dfc8b21c8af9c2db850a25d9527a7bbe0df/css/v4/bookmark.css" /> <link type="text/css" rel="stylesheet" href="https://b.st-hatena.com/0f6f9dfc8b21c8af9c2db850a25d9527a7bbe0df/css/v4/bookmark.star.css" /> <link rel="canonical" href="https://b.hatena.ne.jp/q/hotwire" /> <link rel="next" href="/q/hotwire?sort=popular&target=tag&safe=on&users=3&date_range=5y&page=2"> <link rel="shortcut icon" type="image/x-icon" href="/favicon.ico" /> <meta name="viewport" content="width=device-width"> <link rel="search" type="application/opensearchdescription+xml" title="はてなブックマーク検索" href="/opensearch.xml" /> <link rel="apple-touch-icon-precomposed" href="https://b.st-hatena.com/0f6f9dfc8b21c8af9c2db850a25d9527a7bbe0df/images/v4/public/apple-touch-icon-precomposed.png" /> <link rel="mask-icon" href="https://b.st-hatena.com/0f6f9dfc8b21c8af9c2db850a25d9527a7bbe0df/images/v4/public/safari-pinned-tab-icon.svg" color="#00A4DE" /> <meta name="msapplication-navbutton-color" content="#2C6EBD" /> <meta name="msapplication-task" content="name=はてなブックマーク; action-uri=/; icon-uri=https://b.st-hatena.com/0f6f9dfc8b21c8af9c2db850a25d9527a7bbe0df/images/v4/public/icons/bookmark.ico" /> <meta name="msapplication-task" content="name=マイブックマーク; action-uri=/my; icon-uri=https://b.st-hatena.com/0f6f9dfc8b21c8af9c2db850a25d9527a7bbe0df/images/v4/public/icons/my-bookmark.ico" /> <meta name="msapplication-task" content="name=お気に入りのブックマーク; action-uri=/my/favorite; icon-uri=https://b.st-hatena.com/0f6f9dfc8b21c8af9c2db850a25d9527a7bbe0df/images/v4/public/icons/favorite-bookmark.ico" /> <meta name="msapplication-task" content="name=人気エントリー; action-uri=/hotentry; icon-uri=https://b.st-hatena.com/0f6f9dfc8b21c8af9c2db850a25d9527a7bbe0df/images/v4/public/icons/hotentry.ico" /> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="referrer" content="origin"> <link rel="alternate" type="application/rss+xml" href="/q/hotwire?users=3&date_range=5y&mode=rss&sort=popular&safe=on&target=tag" /> <script> function isMobile() { const html = document.documentElement; const deviceType = html.dataset.deviceType || ''; if (deviceType.length > 0) { return deviceType === 'MOBILE'; } else { const maxMobileWidth = 480; const windowWidth = window.innerWidth; return maxMobileWidth >= windowWidth; } } </script> </head> <body class="page-centerarticle page-entrysearch fixed-header">  <noscript><iframe src="https://www.googletagmanager.com/ns.html?id=GTM-5TDHQX" height="0" width="0" style="display:none;visibility:hidden"></iframe></noscript>  <div class="link-app-banner js-dynamic-link-app-banner is-hidden"> <button class="link-app-banner-btn-close js-dynamic-link-app-banner-close-button"><span>close</span></button> <a class="link-app-banner-btn" href="https://hatenabookmark.page.link/app"> <div class="link-app-banner-btn-detail"> <div class="link-app-banner-icon"><img src="/images/v4/public/app/ic-ios.svg" alt="はてなブックマークアプリ"></div> <p class="link-app-banner-text">サクサク読めて、<br class="link-app-banner-text-newline">アプリ限定の機能も多数！</p> </div> <div class="link-app-banner-btn-open">アプリで開く</div> </a> </div> <header id="global-header" data-portal-static-origin="//cdn.www.st-hatena.com"> <div id="header" class="global-header-inner js-global-header-inner"> <h2 id="gh-logo"><a href="/" data-gtm-label="gh-blogo"><span>はてなブックマーク</span></a></h2> <div class="is-guest js-guest is-hidden"> <input id="gh-search-icon-check" type="checkbox" checked="checked" /> <label class="gh-search-icon" for="gh-search-icon-check" aria-label="検索を閉じる"><span>閉じる</span></label> <form class="gh-searchbox" method="get" action="/search_dwim" role="search"> <input value="" name="q" type="search" class="gh-inputtext" placeholder="キーワード・URLを検索" size="40" /> <input value="" type="submit" class="gh-search-button" /> </form> <ul class="gh-service-menu"> <li><a href="/guide" data-gtm-label="gh-guest-guide">はてなブックマークって？</a></li> <li><a href="/guide/tools" data-gtm-label="gh-guest-tools">アプリ・拡張の紹介</a></li> <li><a href="https://www.hatena.ne.jp/register?location=https%3A%2F%2Fb.hatena.ne.jp%2F%3Fregistered_from%3Dglobal-header&via=201037" class="gh-guest-register" data-gtm-label="gh-guest-register">ユーザー登録</a></li> <li><a href="https://www.hatena.ne.jp/login?location=https%3A%2F%2Fb.hatena.ne.jp%2Fq%2Fhotwire" rel="nofollow" class="gh-guest-login" data-gtm-label="gh-guest-login">ログイン</a></li> <li class="gh-hatena-logo"><a href="http://www.hatena.ne.jp/"><img src="https://b.st-hatena.com/0f6f9dfc8b21c8af9c2db850a25d9527a7bbe0df/images/v4/public/logo/logo-global-white.svg" alt="Hatena" width="74px" height="13px"/></a></li> </ul> </div> <noscript> <ul class="gh-service-menu"> <li><a href="https://www.hatena.ne.jp/logout?location=https%3A%2F%2Fb.hatena.ne.jp%2F">ログアウト</a></li> </ul> </noscript> <script type="text/x-template" id="template-menu-hatena-user"> <form class="gh-searchbox" method="get" action="/search_dwim" role="search"> <input value="" name="q" type="search" class="gh-inputtext" placeholder="キーワード・URLを検索" size="40" /> <input value="" type="submit" class="gh-search-button" /> </form> <ul class="gh-service-menu"> <li><a class="hotentry" data-gtm-label="gh-mypage" href="{{hotentry_url}}"><img src="{{user_image_url}}" class="header-profile-icon" width="16" height="16" alt="{{username}}" /></a><a class="hotentry" data-gtm-label="gh-mypage" href="{{hotentry_url}}">マイページ</a></li> <li><a class="bookmark" data-gtm-label="gh-bookmark" href="{{bookmark_url}}">ブックマーク</a></li> <li><a class="unread_bookmark" data-gtm-label="gh-ril" href="{{bookmark_stock_url}}">あとで読む</a></li> <li><a class="add" data-gtm-label="gh-add" href="{{add_bookmark_url}}">追加</a></li> <li><a class="tools" data-gtm-label="gh-tools" href="/guide/tools">ツール</a></li> <li><a class="config" data-gtm-label="gh-config" href="/-/my/config/profile">設定</a></li> <li><a class="feedback" data-gtm-label="gh-feedback" href="/-/feedback/hatena_bookmark" target="_blank">フィードバック</a></li> <li id="header-username" class="gh-dropdown-services" data-gtm-label="gh-services" title="利用中のサービス" data-name="{{username}}"> <span class="header-dropdown gh-dropdown" tabindex="0"> <img src="https://b.st-hatena.com/0f6f9dfc8b21c8af9c2db850a25d9527a7bbe0df/images/v4/public/common/usermenu-wh.svg" alt="利用中のサービス" width="24" height="24" /> </span> <dl class="header-window" id="username-window"></dl> </li> <li id="header-notify" data-gtm-label="gh-notify" class="gh-dropdown-notify" title="あなたへのお知らせ"> <span class="header-dropdown gh-dropdown" tabindex="0"> <img src="https://b.st-hatena.com/0f6f9dfc8b21c8af9c2db850a25d9527a7bbe0df/images/v4/public/common/notify-wh.svg" alt="あなたへのお知らせ" width="25" height="25" /> <span class="notify-count"></span> </span> <div id="notify-window" class="header-window header-notify"></div> </li> <li class="gh-hatena-logo"><a href="http://www.hatena.ne.jp/"><img src="https://b.st-hatena.com/0f6f9dfc8b21c8af9c2db850a25d9527a7bbe0df/images/v4/public/logo/logo-global-white.svg" alt="Hatena" width="74px" height="13px"/></a></li> </ul> </script> </div> </header> <div id="info-header"><div id="info-header-message"></div><span></span></div> <div class="global-notification is-hidden js-global-notification"></div> <div id="container"> <div class="entrysearch-searchbox"> <form class="entrysearch-searchbox-body js-entrysearch-form" method="get"> <input value="hotwire" type="text" class="entrysearch-searchbox-textInput js-entrysearch-form-text-input" size="40" aria-label="検索キーワードを入力"> <input value="tag" name="target" type="hidden"> <input value="popular" name="sort" type="hidden"> <input value="3" name="users" type="hidden"> <input value="on" name="safe" type="hidden"> <input value="検索" type="submit" class="entrysearch-searchbox-btn js-entrysearch-form-button" aria-label="検索"> </form> </div> <div class="centerarticle-wrapper"> <div class="left-container"> <div class="centerarticle-sidebar-menu"> <h3 class="centerarticle-aside-title">検索対象</h3> <ul class="centerarticle-sub-navi"> <li><a href="/q/hotwire?sort=popular&target=all&safe=on&users=3&date_range=5y" >すべて</a></li> <li><a href="/q/hotwire?sort=popular&target=tag&safe=on&users=3&date_range=5y" class="is-current">タグ</a></li> <li><a href="/q/hotwire?date_range=5y&users=3&target=title&safe=on&sort=popular" >タイトル</a></li> <li><a href="/q/hotwire?sort=popular&target=text&safe=on&users=3&date_range=5y" >本文</a></li> </ul> </div> <div class="centerarticle-sidebar-menu"> <h3 class="centerarticle-aside-title">並び順</h3> <ul class="centerarticle-sub-navi"> <li><a href="/q/hotwire?users=3&date_range=5y&sort=recent&target=tag&safe=on" >新着</a></li> <li><a href="/q/hotwire?users=3&date_range=5y&sort=popular&safe=on&target=tag" class="is-current">人気</a></li> </ul> </div> <div class="centerarticle-sidebar-menu"> <h3 class="centerarticle-aside-title">ブックマーク数</h3> <ul class="centerarticle-sub-navi"> <li><a href="/q/hotwire?users=1&date_range=5y&sort=popular&safe=on&target=tag" >1 user</a></li> <li><a href="/q/hotwire?users=3&date_range=5y&sort=popular&target=tag&safe=on" class="is-current">3 users</a></li> <li><a href="/q/hotwire?date_range=5y&users=50&target=tag&safe=on&sort=popular" >50 users</a></li> <li><a href="/q/hotwire?users=100&date_range=5y&sort=popular&target=tag&safe=on" >100 users</a></li> <li><a href="/q/hotwire?sort=popular&target=tag&safe=on&users=500&date_range=5y" >500 users</a></li> </ul> </div> <div class="centerarticle-sidebar-menu js-safe-search-div is-hidden" title="セーフサーチはログイン時にのみoffにできます"> <h3 class="centerarticle-aside-title">セーフサーチ</h3> <ul class="centerarticle-sub-navi"> <li><a href="/q/hotwire?target=tag&safe=on&sort=popular&date_range=5y&users=3" class="is-current">オン</a></li> <li><a href="/q/hotwire?date_range=5y&users=3&safe=off&target=tag&sort=popular" >オフ</a></li> </ul> </div> <div class="centerarticle-sidebar-menu js-entrysearch-date"> <h3 class="centerarticle-aside-title">期間指定</h3> <ul class="centerarticle-sub-navi"> <li><a href="/q/hotwire?date_range=all&users=3&target=tag&safe=on&sort=popular" >すべて</a></li> <li><a href="/q/hotwire?target=tag&safe=on&sort=popular&date_range=w&users=3" >1週間</a></li> <li><a href="/q/hotwire?users=3&date_range=m&sort=popular&target=tag&safe=on" >1ヶ月</a></li> <li><a href="/q/hotwire?users=3&date_range=y&sort=popular&safe=on&target=tag" >1年</a></li> </ul> <form method="get" class="js-entrysearch-datepicker-form"> <input value="hotwire" class="js-entrysearch-form-text-input" type="hidden"> <input value="tag" name="target" type="hidden"> <input value="popular" name="sort" type="hidden"> <input value="3" name="users" type="hidden"> <input value="on" name="safe" type="hidden"> <ul class="centerarticle-sub-navi"> <li><input class="js-entrysearch-datepicker-start entrysearch-searchbox-dateInput" value="" type="text" name="date_begin"> から</li> <li><input class="js-entrysearch-datepicker-end entrysearch-searchbox-dateInput" value="" type="text" name="date_end"> まで</li> <li><input value="検索" type="submit" class="entrysearch-searchbox-btn js-entrysearch-form-button"><li> </ul> </form> </div> </div> <div class="entrysearch-bar"> <p class="entrysearch-bar-results">1 - 40 件 / 140件</p> <div class="entrysearch-bar-inner"> <button class="entrysearch-filter-btn js-entrysearch-filter-btn">絞り込み</button> <a class="entrysearch-sort-btn" href="/q/hotwire?users=3&date_range=5y&sort=popular&target=tag&safe=on">新着順</a> <a class="entrysearch-sort-btn is-current" href="/q/hotwire?target=tag&safe=on&sort=recent&date_range=5y&users=3">人気順</a> </div> </div> <div class="entrysearch-filter js-entrysearch-filter is-hidden"> <div class="entrysearch-filter-header"> <h2 class="entrysearch-filter-title">絞り込み</h2> <button class="entrysearch-filter-close js-entrysearch-filter-close"></button> </div> <ul class="entrysearch-filter-list"> <li class="entrysearch-filter-item js-entrysearch-target-dropdown"> <h3 class="entrysearch-filter-item-head">検索対象</h3> <div class="entrysearch-filter-item-value-wrapper"> <select class="entrysearch-filter-item-value js-entrysearch-filter-target"> <option value="all" >すべて</option> <option value="tag" selected>タグ</option> <option value="title" >タイトル</option> <option value="text" >本文</option> </select> </div> </li> <li class="entrysearch-filter-item"> <h3 class="entrysearch-filter-item-head">ブックマーク数</h3> <div class="entrysearch-filter-item-value-wrapper"> <select class="entrysearch-filter-item-value js-entrysearch-filter-users"> <option value="1" >1 user</option> <option value="3" selected>3 users</option> <option value="50" >50 users</option> <option value="100" >100 users</option> <option value="500" >500 users</option> </select> </div> </li> <li class="entrysearch-filter-item"> <h3 class="entrysearch-filter-item-head">期間</h3> <div class="entrysearch-filter-item-value-wrapper"> <select class="entrysearch-filter-item-value js-entrysearch-filter-daterange"> <option value="all">すべて</option> <option value="w" >1週間</option> <option value="m" >1ヶ月</option> <option value="y" >1年</option> </select> </div> </li> <li class="entrysearch-filter-item js-safe-search-div is-hidden"> <h3 class="entrysearch-filter-item-head">セーフサーチ</h3> <div class="entrysearch-filter-checkbox"> <input type="checkbox" name="safesearch" id="safesearch" class="js-entryseach-safesearch" checked> <label class="entrysearch-filter-checkbox-label" for="safesearch"></label> </div> </li> </ul> <div class="entrysearch-filter-footer"> <button class="entrysearch-filter-search-btn styleguide-btn-primary js-entrysearch-filter-search-btn">検索する</button> <button class="entrysearch-filter-clear-btn styleguide-btn-text js-entrysearch-filter-clear-btn">条件をクリアする</button> </div> </div> <div class="search-container"> <h2 class="entrysearch-title"> <span class="entrysearch-word">hotwireの検索結果</span><span class="entrysearch-result">1 - 40 件 / 140件</span> </h2> <div class="entrysearch-summary-text"> <span>hotwire</span>に関するエントリは<span>140</span>件あります。 <span>rails</span>、 <span>ruby</span>、 <span>javascript</span> などが関連タグです。人気エントリには <span>『山手線を徒歩で一周する人のための記録アプリ「YamaNotes」をリリースしました - すずかのプログラミング勉強記』</span>などがあります。 </div> <div class="entrysearch-related-entries" data-gtm-inview-label="entry-search-recommend-header"> <h3 class="entrysearch-related-title">hotwireの関連エントリー</h3> <ul class="entrysearch-related-list"> <li class="entrysearch-related-listitem"> <div class="entrysearch-related-entry"> <a href="https://speakerdeck.com/nao_072/react-hotwirehe-ji-shu-sutatukubian-geng-sitahua" class="entrysearch-related-image" target="_blank" rel="noopener" data-gtm-click-label="entry-search-recommend-header-a-image"> <img src="https://cdn-ak-scissors.b.st-hatena.com/image/square/a2ddf5d63f61280690ac7c2c40a5eac203b403ae/height=288;version=1;width=512/https%3A%2F%2Ffiles.speakerdeck.com%2Fpresentations%2Fe91c884cd7d441f48748bbaec10aea6c%2Fslide_0.jpg%3F33550675" alt="React→Hotwireへ技術スタック変更した話"> </a> <h4 class="entrysearch-related-entry-title"> <a href="https://speakerdeck.com/nao_072/react-hotwirehe-ji-shu-sutatukubian-geng-sitahua" target="_blank" rel="noopener" data-gtm-click-label="entry-search-recommend-header-a-title"> React→Hotwireへ技術スタック変更した話 </a> </h4> <a href="/entry/s/speakerdeck.com/nao_072/react-hotwirehe-ji-shu-sutatukubian-geng-sitahua" class="entrysearch-related-users" data-gtm-click-label="entry-search-recommend-header-a-users"> 163 users </a> </div> </li> <li class="entrysearch-related-listitem"> <div class="entrysearch-related-entry"> <a href="https://hotwire-anecdota.castle104.com/" class="entrysearch-related-image" target="_blank" rel="noopener" data-gtm-click-label="entry-search-recommend-header-a-image"> <img src="https://cdn-ak-scissors.b.st-hatena.com/image/square/b4861d788c89c8d0cc060d4a335e063a5b3a51b2/height=288;version=1;width=512/https%3A%2F%2Fhotwire-anecdota.castle104.com%2Fassets%2Fogp-3c81ade6.webp" alt="Hotwire Anecdota"> </a> <h4 class="entrysearch-related-entry-title"> <a href="https://hotwire-anecdota.castle104.com/" target="_blank" rel="noopener" data-gtm-click-label="entry-search-recommend-header-a-title"> Hotwire Anecdota </a> </h4> <a href="/entry/s/hotwire-anecdota.castle104.com/" class="entrysearch-related-users" data-gtm-click-label="entry-search-recommend-header-a-users"> 34 users </a> </div> </li> <li class="entrysearch-related-listitem"> <div class="entrysearch-related-entry"> <a href="https://techlife.cookpad.com/entry/2024/11/13/130000" class="entrysearch-related-image" target="_blank" rel="noopener" data-gtm-click-label="entry-search-recommend-header-a-image"> <img src="https://cdn-ak-scissors.b.st-hatena.com/image/square/543a2a58a61d479103f958bfeea0b22a3774f3c7/height=288;version=1;width=512/https%3A%2F%2Fogimage.blog.st-hatena.com%2F12921228815724287123%2F6802418398303359771%2F1731470400" alt="ちょっと複雑なサイドバーをHotwireで簡単に作りたい - クックパッド開発者ブログ"> </a> <h4 class="entrysearch-related-entry-title"> <a href="https://techlife.cookpad.com/entry/2024/11/13/130000" target="_blank" rel="noopener" data-gtm-click-label="entry-search-recommend-header-a-title"> ちょっと複雑なサイドバーをHotwireで簡単に作りたい - クックパッド開発者ブログ </a> </h4> <a href="/entry/s/techlife.cookpad.com/entry/2024/11/13/130000" class="entrysearch-related-users" data-gtm-click-label="entry-search-recommend-header-a-users"> 37 users </a> </div> </li> <li class="entrysearch-related-listitem"> <div class="entrysearch-related-entry"> <a href="https://speakerdeck.com/nay3/hotwireguang-nodao-tostimulus" class="entrysearch-related-image" target="_blank" rel="noopener" data-gtm-click-label="entry-search-recommend-header-a-image"> <img src="https://cdn-ak-scissors.b.st-hatena.com/image/square/5835a01a0dc817f61a4e8000e57590aac7fcce33/height=288;version=1;width=512/https%3A%2F%2Ffiles.speakerdeck.com%2Fpresentations%2F5f6354cecf46433e8f1024f7490c91a1%2Fslide_0.jpg%3F32356344" alt="Hotwire光の道とStimulus"> </a> <h4 class="entrysearch-related-entry-title"> <a href="https://speakerdeck.com/nay3/hotwireguang-nodao-tostimulus" target="_blank" rel="noopener" data-gtm-click-label="entry-search-recommend-header-a-title"> Hotwire光の道とStimulus </a> </h4> <a href="/entry/s/speakerdeck.com/nay3/hotwireguang-nodao-tostimulus" class="entrysearch-related-users" data-gtm-click-label="entry-search-recommend-header-a-users"> 87 users </a> </div> </li> <li class="entrysearch-related-listitem"> <div class="entrysearch-related-entry"> <a href="https://speakerdeck.com/harunatsujita/hotwire-or-react" class="entrysearch-related-image" target="_blank" rel="noopener" data-gtm-click-label="entry-search-recommend-header-a-image"> <img src="https://cdn-ak-scissors.b.st-hatena.com/image/square/125968a40fac221200707c04e3fc71b9267d26f3/height=288;version=1;width=512/https%3A%2F%2Ffiles.speakerdeck.com%2Fpresentations%2F00f9da1c11f3417c873d48aedd4f7738%2Fslide_0.jpg%3F32352388" alt="Hotwire or React? ~Reactの録画機能をHotwireに置き換えて得られた知見~ / hotwire_or_react"> </a> <h4 class="entrysearch-related-entry-title"> <a href="https://speakerdeck.com/harunatsujita/hotwire-or-react" target="_blank" rel="noopener" data-gtm-click-label="entry-search-recommend-header-a-title"> Hotwire or React? ~Reactの録画機能をHotwireに置き換えて得られた知見~ / hotwire_or_react </a> </h4> <a href="/entry/s/speakerdeck.com/harunatsujita/hotwire-or-react" class="entrysearch-related-users" data-gtm-click-label="entry-search-recommend-header-a-users"> 61 users </a> </div> </li> <li class="entrysearch-related-listitem"> <div class="entrysearch-related-entry"> <a href="https://hotwire-n-next.castle104.com/" class="entrysearch-related-image" target="_blank" rel="noopener" data-gtm-click-label="entry-search-recommend-header-a-image"> <img src="https://b.st-hatena.com/0f6f9dfc8b21c8af9c2db850a25d9527a7bbe0df/images/v4/public/common/noimage.png" alt="Hotwire for Frontend devs"> </a> <h4 class="entrysearch-related-entry-title"> <a href="https://hotwire-n-next.castle104.com/" target="_blank" rel="noopener" data-gtm-click-label="entry-search-recommend-header-a-title"> Hotwire for Frontend devs </a> </h4> <a href="/entry/s/hotwire-n-next.castle104.com/" class="entrysearch-related-users" data-gtm-click-label="entry-search-recommend-header-a-users"> 107 users </a> </div> </li> <li class="entrysearch-related-listitem"> <div class="entrysearch-related-entry"> <a href="https://zenn.dev/naofumik/articles/4479324c468b65" class="entrysearch-related-image" target="_blank" rel="noopener" data-gtm-click-label="entry-search-recommend-header-a-image"> <img src="https://cdn-ak-scissors.b.st-hatena.com/image/square/6a7ff8c2e1518d99943e7646ec7da9827b137591/height=288;version=1;width=512/https%3A%2F%2Fres.cloudinary.com%2Fzenn%2Fimage%2Fupload%2Fs--rI26z1GZ--%2Fc_fit%252Cg_north_west%252Cl_text%3Anotosansjp-medium.otf_55%3ANext.js%2525E3%252581%2525A8%2525E6%2525AF%252594%2525E8%2525BC%252583%2525E3%252581%252597%2525E3%252581%2525AA%2525E3%252581%25258C%2525E3%252582%252589Hotwire%2525E3%252582%252592%2525E7%252590%252586%2525E8%2525A7%2525A3%2525E3%252581%252599%2525E3%252582%25258B%2525E3%252582%2525B5%2525E3%252582%2525A4%2525E3%252583%252588%25253A%252520%252522Hotwire%252520for%252520Frontend%252520Deve...%252Cw_1010%252Cx_90%252Cy_100%2Fg_south_west%252Cl_text%3Anotosansjp-medium.otf_37%3ANaofumi%252Cx_203%252Cy_121%2Fg_south_west%252Ch_90%252Cl_fetch%3AaHR0cHM6Ly9saDMuZ29vZ2xldXNlcmNvbnRlbnQuY29tL2EvQUxtNXd1M2REcDFoU0toZ2VzbmhuSl9mQmNyYU1vNnR1dHJrWUYyY3hld2JGUT1zOTYtYw%3D%3D%252Cr_max%252Cw_90%252Cx_87%252Cy_95%2Fv1627283836%2Fdefault%2Fog-base-w1200-v2.png" alt="Next.jsと比較しながらHotwireを理解するサイト: "Hotwire for Frontend Developers""> </a> <h4 class="entrysearch-related-entry-title"> <a href="https://zenn.dev/naofumik/articles/4479324c468b65" target="_blank" rel="noopener" data-gtm-click-label="entry-search-recommend-header-a-title"> Next.jsと比較しながらHotwireを理解するサイト: "Hotwire for Frontend Developers" </a> </h4> <a href="/entry/s/zenn.dev/naofumik/articles/4479324c468b65" class="entrysearch-related-users" data-gtm-click-label="entry-search-recommend-header-a-users"> 79 users </a> </div> </li> <li class="entrysearch-related-listitem"> <div class="entrysearch-related-entry"> <a href="https://native.hotwired.dev/" class="entrysearch-related-image" target="_blank" rel="noopener" data-gtm-click-label="entry-search-recommend-header-a-image"> <img src="https://b.st-hatena.com/0f6f9dfc8b21c8af9c2db850a25d9527a7bbe0df/images/v4/public/common/noimage.png" alt="Hotwire Native: Hotwire Native is a web-first framework for building native mobile apps."> </a> <h4 class="entrysearch-related-entry-title"> <a href="https://native.hotwired.dev/" target="_blank" rel="noopener" data-gtm-click-label="entry-search-recommend-header-a-title"> Hotwire Native: Hotwire Native is a web-first framework for building native mobile apps. </a> </h4> <a href="/entry/s/native.hotwired.dev/" class="entrysearch-related-users" data-gtm-click-label="entry-search-recommend-header-a-users"> 13 users </a> </div> </li> <li class="entrysearch-related-listitem"> <div class="entrysearch-related-entry"> <a href="https://thoughtbot.com/blog/the-strategy-behind-hotwire-and-ruby-on-rails-from-the-cto-of-clara" class="entrysearch-related-image" target="_blank" rel="noopener" data-gtm-click-label="entry-search-recommend-header-a-image"> <img src="https://cdn-ak-scissors.b.st-hatena.com/image/square/4bc556c46009d315e32530154fbe39e83cff5a34/height=288;version=1;width=512/https%3A%2F%2Fimages.prismic.io%2Fthoughtbot-website%2FZn0Q2JbWFbowe7qY_default-article-background.png%3Fauto%3Dformat%252Ccompress%26blend-mode%3Dnormal%26blend-x%3D0%26blend-y%3D0%26blend%3Dhttps%253A%252F%252Fimages.prismic.io%252Fthoughtbot-website%252FZ1tQFJbqstJ98cGP_default.png%26mark-x%3D356%26mark-y%3D100%26mark64%3DaHR0cHM6Ly9hc3NldHMuaW1naXgubmV0L350ZXh0Lz90eHQtbGVhZD0tMTUmdHh0LXRyYWNrPTAmdHh0NjQ9VjJoNUlFTlVUM01nWVhKbElHTm9iMjl6YVc1bklFaHZkSGRwY21VZ1lXNWtJRkoxWW5rZ2IyNGdVbUZwYkhNJTNEJnR4dGNscj1mNWY1ZjUmdHh0Zm9udD1JQk1QbGV4U2Fuc0pQLVNlbWlCb2xkJnR4dHBhZD0wJnR4dHNpemU9NzYmdz04MDA%253D%26txt-align%3Dcenter%252Cmiddle%26txt-color%3Df5f5f5%26txt-fit%3Dmax%26txt-font%3DIBMPlexSansJP-SemiBold%26txt-size%3D24%26txt-x%3D391%26txt-y%3D526%26txt%3DKelly%2BGebo" alt="Why CTOs are choosing Hotwire and Ruby on Rails"> </a> <h4 class="entrysearch-related-entry-title"> <a href="https://thoughtbot.com/blog/the-strategy-behind-hotwire-and-ruby-on-rails-from-the-cto-of-clara" target="_blank" rel="noopener" data-gtm-click-label="entry-search-recommend-header-a-title"> Why CTOs are choosing Hotwire and Ruby on Rails </a> </h4> <a href="/entry/s/thoughtbot.com/blog/the-strategy-behind-hotwire-and-ruby-on-rails-from-the-cto-of-clara" class="entrysearch-related-users" data-gtm-click-label="entry-search-recommend-header-a-users"> 15 users </a> </div> </li> <li class="entrysearch-related-listitem"> <div class="entrysearch-related-entry"> <a href="https://techracho.bpsinc.jp/hachi8833/2024_07_17/142947" class="entrysearch-related-image" target="_blank" rel="noopener" data-gtm-click-label="entry-search-recommend-header-a-image"> <img src="https://cdn-ak-scissors.b.st-hatena.com/image/square/277cb08c989b1612afe4287207359cde71dfb91e/height=288;version=1;width=512/https%3A%2F%2Ftechracho.bpsinc.jp%2Fwp-content%2Fuploads%2F2024%2F07%2Frails_hotwire_spa_popover_drama_eyecatch-min.png" alt="Rails: HotwireとSPAを比較するなら実装コストの違いに注意（翻訳）｜TechRacho by BPS株式会社"> </a> <h4 class="entrysearch-related-entry-title"> <a href="https://techracho.bpsinc.jp/hachi8833/2024_07_17/142947" target="_blank" rel="noopener" data-gtm-click-label="entry-search-recommend-header-a-title"> Rails: HotwireとSPAを比較するなら実装コストの違いに注意（翻訳）｜TechRacho by BPS株式会社 </a> </h4> <a href="/entry/s/techracho.bpsinc.jp/hachi8833/2024_07_17/142947" class="entrysearch-related-users" data-gtm-click-label="entry-search-recommend-header-a-users"> 40 users </a> </div> </li> </ul> </div> <ul class="entrysearch-articles"> <li class="bookmark-item js-user-bookmark-item js-keyboard-selectable-item"> <div class="centerarticle-entry is-image-entry-unit"> <div class="js-bookmark-stock-button is-hidden"> <button class="js-bookmark-stock-button-ready readlater-button" data-gtm-click-label="entry-search-result-item-stock-button" title="あとで読む" aria-label="あとで読む" tabindex="0" type="button" data-href="https://suzuka-hk.hatenablog.com/entry/2024/06/13/082009"><span>あとで読む</span> </button> </div> <div class="centerarticle-entry-header"> <h3 class="centerarticle-entry-title"> <a href="https://suzuka-hk.hatenablog.com/entry/2024/06/13/082009" class="js-clickable-link js-keyboard-openable" target="_blank" rel="noopener" data-gtm-click-label="entry-search-result-item-title"> <img class="centerarticle-entry-favicon" src="https://cdn-ak2.favicon.st-hatena.com/64?url=https%3A%2F%2Fsuzuka-hk.hatenablog.com%2Fentry%2F2024%2F06%2F13%2F082009" alt="">山手線を徒歩で一周する人のための記録アプリ「YamaNotes」をリリースしました - すずかのプログラミング勉強記 </a> </h3> <ul class="centerarticle-entry-data"> <li> <span class="centerarticle-users"> <a href="/entry/s/suzuka-hk.hatenablog.com/entry/2024/06/13/082009" class="js-keyboard-entry-page-openable" title="山手線を徒歩で一周する人のための記録アプリ「YamaNotes」をリリースしました - すずかのプログラミング勉強記 (356 ブックマーク)" data-gtm-click-label="entry-search-result-item-users"> 356 users </a> </span> </li> <li> <a href="/site/suzuka-hk.hatenablog.com/" title="『suzuka-hk.hatenablog.com』の新着エントリー" data-gtm-click-label="entry-search-result-item-site-search-url"> suzuka-hk.hatenablog.com </a> </li> <li> <a href="/hotentry/it" data-gtm-click-label="entry-search-result-item-category">テクノロジー</a> </li> <li><span class="entry-contents-date">2024/06/13</span></li> </ul> </div> <div class="centerarticle-entry-contents has-image"> <div class="centerarticle-entry-item"> <p class="centerarticle-entry-summary">はじめに山手線を徒歩で一周する人のための記録アプリ「YamaNotes」をリリースしました。この記事では「YamaNotes」の使い方や、開発過程で苦労したことなどをまとめます。 6/14追記：東京の気温が高くなることが予想されています。熱中症予防のため、涼しくなってからの挑戦をおすすめします。サービスURL www.yamanotes.com リポジトリ github.com はじめに自己紹介アプリの概要山手線徒歩一周チャレンジとは？使い方ログインする初期設定をする進捗を確認する到着する履歴を確認する開発に至る経緯技術スタック技術選定の理由短期間で必要な機能を作るため、Rails7とHotwireで実装コストを抑えて作るため、APIやデプロイ先を調査地図の表示と描画にLeaflet + OpenStreetMapを使用 Render.com + Sup</p> <ul class="entrysearch-entry-tags"> <li><a href="/q/%E3%82%A2%E3%83%97%E3%83%AA" data-gtm-click-label="entry-search-result-item-tag">アプリ</a></li> <li><a href="/q/%E3%81%82%E3%81%A8%E3%81%A7%E8%AA%AD%E3%82%80" data-gtm-click-label="entry-search-result-item-tag">あとで読む</a></li> <li><a href="/q/%E5%BE%92%E6%AD%A9" data-gtm-click-label="entry-search-result-item-tag">徒歩</a></li> <li><a href="/q/%E5%B1%B1%E6%89%8B%E7%B7%9A" data-gtm-click-label="entry-search-result-item-tag">山手線</a></li> <li><a href="/q/web%E3%82%B5%E3%83%BC%E3%83%93%E3%82%B9" data-gtm-click-label="entry-search-result-item-tag">webサービス</a></li> <li><a href="/q/Rails" data-gtm-click-label="entry-search-result-item-tag">Rails</a></li> <li><a href="/q/%E7%94%9F%E6%B4%BB" data-gtm-click-label="entry-search-result-item-tag">生活</a></li> <li><a href="/q/app" data-gtm-click-label="entry-search-result-item-tag">app</a></li> <li><a href="/q/%E3%82%AC%E3%82%B8%E3%82%A7%E3%83%83%E3%83%88" data-gtm-click-label="entry-search-result-item-tag">ガジェット</a></li> <li><a href="/q/%E9%A7%85" data-gtm-click-label="entry-search-result-item-tag">駅</a></li> </ul> <div class="following-bookmarks-container js-following-bookmarks-container" data-entry-url="https://suzuka-hk.hatenablog.com/entry/2024/06/13/082009"> <ul class="following-bookmarks js-following-bookmarks"></ul> <script type="text/x-template" id="template-following-bookmark"> <li> <a href="{{ anchor_path }}" class="following-bookmark-link" data-gtm-label="entry-info-followingBookmarks"> <img src="{{ profile_image_url }}" alt="{{ user_name }}" class="following-bookmark-icon"> </a> <span class="following-bookmark-popup"> <span class="following-bookmark-username">{{ user_name }}</span><span class="following-bookmark-timestamp">{{ created }}</span> <span class="following-bookmark-text"> {{ #comment }}<span class="following-bookmark-comment">{{ comment }}</span>{{ /comment }} <ul class="following-bookmark-tags">{{ #tags }}<li>{{ label }}</li>{{ /tags }}</ul> </span> </span> </li> </script> </div> </div> <div class="centerarticle-entry-image-wrapper"> <a href="https://suzuka-hk.hatenablog.com/entry/2024/06/13/082009" class="centerarticle-entry-image" target="_blank" rel="noopener"> <img src="https://cdn-ak-scissors.b.st-hatena.com/image/square/63a370df46a77565fd6c005cb4babe8f17c1304a/height=288;version=1;width=512/https%3A%2F%2Fcdn.image.st-hatena.com%2Fimage%2Fscale%2Fb83fd32ca2c847eb522a7b72ec666ea3e64313ee%2Fbackend%3Dimagemagick%3Bversion%3D1%3Bwidth%3D1300%2Fhttps%253A%252F%252Fcdn-ak.f.st-hatena.com%252Fimages%252Ffotolife%252Fs%252Fsuzuka_hk%252F20240612%252F20240612232541.png" alt="山手線を徒歩で一周する人のための記録アプリ「YamaNotes」をリリースしました - すずかのプログラミング勉強記" data-gtm-click-label="entry-search-result-item-image"> </a> </div> </div> </div> </li> <li class="bookmark-item js-user-bookmark-item js-keyboard-selectable-item"> <div class="centerarticle-entry is-image-entry-unit"> <div class="js-bookmark-stock-button is-hidden"> <button class="js-bookmark-stock-button-ready readlater-button" data-gtm-click-label="entry-search-result-item-stock-button" title="あとで読む" aria-label="あとで読む" tabindex="0" type="button" data-href="https://qiita.com/SFITB/items/27cb917945fa9e721f34"><span>あとで読む</span> </button> </div> <div class="centerarticle-entry-header"> <h3 class="centerarticle-entry-title"> <a href="https://qiita.com/SFITB/items/27cb917945fa9e721f34" class="js-clickable-link js-keyboard-openable" target="_blank" rel="noopener" data-gtm-click-label="entry-search-result-item-title"> <img class="centerarticle-entry-favicon" src="https://cdn-ak2.favicon.st-hatena.com/64?url=https%3A%2F%2Fqiita.com%2FSFITB%2Fitems%2F27cb917945fa9e721f34" alt="">WebのフロントエンドでもDockerで開発環境を構築する理由。（余談としての脱node依存開発） - Qiita </a> </h3> <ul class="centerarticle-entry-data"> <li> <span class="centerarticle-users"> <a href="/entry/s/qiita.com/SFITB/items/27cb917945fa9e721f34" class="js-keyboard-entry-page-openable" title="WebのフロントエンドでもDockerで開発環境を構築する理由。（余談としての脱node依存開発） - Qiita (251 ブックマーク)" data-gtm-click-label="entry-search-result-item-users"> 251 users </a> </span> </li> <li> <a href="/site/qiita.com/SFITB" title="『qiita.com/SFITB』の新着エントリー" data-gtm-click-label="entry-search-result-item-site-search-url"> qiita.com/SFITB </a> </li> <li> <a href="/hotentry/it" data-gtm-click-label="entry-search-result-item-category">テクノロジー</a> </li> <li><span class="entry-contents-date">2022/09/10</span></li> </ul> </div> <div class="centerarticle-entry-contents has-image"> <div class="centerarticle-entry-item"> <p class="centerarticle-entry-summary">要は、手元のMacやWindows、Ubuntuなど開発端末上に直接、複数のプロジェクトを配置して開発しつつ、nodeを共有したり、安易にバージョンアップとかしているとビルドができないなどのエラーが発生したりします。２．nodeをつかったフロントエンドのビルドの脆さ（１）特定の団体がビルドツールをメンテしてくれる言語ビルドというのは、Java、Go、Rustなど型付きの言語ではよくしますが、ビルドツール自体が単一のもので特定の開発団体がそれら全体をメンテしてくれています。もちろん、これらのツールであっても、バージョンが違えばビルドは通らなくなることがあります。ただ、後方互換があって、多少バージョンがあがっても動くこともままあります。（２）ビルドという行為が不要な言語 PHPやRubyのようなスクリプト言語の場合、ビルドという行為がそもそもありません。ただ、ランタイムのバージョン違</p> <ul class="entrysearch-entry-tags"> <li><a href="/q/docker" data-gtm-click-label="entry-search-result-item-tag">docker</a></li> <li><a href="/q/%E3%81%82%E3%81%A8%E3%81%A7%E8%AA%AD%E3%82%80" data-gtm-click-label="entry-search-result-item-tag">あとで読む</a></li> <li><a href="/q/%E9%96%8B%E7%99%BA" data-gtm-click-label="entry-search-result-item-tag">開発</a></li> <li><a href="/q/%E3%83%95%E3%83%AD%E3%83%B3%E3%83%88%E3%82%A8%E3%83%B3%E3%83%89" data-gtm-click-label="entry-search-result-item-tag">フロントエンド</a></li> <li><a href="/q/%E7%92%B0%E5%A2%83" data-gtm-click-label="entry-search-result-item-tag">環境</a></li> <li><a href="/q/node" data-gtm-click-label="entry-search-result-item-tag">node</a></li> <li><a href="/q/web" data-gtm-click-label="entry-search-result-item-tag">web</a></li> <li><a href="/q/frontend" data-gtm-click-label="entry-search-result-item-tag">frontend</a></li> <li><a href="/q/development" data-gtm-click-label="entry-search-result-item-tag">development</a></li> </ul> <div class="following-bookmarks-container js-following-bookmarks-container" data-entry-url="https://qiita.com/SFITB/items/27cb917945fa9e721f34"> <ul class="following-bookmarks js-following-bookmarks"></ul> <script type="text/x-template" id="template-following-bookmark"> <li> <a href="{{ anchor_path }}" class="following-bookmark-link" data-gtm-label="entry-info-followingBookmarks"> <img src="{{ profile_image_url }}" alt="{{ user_name }}" class="following-bookmark-icon"> </a> <span class="following-bookmark-popup"> <span class="following-bookmark-username">{{ user_name }}</span><span class="following-bookmark-timestamp">{{ created }}</span> <span class="following-bookmark-text"> {{ #comment }}<span class="following-bookmark-comment">{{ comment }}</span>{{ /comment }} <ul class="following-bookmark-tags">{{ #tags }}<li>{{ label }}</li>{{ /tags }}</ul> </span> </span> </li> </script> </div> </div> <div class="centerarticle-entry-image-wrapper"> <a href="https://qiita.com/SFITB/items/27cb917945fa9e721f34" class="centerarticle-entry-image" target="_blank" rel="noopener"> <img src="https://cdn-ak-scissors.b.st-hatena.com/image/square/44377298e4c639334997c4bf5eda54af20ae79ec/height=288;version=1;width=512/https%3A%2F%2Fqiita-user-contents.imgix.net%2Fhttps%253A%252F%252Fqiita-user-contents.imgix.net%252Fhttps%25253A%25252F%25252Fcdn.qiita.com%25252Fassets%25252Fpublic%25252Farticle-ogp-background-afbab5eb44e0b055cce1258705637a91.png%253Fixlib%253Drb-4.0.0%2526w%253D1200%2526blend64%253DaHR0cHM6Ly9xaWl0YS11c2VyLXByb2ZpbGUtaW1hZ2VzLmltZ2l4Lm5ldC9odHRwcyUzQSUyRiUyRnFpaXRhLWltYWdlLXN0b3JlLnMzLmFwLW5vcnRoZWFzdC0xLmFtYXpvbmF3cy5jb20lMkYwJTJGMTU5NzIlMkZwcm9maWxlLWltYWdlcyUyRjE2NDIzMjAwNTM_aXhsaWI9cmItNC4wLjAmYXI9MSUzQTEmZml0PWNyb3AmbWFzaz1lbGxpcHNlJmZtPXBuZzMyJnM9ZGM2ODBjNTBlYTdlY2UzMTllZjFjZjRmZDdlOGZjMjg%2526blend-x%253D120%2526blend-y%253D467%2526blend-w%253D82%2526blend-h%253D82%2526blend-mode%253Dnormal%2526s%253Df3c68a84b090a81dcdf744fa68cf0574%3Fixlib%3Drb-4.0.0%26w%3D1200%26fm%3Djpg%26mark64%3DaHR0cHM6Ly9xaWl0YS11c2VyLWNvbnRlbnRzLmltZ2l4Lm5ldC9-dGV4dD9peGxpYj1yYi00LjAuMCZ3PTk2MCZoPTMyNCZ0eHQ9V2ViJUUzJTgxJUFFJUUzJTgzJTk1JUUzJTgzJUFEJUUzJTgzJUIzJUUzJTgzJTg4JUUzJTgyJUE4JUUzJTgzJUIzJUUzJTgzJTg5JUUzJTgxJUE3JUUzJTgyJTgyRG9ja2VyJUUzJTgxJUE3JUU5JTk2JThCJUU3JTk5JUJBJUU3JTkyJUIwJUU1JUEyJTgzJUUzJTgyJTkyJUU2JUE3JThCJUU3JUFGJTg5JUUzJTgxJTk5JUUzJTgyJThCJUU3JTkwJTg2JUU3JTk0JUIxJUUzJTgwJTgyJUVGJUJDJTg4JUU0JUJEJTk5JUU4JUFCJTg3JUUzJTgxJUE4JUUzJTgxJTk3JUUzJTgxJUE2JUUzJTgxJUFFJUU4JTg0JUIxbm9kZSVFNCVCRSU5RCVFNSVBRCU5OCVFOSU5NiU4QiVFNyU5OSVCQSVFRiVCQyU4OSZ0eHQtYWxpZ249bGVmdCUyQ3RvcCZ0eHQtY29sb3I9JTIzMUUyMTIxJnR4dC1mb250PUhpcmFnaW5vJTIwU2FucyUyMFc2JnR4dC1zaXplPTU2JnR4dC1wYWQ9MCZzPWM4M2NlZjQxYzkyNDAzMmJiODUwYzRhZmM5Njc2ZDNl%26mark-x%3D120%26mark-y%3D112%26blend64%3DaHR0cHM6Ly9xaWl0YS11c2VyLWNvbnRlbnRzLmltZ2l4Lm5ldC9-dGV4dD9peGxpYj1yYi00LjAuMCZ3PTgzOCZoPTU4JnR4dD0lNDBTRklUQiZ0eHQtY29sb3I9JTIzMUUyMTIxJnR4dC1mb250PUhpcmFnaW5vJTIwU2FucyUyMFc2JnR4dC1zaXplPTM2JnR4dC1wYWQ9MCZzPWMyZWZjMDVjMjQ1N2YxZTg2ZGRlMWYxN2M5ZWMxNTcw%26blend-x%3D242%26blend-y%3D480%26blend-w%3D838%26blend-h%3D46%26blend-fit%3Dcrop%26blend-crop%3Dleft%252Cbottom%26blend-mode%3Dnormal%26s%3D02ca5a60820e098c92da615710c32258" alt="WebのフロントエンドでもDockerで開発環境を構築する理由。（余談としての脱node依存開発） - Qiita" data-gtm-click-label="entry-search-result-item-image"> </a> </div> </div> </div> </li> <li class="bookmark-item js-user-bookmark-item js-keyboard-selectable-item"> <div class="centerarticle-entry is-image-entry-unit"> <div class="js-bookmark-stock-button is-hidden"> <button class="js-bookmark-stock-button-ready readlater-button" data-gtm-click-label="entry-search-result-item-stock-button" title="あとで読む" aria-label="あとで読む" tabindex="0" type="button" data-href="https://speakerdeck.com/yasaichi/directions-for-the-next-generation-of-ruby-on-rails-from-the-viewpoint-of-its-active-record"><span>あとで読む</span> </button> </div> <div class="centerarticle-entry-header"> <h3 class="centerarticle-entry-title"> <a href="https://speakerdeck.com/yasaichi/directions-for-the-next-generation-of-ruby-on-rails-from-the-viewpoint-of-its-active-record" class="js-clickable-link js-keyboard-openable" target="_blank" rel="noopener" data-gtm-click-label="entry-search-result-item-title"> <img class="centerarticle-entry-favicon" src="https://cdn-ak2.favicon.st-hatena.com/64?url=https%3A%2F%2Fspeakerdeck.com%2Fyasaichi%2Fdirections-for-the-next-generation-of-ruby-on-rails-from-the-viewpoint-of-its-active-record" alt="">Active Recordから考える次世代のRuby on Railsの方向性 / Directions for the next generation of Ruby on Rails: From the viewpoint of its Active Record </a> </h3> <ul class="centerarticle-entry-data"> <li> <span class="centerarticle-users"> <a href="/entry/s/speakerdeck.com/yasaichi/directions-for-the-next-generation-of-ruby-on-rails-from-the-viewpoint-of-its-active-record" class="js-keyboard-entry-page-openable" title="Active Recordから考える次世代のRuby on Railsの方向性 / Directions for the next generation of Ruby on Rails: From the viewpoint of its Active Record (230 ブックマーク)" data-gtm-click-label="entry-search-result-item-users"> 230 users </a> </span> </li> <li> <a href="/site/speakerdeck.com/yasaichi" title="『speakerdeck.com/yasaichi』の新着エントリー" data-gtm-click-label="entry-search-result-item-site-search-url"> speakerdeck.com/yasaichi </a> </li> <li> <a href="/hotentry/it" data-gtm-click-label="entry-search-result-item-category">テクノロジー</a> </li> <li><span class="entry-contents-date">2021/01/29</span></li> </ul> </div> <div class="centerarticle-entry-contents has-image"> <div class="centerarticle-entry-item"> <p class="centerarticle-entry-summary">January 29, 2021 @ 銀座Rails #29</p> <ul class="entrysearch-entry-tags"> <li><a href="/q/rails" data-gtm-click-label="entry-search-result-item-tag">rails</a></li> <li><a href="/q/%E3%81%82%E3%81%A8%E3%81%A7%E8%AA%AD%E3%82%80" data-gtm-click-label="entry-search-result-item-tag">あとで読む</a></li> <li><a href="/q/ruby" data-gtm-click-label="entry-search-result-item-tag">ruby</a></li> <li><a href="/q/architecture" data-gtm-click-label="entry-search-result-item-tag">architecture</a></li> <li><a href="/q/frontend" data-gtm-click-label="entry-search-result-item-tag">frontend</a></li> <li><a href="/q/%E3%82%A2%E3%83%BC%E3%82%AD%E3%83%86%E3%82%AF%E3%83%81%E3%83%A3" data-gtm-click-label="entry-search-result-item-tag">アーキテクチャ</a></li> <li><a href="/q/ORM" data-gtm-click-label="entry-search-result-item-tag">ORM</a></li> <li><a href="/q/ActiveRecord" data-gtm-click-label="entry-search-result-item-tag">ActiveRecord</a></li> <li><a href="/q/%E3%83%89%E3%83%A1%E3%82%A4%E3%83%B3" data-gtm-click-label="entry-search-result-item-tag">ドメイン</a></li> <li><a href="/q/Slide" data-gtm-click-label="entry-search-result-item-tag">Slide</a></li> </ul> <div class="following-bookmarks-container js-following-bookmarks-container" data-entry-url="https://speakerdeck.com/yasaichi/directions-for-the-next-generation-of-ruby-on-rails-from-the-viewpoint-of-its-active-record"> <ul class="following-bookmarks js-following-bookmarks"></ul> <script type="text/x-template" id="template-following-bookmark"> <li> <a href="{{ anchor_path }}" class="following-bookmark-link" data-gtm-label="entry-info-followingBookmarks"> <img src="{{ profile_image_url }}" alt="{{ user_name }}" class="following-bookmark-icon"> </a> <span class="following-bookmark-popup"> <span class="following-bookmark-username">{{ user_name }}</span><span class="following-bookmark-timestamp">{{ created }}</span> <span class="following-bookmark-text"> {{ #comment }}<span class="following-bookmark-comment">{{ comment }}</span>{{ /comment }} <ul class="following-bookmark-tags">{{ #tags }}<li>{{ label }}</li>{{ /tags }}</ul> </span> </span> </li> </script> </div> </div> <div class="centerarticle-entry-image-wrapper"> <a href="https://speakerdeck.com/yasaichi/directions-for-the-next-generation-of-ruby-on-rails-from-the-viewpoint-of-its-active-record" class="centerarticle-entry-image" target="_blank" rel="noopener"> <img src="https://cdn-ak-scissors.b.st-hatena.com/image/square/a8884eba9c9a1897f09451286b8ae90b4f050bca/height=288;version=1;width=512/https%3A%2F%2Ffiles.speakerdeck.com%2Fpresentations%2Ff8074ebe4b854da793835d856d9cb331%2Fslide_0.jpg%3F17253534" alt="Active Recordから考える次世代のRuby on Railsの方向性 / Directions for the next generation of Ruby on Rails: From the viewpoint of its Active Record" data-gtm-click-label="entry-search-result-item-image"> </a> </div> </div> </div> </li> <li class="bookmark-item js-user-bookmark-item js-keyboard-selectable-item"> <div class="centerarticle-entry is-image-entry-unit"> <div class="js-bookmark-stock-button is-hidden"> <button class="js-bookmark-stock-button-ready readlater-button" data-gtm-click-label="entry-search-result-item-stock-button" title="あとで読む" aria-label="あとで読む" tabindex="0" type="button" data-href="https://zenn.dev/en30/articles/2e8e0c55c128e0"><span>あとで読む</span> </button> </div> <div class="centerarticle-entry-header"> <h3 class="centerarticle-entry-title"> <a href="https://zenn.dev/en30/articles/2e8e0c55c128e0" class="js-clickable-link js-keyboard-openable" target="_blank" rel="noopener" data-gtm-click-label="entry-search-result-item-title"> <img class="centerarticle-entry-favicon" src="https://cdn-ak2.favicon.st-hatena.com/64?url=https%3A%2F%2Fzenn.dev%2Fen30%2Farticles%2F2e8e0c55c128e0" alt="">Hotwireとは何なのか？ </a> </h3> <ul class="centerarticle-entry-data"> <li> <span class="centerarticle-users"> <a href="/entry/s/zenn.dev/en30/articles/2e8e0c55c128e0" class="js-keyboard-entry-page-openable" title="Hotwireとは何なのか？ (222 ブックマーク)" data-gtm-click-label="entry-search-result-item-users"> 222 users </a> </span> </li> <li> <a href="/site/zenn.dev/en30" title="『zenn.dev/en30』の新着エントリー" data-gtm-click-label="entry-search-result-item-site-search-url"> zenn.dev/en30 </a> </li> <li> <a href="/hotentry/it" data-gtm-click-label="entry-search-result-item-category">テクノロジー</a> </li> <li><span class="entry-contents-date">2021/01/24</span></li> </ul> </div> <div class="centerarticle-entry-contents has-image"> <div class="centerarticle-entry-item"> <p class="centerarticle-entry-summary">はじめに HotwireはBasecampが発表した、モダンなWebアプリケーションを作るための新しいアプローチです。名前もHTML OVER THE WIREから来ているように、HotwireではHTMLをサーバーから送ります。「それ普通のWebアプリケーションでは？」と思う方もいるかもしれませんが、SPA + APIサーバでJSONが使われるのに対し、SPAと同様の体験をHTMLを中心に置いて作るアプローチであることを示す表現です。僕個人は、最初は「ふ〜ん」という感じだったんですが turbo-railsを読みつつHotwireのデモアプリをPhoenixに移植してみたり WebSocketではないTurbo Streamsのsourceを作ってみて遊んだりと、ある程度触ってみて良さが理解できてきたので、Hotwireを使うと何が嬉しいのか、Hotwireの各要素の紹介を記事として</p> <ul class="entrysearch-entry-tags"> <li><a href="/q/Hotwire" data-gtm-click-label="entry-search-result-item-tag">Hotwire</a></li> <li><a href="/q/rails" data-gtm-click-label="entry-search-result-item-tag">rails</a></li> <li><a href="/q/%E3%81%82%E3%81%A8%E3%81%A7%E8%AA%AD%E3%82%80" data-gtm-click-label="entry-search-result-item-tag">あとで読む</a></li> <li><a href="/q/%E9%96%8B%E7%99%BA" data-gtm-click-label="entry-search-result-item-tag">開発</a></li> <li><a href="/q/SPA" data-gtm-click-label="entry-search-result-item-tag">SPA</a></li> <li><a href="/q/development" data-gtm-click-label="entry-search-result-item-tag">development</a></li> <li><a href="/q/html" data-gtm-click-label="entry-search-result-item-tag">html</a></li> <li><a href="/q/javascript" data-gtm-click-label="entry-search-result-item-tag">javascript</a></li> <li><a href="/q/web" data-gtm-click-label="entry-search-result-item-tag">web</a></li> <li><a href="/q/turbo" data-gtm-click-label="entry-search-result-item-tag">turbo</a></li> </ul> <div class="following-bookmarks-container js-following-bookmarks-container" data-entry-url="https://zenn.dev/en30/articles/2e8e0c55c128e0"> <ul class="following-bookmarks js-following-bookmarks"></ul> <script type="text/x-template" id="template-following-bookmark"> <li> <a href="{{ anchor_path }}" class="following-bookmark-link" data-gtm-label="entry-info-followingBookmarks"> <img src="{{ profile_image_url }}" alt="{{ user_name }}" class="following-bookmark-icon"> </a> <span class="following-bookmark-popup"> <span class="following-bookmark-username">{{ user_name }}</span><span class="following-bookmark-timestamp">{{ created }}</span> <span class="following-bookmark-text"> {{ #comment }}<span class="following-bookmark-comment">{{ comment }}</span>{{ /comment }} <ul class="following-bookmark-tags">{{ #tags }}<li>{{ label }}</li>{{ /tags }}</ul> </span> </span> </li> </script> </div> </div> <div class="centerarticle-entry-image-wrapper"> <a href="https://zenn.dev/en30/articles/2e8e0c55c128e0" class="centerarticle-entry-image" target="_blank" rel="noopener"> <img src="https://cdn-ak-scissors.b.st-hatena.com/image/square/cbf84223f26ebf222271436abfa06f1534e3e0e0/height=288;version=1;width=512/https%3A%2F%2Fres.cloudinary.com%2Fzenn%2Fimage%2Fupload%2Fs--9fjx4UYC--%2Fc_fit%252Cg_north_west%252Cl_text%3Anotosansjp-medium.otf_55%3AHotwire%2525E3%252581%2525A8%2525E3%252581%2525AF%2525E4%2525BD%252595%2525E3%252581%2525AA%2525E3%252581%2525AE%2525E3%252581%25258B%2525EF%2525BC%25259F%252Cw_1010%252Cx_90%252Cy_100%2Fg_south_west%252Cl_text%3Anotosansjp-medium.otf_37%3Aen30%252Cx_203%252Cy_121%2Fg_south_west%252Ch_90%252Cl_fetch%3AaHR0cHM6Ly9zdG9yYWdlLmdvb2dsZWFwaXMuY29tL3plbm4tdXNlci11cGxvYWQvYXZhdGFyLzk2OGY2ZjFhZmYuanBlZw%3D%3D%252Cr_max%252Cw_90%252Cx_87%252Cy_95%2Fv1627283836%2Fdefault%2Fog-base-w1200-v2.png" alt="Hotwireとは何なのか？" data-gtm-click-label="entry-search-result-item-image"> </a> </div> </div> </div> </li> <div class="related-entry-wrapper"> <div class="entrysearch-related-entries" data-gtm-inview-label="entry-search-recommend-middle"> <h3 class="entrysearch-related-title">hotwireの関連エントリー</h3> <ul class="entrysearch-related-list"> <li class="entrysearch-related-listitem"> <div class="entrysearch-related-entry"> <a href="https://www.itmedia.co.jp/news/articles/2504/02/news146.html" class="entrysearch-related-image" target="_blank" rel="noopener" data-gtm-click-label="entry-search-recommend-middle-image"> <img src="https://cdn-ak-scissors.b.st-hatena.com/image/square/8623ac0512c8e58aea4d20987e104f792eb3a3ed/height=288;version=1;width=512/https%3A%2F%2Fimage.itmedia.co.jp%2Fnews%2Farticles%2F2504%2F02%2Fcover_news146.jpg" alt="中居氏のSMS「見たら削除して」→デジタルフォレンジックで復元　フジ第三者委、20万件以上のデータを調査"> </a> <h4 class="entrysearch-related-entry-title"> <a href="https://www.itmedia.co.jp/news/articles/2504/02/news146.html" target="_blank" rel="noopener" data-gtm-click-label="entry-search-recommend-middle-title"> 中居氏のSMS「見たら削除して」→デジタルフォレンジックで復元　フジ第三者委、20万件以上のデータを調査 </a> </h4> <a href="/entry/s/www.itmedia.co.jp/news/articles/2504/02/news146.html" class="entrysearch-related-users" data-gtm-click-label="entry-search-recommend-middle-users"> 273 users </a> </div> </li> <li class="entrysearch-related-listitem"> <div class="entrysearch-related-entry"> <a href="https://blog.flatt.tech/entry/logic_vuln_slides" class="entrysearch-related-image" target="_blank" rel="noopener" data-gtm-click-label="entry-search-recommend-middle-image"> <img src="https://cdn-ak-scissors.b.st-hatena.com/image/square/5ffd8f692cb8b2369371eb17d9b19a8081ab2440/height=288;version=1;width=512/https%3A%2F%2Fcdn.image.st-hatena.com%2Fimage%2Fscale%2Fd18d5b18376e15ac833db48a2879c16a9ca9e8a5%2Fbackend%3Dimagemagick%3Bversion%3D1%3Bwidth%3D1300%2Fhttps%253A%252F%252Fcdn-ak.f.st-hatena.com%252Fimages%252Ffotolife%252Ff%252Fflattsecurity%252F20250402%252F20250402123249.png" alt="アプリケーションロジック固有の脆弱性を防ぐ、開発者のためのセキュリティ観点をまとめたスライド（全59ページ）を無償公開しました - GMO Flatt Security Blog"> </a> <h4 class="entrysearch-related-entry-title"> <a href="https://blog.flatt.tech/entry/logic_vuln_slides" target="_blank" rel="noopener" data-gtm-click-label="entry-search-recommend-middle-title"> アプリケーションロジック固有の脆弱性を防ぐ、開発者のためのセキュリティ観点をまとめたスライド（全59ページ）を無償公開しました - GMO Flatt Security Blog </a> </h4> <a href="/entry/s/blog.flatt.tech/entry/logic_vuln_slides" class="entrysearch-related-users" data-gtm-click-label="entry-search-recommend-middle-users"> 126 users </a> </div> </li> <li class="entrysearch-related-listitem"> <div class="entrysearch-related-entry"> <a href="https://zenn.dev/kameoncloud/articles/2c739be7c5aaf5" class="entrysearch-related-image" target="_blank" rel="noopener" data-gtm-click-label="entry-search-recommend-middle-image"> <img src="https://cdn-ak-scissors.b.st-hatena.com/image/square/7c3818b9d62ddc80437860991089101280b87fc6/height=288;version=1;width=512/https%3A%2F%2Fres.cloudinary.com%2Fzenn%2Fimage%2Fupload%2Fs--ki--5Lp1--%2Fc_fit%252Cg_north_west%252Cl_text%3Anotosansjp-medium.otf_55%3AREST%252520API%252520%2525E8%2525A8%2525AD%2525E8%2525A8%252588%2525E6%25258C%252587%2525E9%252587%25259D%2525E3%252583%2525BB%2525E3%252582%2525BB%2525E3%252582%2525AD%2525E3%252583%2525A5%2525E3%252583%2525AA%2525E3%252583%252586%2525E3%252582%2525A3%2525E7%2525B7%2525A8%252Cw_1010%252Cx_90%252Cy_100%2Fg_south_west%252Cl_text%3Anotosansjp-medium.otf_37%3Akameoncloud%252Cx_203%252Cy_121%2Fg_south_west%252Ch_90%252Cl_fetch%3AaHR0cHM6Ly9zdG9yYWdlLmdvb2dsZWFwaXMuY29tL3plbm4tdXNlci11cGxvYWQvYXZhdGFyL2MxY2ViMjdlZDcuanBlZw%3D%3D%252Cr_max%252Cw_90%252Cx_87%252Cy_95%2Fv1627283836%2Fdefault%2Fog-base-w1200-v2.png" alt="REST API 設計指針・セキュリティ編"> </a> <h4 class="entrysearch-related-entry-title"> <a href="https://zenn.dev/kameoncloud/articles/2c739be7c5aaf5" target="_blank" rel="noopener" data-gtm-click-label="entry-search-recommend-middle-title"> REST API 設計指針・セキュリティ編 </a> </h4> <a href="/entry/s/zenn.dev/kameoncloud/articles/2c739be7c5aaf5" class="entrysearch-related-users" data-gtm-click-label="entry-search-recommend-middle-users"> 156 users </a> </div> </li> <li class="entrysearch-related-listitem"> <div class="entrysearch-related-entry"> <a href="https://speakerdeck.com/flatt_security/apurikesiyongu-you-no-rozitukunocui-ruo-xing-wofang-gukai-fa-zhe-notamenosekiyuriteiguan-dian" class="entrysearch-related-image" target="_blank" rel="noopener" data-gtm-click-label="entry-search-recommend-middle-image"> <img src="https://cdn-ak-scissors.b.st-hatena.com/image/square/90602d2b7430259790b52186a8b61ec04c044427/height=288;version=1;width=512/https%3A%2F%2Ffiles.speakerdeck.com%2Fpresentations%2Fb16bac04ea334e5cbfa11c17d541aae7%2Fslide_0.jpg%3F34508474" alt="アプリケーション固有の「ロジックの脆弱性」を防ぐ開発者のためのセキュリティ観点"> </a> <h4 class="entrysearch-related-entry-title"> <a href="https://speakerdeck.com/flatt_security/apurikesiyongu-you-no-rozitukunocui-ruo-xing-wofang-gukai-fa-zhe-notamenosekiyuriteiguan-dian" target="_blank" rel="noopener" data-gtm-click-label="entry-search-recommend-middle-title"> アプリケーション固有の「ロジックの脆弱性」を防ぐ開発者のためのセキュリティ観点 </a> </h4> <a href="/entry/s/speakerdeck.com/flatt_security/apurikesiyongu-you-no-rozitukunocui-ruo-xing-wofang-gukai-fa-zhe-notamenosekiyuriteiguan-dian" class="entrysearch-related-users" data-gtm-click-label="entry-search-recommend-middle-users"> 67 users </a> </div> </li> <li class="entrysearch-related-listitem"> <div class="entrysearch-related-entry"> <a href="https://academy.openai.com/" class="entrysearch-related-image" target="_blank" rel="noopener" data-gtm-click-label="entry-search-recommend-middle-image"> <img src="https://cdn-ak-scissors.b.st-hatena.com/image/square/d8ead9802ad060fccbf427bbf06680746ee0dd45/height=288;version=1;width=512/https%3A%2F%2Fd2xo500swnpgl1.cloudfront.net%2Fuploads%2Foaiacademy%2FOpenAI-black-wordmark-17f3a65d-36d2-468a-a9a1-915e1843c0cf-1739890696095.png" alt="OpenAI Academy"> </a> <h4 class="entrysearch-related-entry-title"> <a href="https://academy.openai.com/" target="_blank" rel="noopener" data-gtm-click-label="entry-search-recommend-middle-title"> OpenAI Academy </a> </h4> <a href="/entry/s/academy.openai.com/" class="entrysearch-related-users" data-gtm-click-label="entry-search-recommend-middle-users"> 34 users </a> </div> </li> <li class="entrysearch-related-listitem"> <div class="entrysearch-related-entry"> <a href="https://togetter.com/li/2533298" class="entrysearch-related-image" target="_blank" rel="noopener" data-gtm-click-label="entry-search-recommend-middle-image"> <img src="https://cdn-ak-scissors.b.st-hatena.com/image/square/edb0477cb7986d04f649674f61094d96b4212f47/height=288;version=1;width=512/https%3A%2F%2Fs.tgstc.com%2Fogp3%2F8ea1adfbea57f3d4bf6ce4ee0487adfa-1200x630.jpeg" alt="とある市で起きたシステム障害の原因が「RAIDの本来の目的なのにクッソよくある失敗」で悲しみしかない"> </a> <h4 class="entrysearch-related-entry-title"> <a href="https://togetter.com/li/2533298" target="_blank" rel="noopener" data-gtm-click-label="entry-search-recommend-middle-title"> とある市で起きたシステム障害の原因が「RAIDの本来の目的なのにクッソよくある失敗」で悲しみしかない </a> </h4> <a href="/entry/s/togetter.com/li/2533298" class="entrysearch-related-users" data-gtm-click-label="entry-search-recommend-middle-users"> 241 users </a> </div> </li> <li class="entrysearch-related-listitem"> <div class="entrysearch-related-entry"> <a href="https://qiita.com/sasajimay/items/fd99a903382afba00a34" class="entrysearch-related-image" target="_blank" rel="noopener" data-gtm-click-label="entry-search-recommend-middle-image"> <img src="https://b.st-hatena.com/0f6f9dfc8b21c8af9c2db850a25d9527a7bbe0df/images/v4/public/common/noimage.png" alt="NotebookLMで社内向け製品ボットを作成しよう！ - Qiita"> </a> <h4 class="entrysearch-related-entry-title"> <a href="https://qiita.com/sasajimay/items/fd99a903382afba00a34" target="_blank" rel="noopener" data-gtm-click-label="entry-search-recommend-middle-title"> NotebookLMで社内向け製品ボットを作成しよう！ - Qiita </a> </h4> <a href="/entry/s/qiita.com/sasajimay/items/fd99a903382afba00a34" class="entrysearch-related-users" data-gtm-click-label="entry-search-recommend-middle-users"> 56 users </a> </div> </li> <li class="entrysearch-related-listitem"> <div class="entrysearch-related-entry"> <a href="https://www.itmedia.co.jp/aiplus/articles/2504/02/news158.html" class="entrysearch-related-image" target="_blank" rel="noopener" data-gtm-click-label="entry-search-recommend-middle-image"> <img src="https://cdn-ak-scissors.b.st-hatena.com/image/square/98ab667c835eee6459f8cd29d6653007183145a2/height=288;version=1;width=512/https%3A%2F%2Fimage.itmedia.co.jp%2Faiplus%2Farticles%2F2504%2F02%2Fcover_news158.jpg" alt="マネーフォワード辻社長は、生成AIをこう使う　NotebookLMやGrokなど活用　話題の“ジブリ化”も"> </a> <h4 class="entrysearch-related-entry-title"> <a href="https://www.itmedia.co.jp/aiplus/articles/2504/02/news158.html" target="_blank" rel="noopener" data-gtm-click-label="entry-search-recommend-middle-title"> マネーフォワード辻社長は、生成AIをこう使う　NotebookLMやGrokなど活用　話題の“ジブリ化”も </a> </h4> <a href="/entry/s/www.itmedia.co.jp/aiplus/articles/2504/02/news158.html" class="entrysearch-related-users" data-gtm-click-label="entry-search-recommend-middle-users"> 18 users </a> </div> </li> <li class="entrysearch-related-listitem"> <div class="entrysearch-related-entry"> <a href="https://tmokmss.hatenablog.com/entry/self_host_autonomous_swe_agents_on_aws" class="entrysearch-related-image" target="_blank" rel="noopener" data-gtm-click-label="entry-search-recommend-middle-image"> <img src="https://cdn-ak-scissors.b.st-hatena.com/image/square/b5ab408333b458dc377a870451a9d934d1e81ce0/height=288;version=1;width=512/https%3A%2F%2Fcdn.image.st-hatena.com%2Fimage%2Fscale%2F3058dc87735af8c3865c6cc050e774be88982a18%2Fbackend%3Dimagemagick%3Bversion%3D1%3Bwidth%3D1300%2Fhttps%253A%252F%252Fcdn-ak.f.st-hatena.com%252Fimages%252Ffotolife%252Ft%252Ftmokmss%252F20250402%252F20250402171548.jpg" alt="Devin的な自律型開発エージェントをAWS上に作ってみた！ - maybe daily dev notes"> </a> <h4 class="entrysearch-related-entry-title"> <a href="https://tmokmss.hatenablog.com/entry/self_host_autonomous_swe_agents_on_aws" target="_blank" rel="noopener" data-gtm-click-label="entry-search-recommend-middle-title"> Devin的な自律型開発エージェントをAWS上に作ってみた！ - maybe daily dev notes </a> </h4> <a href="/entry/s/tmokmss.hatenablog.com/entry/self_host_autonomous_swe_agents_on_aws" class="entrysearch-related-users" data-gtm-click-label="entry-search-recommend-middle-users"> 44 users </a> </div> </li> <li class="entrysearch-related-listitem"> <div class="entrysearch-related-entry"> <a href="https://www.publickey1.jp/blog/25/docker_model_runnerdockerdocker_hub.html" class="entrysearch-related-image" target="_blank" rel="noopener" data-gtm-click-label="entry-search-recommend-middle-image"> <img src="https://cdn-ak-scissors.b.st-hatena.com/image/square/83f480e0bbdcfcf45c83511396f2ca910b43caa2/height=288;version=1;width=512/https%3A%2F%2Fwww.publickey1.jp%2F2025%2Fdocker-model-runner-ann01.png" alt="Docker Model Runner登場、Dockerコンテナと同じように任意の大規模言語モデルをDocker Hubから選んで簡単に導入、実行可能に"> </a> <h4 class="entrysearch-related-entry-title"> <a href="https://www.publickey1.jp/blog/25/docker_model_runnerdockerdocker_hub.html" target="_blank" rel="noopener" data-gtm-click-label="entry-search-recommend-middle-title"> Docker Model Runner登場、Dockerコンテナと同じように任意の大規模言語モデルをDocker Hubから選んで簡単に導入、実行可能に </a> </h4> <a href="/entry/s/www.publickey1.jp/blog/25/docker_model_runnerdockerdocker_hub.html" class="entrysearch-related-users" data-gtm-click-label="entry-search-recommend-middle-users"> 40 users </a> </div> </li> </ul> </div> </div> <li class="bookmark-item js-user-bookmark-item js-keyboard-selectable-item"> <div class="centerarticle-entry is-image-entry-unit"> <div class="js-bookmark-stock-button is-hidden"> <button class="js-bookmark-stock-button-ready readlater-button" data-gtm-click-label="entry-search-result-item-stock-button" title="あとで読む" aria-label="あとで読む" tabindex="0" type="button" data-href="https://world.hey.com/dhh/turbo-8-is-dropping-typescript-70165c01"><span>あとで読む</span> </button> </div> <div class="centerarticle-entry-header"> <h3 class="centerarticle-entry-title"> <a href="https://world.hey.com/dhh/turbo-8-is-dropping-typescript-70165c01" class="js-clickable-link js-keyboard-openable" target="_blank" rel="noopener" data-gtm-click-label="entry-search-result-item-title"> <img class="centerarticle-entry-favicon" src="https://cdn-ak2.favicon.st-hatena.com/64?url=https%3A%2F%2Fworld.hey.com%2Fdhh%2Fturbo-8-is-dropping-typescript-70165c01" alt="">Turbo 8 is dropping TypeScript </a> </h3> <ul class="centerarticle-entry-data"> <li> <span class="centerarticle-users"> <a href="/entry/s/world.hey.com/dhh/turbo-8-is-dropping-typescript-70165c01" class="js-keyboard-entry-page-openable" title="Turbo 8 is dropping TypeScript (219 ブックマーク)" data-gtm-click-label="entry-search-result-item-users"> 219 users </a> </span> </li> <li> <a href="/site/world.hey.com/" title="『world.hey.com』の新着エントリー" data-gtm-click-label="entry-search-result-item-site-search-url"> world.hey.com </a> </li> <li> <a href="/hotentry/it" data-gtm-click-label="entry-search-result-item-category">テクノロジー</a> </li> <li><span class="entry-contents-date">2023/09/07</span></li> </ul> </div> <div class="centerarticle-entry-contents has-image"> <div class="centerarticle-entry-item"> <p class="centerarticle-entry-summary">By all accounts, TypeScript has been a big success for Microsoft. I've seen loads of people sparkle with joy from dousing JavaScript with explicit types that can be checked by a compiler. But I've never been a fan. Not after giving it five minutes, not after giving it five years. So it's with great pleasure that I can announce we're dropping TypeScript from the next big release of Turbo 8. The fac</p> <ul class="entrysearch-entry-tags"> <li><a href="/q/typescript" data-gtm-click-label="entry-search-result-item-tag">typescript</a></li> <li><a href="/q/hotwire" data-gtm-click-label="entry-search-result-item-tag">hotwire</a></li> <li><a href="/q/dhh" data-gtm-click-label="entry-search-result-item-tag">dhh</a></li> <li><a href="/q/%E3%81%82%E3%81%A8%E3%81%A7%E8%AA%AD%E3%82%80" data-gtm-click-label="entry-search-result-item-tag">あとで読む</a></li> <li><a href="/q/javascript" data-gtm-click-label="entry-search-result-item-tag">javascript</a></li> <li><a href="/q/Rails" data-gtm-click-label="entry-search-result-item-tag">Rails</a></li> <li><a href="/q/Turbo" data-gtm-click-label="entry-search-result-item-tag">Turbo</a></li> <li><a href="/q/RubyOnRails" data-gtm-click-label="entry-search-result-item-tag">RubyOnRails</a></li> <li><a href="/q/%E3%83%97%E3%83%AD%E3%82%B0%E3%83%A9%E3%83%9F%E3%83%B3%E3%82%B0" data-gtm-click-label="entry-search-result-item-tag">プログラミング</a></li> </ul> <div class="following-bookmarks-container js-following-bookmarks-container" data-entry-url="https://world.hey.com/dhh/turbo-8-is-dropping-typescript-70165c01"> <ul class="following-bookmarks js-following-bookmarks"></ul> <script type="text/x-template" id="template-following-bookmark"> <li> <a href="{{ anchor_path }}" class="following-bookmark-link" data-gtm-label="entry-info-followingBookmarks"> <img src="{{ profile_image_url }}" alt="{{ user_name }}" class="following-bookmark-icon"> </a> <span class="following-bookmark-popup"> <span class="following-bookmark-username">{{ user_name }}</span><span class="following-bookmark-timestamp">{{ created }}</span> <span class="following-bookmark-text"> {{ #comment }}<span class="following-bookmark-comment">{{ comment }}</span>{{ /comment }} <ul class="following-bookmark-tags">{{ #tags }}<li>{{ label }}</li>{{ /tags }}</ul> </span> </span> </li> </script> </div> </div> <div class="centerarticle-entry-image-wrapper"> <a href="https://world.hey.com/dhh/turbo-8-is-dropping-typescript-70165c01" class="centerarticle-entry-image" target="_blank" rel="noopener"> <img src="https://cdn-ak-scissors.b.st-hatena.com/image/square/9c7988a248ca4df16431f085aeeb9f3504d0df78/height=288;version=1;width=512/https%3A%2F%2Fworld.hey.com%2Fdhh%2Favatar-fb368b1ee9b185dc2a09b03eabdb61678dd55244" alt="Turbo 8 is dropping TypeScript" data-gtm-click-label="entry-search-result-item-image"> </a> </div> </div> </div> </li> <li class="bookmark-item js-user-bookmark-item js-keyboard-selectable-item"> <div class="centerarticle-entry "> <div class="js-bookmark-stock-button is-hidden"> <button class="js-bookmark-stock-button-ready readlater-button" data-gtm-click-label="entry-search-result-item-stock-button" title="あとで読む" aria-label="あとで読む" tabindex="0" type="button" data-href="https://hotwired.dev/"><span>あとで読む</span> </button> </div> <div class="centerarticle-entry-header"> <h3 class="centerarticle-entry-title"> <a href="https://hotwired.dev/" class="js-clickable-link js-keyboard-openable" target="_blank" rel="noopener" data-gtm-click-label="entry-search-result-item-title"> <img class="centerarticle-entry-favicon" src="https://cdn-ak2.favicon.st-hatena.com/64?url=https%3A%2F%2Fhotwired.dev%2F" alt="">HTML Over The Wire | Hotwire </a> </h3> <ul class="centerarticle-entry-data"> <li> <span class="centerarticle-users"> <a href="/entry/s/hotwired.dev/" class="js-keyboard-entry-page-openable" title="HTML Over The Wire | Hotwire (214 ブックマーク)" data-gtm-click-label="entry-search-result-item-users"> 214 users </a> </span> </li> <li> <a href="/site/hotwired.dev/" title="『hotwired.dev』の新着エントリー" data-gtm-click-label="entry-search-result-item-site-search-url"> hotwired.dev </a> </li> <li> <a href="/hotentry/it" data-gtm-click-label="entry-search-result-item-category">テクノロジー</a> </li> <li><span class="entry-contents-date">2020/12/23</span></li> </ul> </div> <div class="centerarticle-entry-contents "> <div class="centerarticle-entry-item"> <p class="centerarticle-entry-summary">Hotwire is an alternative approach to building modern web applications without using much JavaScript by sending HTML instead of JSON over the wire. This makes for fast first-load pages, keeps template rendering on the server, and allows for a simpler, more productive development experience in any programming language, without sacrificing any of the speed or responsiveness associated with a traditi</p> <ul class="entrysearch-entry-tags"> <li><a href="/q/html" data-gtm-click-label="entry-search-result-item-tag">html</a></li> <li><a href="/q/javascript" data-gtm-click-label="entry-search-result-item-tag">javascript</a></li> <li><a href="/q/%E3%81%82%E3%81%A8%E3%81%A7%E8%AA%AD%E3%82%80" data-gtm-click-label="entry-search-result-item-tag">あとで読む</a></li> <li><a href="/q/rails" data-gtm-click-label="entry-search-result-item-tag">rails</a></li> <li><a href="/q/hotwire" data-gtm-click-label="entry-search-result-item-tag">hotwire</a></li> <li><a href="/q/JSON" data-gtm-click-label="entry-search-result-item-tag">JSON</a></li> <li><a href="/q/spa" data-gtm-click-label="entry-search-result-item-tag">spa</a></li> <li><a href="/q/frontend" data-gtm-click-label="entry-search-result-item-tag">frontend</a></li> <li><a href="/q/ruby" data-gtm-click-label="entry-search-result-item-tag">ruby</a></li> <li><a href="/q/%E3%83%95%E3%83%AC%E3%83%BC%E3%83%A0%E3%83%AF%E3%83%BC%E3%82%AF" data-gtm-click-label="entry-search-result-item-tag">フレームワーク</a></li> </ul> <div class="following-bookmarks-container js-following-bookmarks-container" data-entry-url="https://hotwired.dev/"> <ul class="following-bookmarks js-following-bookmarks"></ul> <script type="text/x-template" id="template-following-bookmark"> <li> <a href="{{ anchor_path }}" class="following-bookmark-link" data-gtm-label="entry-info-followingBookmarks"> <img src="{{ profile_image_url }}" alt="{{ user_name }}" class="following-bookmark-icon"> </a> <span class="following-bookmark-popup"> <span class="following-bookmark-username">{{ user_name }}</span><span class="following-bookmark-timestamp">{{ created }}</span> <span class="following-bookmark-text"> {{ #comment }}<span class="following-bookmark-comment">{{ comment }}</span>{{ /comment }} <ul class="following-bookmark-tags">{{ #tags }}<li>{{ label }}</li>{{ /tags }}</ul> </span> </span> </li> </script> </div> </div> </div> </div> </li> <li class="bookmark-item js-user-bookmark-item js-keyboard-selectable-item"> <div class="centerarticle-entry is-image-entry-unit"> <div class="js-bookmark-stock-button is-hidden"> <button class="js-bookmark-stock-button-ready readlater-button" data-gtm-click-label="entry-search-result-item-stock-button" title="あとで読む" aria-label="あとで読む" tabindex="0" type="button" data-href="https://www.publickey1.jp/blog/21/rails_70nodejs.html"><span>あとで読む</span> </button> </div> <div class="centerarticle-entry-header"> <h3 class="centerarticle-entry-title"> <a href="https://www.publickey1.jp/blog/21/rails_70nodejs.html" class="js-clickable-link js-keyboard-openable" target="_blank" rel="noopener" data-gtm-click-label="entry-search-result-item-title"> <img class="centerarticle-entry-favicon" src="https://cdn-ak2.favicon.st-hatena.com/64?url=https%3A%2F%2Fwww.publickey1.jp%2Fblog%2F21%2Frails_70nodejs.html" alt="">Rails 7.0正式リリース、Node.js不要のフロントエンド開発環境がデフォルトに </a> </h3> <ul class="centerarticle-entry-data"> <li> <span class="centerarticle-users"> <a href="/entry/s/www.publickey1.jp/blog/21/rails_70nodejs.html" class="js-keyboard-entry-page-openable" title="Rails 7.0正式リリース、Node.js不要のフロントエンド開発環境がデフォルトに (195 ブックマーク)" data-gtm-click-label="entry-search-result-item-users"> 195 users </a> </span> </li> <li> <a href="/site/www.publickey1.jp/" title="『www.publickey1.jp』の新着エントリー" data-gtm-click-label="entry-search-result-item-site-search-url"> www.publickey1.jp </a> </li> <li> <a href="/hotentry/it" data-gtm-click-label="entry-search-result-item-category">テクノロジー</a> </li> <li><span class="entry-contents-date">2021/12/20</span></li> </ul> </div> <div class="centerarticle-entry-contents has-image"> <div class="centerarticle-entry-item"> <p class="centerarticle-entry-summary">Ruby言語によるWebアプリケーションフレームワークの最新版となる「Rails 7」が正式リリースされました。 Rails 7.0 FINAL: The fulfillment of a vision to present a truly full-stack approach to web development that tackles both the front- and back-end challenges with equal vigor. https://t.co/WxJ0nKYfE7 — Ruby on Rails (@rails) December 15, 2021 Rails 7の最大の変更点は、フロントエンド開発環境が刷新されてNode.jsを用いない構成がデフォルトとなったことでしょう。 Rails 6では、優れたフロントエンド開発環境を実現するためにトランスパ</p> <ul class="entrysearch-entry-tags"> <li><a href="/q/rails" data-gtm-click-label="entry-search-result-item-tag">rails</a></li> <li><a href="/q/%E3%81%82%E3%81%A8%E3%81%A7%E8%AA%AD%E3%82%80" data-gtm-click-label="entry-search-result-item-tag">あとで読む</a></li> <li><a href="/q/JavaScript" data-gtm-click-label="entry-search-result-item-tag">JavaScript</a></li> <li><a href="/q/Ruby" data-gtm-click-label="entry-search-result-item-tag">Ruby</a></li> <li><a href="/q/FrontEnd" data-gtm-click-label="entry-search-result-item-tag">FrontEnd</a></li> <li><a href="/q/Node" data-gtm-click-label="entry-search-result-item-tag">Node</a></li> <li><a href="/q/%22Ruby%20on%20Rails%22" data-gtm-click-label="entry-search-result-item-tag">Ruby on Rails</a></li> <li><a href="/q/%E9%96%8B%E7%99%BA" data-gtm-click-label="entry-search-result-item-tag">開発</a></li> </ul> <div class="following-bookmarks-container js-following-bookmarks-container" data-entry-url="https://www.publickey1.jp/blog/21/rails_70nodejs.html"> <ul class="following-bookmarks js-following-bookmarks"></ul> <script type="text/x-template" id="template-following-bookmark"> <li> <a href="{{ anchor_path }}" class="following-bookmark-link" data-gtm-label="entry-info-followingBookmarks"> <img src="{{ profile_image_url }}" alt="{{ user_name }}" class="following-bookmark-icon"> </a> <span class="following-bookmark-popup"> <span class="following-bookmark-username">{{ user_name }}</span><span class="following-bookmark-timestamp">{{ created }}</span> <span class="following-bookmark-text"> {{ #comment }}<span class="following-bookmark-comment">{{ comment }}</span>{{ /comment }} <ul class="following-bookmark-tags">{{ #tags }}<li>{{ label }}</li>{{ /tags }}</ul> </span> </span> </li> </script> </div> </div> <div class="centerarticle-entry-image-wrapper"> <a href="https://www.publickey1.jp/blog/21/rails_70nodejs.html" class="centerarticle-entry-image" target="_blank" rel="noopener"> <img src="https://cdn-ak-scissors.b.st-hatena.com/image/square/2f38eacef723e1ac8ab1d813ffdc195a4c1aa5b5/height=288;version=1;width=512/https%3A%2F%2Fwww.publickey1.jp%2F2021%2F0Q8hcVDq.png" alt="Rails 7.0正式リリース、Node.js不要のフロントエンド開発環境がデフォルトに" data-gtm-click-label="entry-search-result-item-image"> </a> </div> </div> </div> </li> <li class="bookmark-item js-user-bookmark-item js-keyboard-selectable-item"> <div class="centerarticle-entry is-image-entry-unit"> <div class="js-bookmark-stock-button is-hidden"> <button class="js-bookmark-stock-button-ready readlater-button" data-gtm-click-label="entry-search-result-item-stock-button" title="あとで読む" aria-label="あとで読む" tabindex="0" type="button" data-href="https://speakerdeck.com/zaru_sakuraba/hotwire-wo-ben-fan-huan-jing-deshi-tutemitagan-xiang"><span>あとで読む</span> </button> </div> <div class="centerarticle-entry-header"> <h3 class="centerarticle-entry-title"> <a href="https://speakerdeck.com/zaru_sakuraba/hotwire-wo-ben-fan-huan-jing-deshi-tutemitagan-xiang" class="js-clickable-link js-keyboard-openable" target="_blank" rel="noopener" data-gtm-click-label="entry-search-result-item-title"> <img class="centerarticle-entry-favicon" src="https://cdn-ak2.favicon.st-hatena.com/64?url=https%3A%2F%2Fspeakerdeck.com%2Fzaru_sakuraba%2Fhotwire-wo-ben-fan-huan-jing-deshi-tutemitagan-xiang" alt="">Hotwire を本番環境で使ってみた感想 </a> </h3> <ul class="centerarticle-entry-data"> <li> <span class="centerarticle-users"> <a href="/entry/s/speakerdeck.com/zaru_sakuraba/hotwire-wo-ben-fan-huan-jing-deshi-tutemitagan-xiang" class="js-keyboard-entry-page-openable" title="Hotwire を本番環境で使ってみた感想 (185 ブックマーク)" data-gtm-click-label="entry-search-result-item-users"> 185 users </a> </span> </li> <li> <a href="/site/speakerdeck.com/zaru_sakuraba" title="『speakerdeck.com/zaru_sakuraba』の新着エントリー" data-gtm-click-label="entry-search-result-item-site-search-url"> speakerdeck.com/zaru_sakuraba </a> </li> <li> <a href="/hotentry/it" data-gtm-click-label="entry-search-result-item-category">テクノロジー</a> </li> <li><span class="entry-contents-date">2022/04/07</span></li> </ul> </div> <div class="centerarticle-entry-contents has-image"> <div class="centerarticle-entry-item"> <p class="centerarticle-entry-summary">2022年のRailsの開発現場事情について語ろう！ Qiita Night https://increments.connpass.com/event/241385/</p> <ul class="entrysearch-entry-tags"> <li><a href="/q/rails" data-gtm-click-label="entry-search-result-item-tag">rails</a></li> <li><a href="/q/hotwire" data-gtm-click-label="entry-search-result-item-tag">hotwire</a></li> <li><a href="/q/%E3%81%82%E3%81%A8%E3%81%A7%E8%AA%AD%E3%82%80" data-gtm-click-label="entry-search-result-item-tag">あとで読む</a></li> <li><a href="/q/slide" data-gtm-click-label="entry-search-result-item-tag">slide</a></li> <li><a href="/q/%E3%83%95%E3%83%AD%E3%83%B3%E3%83%88%E3%82%A8%E3%83%B3%E3%83%89" data-gtm-click-label="entry-search-result-item-tag">フロントエンド</a></li> <li><a href="/q/development" data-gtm-click-label="entry-search-result-item-tag">development</a></li> <li><a href="/q/SPA" data-gtm-click-label="entry-search-result-item-tag">SPA</a></li> <li><a href="/q/%E7%92%B0%E5%A2%83" data-gtm-click-label="entry-search-result-item-tag">環境</a></li> <li><a href="/q/frontend" data-gtm-click-label="entry-search-result-item-tag">frontend</a></li> <li><a href="/q/ruby" data-gtm-click-label="entry-search-result-item-tag">ruby</a></li> </ul> <div class="following-bookmarks-container js-following-bookmarks-container" data-entry-url="https://speakerdeck.com/zaru_sakuraba/hotwire-wo-ben-fan-huan-jing-deshi-tutemitagan-xiang"> <ul class="following-bookmarks js-following-bookmarks"></ul> <script type="text/x-template" id="template-following-bookmark"> <li> <a href="{{ anchor_path }}" class="following-bookmark-link" data-gtm-label="entry-info-followingBookmarks"> <img src="{{ profile_image_url }}" alt="{{ user_name }}" class="following-bookmark-icon"> </a> <span class="following-bookmark-popup"> <span class="following-bookmark-username">{{ user_name }}</span><span class="following-bookmark-timestamp">{{ created }}</span> <span class="following-bookmark-text"> {{ #comment }}<span class="following-bookmark-comment">{{ comment }}</span>{{ /comment }} <ul class="following-bookmark-tags">{{ #tags }}<li>{{ label }}</li>{{ /tags }}</ul> </span> </span> </li> </script> </div> </div> <div class="centerarticle-entry-image-wrapper"> <a href="https://speakerdeck.com/zaru_sakuraba/hotwire-wo-ben-fan-huan-jing-deshi-tutemitagan-xiang" class="centerarticle-entry-image" target="_blank" rel="noopener"> <img src="https://cdn-ak-scissors.b.st-hatena.com/image/square/1887445ad87eb632cd63d1447e75f00c4325bb1d/height=288;version=1;width=512/https%3A%2F%2Ffiles.speakerdeck.com%2Fpresentations%2F097509588fea4e25ad059987a7ec4891%2Fslide_0.jpg%3F21013351" alt="Hotwire を本番環境で使ってみた感想" data-gtm-click-label="entry-search-result-item-image"> </a> </div> </div> </div> </li> <li class="bookmark-item js-user-bookmark-item js-keyboard-selectable-item"> <div class="centerarticle-entry is-image-entry-unit"> <div class="js-bookmark-stock-button is-hidden"> <button class="js-bookmark-stock-button-ready readlater-button" data-gtm-click-label="entry-search-result-item-stock-button" title="あとで読む" aria-label="あとで読む" tabindex="0" type="button" data-href="https://zenn.dev/razokulover/articles/899a966321cb1b"><span>あとで読む</span> </button> </div> <div class="centerarticle-entry-header"> <h3 class="centerarticle-entry-title"> <a href="https://zenn.dev/razokulover/articles/899a966321cb1b" class="js-clickable-link js-keyboard-openable" target="_blank" rel="noopener" data-gtm-click-label="entry-search-result-item-title"> <img class="centerarticle-entry-favicon" src="https://cdn-ak2.favicon.st-hatena.com/64?url=https%3A%2F%2Fzenn.dev%2Frazokulover%2Farticles%2F899a966321cb1b" alt="">個人的Rails開発環境構築2024 </a> </h3> <ul class="centerarticle-entry-data"> <li> <span class="centerarticle-users"> <a href="/entry/s/zenn.dev/razokulover/articles/899a966321cb1b" class="js-keyboard-entry-page-openable" title="個人的Rails開発環境構築2024 (181 ブックマーク)" data-gtm-click-label="entry-search-result-item-users"> 181 users </a> </span> </li> <li> <a href="/site/zenn.dev/razokulover" title="『zenn.dev/razokulover』の新着エントリー" data-gtm-click-label="entry-search-result-item-site-search-url"> zenn.dev/razokulover </a> </li> <li> <a href="/hotentry/it" data-gtm-click-label="entry-search-result-item-category">テクノロジー</a> </li> <li><span class="entry-contents-date">2024/03/17</span></li> </ul> </div> <div class="centerarticle-entry-contents has-image"> <div class="centerarticle-entry-item"> <p class="centerarticle-entry-summary">新規でRailsプロジェクトを始める時の個人的な環境構築についてまとめる。前提とする条件等は下記。規模: ~中規模開発者数: 個人利用シーン: PoC作成・スタートアップ立ち上げ・並の業務アプリ開発等基本戦略利用シーン的に「思い立ったらすぐアプリの開発ができる」という感じの運用がしたい。極力セットアップで悩みたくないから必要なミドルウェアなどは全部Dockerでインストールできるようにして立ち上げれば終わり、の環境を作る。その環境の中で色々とコマンドを叩いたり、rails newやrails gなどでRailsアプリを作成していく。この辺のRailsの初期セットアップの手間を出来るだけ省きたいのでtemplateとなるリポジトリを作成し、そこからcloneしてくるだけでOKにする。フロントエンドはReactなどを使わずをRails標準のerbとHotwireを軸に開発する。開</p> <ul class="entrysearch-entry-tags"> <li><a href="/q/rails" data-gtm-click-label="entry-search-result-item-tag">rails</a></li> <li><a href="/q/%E9%96%8B%E7%99%BA" data-gtm-click-label="entry-search-result-item-tag">開発</a></li> <li><a href="/q/%E3%81%82%E3%81%A8%E3%81%A7%E8%AA%AD%E3%82%80" data-gtm-click-label="entry-search-result-item-tag">あとで読む</a></li> <li><a href="/q/%E3%82%B3%E3%83%B3%E3%83%86%E3%83%8A" data-gtm-click-label="entry-search-result-item-tag">コンテナ</a></li> <li><a href="/q/development" data-gtm-click-label="entry-search-result-item-tag">development</a></li> <li><a href="/q/%E7%92%B0%E5%A2%83" data-gtm-click-label="entry-search-result-item-tag">環境</a></li> <li><a href="/q/ruby" data-gtm-click-label="entry-search-result-item-tag">ruby</a></li> <li><a href="/q/vscode" data-gtm-click-label="entry-search-result-item-tag">vscode</a></li> <li><a href="/q/TypeScript" data-gtm-click-label="entry-search-result-item-tag">TypeScript</a></li> <li><a href="/q/%E3%82%A8%E3%83%B3%E3%82%B8%E3%83%8B%E3%82%A2" data-gtm-click-label="entry-search-result-item-tag">エンジニア</a></li> </ul> <div class="following-bookmarks-container js-following-bookmarks-container" data-entry-url="https://zenn.dev/razokulover/articles/899a966321cb1b"> <ul class="following-bookmarks js-following-bookmarks"></ul> <script type="text/x-template" id="template-following-bookmark"> <li> <a href="{{ anchor_path }}" class="following-bookmark-link" data-gtm-label="entry-info-followingBookmarks"> <img src="{{ profile_image_url }}" alt="{{ user_name }}" class="following-bookmark-icon"> </a> <span class="following-bookmark-popup"> <span class="following-bookmark-username">{{ user_name }}</span><span class="following-bookmark-timestamp">{{ created }}</span> <span class="following-bookmark-text"> {{ #comment }}<span class="following-bookmark-comment">{{ comment }}</span>{{ /comment }} <ul class="following-bookmark-tags">{{ #tags }}<li>{{ label }}</li>{{ /tags }}</ul> </span> </span> </li> </script> </div> </div> <div class="centerarticle-entry-image-wrapper"> <a href="https://zenn.dev/razokulover/articles/899a966321cb1b" class="centerarticle-entry-image" target="_blank" rel="noopener"> <img src="https://cdn-ak-scissors.b.st-hatena.com/image/square/451f0c8232a9baa070bc55996cbc2f7b2abe42be/height=288;version=1;width=512/https%3A%2F%2Fres.cloudinary.com%2Fzenn%2Fimage%2Fupload%2Fs--N3pjRZ4J--%2Fc_fit%252Cg_north_west%252Cl_text%3Anotosansjp-medium.otf_55%3A%2525E5%252580%25258B%2525E4%2525BA%2525BA%2525E7%25259A%252584Rails%2525E9%252596%25258B%2525E7%252599%2525BA%2525E7%252592%2525B0%2525E5%2525A2%252583%2525E6%2525A7%25258B%2525E7%2525AF%2525892024%252Cw_1010%252Cx_90%252Cy_100%2Fg_south_west%252Cl_text%3Anotosansjp-medium.otf_37%3AYuheiNakasaka%252Cx_203%252Cy_121%2Fg_south_west%252Ch_90%252Cl_fetch%3AaHR0cHM6Ly9saDMuZ29vZ2xldXNlcmNvbnRlbnQuY29tL2EtL0FPaDE0R2kzeF9ZT3A4VnMzd2p0d1QweXJBb19CVW9WXzFZZnNmSEZXbVpmPXMyNTAtYw%3D%3D%252Cr_max%252Cw_90%252Cx_87%252Cy_95%2Fv1627283836%2Fdefault%2Fog-base-w1200-v2.png" alt="個人的Rails開発環境構築2024" data-gtm-click-label="entry-search-result-item-image"> </a> </div> </div> </div> </li> <li class="bookmark-item js-user-bookmark-item js-keyboard-selectable-item"> <div class="centerarticle-entry is-image-entry-unit"> <div class="js-bookmark-stock-button is-hidden"> <button class="js-bookmark-stock-button-ready readlater-button" data-gtm-click-label="entry-search-result-item-stock-button" title="あとで読む" aria-label="あとで読む" tabindex="0" type="button" data-href="https://laiso.hatenablog.com/entry/2023/09/07/153417"><span>あとで読む</span> </button> </div> <div class="centerarticle-entry-header"> <h3 class="centerarticle-entry-title"> <a href="https://laiso.hatenablog.com/entry/2023/09/07/153417" class="js-clickable-link js-keyboard-openable" target="_blank" rel="noopener" data-gtm-click-label="entry-search-result-item-title"> <img class="centerarticle-entry-favicon" src="https://cdn-ak2.favicon.st-hatena.com/64?url=https%3A%2F%2Flaiso.hatenablog.com%2Fentry%2F2023%2F09%2F07%2F153417" alt="">Remove TypeScript - laiso </a> </h3> <ul class="centerarticle-entry-data"> <li> <span class="centerarticle-users"> <a href="/entry/s/laiso.hatenablog.com/entry/2023/09/07/153417" class="js-keyboard-entry-page-openable" title="Remove TypeScript - laiso (180 ブックマーク)" data-gtm-click-label="entry-search-result-item-users"> 180 users </a> </span> </li> <li> <a href="/site/laiso.hatenablog.com/" title="『laiso.hatenablog.com』の新着エントリー" data-gtm-click-label="entry-search-result-item-site-search-url"> laiso.hatenablog.com </a> </li> <li> <a href="/hotentry/it" data-gtm-click-label="entry-search-result-item-category">テクノロジー</a> </li> <li><span class="entry-contents-date">2023/09/07</span></li> </ul> </div> <div class="centerarticle-entry-contents has-image"> <div class="centerarticle-entry-item"> <p class="centerarticle-entry-summary">経緯 world.hey.com DHHが「オタクくん見てる〜？今からうちのレポジトリからTypeScriptを剥しま〜す」と宣言したことにより、Web開発者界隈でTypeScriptの是非自体の話になり騒ぎになった*1*2。 github.com その後、野次馬がたくさん集ってきてrevertプルリクエストを立てる人やTypeScript公式リポジトリから全ソースコードを消すプルリクエストを出す*3ようなキッズムーブをする人も出てきた world.hey.com 実際の変更 8617行のTypeScriptがJavaScript化された。(Sloc 便利) ❯ scc src/ ─────────────────────────────────────────────────────────────────────────────── Language Files Lines Blan</p> <ul class="entrysearch-entry-tags"> <li><a href="/q/typescript" data-gtm-click-label="entry-search-result-item-tag">typescript</a></li> <li><a href="/q/rails" data-gtm-click-label="entry-search-result-item-tag">rails</a></li> <li><a href="/q/javascript" data-gtm-click-label="entry-search-result-item-tag">javascript</a></li> <li><a href="/q/%E3%81%82%E3%81%A8%E3%81%A7%E8%AA%AD%E3%82%80" data-gtm-click-label="entry-search-result-item-tag">あとで読む</a></li> <li><a href="/q/programming" data-gtm-click-label="entry-search-result-item-tag">programming</a></li> <li><a href="/q/%E3%82%B3%E3%83%BC%E3%83%89" data-gtm-click-label="entry-search-result-item-tag">コード</a></li> <li><a href="/q/Hotwire" data-gtm-click-label="entry-search-result-item-tag">Hotwire</a></li> <li><a href="/q/SPA" data-gtm-click-label="entry-search-result-item-tag">SPA</a></li> <li><a href="/q/Ruby" data-gtm-click-label="entry-search-result-item-tag">Ruby</a></li> </ul> <div class="following-bookmarks-container js-following-bookmarks-container" data-entry-url="https://laiso.hatenablog.com/entry/2023/09/07/153417"> <ul class="following-bookmarks js-following-bookmarks"></ul> <script type="text/x-template" id="template-following-bookmark"> <li> <a href="{{ anchor_path }}" class="following-bookmark-link" data-gtm-label="entry-info-followingBookmarks"> <img src="{{ profile_image_url }}" alt="{{ user_name }}" class="following-bookmark-icon"> </a> <span class="following-bookmark-popup"> <span class="following-bookmark-username">{{ user_name }}</span><span class="following-bookmark-timestamp">{{ created }}</span> <span class="following-bookmark-text"> {{ #comment }}<span class="following-bookmark-comment">{{ comment }}</span>{{ /comment }} <ul class="following-bookmark-tags">{{ #tags }}<li>{{ label }}</li>{{ /tags }}</ul> </span> </span> </li> </script> </div> </div> <div class="centerarticle-entry-image-wrapper"> <a href="https://laiso.hatenablog.com/entry/2023/09/07/153417" class="centerarticle-entry-image" target="_blank" rel="noopener"> <img src="https://cdn-ak-scissors.b.st-hatena.com/image/square/5f4fd4309c6ba01c7eb46b323dd6868de7fa4308/height=288;version=1;width=512/https%3A%2F%2Fcdn.image.st-hatena.com%2Fimage%2Fscale%2F1e15112eec83a9243abfd84c1b058df9a2bd1071%2Fbackend%3Dimagemagick%3Bversion%3D1%3Bwidth%3D1300%2Fhttps%253A%252F%252Fcdn-ak.f.st-hatena.com%252Fimages%252Ffotolife%252Fl%252Flaiso%252F20230907%252F20230907203937.png" alt="Remove TypeScript - laiso" data-gtm-click-label="entry-search-result-item-image"> </a> </div> </div> </div> </li> <li class="bookmark-item js-user-bookmark-item js-keyboard-selectable-item"> <div class="centerarticle-entry is-image-entry-unit"> <div class="js-bookmark-stock-button is-hidden"> <button class="js-bookmark-stock-button-ready readlater-button" data-gtm-click-label="entry-search-result-item-stock-button" title="あとで読む" aria-label="あとで読む" tabindex="0" type="button" data-href="https://nekorails.hatenablog.com/entry/2022/05/16/170434"><span>あとで読む</span> </button> </div> <div class="centerarticle-entry-header"> <h3 class="centerarticle-entry-title"> <a href="https://nekorails.hatenablog.com/entry/2022/05/16/170434" class="js-clickable-link js-keyboard-openable" target="_blank" rel="noopener" data-gtm-click-label="entry-search-result-item-title"> <img class="centerarticle-entry-favicon" src="https://cdn-ak2.favicon.st-hatena.com/64?url=https%3A%2F%2Fnekorails.hatenablog.com%2Fentry%2F2022%2F05%2F16%2F170434" alt="">Hotwireの良かった点、辛かった点、向いているケース、向いていないケース - 猫Rails </a> </h3> <ul class="centerarticle-entry-data"> <li> <span class="centerarticle-users"> <a href="/entry/s/nekorails.hatenablog.com/entry/2022/05/16/170434" class="js-keyboard-entry-page-openable" title="Hotwireの良かった点、辛かった点、向いているケース、向いていないケース - 猫Rails (167 ブックマーク)" data-gtm-click-label="entry-search-result-item-users"> 167 users </a> </span> </li> <li> <a href="/site/nekorails.hatenablog.com/" title="『nekorails.hatenablog.com』の新着エントリー" data-gtm-click-label="entry-search-result-item-site-search-url"> nekorails.hatenablog.com </a> </li> <li> <a href="/hotentry/it" data-gtm-click-label="entry-search-result-item-category">テクノロジー</a> </li> <li><span class="entry-contents-date">2022/05/16</span></li> </ul> </div> <div class="centerarticle-entry-contents has-image"> <div class="centerarticle-entry-item"> <p class="centerarticle-entry-summary">（自分はRailsを書くことが多く、フロントエンドの経験は乏しいです。見方にだいぶ偏りがあると思いますので、そのあたり差し引いてお読みいただければと思います〜🙇‍♂️）こんにちは〜。Hotwireを仕事で使う機会があったので、実際に使ってみて感じた、良かった点、辛かった点、向いているケース、向いていないケースを共有します〜。 Hotwireとは？ Turbo Driveとは？ Turbo Framesとは？ Turbo Streamsとは？ Stimulusとは？ Hotwireのデモ良かった点サーバーサイドに集中できる Railsの資産をフルに活かせる後付けで段階的にSPA風の挙動を追加できる学習コストが低い開発コストが低い WebSocketは必須ではない辛かった点・辛くなりそうな点 DOM更新時にレスポンスを待たないといけない SPAのユーザー体験とはだいぶ違う He</p> <ul class="entrysearch-entry-tags"> <li><a href="/q/rails" data-gtm-click-label="entry-search-result-item-tag">rails</a></li> <li><a href="/q/hotwire" data-gtm-click-label="entry-search-result-item-tag">hotwire</a></li> <li><a href="/q/react" data-gtm-click-label="entry-search-result-item-tag">react</a></li> <li><a href="/q/%E3%81%82%E3%81%A8%E3%81%A7%E8%AA%AD%E3%82%80" data-gtm-click-label="entry-search-result-item-tag">あとで読む</a></li> <li><a href="/q/js" data-gtm-click-label="entry-search-result-item-tag">js</a></li> <li><a href="/q/%E9%96%8B%E7%99%BA" data-gtm-click-label="entry-search-result-item-tag">開発</a></li> <li><a href="/q/%E3%82%B5%E3%83%BC%E3%83%90" data-gtm-click-label="entry-search-result-item-tag">サーバ</a></li> <li><a href="/q/ruby" data-gtm-click-label="entry-search-result-item-tag">ruby</a></li> </ul> <div class="following-bookmarks-container js-following-bookmarks-container" data-entry-url="https://nekorails.hatenablog.com/entry/2022/05/16/170434"> <ul class="following-bookmarks js-following-bookmarks"></ul> <script type="text/x-template" id="template-following-bookmark"> <li> <a href="{{ anchor_path }}" class="following-bookmark-link" data-gtm-label="entry-info-followingBookmarks"> <img src="{{ profile_image_url }}" alt="{{ user_name }}" class="following-bookmark-icon"> </a> <span class="following-bookmark-popup"> <span class="following-bookmark-username">{{ user_name }}</span><span class="following-bookmark-timestamp">{{ created }}</span> <span class="following-bookmark-text"> {{ #comment }}<span class="following-bookmark-comment">{{ comment }}</span>{{ /comment }} <ul class="following-bookmark-tags">{{ #tags }}<li>{{ label }}</li>{{ /tags }}</ul> </span> </span> </li> </script> </div> </div> <div class="centerarticle-entry-image-wrapper"> <a href="https://nekorails.hatenablog.com/entry/2022/05/16/170434" class="centerarticle-entry-image" target="_blank" rel="noopener"> <img src="https://cdn-ak-scissors.b.st-hatena.com/image/square/045101a9909de4f3fc77c9d5abc577bf5d65c978/height=288;version=1;width=512/https%3A%2F%2Fcdn.image.st-hatena.com%2Fimage%2Fscale%2F4bd8847b224a14bb780ec31b55c76ed09b62113e%2Fbackend%3Dimagemagick%3Bversion%3D1%3Bwidth%3D1300%2Fhttps%253A%252F%252Fpbs.twimg.com%252Fprofile_images%252F1130814488150568962%252FxOXGNqMg_400x400.png" alt="Hotwireの良かった点、辛かった点、向いているケース、向いていないケース - 猫Rails" data-gtm-click-label="entry-search-result-item-image"> </a> </div> </div> </div> </li> <li class="bookmark-item js-user-bookmark-item js-keyboard-selectable-item"> <div class="centerarticle-entry is-image-entry-unit"> <div class="js-bookmark-stock-button is-hidden"> <button class="js-bookmark-stock-button-ready readlater-button" data-gtm-click-label="entry-search-result-item-stock-button" title="あとで読む" aria-label="あとで読む" tabindex="0" type="button" data-href="https://speakerdeck.com/nao_072/react-hotwirehe-ji-shu-sutatukubian-geng-sitahua"><span>あとで読む</span> </button> </div> <div class="centerarticle-entry-header"> <h3 class="centerarticle-entry-title"> <a href="https://speakerdeck.com/nao_072/react-hotwirehe-ji-shu-sutatukubian-geng-sitahua" class="js-clickable-link js-keyboard-openable" target="_blank" rel="noopener" data-gtm-click-label="entry-search-result-item-title"> <img class="centerarticle-entry-favicon" src="https://cdn-ak2.favicon.st-hatena.com/64?url=https%3A%2F%2Fspeakerdeck.com%2Fnao_072%2Freact-hotwirehe-ji-shu-sutatukubian-geng-sitahua" alt="">React→Hotwireへ技術スタック変更した話 </a> </h3> <ul class="centerarticle-entry-data"> <li> <span class="centerarticle-users"> <a href="/entry/s/speakerdeck.com/nao_072/react-hotwirehe-ji-shu-sutatukubian-geng-sitahua" class="js-keyboard-entry-page-openable" title="React→Hotwireへ技術スタック変更した話 (163 ブックマーク)" data-gtm-click-label="entry-search-result-item-users"> 163 users </a> </span> </li> <li> <a href="/site/speakerdeck.com/nao_072" title="『speakerdeck.com/nao_072』の新着エントリー" data-gtm-click-label="entry-search-result-item-site-search-url"> speakerdeck.com/nao_072 </a> </li> <li> <a href="/hotentry/it" data-gtm-click-label="entry-search-result-item-category">テクノロジー</a> </li> <li><span class="entry-contents-date">2025/01/29</span></li> </ul> </div> <div class="centerarticle-entry-contents has-image"> <div class="centerarticle-entry-item"> <p class="centerarticle-entry-summary">[Rails World 2023 - Day 1 Closing Keynote] - The Magic of Rails</p> <ul class="entrysearch-entry-tags"> <li><a href="/q/hotwire" data-gtm-click-label="entry-search-result-item-tag">hotwire</a></li> <li><a href="/q/rails" data-gtm-click-label="entry-search-result-item-tag">rails</a></li> <li><a href="/q/%E3%81%82%E3%81%A8%E3%81%A7%E8%AA%AD%E3%82%80" data-gtm-click-label="entry-search-result-item-tag">あとで読む</a></li> <li><a href="/q/react" data-gtm-click-label="entry-search-result-item-tag">react</a></li> <li><a href="/q/%E6%8A%80%E8%A1%93" data-gtm-click-label="entry-search-result-item-tag">技術</a></li> <li><a href="/q/slide" data-gtm-click-label="entry-search-result-item-tag">slide</a></li> </ul> <div class="following-bookmarks-container js-following-bookmarks-container" data-entry-url="https://speakerdeck.com/nao_072/react-hotwirehe-ji-shu-sutatukubian-geng-sitahua"> <ul class="following-bookmarks js-following-bookmarks"></ul> <script type="text/x-template" id="template-following-bookmark"> <li> <a href="{{ anchor_path }}" class="following-bookmark-link" data-gtm-label="entry-info-followingBookmarks"> <img src="{{ profile_image_url }}" alt="{{ user_name }}" class="following-bookmark-icon"> </a> <span class="following-bookmark-popup"> <span class="following-bookmark-username">{{ user_name }}</span><span class="following-bookmark-timestamp">{{ created }}</span> <span class="following-bookmark-text"> {{ #comment }}<span class="following-bookmark-comment">{{ comment }}</span>{{ /comment }} <ul class="following-bookmark-tags">{{ #tags }}<li>{{ label }}</li>{{ /tags }}</ul> </span> </span> </li> </script> </div> </div> <div class="centerarticle-entry-image-wrapper"> <a href="https://speakerdeck.com/nao_072/react-hotwirehe-ji-shu-sutatukubian-geng-sitahua" class="centerarticle-entry-image" target="_blank" rel="noopener"> <img src="https://cdn-ak-scissors.b.st-hatena.com/image/square/a2ddf5d63f61280690ac7c2c40a5eac203b403ae/height=288;version=1;width=512/https%3A%2F%2Ffiles.speakerdeck.com%2Fpresentations%2Fe91c884cd7d441f48748bbaec10aea6c%2Fslide_0.jpg%3F33550675" alt="React→Hotwireへ技術スタック変更した話" data-gtm-click-label="entry-search-result-item-image"> </a> </div> </div> </div> </li> <li class="bookmark-item js-user-bookmark-item js-keyboard-selectable-item"> <div class="centerarticle-entry is-image-entry-unit"> <div class="js-bookmark-stock-button is-hidden"> <button class="js-bookmark-stock-button-ready readlater-button" data-gtm-click-label="entry-search-result-item-stock-button" title="あとで読む" aria-label="あとで読む" tabindex="0" type="button" data-href="https://speakerdeck.com/willnet/hotwirekaradhhgakao-erukorekarafalserailstojsfalsefu-kihe-ifang-wozhi-ru"><span>あとで読む</span> </button> </div> <div class="centerarticle-entry-header"> <h3 class="centerarticle-entry-title"> <a href="https://speakerdeck.com/willnet/hotwirekaradhhgakao-erukorekarafalserailstojsfalsefu-kihe-ifang-wozhi-ru" class="js-clickable-link js-keyboard-openable" target="_blank" rel="noopener" data-gtm-click-label="entry-search-result-item-title"> <img class="centerarticle-entry-favicon" src="https://cdn-ak2.favicon.st-hatena.com/64?url=https%3A%2F%2Fspeakerdeck.com%2Fwillnet%2Fhotwirekaradhhgakao-erukorekarafalserailstojsfalsefu-kihe-ifang-wozhi-ru" alt="">HotwireからDHHが考えるこれからのRailsとJSの付き合い方を知る </a> </h3> <ul class="centerarticle-entry-data"> <li> <span class="centerarticle-users"> <a href="/entry/s/speakerdeck.com/willnet/hotwirekaradhhgakao-erukorekarafalserailstojsfalsefu-kihe-ifang-wozhi-ru" class="js-keyboard-entry-page-openable" title="HotwireからDHHが考えるこれからのRailsとJSの付き合い方を知る (153 ブックマーク)" data-gtm-click-label="entry-search-result-item-users"> 153 users </a> </span> </li> <li> <a href="/site/speakerdeck.com/willnet" title="『speakerdeck.com/willnet』の新着エントリー" data-gtm-click-label="entry-search-result-item-site-search-url"> speakerdeck.com/willnet </a> </li> <li> <a href="/hotentry/it" data-gtm-click-label="entry-search-result-item-category">テクノロジー</a> </li> <li><span class="entry-contents-date">2021/02/19</span></li> </ul> </div> <div class="centerarticle-entry-contents has-image"> <div class="centerarticle-entry-item"> <p class="centerarticle-entry-summary">「iCARE Dev Meetup #18」�で発表した資料です https://icare.connpass.com/event/201662/</p> <ul class="entrysearch-entry-tags"> <li><a href="/q/rails" data-gtm-click-label="entry-search-result-item-tag">rails</a></li> <li><a href="/q/hotwire" data-gtm-click-label="entry-search-result-item-tag">hotwire</a></li> <li><a href="/q/%E3%81%82%E3%81%A8%E3%81%A7%E8%AA%AD%E3%82%80" data-gtm-click-label="entry-search-result-item-tag">あとで読む</a></li> <li><a href="/q/javascript" data-gtm-click-label="entry-search-result-item-tag">javascript</a></li> <li><a href="/q/js" data-gtm-click-label="entry-search-result-item-tag">js</a></li> <li><a href="/q/ruby" data-gtm-click-label="entry-search-result-item-tag">ruby</a></li> <li><a href="/q/Slide" data-gtm-click-label="entry-search-result-item-tag">Slide</a></li> </ul> <div class="following-bookmarks-container js-following-bookmarks-container" data-entry-url="https://speakerdeck.com/willnet/hotwirekaradhhgakao-erukorekarafalserailstojsfalsefu-kihe-ifang-wozhi-ru"> <ul class="following-bookmarks js-following-bookmarks"></ul> <script type="text/x-template" id="template-following-bookmark"> <li> <a href="{{ anchor_path }}" class="following-bookmark-link" data-gtm-label="entry-info-followingBookmarks"> <img src="{{ profile_image_url }}" alt="{{ user_name }}" class="following-bookmark-icon"> </a> <span class="following-bookmark-popup"> <span class="following-bookmark-username">{{ user_name }}</span><span class="following-bookmark-timestamp">{{ created }}</span> <span class="following-bookmark-text"> {{ #comment }}<span class="following-bookmark-comment">{{ comment }}</span>{{ /comment }} <ul class="following-bookmark-tags">{{ #tags }}<li>{{ label }}</li>{{ /tags }}</ul> </span> </span> </li> </script> </div> </div> <div class="centerarticle-entry-image-wrapper"> <a href="https://speakerdeck.com/willnet/hotwirekaradhhgakao-erukorekarafalserailstojsfalsefu-kihe-ifang-wozhi-ru" class="centerarticle-entry-image" target="_blank" rel="noopener"> <img src="https://cdn-ak-scissors.b.st-hatena.com/image/square/e2a24286d6114df5ec2522a19b1226db8fb8aafc/height=288;version=1;width=512/https%3A%2F%2Ffiles.speakerdeck.com%2Fpresentations%2Fe177a3af47174370a92cd01f3884b01f%2Fslide_0.jpg%3F17417176" alt="HotwireからDHHが考えるこれからのRailsとJSの付き合い方を知る" data-gtm-click-label="entry-search-result-item-image"> </a> </div> </div> </div> </li> <li class="bookmark-item js-user-bookmark-item js-keyboard-selectable-item"> <div class="centerarticle-entry is-image-entry-unit"> <div class="js-bookmark-stock-button is-hidden"> <button class="js-bookmark-stock-button-ready readlater-button" data-gtm-click-label="entry-search-result-item-stock-button" title="あとで読む" aria-label="あとで読む" tabindex="0" type="button" data-href="https://laiso.hatenablog.com/entry/hotwire-debut"><span>あとで読む</span> </button> </div> <div class="centerarticle-entry-header"> <h3 class="centerarticle-entry-title"> <a href="https://laiso.hatenablog.com/entry/hotwire-debut" class="js-clickable-link js-keyboard-openable" target="_blank" rel="noopener" data-gtm-click-label="entry-search-result-item-title"> <img class="centerarticle-entry-favicon" src="https://cdn-ak2.favicon.st-hatena.com/64?url=https%3A%2F%2Flaiso.hatenablog.com%2Fentry%2Fhotwire-debut" alt="">Hotwireの感想 - laiso </a> </h3> <ul class="centerarticle-entry-data"> <li> <span class="centerarticle-users"> <a href="/entry/s/laiso.hatenablog.com/entry/hotwire-debut" class="js-keyboard-entry-page-openable" title="Hotwireの感想 - laiso (135 ブックマーク)" data-gtm-click-label="entry-search-result-item-users"> 135 users </a> </span> </li> <li> <a href="/site/laiso.hatenablog.com/" title="『laiso.hatenablog.com』の新着エントリー" data-gtm-click-label="entry-search-result-item-site-search-url"> laiso.hatenablog.com </a> </li> <li> <a href="/hotentry/it" data-gtm-click-label="entry-search-result-item-category">テクノロジー</a> </li> <li><span class="entry-contents-date">2021/01/24</span></li> </ul> </div> <div class="centerarticle-entry-contents has-image"> <div class="centerarticle-entry-item"> <p class="centerarticle-entry-summary">Hotwire https://hotwire.dev/ Turboを中心としたウェブアプリケーションのアーキテクチャの要素技術やコンセプトをPRするための名称 Hotwireというライブラリがあるわけではない役割としてはMicro FrontendsとかReactのlearn once, write anywhereなどに似ているアプリケーション実装言語非依存だけど現状Railsアプリケーションしか実用できる基盤がない Hotwireの思想アプリケーション開発者の生産性を上げることを目的にしていることサーバーサイド言語でフロントエンドを実装したいアレではなかったプログレッシブ(段階的に利用可能)であること必要な技術だけを使い無駄なことをしないことで効率化する Hotwireが列挙する技術は1つづつ有効にできるクライアントサイドでViewを差分更新する現在の主流のシングルペー</p> <ul class="entrysearch-entry-tags"> <li><a href="/q/Hotwire" data-gtm-click-label="entry-search-result-item-tag">Hotwire</a></li> <li><a href="/q/rails" data-gtm-click-label="entry-search-result-item-tag">rails</a></li> <li><a href="/q/SPA" data-gtm-click-label="entry-search-result-item-tag">SPA</a></li> <li><a href="/q/%E3%81%82%E3%81%A8%E3%81%A7%E8%AA%AD%E3%82%80" data-gtm-click-label="entry-search-result-item-tag">あとで読む</a></li> <li><a href="/q/javascript" data-gtm-click-label="entry-search-result-item-tag">javascript</a></li> <li><a href="/q/frontend" data-gtm-click-label="entry-search-result-item-tag">frontend</a></li> <li><a href="/q/%22Ruby%20on%20Rails%22" data-gtm-click-label="entry-search-result-item-tag">Ruby on Rails</a></li> <li><a href="/q/%E3%82%B5%E3%83%BC%E3%83%90" data-gtm-click-label="entry-search-result-item-tag">サーバ</a></li> </ul> <div class="following-bookmarks-container js-following-bookmarks-container" data-entry-url="https://laiso.hatenablog.com/entry/hotwire-debut"> <ul class="following-bookmarks js-following-bookmarks"></ul> <script type="text/x-template" id="template-following-bookmark"> <li> <a href="{{ anchor_path }}" class="following-bookmark-link" data-gtm-label="entry-info-followingBookmarks"> <img src="{{ profile_image_url }}" alt="{{ user_name }}" class="following-bookmark-icon"> </a> <span class="following-bookmark-popup"> <span class="following-bookmark-username">{{ user_name }}</span><span class="following-bookmark-timestamp">{{ created }}</span> <span class="following-bookmark-text"> {{ #comment }}<span class="following-bookmark-comment">{{ comment }}</span>{{ /comment }} <ul class="following-bookmark-tags">{{ #tags }}<li>{{ label }}</li>{{ /tags }}</ul> </span> </span> </li> </script> </div> </div> <div class="centerarticle-entry-image-wrapper"> <a href="https://laiso.hatenablog.com/entry/hotwire-debut" class="centerarticle-entry-image" target="_blank" rel="noopener"> <img src="https://cdn-ak-scissors.b.st-hatena.com/image/square/42866b760954fa6836779c7e6cb65d929edfa706/height=288;version=1;width=512/https%3A%2F%2Fcdn.image.st-hatena.com%2Fimage%2Fscale%2Fc875c21e436e101aeb14156835dcea1d8a1f5468%2Fbackend%3Dimagemagick%3Bversion%3D1%3Bwidth%3D1300%2Fhttps%253A%252F%252Fcdn-ak.f.st-hatena.com%252Fimages%252Ffotolife%252Fl%252Flaiso%252F20210124%252F20210124034255.png" alt="Hotwireの感想 - laiso" data-gtm-click-label="entry-search-result-item-image"> </a> </div> </div> </div> </li> <li class="bookmark-item js-user-bookmark-item js-keyboard-selectable-item"> <div class="centerarticle-entry is-image-entry-unit"> <div class="js-bookmark-stock-button is-hidden"> <button class="js-bookmark-stock-button-ready readlater-button" data-gtm-click-label="entry-search-result-item-stock-button" title="あとで読む" aria-label="あとで読む" tabindex="0" type="button" data-href="https://zenn.dev/shita1112/books/cat-hotwire-turbo"><span>あとで読む</span> </button> </div> <div class="centerarticle-entry-header"> <h3 class="centerarticle-entry-title"> <a href="https://zenn.dev/shita1112/books/cat-hotwire-turbo" class="js-clickable-link js-keyboard-openable" target="_blank" rel="noopener" data-gtm-click-label="entry-search-result-item-title"> <img class="centerarticle-entry-favicon" src="https://cdn-ak2.favicon.st-hatena.com/64?url=https%3A%2F%2Fzenn.dev%2Fshita1112%2Fbooks%2Fcat-hotwire-turbo" alt="">猫でもわかるHotwire入門 Turbo編 </a> </h3> <ul class="centerarticle-entry-data"> <li> <span class="centerarticle-users"> <a href="/entry/s/zenn.dev/shita1112/books/cat-hotwire-turbo" class="js-keyboard-entry-page-openable" title="猫でもわかるHotwire入門 Turbo編 (135 ブックマーク)" data-gtm-click-label="entry-search-result-item-users"> 135 users </a> </span> </li> <li> <a href="/site/zenn.dev/shita1112" title="『zenn.dev/shita1112』の新着エントリー" data-gtm-click-label="entry-search-result-item-site-search-url"> zenn.dev/shita1112 </a> </li> <li> <a href="/hotentry/it" data-gtm-click-label="entry-search-result-item-category">テクノロジー</a> </li> <li><span class="entry-contents-date">2022/04/15</span></li> </ul> </div> <div class="centerarticle-entry-contents has-image"> <div class="centerarticle-entry-item"> <p class="centerarticle-entry-summary">この本ではHotwireの基本的な使い方について解説します。 Rails7からフロントエンドのデフォルトにHotwireが採用されたのですが、まだあんまり日本語の情報が無かったので本にまとめました。Turboをメインに扱っていますが、Stimulusも扱っています。 Hotwireの最初の1冊として読んでいただけますと幸いです🙇‍♂️</p> <ul class="entrysearch-entry-tags"> <li><a href="/q/rails" data-gtm-click-label="entry-search-result-item-tag">rails</a></li> <li><a href="/q/hotwire" data-gtm-click-label="entry-search-result-item-tag">hotwire</a></li> <li><a href="/q/%E3%81%82%E3%81%A8%E3%81%A7%E8%AA%AD%E3%82%80" data-gtm-click-label="entry-search-result-item-tag">あとで読む</a></li> <li><a href="/q/ruby" data-gtm-click-label="entry-search-result-item-tag">ruby</a></li> <li><a href="/q/Turbo" data-gtm-click-label="entry-search-result-item-tag">Turbo</a></li> <li><a href="/q/book" data-gtm-click-label="entry-search-result-item-tag">book</a></li> <li><a href="/q/%E7%8C%AB" data-gtm-click-label="entry-search-result-item-tag">猫</a></li> </ul> <div class="following-bookmarks-container js-following-bookmarks-container" data-entry-url="https://zenn.dev/shita1112/books/cat-hotwire-turbo"> <ul class="following-bookmarks js-following-bookmarks"></ul> <script type="text/x-template" id="template-following-bookmark"> <li> <a href="{{ anchor_path }}" class="following-bookmark-link" data-gtm-label="entry-info-followingBookmarks"> <img src="{{ profile_image_url }}" alt="{{ user_name }}" class="following-bookmark-icon"> </a> <span class="following-bookmark-popup"> <span class="following-bookmark-username">{{ user_name }}</span><span class="following-bookmark-timestamp">{{ created }}</span> <span class="following-bookmark-text"> {{ #comment }}<span class="following-bookmark-comment">{{ comment }}</span>{{ /comment }} <ul class="following-bookmark-tags">{{ #tags }}<li>{{ label }}</li>{{ /tags }}</ul> </span> </span> </li> </script> </div> </div> <div class="centerarticle-entry-image-wrapper"> <a href="https://zenn.dev/shita1112/books/cat-hotwire-turbo" class="centerarticle-entry-image" target="_blank" rel="noopener"> <img src="https://cdn-ak-scissors.b.st-hatena.com/image/square/e22b3848c0729bbc61ca9e1572258f3db0a073e9/height=288;version=1;width=512/https%3A%2F%2Fres.cloudinary.com%2Fzenn%2Fimage%2Fupload%2Fs--uZ1a_Jap--%2Fg_center%252Ch_280%252Cl_fetch%3AaHR0cHM6Ly9zdG9yYWdlLmdvb2dsZWFwaXMuY29tL3plbm4tdXNlci11cGxvYWQvYm9va19jb3Zlci9kNmVlN2Y4YWEzLnBuZw%3D%3D%252Cw_200%2Fv1627283836%2Fdefault%2Fog-base-book_yz4z02.jpg" alt="猫でもわかるHotwire入門 Turbo編" data-gtm-click-label="entry-search-result-item-image"> </a> </div> </div> </div> </li> <li class="bookmark-item js-user-bookmark-item js-keyboard-selectable-item"> <div class="centerarticle-entry is-image-entry-unit"> <div class="js-bookmark-stock-button is-hidden"> <button class="js-bookmark-stock-button-ready readlater-button" data-gtm-click-label="entry-search-result-item-stock-button" title="あとで読む" aria-label="あとで読む" tabindex="0" type="button" data-href="https://techracho.bpsinc.jp/hachi8833/2020_12_24/102368"><span>あとで読む</span> </button> </div> <div class="centerarticle-entry-header"> <h3 class="centerarticle-entry-title"> <a href="https://techracho.bpsinc.jp/hachi8833/2020_12_24/102368" class="js-clickable-link js-keyboard-openable" target="_blank" rel="noopener" data-gtm-click-label="entry-search-result-item-title"> <img class="centerarticle-entry-favicon" src="https://cdn-ak2.favicon.st-hatena.com/64?url=https%3A%2F%2Ftechracho.bpsinc.jp%2Fhachi8833%2F2020_12_24%2F102368" alt="">速報: Basecampがリリースした「Hotwire」の概要｜TechRacho by BPS株式会社 </a> </h3> <ul class="centerarticle-entry-data"> <li> <span class="centerarticle-users"> <a href="/entry/s/techracho.bpsinc.jp/hachi8833/2020_12_24/102368" class="js-keyboard-entry-page-openable" title="速報: Basecampがリリースした「Hotwire」の概要｜TechRacho by BPS株式会社 (127 ブックマーク)" data-gtm-click-label="entry-search-result-item-users"> 127 users </a> </span> </li> <li> <a href="/site/techracho.bpsinc.jp/" title="『techracho.bpsinc.jp』の新着エントリー" data-gtm-click-label="entry-search-result-item-site-search-url"> techracho.bpsinc.jp </a> </li> <li> <a href="/hotentry/it" data-gtm-click-label="entry-search-result-item-category">テクノロジー</a> </li> <li><span class="entry-contents-date">2020/12/24</span></li> </ul> </div> <div class="centerarticle-entry-contents has-image"> <div class="centerarticle-entry-item"> <p class="centerarticle-entry-summary">12/23の朝方、DHHが以下のツイートを発信しました。 Hotwire aka NEW MAGIC is finally here: An alternative approach to building modern web applications without using much JavaScript by sending HTML instead of JSON over the wire. This includes our brand-new Turbo framework and pairs with Stimulus 2.0 😍🎉🥂 https://t.co/Pa4EG8Av5E — DHH (@dhh) December 22, 2020 取りあえず様子を知りたかったのでDHHのツイートを追ってみました。お気づきの点がありましたら@hachi8833までお知ら</p> <ul class="entrysearch-entry-tags"> <li><a href="/q/rails" data-gtm-click-label="entry-search-result-item-tag">rails</a></li> <li><a href="/q/Hotwire" data-gtm-click-label="entry-search-result-item-tag">Hotwire</a></li> <li><a href="/q/ruby" data-gtm-click-label="entry-search-result-item-tag">ruby</a></li> <li><a href="/q/javascript" data-gtm-click-label="entry-search-result-item-tag">javascript</a></li> <li><a href="/q/DHH" data-gtm-click-label="entry-search-result-item-tag">DHH</a></li> <li><a href="/q/%E3%81%82%E3%81%A8%E3%81%A7%E8%AA%AD%E3%82%80" data-gtm-click-label="entry-search-result-item-tag">あとで読む</a></li> <li><a href="/q/techracho" data-gtm-click-label="entry-search-result-item-tag">techracho</a></li> <li><a href="/q/html" data-gtm-click-label="entry-search-result-item-tag">html</a></li> <li><a href="/q/WebSocket" data-gtm-click-label="entry-search-result-item-tag">WebSocket</a></li> <li><a href="/q/webpack" data-gtm-click-label="entry-search-result-item-tag">webpack</a></li> </ul> <div class="following-bookmarks-container js-following-bookmarks-container" data-entry-url="https://techracho.bpsinc.jp/hachi8833/2020_12_24/102368"> <ul class="following-bookmarks js-following-bookmarks"></ul> <script type="text/x-template" id="template-following-bookmark"> <li> <a href="{{ anchor_path }}" class="following-bookmark-link" data-gtm-label="entry-info-followingBookmarks"> <img src="{{ profile_image_url }}" alt="{{ user_name }}" class="following-bookmark-icon"> </a> <span class="following-bookmark-popup"> <span class="following-bookmark-username">{{ user_name }}</span><span class="following-bookmark-timestamp">{{ created }}</span> <span class="following-bookmark-text"> {{ #comment }}<span class="following-bookmark-comment">{{ comment }}</span>{{ /comment }} <ul class="following-bookmark-tags">{{ #tags }}<li>{{ label }}</li>{{ /tags }}</ul> </span> </span> </li> </script> </div> </div> <div class="centerarticle-entry-image-wrapper"> <a href="https://techracho.bpsinc.jp/hachi8833/2020_12_24/102368" class="centerarticle-entry-image" target="_blank" rel="noopener"> <img src="https://cdn-ak-scissors.b.st-hatena.com/image/square/5c1e9a3e4a0acea67766246f81072b0ba1a873e6/height=288;version=1;width=512/https%3A%2F%2Ftechracho.bpsinc.jp%2Fwp-content%2Fuploads%2F2020%2F12%2Fflashnews_hotwire_basecamp_rails_eyecatch-min.png" alt="速報: Basecampがリリースした「Hotwire」の概要｜TechRacho by BPS株式会社" data-gtm-click-label="entry-search-result-item-image"> </a> </div> </div> </div> </li> <li class="bookmark-item js-user-bookmark-item js-keyboard-selectable-item"> <div class="centerarticle-entry is-image-entry-unit"> <div class="js-bookmark-stock-button is-hidden"> <button class="js-bookmark-stock-button-ready readlater-button" data-gtm-click-label="entry-search-result-item-stock-button" title="あとで読む" aria-label="あとで読む" tabindex="0" type="button" data-href="https://note.com/everyleaf/n/ncc0b77578c58"><span>あとで読む</span> </button> </div> <div class="centerarticle-entry-header"> <h3 class="centerarticle-entry-title"> <a href="https://note.com/everyleaf/n/ncc0b77578c58" class="js-clickable-link js-keyboard-openable" target="_blank" rel="noopener" data-gtm-click-label="entry-search-result-item-title"> <img class="centerarticle-entry-favicon" src="https://cdn-ak2.favicon.st-hatena.com/64?url=https%3A%2F%2Fnote.com%2Feveryleaf%2Fn%2Fncc0b77578c58" alt="">万葉は Hotwire を推していきます！｜万葉 </a> </h3> <ul class="centerarticle-entry-data"> <li> <span class="centerarticle-users"> <a href="/entry/s/note.com/everyleaf/n/ncc0b77578c58" class="js-keyboard-entry-page-openable" title="万葉は Hotwire を推していきます！｜万葉 (107 ブックマーク)" data-gtm-click-label="entry-search-result-item-users"> 107 users </a> </span> </li> <li> <a href="/site/note.com/everyleaf" title="『note.com/everyleaf』の新着エントリー" data-gtm-click-label="entry-search-result-item-site-search-url"> note.com/everyleaf </a> </li> <li> <a href="/hotentry/life" data-gtm-click-label="entry-search-result-item-category">暮らし</a> </li> <li><span class="entry-contents-date">2022/06/08</span></li> </ul> </div> <div class="centerarticle-entry-contents has-image"> <div class="centerarticle-entry-item"> <p class="centerarticle-entry-summary">こんにちは、万葉で CEO & CTO をしている田中洸一です。 Rails 7 から標準になった Hotwire を、万葉では全社をあげて推していく事にしました！この記事では、その事について詳しく書こうと思います。モチベーション昨今、React や Vue.js をはじめとするフロントエンド技術が目覚ましく発展しています。新しい技術の盛り上がりは楽しく、喜ばしいことです。しかしながら、ここ最近では、少しリッチな Web アプリケーションを作成しようと思うと、フロントエンドとバックエンドの2部隊が必要になることも多くなってきました。こうなると開発自体のコストや、その後の保守・運用のコストも多くかかりますし、関わる人が多くなるとコミュニケーションコストなども増えることになります。「この中間くらい、程よくコストをかけて、ちょっとリッチな Web アプリケーションをつくる、そういう手段が</p> <ul class="entrysearch-entry-tags"> <li><a href="/q/Rails" data-gtm-click-label="entry-search-result-item-tag">Rails</a></li> <li><a href="/q/Hotwire" data-gtm-click-label="entry-search-result-item-tag">Hotwire</a></li> <li><a href="/q/%E3%81%82%E3%81%A8%E3%81%A7%E8%AA%AD%E3%82%80" data-gtm-click-label="entry-search-result-item-tag">あとで読む</a></li> <li><a href="/q/web" data-gtm-click-label="entry-search-result-item-tag">web</a></li> <li><a href="/q/ui" data-gtm-click-label="entry-search-result-item-tag">ui</a></li> <li><a href="/q/tech" data-gtm-click-label="entry-search-result-item-tag">tech</a></li> <li><a href="/q/ruby" data-gtm-click-label="entry-search-result-item-tag">ruby</a></li> <li><a href="/q/development" data-gtm-click-label="entry-search-result-item-tag">development</a></li> </ul> <div class="following-bookmarks-container js-following-bookmarks-container" data-entry-url="https://note.com/everyleaf/n/ncc0b77578c58"> <ul class="following-bookmarks js-following-bookmarks"></ul> <script type="text/x-template" id="template-following-bookmark"> <li> <a href="{{ anchor_path }}" class="following-bookmark-link" data-gtm-label="entry-info-followingBookmarks"> <img src="{{ profile_image_url }}" alt="{{ user_name }}" class="following-bookmark-icon"> </a> <span class="following-bookmark-popup"> <span class="following-bookmark-username">{{ user_name }}</span><span class="following-bookmark-timestamp">{{ created }}</span> <span class="following-bookmark-text"> {{ #comment }}<span class="following-bookmark-comment">{{ comment }}</span>{{ /comment }} <ul class="following-bookmark-tags">{{ #tags }}<li>{{ label }}</li>{{ /tags }}</ul> </span> </span> </li> </script> </div> </div> <div class="centerarticle-entry-image-wrapper"> <a href="https://note.com/everyleaf/n/ncc0b77578c58" class="centerarticle-entry-image" target="_blank" rel="noopener"> <img src="https://cdn-ak-scissors.b.st-hatena.com/image/square/03a86f4f7675686a4ab2561725f2c949f164a5f0/height=288;version=1;width=512/https%3A%2F%2Fassets.st-note.com%2Fproduction%2Fuploads%2Fimages%2F80244829%2Frectangle_large_type_2_c4c06b48c17cb8f704cd150a6fac2c84.jpeg%3Ffit%3Dbounds%26quality%3D85%26width%3D1280" alt="万葉は Hotwire を推していきます！｜万葉" data-gtm-click-label="entry-search-result-item-image"> </a> </div> </div> </div> </li> <li class="bookmark-item js-user-bookmark-item js-keyboard-selectable-item"> <div class="centerarticle-entry "> <div class="js-bookmark-stock-button is-hidden"> <button class="js-bookmark-stock-button-ready readlater-button" data-gtm-click-label="entry-search-result-item-stock-button" title="あとで読む" aria-label="あとで読む" tabindex="0" type="button" data-href="https://hotwire-n-next.castle104.com/"><span>あとで読む</span> </button> </div> <div class="centerarticle-entry-header"> <h3 class="centerarticle-entry-title"> <a href="https://hotwire-n-next.castle104.com/" class="js-clickable-link js-keyboard-openable" target="_blank" rel="noopener" data-gtm-click-label="entry-search-result-item-title"> <img class="centerarticle-entry-favicon" src="https://cdn-ak2.favicon.st-hatena.com/64?url=https%3A%2F%2Fhotwire-n-next.castle104.com%2F" alt="">Hotwire for Frontend devs </a> </h3> <ul class="centerarticle-entry-data"> <li> <span class="centerarticle-users"> <a href="/entry/s/hotwire-n-next.castle104.com/" class="js-keyboard-entry-page-openable" title="Hotwire for Frontend devs (107 ブックマーク)" data-gtm-click-label="entry-search-result-item-users"> 107 users </a> </span> </li> <li> <a href="/site/hotwire-n-next.castle104.com/" title="『hotwire-n-next.castle104.com』の新着エントリー" data-gtm-click-label="entry-search-result-item-site-search-url"> hotwire-n-next.castle104.com </a> </li> <li> <a href="/hotentry/it" data-gtm-click-label="entry-search-result-item-category">テクノロジー</a> </li> <li><span class="entry-contents-date">2024/10/23</span></li> </ul> </div> <div class="centerarticle-entry-contents "> <div class="centerarticle-entry-item"> <p class="centerarticle-entry-summary">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</p> <ul class="entrysearch-entry-tags"> <li><a href="/q/hotwire" data-gtm-click-label="entry-search-result-item-tag">hotwire</a></li> <li><a href="/q/rails" data-gtm-click-label="entry-search-result-item-tag">rails</a></li> <li><a href="/q/%E3%81%82%E3%81%A8%E3%81%A7%E8%AA%AD%E3%82%80" data-gtm-click-label="entry-search-result-item-tag">あとで読む</a></li> <li><a href="/q/%E3%83%95%E3%83%AD%E3%83%B3%E3%83%88%E3%82%A8%E3%83%B3%E3%83%89" data-gtm-click-label="entry-search-result-item-tag">フロントエンド</a></li> <li><a href="/q/React" data-gtm-click-label="entry-search-result-item-tag">React</a></li> <li><a href="/q/ui" data-gtm-click-label="entry-search-result-item-tag">ui</a></li> <li><a href="/q/%E8%80%83%E5%AF%9F" data-gtm-click-label="entry-search-result-item-tag">考察</a></li> <li><a href="/q/ruby" data-gtm-click-label="entry-search-result-item-tag">ruby</a></li> </ul> <div class="following-bookmarks-container js-following-bookmarks-container" data-entry-url="https://hotwire-n-next.castle104.com/"> <ul class="following-bookmarks js-following-bookmarks"></ul> <script type="text/x-template" id="template-following-bookmark"> <li> <a href="{{ anchor_path }}" class="following-bookmark-link" data-gtm-label="entry-info-followingBookmarks"> <img src="{{ profile_image_url }}" alt="{{ user_name }}" class="following-bookmark-icon"> </a> <span class="following-bookmark-popup"> <span class="following-bookmark-username">{{ user_name }}</span><span class="following-bookmark-timestamp">{{ created }}</span> <span class="following-bookmark-text"> {{ #comment }}<span class="following-bookmark-comment">{{ comment }}</span>{{ /comment }} <ul class="following-bookmark-tags">{{ #tags }}<li>{{ label }}</li>{{ /tags }}</ul> </span> </span> </li> </script> </div> </div> </div> </div> </li> <li class="bookmark-item js-user-bookmark-item js-keyboard-selectable-item"> <div class="centerarticle-entry is-image-entry-unit"> <div class="js-bookmark-stock-button is-hidden"> <button class="js-bookmark-stock-button-ready readlater-button" data-gtm-click-label="entry-search-result-item-stock-button" title="あとで読む" aria-label="あとで読む" tabindex="0" type="button" data-href="https://world.hey.com/dhh/rails-7-will-have-three-great-answers-to-javascript-in-2021-8d68191b"><span>あとで読む</span> </button> </div> <div class="centerarticle-entry-header"> <h3 class="centerarticle-entry-title"> <a href="https://world.hey.com/dhh/rails-7-will-have-three-great-answers-to-javascript-in-2021-8d68191b" class="js-clickable-link js-keyboard-openable" target="_blank" rel="noopener" data-gtm-click-label="entry-search-result-item-title"> <img class="centerarticle-entry-favicon" src="https://cdn-ak2.favicon.st-hatena.com/64?url=https%3A%2F%2Fworld.hey.com%2Fdhh%2Frails-7-will-have-three-great-answers-to-javascript-in-2021-8d68191b" alt="">Rails 7 will have three great answers to JavaScript in 2021+ </a> </h3> <ul class="centerarticle-entry-data"> <li> <span class="centerarticle-users"> <a href="/entry/s/world.hey.com/dhh/rails-7-will-have-three-great-answers-to-javascript-in-2021-8d68191b" class="js-keyboard-entry-page-openable" title="Rails 7 will have three great answers to JavaScript in 2021+ (107 ブックマーク)" data-gtm-click-label="entry-search-result-item-users"> 107 users </a> </span> </li> <li> <a href="/site/world.hey.com/" title="『world.hey.com』の新着エントリー" data-gtm-click-label="entry-search-result-item-site-search-url"> world.hey.com </a> </li> <li> <a href="/hotentry/it" data-gtm-click-label="entry-search-result-item-category">テクノロジー</a> </li> <li><span class="entry-contents-date">2021/09/07</span></li> </ul> </div> <div class="centerarticle-entry-contents has-image"> <div class="centerarticle-entry-item"> <p class="centerarticle-entry-summary">September 6, 2021 Rails 7 will have three great answers to JavaScript in 2021+ Rails has been unapologetically full stack since the beginning. We've continuously sought to include ever-more default answers to all the major infrastructure questions posed by modern web development. From talking to a database, to sending and receiving emails, to connecting web sockets, to rendering HTML, to integrati</p> <ul class="entrysearch-entry-tags"> <li><a href="/q/rails" data-gtm-click-label="entry-search-result-item-tag">rails</a></li> <li><a href="/q/javascript" data-gtm-click-label="entry-search-result-item-tag">javascript</a></li> <li><a href="/q/%E3%81%82%E3%81%A8%E3%81%A7%E8%AA%AD%E3%82%80" data-gtm-click-label="entry-search-result-item-tag">あとで読む</a></li> <li><a href="/q/Hotwire" data-gtm-click-label="entry-search-result-item-tag">Hotwire</a></li> <li><a href="/q/ruby" data-gtm-click-label="entry-search-result-item-tag">ruby</a></li> <li><a href="/q/%E3%83%97%E3%83%AD%E3%82%B0%E3%83%A9%E3%83%9F%E3%83%B3%E3%82%B0" data-gtm-click-label="entry-search-result-item-tag">プログラミング</a></li> </ul> <div class="following-bookmarks-container js-following-bookmarks-container" data-entry-url="https://world.hey.com/dhh/rails-7-will-have-three-great-answers-to-javascript-in-2021-8d68191b"> <ul class="following-bookmarks js-following-bookmarks"></ul> <script type="text/x-template" id="template-following-bookmark"> <li> <a href="{{ anchor_path }}" class="following-bookmark-link" data-gtm-label="entry-info-followingBookmarks"> <img src="{{ profile_image_url }}" alt="{{ user_name }}" class="following-bookmark-icon"> </a> <span class="following-bookmark-popup"> <span class="following-bookmark-username">{{ user_name }}</span><span class="following-bookmark-timestamp">{{ created }}</span> <span class="following-bookmark-text"> {{ #comment }}<span class="following-bookmark-comment">{{ comment }}</span>{{ /comment }} <ul class="following-bookmark-tags">{{ #tags }}<li>{{ label }}</li>{{ /tags }}</ul> </span> </span> </li> </script> </div> </div> <div class="centerarticle-entry-image-wrapper"> <a href="https://world.hey.com/dhh/rails-7-will-have-three-great-answers-to-javascript-in-2021-8d68191b" class="centerarticle-entry-image" target="_blank" rel="noopener"> <img src="https://cdn-ak-scissors.b.st-hatena.com/image/square/9c7988a248ca4df16431f085aeeb9f3504d0df78/height=288;version=1;width=512/https%3A%2F%2Fworld.hey.com%2Fdhh%2Favatar-fb368b1ee9b185dc2a09b03eabdb61678dd55244" alt="Rails 7 will have three great answers to JavaScript in 2021+" data-gtm-click-label="entry-search-result-item-image"> </a> </div> </div> </div> </li> <li class="bookmark-item js-user-bookmark-item js-keyboard-selectable-item"> <div class="centerarticle-entry is-image-entry-unit"> <div class="js-bookmark-stock-button is-hidden"> <button class="js-bookmark-stock-button-ready readlater-button" data-gtm-click-label="entry-search-result-item-stock-button" title="あとで読む" aria-label="あとで読む" tabindex="0" type="button" data-href="https://techracho.bpsinc.jp/hachi8833/2024_12_26/147538"><span>あとで読む</span> </button> </div> <div class="centerarticle-entry-header"> <h3 class="centerarticle-entry-title"> <a href="https://techracho.bpsinc.jp/hachi8833/2024_12_26/147538" class="js-clickable-link js-keyboard-openable" target="_blank" rel="noopener" data-gtm-click-label="entry-search-result-item-title"> <img class="centerarticle-entry-favicon" src="https://cdn-ak2.favicon.st-hatena.com/64?url=https%3A%2F%2Ftechracho.bpsinc.jp%2Fhachi8833%2F2024_12_26%2F147538" alt="">今Rails 8アプリを作るなら何も足さないバニラ味にしよう（翻訳）｜TechRacho by BPS株式会社 </a> </h3> <ul class="centerarticle-entry-data"> <li> <span class="centerarticle-users"> <a href="/entry/s/techracho.bpsinc.jp/hachi8833/2024_12_26/147538" class="js-keyboard-entry-page-openable" title="今Rails 8アプリを作るなら何も足さないバニラ味にしよう（翻訳）｜TechRacho by BPS株式会社 (93 ブックマーク)" data-gtm-click-label="entry-search-result-item-users"> 93 users </a> </span> </li> <li> <a href="/site/techracho.bpsinc.jp/" title="『techracho.bpsinc.jp』の新着エントリー" data-gtm-click-label="entry-search-result-item-site-search-url"> techracho.bpsinc.jp </a> </li> <li> <a href="/hotentry/it" data-gtm-click-label="entry-search-result-item-category">テクノロジー</a> </li> <li><span class="entry-contents-date">2024/12/26</span></li> </ul> </div> <div class="centerarticle-entry-contents has-image"> <div class="centerarticle-entry-item"> <p class="centerarticle-entry-summary">概要原著者の許諾を得て翻訳・公開いたします。英語記事: 37signals Dev — A vanilla Rails stack is plenty 原文公開日: 2024/12/20 原著者: Jorge Manrubia -- 37signalsの首席エンジニアです日本語タイトルは内容に即したものにしました。今の世の中で、Railsアプリを新しく作るゆとりに恵まれているならば、バニラアプリとして作る1、すなわち依存関係を何も足さないのが、私たちからのオススメです。 Rubyの依存関係は、よほどの理由がない限りRailsに追加しない。 Railsで生成したGemfileは、極力手つかずのままにしておく。 JavaScriptの依存関係をRailsに追加するのは、Ruby依存関係の場合以上に慎重に検討する。 Reactなどのフロントエンドフレームワークも、それらにJSONを送り込</p> <ul class="entrysearch-entry-tags"> <li><a href="/q/rails" data-gtm-click-label="entry-search-result-item-tag">rails</a></li> <li><a href="/q/Hotwire" data-gtm-click-label="entry-search-result-item-tag">Hotwire</a></li> <li><a href="/q/%E3%81%82%E3%81%A8%E3%81%A7%E8%AA%AD%E3%82%80" data-gtm-click-label="entry-search-result-item-tag">あとで読む</a></li> <li><a href="/q/ruby" data-gtm-click-label="entry-search-result-item-tag">ruby</a></li> <li><a href="/q/TechRacho" data-gtm-click-label="entry-search-result-item-tag">TechRacho</a></li> <li><a href="/q/%E7%BF%BB%E8%A8%B3" data-gtm-click-label="entry-search-result-item-tag">翻訳</a></li> <li><a href="/q/testing" data-gtm-click-label="entry-search-result-item-tag">testing</a></li> <li><a href="/q/development" data-gtm-click-label="entry-search-result-item-tag">development</a></li> </ul> <div class="following-bookmarks-container js-following-bookmarks-container" data-entry-url="https://techracho.bpsinc.jp/hachi8833/2024_12_26/147538"> <ul class="following-bookmarks js-following-bookmarks"></ul> <script type="text/x-template" id="template-following-bookmark"> <li> <a href="{{ anchor_path }}" class="following-bookmark-link" data-gtm-label="entry-info-followingBookmarks"> <img src="{{ profile_image_url }}" alt="{{ user_name }}" class="following-bookmark-icon"> </a> <span class="following-bookmark-popup"> <span class="following-bookmark-username">{{ user_name }}</span><span class="following-bookmark-timestamp">{{ created }}</span> <span class="following-bookmark-text"> {{ #comment }}<span class="following-bookmark-comment">{{ comment }}</span>{{ /comment }} <ul class="following-bookmark-tags">{{ #tags }}<li>{{ label }}</li>{{ /tags }}</ul> </span> </span> </li> </script> </div> </div> <div class="centerarticle-entry-image-wrapper"> <a href="https://techracho.bpsinc.jp/hachi8833/2024_12_26/147538" class="centerarticle-entry-image" target="_blank" rel="noopener"> <img src="https://cdn-ak-scissors.b.st-hatena.com/image/square/b4a1d32ece011b401a5b32290b8c8ad526969899/height=288;version=1;width=512/https%3A%2F%2Ftechracho.bpsinc.jp%2Fwp-content%2Fuploads%2F2024%2F12%2Frails_vanilla_is_plenty_eyecatch2-min.png" alt="今Rails 8アプリを作るなら何も足さないバニラ味にしよう（翻訳）｜TechRacho by BPS株式会社" data-gtm-click-label="entry-search-result-item-image"> </a> </div> </div> </div> </li> <li class="bookmark-item js-user-bookmark-item js-keyboard-selectable-item"> <div class="centerarticle-entry is-image-entry-unit"> <div class="js-bookmark-stock-button is-hidden"> <button class="js-bookmark-stock-button-ready readlater-button" data-gtm-click-label="entry-search-result-item-stock-button" title="あとで読む" aria-label="あとで読む" tabindex="0" type="button" data-href="https://speakerdeck.com/nay3/hotwireguang-nodao-tostimulus"><span>あとで読む</span> </button> </div> <div class="centerarticle-entry-header"> <h3 class="centerarticle-entry-title"> <a href="https://speakerdeck.com/nay3/hotwireguang-nodao-tostimulus" class="js-clickable-link js-keyboard-openable" target="_blank" rel="noopener" data-gtm-click-label="entry-search-result-item-title"> <img class="centerarticle-entry-favicon" src="https://cdn-ak2.favicon.st-hatena.com/64?url=https%3A%2F%2Fspeakerdeck.com%2Fnay3%2Fhotwireguang-nodao-tostimulus" alt="">Hotwire光の道とStimulus </a> </h3> <ul class="centerarticle-entry-data"> <li> <span class="centerarticle-users"> <a href="/entry/s/speakerdeck.com/nay3/hotwireguang-nodao-tostimulus" class="js-keyboard-entry-page-openable" title="Hotwire光の道とStimulus (87 ブックマーク)" data-gtm-click-label="entry-search-result-item-users"> 87 users </a> </span> </li> <li> <a href="/site/speakerdeck.com/nay3" title="『speakerdeck.com/nay3』の新着エントリー" data-gtm-click-label="entry-search-result-item-site-search-url"> speakerdeck.com/nay3 </a> </li> <li> <a href="/hotentry/it" data-gtm-click-label="entry-search-result-item-category">テクノロジー</a> </li> <li><span class="entry-contents-date">2024/10/26</span></li> </ul> </div> <div class="centerarticle-entry-contents has-image"> <div class="centerarticle-entry-item"> <p class="centerarticle-entry-summary">Kaigi on Rails 2024 のトーク資料です。Hotwireを活用するための指針をStimulusの側から整理しています。</p> <ul class="entrysearch-entry-tags"> <li><a href="/q/hotwire" data-gtm-click-label="entry-search-result-item-tag">hotwire</a></li> <li><a href="/q/Rails" data-gtm-click-label="entry-search-result-item-tag">Rails</a></li> <li><a href="/q/%E3%81%82%E3%81%A8%E3%81%A7%E8%AA%AD%E3%82%80" data-gtm-click-label="entry-search-result-item-tag">あとで読む</a></li> <li><a href="/q/slide" data-gtm-click-label="entry-search-result-item-tag">slide</a></li> <li><a href="/q/tech" data-gtm-click-label="entry-search-result-item-tag">tech</a></li> <li><a href="/q/web" data-gtm-click-label="entry-search-result-item-tag">web</a></li> </ul> <div class="following-bookmarks-container js-following-bookmarks-container" data-entry-url="https://speakerdeck.com/nay3/hotwireguang-nodao-tostimulus"> <ul class="following-bookmarks js-following-bookmarks"></ul> <script type="text/x-template" id="template-following-bookmark"> <li> <a href="{{ anchor_path }}" class="following-bookmark-link" data-gtm-label="entry-info-followingBookmarks"> <img src="{{ profile_image_url }}" alt="{{ user_name }}" class="following-bookmark-icon"> </a> <span class="following-bookmark-popup"> <span class="following-bookmark-username">{{ user_name }}</span><span class="following-bookmark-timestamp">{{ created }}</span> <span class="following-bookmark-text"> {{ #comment }}<span class="following-bookmark-comment">{{ comment }}</span>{{ /comment }} <ul class="following-bookmark-tags">{{ #tags }}<li>{{ label }}</li>{{ /tags }}</ul> </span> </span> </li> </script> </div> </div> <div class="centerarticle-entry-image-wrapper"> <a href="https://speakerdeck.com/nay3/hotwireguang-nodao-tostimulus" class="centerarticle-entry-image" target="_blank" rel="noopener"> <img src="https://cdn-ak-scissors.b.st-hatena.com/image/square/5835a01a0dc817f61a4e8000e57590aac7fcce33/height=288;version=1;width=512/https%3A%2F%2Ffiles.speakerdeck.com%2Fpresentations%2F5f6354cecf46433e8f1024f7490c91a1%2Fslide_0.jpg%3F32356344" alt="Hotwire光の道とStimulus" data-gtm-click-label="entry-search-result-item-image"> </a> </div> </div> </div> </li> <li class="bookmark-item js-user-bookmark-item js-keyboard-selectable-item"> <div class="centerarticle-entry is-image-entry-unit"> <div class="js-bookmark-stock-button is-hidden"> <button class="js-bookmark-stock-button-ready readlater-button" data-gtm-click-label="entry-search-result-item-stock-button" title="あとで読む" aria-label="あとで読む" tabindex="0" type="button" data-href="https://zenn.dev/naofumik/articles/4479324c468b65"><span>あとで読む</span> </button> </div> <div class="centerarticle-entry-header"> <h3 class="centerarticle-entry-title"> <a href="https://zenn.dev/naofumik/articles/4479324c468b65" class="js-clickable-link js-keyboard-openable" target="_blank" rel="noopener" data-gtm-click-label="entry-search-result-item-title"> <img class="centerarticle-entry-favicon" src="https://cdn-ak2.favicon.st-hatena.com/64?url=https%3A%2F%2Fzenn.dev%2Fnaofumik%2Farticles%2F4479324c468b65" alt="">Next.jsと比較しながらHotwireを理解するサイト: "Hotwire for Frontend Developers" </a> </h3> <ul class="centerarticle-entry-data"> <li> <span class="centerarticle-users"> <a href="/entry/s/zenn.dev/naofumik/articles/4479324c468b65" class="js-keyboard-entry-page-openable" title="Next.jsと比較しながらHotwireを理解するサイト: "Hotwire for Frontend Developers" (79 ブックマーク)" data-gtm-click-label="entry-search-result-item-users"> 79 users </a> </span> </li> <li> <a href="/site/zenn.dev/naofumik" title="『zenn.dev/naofumik』の新着エントリー" data-gtm-click-label="entry-search-result-item-site-search-url"> zenn.dev/naofumik </a> </li> <li> <a href="/hotentry/it" data-gtm-click-label="entry-search-result-item-category">テクノロジー</a> </li> <li><span class="entry-contents-date">2024/10/23</span></li> </ul> </div> <div class="centerarticle-entry-contents has-image"> <div class="centerarticle-entry-item"> <p class="centerarticle-entry-summary">ここ３ヶ月間ほど、"Hotwire for Frontend Developers"「フロントエンドエンジニアのためのHotwire入門」というウェブサイトを作っていました。（ベータ版として公開していました） HotwireとNext.jsをちゃんと見てから比較してもらいたいというのが最大の目的で、同じUIをHotwireのとNext.jsで作成し、デモを動かしたり、コードを見たりしながら比較してもらおうというのが主旨です。同じUIをNext.jsのPages RouterとApp Routerで作っているものもありますので、この比較もできます。結構コンテンツが多いので、Zennではこれから少しずつ内容も紹介していきたいと思います。まずはご覧ください！ "Hotwire for Frontend Developers"</p> <ul class="entrysearch-entry-tags"> <li><a href="/q/next.js" data-gtm-click-label="entry-search-result-item-tag">next.js</a></li> <li><a href="/q/%E3%81%82%E3%81%A8%E3%81%A7%E8%AA%AD%E3%82%80" data-gtm-click-label="entry-search-result-item-tag">あとで読む</a></li> <li><a href="/q/rails" data-gtm-click-label="entry-search-result-item-tag">rails</a></li> <li><a href="/q/techfeed" data-gtm-click-label="entry-search-result-item-tag">techfeed</a></li> <li><a href="/q/UI" data-gtm-click-label="entry-search-result-item-tag">UI</a></li> </ul> <div class="following-bookmarks-container js-following-bookmarks-container" data-entry-url="https://zenn.dev/naofumik/articles/4479324c468b65"> <ul class="following-bookmarks js-following-bookmarks"></ul> <script type="text/x-template" id="template-following-bookmark"> <li> <a href="{{ anchor_path }}" class="following-bookmark-link" data-gtm-label="entry-info-followingBookmarks"> <img src="{{ profile_image_url }}" alt="{{ user_name }}" class="following-bookmark-icon"> </a> <span class="following-bookmark-popup"> <span class="following-bookmark-username">{{ user_name }}</span><span class="following-bookmark-timestamp">{{ created }}</span> <span class="following-bookmark-text"> {{ #comment }}<span class="following-bookmark-comment">{{ comment }}</span>{{ /comment }} <ul class="following-bookmark-tags">{{ #tags }}<li>{{ label }}</li>{{ /tags }}</ul> </span> </span> </li> </script> </div> </div> <div class="centerarticle-entry-image-wrapper"> <a href="https://zenn.dev/naofumik/articles/4479324c468b65" class="centerarticle-entry-image" target="_blank" rel="noopener"> <img src="https://cdn-ak-scissors.b.st-hatena.com/image/square/6a7ff8c2e1518d99943e7646ec7da9827b137591/height=288;version=1;width=512/https%3A%2F%2Fres.cloudinary.com%2Fzenn%2Fimage%2Fupload%2Fs--rI26z1GZ--%2Fc_fit%252Cg_north_west%252Cl_text%3Anotosansjp-medium.otf_55%3ANext.js%2525E3%252581%2525A8%2525E6%2525AF%252594%2525E8%2525BC%252583%2525E3%252581%252597%2525E3%252581%2525AA%2525E3%252581%25258C%2525E3%252582%252589Hotwire%2525E3%252582%252592%2525E7%252590%252586%2525E8%2525A7%2525A3%2525E3%252581%252599%2525E3%252582%25258B%2525E3%252582%2525B5%2525E3%252582%2525A4%2525E3%252583%252588%25253A%252520%252522Hotwire%252520for%252520Frontend%252520Deve...%252Cw_1010%252Cx_90%252Cy_100%2Fg_south_west%252Cl_text%3Anotosansjp-medium.otf_37%3ANaofumi%252Cx_203%252Cy_121%2Fg_south_west%252Ch_90%252Cl_fetch%3AaHR0cHM6Ly9saDMuZ29vZ2xldXNlcmNvbnRlbnQuY29tL2EvQUxtNXd1M2REcDFoU0toZ2VzbmhuSl9mQmNyYU1vNnR1dHJrWUYyY3hld2JGUT1zOTYtYw%3D%3D%252Cr_max%252Cw_90%252Cx_87%252Cy_95%2Fv1627283836%2Fdefault%2Fog-base-w1200-v2.png" alt="Next.jsと比較しながらHotwireを理解するサイト: "Hotwire for Frontend Developers"" data-gtm-click-label="entry-search-result-item-image"> </a> </div> </div> </div> </li> <li class="bookmark-item js-user-bookmark-item js-keyboard-selectable-item"> <div class="centerarticle-entry is-image-entry-unit"> <div class="js-bookmark-stock-button is-hidden"> <button class="js-bookmark-stock-button-ready readlater-button" data-gtm-click-label="entry-search-result-item-stock-button" title="あとで読む" aria-label="あとで読む" tabindex="0" type="button" data-href="https://speakerdeck.com/nay3/hotwirede-nashe-ji-wozhui-qiu-site-webzhi-zhi-ju-nixing-kizhao-itahua"><span>あとで読む</span> </button> </div> <div class="centerarticle-entry-header"> <h3 class="centerarticle-entry-title"> <a href="https://speakerdeck.com/nay3/hotwirede-nashe-ji-wozhui-qiu-site-webzhi-zhi-ju-nixing-kizhao-itahua" class="js-clickable-link js-keyboard-openable" target="_blank" rel="noopener" data-gtm-click-label="entry-search-result-item-title"> <img class="centerarticle-entry-favicon" src="https://cdn-ak2.favicon.st-hatena.com/64?url=https%3A%2F%2Fspeakerdeck.com%2Fnay3%2Fhotwirede-nashe-ji-wozhui-qiu-site-webzhi-zhi-ju-nixing-kizhao-itahua" alt="">Hotwire的な設計を追求して「Web紙芝居」に行き着いた話 </a> </h3> <ul class="centerarticle-entry-data"> <li> <span class="centerarticle-users"> <a href="/entry/s/speakerdeck.com/nay3/hotwirede-nashe-ji-wozhui-qiu-site-webzhi-zhi-ju-nixing-kizhao-itahua" class="js-keyboard-entry-page-openable" title="Hotwire的な設計を追求して「Web紙芝居」に行き着いた話 (72 ブックマーク)" data-gtm-click-label="entry-search-result-item-users"> 72 users </a> </span> </li> <li> <a href="/site/speakerdeck.com/nay3" title="『speakerdeck.com/nay3』の新着エントリー" data-gtm-click-label="entry-search-result-item-site-search-url"> speakerdeck.com/nay3 </a> </li> <li> <a href="/hotentry/it" data-gtm-click-label="entry-search-result-item-category">テクノロジー</a> </li> <li><span class="entry-contents-date">2023/10/28</span></li> </ul> </div> <div class="centerarticle-entry-contents has-image"> <div class="centerarticle-entry-item"> <p class="centerarticle-entry-summary">Kaigi on Rails 2023での「Hotwire的な設計を追求して「Web紙芝居」に行き着いた話」のトーク資料です。</p> <ul class="entrysearch-entry-tags"> <li><a href="/q/hotwire" data-gtm-click-label="entry-search-result-item-tag">hotwire</a></li> <li><a href="/q/Rails" data-gtm-click-label="entry-search-result-item-tag">Rails</a></li> <li><a href="/q/%E3%81%82%E3%81%A8%E3%81%A7%E8%AA%AD%E3%82%80" data-gtm-click-label="entry-search-result-item-tag">あとで読む</a></li> <li><a href="/q/%E8%A8%AD%E8%A8%88" data-gtm-click-label="entry-search-result-item-tag">設計</a></li> <li><a href="/q/%E9%96%8B%E7%99%BA" data-gtm-click-label="entry-search-result-item-tag">開発</a></li> <li><a href="/q/slide" data-gtm-click-label="entry-search-result-item-tag">slide</a></li> <li><a href="/q/article" data-gtm-click-label="entry-search-result-item-tag">article</a></li> </ul> <div class="following-bookmarks-container js-following-bookmarks-container" data-entry-url="https://speakerdeck.com/nay3/hotwirede-nashe-ji-wozhui-qiu-site-webzhi-zhi-ju-nixing-kizhao-itahua"> <ul class="following-bookmarks js-following-bookmarks"></ul> <script type="text/x-template" id="template-following-bookmark"> <li> <a href="{{ anchor_path }}" class="following-bookmark-link" data-gtm-label="entry-info-followingBookmarks"> <img src="{{ profile_image_url }}" alt="{{ user_name }}" class="following-bookmark-icon"> </a> <span class="following-bookmark-popup"> <span class="following-bookmark-username">{{ user_name }}</span><span class="following-bookmark-timestamp">{{ created }}</span> <span class="following-bookmark-text"> {{ #comment }}<span class="following-bookmark-comment">{{ comment }}</span>{{ /comment }} <ul class="following-bookmark-tags">{{ #tags }}<li>{{ label }}</li>{{ /tags }}</ul> </span> </span> </li> </script> </div> </div> <div class="centerarticle-entry-image-wrapper"> <a href="https://speakerdeck.com/nay3/hotwirede-nashe-ji-wozhui-qiu-site-webzhi-zhi-ju-nixing-kizhao-itahua" class="centerarticle-entry-image" target="_blank" rel="noopener"> <img src="https://cdn-ak-scissors.b.st-hatena.com/image/square/af0a652aa080126c0eba0a287817d0ec8b9276df/height=288;version=1;width=512/https%3A%2F%2Ffiles.speakerdeck.com%2Fpresentations%2Fbb3b1376947a4074877c40bec22d3cf3%2Fslide_0.jpg%3F27607241" alt="Hotwire的な設計を追求して「Web紙芝居」に行き着いた話" data-gtm-click-label="entry-search-result-item-image"> </a> </div> </div> </div> </li> <li class="bookmark-item js-user-bookmark-item js-keyboard-selectable-item"> <div class="centerarticle-entry is-image-entry-unit"> <div class="js-bookmark-stock-button is-hidden"> <button class="js-bookmark-stock-button-ready readlater-button" data-gtm-click-label="entry-search-result-item-stock-button" title="あとで読む" aria-label="あとで読む" tabindex="0" type="button" data-href="https://techracho.bpsinc.jp/hachi8833/2021_06_09/108495"><span>あとで読む</span> </button> </div> <div class="centerarticle-entry-header"> <h3 class="centerarticle-entry-title"> <a href="https://techracho.bpsinc.jp/hachi8833/2021_06_09/108495" class="js-clickable-link js-keyboard-openable" target="_blank" rel="noopener" data-gtm-click-label="entry-search-result-item-title"> <img class="centerarticle-entry-favicon" src="https://cdn-ak2.favicon.st-hatena.com/64?url=https%3A%2F%2Ftechracho.bpsinc.jp%2Fhachi8833%2F2021_06_09%2F108495" alt="">HotwireはRailsを「ゼロJavaScript」でリアクティブにできるか？前編（翻訳）｜TechRacho by BPS株式会社 </a> </h3> <ul class="centerarticle-entry-data"> <li> <span class="centerarticle-users"> <a href="/entry/s/techracho.bpsinc.jp/hachi8833/2021_06_09/108495" class="js-keyboard-entry-page-openable" title="HotwireはRailsを「ゼロJavaScript」でリアクティブにできるか？前編（翻訳）｜TechRacho by BPS株式会社 (64 ブックマーク)" data-gtm-click-label="entry-search-result-item-users"> 64 users </a> </span> </li> <li> <a href="/site/techracho.bpsinc.jp/" title="『techracho.bpsinc.jp』の新着エントリー" data-gtm-click-label="entry-search-result-item-site-search-url"> techracho.bpsinc.jp </a> </li> <li> <a href="/hotentry/it" data-gtm-click-label="entry-search-result-item-category">テクノロジー</a> </li> <li><span class="entry-contents-date">2021/06/09</span></li> </ul> </div> <div class="centerarticle-entry-contents has-image"> <div class="centerarticle-entry-item"> <p class="centerarticle-entry-summary">概要原著者の許諾を得て翻訳・公開いたします。英語記事: 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</p> <ul class="entrysearch-entry-tags"> <li><a href="/q/rails" data-gtm-click-label="entry-search-result-item-tag">rails</a></li> <li><a href="/q/Hotwire" data-gtm-click-label="entry-search-result-item-tag">Hotwire</a></li> <li><a href="/q/javascript" data-gtm-click-label="entry-search-result-item-tag">javascript</a></li> <li><a href="/q/ruby" data-gtm-click-label="entry-search-result-item-tag">ruby</a></li> <li><a href="/q/html" data-gtm-click-label="entry-search-result-item-tag">html</a></li> <li><a href="/q/%E9%96%8B%E7%99%BA" data-gtm-click-label="entry-search-result-item-tag">開発</a></li> </ul> <div class="following-bookmarks-container js-following-bookmarks-container" data-entry-url="https://techracho.bpsinc.jp/hachi8833/2021_06_09/108495"> <ul class="following-bookmarks js-following-bookmarks"></ul> <script type="text/x-template" id="template-following-bookmark"> <li> <a href="{{ anchor_path }}" class="following-bookmark-link" data-gtm-label="entry-info-followingBookmarks"> <img src="{{ profile_image_url }}" alt="{{ user_name }}" class="following-bookmark-icon"> </a> <span class="following-bookmark-popup"> <span class="following-bookmark-username">{{ user_name }}</span><span class="following-bookmark-timestamp">{{ created }}</span> <span class="following-bookmark-text"> {{ #comment }}<span class="following-bookmark-comment">{{ comment }}</span>{{ /comment }} <ul class="following-bookmark-tags">{{ #tags }}<li>{{ label }}</li>{{ /tags }}</ul> </span> </span> </li> </script> </div> </div> <div class="centerarticle-entry-image-wrapper"> <a href="https://techracho.bpsinc.jp/hachi8833/2021_06_09/108495" class="centerarticle-entry-image" target="_blank" rel="noopener"> <img src="https://cdn-ak-scissors.b.st-hatena.com/image/square/108121ae5f65a230b8f50d993cd3102b74beec7f/height=288;version=1;width=512/https%3A%2F%2Ftechracho.bpsinc.jp%2Fwp-content%2Fuploads%2F2021%2F06%2Freactive_rails_with_no_js_eyecatch1-min.png" alt="HotwireはRailsを「ゼロJavaScript」でリアクティブにできるか？前編（翻訳）｜TechRacho by BPS株式会社" data-gtm-click-label="entry-search-result-item-image"> </a> </div> </div> </div> </li> <li class="bookmark-item js-user-bookmark-item js-keyboard-selectable-item"> <div class="centerarticle-entry is-image-entry-unit"> <div class="js-bookmark-stock-button is-hidden"> <button class="js-bookmark-stock-button-ready readlater-button" data-gtm-click-label="entry-search-result-item-stock-button" title="あとで読む" aria-label="あとで読む" tabindex="0" type="button" data-href="https://logmi.jp/tech/articles/324219"><span>あとで読む</span> </button> </div> <div class="centerarticle-entry-header"> <h3 class="centerarticle-entry-title"> <a href="https://logmi.jp/tech/articles/324219" class="js-clickable-link js-keyboard-openable" target="_blank" rel="noopener" data-gtm-click-label="entry-search-result-item-title"> <img class="centerarticle-entry-favicon" src="https://cdn-ak2.favicon.st-hatena.com/64?url=https%3A%2F%2Flogmi.jp%2Ftech%2Farticles%2F324219" alt="">クライアント側のJavaScriptを最小限にするHotwire </a> </h3> <ul class="centerarticle-entry-data"> <li> <span class="centerarticle-users"> <a href="/entry/s/logmi.jp/tech/articles/324219" class="js-keyboard-entry-page-openable" title="クライアント側のJavaScriptを最小限にするHotwire (62 ブックマーク)" data-gtm-click-label="entry-search-result-item-users"> 62 users </a> </span> </li> <li> <a href="/site/logmi.jp/" title="『logmi.jp』の新着エントリー" data-gtm-click-label="entry-search-result-item-site-search-url"> logmi.jp </a> </li> <li> <a href="/hotentry/it" data-gtm-click-label="entry-search-result-item-category">テクノロジー</a> </li> <li><span class="entry-contents-date">2021/04/19</span></li> </ul> </div> <div class="centerarticle-entry-contents has-image"> <div class="centerarticle-entry-item"> <p class="centerarticle-entry-summary">iCARE Developer Meetupは、月次で開催している株式会社iCAREが主催するエンジニア向けのLT勉強会です。18回目の今回は、Ruby on Railsをテーマに行いました。株式会社iCAREの技術顧問である前島真一氏がHotwireについて話しました。全2回。前半はHotwireのアーキテクチャとTurbolinksについて。 HotwireはWebアプリケーションを作るための新しいアプローチ前島真一氏：Hotwireについて話します。前島です。ハンドルネームはwillnetや、netwillnetです。iCAREさんをはじめとして、いろいろな会社で技術顧問をしています。空いた時間を使って、「savanna.io」というお仕事情報SNSを開発しています。savanna.ioは、これから話すHotwireを利用して作っています。 Hotwireがどんなものかを簡単に説明</p> <ul class="entrysearch-entry-tags"> <li><a href="/q/rails" data-gtm-click-label="entry-search-result-item-tag">rails</a></li> <li><a href="/q/hotwire" data-gtm-click-label="entry-search-result-item-tag">hotwire</a></li> <li><a href="/q/javascript" data-gtm-click-label="entry-search-result-item-tag">javascript</a></li> <li><a href="/q/%E3%81%82%E3%81%A8%E3%81%A7%E8%AA%AD%E3%82%80" data-gtm-click-label="entry-search-result-item-tag">あとで読む</a></li> <li><a href="/q/techfeed" data-gtm-click-label="entry-search-result-item-tag">techfeed</a></li> <li><a href="/q/ui" data-gtm-click-label="entry-search-result-item-tag">ui</a></li> </ul> <div class="following-bookmarks-container js-following-bookmarks-container" data-entry-url="https://logmi.jp/tech/articles/324219"> <ul class="following-bookmarks js-following-bookmarks"></ul> <script type="text/x-template" id="template-following-bookmark"> <li> <a href="{{ anchor_path }}" class="following-bookmark-link" data-gtm-label="entry-info-followingBookmarks"> <img src="{{ profile_image_url }}" alt="{{ user_name }}" class="following-bookmark-icon"> </a> <span class="following-bookmark-popup"> <span class="following-bookmark-username">{{ user_name }}</span><span class="following-bookmark-timestamp">{{ created }}</span> <span class="following-bookmark-text"> {{ #comment }}<span class="following-bookmark-comment">{{ comment }}</span>{{ /comment }} <ul class="following-bookmark-tags">{{ #tags }}<li>{{ label }}</li>{{ /tags }}</ul> </span> </span> </li> </script> </div> </div> <div class="centerarticle-entry-image-wrapper"> <a href="https://logmi.jp/tech/articles/324219" class="centerarticle-entry-image" target="_blank" rel="noopener"> <img src="https://cdn-ak-scissors.b.st-hatena.com/image/square/7f492324541065d8a944bebf7f235e9b828845cd/height=288;version=1;width=512/https%3A%2F%2Fimg.logmi.jp%2Farticle_images%2F778m6S491Q8V3J3QuhbKvH.png" alt="クライアント側のJavaScriptを最小限にするHotwire" data-gtm-click-label="entry-search-result-item-image"> </a> </div> </div> </div> </li> <li class="bookmark-item js-user-bookmark-item js-keyboard-selectable-item"> <div class="centerarticle-entry is-image-entry-unit"> <div class="js-bookmark-stock-button is-hidden"> <button class="js-bookmark-stock-button-ready readlater-button" data-gtm-click-label="entry-search-result-item-stock-button" title="あとで読む" aria-label="あとで読む" tabindex="0" type="button" data-href="https://speakerdeck.com/harunatsujita/hotwire-or-react"><span>あとで読む</span> </button> </div> <div class="centerarticle-entry-header"> <h3 class="centerarticle-entry-title"> <a href="https://speakerdeck.com/harunatsujita/hotwire-or-react" class="js-clickable-link js-keyboard-openable" target="_blank" rel="noopener" data-gtm-click-label="entry-search-result-item-title"> <img class="centerarticle-entry-favicon" src="https://cdn-ak2.favicon.st-hatena.com/64?url=https%3A%2F%2Fspeakerdeck.com%2Fharunatsujita%2Fhotwire-or-react" alt="">Hotwire or React? ~Reactの録画機能をHotwireに置き換えて得られた知見~ / hotwire_or_react </a> </h3> <ul class="centerarticle-entry-data"> <li> <span class="centerarticle-users"> <a href="/entry/s/speakerdeck.com/harunatsujita/hotwire-or-react" class="js-keyboard-entry-page-openable" title="Hotwire or React? ~Reactの録画機能をHotwireに置き換えて得られた知見~ / hotwire_or_react (61 ブックマーク)" data-gtm-click-label="entry-search-result-item-users"> 61 users </a> </span> </li> <li> <a href="/site/speakerdeck.com/harunatsujita" title="『speakerdeck.com/harunatsujita』の新着エントリー" data-gtm-click-label="entry-search-result-item-site-search-url"> speakerdeck.com/harunatsujita </a> </li> <li> <a href="/hotentry/it" data-gtm-click-label="entry-search-result-item-category">テクノロジー</a> </li> <li><span class="entry-contents-date">2024/10/26</span></li> </ul> </div> <div class="centerarticle-entry-contents has-image"> <div class="centerarticle-entry-item"> <p class="centerarticle-entry-summary">Hotwire or React? ~Reactの録画機能をHotwireに置き換えて得られた知見~ / hotwire_or_react</p> <ul class="entrysearch-entry-tags"> <li><a href="/q/hotwire" data-gtm-click-label="entry-search-result-item-tag">hotwire</a></li> <li><a href="/q/rails" data-gtm-click-label="entry-search-result-item-tag">rails</a></li> <li><a href="/q/react" data-gtm-click-label="entry-search-result-item-tag">react</a></li> <li><a href="/q/frontend" data-gtm-click-label="entry-search-result-item-tag">frontend</a></li> <li><a href="/q/%E3%81%82%E3%81%A8%E3%81%A7%E8%AA%AD%E3%82%80" data-gtm-click-label="entry-search-result-item-tag">あとで読む</a></li> <li><a href="/q/javascript" data-gtm-click-label="entry-search-result-item-tag">javascript</a></li> <li><a href="/q/%E8%A8%AD%E8%A8%88" data-gtm-click-label="entry-search-result-item-tag">設計</a></li> </ul> <div class="following-bookmarks-container js-following-bookmarks-container" data-entry-url="https://speakerdeck.com/harunatsujita/hotwire-or-react"> <ul class="following-bookmarks js-following-bookmarks"></ul> <script type="text/x-template" id="template-following-bookmark"> <li> <a href="{{ anchor_path }}" class="following-bookmark-link" data-gtm-label="entry-info-followingBookmarks"> <img src="{{ profile_image_url }}" alt="{{ user_name }}" class="following-bookmark-icon"> </a> <span class="following-bookmark-popup"> <span class="following-bookmark-username">{{ user_name }}</span><span class="following-bookmark-timestamp">{{ created }}</span> <span class="following-bookmark-text"> {{ #comment }}<span class="following-bookmark-comment">{{ comment }}</span>{{ /comment }} <ul class="following-bookmark-tags">{{ #tags }}<li>{{ label }}</li>{{ /tags }}</ul> </span> </span> </li> </script> </div> </div> <div class="centerarticle-entry-image-wrapper"> <a href="https://speakerdeck.com/harunatsujita/hotwire-or-react" class="centerarticle-entry-image" target="_blank" rel="noopener"> <img src="https://cdn-ak-scissors.b.st-hatena.com/image/square/125968a40fac221200707c04e3fc71b9267d26f3/height=288;version=1;width=512/https%3A%2F%2Ffiles.speakerdeck.com%2Fpresentations%2F00f9da1c11f3417c873d48aedd4f7738%2Fslide_0.jpg%3F32352388" alt="Hotwire or React? ~Reactの録画機能をHotwireに置き換えて得られた知見~ / hotwire_or_react" data-gtm-click-label="entry-search-result-item-image"> </a> </div> </div> </div> </li> <li class="bookmark-item js-user-bookmark-item js-keyboard-selectable-item"> <div class="centerarticle-entry is-image-entry-unit"> <div class="js-bookmark-stock-button is-hidden"> <button class="js-bookmark-stock-button-ready readlater-button" data-gtm-click-label="entry-search-result-item-stock-button" title="あとで読む" aria-label="あとで読む" tabindex="0" type="button" data-href="https://tech.studyplus.co.jp/entry/2022/02/21/080000"><span>あとで読む</span> </button> </div> <div class="centerarticle-entry-header"> <h3 class="centerarticle-entry-title"> <a href="https://tech.studyplus.co.jp/entry/2022/02/21/080000" class="js-clickable-link js-keyboard-openable" target="_blank" rel="noopener" data-gtm-click-label="entry-search-result-item-title"> <img class="centerarticle-entry-favicon" src="https://cdn-ak2.favicon.st-hatena.com/64?url=https%3A%2F%2Ftech.studyplus.co.jp%2Fentry%2F2022%2F02%2F21%2F080000" alt="">Rails 7 + Hotwireで実用的なSPAを作ってみた - Studyplus Engineering Blog </a> </h3> <ul class="centerarticle-entry-data"> <li> <span class="centerarticle-users"> <a href="/entry/s/tech.studyplus.co.jp/entry/2022/02/21/080000" class="js-keyboard-entry-page-openable" title="Rails 7 + Hotwireで実用的なSPAを作ってみた - Studyplus Engineering Blog (61 ブックマーク)" data-gtm-click-label="entry-search-result-item-users"> 61 users </a> </span> </li> <li> <a href="/site/tech.studyplus.co.jp/" title="『tech.studyplus.co.jp』の新着エントリー" data-gtm-click-label="entry-search-result-item-site-search-url"> tech.studyplus.co.jp </a> </li> <li> <a href="/hotentry/it" data-gtm-click-label="entry-search-result-item-category">テクノロジー</a> </li> <li><span class="entry-contents-date">2022/02/21</span></li> </ul> </div> <div class="centerarticle-entry-contents has-image"> <div class="centerarticle-entry-item"> <p class="centerarticle-entry-summary">こんにちは、サーバーグループの市川です。モバイルクライアントグループに所属していましたが、バックエンドの開発を担当することが多くなったので、サーバーグループ異動にしました。最近、Studyplusブックというサービスをリリースしました。Studyplusアプリ内で、200冊以上の参考書が読み放題で使えるサービスです。このサービスの開発にあたって、社内向けの管理画面を新規に構築したのですが、Rails 7から標準でインストールされるHotwireを利用することにしました。今回はHotwireを実際に利用する上で、どういったUIを作ればいいか試作しましたので、その話を書きます。作った画面書いたソースコード使った技術解説 Turboを理解する Turbo Frameでフレーム分割する追加フォーム (Turbo Frame) 追加処理 (Turbo Stream) 編集フォームと更</p> <ul class="entrysearch-entry-tags"> <li><a href="/q/rails" data-gtm-click-label="entry-search-result-item-tag">rails</a></li> <li><a href="/q/hotwire" data-gtm-click-label="entry-search-result-item-tag">hotwire</a></li> <li><a href="/q/SPA" data-gtm-click-label="entry-search-result-item-tag">SPA</a></li> <li><a href="/q/ruby" data-gtm-click-label="entry-search-result-item-tag">ruby</a></li> <li><a href="/q/html" data-gtm-click-label="entry-search-result-item-tag">html</a></li> </ul> <div class="following-bookmarks-container js-following-bookmarks-container" data-entry-url="https://tech.studyplus.co.jp/entry/2022/02/21/080000"> <ul class="following-bookmarks js-following-bookmarks"></ul> <script type="text/x-template" id="template-following-bookmark"> <li> <a href="{{ anchor_path }}" class="following-bookmark-link" data-gtm-label="entry-info-followingBookmarks"> <img src="{{ profile_image_url }}" alt="{{ user_name }}" class="following-bookmark-icon"> </a> <span class="following-bookmark-popup"> <span class="following-bookmark-username">{{ user_name }}</span><span class="following-bookmark-timestamp">{{ created }}</span> <span class="following-bookmark-text"> {{ #comment }}<span class="following-bookmark-comment">{{ comment }}</span>{{ /comment }} <ul class="following-bookmark-tags">{{ #tags }}<li>{{ label }}</li>{{ /tags }}</ul> </span> </span> </li> </script> </div> </div> <div class="centerarticle-entry-image-wrapper"> <a href="https://tech.studyplus.co.jp/entry/2022/02/21/080000" class="centerarticle-entry-image" target="_blank" rel="noopener"> <img src="https://cdn-ak-scissors.b.st-hatena.com/image/square/3a563bd666ee17104131db14ff7ddbf231399bac/height=288;version=1;width=512/https%3A%2F%2Fcdn.user.blog.st-hatena.com%2Fdefault_entry_og_image%2F113337225%2F1524735869490675" alt="Rails 7 + Hotwireで実用的なSPAを作ってみた - Studyplus Engineering Blog" data-gtm-click-label="entry-search-result-item-image"> </a> </div> </div> </div> </li> <li class="bookmark-item js-user-bookmark-item js-keyboard-selectable-item"> <div class="centerarticle-entry is-image-entry-unit"> <div class="js-bookmark-stock-button is-hidden"> <button class="js-bookmark-stock-button-ready readlater-button" data-gtm-click-label="entry-search-result-item-stock-button" title="あとで読む" aria-label="あとで読む" tabindex="0" type="button" data-href="https://logmi.jp/main/technology/330424"><span>あとで読む</span> </button> </div> <div class="centerarticle-entry-header"> <h3 class="centerarticle-entry-title"> <a href="https://logmi.jp/main/technology/330424" class="js-clickable-link js-keyboard-openable" target="_blank" rel="noopener" data-gtm-click-label="entry-search-result-item-title"> <img class="centerarticle-entry-favicon" src="https://cdn-ak2.favicon.st-hatena.com/64?url=https%3A%2F%2Flogmi.jp%2Fmain%2Ftechnology%2F330424" alt="">「作りたいものをいかに早く完成させるかが正義」　まつもとゆきひろ氏が語る、ソフトウェア開発におけるベロシティの重要性 | ログミーBusiness </a> </h3> <ul class="centerarticle-entry-data"> <li> <span class="centerarticle-users"> <a href="/entry/s/logmi.jp/main/technology/330424" class="js-keyboard-entry-page-openable" title="「作りたいものをいかに早く完成させるかが正義」　まつもとゆきひろ氏が語る、ソフトウェア開発におけるベロシティの重要性 | ログミーBusiness (59 ブックマーク)" data-gtm-click-label="entry-search-result-item-users"> 59 users </a> </span> </li> <li> <a href="/site/logmi.jp/" title="『logmi.jp』の新着エントリー" data-gtm-click-label="entry-search-result-item-site-search-url"> logmi.jp </a> </li> <li> <a href="/hotentry/it" data-gtm-click-label="entry-search-result-item-category">テクノロジー</a> </li> <li><span class="entry-contents-date">2024/04/17</span></li> </ul> </div> <div class="centerarticle-entry-contents has-image"> <div class="centerarticle-entry-item"> <p class="centerarticle-entry-summary">今回のテーマは「動的型付け言語と大規模開発まつもとゆきひろ氏：こんにちは。まつもとゆきひろです。Matzチャンネル、18回目になりますね。今日は前回の続きで、「動的型付け言語と大規模開発」について話そうと思います。本当は前回放送リリースした次の日ぐらいに放送できるようにと思っていたんですけど、意外と忙しくてですね（笑）。今度、フィンランドのヘルシンキで、「Euruko」というカンファレンスが開かれるんですけれども、まだ物理で海外旅行する気にならないので、キーノートを録画しましょうという話になって、そのキーノートの準備をして、スライドを書いて、英語の講演を録画するみたいな作業をしていたら、あっという間に時間が経ってしまって、「Voicy」が後回しになってしまったというのが正直なところですね。でも、前みたいに2ヶ月も空けたりしないので、今後ともがんばろうと思います。先に決めた型をガイドに</p> <ul class="entrysearch-entry-tags"> <li><a href="/q/%E9%96%8B%E7%99%BA" data-gtm-click-label="entry-search-result-item-tag">開発</a></li> <li><a href="/q/Hotwire" data-gtm-click-label="entry-search-result-item-tag">Hotwire</a></li> <li><a href="/q/%E3%81%82%E3%81%A8%E3%81%A7%E8%AA%AD%E3%82%80" data-gtm-click-label="entry-search-result-item-tag">あとで読む</a></li> <li><a href="/q/Ruby" data-gtm-click-label="entry-search-result-item-tag">Ruby</a></li> <li><a href="/q/%E6%96%87%E5%8C%96" data-gtm-click-label="entry-search-result-item-tag">文化</a></li> <li><a href="/q/%E7%B5%84%E7%B9%94" data-gtm-click-label="entry-search-result-item-tag">組織</a></li> </ul> <div class="following-bookmarks-container js-following-bookmarks-container" data-entry-url="https://logmi.jp/main/technology/330424"> <ul class="following-bookmarks js-following-bookmarks"></ul> <script type="text/x-template" id="template-following-bookmark"> <li> <a href="{{ anchor_path }}" class="following-bookmark-link" data-gtm-label="entry-info-followingBookmarks"> <img src="{{ profile_image_url }}" alt="{{ user_name }}" class="following-bookmark-icon"> </a> <span class="following-bookmark-popup"> <span class="following-bookmark-username">{{ user_name }}</span><span class="following-bookmark-timestamp">{{ created }}</span> <span class="following-bookmark-text"> {{ #comment }}<span class="following-bookmark-comment">{{ comment }}</span>{{ /comment }} <ul class="following-bookmark-tags">{{ #tags }}<li>{{ label }}</li>{{ /tags }}</ul> </span> </span> </li> </script> </div> </div> <div class="centerarticle-entry-image-wrapper"> <a href="https://logmi.jp/main/technology/330424" class="centerarticle-entry-image" target="_blank" rel="noopener"> <img src="https://cdn-ak-scissors.b.st-hatena.com/image/square/7f701d45ad387707cba74e7c5a489d706f899fdd/height=288;version=1;width=512/https%3A%2F%2Fimages.logmi.jp%2Fmedia%2Farticle%2F330424%2Fimages%2FJptexTezoFYiURRN5Zv1g9.jpg" alt="「作りたいものをいかに早く完成させるかが正義」　まつもとゆきひろ氏が語る、ソフトウェア開発におけるベロシティの重要性 | ログミーBusiness" data-gtm-click-label="entry-search-result-item-image"> </a> </div> </div> </div> </li> <li class="bookmark-item js-user-bookmark-item js-keyboard-selectable-item"> <div class="centerarticle-entry is-image-entry-unit"> <div class="js-bookmark-stock-button is-hidden"> <button class="js-bookmark-stock-button-ready readlater-button" data-gtm-click-label="entry-search-result-item-stock-button" title="あとで読む" aria-label="あとで読む" tabindex="0" type="button" data-href="https://www.lifull.blog/entry/2021/03/04/100000"><span>あとで読む</span> </button> </div> <div class="centerarticle-entry-header"> <h3 class="centerarticle-entry-title"> <a href="https://www.lifull.blog/entry/2021/03/04/100000" class="js-clickable-link js-keyboard-openable" target="_blank" rel="noopener" data-gtm-click-label="entry-search-result-item-title"> <img class="centerarticle-entry-favicon" src="https://cdn-ak2.favicon.st-hatena.com/64?url=https%3A%2F%2Fwww.lifull.blog%2Fentry%2F2021%2F03%2F04%2F100000" alt="">HTML Centricで行きたい私たち - LIFULL Creators Blog </a> </h3> <ul class="centerarticle-entry-data"> <li> <span class="centerarticle-users"> <a href="/entry/s/www.lifull.blog/entry/2021/03/04/100000" class="js-keyboard-entry-page-openable" title="HTML Centricで行きたい私たち - LIFULL Creators Blog (58 ブックマーク)" data-gtm-click-label="entry-search-result-item-users"> 58 users </a> </span> </li> <li> <a href="/site/www.lifull.blog/" title="『www.lifull.blog』の新着エントリー" data-gtm-click-label="entry-search-result-item-site-search-url"> www.lifull.blog </a> </li> <li> <a href="/hotentry/it" data-gtm-click-label="entry-search-result-item-category">テクノロジー</a> </li> <li><span class="entry-contents-date">2021/03/04</span></li> </ul> </div> <div class="centerarticle-entry-contents has-image"> <div class="centerarticle-entry-item"> <p class="centerarticle-entry-summary">LIFULLの中島です。近頃、LIFULL HOME'Sのフロントエンド(ここではJavaScriptのみを焦点とします)もようやく進む道を見出し、そろそろ設計方針を一新しようと試みています。今回はそれについて話したいと思います。現在の私たちの課題感私たちの管理する多くのレガシーコードはDOM操作ライブラリとしてjQueryを、UI設計の格子としてBackbone.Viewのような設計方式を導入しています。 (もちろんそうでないマイクロサービスも多くありますが) 具体的なコード例を示すことこんな感じになります let Slider = Backbone.View({ events: { '.next click': 'next', '.prev click': 'prev' }, next() { this.$(...).css({left: '111px'}); }, ... }</p> <ul class="entrysearch-entry-tags"> <li><a href="/q/javascript" data-gtm-click-label="entry-search-result-item-tag">javascript</a></li> <li><a href="/q/html" data-gtm-click-label="entry-search-result-item-tag">html</a></li> <li><a href="/q/Vue" data-gtm-click-label="entry-search-result-item-tag">Vue</a></li> <li><a href="/q/DOM" data-gtm-click-label="entry-search-result-item-tag">DOM</a></li> <li><a href="/q/%E3%81%82%E3%81%A8%E3%81%A7%E8%AA%AD%E3%82%80" data-gtm-click-label="entry-search-result-item-tag">あとで読む</a></li> </ul> <div class="following-bookmarks-container js-following-bookmarks-container" data-entry-url="https://www.lifull.blog/entry/2021/03/04/100000"> <ul class="following-bookmarks js-following-bookmarks"></ul> <script type="text/x-template" id="template-following-bookmark"> <li> <a href="{{ anchor_path }}" class="following-bookmark-link" data-gtm-label="entry-info-followingBookmarks"> <img src="{{ profile_image_url }}" alt="{{ user_name }}" class="following-bookmark-icon"> </a> <span class="following-bookmark-popup"> <span class="following-bookmark-username">{{ user_name }}</span><span class="following-bookmark-timestamp">{{ created }}</span> <span class="following-bookmark-text"> {{ #comment }}<span class="following-bookmark-comment">{{ comment }}</span>{{ /comment }} <ul class="following-bookmark-tags">{{ #tags }}<li>{{ label }}</li>{{ /tags }}</ul> </span> </span> </li> </script> </div> </div> <div class="centerarticle-entry-image-wrapper"> <a href="https://www.lifull.blog/entry/2021/03/04/100000" class="centerarticle-entry-image" target="_blank" rel="noopener"> <img src="https://cdn-ak-scissors.b.st-hatena.com/image/square/cc34862568546698714329702e954a1154a2da7c/height=288;version=1;width=512/https%3A%2F%2Fogimage.blog.st-hatena.com%2F11696248318758806388%2F26006613696667109%2F1614826382" alt="HTML Centricで行きたい私たち - LIFULL Creators Blog" data-gtm-click-label="entry-search-result-item-image"> </a> </div> </div> </div> </li> <li class="bookmark-item js-user-bookmark-item js-keyboard-selectable-item"> <div class="centerarticle-entry is-image-entry-unit"> <div class="js-bookmark-stock-button is-hidden"> <button class="js-bookmark-stock-button-ready readlater-button" data-gtm-click-label="entry-search-result-item-stock-button" title="あとで読む" aria-label="あとで読む" tabindex="0" type="button" data-href="https://zenn.dev/mast1ff/articles/3d6f4b9e4a38bb"><span>あとで読む</span> </button> </div> <div class="centerarticle-entry-header"> <h3 class="centerarticle-entry-title"> <a href="https://zenn.dev/mast1ff/articles/3d6f4b9e4a38bb" class="js-clickable-link js-keyboard-openable" target="_blank" rel="noopener" data-gtm-click-label="entry-search-result-item-title"> <img class="centerarticle-entry-favicon" src="https://cdn-ak2.favicon.st-hatena.com/64?url=https%3A%2F%2Fzenn.dev%2Fmast1ff%2Farticles%2F3d6f4b9e4a38bb" alt="">Hotwireのススメ ~React製SPAをフルSSRでStimulusとTurboに書き換えた話~ </a> </h3> <ul class="centerarticle-entry-data"> <li> <span class="centerarticle-users"> <a href="/entry/s/zenn.dev/mast1ff/articles/3d6f4b9e4a38bb" class="js-keyboard-entry-page-openable" title="Hotwireのススメ ~React製SPAをフルSSRでStimulusとTurboに書き換えた話~ (55 ブックマーク)" data-gtm-click-label="entry-search-result-item-users"> 55 users </a> </span> </li> <li> <a href="/site/zenn.dev/mast1ff" title="『zenn.dev/mast1ff』の新着エントリー" data-gtm-click-label="entry-search-result-item-site-search-url"> zenn.dev/mast1ff </a> </li> <li> <a href="/hotentry/it" data-gtm-click-label="entry-search-result-item-category">テクノロジー</a> </li> <li><span class="entry-contents-date">2021/02/12</span></li> </ul> </div> <div class="centerarticle-entry-contents has-image"> <div class="centerarticle-entry-item"> <p class="centerarticle-entry-summary">はじめに私はフリーランスのプログラマで、普段はwebサイト・webアプリを中心に開発を請け負っています。私のチームでは、CMSを利用した静的webサイトを制作する場合はNext.jsとvercelなどのPaasを推奨しており、webアプリの制作ではNode.jsまたはPHPでサーバー構築することが多いです。今回はその中の主にクライアントサイド（フロントエンド）とサーバーサイド（バックエンド）のSPAにまつわる争いを止める（？）内容です。例によって長いので、時間がない方はブラウザバックを。。。 Hotwireとはサーバーサイドの設定を不要とする、HTML主体のSPAライクな環境を構築するためのJavascriptセットです。 Railsプログラマには馴染み深いturbolinksを起源に持ち、そこに新しいライブラリを追加してリニューアルしたプロジェクトがHotwireとなりました。</p> <ul class="entrysearch-entry-tags"> <li><a href="/q/Hotwire" data-gtm-click-label="entry-search-result-item-tag">Hotwire</a></li> <li><a href="/q/Turbo" data-gtm-click-label="entry-search-result-item-tag">Turbo</a></li> <li><a href="/q/react" data-gtm-click-label="entry-search-result-item-tag">react</a></li> <li><a href="/q/stimulus" data-gtm-click-label="entry-search-result-item-tag">stimulus</a></li> <li><a href="/q/javascript" data-gtm-click-label="entry-search-result-item-tag">javascript</a></li> <li><a href="/q/SPA" data-gtm-click-label="entry-search-result-item-tag">SPA</a></li> <li><a href="/q/%E3%81%82%E3%81%A8%E3%81%A7%E8%AA%AD%E3%82%80" data-gtm-click-label="entry-search-result-item-tag">あとで読む</a></li> </ul> <div class="following-bookmarks-container js-following-bookmarks-container" data-entry-url="https://zenn.dev/mast1ff/articles/3d6f4b9e4a38bb"> <ul class="following-bookmarks js-following-bookmarks"></ul> <script type="text/x-template" id="template-following-bookmark"> <li> <a href="{{ anchor_path }}" class="following-bookmark-link" data-gtm-label="entry-info-followingBookmarks"> <img src="{{ profile_image_url }}" alt="{{ user_name }}" class="following-bookmark-icon"> </a> <span class="following-bookmark-popup"> <span class="following-bookmark-username">{{ user_name }}</span><span class="following-bookmark-timestamp">{{ created }}</span> <span class="following-bookmark-text"> {{ #comment }}<span class="following-bookmark-comment">{{ comment }}</span>{{ /comment }} <ul class="following-bookmark-tags">{{ #tags }}<li>{{ label }}</li>{{ /tags }}</ul> </span> </span> </li> </script> </div> </div> <div class="centerarticle-entry-image-wrapper"> <a href="https://zenn.dev/mast1ff/articles/3d6f4b9e4a38bb" class="centerarticle-entry-image" target="_blank" rel="noopener"> <img src="https://cdn-ak-scissors.b.st-hatena.com/image/square/b8f51480e27215c6ce5550199b34a4e4b5759ee3/height=288;version=1;width=512/https%3A%2F%2Fres.cloudinary.com%2Fzenn%2Fimage%2Fupload%2Fs--b-3YqdRP--%2Fc_fit%252Cg_north_west%252Cl_text%3Anotosansjp-medium.otf_55%3AHotwire%2525E3%252581%2525AE%2525E3%252582%2525B9%2525E3%252582%2525B9%2525E3%252583%2525A1%252520~React%2525E8%2525A3%2525BDSPA%2525E3%252582%252592%2525E3%252583%252595%2525E3%252583%2525ABSSR%2525E3%252581%2525A7Stimulus%2525E3%252581%2525A8Turbo%2525E3%252581%2525AB%2525E6%25259B%2525B8%2525E3%252581%25258D%2525E6%25258F%25259B%2525E3%252581%252588%2525E3%252581%25259F%2525E8%2525A9%2525B1~%252Cw_1010%252Cx_90%252Cy_100%2Fg_south_west%252Cl_text%3Anotosansjp-medium.otf_37%3Amast1ff%252Cx_203%252Cy_121%2Fg_south_west%252Ch_90%252Cl_fetch%3AaHR0cHM6Ly9saDMuZ29vZ2xldXNlcmNvbnRlbnQuY29tL2EtL0FPaDE0R2czMFpoemRvdlNKaEpDNVhTdVdBVlFSbm9DVGQ1eFdDdjRIR2d0dFE9czk2LWM%3D%252Cr_max%252Cw_90%252Cx_87%252Cy_95%2Fv1627283836%2Fdefault%2Fog-base-w1200-v2.png" alt="Hotwireのススメ ~React製SPAをフルSSRでStimulusとTurboに書き換えた話~" data-gtm-click-label="entry-search-result-item-image"> </a> </div> </div> </div> </li> <li class="bookmark-item js-user-bookmark-item js-keyboard-selectable-item"> <div class="centerarticle-entry is-image-entry-unit"> <div class="js-bookmark-stock-button is-hidden"> <button class="js-bookmark-stock-button-ready readlater-button" data-gtm-click-label="entry-search-result-item-stock-button" title="あとで読む" aria-label="あとで読む" tabindex="0" type="button" data-href="https://qiita.com/nazomikan/items/62cf9ff1b4edfd28c225"><span>あとで読む</span> </button> </div> <div class="centerarticle-entry-header"> <h3 class="centerarticle-entry-title"> <a href="https://qiita.com/nazomikan/items/62cf9ff1b4edfd28c225" class="js-clickable-link js-keyboard-openable" target="_blank" rel="noopener" data-gtm-click-label="entry-search-result-item-title"> <img class="centerarticle-entry-favicon" src="https://cdn-ak2.favicon.st-hatena.com/64?url=https%3A%2F%2Fqiita.com%2Fnazomikan%2Fitems%2F62cf9ff1b4edfd28c225" alt="">第三の答え、Stimulusjs - Qiita </a> </h3> <ul class="centerarticle-entry-data"> <li> <span class="centerarticle-users"> <a href="/entry/s/qiita.com/nazomikan/items/62cf9ff1b4edfd28c225" class="js-keyboard-entry-page-openable" title="第三の答え、Stimulusjs - Qiita (47 ブックマーク)" data-gtm-click-label="entry-search-result-item-users"> 47 users </a> </span> </li> <li> <a href="/site/qiita.com/nazomikan" title="『qiita.com/nazomikan』の新着エントリー" data-gtm-click-label="entry-search-result-item-site-search-url"> qiita.com/nazomikan </a> </li> <li> <a href="/hotentry/it" data-gtm-click-label="entry-search-result-item-category">テクノロジー</a> </li> <li><span class="entry-contents-date">2020/12/06</span></li> </ul> </div> <div class="centerarticle-entry-contents has-image"> <div class="centerarticle-entry-item"> <p class="centerarticle-entry-summary">昨今のフロントエンドトレンドを鑑みてフロントエンドの技術構成を考えると今はどんな選択肢が主流でしょう？それぞれ並列なものではないですが、React? Vue? Next? Nuxt?そんなワードがきっと頭に浮かぶでしょう。今の時代、jQueryでゴリゴリUIを記述するとなんだか白い目でみられる。そう、令和とはそういう時代です。界隈の最先端おじさんをみると、build processがあるのは当然で、HTML/CSSはjsが吐き出すもので、それが最大限正しいように語られています。確かにExising Domのアプローチで界隈から評価されてるライブラリはなく、さほどいい選択肢には見えません。(個人の主観) ではそれらのアプローチの何がそんなにいいんでしょう？過去から現在まで我々は何に苦心して、それらはそれをどう解決してくれたのでしょう？雑に紐解いていきましょう。(今回はUI構築の</p> <ul class="entrysearch-entry-tags"> <li><a href="/q/stimulus" data-gtm-click-label="entry-search-result-item-tag">stimulus</a></li> <li><a href="/q/hotwire" data-gtm-click-label="entry-search-result-item-tag">hotwire</a></li> <li><a href="/q/javascript" data-gtm-click-label="entry-search-result-item-tag">javascript</a></li> <li><a href="/q/rails" data-gtm-click-label="entry-search-result-item-tag">rails</a></li> <li><a href="/q/UI" data-gtm-click-label="entry-search-result-item-tag">UI</a></li> <li><a href="/q/ruby" data-gtm-click-label="entry-search-result-item-tag">ruby</a></li> <li><a href="/q/%E6%8A%80%E8%A1%93" data-gtm-click-label="entry-search-result-item-tag">技術</a></li> <li><a href="/q/%E3%81%82%E3%81%A8%E3%81%A7%E8%AA%AD%E3%82%80" data-gtm-click-label="entry-search-result-item-tag">あとで読む</a></li> </ul> <div class="following-bookmarks-container js-following-bookmarks-container" data-entry-url="https://qiita.com/nazomikan/items/62cf9ff1b4edfd28c225"> <ul class="following-bookmarks js-following-bookmarks"></ul> <script type="text/x-template" id="template-following-bookmark"> <li> <a href="{{ anchor_path }}" class="following-bookmark-link" data-gtm-label="entry-info-followingBookmarks"> <img src="{{ profile_image_url }}" alt="{{ user_name }}" class="following-bookmark-icon"> </a> <span class="following-bookmark-popup"> <span class="following-bookmark-username">{{ user_name }}</span><span class="following-bookmark-timestamp">{{ created }}</span> <span class="following-bookmark-text"> {{ #comment }}<span class="following-bookmark-comment">{{ comment }}</span>{{ /comment }} <ul class="following-bookmark-tags">{{ #tags }}<li>{{ label }}</li>{{ /tags }}</ul> </span> </span> </li> </script> </div> </div> <div class="centerarticle-entry-image-wrapper"> <a href="https://qiita.com/nazomikan/items/62cf9ff1b4edfd28c225" class="centerarticle-entry-image" target="_blank" rel="noopener"> <img src="https://cdn-ak-scissors.b.st-hatena.com/image/square/54a3a77b6dac57f2634ebff9ecae829ee4618fb6/height=288;version=1;width=512/https%3A%2F%2Fqiita-user-contents.imgix.net%2Fhttps%253A%252F%252Fcdn.qiita.com%252Fassets%252Fpublic%252Fadvent-calendar-ogp-background-7940cd1c8db80a7ec40711d90f43539e.jpg%3Fixlib%3Drb-4.0.0%26w%3D1200%26mark64%3DaHR0cHM6Ly9xaWl0YS11c2VyLWNvbnRlbnRzLmltZ2l4Lm5ldC9-dGV4dD9peGxpYj1yYi00LjAuMCZ3PTk3MiZoPTM3OCZ0eHQ9JUU3JUFDJUFDJUU0JUI4JTg5JUUzJTgxJUFFJUU3JUFEJTk0JUUzJTgxJTg4JUUzJTgwJTgxU3RpbXVsdXNqcyZ0eHQtYWxpZ249bGVmdCUyQ3RvcCZ0eHQtY29sb3I9JTIzM0EzQzNDJnR4dC1mb250PUhpcmFnaW5vJTIwU2FucyUyMFc2JnR4dC1zaXplPTU2JnM9MTc3YmNlOTQ5ODQwM2RhMmVmYjMxN2E3NzVkMzQyMzA%26mark-x%3D120%26mark-y%3D96%26blend64%3DaHR0cHM6Ly9xaWl0YS11c2VyLWNvbnRlbnRzLmltZ2l4Lm5ldC9-dGV4dD9peGxpYj1yYi00LjAuMCZoPTc2Jnc9OTcyJnR4dD0lNDBuYXpvbWlrYW4mdHh0LWNvbG9yPSUyMzNBM0MzQyZ0eHQtZm9udD1IaXJhZ2lubyUyMFNhbnMlMjBXNiZ0eHQtc2l6ZT0zNiZ0eHQtYWxpZ249bGVmdCUyQ3RvcCZzPWMyNjdiODA5M2E0NTcwODNmMjFlOTE5OTNkYjliNDUx%26blend-x%3D120%26blend-y%3D445%26blend-mode%3Dnormal%26txt64%3DaW4g5qCq5byP5Lya56S-TElGVUxM%26txt-width%3D972%26txt-clip%3Dend%252Cellipsis%26txt-color%3D%25233A3C3C%26txt-font%3DHiragino%2520Sans%2520W6%26txt-size%3D36%26txt-x%3D134%26txt-y%3D546%26s%3D5e589c60b4e65367f7206c4edd64fea0" alt="第三の答え、Stimulusjs - Qiita" data-gtm-click-label="entry-search-result-item-image"> </a> </div> </div> </div> </li> <li class="bookmark-item js-user-bookmark-item js-keyboard-selectable-item"> <div class="centerarticle-entry is-image-entry-unit"> <div class="js-bookmark-stock-button is-hidden"> <button class="js-bookmark-stock-button-ready readlater-button" data-gtm-click-label="entry-search-result-item-stock-button" title="あとで読む" aria-label="あとで読む" tabindex="0" type="button" data-href="https://techracho.bpsinc.jp/hachi8833/2024_07_17/142947"><span>あとで読む</span> </button> </div> <div class="centerarticle-entry-header"> <h3 class="centerarticle-entry-title"> <a href="https://techracho.bpsinc.jp/hachi8833/2024_07_17/142947" class="js-clickable-link js-keyboard-openable" target="_blank" rel="noopener" data-gtm-click-label="entry-search-result-item-title"> <img class="centerarticle-entry-favicon" src="https://cdn-ak2.favicon.st-hatena.com/64?url=https%3A%2F%2Ftechracho.bpsinc.jp%2Fhachi8833%2F2024_07_17%2F142947" alt="">Rails: HotwireとSPAを比較するなら実装コストの違いに注意（翻訳）｜TechRacho by BPS株式会社 </a> </h3> <ul class="centerarticle-entry-data"> <li> <span class="centerarticle-users"> <a href="/entry/s/techracho.bpsinc.jp/hachi8833/2024_07_17/142947" class="js-keyboard-entry-page-openable" title="Rails: HotwireとSPAを比較するなら実装コストの違いに注意（翻訳）｜TechRacho by BPS株式会社 (40 ブックマーク)" data-gtm-click-label="entry-search-result-item-users"> 40 users </a> </span> </li> <li> <a href="/site/techracho.bpsinc.jp/" title="『techracho.bpsinc.jp』の新着エントリー" data-gtm-click-label="entry-search-result-item-site-search-url"> techracho.bpsinc.jp </a> </li> <li> <a href="/hotentry/it" data-gtm-click-label="entry-search-result-item-category">テクノロジー</a> </li> <li><span class="entry-contents-date">2024/07/17</span></li> </ul> </div> <div class="centerarticle-entry-contents has-image"> <div class="centerarticle-entry-item"> <p class="centerarticle-entry-summary">概要原著者の許諾を得て翻訳・公開いたします。英語記事: The popover drama 原文公開日: 2024/06/02 原著者: Jorge Manrubia 日本語タイトルは内容に即したものにしました。インターネット接続が遅い環境でHEYカレンダーのポップオーバーの読み込みが遅くなる様子が以下でツイートされたことがきっかけで、ポップオーバーのドラマが幕を開けました。その後、無慈悲で辛辣な書き込みやプロの荒らしの出現など、最もSNSらしい形で議論がヒートアップしました。 If you want to know why an app *needs* JavaScript on the client and can’t just do it all on the server, just look at Hey or any other Hotwrite app pic.twit</p> <ul class="entrysearch-entry-tags"> <li><a href="/q/Hotwire" data-gtm-click-label="entry-search-result-item-tag">Hotwire</a></li> <li><a href="/q/rails" data-gtm-click-label="entry-search-result-item-tag">rails</a></li> <li><a href="/q/SPA" data-gtm-click-label="entry-search-result-item-tag">SPA</a></li> <li><a href="/q/%E3%81%82%E3%81%A8%E3%81%A7%E8%AA%AD%E3%82%80" data-gtm-click-label="entry-search-result-item-tag">あとで読む</a></li> <li><a href="/q/article" data-gtm-click-label="entry-search-result-item-tag">article</a></li> <li><a href="/q/Ruby" data-gtm-click-label="entry-search-result-item-tag">Ruby</a></li> <li><a href="/q/%E6%8A%80%E8%A1%93" data-gtm-click-label="entry-search-result-item-tag">技術</a></li> </ul> <div class="following-bookmarks-container js-following-bookmarks-container" data-entry-url="https://techracho.bpsinc.jp/hachi8833/2024_07_17/142947"> <ul class="following-bookmarks js-following-bookmarks"></ul> <script type="text/x-template" id="template-following-bookmark"> <li> <a href="{{ anchor_path }}" class="following-bookmark-link" data-gtm-label="entry-info-followingBookmarks"> <img src="{{ profile_image_url }}" alt="{{ user_name }}" class="following-bookmark-icon"> </a> <span class="following-bookmark-popup"> <span class="following-bookmark-username">{{ user_name }}</span><span class="following-bookmark-timestamp">{{ created }}</span> <span class="following-bookmark-text"> {{ #comment }}<span class="following-bookmark-comment">{{ comment }}</span>{{ /comment }} <ul class="following-bookmark-tags">{{ #tags }}<li>{{ label }}</li>{{ /tags }}</ul> </span> </span> </li> </script> </div> </div> <div class="centerarticle-entry-image-wrapper"> <a href="https://techracho.bpsinc.jp/hachi8833/2024_07_17/142947" class="centerarticle-entry-image" target="_blank" rel="noopener"> <img src="https://cdn-ak-scissors.b.st-hatena.com/image/square/277cb08c989b1612afe4287207359cde71dfb91e/height=288;version=1;width=512/https%3A%2F%2Ftechracho.bpsinc.jp%2Fwp-content%2Fuploads%2F2024%2F07%2Frails_hotwire_spa_popover_drama_eyecatch-min.png" alt="Rails: HotwireとSPAを比較するなら実装コストの違いに注意（翻訳）｜TechRacho by BPS株式会社" data-gtm-click-label="entry-search-result-item-image"> </a> </div> </div> </div> </li> <li class="bookmark-item js-user-bookmark-item js-keyboard-selectable-item"> <div class="centerarticle-entry is-image-entry-unit"> <div class="js-bookmark-stock-button is-hidden"> <button class="js-bookmark-stock-button-ready readlater-button" data-gtm-click-label="entry-search-result-item-stock-button" title="あとで読む" aria-label="あとで読む" tabindex="0" type="button" data-href="https://world.hey.com/dhh/stimulus-3-turbo-7-hotwire-1-0-9d507133"><span>あとで読む</span> </button> </div> <div class="centerarticle-entry-header"> <h3 class="centerarticle-entry-title"> <a href="https://world.hey.com/dhh/stimulus-3-turbo-7-hotwire-1-0-9d507133" class="js-clickable-link js-keyboard-openable" target="_blank" rel="noopener" data-gtm-click-label="entry-search-result-item-title"> <img class="centerarticle-entry-favicon" src="https://cdn-ak2.favicon.st-hatena.com/64?url=https%3A%2F%2Fworld.hey.com%2Fdhh%2Fstimulus-3-turbo-7-hotwire-1-0-9d507133" alt="">Stimulus 3 + Turbo 7 = Hotwire 1.0 </a> </h3> <ul class="centerarticle-entry-data"> <li> <span class="centerarticle-users"> <a href="/entry/s/world.hey.com/dhh/stimulus-3-turbo-7-hotwire-1-0-9d507133" class="js-keyboard-entry-page-openable" title="Stimulus 3 + Turbo 7 = Hotwire 1.0 (37 ブックマーク)" data-gtm-click-label="entry-search-result-item-users"> 37 users </a> </span> </li> <li> <a href="/site/world.hey.com/" title="『world.hey.com』の新着エントリー" data-gtm-click-label="entry-search-result-item-site-search-url"> world.hey.com </a> </li> <li> <a href="/hotentry/it" data-gtm-click-label="entry-search-result-item-category">テクノロジー</a> </li> <li><span class="entry-contents-date">2021/09/25</span></li> </ul> </div> <div class="centerarticle-entry-contents has-image"> <div class="centerarticle-entry-item"> <p class="centerarticle-entry-summary">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</p> <ul class="entrysearch-entry-tags"> <li><a href="/q/rails" data-gtm-click-label="entry-search-result-item-tag">rails</a></li> <li><a href="/q/hotwire" data-gtm-click-label="entry-search-result-item-tag">hotwire</a></li> <li><a href="/q/%E3%81%82%E3%81%A8%E3%81%A7%E8%AA%AD%E3%82%80" data-gtm-click-label="entry-search-result-item-tag">あとで読む</a></li> <li><a href="/q/HTML" data-gtm-click-label="entry-search-result-item-tag">HTML</a></li> <li><a href="/q/Technology" data-gtm-click-label="entry-search-result-item-tag">Technology</a></li> <li><a href="/q/web" data-gtm-click-label="entry-search-result-item-tag">web</a></li> </ul> <div class="following-bookmarks-container js-following-bookmarks-container" data-entry-url="https://world.hey.com/dhh/stimulus-3-turbo-7-hotwire-1-0-9d507133"> <ul class="following-bookmarks js-following-bookmarks"></ul> <script type="text/x-template" id="template-following-bookmark"> <li> <a href="{{ anchor_path }}" class="following-bookmark-link" data-gtm-label="entry-info-followingBookmarks"> <img src="{{ profile_image_url }}" alt="{{ user_name }}" class="following-bookmark-icon"> </a> <span class="following-bookmark-popup"> <span class="following-bookmark-username">{{ user_name }}</span><span class="following-bookmark-timestamp">{{ created }}</span> <span class="following-bookmark-text"> {{ #comment }}<span class="following-bookmark-comment">{{ comment }}</span>{{ /comment }} <ul class="following-bookmark-tags">{{ #tags }}<li>{{ label }}</li>{{ /tags }}</ul> </span> </span> </li> </script> </div> </div> <div class="centerarticle-entry-image-wrapper"> <a href="https://world.hey.com/dhh/stimulus-3-turbo-7-hotwire-1-0-9d507133" class="centerarticle-entry-image" target="_blank" rel="noopener"> <img src="https://cdn-ak-scissors.b.st-hatena.com/image/square/9c7988a248ca4df16431f085aeeb9f3504d0df78/height=288;version=1;width=512/https%3A%2F%2Fworld.hey.com%2Fdhh%2Favatar-fb368b1ee9b185dc2a09b03eabdb61678dd55244" alt="Stimulus 3 + Turbo 7 = Hotwire 1.0" data-gtm-click-label="entry-search-result-item-image"> </a> </div> </div> </div> </li> <li class="bookmark-item js-user-bookmark-item js-keyboard-selectable-item"> <div class="centerarticle-entry is-image-entry-unit"> <div class="js-bookmark-stock-button is-hidden"> <button class="js-bookmark-stock-button-ready readlater-button" data-gtm-click-label="entry-search-result-item-stock-button" title="あとで読む" aria-label="あとで読む" tabindex="0" type="button" data-href="https://techlife.cookpad.com/entry/2024/11/13/130000"><span>あとで読む</span> </button> </div> <div class="centerarticle-entry-header"> <h3 class="centerarticle-entry-title"> <a href="https://techlife.cookpad.com/entry/2024/11/13/130000" class="js-clickable-link js-keyboard-openable" target="_blank" rel="noopener" data-gtm-click-label="entry-search-result-item-title"> <img class="centerarticle-entry-favicon" src="https://cdn-ak2.favicon.st-hatena.com/64?url=https%3A%2F%2Ftechlife.cookpad.com%2Fentry%2F2024%2F11%2F13%2F130000" alt="">ちょっと複雑なサイドバーをHotwireで簡単に作りたい - クックパッド開発者ブログ </a> </h3> <ul class="centerarticle-entry-data"> <li> <span class="centerarticle-users"> <a href="/entry/s/techlife.cookpad.com/entry/2024/11/13/130000" class="js-keyboard-entry-page-openable" title="ちょっと複雑なサイドバーをHotwireで簡単に作りたい - クックパッド開発者ブログ (37 ブックマーク)" data-gtm-click-label="entry-search-result-item-users"> 37 users </a> </span> </li> <li> <a href="/site/techlife.cookpad.com/" title="『techlife.cookpad.com』の新着エントリー" data-gtm-click-label="entry-search-result-item-site-search-url"> techlife.cookpad.com </a> </li> <li> <a href="/hotentry/it" data-gtm-click-label="entry-search-result-item-category">テクノロジー</a> </li> <li><span class="entry-contents-date">2024/11/13</span></li> </ul> </div> <div class="centerarticle-entry-contents has-image"> <div class="centerarticle-entry-item"> <p class="centerarticle-entry-summary">こんにちは、レシピ事業部プロダクト開発グループの渡邉（@taso0096）です。クックパッドは最近、One Experienceというプロジェクトによって日本版とグローバル版のシステムが統合されました。どちらのシステムもRailsで実装されているという点は同じですが、統合先となったグローバル版ではHotwireが使われていました*1。そのため、One Experience関連の開発ではHotwireが積極的に活用されています。本記事ではそんなHotwireの多くの機能が使われたデスクトップ版のサイドバーについてご紹介します。デスクトップ版で表示されるサイドバーちょっと複雑なサイドバー One Experienceに伴い、グローバル版にもともと存在したUIのまま移行するのではなく、いくつか画面構成の変更を入れる事になりました。特にデスクトップ版においては、自分のコンテンツにより素早く</p> <ul class="entrysearch-entry-tags"> <li><a href="/q/hotwire" data-gtm-click-label="entry-search-result-item-tag">hotwire</a></li> <li><a href="/q/Rails" data-gtm-click-label="entry-search-result-item-tag">Rails</a></li> <li><a href="/q/cookpad" data-gtm-click-label="entry-search-result-item-tag">cookpad</a></li> <li><a href="/q/%E3%81%82%E3%81%A8%E3%81%A7%E8%AA%AD%E3%82%80" data-gtm-click-label="entry-search-result-item-tag">あとで読む</a></li> <li><a href="/q/JavaScript" data-gtm-click-label="entry-search-result-item-tag">JavaScript</a></li> <li><a href="/q/Ruby" data-gtm-click-label="entry-search-result-item-tag">Ruby</a></li> <li><a href="/q/web" data-gtm-click-label="entry-search-result-item-tag">web</a></li> </ul> <div class="following-bookmarks-container js-following-bookmarks-container" data-entry-url="https://techlife.cookpad.com/entry/2024/11/13/130000"> <ul class="following-bookmarks js-following-bookmarks"></ul> <script type="text/x-template" id="template-following-bookmark"> <li> <a href="{{ anchor_path }}" class="following-bookmark-link" data-gtm-label="entry-info-followingBookmarks"> <img src="{{ profile_image_url }}" alt="{{ user_name }}" class="following-bookmark-icon"> </a> <span class="following-bookmark-popup"> <span class="following-bookmark-username">{{ user_name }}</span><span class="following-bookmark-timestamp">{{ created }}</span> <span class="following-bookmark-text"> {{ #comment }}<span class="following-bookmark-comment">{{ comment }}</span>{{ /comment }} <ul class="following-bookmark-tags">{{ #tags }}<li>{{ label }}</li>{{ /tags }}</ul> </span> </span> </li> </script> </div> </div> <div class="centerarticle-entry-image-wrapper"> <a href="https://techlife.cookpad.com/entry/2024/11/13/130000" class="centerarticle-entry-image" target="_blank" rel="noopener"> <img src="https://cdn-ak-scissors.b.st-hatena.com/image/square/543a2a58a61d479103f958bfeea0b22a3774f3c7/height=288;version=1;width=512/https%3A%2F%2Fogimage.blog.st-hatena.com%2F12921228815724287123%2F6802418398303359771%2F1731470400" alt="ちょっと複雑なサイドバーをHotwireで簡単に作りたい - クックパッド開発者ブログ" data-gtm-click-label="entry-search-result-item-image"> </a> </div> </div> </div> </li> <li class="bookmark-item js-user-bookmark-item js-keyboard-selectable-item"> <div class="centerarticle-entry is-image-entry-unit"> <div class="js-bookmark-stock-button is-hidden"> <button class="js-bookmark-stock-button-ready readlater-button" data-gtm-click-label="entry-search-result-item-stock-button" title="あとで読む" aria-label="あとで読む" tabindex="0" type="button" data-href="https://blog.jnito.com/entry/2023/09/10/195600"><span>あとで読む</span> </button> </div> <div class="centerarticle-entry-header"> <h3 class="centerarticle-entry-title"> <a href="https://blog.jnito.com/entry/2023/09/10/195600" class="js-clickable-link js-keyboard-openable" target="_blank" rel="noopener" data-gtm-click-label="entry-search-result-item-title"> <img class="centerarticle-entry-favicon" src="https://cdn-ak2.favicon.st-hatena.com/64?url=https%3A%2F%2Fblog.jnito.com%2Fentry%2F2023%2F09%2F10%2F195600" alt="">大阪Ruby会議03でHotwireを使ったモーダルUIを15分で作ってみました＆基調講演裏話 #osrb03 - give IT a try </a> </h3> <ul class="centerarticle-entry-data"> <li> <span class="centerarticle-users"> <a href="/entry/s/blog.jnito.com/entry/2023/09/10/195600" class="js-keyboard-entry-page-openable" title="大阪Ruby会議03でHotwireを使ったモーダルUIを15分で作ってみました＆基調講演裏話 #osrb03 - give IT a try (36 ブックマーク)" data-gtm-click-label="entry-search-result-item-users"> 36 users </a> </span> </li> <li> <a href="/site/blog.jnito.com/" title="『blog.jnito.com』の新着エントリー" data-gtm-click-label="entry-search-result-item-site-search-url"> blog.jnito.com </a> </li> <li> <a href="/hotentry/it" data-gtm-click-label="entry-search-result-item-category">テクノロジー</a> </li> <li><span class="entry-contents-date">2023/09/10</span></li> </ul> </div> <div class="centerarticle-entry-contents has-image"> <div class="centerarticle-entry-item"> <p class="centerarticle-entry-summary">はじめに 2023年9月9日に開催された大阪Ruby会議03で、基調講演（キーノート）を担当させてもらいました。 regional.rubykaigi.org 当日使った資料はこちらです。発表のタイトルは"Enjoy Ruby programming, Enjoy Ruby community!"でした。今回の基調講演ではちょっと攻めた取り組みとして、「Hotwireを使ったモーダルUIを15分で作る」というテーマでライブコーディングもしてみました。 www.youtube.com ライブコーディングには思わぬトラブル付きものですが、今回は何とかノートラブルで実装できました！時間も15分以内（たぶん12〜13分ぐらい？）に収まりました〜😄 基調講演をするにあたって意識したこと今回、基調講演を担当するにあたって「IT系カンファレンスの基調講演はどういうものであるべきか」を自分なりに</p> <ul class="entrysearch-entry-tags"> <li><a href="/q/hotwire" data-gtm-click-label="entry-search-result-item-tag">hotwire</a></li> <li><a href="/q/ruby" data-gtm-click-label="entry-search-result-item-tag">ruby</a></li> <li><a href="/q/rails" data-gtm-click-label="entry-search-result-item-tag">rails</a></li> <li><a href="/q/%E3%81%82%E3%81%A8%E3%81%A7%E8%AA%AD%E3%82%80" data-gtm-click-label="entry-search-result-item-tag">あとで読む</a></li> </ul> <div class="following-bookmarks-container js-following-bookmarks-container" data-entry-url="https://blog.jnito.com/entry/2023/09/10/195600"> <ul class="following-bookmarks js-following-bookmarks"></ul> <script type="text/x-template" id="template-following-bookmark"> <li> <a href="{{ anchor_path }}" class="following-bookmark-link" data-gtm-label="entry-info-followingBookmarks"> <img src="{{ profile_image_url }}" alt="{{ user_name }}" class="following-bookmark-icon"> </a> <span class="following-bookmark-popup"> <span class="following-bookmark-username">{{ user_name }}</span><span class="following-bookmark-timestamp">{{ created }}</span> <span class="following-bookmark-text"> {{ #comment }}<span class="following-bookmark-comment">{{ comment }}</span>{{ /comment }} <ul class="following-bookmark-tags">{{ #tags }}<li>{{ label }}</li>{{ /tags }}</ul> </span> </span> </li> </script> </div> </div> <div class="centerarticle-entry-image-wrapper"> <a href="https://blog.jnito.com/entry/2023/09/10/195600" class="centerarticle-entry-image" target="_blank" rel="noopener"> <img src="https://cdn-ak-scissors.b.st-hatena.com/image/square/dad1d8e70eefeddcdd5882e8ef1c51a5f7271d38/height=288;version=1;width=512/https%3A%2F%2Fcdn.image.st-hatena.com%2Fimage%2Fscale%2Fe5c1499bdf06123ca39683549c65cdecb9aa7a35%2Fbackend%3Dimagemagick%3Bversion%3D1%3Bwidth%3D1300%2Fhttps%253A%252F%252Fcdn-ak.f.st-hatena.com%252Fimages%252Ffotolife%252FJ%252FJunichiIto%252F20230910%252F20230910160027.jpg" alt="大阪Ruby会議03でHotwireを使ったモーダルUIを15分で作ってみました＆基調講演裏話 #osrb03 - give IT a try" data-gtm-click-label="entry-search-result-item-image"> </a> </div> </div> </div> </li> <li class="bookmark-item js-user-bookmark-item js-keyboard-selectable-item"> <div class="centerarticle-entry is-image-entry-unit"> <div class="js-bookmark-stock-button is-hidden"> <button class="js-bookmark-stock-button-ready readlater-button" data-gtm-click-label="entry-search-result-item-stock-button" title="あとで読む" aria-label="あとで読む" tabindex="0" type="button" data-href="https://hotwire-anecdota.castle104.com/"><span>あとで読む</span> </button> </div> <div class="centerarticle-entry-header"> <h3 class="centerarticle-entry-title"> <a href="https://hotwire-anecdota.castle104.com/" class="js-clickable-link js-keyboard-openable" target="_blank" rel="noopener" data-gtm-click-label="entry-search-result-item-title"> <img class="centerarticle-entry-favicon" src="https://cdn-ak2.favicon.st-hatena.com/64?url=https%3A%2F%2Fhotwire-anecdota.castle104.com%2F" alt="">Hotwire Anecdota </a> </h3> <ul class="centerarticle-entry-data"> <li> <span class="centerarticle-users"> <a href="/entry/s/hotwire-anecdota.castle104.com/" class="js-keyboard-entry-page-openable" title="Hotwire Anecdota (34 ブックマーク)" data-gtm-click-label="entry-search-result-item-users"> 34 users </a> </span> </li> <li> <a href="/site/hotwire-anecdota.castle104.com/" title="『hotwire-anecdota.castle104.com』の新着エントリー" data-gtm-click-label="entry-search-result-item-site-search-url"> hotwire-anecdota.castle104.com </a> </li> <li> <a href="/hotentry/it" data-gtm-click-label="entry-search-result-item-category">テクノロジー</a> </li> <li><span class="entry-contents-date">2024/12/05</span></li> </ul> </div> <div class="centerarticle-entry-contents has-image"> <div class="centerarticle-entry-item"> <p class="centerarticle-entry-summary">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</p> <ul class="entrysearch-entry-tags"> <li><a href="/q/hotwire" data-gtm-click-label="entry-search-result-item-tag">hotwire</a></li> <li><a href="/q/rails" data-gtm-click-label="entry-search-result-item-tag">rails</a></li> <li><a href="/q/%E3%81%82%E3%81%A8%E3%81%A7%E8%AA%AD%E3%82%80" data-gtm-click-label="entry-search-result-item-tag">あとで読む</a></li> <li><a href="/q/%E8%80%83%E5%AF%9F" data-gtm-click-label="entry-search-result-item-tag">考察</a></li> <li><a href="/q/ruby" data-gtm-click-label="entry-search-result-item-tag">ruby</a></li> <li><a href="/q/%E6%8A%80%E8%A1%93" data-gtm-click-label="entry-search-result-item-tag">技術</a></li> <li><a href="/q/javascript" data-gtm-click-label="entry-search-result-item-tag">javascript</a></li> </ul> <div class="following-bookmarks-container js-following-bookmarks-container" data-entry-url="https://hotwire-anecdota.castle104.com/"> <ul class="following-bookmarks js-following-bookmarks"></ul> <script type="text/x-template" id="template-following-bookmark"> <li> <a href="{{ anchor_path }}" class="following-bookmark-link" data-gtm-label="entry-info-followingBookmarks"> <img src="{{ profile_image_url }}" alt="{{ user_name }}" class="following-bookmark-icon"> </a> <span class="following-bookmark-popup"> <span class="following-bookmark-username">{{ user_name }}</span><span class="following-bookmark-timestamp">{{ created }}</span> <span class="following-bookmark-text"> {{ #comment }}<span class="following-bookmark-comment">{{ comment }}</span>{{ /comment }} <ul class="following-bookmark-tags">{{ #tags }}<li>{{ label }}</li>{{ /tags }}</ul> </span> </span> </li> </script> </div> </div> <div class="centerarticle-entry-image-wrapper"> <a href="https://hotwire-anecdota.castle104.com/" class="centerarticle-entry-image" target="_blank" rel="noopener"> <img src="https://cdn-ak-scissors.b.st-hatena.com/image/square/b4861d788c89c8d0cc060d4a335e063a5b3a51b2/height=288;version=1;width=512/https%3A%2F%2Fhotwire-anecdota.castle104.com%2Fassets%2Fogp-3c81ade6.webp" alt="Hotwire Anecdota" data-gtm-click-label="entry-search-result-item-image"> </a> </div> </div> </div> </li> <li class="bookmark-item js-user-bookmark-item js-keyboard-selectable-item"> <div class="centerarticle-entry is-image-entry-unit"> <div class="js-bookmark-stock-button is-hidden"> <button class="js-bookmark-stock-button-ready readlater-button" data-gtm-click-label="entry-search-result-item-stock-button" title="あとで読む" aria-label="あとで読む" tabindex="0" type="button" data-href="https://techracho.bpsinc.jp/hachi8833/2025_03_07/148685"><span>あとで読む</span> </button> </div> <div class="centerarticle-entry-header"> <h3 class="centerarticle-entry-title"> <a href="https://techracho.bpsinc.jp/hachi8833/2025_03_07/148685" class="js-clickable-link js-keyboard-openable" target="_blank" rel="noopener" data-gtm-click-label="entry-search-result-item-title"> <img class="centerarticle-entry-favicon" src="https://cdn-ak2.favicon.st-hatena.com/64?url=https%3A%2F%2Ftechracho.bpsinc.jp%2Fhachi8833%2F2025_03_07%2F148685" alt="">Railsを快適に開発するための最新フロントエンドツールキット（翻訳）｜TechRacho by BPS株式会社 </a> </h3> <ul class="centerarticle-entry-data"> <li> <span class="centerarticle-users"> <a href="/entry/s/techracho.bpsinc.jp/hachi8833/2025_03_07/148685" class="js-keyboard-entry-page-openable" title="Railsを快適に開発するための最新フロントエンドツールキット（翻訳）｜TechRacho by BPS株式会社 (34 ブックマーク)" data-gtm-click-label="entry-search-result-item-users"> 34 users </a> </span> </li> <li> <a href="/site/techracho.bpsinc.jp/" title="『techracho.bpsinc.jp』の新着エントリー" data-gtm-click-label="entry-search-result-item-site-search-url"> techracho.bpsinc.jp </a> </li> <li> <a href="/hotentry/it" data-gtm-click-label="entry-search-result-item-category">テクノロジー</a> </li> <li><span class="entry-contents-date">2025/03/07</span></li> </ul> </div> <div class="centerarticle-entry-contents has-image"> <div class="centerarticle-entry-item"> <p class="centerarticle-entry-summary">概要元サイトの許諾を得て翻訳・公開いたします。英語記事: Keeping Rails cool: the modern frontend toolkit—Martian Chronicles, Evil Martians’ team blog 原文公開日: 2024/12/10 原著者: Irina Nazarova（CEO）、Travis Turner（技術編集者）サイト: Evil Martians -- ニューヨークやロシアを中心に拠点を構えるRuby on Rails開発会社です。良質のブログ記事を多数公開し、多くのgemのスポンサーでもあります。日本語ブログ: 合同会社イービルマーシャンズ - Qiita はじめに Evil Martiansは、Railsでのスタートアップ支援や構築を行っており、RubyとRailsがチームの生産性と競争力の強化につながることも熟知してい</p> <ul class="entrysearch-entry-tags"> <li><a href="/q/rails" data-gtm-click-label="entry-search-result-item-tag">rails</a></li> <li><a href="/q/Hotwire" data-gtm-click-label="entry-search-result-item-tag">Hotwire</a></li> <li><a href="/q/techracho" data-gtm-click-label="entry-search-result-item-tag">techracho</a></li> <li><a href="/q/%E3%83%95%E3%83%AD%E3%83%B3%E3%83%88%E3%82%A8%E3%83%B3%E3%83%89" data-gtm-click-label="entry-search-result-item-tag">フロントエンド</a></li> <li><a href="/q/Ruby" data-gtm-click-label="entry-search-result-item-tag">Ruby</a></li> <li><a href="/q/%E9%96%8B%E7%99%BA" data-gtm-click-label="entry-search-result-item-tag">開発</a></li> <li><a href="/q/JavaScript" data-gtm-click-label="entry-search-result-item-tag">JavaScript</a></li> </ul> <div class="following-bookmarks-container js-following-bookmarks-container" data-entry-url="https://techracho.bpsinc.jp/hachi8833/2025_03_07/148685"> <ul class="following-bookmarks js-following-bookmarks"></ul> <script type="text/x-template" id="template-following-bookmark"> <li> <a href="{{ anchor_path }}" class="following-bookmark-link" data-gtm-label="entry-info-followingBookmarks"> <img src="{{ profile_image_url }}" alt="{{ user_name }}" class="following-bookmark-icon"> </a> <span class="following-bookmark-popup"> <span class="following-bookmark-username">{{ user_name }}</span><span class="following-bookmark-timestamp">{{ created }}</span> <span class="following-bookmark-text"> {{ #comment }}<span class="following-bookmark-comment">{{ comment }}</span>{{ /comment }} <ul class="following-bookmark-tags">{{ #tags }}<li>{{ label }}</li>{{ /tags }}</ul> </span> </span> </li> </script> </div> </div> <div class="centerarticle-entry-image-wrapper"> <a href="https://techracho.bpsinc.jp/hachi8833/2025_03_07/148685" class="centerarticle-entry-image" target="_blank" rel="noopener"> <img src="https://cdn-ak-scissors.b.st-hatena.com/image/square/11f80c95971a1c8af15220ce88c17658a9df979a/height=288;version=1;width=512/https%3A%2F%2Ftechracho.bpsinc.jp%2Fwp-content%2Fuploads%2F2025%2F02%2Frails_modern_frontend_toolkit_eyecatch-min.png" alt="Railsを快適に開発するための最新フロントエンドツールキット（翻訳）｜TechRacho by BPS株式会社" data-gtm-click-label="entry-search-result-item-image"> </a> </div> </div> </div> </li> <li class="bookmark-item js-user-bookmark-item js-keyboard-selectable-item"> <div class="centerarticle-entry "> <div class="js-bookmark-stock-button is-hidden"> <button class="js-bookmark-stock-button-ready readlater-button" data-gtm-click-label="entry-search-result-item-stock-button" title="あとで読む" aria-label="あとで読む" tabindex="0" type="button" data-href="https://blog.champierre.com/1280"><span>あとで読む</span> </button> </div> <div class="centerarticle-entry-header"> <h3 class="centerarticle-entry-title"> <a href="https://blog.champierre.com/1280" class="js-clickable-link js-keyboard-openable" target="_blank" rel="noopener" data-gtm-click-label="entry-search-result-item-title"> <img class="centerarticle-entry-favicon" src="https://cdn-ak2.favicon.st-hatena.com/64?url=https%3A%2F%2Fblog.champierre.com%2F1280" alt="">Hotwire でモダンなウェブアプリケーションを作る - 僕は発展途上技術者 </a> </h3> <ul class="centerarticle-entry-data"> <li> <span class="centerarticle-users"> <a href="/entry/s/blog.champierre.com/1280" class="js-keyboard-entry-page-openable" title="Hotwire でモダンなウェブアプリケーションを作る - 僕は発展途上技術者 (34 ブックマーク)" data-gtm-click-label="entry-search-result-item-users"> 34 users </a> </span> </li> <li> <a href="/site/blog.champierre.com/" title="『blog.champierre.com』の新着エントリー" data-gtm-click-label="entry-search-result-item-site-search-url"> blog.champierre.com </a> </li> <li> <a href="/hotentry/it" data-gtm-click-label="entry-search-result-item-category">テクノロジー</a> </li> <li><span class="entry-contents-date">2021/01/29</span></li> </ul> </div> <div class="centerarticle-entry-contents "> <div class="centerarticle-entry-item"> <p class="centerarticle-entry-summary">はじめに JSON でなく HTML を送ることでモダンなウェブアプリケーションを開発できる Hotwire に少し前から興味がありました。 Hotwireとは何なのか？を始めとした日本語の情報を拾い読みしていたのですが、ユーザにとっても、開発の進め方も Progressive Enhancement にできることと書かれていたりして、わかったような、わからないような。で、Hotwire を開発した DHH 氏みずから Hotwire の使い所を解説していた Podcast があって聞いてみたら、とてもわかりやすくて納得した。 » 151: DHH – Building HEY with Hotwire | Full Stack Radio 実際にデモアプリを作りながら、Hotwire がどういうものなのかを見ていきます。クラシックなウェブアプリを作るまずは現時点で最新の Ru</p> <ul class="entrysearch-entry-tags"> <li><a href="/q/rails" data-gtm-click-label="entry-search-result-item-tag">rails</a></li> <li><a href="/q/ruby" data-gtm-click-label="entry-search-result-item-tag">ruby</a></li> <li><a href="/q/%E3%81%82%E3%81%A8%E3%81%A7%E8%AA%AD%E3%82%80" data-gtm-click-label="entry-search-result-item-tag">あとで読む</a></li> <li><a href="/q/app" data-gtm-click-label="entry-search-result-item-tag">app</a></li> <li><a href="/q/html" data-gtm-click-label="entry-search-result-item-tag">html</a></li> <li><a href="/q/tech" data-gtm-click-label="entry-search-result-item-tag">tech</a></li> </ul> <div class="following-bookmarks-container js-following-bookmarks-container" data-entry-url="https://blog.champierre.com/1280"> <ul class="following-bookmarks js-following-bookmarks"></ul> <script type="text/x-template" id="template-following-bookmark"> <li> <a href="{{ anchor_path }}" class="following-bookmark-link" data-gtm-label="entry-info-followingBookmarks"> <img src="{{ profile_image_url }}" alt="{{ user_name }}" class="following-bookmark-icon"> </a> <span class="following-bookmark-popup"> <span class="following-bookmark-username">{{ user_name }}</span><span class="following-bookmark-timestamp">{{ created }}</span> <span class="following-bookmark-text"> {{ #comment }}<span class="following-bookmark-comment">{{ comment }}</span>{{ /comment }} <ul class="following-bookmark-tags">{{ #tags }}<li>{{ label }}</li>{{ /tags }}</ul> </span> </span> </li> </script> </div> </div> </div> </div> </li> <li class="bookmark-item js-user-bookmark-item js-keyboard-selectable-item"> <div class="centerarticle-entry is-image-entry-unit"> <div class="js-bookmark-stock-button is-hidden"> <button class="js-bookmark-stock-button-ready readlater-button" data-gtm-click-label="entry-search-result-item-stock-button" title="あとで読む" aria-label="あとで読む" tabindex="0" type="button" data-href="https://github.com/everyleaf/hotwire-demo"><span>あとで読む</span> </button> </div> <div class="centerarticle-entry-header"> <h3 class="centerarticle-entry-title"> <a href="https://github.com/everyleaf/hotwire-demo" class="js-clickable-link js-keyboard-openable" target="_blank" rel="noopener" data-gtm-click-label="entry-search-result-item-title"> <img class="centerarticle-entry-favicon" src="https://cdn-ak2.favicon.st-hatena.com/64?url=https%3A%2F%2Fgithub.com%2Feveryleaf%2Fhotwire-demo" alt="">GitHub - everyleaf/hotwire-demo: Rails7 で構築された非Hotwireのアプリを、Hotwire各技術で改良していくリポジトリです。 </a> </h3> <ul class="centerarticle-entry-data"> <li> <span class="centerarticle-users"> <a href="/entry/s/github.com/everyleaf/hotwire-demo" class="js-keyboard-entry-page-openable" title="GitHub - everyleaf/hotwire-demo: Rails7 で構築された非Hotwireのアプリを、Hotwire各技術で改良していくリポジトリです。 (31 ブックマーク)" data-gtm-click-label="entry-search-result-item-users"> 31 users </a> </span> </li> <li> <a href="/site/github.com/everyleaf" title="『github.com/everyleaf』の新着エントリー" data-gtm-click-label="entry-search-result-item-site-search-url"> github.com/everyleaf </a> </li> <li> <a href="/hotentry/it" data-gtm-click-label="entry-search-result-item-category">テクノロジー</a> </li> <li><span class="entry-contents-date">2023/01/17</span></li> </ul> </div> <div class="centerarticle-entry-contents has-image"> <div class="centerarticle-entry-item"> <p class="centerarticle-entry-summary">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> <ul class="entrysearch-entry-tags"> <li><a href="/q/Rails" data-gtm-click-label="entry-search-result-item-tag">Rails</a></li> <li><a href="/q/Hotwire" data-gtm-click-label="entry-search-result-item-tag">Hotwire</a></li> <li><a href="/q/%E3%81%82%E3%81%A8%E3%81%A7%E8%AA%AD%E3%82%80" data-gtm-click-label="entry-search-result-item-tag">あとで読む</a></li> <li><a href="/q/github" data-gtm-click-label="entry-search-result-item-tag">github</a></li> </ul> <div class="following-bookmarks-container js-following-bookmarks-container" data-entry-url="https://github.com/everyleaf/hotwire-demo"> <ul class="following-bookmarks js-following-bookmarks"></ul> <script type="text/x-template" id="template-following-bookmark"> <li> <a href="{{ anchor_path }}" class="following-bookmark-link" data-gtm-label="entry-info-followingBookmarks"> <img src="{{ profile_image_url }}" alt="{{ user_name }}" class="following-bookmark-icon"> </a> <span class="following-bookmark-popup"> <span class="following-bookmark-username">{{ user_name }}</span><span class="following-bookmark-timestamp">{{ created }}</span> <span class="following-bookmark-text"> {{ #comment }}<span class="following-bookmark-comment">{{ comment }}</span>{{ /comment }} <ul class="following-bookmark-tags">{{ #tags }}<li>{{ label }}</li>{{ /tags }}</ul> </span> </span> </li> </script> </div> </div> <div class="centerarticle-entry-image-wrapper"> <a href="https://github.com/everyleaf/hotwire-demo" class="centerarticle-entry-image" target="_blank" rel="noopener"> <img src="https://cdn-ak-scissors.b.st-hatena.com/image/square/bd26c2740c5735a307593816e19a9ad2c60537f5/height=288;version=1;width=512/https%3A%2F%2Fopengraph.githubassets.com%2F01e084397572560d6a578d542e6ef2968fd580b24d2c7132a741308c82d64ee0%2Feveryleaf%2Fhotwire-demo" alt="GitHub - everyleaf/hotwire-demo: Rails7 で構築された非Hotwireのアプリを、Hotwire各技術で改良していくリポジトリです。" data-gtm-click-label="entry-search-result-item-image"> </a> </div> </div> </div> </li> <li class="bookmark-item js-user-bookmark-item js-keyboard-selectable-item"> <div class="centerarticle-entry is-image-entry-unit"> <div class="js-bookmark-stock-button is-hidden"> <button class="js-bookmark-stock-button-ready readlater-button" data-gtm-click-label="entry-search-result-item-stock-button" title="あとで読む" aria-label="あとで読む" tabindex="0" type="button" data-href="https://www.hotrails.dev/"><span>あとで読む</span> </button> </div> <div class="centerarticle-entry-header"> <h3 class="centerarticle-entry-title"> <a href="https://www.hotrails.dev/" class="js-clickable-link js-keyboard-openable" target="_blank" rel="noopener" data-gtm-click-label="entry-search-result-item-title"> <img class="centerarticle-entry-favicon" src="https://cdn-ak2.favicon.st-hatena.com/64?url=https%3A%2F%2Fwww.hotrails.dev%2F" alt="">Hotrails - Learn modern Ruby on Rails with Hotwire </a> </h3> <ul class="centerarticle-entry-data"> <li> <span class="centerarticle-users"> <a href="/entry/s/www.hotrails.dev/" class="js-keyboard-entry-page-openable" title="Hotrails - Learn modern Ruby on Rails with Hotwire (31 ブックマーク)" data-gtm-click-label="entry-search-result-item-users"> 31 users </a> </span> </li> <li> <a href="/site/www.hotrails.dev/" title="『www.hotrails.dev』の新着エントリー" data-gtm-click-label="entry-search-result-item-site-search-url"> www.hotrails.dev </a> </li> <li> <a href="/hotentry/it" data-gtm-click-label="entry-search-result-item-category">テクノロジー</a> </li> <li><span class="entry-contents-date">2022/03/31</span></li> </ul> </div> <div class="centerarticle-entry-contents has-image"> <div class="centerarticle-entry-item"> <p class="centerarticle-entry-summary">The Turbo Rails Tutorial Learn how to create modern, single-page, reactive web applications with Ruby on Rails 7 without writing any custom JavaScript code. Start the tutorial → Hotwire is the default frontend framework for Rails With the release of Rails 7 in December 2021, Hotwire, which is the combination of Stimulus and Turbo, became the default frontend framework for Ruby on Rails application</p> <ul class="entrysearch-entry-tags"> <li><a href="/q/rails" data-gtm-click-label="entry-search-result-item-tag">rails</a></li> <li><a href="/q/hotwire" data-gtm-click-label="entry-search-result-item-tag">hotwire</a></li> <li><a href="/q/%E3%81%82%E3%81%A8%E3%81%A7%E8%AA%AD%E3%82%80" data-gtm-click-label="entry-search-result-item-tag">あとで読む</a></li> <li><a href="/q/ruby" data-gtm-click-label="entry-search-result-item-tag">ruby</a></li> </ul> <div class="following-bookmarks-container js-following-bookmarks-container" data-entry-url="https://www.hotrails.dev/"> <ul class="following-bookmarks js-following-bookmarks"></ul> <script type="text/x-template" id="template-following-bookmark"> <li> <a href="{{ anchor_path }}" class="following-bookmark-link" data-gtm-label="entry-info-followingBookmarks"> <img src="{{ profile_image_url }}" alt="{{ user_name }}" class="following-bookmark-icon"> </a> <span class="following-bookmark-popup"> <span class="following-bookmark-username">{{ user_name }}</span><span class="following-bookmark-timestamp">{{ created }}</span> <span class="following-bookmark-text"> {{ #comment }}<span class="following-bookmark-comment">{{ comment }}</span>{{ /comment }} <ul class="following-bookmark-tags">{{ #tags }}<li>{{ label }}</li>{{ /tags }}</ul> </span> </span> </li> </script> </div> </div> <div class="centerarticle-entry-image-wrapper"> <a href="https://www.hotrails.dev/" class="centerarticle-entry-image" target="_blank" rel="noopener"> <img src="https://cdn-ak-scissors.b.st-hatena.com/image/square/d482e2c7d45f4ada40d6f90167f2fb12fd10b64f/height=288;version=1;width=512/https%3A%2F%2Fwww.hotrails.dev%2Fassets%2Fcover-ae550bddad70a5f704f337843fd672c8b632574ae3619175e7fc82dc90b0417b.png" alt="Hotrails - Learn modern Ruby on Rails with Hotwire" data-gtm-click-label="entry-search-result-item-image"> </a> </div> </div> </div> </li> </ul> <div class="centerarticle-pager "> <span>1</span> <span class="js-keyboard-selectable-item"><a href="https://b.hatena.ne.jp/q/hotwire?page=2" class="js-keyboard-openable">2</a></span> <span class="js-keyboard-selectable-item"><a href="https://b.hatena.ne.jp/q/hotwire?page=3" class="js-keyboard-openable">3</a></span> <span class="js-keyboard-selectable-item"><a href="https://b.hatena.ne.jp/q/hotwire?page=4" class="js-keyboard-openable">4</a></span> <span class="centerarticle-pager-next js-keyboard-selectable-item"><a href="https://b.hatena.ne.jp/q/hotwire?page=2" class="js-keyboard-openable">次のページ</a></span> </div> </div> <ins id="entrysearch-ad-rectangle-middle-sp" class="entrylist-ad-sp-fluid for-sp"></ins> <div id="entrysearch-ad-rectangle-bottom-sp" class="touch-ad-rectangle"></div> </div> <div class="entry-wrapper"> <section class="entry-group"> <h2 class="entry-group-sectionTitle">新着記事</h2> <ul class="entry-group-list"> <li> <div class="entry-group-list-inner"> <div class="entry-group-text"> <h3 class="entry-group-title"><a href="/entry/s/l.smartnews.com/m-k0hvg0U/EmDULw" title="まずは100回やってみる。上達するためのシンプルなルール。 (NewsPicksトピックス)" data-gtm-label="entry-recentEntriesInEntrySearch-title">まずは100回やってみる。上達するためのシンプルなルール。 (NewsPicksトピックス)</a></h3> <p class="entry-group-meta"><span class="entry-group-users"><a href="/entry/s/l.smartnews.com/m-k0hvg0U/EmDULw" data-gtm-label="entry-recentEntriesInEntrySearch-users">1 user</a></span><span class="entry-group-domain"><a href="/site/l.smartnews.com/" data-gtm-label="entry-recentEntriesInEntrySearch-domain"><img src="https://cdn-ak2.favicon.st-hatena.com/64?url=https%3A%2F%2Fl.smartnews.com%2Fm-k0hvg0U%2FEmDULw" alt="">l.smartnews.com</a></span></p> </div> </div> </li> <li> <div class="entry-group-list-inner"> <div class="entry-group-text"> <h3 class="entry-group-title"><a href="/entry/s/www.huffingtonpost.jp/entry/story_jp_67ecc7f1e4b048fde6fe8ca3" title="「米農家は時給10円」「暑さで野菜が育たない」。東京のど真ん中をトラクターが行進。「令和の百姓一揆」で農家が語った危機感" data-gtm-label="entry-recentEntriesInEntrySearch-title">「米農家は時給10円」「暑さで野菜が育たない」。東京のど真ん中をトラクターが行進。「令和の百姓一揆」で農家が語った危機感</a></h3> <p class="entry-group-meta"><span class="entry-group-users"><a href="/entry/s/www.huffingtonpost.jp/entry/story_jp_67ecc7f1e4b048fde6fe8ca3" data-gtm-label="entry-recentEntriesInEntrySearch-users">1 user</a></span><span class="entry-group-domain"><a href="/site/www.huffingtonpost.jp/" data-gtm-label="entry-recentEntriesInEntrySearch-domain"><img src="https://cdn-ak2.favicon.st-hatena.com/64?url=https%3A%2F%2Fwww.huffingtonpost.jp%2Fentry%2Fstory_jp_67ecc7f1e4b048fde6fe8ca3" alt="">www.huffingtonpost.jp</a></span></p> </div> </div> </li> <li> <div class="entry-group-list-inner"> <div class="entry-group-text"> <h3 class="entry-group-title"><a href="/entry/s/news.yahoo.co.jp/pickup/6534281" title="マスク氏退任に米大統領同意報道 - Yahoo!ニュース" data-gtm-label="entry-recentEntriesInEntrySearch-title">マスク氏退任に米大統領同意報道 - Yahoo!ニュース</a></h3> <p class="entry-group-meta"><span class="entry-group-users"><a href="/entry/s/news.yahoo.co.jp/pickup/6534281" data-gtm-label="entry-recentEntriesInEntrySearch-users">1 user</a></span><span class="entry-group-domain"><a href="/site/news.yahoo.co.jp/" data-gtm-label="entry-recentEntriesInEntrySearch-domain"><img src="https://cdn-ak2.favicon.st-hatena.com/64?url=https%3A%2F%2Fnews.yahoo.co.jp%2Fpickup%2F6534281" alt="">news.yahoo.co.jp</a></span></p> </div> </div> </li> <li> <div class="entry-group-list-inner"> <div class="entry-group-text"> <h3 class="entry-group-title"><a href="/entry/s/t49takachan.hatenablog.com/entry/2025/04/03/090021" title="ベトナム/ホーチミン旅行記　その⑧（面白写真編） - t49takachan’s blog" data-gtm-label="entry-recentEntriesInEntrySearch-title">ベトナム/ホーチミン旅行記　その⑧（面白写真編） - t49takachan’s blog</a></h3> <p class="entry-group-meta"><span class="entry-group-users"><a href="/entry/s/t49takachan.hatenablog.com/entry/2025/04/03/090021" data-gtm-label="entry-recentEntriesInEntrySearch-users">1 user</a></span><span class="entry-group-domain"><a href="/site/t49takachan.hatenablog.com/" data-gtm-label="entry-recentEntriesInEntrySearch-domain"><img src="https://cdn-ak2.favicon.st-hatena.com/64?url=https%3A%2F%2Ft49takachan.hatenablog.com%2Fentry%2F2025%2F04%2F03%2F090021" alt="">t49takachan.hatenablog.com</a></span></p> </div> </div> </li> <li> <div class="entry-group-list-inner"> <div class="entry-group-text"> <h3 class="entry-group-title"><a href="/entry/s/b-gamers.net/fortnite-cooper/" title="【FORTNITE】Cooper(クーパー)選手の感度・設定・デバイス" data-gtm-label="entry-recentEntriesInEntrySearch-title">【FORTNITE】Cooper(クーパー)選手の感度・設定・デバイス</a></h3> <p class="entry-group-meta"><span class="entry-group-users"><a href="/entry/s/b-gamers.net/fortnite-cooper/" data-gtm-label="entry-recentEntriesInEntrySearch-users">1 user</a></span><span class="entry-group-domain"><a href="/site/b-gamers.net/" data-gtm-label="entry-recentEntriesInEntrySearch-domain"><img src="https://cdn-ak2.favicon.st-hatena.com/64?url=https%3A%2F%2Fb-gamers.net%2Ffortnite-cooper%2F" alt="">b-gamers.net</a></span></p> </div> </div> </li> <li> <div class="entry-group-list-inner"> <div class="entry-group-text"> <h3 class="entry-group-title"><a href="/entry/s/news.yahoo.co.jp/articles/146b000ff7f203300f5696f5e185b838f6e1681a" title="「Switch 2」はどう進化した？　旧Switchと比較してみた（ITmedia NEWS） - Yahoo!ニュース" data-gtm-label="entry-recentEntriesInEntrySearch-title">「Switch 2」はどう進化した？　旧Switchと比較してみた（ITmedia NEWS） - Yahoo!ニュース</a></h3> <p class="entry-group-meta"><span class="entry-group-users"><a href="/entry/s/news.yahoo.co.jp/articles/146b000ff7f203300f5696f5e185b838f6e1681a" data-gtm-label="entry-recentEntriesInEntrySearch-users">1 user</a></span><span class="entry-group-domain"><a href="/site/news.yahoo.co.jp/" data-gtm-label="entry-recentEntriesInEntrySearch-domain"><img src="https://cdn-ak2.favicon.st-hatena.com/64?url=https%3A%2F%2Fnews.yahoo.co.jp%2Farticles%2F146b000ff7f203300f5696f5e185b838f6e1681a" alt="">news.yahoo.co.jp</a></span></p> </div> </div> </li> </ul> </section> </div> </div> <div id="keyboard-shortcut-help" class="shortcut-help is-hidden"> <h3 class="shortcut-help-title">キーボードショートカット一覧</h3> <p><span class="shortcut-help-key">j</span>次のブックマーク</p> <p><span class="shortcut-help-key">k</span>前のブックマーク</p> <p><span class="shortcut-help-key">l</span>あとで読む</p> <p><span class="shortcut-help-key">e</span>コメント一覧を開く</p> <p><span class="shortcut-help-key">o</span>ページを開く</p> <button tyle="button" class="shortcut-help-close js-close-button">✕</button> </div> <script type="text/javascript"> // ---------------- dfp section ---------------- var valve = valve || []; if (isMobile()) { valve.push(function(v) { v.defineDFPSlot({ unit: '/4374287/bookmark_overlay_sp', sizes: [[320,80],[320,70],[320,50]], slotId: 'touch-footer-ad' }); v.defineDFPSlot({ unit: '/4374287/bookmark_entrysearch_rectangle_bottom_sp', sizes: [[300,250]], slotId: 'entrysearch-ad-rectangle-bottom-sp' }); v.sealDFPSlots(); }); } else { valve.push(function(v) { v.defineDFPSlot({ unit: '/4374287/bookmark_entrysearch_sidebar_top_pc', sizes: [[300,250]], slotId: 'entrysearch-ad-sidebar-top' }); v.defineDFPSlot({ unit: '/4374287/bookmark_entrysearch_sidebar_bottom_pc', sizes: [[300,250]], slotId: 'entrysearch-ad-sidebar-bottom' }); v.sealDFPSlots(); }); } // ---------------- ydn section ---------------- if (isMobile()) { valve.push(function(v) { v.defineFluidSlot({ insId: 'entrysearch-ad-rectangle-middle-sp', yadsAdDs: '62199_242886' }); }); } </script> <script> var valve = window.valve || []; valve.push(function(v) { var pageKeyValues = {}; if (document.cookie.split(';').some(function(item) { return item.indexOf('202011_guest_status=register_incomplete') >= 0})) { pageKeyValues.bookmark_status = 'register_incomplete'; } v.config({ pageKeyValues: pageKeyValues, textSelector: ".entry-search-articles", content: { result: "ng" }, service: 'bookmark' }); }); </script> <script src="https://cdn.pool.st-hatena.com/valve/valve.js" async></script> <div class="footer"> <div class="footer-inner"> <div class="footer-inner-group footer-bookmark"> <h2 class="footer-title"><a href="/" data-gtm-label="footer-btop">はてなブックマーク</a></h2> <div class="footer-list-wrapper"> <ul class="footer-list footer-list--pc"> <li class="footer-list-item js-keyboard-selectable-item"><a href="/hotentry/all" class="hotentry js-keyboard-openable" data-gtm-label="footerCategories-hotentry">総合</a></li> <li class="footer-list-item js-keyboard-selectable-item"><a href="/hotentry/general" class="general js-keyboard-openable" data-gtm-label="footerCategories-general">一般</a></li> <li class="footer-list-item js-keyboard-selectable-item"><a href="/hotentry/social" class="cat-social js-keyboard-openable" data-gtm-label="footerCategories-social">世の中</a></li> <li class="footer-list-item js-keyboard-selectable-item"><a href="/hotentry/economics" class="cat-economics js-keyboard-openable" data-gtm-label="footerCategories-economics">政治と経済</a></li> <li class="footer-list-item js-keyboard-selectable-item"><a href="/hotentry/life" class="cat-life js-keyboard-openable" data-gtm-label="footerCategories-life">暮らし</a></li> <li class="footer-list-item js-keyboard-selectable-item"><a href="/hotentry/knowledge" class="cat-knowledge js-keyboard-openable" data-gtm-label="footerCategories-knowledge">学び</a></li> </ul> <ul class="footer-list footer-list--pc"> <li class="footer-list-item js-keyboard-selectable-item"><a href="/hotentry/it" class="cat-it js-keyboard-openable" data-gtm-label="footerCategories-it">テクノロジー</a></li> <li class="footer-list-item js-keyboard-selectable-item"><a href="/hotentry/entertainment" class="cat-entertainment js-keyboard-openable" data-gtm-label="footerCategories-entertainment">エンタメ</a></li> <li class="footer-list-item js-keyboard-selectable-item"><a href="/hotentry/game" class="cat-game js-keyboard-openable" data-gtm-label="footerCategories-game">アニメとゲーム</a></li> <li class="footer-list-item js-keyboard-selectable-item"><a href="/hotentry/fun" class="cat-fun js-keyboard-openable" data-gtm-label="footerCategories-fun">おもしろ</a></li> </ul> <ul class="footer-list"> <li class="footer-list-item"><a href="/guide/tools">アプリ・拡張機能</a></li> <li class="footer-list-item"><a href="https://bookmark.hatenastaff.com/">開発ブログ</a></li> <li class="footer-list-item"><a href="/help/">ヘルプ</a></li> <li class="footer-list-item"><a href="https://hatena.zendesk.com/hc/ja/categories/900000153166">お問い合わせ</a></li> <li class="footer-list-item footer-list-item--sp"><a href="/guide/guideline">ガイドライン</a></li> <li class="footer-list-item footer-list-item--sp"><a href="https://policies.hatena.ne.jp/rule">利用規約</a></li> <li class="footer-list-item footer-list-item--sp"><a href="https://policies.hatena.ne.jp/privacypolicy-ja">プライバシーポリシー</a></li> <li class="footer-list-item footer-list-item--sp"><a href="https://policies.hatena.ne.jp/cookie-policy">利用者情報の外部送信について</a></li> </ul> <ul class="footer-list footer-list--pc"> <li class="footer-list-item footer-list-item--pc"><a href="/guide/guideline">ガイドライン</a></li> <li class="footer-list-item footer-list-item--pc"><a href="https://policies.hatena.ne.jp/rule">利用規約</a></li> <li class="footer-list-item footer-list-item--pc"><a href="https://policies.hatena.ne.jp/privacypolicy-ja">プライバシーポリシー</a></li> <li class="footer-list-item footer-list-item--pc"><a href="https://policies.hatena.ne.jp/cookie-policy">利用者情報の外部送信について</a></li> </ul> </div> </div> <div class="footer-inner-group footer-bookmark-sns"> <h2 class="footer-title">公式Twitter</h2> <div class="footer-bookmark-list"> <ul class="footer-list"> <li class="footer-list-item"><a href="https://twitter.com/HatenaBookmark" target="_blank" rel="noopener" data-gtm-click-label="footer-officialTwitter-name">公式アカウント</a></li> <li class="footer-list-item"><a href="https://twitter.com/hatebu" target="_blank" rel="noopener" data-gtm-click-label="footer-hotentryTwitter-name">ホットエントリー</a></li> </ul> </div> </div> <div class="footer-inner-group footer-hatena"> <h2 class="footer-title">はてなのサービス</h2> <ul class="footer-list"> <li class="footer-list-item"><a href="https://hatenablog.com/" data-gtm-label="footerServices-blog">はてなブログ</a></li> <li class="footer-list-item"><a href="https://hatenablog.com/guide/pro?plus_via=hatenabookmark_footer&utm_source=hatenabookmark&utm_medium=referral&utm_campaign=hatenabookmark_to_hatenablog_pro&utm_content=hatenabookmark_footer" data-gtm-label="footerServices-blog-pro">はてなブログPro</a></li> <li class="footer-list-item"><a href="https://q.hatena.ne.jp/" data-gtm-label="footerServices-question">人力検索はてな</a></li> <li class="footer-list-item"><a href="http://d.hatena.ne.jp/" data-gtm-label="footerServices-keyword">はてなブログタグ</a></li> <li class="footer-list-item"><a href="http://hatenanews.com/" data-gtm-label="footerServices-hatenanews">はてなニュース</a></li> <li class="footer-list-item"><a href="https://soredoko.jp/" data-gtm-label="footerServices-soredoko">ソレドコ</a></li> </ul> </div> </div> <div class="footer-bottom"> <div class="footer-app"> <ul> <li class="footer-list-item"><a href="https://apps.apple.com/jp/app/hatenabukkumaku/id354976659?mt=8" target="_blank" rel="noopener" data-gtm-click-label="footer-app-ios"><img src="https://b.st-hatena.com/0f6f9dfc8b21c8af9c2db850a25d9527a7bbe0df/images/v4/public/common/dl-button/appstore@2x.png" alt="App Storeからダウンロード"></a></li> <li class="footer-list-item"><a href="https://play.google.com/store/apps/details?id=com.hatena.android.bookmark&referrer=utm_source%3Dbookmark_sp%26utm_campaign%3Dbookmark_sp_user&hl=ja" target="_blank" rel="noopener" data-gtm-click-label="footer-app-android"><img src="https://b.st-hatena.com/0f6f9dfc8b21c8af9c2db850a25d9527a7bbe0df/images/v4/public/common/dl-button/googleplay@2x.png" alt="Google Playで手に入れよう"></a></li> </ul> </div> <div class="copyright">Copyright © 2005-2025 <a href="http://www.hatena.ne.jp/">Hatena</a>. All Rights Reserved.</div> </div> </div> <div id="touch-footer-ad"></div> <div id="touch-footer-ad-placeholder"></div> <div class="modal-overlay"></div> <script type="text/javascript" src="https://b.st-hatena.com/0f6f9dfc8b21c8af9c2db850a25d9527a7bbe0df/js/v4/bookmark.star.js" async></script> <div class="js-head-notify is-hidden">設定を変更しました<span class="js-head-notify-close-button">x</span></div> </body> </html>