CINXE.COM

<!DOCTYPE html> <html lang="ja" data-page-scope="EntrySearch" data-stable-request-url="https://b.hatena.ne.jp/q/vite" data-device-type="PC" data-sentry-environment="production" data-sentry-sample-rate="0.1" data-entry-search-query="vite" 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>viteの人気記事 316件 - はてなブックマーク</title> <script src="https://b.st-hatena.com/60916d56956324e4a169c0314bee5eba5a44d43a/js/v4/bookmark.js" async></script> <link type="text/css" rel="stylesheet" href="https://b.st-hatena.com/60916d56956324e4a169c0314bee5eba5a44d43a/css/v4/pikaday.css" /> <link type="text/css" rel="stylesheet" href="https://b.st-hatena.com/60916d56956324e4a169c0314bee5eba5a44d43a/css/v4/triangle.css" /> <link type="text/css" rel="stylesheet" href="https://b.st-hatena.com/60916d56956324e4a169c0314bee5eba5a44d43a/css/v4/bookmark.css" /> <link type="text/css" rel="stylesheet" href="https://b.st-hatena.com/60916d56956324e4a169c0314bee5eba5a44d43a/css/v4/bookmark.star.css" /> <link rel="canonical" href="https://b.hatena.ne.jp/q/vite" /> <link rel="next" href="/q/vite?page=2&users=3&target=tag&safe=on&sort=popular&date_range=5y"> <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/60916d56956324e4a169c0314bee5eba5a44d43a/images/v4/public/apple-touch-icon-precomposed.png" /> <link rel="mask-icon" href="https://b.st-hatena.com/60916d56956324e4a169c0314bee5eba5a44d43a/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/60916d56956324e4a169c0314bee5eba5a44d43a/images/v4/public/icons/bookmark.ico" /> <meta name="msapplication-task" content="name=マイブックマーク; action-uri=/my; icon-uri=https://b.st-hatena.com/60916d56956324e4a169c0314bee5eba5a44d43a/images/v4/public/icons/my-bookmark.ico" /> <meta name="msapplication-task" content="name=お気に入りのブックマーク; action-uri=/my/favorite; icon-uri=https://b.st-hatena.com/60916d56956324e4a169c0314bee5eba5a44d43a/images/v4/public/icons/favorite-bookmark.ico" /> <meta name="msapplication-task" content="name=人気エントリー; action-uri=/hotentry; icon-uri=https://b.st-hatena.com/60916d56956324e4a169c0314bee5eba5a44d43a/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/vite?mode=rss&users=3&date_range=5y&safe=on&sort=popular&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%2Fvite" 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/60916d56956324e4a169c0314bee5eba5a44d43a/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/60916d56956324e4a169c0314bee5eba5a44d43a/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/60916d56956324e4a169c0314bee5eba5a44d43a/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/60916d56956324e4a169c0314bee5eba5a44d43a/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="vite" 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/vite?date_range=5y&target=all&safe=on&sort=popular&users=3" >すべて</a></li> <li><a href="/q/vite?date_range=5y&sort=popular&safe=on&target=tag&users=3" class="is-current">タグ</a></li> <li><a href="/q/vite?users=3&date_range=5y&sort=popular&safe=on&target=title" >タイトル</a></li> <li><a href="/q/vite?sort=popular&safe=on&target=text&date_range=5y&users=3" >本文</a></li> </ul> </div> <div class="centerarticle-sidebar-menu"> <h3 class="centerarticle-aside-title">並び順</h3> <ul class="centerarticle-sub-navi"> <li><a href="/q/vite?users=3&target=tag&safe=on&sort=recent&date_range=5y" >新着</a></li> <li><a href="/q/vite?users=3&date_range=5y&safe=on&sort=popular&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/vite?users=1&target=tag&sort=popular&safe=on&date_range=5y" >1 user</a></li> <li><a href="/q/vite?users=3&target=tag&sort=popular&safe=on&date_range=5y" class="is-current">3 users</a></li> <li><a href="/q/vite?users=50&date_range=5y&target=tag&sort=popular&safe=on" >50 users</a></li> <li><a href="/q/vite?users=100&date_range=5y&target=tag&sort=popular&safe=on" >100 users</a></li> <li><a href="/q/vite?sort=popular&safe=on&target=tag&date_range=5y&users=500" >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/vite?users=3&date_range=5y&safe=on&sort=popular&target=tag" class="is-current">オン</a></li> <li><a href="/q/vite?users=3&date_range=5y&safe=off&sort=popular&target=tag" >オフ</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/vite?date_range=all&target=tag&sort=popular&safe=on&users=3" >すべて</a></li> <li><a href="/q/vite?target=tag&safe=on&sort=popular&date_range=w&users=3" >1週間</a></li> <li><a href="/q/vite?target=tag&safe=on&sort=popular&date_range=m&users=3" >1ヶ月</a></li> <li><a href="/q/vite?target=tag&sort=popular&safe=on&date_range=y&users=3" >1年</a></li> </ul> <form method="get" class="js-entrysearch-datepicker-form"> <input value="vite" 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 件 / 316件</p> <div class="entrysearch-bar-inner"> <button class="entrysearch-filter-btn js-entrysearch-filter-btn">絞り込み</button> <a class="entrysearch-sort-btn" href="/q/vite?safe=on&sort=popular&target=tag&date_range=5y&users=3">新着順</a> <a class="entrysearch-sort-btn is-current" href="/q/vite?users=3&date_range=5y&sort=recent&safe=on&target=tag">人気順</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">viteの検索結果</span><span class="entrysearch-result">1 - 40 件 / 316件</span> </h2> <div class="entrysearch-summary-text"> <span>vite</span>に関するエントリは<span>316</span>件あります。 <span>javascript</span>、 <span>react</span>、 <span>開発</span> などが関連タグです。人気エントリには <span>『Chrome拡張つくりかた令和最新版』</span>などがあります。 </div> <div class="entrysearch-related-entries" data-gtm-inview-label="entry-search-recommend-header"> <h3 class="entrysearch-related-title">viteの関連エントリー</h3> <ul class="entrysearch-related-list"> <li class="entrysearch-related-listitem"> <div class="entrysearch-related-entry"> <a href="https://tech.smartcamp.co.jp/entry/try-vite" class="entrysearch-related-image" target="_blank" rel="noopener" data-gtm-click-label="entry-search-recommend-header-c-image"> <img src="https://cdn-ak-scissors.b.st-hatena.com/image/square/b28afa83bf5592f21f4885dca89d8312b6d3e56b/height=288;version=1;width=512/https%3A%2F%2Fcdn-ak.f.st-hatena.com%2Fimages%2Ffotolife%2Fm%2Fmkt0225%2F20200618%2F20200618154631.png" alt="フロントエンドの爆速な開発サーバを実現する Vite を試してみた - SMARTCAMP Engineer Blog"> </a> <h4 class="entrysearch-related-entry-title"> <a href="https://tech.smartcamp.co.jp/entry/try-vite" target="_blank" rel="noopener" data-gtm-click-label="entry-search-recommend-header-c-title"> フロントエンドの爆速な開発サーバを実現する Vite を試してみた - SMARTCAMP Engineer Blog </a> </h4> <a href="/entry/s/tech.smartcamp.co.jp/entry/try-vite" class="entrysearch-related-users" data-gtm-click-label="entry-search-recommend-header-c-users"> 177 users </a> </div> </li> <li class="entrysearch-related-listitem"> <div class="entrysearch-related-entry"> <a href="https://dev.henry.jp/entry/replace-vite-with-nextjs" class="entrysearch-related-image" target="_blank" rel="noopener" data-gtm-click-label="entry-search-recommend-header-c-image"> <img src="https://cdn-ak-scissors.b.st-hatena.com/image/square/da46e9ed4b52c6bc7de948f21f8161f30f76702a/height=288;version=1;width=512/https%3A%2F%2Fcdn.image.st-hatena.com%2Fimage%2Fscale%2F1eac8cda65247a4956a6f77acaf0d6999207be06%2Fbackend%3Dimagemagick%3Bversion%3D1%3Bwidth%3D1300%2Fhttps%253A%252F%252Fcdn-ak.f.st-hatena.com%252Fimages%252Ffotolife%252Fs%252Fsumiren_t%252F20230529%252F20230529173907.png" alt="フロントエンドをViteからNext.jsに書き換えた話〜パフォーマンス編〜 - 株式会社ヘンリーエンジニアブログ"> </a> <h4 class="entrysearch-related-entry-title"> <a href="https://dev.henry.jp/entry/replace-vite-with-nextjs" target="_blank" rel="noopener" data-gtm-click-label="entry-search-recommend-header-c-title"> フロントエンドをViteからNext.jsに書き換えた話〜パフォーマンス編〜 - 株式会社ヘンリーエンジニアブログ </a> </h4> <a href="/entry/s/dev.henry.jp/entry/replace-vite-with-nextjs" class="entrysearch-related-users" data-gtm-click-label="entry-search-recommend-header-c-users"> 98 users </a> </div> </li> <li class="entrysearch-related-listitem"> <div class="entrysearch-related-entry"> <a href="https://blog.cybozu.io/entry/2022/03/18/100000" class="entrysearch-related-image" target="_blank" rel="noopener" data-gtm-click-label="entry-search-recommend-header-c-image"> <img src="https://cdn-ak-scissors.b.st-hatena.com/image/square/23ee031d0d5929ee4c3320e2b99ab7a8a3bc5115/height=288;version=1;width=512/https%3A%2F%2Fcdn.image.st-hatena.com%2Fimage%2Fscale%2Fc23ea67d7da5bafda29ee0962a14616a7dfefff3%2Fbackend%3Dimagemagick%3Bversion%3D1%3Bwidth%3D1300%2Fhttps%253A%252F%252Fcdn-ak.f.st-hatena.com%252Fimages%252Ffotolife%252Fc%252Fcybozuinsideout%252F20220317%252F20220317133454.jpg" alt="Playwright & Vite ではじめる脱レガシー向け軽量 Visual Regression Test - Cybozu Inside Out | サイボウズエンジニアのブログ"> </a> <h4 class="entrysearch-related-entry-title"> <a href="https://blog.cybozu.io/entry/2022/03/18/100000" target="_blank" rel="noopener" data-gtm-click-label="entry-search-recommend-header-c-title"> Playwright & Vite ではじめる脱レガシー向け軽量 Visual Regression Test - Cybozu Inside Out | サイボウズエンジニアのブログ </a> </h4> <a href="/entry/s/blog.cybozu.io/entry/2022/03/18/100000" class="entrysearch-related-users" data-gtm-click-label="entry-search-recommend-header-c-users"> 80 users </a> </div> </li> <li class="entrysearch-related-listitem"> <div class="entrysearch-related-entry"> <a href="https://www.memory-lovers.blog/entry/2023/01/14/150000" class="entrysearch-related-image" target="_blank" rel="noopener" data-gtm-click-label="entry-search-recommend-header-c-image"> <img src="https://cdn-ak-scissors.b.st-hatena.com/image/square/4e86aaf952a1b837054b7100cc4bc9b3dc9d80cc/height=288;version=1;width=512/https%3A%2F%2Fcdn.image.st-hatena.com%2Fimage%2Fscale%2F26f987554551c355e35d0c3b923c5df63c8736c7%2Fbackend%3Dimagemagick%3Bversion%3D1%3Bwidth%3D1300%2Fhttps%253A%252F%252Fcdn.user.blog.st-hatena.com%252Fdefault_entry_og_image%252F96414889%252F1564237897922137" alt="Vite/VueでChrome拡張機能を作ってみる | 4. 環境構築/開発編 - くらげになりたい。"> </a> <h4 class="entrysearch-related-entry-title"> <a href="https://www.memory-lovers.blog/entry/2023/01/14/150000" target="_blank" rel="noopener" data-gtm-click-label="entry-search-recommend-header-c-title"> Vite/VueでChrome拡張機能を作ってみる | 4. 環境構築/開発編 - くらげになりたい。 </a> </h4> <a href="/entry/s/www.memory-lovers.blog/entry/2023/01/14/150000" class="entrysearch-related-users" data-gtm-click-label="entry-search-recommend-header-c-users"> 72 users </a> </div> </li> <li class="entrysearch-related-listitem"> <div class="entrysearch-related-entry"> <a href="https://blog.smartbank.co.jp/entry/2022/04/25/create-react-app-to-vite" class="entrysearch-related-image" target="_blank" rel="noopener" data-gtm-click-label="entry-search-recommend-header-c-image"> <img src="https://cdn-ak-scissors.b.st-hatena.com/image/square/fb03c17304a37b28ebc7264543db307361c6ac8d/height=288;version=1;width=512/https%3A%2F%2Fcdn-ak.f.st-hatena.com%2Fimages%2Ffotolife%2Fo%2Fohbarye%2F20220421%2F20220421200839.png" alt="CRAからViteへ移行して190倍高速なdev server起動を得る - inSmartBank"> </a> <h4 class="entrysearch-related-entry-title"> <a href="https://blog.smartbank.co.jp/entry/2022/04/25/create-react-app-to-vite" target="_blank" rel="noopener" data-gtm-click-label="entry-search-recommend-header-c-title"> CRAからViteへ移行して190倍高速なdev server起動を得る - inSmartBank </a> </h4> <a href="/entry/s/blog.smartbank.co.jp/entry/2022/04/25/create-react-app-to-vite" class="entrysearch-related-users" data-gtm-click-label="entry-search-recommend-header-c-users"> 56 users </a> </div> </li> <li class="entrysearch-related-listitem"> <div class="entrysearch-related-entry"> <a href="https://inside.pixiv.blog/2022/07/21/103000" class="entrysearch-related-image" target="_blank" rel="noopener" data-gtm-click-label="entry-search-recommend-header-c-image"> <img src="https://cdn-ak-scissors.b.st-hatena.com/image/square/bbd02bc3412a23e36d200aab7c92d63fd832b5ad/height=288;version=1;width=512/https%3A%2F%2Fcdn.image.st-hatena.com%2Fimage%2Fscale%2Ffca3f9db3616e4e9da93901d19b95cfcdc7a3ca5%2Fbackend%3Dimagemagick%3Bversion%3D1%3Bwidth%3D1300%2Fhttps%253A%252F%252Fcdn-ak.f.st-hatena.com%252Fimages%252Ffotolife%252Fp%252Fpxvpxv%252F20220712%252F20220712155300.png" alt="vite で最高の開発体験を手に入れる - pixiv inside"> </a> <h4 class="entrysearch-related-entry-title"> <a href="https://inside.pixiv.blog/2022/07/21/103000" target="_blank" rel="noopener" data-gtm-click-label="entry-search-recommend-header-c-title"> vite で最高の開発体験を手に入れる - pixiv inside </a> </h4> <a href="/entry/s/inside.pixiv.blog/2022/07/21/103000" class="entrysearch-related-users" data-gtm-click-label="entry-search-recommend-header-c-users"> 55 users </a> </div> </li> <li class="entrysearch-related-listitem"> <div class="entrysearch-related-entry"> <a href="https://tech.smartcamp.co.jp/entry/look-into-vite-2" class="entrysearch-related-image" target="_blank" rel="noopener" data-gtm-click-label="entry-search-recommend-header-c-image"> <img src="https://cdn-ak-scissors.b.st-hatena.com/image/square/5dfdf111ff4af7ef1803327c7eb7db937e2e9f71/height=288;version=1;width=512/https%3A%2F%2Fcdn-ak.f.st-hatena.com%2Fimages%2Ffotolife%2Fs%2Fsmartcamp%2F20210225%2F20210225174211.png" alt="フロントエンドの爆速な開発サーバを実現する Vite がバージョン2.0になったので変更点を眺めてみる - SMARTCAMP Engineer Blog"> </a> <h4 class="entrysearch-related-entry-title"> <a href="https://tech.smartcamp.co.jp/entry/look-into-vite-2" target="_blank" rel="noopener" data-gtm-click-label="entry-search-recommend-header-c-title"> フロントエンドの爆速な開発サーバを実現する Vite がバージョン2.0になったので変更点を眺めてみる - SMARTCAMP Engineer Blog </a> </h4> <a href="/entry/s/tech.smartcamp.co.jp/entry/look-into-vite-2" class="entrysearch-related-users" data-gtm-click-label="entry-search-recommend-header-c-users"> 38 users </a> </div> </li> <li class="entrysearch-related-listitem"> <div class="entrysearch-related-entry"> <a href="https://devblog.thebase.in/entry/2021/07/29/113335" class="entrysearch-related-image" target="_blank" rel="noopener" data-gtm-click-label="entry-search-recommend-header-c-image"> <img src="https://cdn-ak-scissors.b.st-hatena.com/image/square/07c8e3e4c7d0417e4bccaf56da030af6f28f47c6/height=288;version=1;width=512/https%3A%2F%2Fcdn.image.st-hatena.com%2Fimage%2Fscale%2F74d1e1fc4b99f6a9ee4bac174552af168f2fda64%2Fbackend%3Dimagemagick%3Bversion%3D1%3Bwidth%3D1300%2Fhttps%253A%252F%252Fcdn-ak.f.st-hatena.com%252Fimages%252Ffotolife%252Fr%252Fryamakuchi%252F20210721%252F20210721123706.png" alt="Frontend Weekly LT（社内勉強会）で「Vite」について LT しました - BASEプロダクトチームブログ"> </a> <h4 class="entrysearch-related-entry-title"> <a href="https://devblog.thebase.in/entry/2021/07/29/113335" target="_blank" rel="noopener" data-gtm-click-label="entry-search-recommend-header-c-title"> Frontend Weekly LT（社内勉強会）で「Vite」について LT しました - BASEプロダクトチームブログ </a> </h4> <a href="/entry/s/devblog.thebase.in/entry/2021/07/29/113335" class="entrysearch-related-users" data-gtm-click-label="entry-search-recommend-header-c-users"> 25 users </a> </div> </li> <li class="entrysearch-related-listitem"> <div class="entrysearch-related-entry"> <a href="https://www.m3tech.blog/entry/2023/08/22/174500" class="entrysearch-related-image" target="_blank" rel="noopener" data-gtm-click-label="entry-search-recommend-header-c-image"> <img src="https://cdn-ak-scissors.b.st-hatena.com/image/square/492cbcf5a3256c3bcd3ef9e6fd8ff100f64428a4/height=288;version=1;width=512/https%3A%2F%2Fcdn.image.st-hatena.com%2Fimage%2Fscale%2F3556922e58e99b0f5222a51544244238bb639222%2Fbackend%3Dimagemagick%3Bversion%3D1%3Bwidth%3D1300%2Fhttps%253A%252F%252Fcdn-ak.f.st-hatena.com%252Fimages%252Ffotolife%252Fm%252Fm3tech%252F20230822%252F20230822174512.jpg" alt="ViteとVitestで開発のリズムを上げる - エムスリーテックブログ"> </a> <h4 class="entrysearch-related-entry-title"> <a href="https://www.m3tech.blog/entry/2023/08/22/174500" target="_blank" rel="noopener" data-gtm-click-label="entry-search-recommend-header-c-title"> ViteとVitestで開発のリズムを上げる - エムスリーテックブログ </a> </h4> <a href="/entry/s/www.m3tech.blog/entry/2023/08/22/174500" class="entrysearch-related-users" data-gtm-click-label="entry-search-recommend-header-c-users"> 23 users </a> </div> </li> <li class="entrysearch-related-listitem"> <div class="entrysearch-related-entry"> <a href="https://tech.gamewith.co.jp/entry/2024/09/18/174151" class="entrysearch-related-image" target="_blank" rel="noopener" data-gtm-click-label="entry-search-recommend-header-c-image"> <img src="https://cdn-ak-scissors.b.st-hatena.com/image/square/f571815a2220350883621f2c374e4ea1338db4e6/height=288;version=1;width=512/https%3A%2F%2Fcdn.image.st-hatena.com%2Fimage%2Fscale%2F0df109d8afd3df08d9e4c4f292516f594fdd34d6%2Fbackend%3Dimagemagick%3Bversion%3D1%3Bwidth%3D1300%2Fhttps%253A%252F%252Fcdn-ak.f.st-hatena.com%252Fimages%252Ffotolife%252Ft%252Ftiwu%252F20240919%252F20240919164237.png" alt="4年運用した Vue2 を幾度の挫折を乗り越えて Vue3 にアップグレードした(vite に移行した)話 #GameWith #TechWith - GameWith Developer Blog"> </a> <h4 class="entrysearch-related-entry-title"> <a href="https://tech.gamewith.co.jp/entry/2024/09/18/174151" target="_blank" rel="noopener" data-gtm-click-label="entry-search-recommend-header-c-title"> 4年運用した Vue2 を幾度の挫折を乗り越えて Vue3 にアップグレードした(vite に移行した)話 #GameWith #TechWith - GameWith Developer Blog </a> </h4> <a href="/entry/s/tech.gamewith.co.jp/entry/2024/09/18/174151" class="entrysearch-related-users" data-gtm-click-label="entry-search-recommend-header-c-users"> 18 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 "> <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://r7kamura.com/articles/2022-05-07-chrome-extension-dev-2022"><span>あとで読む</span> </button> </div> <div class="centerarticle-entry-header"> <h3 class="centerarticle-entry-title"> <a href="https://r7kamura.com/articles/2022-05-07-chrome-extension-dev-2022" 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%2Fr7kamura.com%2Farticles%2F2022-05-07-chrome-extension-dev-2022" alt="">Chrome拡張つくりかた令和最新版 </a> </h3> <ul class="centerarticle-entry-data"> <li> <span class="centerarticle-users"> <a href="/entry/s/r7kamura.com/articles/2022-05-07-chrome-extension-dev-2022" class="js-keyboard-entry-page-openable" title="Chrome拡張つくりかた令和最新版 (995 ブックマーク)" data-gtm-click-label="entry-search-result-item-users"> 995 users </a> </span> </li> <li> <a href="/site/r7kamura.com/" title="『r7kamura.com』の新着エントリー" data-gtm-click-label="entry-search-result-item-site-search-url"> r7kamura.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/07</span></li> </ul> </div> <div class="centerarticle-entry-contents "> <div class="centerarticle-entry-item"> <p class="centerarticle-entry-summary">数年ぶりにChrome拡張のつくりかたを調べた。本当に何も分からなかったので、Twitterで「2022年にChrome拡張つくりたかったら何見て学べばいい？」とつぶやいてみたところ、何人かの人が教えてくれた。教えてもらった中から幾つかのリンク先を紹介するような形で記述していく。 Create a Vite-React Chrome Extension in 90 seconds - DEV Community 2022年時点だと比較的新しめのフロントエンド向けツールであるviteと、viteのChrome拡張向けプラグインである@crxjs/vite-pluginを使ってChrome拡張をつくってみよう、という記事。今回自分は主にこれを参考にしながら開発を進めた。Reactと言っているが、自分のChrome拡張ではUIは存在しなかったので、Reactに関する部分は読み飛ばして、vite</p> <ul class="entrysearch-entry-tags"> <li><a href="/q/chrome" data-gtm-click-label="entry-search-result-item-tag">chrome</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/extension" data-gtm-click-label="entry-search-result-item-tag">extension</a></li> <li><a href="/q/javascript" data-gtm-click-label="entry-search-result-item-tag">javascript</a></li> <li><a href="/q/%E5%85%A5%E9%96%80" 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/%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> <li><a href="/q/react" data-gtm-click-label="entry-search-result-item-tag">react</a></li> <li><a href="/q/%E6%8B%A1%E5%BC%B5%E6%A9%9F%E8%83%BD" 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://r7kamura.com/articles/2022-05-07-chrome-extension-dev-2022"> <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://ics.media/entry/210708/"><span>あとで読む</span> </button> </div> <div class="centerarticle-entry-header"> <h3 class="centerarticle-entry-title"> <a href="https://ics.media/entry/210708/" 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%2Fics.media%2Fentry%2F210708%2F" alt="">jQueryからTypeScript・Reactまで - Viteで始めるモダンで高速な開発環境構築 - ICS MEDIA </a> </h3> <ul class="centerarticle-entry-data"> <li> <span class="centerarticle-users"> <a href="/entry/s/ics.media/entry/210708/" class="js-keyboard-entry-page-openable" title="jQueryからTypeScript・Reactまで - Viteで始めるモダンで高速な開発環境構築 - ICS MEDIA (561 ブックマーク)" data-gtm-click-label="entry-search-result-item-users"> 561 users </a> </span> </li> <li> <a href="/site/ics.media/" title="『ics.media』の新着エントリー" data-gtm-click-label="entry-search-result-item-site-search-url"> ics.media </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/07/08</span></li> </ul> </div> <div class="centerarticle-entry-contents has-image"> <div class="centerarticle-entry-item"> <p class="centerarticle-entry-summary">Vite（ヴィート＝フランス語で「速い」の意味）は2020年に発表された新しいフロントエンドのビルドツールです。開発者がVue.jsの作者であるEvan You氏であるため、Vue.jsのツールであると誤解されることもありますが、プレーンなJavaScript（バニラJS）からVue.js・React・Svelteといった流行のフレームワークまで、さまざまな環境で利用できる汎用的なツールです。位置付けとしてはwebpackのようなバンドラーと呼ばれるものに近い存在ですが、それだけではありません。この記事では、Viteを導入してプレーンなJavaScriptから、TypeScript+Vue.js・Reactといったフレームワークまで、快適な開発環境を手に入れる方法を紹介します。この記事で紹介すること： Viteの特徴と基本の仕組み基本の使い方 Vite + SCSS Vite +</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/javascript" data-gtm-click-label="entry-search-result-item-tag">javascript</a></li> <li><a href="/q/vite" data-gtm-click-label="entry-search-result-item-tag">vite</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/%E9%96%8B%E7%99%BA" data-gtm-click-label="entry-search-result-item-tag">開発</a></li> <li><a href="/q/Vue" data-gtm-click-label="entry-search-result-item-tag">Vue</a></li> <li><a href="/q/vue.js" data-gtm-click-label="entry-search-result-item-tag">vue.js</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/frontend" data-gtm-click-label="entry-search-result-item-tag">frontend</a></li> </ul> <div class="following-bookmarks-container js-following-bookmarks-container" data-entry-url="https://ics.media/entry/210708/"> <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://ics.media/entry/210708/" class="centerarticle-entry-image" target="_blank" rel="noopener"> <img src="https://cdn-ak-scissors.b.st-hatena.com/image/square/b208b38d813eede539bb3df31c9030c10403751d/height=288;version=1;width=512/https%3A%2F%2Fics.media%2Fentry%2F210708%2Fimages%2Feyecatch.png" alt="jQueryからTypeScript・Reactまで - Viteで始めるモダンで高速な開発環境構築 - ICS MEDIA" 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/sakito/2022nian-niqi-kita-hurontoendonobian-hua"><span>あとで読む</span> </button> </div> <div class="centerarticle-entry-header"> <h3 class="centerarticle-entry-title"> <a href="https://speakerdeck.com/sakito/2022nian-niqi-kita-hurontoendonobian-hua" 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%2Fsakito%2F2022nian-niqi-kita-hurontoendonobian-hua" alt="">2022年に起きたフロントエンドの変化 </a> </h3> <ul class="centerarticle-entry-data"> <li> <span class="centerarticle-users"> <a href="/entry/s/speakerdeck.com/sakito/2022nian-niqi-kita-hurontoendonobian-hua" class="js-keyboard-entry-page-openable" title="2022年に起きたフロントエンドの変化 (508 ブックマーク)" data-gtm-click-label="entry-search-result-item-users"> 508 users </a> </span> </li> <li> <a href="/site/speakerdeck.com/sakito" title="『speakerdeck.com/sakito』の新着エントリー" data-gtm-click-label="entry-search-result-item-site-search-url"> speakerdeck.com/sakito </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/21</span></li> </ul> </div> <div class="centerarticle-entry-contents has-image"> <div class="centerarticle-entry-item"> <p class="centerarticle-entry-summary">Burikaigi 2023 https://burikaigi.dev/ Twitter https://twitter.com/__sakito__</p> <ul class="entrysearch-entry-tags"> <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/%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/frontend" data-gtm-click-label="entry-search-result-item-tag">frontend</a></li> <li><a href="/q/javascript" data-gtm-click-label="entry-search-result-item-tag">javascript</a></li> <li><a href="/q/css" data-gtm-click-label="entry-search-result-item-tag">css</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/html" data-gtm-click-label="entry-search-result-item-tag">html</a></li> <li><a href="/q/web" data-gtm-click-label="entry-search-result-item-tag">web</a></li> <li><a href="/q/slide" data-gtm-click-label="entry-search-result-item-tag">slide</a></li> <li><a href="/q/framework" data-gtm-click-label="entry-search-result-item-tag">framework</a></li> </ul> <div class="following-bookmarks-container js-following-bookmarks-container" data-entry-url="https://speakerdeck.com/sakito/2022nian-niqi-kita-hurontoendonobian-hua"> <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/sakito/2022nian-niqi-kita-hurontoendonobian-hua" class="centerarticle-entry-image" target="_blank" rel="noopener"> <img src="https://cdn-ak-scissors.b.st-hatena.com/image/square/b30b65524b563bfd5476768a937844af5d42902f/height=288;version=1;width=512/https%3A%2F%2Ffiles.speakerdeck.com%2Fpresentations%2F9bfda5f907f648fb9fb3b24d12cf1322%2Fslide_0.jpg%3F24166032" alt="2022年に起きたフロントエンドの変化" 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/antez/articles/58307946cf4f3e"><span>あとで読む</span> </button> </div> <div class="centerarticle-entry-header"> <h3 class="centerarticle-entry-title"> <a href="https://zenn.dev/antez/articles/58307946cf4f3e" 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%2Fantez%2Farticles%2F58307946cf4f3e" alt="">やっぱりwebpackがわからない（エピソード1） </a> </h3> <ul class="centerarticle-entry-data"> <li> <span class="centerarticle-users"> <a href="/entry/s/zenn.dev/antez/articles/58307946cf4f3e" class="js-keyboard-entry-page-openable" title="やっぱりwebpackがわからない（エピソード1） (397 ブックマーク)" data-gtm-click-label="entry-search-result-item-users"> 397 users </a> </span> </li> <li> <a href="/site/zenn.dev/antez" title="『zenn.dev/antez』の新着エントリー" data-gtm-click-label="entry-search-result-item-site-search-url"> zenn.dev/antez </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/01/29</span></li> </ul> </div> <div class="centerarticle-entry-contents has-image"> <div class="centerarticle-entry-item"> <p class="centerarticle-entry-summary">やっぱりwebpackがわからない（エピソード2）、そもそもnpmからわからないを公開しました。 webpackがわからない最近はViteが注目されだして、実際にとても良いビルドツールです。Vue.jsのEvan Youさんが開発しただけのことはありますね。ネーミングもイカしてます。しかし、だからといって、では開発環境にViteを採用しようと簡単にはできないのが、業務の辛い所です。新しい技術を採用して、「わしが全責任を引き受けるぜよ」というThe 男気！な人はなかなかいません。したがって、当分はwebpackを使い続けることになるのですが、これが未だによくわからないという人が意外と多いです。フロントエンドプログラミングの初心者に近い人などは、この段階でつまずくことにより、すっかり自信をなくしてしまうこともあります。ですが一先ず安心してください。webpackを含むこれらフロントエンド</p> <ul class="entrysearch-entry-tags"> <li><a href="/q/webpack" data-gtm-click-label="entry-search-result-item-tag">webpack</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/%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/%E9%96%8B%E7%99%BA" data-gtm-click-label="entry-search-result-item-tag">開発</a></li> <li><a href="/q/npm" data-gtm-click-label="entry-search-result-item-tag">npm</a></li> <li><a href="/q/Node.js" data-gtm-click-label="entry-search-result-item-tag">Node.js</a></li> <li><a href="/q/techfeed" data-gtm-click-label="entry-search-result-item-tag">techfeed</a></li> <li><a href="/q/frontend" data-gtm-click-label="entry-search-result-item-tag">frontend</a></li> <li><a href="/q/web%E5%88%B6%E4%BD%9C" 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://zenn.dev/antez/articles/58307946cf4f3e"> <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/antez/articles/58307946cf4f3e" class="centerarticle-entry-image" target="_blank" rel="noopener"> <img src="https://cdn-ak-scissors.b.st-hatena.com/image/square/7839345771d7633fdfbd84b94bb70c411f394d48/height=288;version=1;width=512/https%3A%2F%2Fres.cloudinary.com%2Fzenn%2Fimage%2Fupload%2Fs--RYTFcemj--%2Fc_fit%252Cg_north_west%252Cl_text%3Anotosansjp-medium.otf_55%3A%2525E3%252582%252584%2525E3%252581%2525A3%2525E3%252581%2525B1%2525E3%252582%25258Awebpack%2525E3%252581%25258C%2525E3%252582%25258F%2525E3%252581%25258B%2525E3%252582%252589%2525E3%252581%2525AA%2525E3%252581%252584%2525EF%2525BC%252588%2525E3%252582%2525A8%2525E3%252583%252594%2525E3%252582%2525BD%2525E3%252583%2525BC%2525E3%252583%2525891%2525EF%2525BC%252589%252Cw_1010%252Cx_90%252Cy_100%2Fg_south_west%252Cl_text%3Anotosansjp-medium.otf_37%3AANTEZ%252Cx_203%252Cy_121%2Fg_south_west%252Ch_90%252Cl_fetch%3AaHR0cHM6Ly9zdG9yYWdlLmdvb2dsZWFwaXMuY29tL3plbm4tdXNlci11cGxvYWQvYXZhdGFyL2QxNTNhMDhiNDkuanBlZw%3D%3D%252Cr_max%252Cw_90%252Cx_87%252Cy_95%2Fv1627283836%2Fdefault%2Fog-base-w1200-v2.png" alt="やっぱりwebpackがわからない（エピソード1）" 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">viteの関連エントリー</h3> <ul class="entrysearch-related-list"> <li class="entrysearch-related-listitem"> <div class="entrysearch-related-entry"> <a href="https://forest.watch.impress.co.jp/docs/serial/yajiuma/2004907.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/8c489190775e701853e5ccb65603b57d18bf5c2b/height=288;version=1;width=512/https%3A%2F%2Fforest.watch.impress.co.jp%2Fimg%2Fwf%2Flist%2F2004%2F907%2Fimage_top.jpg" alt="江戸時代の「Google マップ」？　「れきちず」が全国に対応／主要街道（全国約6,400km）に関するデータセットもオープンデータに【やじうまの杜】"> </a> <h4 class="entrysearch-related-entry-title"> <a href="https://forest.watch.impress.co.jp/docs/serial/yajiuma/2004907.html" target="_blank" rel="noopener" data-gtm-click-label="entry-search-recommend-middle-title"> 江戸時代の「Google マップ」？　「れきちず」が全国に対応／主要街道（全国約6,400km）に関するデータセットもオープンデータに【やじうまの杜】 </a> </h4> <a href="/entry/s/forest.watch.impress.co.jp/docs/serial/yajiuma/2004907.html" class="entrysearch-related-users" data-gtm-click-label="entry-search-recommend-middle-users"> 210 users </a> </div> </li> <li class="entrysearch-related-listitem"> <div class="entrysearch-related-entry"> <a href="https://zenn.dev/miguel/articles/f052de93fc9980" 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/54a5a8a8be81a94fee1da6718bd7aba4dc1dd525/height=288;version=1;width=512/https%3A%2F%2Fres.cloudinary.com%2Fzenn%2Fimage%2Fupload%2Fs--m30b0s3t--%2Fc_fit%252Cg_north_west%252Cl_text%3Anotosansjp-medium.otf_55%3ARust%2525E3%252581%25258C%2525E5%2525AB%25258C%2525E3%252581%252584%2525E3%252581%2525A7%2525E3%252581%252599%2525E3%252580%252582%252Cw_1010%252Cx_90%252Cy_100%2Fg_south_west%252Cl_text%3Anotosansjp-medium.otf_37%3A%2525E3%252583%252591%2525E3%252583%2525A9%2525E3%252583%252583%2525E3%252582%2525B3%2525E3%252583%2525AA%2525E3%252583%2525BC%252Cx_203%252Cy_121%2Fg_south_west%252Ch_90%252Cl_fetch%3AaHR0cHM6Ly9zdG9yYWdlLmdvb2dsZWFwaXMuY29tL3plbm4tdXNlci11cGxvYWQvYXZhdGFyLzU0YWNhNjJjMDQuanBlZw%3D%3D%252Cr_max%252Cw_90%252Cx_87%252Cy_95%2Fv1627283836%2Fdefault%2Fog-base-w1200-v2.png" alt="Rustが嫌いです。"> </a> <h4 class="entrysearch-related-entry-title"> <a href="https://zenn.dev/miguel/articles/f052de93fc9980" target="_blank" rel="noopener" data-gtm-click-label="entry-search-recommend-middle-title"> Rustが嫌いです。 </a> </h4> <a href="/entry/s/zenn.dev/miguel/articles/f052de93fc9980" class="entrysearch-related-users" data-gtm-click-label="entry-search-recommend-middle-users"> 87 users </a> </div> </li> <li class="entrysearch-related-listitem"> <div class="entrysearch-related-entry"> <a href="https://dev.classmethod.jp/articles/mcp-server-without-local-credentials-cloudflare/" 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/7d174b13fffb13fef814a0e9b1bedb104c99886f/height=288;version=1;width=512/https%3A%2F%2Fimages.ctfassets.net%2Fct0aopd36mqt%2F4AJd3M26yescaNaY21CYmQ%2F9730e95c53a7b3049c6da6d4c0b1dec9%2Fmcp.png" alt="Cloudflareで実現！ローカル認証情報不要のMCP | DevelopersIO"> </a> <h4 class="entrysearch-related-entry-title"> <a href="https://dev.classmethod.jp/articles/mcp-server-without-local-credentials-cloudflare/" target="_blank" rel="noopener" data-gtm-click-label="entry-search-recommend-middle-title"> Cloudflareで実現！ローカル認証情報不要のMCP | DevelopersIO </a> </h4> <a href="/entry/s/dev.classmethod.jp/articles/mcp-server-without-local-credentials-cloudflare/" class="entrysearch-related-users" data-gtm-click-label="entry-search-recommend-middle-users"> 96 users </a> </div> </li> <li class="entrysearch-related-listitem"> <div class="entrysearch-related-entry"> <a href="https://zenn.dev/ryoppippi/articles/1eb7fbe9042a88" 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/6eef0ef0d3931ebe235604f621e3221cb073acbf/height=288;version=1;width=512/https%3A%2F%2Fres.cloudinary.com%2Fzenn%2Fimage%2Fupload%2Fs--XIWO1aC4--%2Fc_fit%252Cg_north_west%252Cl_text%3Anotosansjp-medium.otf_55%3ASiteMCP%25253A%252520%2525E4%2525BB%2525BB%2525E6%252584%25258F%2525E3%252581%2525AE%2525E3%252582%2525B5%2525E3%252582%2525A4%2525E3%252583%252588%2525E3%252582%252592%2525E4%2525B8%2525B8%2525E3%252581%252594%2525E3%252581%2525A8MCP%2525E3%252582%2525B5%2525E3%252583%2525BC%2525E3%252583%252590%2525E3%252583%2525BC%2525E5%25258C%252596%252Cw_1010%252Cx_90%252Cy_100%2Fg_south_west%252Cl_text%3Anotosansjp-medium.otf_37%3Aryoppippi%252Cx_203%252Cy_121%2Fg_south_west%252Ch_90%252Cl_fetch%3AaHR0cHM6Ly9zdG9yYWdlLmdvb2dsZWFwaXMuY29tL3plbm4tdXNlci11cGxvYWQvYXZhdGFyL2MzNDU0MTQ1MTMuanBlZw%3D%3D%252Cr_max%252Cw_90%252Cx_87%252Cy_95%2Fv1627283836%2Fdefault%2Fog-base-w1200-v2.png" alt="SiteMCP: 任意のサイトを丸ごとMCPサーバー化"> </a> <h4 class="entrysearch-related-entry-title"> <a href="https://zenn.dev/ryoppippi/articles/1eb7fbe9042a88" target="_blank" rel="noopener" data-gtm-click-label="entry-search-recommend-middle-title"> SiteMCP: 任意のサイトを丸ごとMCPサーバー化 </a> </h4> <a href="/entry/s/zenn.dev/ryoppippi/articles/1eb7fbe9042a88" class="entrysearch-related-users" data-gtm-click-label="entry-search-recommend-middle-users"> 83 users </a> </div> </li> <li class="entrysearch-related-listitem"> <div class="entrysearch-related-entry"> <a href="https://levtech.jp/media/article/focus/detail_647/" 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/d3641714586537dad58239037d9e01d63dc8bcae/height=288;version=1;width=512/https%3A%2F%2Flevtech.jp%2Fmedia%2Fwp-content%2Fuploads%2F2025%2F04%2F20240407shoulder.jpg" alt="分割キーボードの「肩こり改善」効果、医学的に見てどう？ “デスクワーク痛”対策の現実解を求めて【フォーカス】レバテックラボ（レバテックLAB）"> </a> <h4 class="entrysearch-related-entry-title"> <a href="https://levtech.jp/media/article/focus/detail_647/" target="_blank" rel="noopener" data-gtm-click-label="entry-search-recommend-middle-title"> 分割キーボードの「肩こり改善」効果、医学的に見てどう？ “デスクワーク痛”対策の現実解を求めて【フォーカス】レバテックラボ（レバテックLAB） </a> </h4> <a href="/entry/s/levtech.jp/media/article/focus/detail_647/" class="entrysearch-related-users" data-gtm-click-label="entry-search-recommend-middle-users"> 226 users </a> </div> </li> <li class="entrysearch-related-listitem"> <div class="entrysearch-related-entry"> <a href="https://note.com/koppi4605/n/n22c6ccf2d24d" 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/0fb294a60cc0dc41e08e3032c767518c87de0e0b/height=288;version=1;width=512/https%3A%2F%2Fassets.st-note.com%2Fproduction%2Fuploads%2Fimages%2F182999352%2Frectangle_large_type_2_df1e4f9943b7ede5f1c25db57a694059.png%3Ffit%3Dbounds%26quality%3D85%26width%3D1280" alt="UIの状態設計、迷ったらこの整理法！｜koppi"> </a> <h4 class="entrysearch-related-entry-title"> <a href="https://note.com/koppi4605/n/n22c6ccf2d24d" target="_blank" rel="noopener" data-gtm-click-label="entry-search-recommend-middle-title"> UIの状態設計、迷ったらこの整理法！｜koppi </a> </h4> <a href="/entry/s/note.com/koppi4605/n/n22c6ccf2d24d" class="entrysearch-related-users" data-gtm-click-label="entry-search-recommend-middle-users"> 148 users </a> </div> </li> <li class="entrysearch-related-listitem"> <div class="entrysearch-related-entry"> <a href="https://gigazine.net/news/20250408-google-ai-search-websites-traffic-plunge/" 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/f796d3aaae87dad6bce9cac96ea999f7cde76556/height=288;version=1;width=512/https%3A%2F%2Fi.gzn.jp%2Fimg%2F2025%2F04%2F08%2Fgoogle-ai-search-websites-traffic-plunge%2F00.jpg" alt="Google検索に「AIによる概要」が表示されるようになったせいでウェブサイトのトラフィックが急減したとの報道"> </a> <h4 class="entrysearch-related-entry-title"> <a href="https://gigazine.net/news/20250408-google-ai-search-websites-traffic-plunge/" target="_blank" rel="noopener" data-gtm-click-label="entry-search-recommend-middle-title"> Google検索に「AIによる概要」が表示されるようになったせいでウェブサイトのトラフィックが急減したとの報道 </a> </h4> <a href="/entry/s/gigazine.net/news/20250408-google-ai-search-websites-traffic-plunge/" class="entrysearch-related-users" data-gtm-click-label="entry-search-recommend-middle-users"> 49 users </a> </div> </li> <li class="entrysearch-related-listitem"> <div class="entrysearch-related-entry"> <a href="https://anond.hatelabo.jp/20250408142401" 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/b1638cdb5807a4788e4ba3c1109a984166e095fc/height=288;version=1;width=512/https%3A%2F%2Fanond.hatelabo.jp%2Fimages%2Fog-image-1500.gif" alt="ChatGPT (Monday) とポン酢の件"> </a> <h4 class="entrysearch-related-entry-title"> <a href="https://anond.hatelabo.jp/20250408142401" target="_blank" rel="noopener" data-gtm-click-label="entry-search-recommend-middle-title"> ChatGPT (Monday) とポン酢の件 </a> </h4> <a href="/entry/s/anond.hatelabo.jp/20250408142401" class="entrysearch-related-users" data-gtm-click-label="entry-search-recommend-middle-users"> 68 users </a> </div> </li> <li class="entrysearch-related-listitem"> <div class="entrysearch-related-entry"> <a href="https://findy-tools.io/articles/payment-system/51" 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/3929807c8348e5f326a0affac7ef473e220d4b1a/height=288;version=1;width=512/https%3A%2F%2Ffindy-tools.io%2Fpublic_images%2Farticle%2F202502_payment_system%2Fkv2.png" alt="決済基盤のアーキテクチャ特集 - Findy Tools"> </a> <h4 class="entrysearch-related-entry-title"> <a href="https://findy-tools.io/articles/payment-system/51" target="_blank" rel="noopener" data-gtm-click-label="entry-search-recommend-middle-title"> 決済基盤のアーキテクチャ特集 - Findy Tools </a> </h4> <a href="/entry/s/findy-tools.io/articles/payment-system/51" class="entrysearch-related-users" data-gtm-click-label="entry-search-recommend-middle-users"> 243 users </a> </div> </li> <li class="entrysearch-related-listitem"> <div class="entrysearch-related-entry"> <a href="https://forest.watch.impress.co.jp/docs/news/2005072.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/0223e8322d28441b643091df77aff84c40c8d1c7/height=288;version=1;width=512/https%3A%2F%2Fforest.watch.impress.co.jp%2Fimg%2Fwf%2Flist%2F2005%2F072%2F00.jpg" alt="「Thunderbird」がメールやストレージを含む有料クラウドサービスを提供へ／「Thunderbird Pro」と「Thundermail」を発表。提供開始時期や料金については未発表"> </a> <h4 class="entrysearch-related-entry-title"> <a href="https://forest.watch.impress.co.jp/docs/news/2005072.html" target="_blank" rel="noopener" data-gtm-click-label="entry-search-recommend-middle-title"> 「Thunderbird」がメールやストレージを含む有料クラウドサービスを提供へ／「Thunderbird Pro」と「Thundermail」を発表。提供開始時期や料金については未発表 </a> </h4> <a href="/entry/s/forest.watch.impress.co.jp/docs/news/2005072.html" class="entrysearch-related-users" data-gtm-click-label="entry-search-recommend-middle-users"> 45 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://azukiazusa.dev/blog/try-ai-editor-cursor/"><span>あとで読む</span> </button> </div> <div class="centerarticle-entry-header"> <h3 class="centerarticle-entry-title"> <a href="https://azukiazusa.dev/blog/try-ai-editor-cursor/" 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%2Fazukiazusa.dev%2Fblog%2Ftry-ai-editor-cursor%2F" alt="">AI エディター Cursor を試してみる </a> </h3> <ul class="centerarticle-entry-data"> <li> <span class="centerarticle-users"> <a href="/entry/s/azukiazusa.dev/blog/try-ai-editor-cursor/" class="js-keyboard-entry-page-openable" title="AI エディター Cursor を試してみる (390 ブックマーク)" data-gtm-click-label="entry-search-result-item-users"> 390 users </a> </span> </li> <li> <a href="/site/azukiazusa.dev/" title="『azukiazusa.dev』の新着エントリー" data-gtm-click-label="entry-search-result-item-site-search-url"> azukiazusa.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">2025/01/11</span></li> </ul> </div> <div class="centerarticle-entry-contents has-image"> <div class="centerarticle-entry-item"> <p class="centerarticle-entry-summary">AI エディター Cursor を試してみる AI エディター Cursor は GitHub Copilot と同様にコードの補完やチャットによるコードの生成をサポートしてくれます。Cursor は VS Code をフォークして作られており、既存の VS Code の拡張機能やキーバインドをそのまま利用することも特徴の 1 つです。生成 AI の台頭はプログラミングの世界に大きな変革をもたらしました。我々開発者は AI の助けを借りながらまるでペアプログラミングをしているかのようにコードを書くことができます。私自身も普段から GitHub Copilot を使ってコードを書いています。コードを書いている最中に AI がコードを補完してくれる体験は、素早いフィードバックを得られるため非常に効率的です。コードを選択してテストコードやドキュメントを生成したり、コードのリファクタリングを行</p> <ul class="entrysearch-entry-tags"> <li><a href="/q/AI" data-gtm-click-label="entry-search-result-item-tag">AI</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/Cursor" data-gtm-click-label="entry-search-result-item-tag">Cursor</a></li> <li><a href="/q/%E3%82%A8%E3%83%87%E3%82%A3%E3%82%BF" data-gtm-click-label="entry-search-result-item-tag">エディタ</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> <li><a href="/q/editor" data-gtm-click-label="entry-search-result-item-tag">editor</a></li> <li><a href="/q/%E4%BA%BA%E5%B7%A5%E7%9F%A5%E8%83%BD" 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> <li><a href="/q/web%E5%88%B6%E4%BD%9C" data-gtm-click-label="entry-search-result-item-tag">web制作</a></li> <li><a href="/q/ChatGPT" data-gtm-click-label="entry-search-result-item-tag">ChatGPT</a></li> </ul> <div class="following-bookmarks-container js-following-bookmarks-container" data-entry-url="https://azukiazusa.dev/blog/try-ai-editor-cursor/"> <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://azukiazusa.dev/blog/try-ai-editor-cursor/" class="centerarticle-entry-image" target="_blank" rel="noopener"> <img src="https://cdn-ak-scissors.b.st-hatena.com/image/square/e99ce430da23c75f4549ce45dfeeaf6d6e88c205/height=288;version=1;width=512/https%3A%2F%2Fazukiazusa.dev%2Fblog%2Fogp%2Ftry-ai-editor-cursor.png" alt="AI エディター Cursor を試してみる" 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://bufferings.hatenablog.com/entry/2022/06/11/232314"><span>あとで読む</span> </button> </div> <div class="centerarticle-entry-header"> <h3 class="centerarticle-entry-title"> <a href="https://bufferings.hatenablog.com/entry/2022/06/11/232314" 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%2Fbufferings.hatenablog.com%2Fentry%2F2022%2F06%2F11%2F232314" alt="">ゆめみのフロントエンドコーディング試験の題材で React の勉強をしました - Mitsuyuki.Shiiba </a> </h3> <ul class="centerarticle-entry-data"> <li> <span class="centerarticle-users"> <a href="/entry/s/bufferings.hatenablog.com/entry/2022/06/11/232314" class="js-keyboard-entry-page-openable" title="ゆめみのフロントエンドコーディング試験の題材で React の勉強をしました - Mitsuyuki.Shiiba (319 ブックマーク)" data-gtm-click-label="entry-search-result-item-users"> 319 users </a> </span> </li> <li> <a href="/site/bufferings.hatenablog.com/" title="『bufferings.hatenablog.com』の新着エントリー" data-gtm-click-label="entry-search-result-item-site-search-url"> bufferings.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/06/11</span></li> </ul> </div> <div class="centerarticle-entry-contents has-image"> <div class="centerarticle-entry-item"> <p class="centerarticle-entry-summary">ちょっと前にツイッターで見かけた、ゆめみのフロントエンドコーディング試験フロントエンドコーディング試験「RESAS API を使用して、都道府県別の総人口推移グラフを表示するSPAを作る」っていうお題 React の勉強をするのにちょうどいい題材だなぁって思ったのでやってみた。課題を公開してるってことは「やってみてもいいよ」ってことかなと思ってるんだけど、もし違ったら GitHub のリポジトリーを private にするので連絡ください 1週間でやらないといけないところを2ヶ月近くやってるし、コミットログも特に何も考えずにポイポイ書いたから、全然だめなんだけど、でも、色々勉強になったので、とてもよかった。楽しかったー！つくったものこんな感じこれでおわりにするー pic.twitter.com/K8zhrRUp54— Mitsuyuki Shiiba (@bufferings)</p> <ul class="entrysearch-entry-tags"> <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/%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/vite" data-gtm-click-label="entry-search-result-item-tag">vite</a></li> <li><a href="/q/react.js" data-gtm-click-label="entry-search-result-item-tag">react.js</a></li> <li><a href="/q/%E3%82%B3%E3%83%BC%E3%83%87%E3%82%A3%E3%83%B3%E3%82%B0" data-gtm-click-label="entry-search-result-item-tag">コーディング</a></li> <li><a href="/q/%E5%AD%A6%E7%BF%92" data-gtm-click-label="entry-search-result-item-tag">学習</a></li> <li><a href="/q/%E5%8B%89%E5%BC%B7" 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/TypeScript" data-gtm-click-label="entry-search-result-item-tag">TypeScript</a></li> </ul> <div class="following-bookmarks-container js-following-bookmarks-container" data-entry-url="https://bufferings.hatenablog.com/entry/2022/06/11/232314"> <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://bufferings.hatenablog.com/entry/2022/06/11/232314" class="centerarticle-entry-image" target="_blank" rel="noopener"> <img src="https://cdn-ak-scissors.b.st-hatena.com/image/square/6addb620200114325f5e553722af9841c70e9d63/height=288;version=1;width=512/https%3A%2F%2Fcdn-ak.f.st-hatena.com%2Fimages%2Ffotolife%2Fb%2Fbufferings%2F20220611%2F20220611172926.png" alt="ゆめみのフロントエンドコーディング試験の題材で React の勉強をしました - Mitsuyuki.Shiiba" 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.publickey1.jp/blog/23/astro_20content_cllectionsmarkdownhybrid_rendering.html"><span>あとで読む</span> </button> </div> <div class="centerarticle-entry-header"> <h3 class="centerarticle-entry-title"> <a href="https://www.publickey1.jp/blog/23/astro_20content_cllectionsmarkdownhybrid_rendering.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%2F23%2Fastro_20content_cllectionsmarkdownhybrid_rendering.html" alt="">静的サイトジェネレータ「Astro 2.0」正式リリース。新機能「Content Collections」で大量Markdown対応、「Hybrid Rendering」で静的と動的ページの混在可能に </a> </h3> <ul class="centerarticle-entry-data"> <li> <span class="centerarticle-users"> <a href="/entry/s/www.publickey1.jp/blog/23/astro_20content_cllectionsmarkdownhybrid_rendering.html" class="js-keyboard-entry-page-openable" title="静的サイトジェネレータ「Astro 2.0」正式リリース。新機能「Content Collections」で大量Markdown対応、「Hybrid Rendering」で静的と動的ページの混在可能に (292 ブックマーク)" data-gtm-click-label="entry-search-result-item-users"> 292 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">2023/01/27</span></li> </ul> </div> <div class="centerarticle-entry-contents has-image"> <div class="centerarticle-entry-item"> <p class="centerarticle-entry-summary">静的サイトジェネレータ「Astro 2.0」正式リリース。新機能「Content Collections」で大量Markdown対応、「Hybrid Rendering」で静的と動的ページの混在可能にオープンソースで開発されている静的サイトジェネレータ「Astro」の最新バージョンとなる「Astro 2.0」が正式にリリースされました。 Astro 2.0 – our most exciting release yet!https://t.co/FPb5rBTRPT — Astro (@astrodotbuild) January 24, 2023 Astroは、ReactやVue、Svelte、Alpine.js、TypeScriptなどのさまざまなフレームワークやライブラリに対応した静的サイトジェネレータです。ビルド時にWebサイト全体のHTMLが生成され、しかもそのHTMLには全</p> <ul class="entrysearch-entry-tags"> <li><a href="/q/Astro" data-gtm-click-label="entry-search-result-item-tag">Astro</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/markdown" data-gtm-click-label="entry-search-result-item-tag">markdown</a></li> <li><a href="/q/web%E5%88%B6%E4%BD%9C" data-gtm-click-label="entry-search-result-item-tag">web制作</a></li> <li><a href="/q/web" data-gtm-click-label="entry-search-result-item-tag">web</a></li> <li><a href="/q/javascript" data-gtm-click-label="entry-search-result-item-tag">javascript</a></li> <li><a href="/q/Publickey" data-gtm-click-label="entry-search-result-item-tag">Publickey</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/23/astro_20content_cllectionsmarkdownhybrid_rendering.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/23/astro_20content_cllectionsmarkdownhybrid_rendering.html" class="centerarticle-entry-image" target="_blank" rel="noopener"> <img src="https://cdn-ak-scissors.b.st-hatena.com/image/square/67458463f753e7ccb1cc267831138cca81fb5280/height=288;version=1;width=512/https%3A%2F%2Fwww.publickey1.jp%2F2023%2F3KsJRhWy.jpg" alt="静的サイトジェネレータ「Astro 2.0」正式リリース。新機能「Content Collections」で大量Markdown対応、「Hybrid Rendering」で静的と動的ページの混在可能に" 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/raru_ex/articles/eb3aa038b38771"><span>あとで読む</span> </button> </div> <div class="centerarticle-entry-header"> <h3 class="centerarticle-entry-title"> <a href="https://zenn.dev/raru_ex/articles/eb3aa038b38771" 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%2Fraru_ex%2Farticles%2Feb3aa038b38771" alt="">フロントエンドのスピードに置いていかれたので、よく聞く技術を調べて分類してみた </a> </h3> <ul class="centerarticle-entry-data"> <li> <span class="centerarticle-users"> <a href="/entry/s/zenn.dev/raru_ex/articles/eb3aa038b38771" class="js-keyboard-entry-page-openable" title="フロントエンドのスピードに置いていかれたので、よく聞く技術を調べて分類してみた (271 ブックマーク)" data-gtm-click-label="entry-search-result-item-users"> 271 users </a> </span> </li> <li> <a href="/site/zenn.dev/raru_ex" title="『zenn.dev/raru_ex』の新着エントリー" data-gtm-click-label="entry-search-result-item-site-search-url"> zenn.dev/raru_ex </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/29</span></li> </ul> </div> <div class="centerarticle-entry-contents has-image"> <div class="centerarticle-entry-item"> <p class="centerarticle-entry-summary">元フルスタックエンジニア(死語)をやらせていただいていたものです。 JavaScript(TS)周りの進歩が凄く、あまりにもついていけていなかったので、気になったワードを片っ端から整理してみました。それぞれに対する説明の正しくないものが含まれてしまっている可能性があります。そんなところを見つけたときは優しく教えてくださると助かります。各ツールの詳細というよりは、それぞれがどんな役割のものなのかを記載しています。この記事が誰かの助けになれば幸いです。調査・分類した言葉(技術)たち Hono Bun Deno Biome Vite Webpack Turbopack esbuild Babel SWC Prisma まず上記に上げたものが、どういった機能を持つものなのかもわかりませんでした。それを整理すると以下になるようです。 JavaScript Runtime Deno Bun</p> <ul class="entrysearch-entry-tags"> <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/%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/%E6%8A%80%E8%A1%93" data-gtm-click-label="entry-search-result-item-tag">技術</a></li> <li><a href="/q/TS" data-gtm-click-label="entry-search-result-item-tag">TS</a></li> <li><a href="/q/%E7%92%B0%E5%A2%83" 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/raru_ex/articles/eb3aa038b38771"> <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/raru_ex/articles/eb3aa038b38771" class="centerarticle-entry-image" target="_blank" rel="noopener"> <img src="https://cdn-ak-scissors.b.st-hatena.com/image/square/2095e8c352c952b32fc2cd2419dd78050f59ac75/height=288;version=1;width=512/https%3A%2F%2Fres.cloudinary.com%2Fzenn%2Fimage%2Fupload%2Fs--KQjLi5JY--%2Fc_fit%252Cg_north_west%252Cl_text%3Anotosansjp-medium.otf_55%3A%2525E3%252583%252595%2525E3%252583%2525AD%2525E3%252583%2525B3%2525E3%252583%252588%2525E3%252582%2525A8%2525E3%252583%2525B3%2525E3%252583%252589%2525E3%252581%2525AE%2525E3%252582%2525B9%2525E3%252583%252594%2525E3%252583%2525BC%2525E3%252583%252589%2525E3%252581%2525AB%2525E7%2525BD%2525AE%2525E3%252581%252584%2525E3%252581%2525A6%2525E3%252581%252584%2525E3%252581%25258B%2525E3%252582%25258C%2525E3%252581%25259F%2525E3%252581%2525AE%2525E3%252581%2525A7%2525E3%252580%252581%2525E3%252582%252588%2525E3%252581%25258F%2525E8%252581%25259E%2525E3%252581%25258F%2525E6%25258A%252580%2525E8%2525A1%252593%2525E3%252582%252592%2525E8%2525AA%2525BF%2525E3%252581%2525B9%2525E3%252581%2525A6%2525E5%252588%252586%2525E9%2525A1%25259E%2525E3%252581%252597%2525E3%252581%2525A6%2525E3%252581%2525BF%2525E3%252581%25259F%252Cw_1010%252Cx_90%252Cy_100%2Fg_south_west%252Cl_text%3Anotosansjp-medium.otf_37%3Araru%252Cx_203%252Cy_121%2Fg_south_west%252Ch_90%252Cl_fetch%3AaHR0cHM6Ly9zdG9yYWdlLmdvb2dsZWFwaXMuY29tL3plbm4tdXNlci11cGxvYWQvYXZhdGFyLzEwNGY4MjRlNDYuanBlZw%3D%3D%252Cr_max%252Cw_90%252Cx_87%252Cy_95%2Fv1627283836%2Fdefault%2Fog-base-w1200-v2.png" alt="フロントエンドのスピードに置いていかれたので、よく聞く技術を調べて分類してみた" 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/7653ef0336db77"><span>あとで読む</span> </button> </div> <div class="centerarticle-entry-header"> <h3 class="centerarticle-entry-title"> <a href="https://zenn.dev/razokulover/articles/7653ef0336db77" 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%2F7653ef0336db77" alt="">雑にReactアプリを作りたい時に使ってるもの </a> </h3> <ul class="centerarticle-entry-data"> <li> <span class="centerarticle-users"> <a href="/entry/s/zenn.dev/razokulover/articles/7653ef0336db77" class="js-keyboard-entry-page-openable" title="雑にReactアプリを作りたい時に使ってるもの (266 ブックマーク)" data-gtm-click-label="entry-search-result-item-users"> 266 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/02/27</span></li> </ul> </div> <div class="centerarticle-entry-contents has-image"> <div class="centerarticle-entry-item"> <p class="centerarticle-entry-summary">import "./App.css"; import { Link, Route, Switch } from "wouter"; function Nav() { return ( <nav> <Link to="/">Home</Link> <br /> <Link to="/about">About</Link> </nav> ); } function Home() { return ( <div className="App"> <h2>Home</h2> <Nav /> </div> ); } function About() { return ( <div className="App"> <h2>About</h2> <Nav /> </div> ); } function App() { return ( <> <Switch> <Route path="/" compo</p> <ul class="entrysearch-entry-tags"> <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/app" data-gtm-click-label="entry-search-result-item-tag">app</a></li> <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/architecture" data-gtm-click-label="entry-search-result-item-tag">architecture</a></li> <li><a href="/q/react.js" data-gtm-click-label="entry-search-result-item-tag">react.js</a></li> <li><a href="/q/javascript" data-gtm-click-label="entry-search-result-item-tag">javascript</a></li> <li><a href="/q/Develop" data-gtm-click-label="entry-search-result-item-tag">Develop</a></li> </ul> <div class="following-bookmarks-container js-following-bookmarks-container" data-entry-url="https://zenn.dev/razokulover/articles/7653ef0336db77"> <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/7653ef0336db77" class="centerarticle-entry-image" target="_blank" rel="noopener"> <img src="https://cdn-ak-scissors.b.st-hatena.com/image/square/977c16f86437d11dc48caba9e09d764ace41fffa/height=288;version=1;width=512/https%3A%2F%2Fres.cloudinary.com%2Fzenn%2Fimage%2Fupload%2Fs--h78Xa7CO--%2Fc_fit%252Cg_north_west%252Cl_text%3Anotosansjp-medium.otf_55%3A%2525E9%25259B%252591%2525E3%252581%2525ABReact%2525E3%252582%2525A2%2525E3%252583%252597%2525E3%252583%2525AA%2525E3%252582%252592%2525E4%2525BD%25259C%2525E3%252582%25258A%2525E3%252581%25259F%2525E3%252581%252584%2525E6%252599%252582%2525E3%252581%2525AB%2525E4%2525BD%2525BF%2525E3%252581%2525A3%2525E3%252581%2525A6%2525E3%252582%25258B%2525E3%252582%252582%2525E3%252581%2525AE%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="雑に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://speakerdeck.com/nkzn/the-spas-chronicle-reaches-to-remix"><span>あとで読む</span> </button> </div> <div class="centerarticle-entry-header"> <h3 class="centerarticle-entry-title"> <a href="https://speakerdeck.com/nkzn/the-spas-chronicle-reaches-to-remix" 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%2Fnkzn%2Fthe-spas-chronicle-reaches-to-remix" alt="">SPAの歴史とRemix SPAモードという到達点 / the SPA's chronicle reaches to remix </a> </h3> <ul class="centerarticle-entry-data"> <li> <span class="centerarticle-users"> <a href="/entry/s/speakerdeck.com/nkzn/the-spas-chronicle-reaches-to-remix" class="js-keyboard-entry-page-openable" title="SPAの歴史とRemix SPAモードという到達点 / the SPA's chronicle reaches to remix (262 ブックマーク)" data-gtm-click-label="entry-search-result-item-users"> 262 users </a> </span> </li> <li> <a href="/site/speakerdeck.com/nkzn" title="『speakerdeck.com/nkzn』の新着エントリー" data-gtm-click-label="entry-search-result-item-site-search-url"> speakerdeck.com/nkzn </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/01/29</span></li> </ul> </div> <div class="centerarticle-entry-contents has-image"> <div class="centerarticle-entry-item"> <p class="centerarticle-entry-summary">Niigata 5分 Tech #4と、モニクル社の社内LT大会で喋ったやつです https://niigata-5min-tech.connpass.com/event/307076/</p> <ul class="entrysearch-entry-tags"> <li><a href="/q/SPA" data-gtm-click-label="entry-search-result-item-tag">SPA</a></li> <li><a href="/q/remix" data-gtm-click-label="entry-search-result-item-tag">remix</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/%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/vite" data-gtm-click-label="entry-search-result-item-tag">vite</a></li> <li><a href="/q/frontend" data-gtm-click-label="entry-search-result-item-tag">frontend</a></li> <li><a href="/q/javascript" data-gtm-click-label="entry-search-result-item-tag">javascript</a></li> <li><a href="/q/Next.js" data-gtm-click-label="entry-search-result-item-tag">Next.js</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://speakerdeck.com/nkzn/the-spas-chronicle-reaches-to-remix"> <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/nkzn/the-spas-chronicle-reaches-to-remix" class="centerarticle-entry-image" target="_blank" rel="noopener"> <img src="https://cdn-ak-scissors.b.st-hatena.com/image/square/67540bd067b54a945db6a819ecd7f39a398693ad/height=288;version=1;width=512/https%3A%2F%2Ffiles.speakerdeck.com%2Fpresentations%2F6d9ceb90ae8845a3b287136e8ed4e23e%2Fslide_0.jpg%3F28727776" alt="SPAの歴史とRemix SPAモードという到達点 / the SPA's chronicle reaches to remix" 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/kztmk_media_pep/items/11d063a155d414a102b1"><span>あとで読む</span> </button> </div> <div class="centerarticle-entry-header"> <h3 class="centerarticle-entry-title"> <a href="https://qiita.com/kztmk_media_pep/items/11d063a155d414a102b1" 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%2Fkztmk_media_pep%2Fitems%2F11d063a155d414a102b1" alt="">2022年秋版　最新React/Typescript開発環境の作成 - Qiita </a> </h3> <ul class="centerarticle-entry-data"> <li> <span class="centerarticle-users"> <a href="/entry/s/qiita.com/kztmk_media_pep/items/11d063a155d414a102b1" class="js-keyboard-entry-page-openable" title="2022年秋版　最新React/Typescript開発環境の作成 - Qiita (255 ブックマーク)" data-gtm-click-label="entry-search-result-item-users"> 255 users </a> </span> </li> <li> <a href="/site/qiita.com/kztmk_media_pep" title="『qiita.com/kztmk_media_pep』の新着エントリー" data-gtm-click-label="entry-search-result-item-site-search-url"> qiita.com/kztmk_media_pep </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/10/10</span></li> </ul> </div> <div class="centerarticle-entry-contents has-image"> <div class="centerarticle-entry-item"> <p class="centerarticle-entry-summary">はじめに Reactの開発環境は、CRA(Create React APP)がよく使われますが、CRAは沢山のモジュールの整合性の確認などのため、アップデートがリリースされるまでの間隔が結構あります。また、使われているモジュールをアップデートするとエラーに悩まされたりします。ゼロからReactの開発環境を作成していたのですが、いろいろとトライを繰り返すうちに以下の方法に落ち着きました。比較的短時間で環境が作成できますし、全て最新のモジュールが使えます。 Vite nodejsを用いたJavaSriptプロジェクトは、、Webpackなどでプロジェクト内のJavaScriptモジュールをひとつのファイルにまとめるバンドルと呼ばれる作業が必要でした。これは、ブラウザがESモジュールに対応していないことや、ひとつのHTMLファイルから沢山のjsファイルをダウンロードさせると、その数だけア</p> <ul class="entrysearch-entry-tags"> <li><a href="/q/react" data-gtm-click-label="entry-search-result-item-tag">react</a></li> <li><a href="/q/TypeScript" data-gtm-click-label="entry-search-result-item-tag">TypeScript</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/vite" data-gtm-click-label="entry-search-result-item-tag">vite</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/Qiita" data-gtm-click-label="entry-search-result-item-tag">Qiita</a></li> <li><a href="/q/npm" data-gtm-click-label="entry-search-result-item-tag">npm</a></li> <li><a href="/q/%E3%83%97%E3%83%AD%E3%82%B8%E3%82%A7%E3%82%AF%E3%83%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://qiita.com/kztmk_media_pep/items/11d063a155d414a102b1"> <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/kztmk_media_pep/items/11d063a155d414a102b1" class="centerarticle-entry-image" target="_blank" rel="noopener"> <img src="https://cdn-ak-scissors.b.st-hatena.com/image/square/fa5694c0ff750d94726aeb9c8947d60dc3731140/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%253DaHR0cHM6Ly9xaWl0YS11c2VyLXByb2ZpbGUtaW1hZ2VzLmltZ2l4Lm5ldC9odHRwcyUzQSUyRiUyRnFpaXRhLWltYWdlLXN0b3JlLnMzLmFtYXpvbmF3cy5jb20lMkYwJTJGNDg0OSUyRnByb2ZpbGUtaW1hZ2VzJTJGMTQ3MzY4MDk1Mj9peGxpYj1yYi00LjAuMCZhcj0xJTNBMSZmaXQ9Y3JvcCZtYXNrPWVsbGlwc2UmZm09cG5nMzImcz1jYzM1YjQ5ODU5NjA5MTU1MGZjNTc3ZGQ0ZjYyMTA2OQ%2526blend-x%253D120%2526blend-y%253D467%2526blend-w%253D82%2526blend-h%253D82%2526blend-mode%253Dnormal%2526s%253D1a64f991859e1286408193cdb9ed7e82%3Fixlib%3Drb-4.0.0%26w%3D1200%26fm%3Djpg%26mark64%3DaHR0cHM6Ly9xaWl0YS11c2VyLWNvbnRlbnRzLmltZ2l4Lm5ldC9-dGV4dD9peGxpYj1yYi00LjAuMCZ3PTk2MCZoPTMyNCZ0eHQ9MjAyMiVFNSVCOSVCNCVFNyVBNyU4QiVFNyU4OSU4OCVFMyU4MCU4MCVFNiU5QyU4MCVFNiU5NiVCMFJlYWN0JTJGVHlwZXNjcmlwdCVFOSU5NiU4QiVFNyU5OSVCQSVFNyU5MiVCMCVFNSVBMiU4MyVFMyU4MSVBRSVFNCVCRCU5QyVFNiU4OCU5MCZ0eHQtYWxpZ249bGVmdCUyQ3RvcCZ0eHQtY29sb3I9JTIzMUUyMTIxJnR4dC1mb250PUhpcmFnaW5vJTIwU2FucyUyMFc2JnR4dC1zaXplPTU2JnR4dC1wYWQ9MCZzPWFlMmFhMTI3NzVhZGJiOGY5MjAwNjYyZDAxMGUwNzFl%26mark-x%3D120%26mark-y%3D112%26blend64%3DaHR0cHM6Ly9xaWl0YS11c2VyLWNvbnRlbnRzLmltZ2l4Lm5ldC9-dGV4dD9peGxpYj1yYi00LjAuMCZ3PTgzOCZoPTU4JnR4dD0lNDBrenRta19tZWRpYV9wZXAmdHh0LWNvbG9yPSUyMzFFMjEyMSZ0eHQtZm9udD1IaXJhZ2lubyUyMFNhbnMlMjBXNiZ0eHQtc2l6ZT0zNiZ0eHQtcGFkPTAmcz05NzczZjU3NTJmNDFkODIxNzBhMGUyNjhkNzE4ZTA5OQ%26blend-x%3D242%26blend-y%3D480%26blend-w%3D838%26blend-h%3D46%26blend-fit%3Dcrop%26blend-crop%3Dleft%252Cbottom%26blend-mode%3Dnormal%26s%3D3f438f1dc9b0205fe833c1e49a3b16c5" alt="2022年秋版　最新React/Typescript開発環境の作成 - 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://tech.buysell-technologies.com/entry/adventcalendar2023-12-10"><span>あとで読む</span> </button> </div> <div class="centerarticle-entry-header"> <h3 class="centerarticle-entry-title"> <a href="https://tech.buysell-technologies.com/entry/adventcalendar2023-12-10" 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.buysell-technologies.com%2Fentry%2Fadventcalendar2023-12-10" alt="">フロントエンドの新規開発でNext.jsの採用を見送った話 - バイセル Tech Blog </a> </h3> <ul class="centerarticle-entry-data"> <li> <span class="centerarticle-users"> <a href="/entry/s/tech.buysell-technologies.com/entry/adventcalendar2023-12-10" class="js-keyboard-entry-page-openable" title="フロントエンドの新規開発でNext.jsの採用を見送った話 - バイセル Tech Blog (248 ブックマーク)" data-gtm-click-label="entry-search-result-item-users"> 248 users </a> </span> </li> <li> <a href="/site/tech.buysell-technologies.com/" title="『tech.buysell-technologies.com』の新着エントリー" data-gtm-click-label="entry-search-result-item-site-search-url"> tech.buysell-technologies.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/12/10</span></li> </ul> </div> <div class="centerarticle-entry-contents has-image"> <div class="centerarticle-entry-item"> <p class="centerarticle-entry-summary">※こちらはバイセルテクノロジーズ Advent Calendar 2023の10日目の記事です。前回の記事は、金澤さんのAuth0とEntra IDを扱うプロダクト同士を繋げるためのIstio設定あれこれでした。はじめにこんにちは、開発3部の神保です。バイセルでは、お客様宅への出張訪問による買取が買取チャネルの主力となっています。現在開発3部の弊チームでは、この出張訪問買取で使用されるWebアプリケーション「Visit」の新規開発を進めています。 VisitのフロントエンドにはReactを採用しましたが、Next.js等のフレームワークは使用せず、Vite + ReactによるSPA (Single Page Application)構成を選択しました。技術選定の過程では、社内での採用事例などからNext.jsも検討の対象となりましたが、最終的にはその採用を見送る結論に至りました</p> <ul class="entrysearch-entry-tags"> <li><a href="/q/react" data-gtm-click-label="entry-search-result-item-tag">react</a></li> <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/%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/nextjs" data-gtm-click-label="entry-search-result-item-tag">nextjs</a></li> <li><a href="/q/js" data-gtm-click-label="entry-search-result-item-tag">js</a></li> <li><a href="/q/frontend" data-gtm-click-label="entry-search-result-item-tag">frontend</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/cloud" data-gtm-click-label="entry-search-result-item-tag">cloud</a></li> </ul> <div class="following-bookmarks-container js-following-bookmarks-container" data-entry-url="https://tech.buysell-technologies.com/entry/adventcalendar2023-12-10"> <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.buysell-technologies.com/entry/adventcalendar2023-12-10" class="centerarticle-entry-image" target="_blank" rel="noopener"> <img src="https://cdn-ak-scissors.b.st-hatena.com/image/square/be3daa89c3e10b276b1924d65ec8e31f2caf375e/height=288;version=1;width=512/https%3A%2F%2Fcdn.image.st-hatena.com%2Fimage%2Fscale%2Fc9527eb94f3b6bb1864289e97116ff85e8d841db%2Fbackend%3Dimagemagick%3Bversion%3D1%3Bwidth%3D1300%2Fhttps%253A%252F%252Fcdn-ak.f.st-hatena.com%252Fimages%252Ffotolife%252Fb%252Fbst-tech%252F20231204%252F20231204131845.jpg" alt="フロントエンドの新規開発でNext.jsの採用を見送った話 - バイセル Tech 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/righttouch/articles/86457bf2908379"><span>あとで読む</span> </button> </div> <div class="centerarticle-entry-header"> <h3 class="centerarticle-entry-title"> <a href="https://zenn.dev/righttouch/articles/86457bf2908379" 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%2Frighttouch%2Farticles%2F86457bf2908379" alt="">JavaScriptビルドツールの整理各ツールの機能と依存関係 </a> </h3> <ul class="centerarticle-entry-data"> <li> <span class="centerarticle-users"> <a href="/entry/s/zenn.dev/righttouch/articles/86457bf2908379" class="js-keyboard-entry-page-openable" title="JavaScriptビルドツールの整理各ツールの機能と依存関係 (237 ブックマーク)" data-gtm-click-label="entry-search-result-item-users"> 237 users </a> </span> </li> <li> <a href="/site/zenn.dev/righttouch" title="『zenn.dev/righttouch』の新着エントリー" data-gtm-click-label="entry-search-result-item-site-search-url"> zenn.dev/righttouch </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/26</span></li> </ul> </div> <div class="centerarticle-entry-contents has-image"> <div class="centerarticle-entry-item"> <p class="centerarticle-entry-summary">フロントエンドのビルドツールが色々ありすぎて、何がどうなっているのかがわかりづらいため、各ツールができること、特徴ツール間がどのように依存しあっているかを一気に調べて整理した。(情報は2023/10時点) 概要ツールの依存関係整理上層: dev server付きのバンドラ/ビルドツール。アプリ開発者が直接configなどを書いて取り扱うのはここが多いと思われる。(Next.jsに関しては、ビルド機能に着目した場合) 下層: やや基盤的なdev serverなしのツール群。矢印は、明示的な依存関係を表す。実際には、明示的な依存関係がなくても、下層のツール群は上層のバンドラ(やRollup)に対してプラグインを提供していることが多い。各ツールのできること整理ツールごとに、大まかな機能区分で、できることとできないことをまとめた。各機能区分の定義は次セクションを参照。ツールごと</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/%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%84%E3%83%BC%E3%83%AB" 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/vite" data-gtm-click-label="entry-search-result-item-tag">vite</a></li> <li><a href="/q/bundler" data-gtm-click-label="entry-search-result-item-tag">bundler</a></li> <li><a href="/q/server" data-gtm-click-label="entry-search-result-item-tag">server</a></li> <li><a href="/q/webpack" data-gtm-click-label="entry-search-result-item-tag">webpack</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/tool" data-gtm-click-label="entry-search-result-item-tag">tool</a></li> </ul> <div class="following-bookmarks-container js-following-bookmarks-container" data-entry-url="https://zenn.dev/righttouch/articles/86457bf2908379"> <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/righttouch/articles/86457bf2908379" class="centerarticle-entry-image" target="_blank" rel="noopener"> <img src="https://cdn-ak-scissors.b.st-hatena.com/image/square/0d593af4e22504b451c7cd660da188b2558f21ad/height=288;version=1;width=512/https%3A%2F%2Fres.cloudinary.com%2Fzenn%2Fimage%2Fupload%2Fs--v8i5o9x9--%2Fc_fit%252Cg_north_west%252Cl_text%3Anotosansjp-medium.otf_55%3AJavaScript%2525E3%252583%252593%2525E3%252583%2525AB%2525E3%252583%252589%2525E3%252583%252584%2525E3%252583%2525BC%2525E3%252583%2525AB%2525E3%252581%2525AE%2525E6%252595%2525B4%2525E7%252590%252586%252520%2525E5%252590%252584%2525E3%252583%252584%2525E3%252583%2525BC%2525E3%252583%2525AB%2525E3%252581%2525AE%2525E6%2525A9%25259F%2525E8%252583%2525BD%2525E3%252581%2525A8%2525E4%2525BE%25259D%2525E5%2525AD%252598%2525E9%252596%2525A2%2525E4%2525BF%252582%252Cw_1010%252Cx_90%252Cy_100%2Fg_south_west%252Cl_text%3Anotosansjp-medium.otf_34%3Anakaakist%252Cx_220%252Cy_108%2Fbo_3px_solid_rgb%3Ad6e3ed%252Cg_south_west%252Ch_90%252Cl_fetch%3AaHR0cHM6Ly9zdG9yYWdlLmdvb2dsZWFwaXMuY29tL3plbm4tdXNlci11cGxvYWQvYXZhdGFyL2ViMWY4NTIxMTMuanBlZw%3D%3D%252Cr_20%252Cw_90%252Cx_92%252Cy_102%2Fco_rgb%3A6e7b85%252Cg_south_west%252Cl_text%3Anotosansjp-medium.otf_30%3ARightTouch%252Cx_220%252Cy_160%2Fbo_4px_solid_white%252Cg_south_west%252Ch_50%252Cl_fetch%3AaHR0cHM6Ly9zdG9yYWdlLmdvb2dsZWFwaXMuY29tL3plbm4tdXNlci11cGxvYWQvYXZhdGFyL2FmYWQyZDA3MTIuanBlZw%3D%3D%252Cr_max%252Cw_50%252Cx_139%252Cy_84%2Fv1627283836%2Fdefault%2Fog-base-w1200-v2.png" alt="JavaScriptビルドツールの整理各ツールの機能と依存関係" 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://astro.build/blog/astro-1/"><span>あとで読む</span> </button> </div> <div class="centerarticle-entry-header"> <h3 class="centerarticle-entry-title"> <a href="https://astro.build/blog/astro-1/" 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%2Fastro.build%2Fblog%2Fastro-1%2F" alt="">Astro 1.0 | Astro </a> </h3> <ul class="centerarticle-entry-data"> <li> <span class="centerarticle-users"> <a href="/entry/s/astro.build/blog/astro-1/" class="js-keyboard-entry-page-openable" title="Astro 1.0 | Astro (222 ブックマーク)" data-gtm-click-label="entry-search-result-item-users"> 222 users </a> </span> </li> <li> <a href="/site/astro.build/" title="『astro.build』の新着エントリー" data-gtm-click-label="entry-search-result-item-site-search-url"> astro.build </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/08/10</span></li> </ul> </div> <div class="centerarticle-entry-contents has-image"> <div class="centerarticle-entry-item"> <p class="centerarticle-entry-summary">We are thrilled to announce Astro v1.0: a web framework for building fast, content-focused websites. Over the last 16 months, Astro has grown from an empty repo to over 13,000 stars on GitHub and 30,000 early users around the world. The Astro documentation has been translated into 6 different languages, and Astro has already been deployed at amazing companies such as Firebase (Google), Trivago, Th</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/framework" data-gtm-click-label="entry-search-result-item-tag">framework</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%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> <li><a href="/q/Astro" data-gtm-click-label="entry-search-result-item-tag">Astro</a></li> <li><a href="/q/web" data-gtm-click-label="entry-search-result-item-tag">web</a></li> <li><a href="/q/%2AJavaScript" data-gtm-click-label="entry-search-result-item-tag">*JavaScript</a></li> <li><a href="/q/programming" data-gtm-click-label="entry-search-result-item-tag">programming</a></li> </ul> <div class="following-bookmarks-container js-following-bookmarks-container" data-entry-url="https://astro.build/blog/astro-1/"> <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://astro.build/blog/astro-1/" class="centerarticle-entry-image" target="_blank" rel="noopener"> <img src="https://cdn-ak-scissors.b.st-hatena.com/image/square/d05c5730eaa41d26099be21a021d56a8dc3f11c6/height=288;version=1;width=512/https%3A%2F%2Fastro.build%2F_astro%2Fsocial.DfejtiT8.webp" alt="Astro 1.0 | Astro" 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/a_da_chi/articles/bfcca39eed6a0f"><span>あとで読む</span> </button> </div> <div class="centerarticle-entry-header"> <h3 class="centerarticle-entry-title"> <a href="https://zenn.dev/a_da_chi/articles/bfcca39eed6a0f" 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%2Fa_da_chi%2Farticles%2Fbfcca39eed6a0f" alt="">Next.jsを使う必要がない小規模なSPAの最小構成を考えてみた </a> </h3> <ul class="centerarticle-entry-data"> <li> <span class="centerarticle-users"> <a href="/entry/s/zenn.dev/a_da_chi/articles/bfcca39eed6a0f" class="js-keyboard-entry-page-openable" title="Next.jsを使う必要がない小規模なSPAの最小構成を考えてみた (198 ブックマーク)" data-gtm-click-label="entry-search-result-item-users"> 198 users </a> </span> </li> <li> <a href="/site/zenn.dev/a_da_chi" title="『zenn.dev/a_da_chi』の新着エントリー" data-gtm-click-label="entry-search-result-item-site-search-url"> zenn.dev/a_da_chi </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/11/27</span></li> </ul> </div> <div class="centerarticle-entry-contents has-image"> <div class="centerarticle-entry-item"> <p class="centerarticle-entry-summary">はじめに React開発におけるNext.jsのプレゼンスが日に日に増している今日この頃ですが、Next.jsを使う必要がない小規模なSPAを作る場合の型が欲しくなり、色々調べて技術選定をした上で実際に作ってみるところまでやったので、その技術選定理由とセットアップ手順を共有したいと思います。フロントエンドの移り変わりは速いとはいえ、割とホットな技術を選定できたと思うのでしばらくは使っていけそうです（そう思いたい…）。前提趣味で小規模なSPAを作る場合を想定ルーティングなしの単機能アプリ SSRが必要ないモーダルなどの動きのあるUIが必要ない技術スタック Vite Preact TypeScript Tailwind CSS Cloudflare Pages 技術選定理由 Vite 少し前まではこういうケースではcreate-react-appを使用していましたが、Viteに置き</p> <ul class="entrysearch-entry-tags"> <li><a href="/q/react" data-gtm-click-label="entry-search-result-item-tag">react</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/TypeScript" data-gtm-click-label="entry-search-result-item-tag">TypeScript</a></li> <li><a href="/q/react.js" data-gtm-click-label="entry-search-result-item-tag">react.js</a></li> <li><a href="/q/javascript" data-gtm-click-label="entry-search-result-item-tag">javascript</a></li> <li><a href="/q/%E6%8A%80%E8%A1%93%E9%81%B8%E5%AE%9A" data-gtm-click-label="entry-search-result-item-tag">技術選定</a></li> <li><a href="/q/Vite" data-gtm-click-label="entry-search-result-item-tag">Vite</a></li> <li><a href="/q/Firebase" data-gtm-click-label="entry-search-result-item-tag">Firebase</a></li> <li><a href="/q/frontend" data-gtm-click-label="entry-search-result-item-tag">frontend</a></li> </ul> <div class="following-bookmarks-container js-following-bookmarks-container" data-entry-url="https://zenn.dev/a_da_chi/articles/bfcca39eed6a0f"> <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/a_da_chi/articles/bfcca39eed6a0f" class="centerarticle-entry-image" target="_blank" rel="noopener"> <img src="https://cdn-ak-scissors.b.st-hatena.com/image/square/98892045ec144d63988fc9054b5f61c8522ef767/height=288;version=1;width=512/https%3A%2F%2Fres.cloudinary.com%2Fzenn%2Fimage%2Fupload%2Fs--cBc4XoZ3--%2Fc_fit%252Cg_north_west%252Cl_text%3Anotosansjp-medium.otf_55%3ANext.js%2525E3%252582%252592%2525E4%2525BD%2525BF%2525E3%252581%252586%2525E5%2525BF%252585%2525E8%2525A6%252581%2525E3%252581%25258C%2525E3%252581%2525AA%2525E3%252581%252584%2525E5%2525B0%25258F%2525E8%2525A6%25258F%2525E6%2525A8%2525A1%2525E3%252581%2525AASPA%2525E3%252581%2525AE%2525E6%25259C%252580%2525E5%2525B0%25258F%2525E6%2525A7%25258B%2525E6%252588%252590%2525E3%252582%252592%2525E8%252580%252583%2525E3%252581%252588%2525E3%252581%2525A6%2525E3%252581%2525BF%2525E3%252581%25259F%252Cw_1010%252Cx_90%252Cy_100%2Fg_south_west%252Cl_text%3Anotosansjp-medium.otf_37%3AYutaro%252520Adachi%252Cx_203%252Cy_121%2Fg_south_west%252Ch_90%252Cl_fetch%3AaHR0cHM6Ly9zdG9yYWdlLmdvb2dsZWFwaXMuY29tL3plbm4tdXNlci11cGxvYWQvYXZhdGFyLzhmZmYwM2RiYjYuanBlZw%3D%3D%252Cr_max%252Cw_90%252Cx_87%252Cy_95%2Fv1627283836%2Fdefault%2Fog-base-w1200-v2.png" alt="Next.jsを使う必要がない小規模なSPAの最小構成を考えてみた" 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://kakehashi-dev.hatenablog.com/entry/2023/12/13/091000"><span>あとで読む</span> </button> </div> <div class="centerarticle-entry-header"> <h3 class="centerarticle-entry-title"> <a href="https://kakehashi-dev.hatenablog.com/entry/2023/12/13/091000" 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%2Fkakehashi-dev.hatenablog.com%2Fentry%2F2023%2F12%2F13%2F091000" alt="">業務システム SPA のフロントエンド技術選定（2023年版） - KAKEHASHI Tech Blog </a> </h3> <ul class="centerarticle-entry-data"> <li> <span class="centerarticle-users"> <a href="/entry/s/kakehashi-dev.hatenablog.com/entry/2023/12/13/091000" class="js-keyboard-entry-page-openable" title="業務システム SPA のフロントエンド技術選定（2023年版） - KAKEHASHI Tech Blog (189 ブックマーク)" data-gtm-click-label="entry-search-result-item-users"> 189 users </a> </span> </li> <li> <a href="/site/kakehashi-dev.hatenablog.com/" title="『kakehashi-dev.hatenablog.com』の新着エントリー" data-gtm-click-label="entry-search-result-item-site-search-url"> kakehashi-dev.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/12/13</span></li> </ul> </div> <div class="centerarticle-entry-contents has-image"> <div class="centerarticle-entry-item"> <p class="centerarticle-entry-summary">本エントリはカケハシ Part 2 Advent Calendar 2023の13日目の記事です。（Part 1もおもしろい記事がいっぱいあるので、ぜひご覧ください。）はじめにこんにちは。カケハシでソフトウェアエンジニアをしている平松です。今年、新規プロダクト立ち上げの機会があり、その際に行ったフロントエンドの技術選定について紹介したいと思います。フロントエンドの領域は選択肢が豊富で、変化のスピードも速いため、プロダクトの要件に適した技術を選ぶことはひとつの挑戦です。実際、フロントエンド技術選定のヒント【令和五年度版】のアドベントカレンダー記事を読んで、その難しさを改めて感じました。今回の新規プロダクトは、ユーザがログインして利用するtoBの業務システムです。私はカケハシでは2度目の新規プロダクト立ち上げですが、前回の経験を活かしつつ、新しいアプローチにも挑戦しています。</p> <ul class="entrysearch-entry-tags"> <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/%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/SPA" data-gtm-click-label="entry-search-result-item-tag">SPA</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://kakehashi-dev.hatenablog.com/entry/2023/12/13/091000"> <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://kakehashi-dev.hatenablog.com/entry/2023/12/13/091000" class="centerarticle-entry-image" target="_blank" rel="noopener"> <img src="https://cdn-ak-scissors.b.st-hatena.com/image/square/162af52bd1a29928ed87deb6b0bf7f88e20f7f6a/height=288;version=1;width=512/https%3A%2F%2Fcdn.image.st-hatena.com%2Fimage%2Fscale%2F071236f7db152c933c67c194833f3de60bfa6c81%2Fbackend%3Dimagemagick%3Bversion%3D1%3Bwidth%3D1300%2Fhttps%253A%252F%252Fcdn.user.blog.st-hatena.com%252Fdefault_entry_og_image%252F158369901%252F1628831040498781" alt="業務システム SPA のフロントエンド技術選定（2023年版） - KAKEHASHI Tech 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/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://miyauchi.dev/ja/posts/speeding-up-jest/"><span>あとで読む</span> </button> </div> <div class="centerarticle-entry-header"> <h3 class="centerarticle-entry-title"> <a href="https://miyauchi.dev/ja/posts/speeding-up-jest/" 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%2Fmiyauchi.dev%2Fja%2Fposts%2Fspeeding-up-jest%2F" alt="">JestでTypeScriptを高速化する | miyauci.me </a> </h3> <ul class="centerarticle-entry-data"> <li> <span class="centerarticle-users"> <a href="/entry/s/miyauchi.dev/ja/posts/speeding-up-jest/" class="js-keyboard-entry-page-openable" title="JestでTypeScriptを高速化する | miyauci.me (179 ブックマーク)" data-gtm-click-label="entry-search-result-item-users"> 179 users </a> </span> </li> <li> <a href="/site/miyauchi.dev/" title="『miyauchi.dev』の新着エントリー" data-gtm-click-label="entry-search-result-item-site-search-url"> miyauchi.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">2021/09/02</span></li> </ul> </div> <div class="centerarticle-entry-contents has-image"> <div class="centerarticle-entry-item"> <p class="centerarticle-entry-summary">JestでTypeScriptを高速化するJestでテストの高速化させる方法を紹介します。トランスフォーマーとしてesbuildやswcを紹介し、TypeScriptで遅くなりがちなトランスパイルを高速化させることで、テストを自体を高速化します。はじめにesbuild の登場により、フロントエンドの世界は、開発環境により速度を求めるようになりました。vite の隆盛はその最たるものといってもいいでしょう。 esbuild や swc は高速な Go や Rust によって書かれ、更に多くの場合、Typescript の型チェックを省略しています。 tsc の型チェックは、大抵 IDE やワークフローで行われているので、これらを削ぎ落とすことで、純粋なコンパイラとして JavaScript への変換に特化しているということですね。さて、Typescript コードをテストする際、多くの場</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/jest" data-gtm-click-label="entry-search-result-item-tag">jest</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%86%E3%82%B9%E3%83%88" data-gtm-click-label="entry-search-result-item-tag">テスト</a></li> <li><a href="/q/performance" data-gtm-click-label="entry-search-result-item-tag">performance</a></li> <li><a href="/q/%E3%83%91%E3%83%95%E3%82%A9%E3%83%BC%E3%83%9E%E3%83%B3%E3%82%B9" 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/test" data-gtm-click-label="entry-search-result-item-tag">test</a></li> <li><a href="/q/rust" data-gtm-click-label="entry-search-result-item-tag">rust</a></li> <li><a href="/q/vite" data-gtm-click-label="entry-search-result-item-tag">vite</a></li> </ul> <div class="following-bookmarks-container js-following-bookmarks-container" data-entry-url="https://miyauchi.dev/ja/posts/speeding-up-jest/"> <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://miyauchi.dev/ja/posts/speeding-up-jest/" class="centerarticle-entry-image" target="_blank" rel="noopener"> <img src="https://cdn-ak-scissors.b.st-hatena.com/image/square/0de52980cd50b887e60f9cc46852dc9610426d18/height=288;version=1;width=512/https%3A%2F%2Fmiyauchi.dev%2Fstatic%2Fa1d34aff4a2949ea010c931269a1355c%2Fhero.png" alt="JestでTypeScriptを高速化する | miyauci.me" 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.smartcamp.co.jp/entry/try-vite"><span>あとで読む</span> </button> </div> <div class="centerarticle-entry-header"> <h3 class="centerarticle-entry-title"> <a href="https://tech.smartcamp.co.jp/entry/try-vite" 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.smartcamp.co.jp%2Fentry%2Ftry-vite" alt="">フロントエンドの爆速な開発サーバを実現する Vite を試してみた - SMARTCAMP Engineer Blog </a> </h3> <ul class="centerarticle-entry-data"> <li> <span class="centerarticle-users"> <a href="/entry/s/tech.smartcamp.co.jp/entry/try-vite" class="js-keyboard-entry-page-openable" title="フロントエンドの爆速な開発サーバを実現する Vite を試してみた - SMARTCAMP Engineer Blog (177 ブックマーク)" data-gtm-click-label="entry-search-result-item-users"> 177 users </a> </span> </li> <li> <a href="/site/tech.smartcamp.co.jp/" title="『tech.smartcamp.co.jp』の新着エントリー" data-gtm-click-label="entry-search-result-item-site-search-url"> tech.smartcamp.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">2020/06/18</span></li> </ul> </div> <div class="centerarticle-entry-contents has-image"> <div class="centerarticle-entry-item"> <p class="centerarticle-entry-summary">こんにちは！スマートキャンプでエンジニアをしている中川です。先日Twitterを何気なく眺めていたところ、Vue.js 生みの親の Evan You氏が何やら興味深いツイートをしているのが目に止まりました。 As I was going to bed, I had an idea about a no-bundler dev setup (using native browser ES imports), but with support for Vue SFCs **with hot reload**. Now it's almost 6AM and I have PoC working. The hot reload is so fast it's near instant.— Evan You (@youyuxi) 2020年4月20日 ...なるほど。これまでReactやVueを</p> <ul class="entrysearch-entry-tags"> <li><a href="/q/Vue" data-gtm-click-label="entry-search-result-item-tag">Vue</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/vue.js" data-gtm-click-label="entry-search-result-item-tag">vue.js</a></li> <li><a href="/q/vite" data-gtm-click-label="entry-search-result-item-tag">vite</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/TypeScript" data-gtm-click-label="entry-search-result-item-tag">TypeScript</a></li> <li><a href="/q/JavaScript" data-gtm-click-label="entry-search-result-item-tag">JavaScript</a></li> <li><a href="/q/react" data-gtm-click-label="entry-search-result-item-tag">react</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/js" data-gtm-click-label="entry-search-result-item-tag">js</a></li> </ul> <div class="following-bookmarks-container js-following-bookmarks-container" data-entry-url="https://tech.smartcamp.co.jp/entry/try-vite"> <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.smartcamp.co.jp/entry/try-vite" class="centerarticle-entry-image" target="_blank" rel="noopener"> <img src="https://cdn-ak-scissors.b.st-hatena.com/image/square/b28afa83bf5592f21f4885dca89d8312b6d3e56b/height=288;version=1;width=512/https%3A%2F%2Fcdn-ak.f.st-hatena.com%2Fimages%2Ffotolife%2Fm%2Fmkt0225%2F20200618%2F20200618154631.png" alt="フロントエンドの爆速な開発サーバを実現する Vite を試してみた - SMARTCAMP Engineer 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/mizchi/articles/native-esm-age"><span>あとで読む</span> </button> </div> <div class="centerarticle-entry-header"> <h3 class="centerarticle-entry-title"> <a href="https://zenn.dev/mizchi/articles/native-esm-age" 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%2Fmizchi%2Farticles%2Fnative-esm-age" alt="">Native ESM 時代のフロントエンドビルドツールの動向 </a> </h3> <ul class="centerarticle-entry-data"> <li> <span class="centerarticle-users"> <a href="/entry/s/zenn.dev/mizchi/articles/native-esm-age" class="js-keyboard-entry-page-openable" title="Native ESM 時代のフロントエンドビルドツールの動向 (163 ブックマーク)" data-gtm-click-label="entry-search-result-item-users"> 163 users </a> </span> </li> <li> <a href="/site/zenn.dev/mizchi" title="『zenn.dev/mizchi』の新着エントリー" data-gtm-click-label="entry-search-result-item-site-search-url"> zenn.dev/mizchi </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/09</span></li> </ul> </div> <div class="centerarticle-entry-contents has-image"> <div class="centerarticle-entry-item"> <p class="centerarticle-entry-summary">No Bundle ツールの流行: vite / snowpack モダンブラウザは Native ESM を備えているので、開発時は高速な localhost アクセスを頼って直接 import する、外部ライブラリだけ事前にコンパイルしておく、という手法が流行ってきている。プロダクション用は今まで通りビルドする。 webpack はすべてを一つにバンドルするためにメモリ上にファイルの実体と依存グラフを持っているが、これによりメモリと CPU を圧迫する問題があった。特に巨大なリポジトリではそれが顕著になる。 No bundle ツールの実装として vite と snowpack がある。 https://github.com/vitejs/vite https://www.snowpack.dev/ vite は使ってみた限り、更新時の差分ビルドが爆速で、明らかに体感が良い。 Vue</p> <ul class="entrysearch-entry-tags"> <li><a href="/q/esm" data-gtm-click-label="entry-search-result-item-tag">esm</a></li> <li><a href="/q/webpack" data-gtm-click-label="entry-search-result-item-tag">webpack</a></li> <li><a href="/q/typescript" data-gtm-click-label="entry-search-result-item-tag">typescript</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/vite" data-gtm-click-label="entry-search-result-item-tag">vite</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/rollup" data-gtm-click-label="entry-search-result-item-tag">rollup</a></li> <li><a href="/q/%E3%83%93%E3%83%AB%E3%83%89" data-gtm-click-label="entry-search-result-item-tag">ビルド</a></li> <li><a href="/q/cdn" data-gtm-click-label="entry-search-result-item-tag">cdn</a></li> </ul> <div class="following-bookmarks-container js-following-bookmarks-container" data-entry-url="https://zenn.dev/mizchi/articles/native-esm-age"> <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/mizchi/articles/native-esm-age" class="centerarticle-entry-image" target="_blank" rel="noopener"> <img src="https://cdn-ak-scissors.b.st-hatena.com/image/square/610073e8e8f4c8821a6b378a4e0477ac2ead4682/height=288;version=1;width=512/https%3A%2F%2Fres.cloudinary.com%2Fzenn%2Fimage%2Fupload%2Fs--ncu5xXCK--%2Fc_fit%252Cg_north_west%252Cl_text%3Anotosansjp-medium.otf_55%3ANative%252520ESM%252520%2525E6%252599%252582%2525E4%2525BB%2525A3%2525E3%252581%2525AE%2525E3%252583%252595%2525E3%252583%2525AD%2525E3%252583%2525B3%2525E3%252583%252588%2525E3%252582%2525A8%2525E3%252583%2525B3%2525E3%252583%252589%2525E3%252583%252593%2525E3%252583%2525AB%2525E3%252583%252589%2525E3%252583%252584%2525E3%252583%2525BC%2525E3%252583%2525AB%2525E3%252581%2525AE%2525E5%25258B%252595%2525E5%252590%252591%252Cw_1010%252Cx_90%252Cy_100%2Fg_south_west%252Cl_text%3Anotosansjp-medium.otf_37%3Amizchi%252Cx_203%252Cy_121%2Fg_south_west%252Ch_90%252Cl_fetch%3AaHR0cHM6Ly9saDMuZ29vZ2xldXNlcmNvbnRlbnQuY29tL2EtL0FPaDE0R2liclRHT052Z3d3ay1fNGxlcVk4TGNGSlNuX0FoWnpEWVlKaXJNcWc9czI1MC1j%252Cr_max%252Cw_90%252Cx_87%252Cy_95%2Fv1627283836%2Fdefault%2Fog-base-w1200-v2.png" alt="Native ESM 時代のフロントエンドビルドツールの動向" 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/a_da_chi/articles/416fdb8dabb83b"><span>あとで読む</span> </button> </div> <div class="centerarticle-entry-header"> <h3 class="centerarticle-entry-title"> <a href="https://zenn.dev/a_da_chi/articles/416fdb8dabb83b" 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%2Fa_da_chi%2Farticles%2F416fdb8dabb83b" alt="">Dan氏によるCreate React Appの将来、およびReactとフレームワークの関係性についてのコメントの翻訳 </a> </h3> <ul class="centerarticle-entry-data"> <li> <span class="centerarticle-users"> <a href="/entry/s/zenn.dev/a_da_chi/articles/416fdb8dabb83b" class="js-keyboard-entry-page-openable" title="Dan氏によるCreate React Appの将来、およびReactとフレームワークの関係性についてのコメントの翻訳 (162 ブックマーク)" data-gtm-click-label="entry-search-result-item-users"> 162 users </a> </span> </li> <li> <a href="/site/zenn.dev/a_da_chi" title="『zenn.dev/a_da_chi』の新着エントリー" data-gtm-click-label="entry-search-result-item-site-search-url"> zenn.dev/a_da_chi </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/02/04</span></li> </ul> </div> <div class="centerarticle-entry-contents has-image"> <div class="centerarticle-entry-item"> <p class="centerarticle-entry-summary">Create React App(以下「CRA」という)の将来、およびReactとフレームワークの関係性についてDan氏がGitHubのIssueのコメントで語った内容の翻訳です。非常に長いコメントですが、Reactユーザーであれば一読に値する内容だと思ったので翻訳してみました。参考になれば幸いです。原文翻訳みなさん、こんにちは。 CRAの現状については以前から痛いほどわかっており、それに対処するための提案に取り組んでいるところです。このプルリクエストは議論を始めることを目的にしていたので、私たちがCRAの将来について考えているいくつかの背景を説明する良い機会だと思います。私たちが考慮している理由とトレードオフについて明確にしたいので、いくつかのセクションからなる長いコメントになりそうです。もし全てを読む気になれないなら、最後のセクションまでスクロールして私たちが提案する今後の方法を</p> <ul class="entrysearch-entry-tags"> <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/%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/SSR" data-gtm-click-label="entry-search-result-item-tag">SSR</a></li> <li><a href="/q/React.js" data-gtm-click-label="entry-search-result-item-tag">React.js</a></li> <li><a href="/q/%E3%83%84%E3%83%BC%E3%83%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/a_da_chi/articles/416fdb8dabb83b"> <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/a_da_chi/articles/416fdb8dabb83b" class="centerarticle-entry-image" target="_blank" rel="noopener"> <img src="https://cdn-ak-scissors.b.st-hatena.com/image/square/16f60b14c7315e6d17a130182fb90c1f02d51f43/height=288;version=1;width=512/https%3A%2F%2Fres.cloudinary.com%2Fzenn%2Fimage%2Fupload%2Fs--Bi2fHAI_--%2Fc_fit%252Cg_north_west%252Cl_text%3Anotosansjp-medium.otf_55%3ADan%2525E6%2525B0%25258F%2525E3%252581%2525AB%2525E3%252582%252588%2525E3%252582%25258BCreate%252520React%252520App%2525E3%252581%2525AE%2525E5%2525B0%252586%2525E6%25259D%2525A5%2525E3%252580%252581%2525E3%252581%25258A%2525E3%252582%252588%2525E3%252581%2525B3React%2525E3%252581%2525A8%2525E3%252583%252595%2525E3%252583%2525AC%2525E3%252583%2525BC%2525E3%252583%2525A0%2525E3%252583%2525AF%2525E3%252583%2525BC%2525E3%252582%2525AF%2525E3%252581%2525AE%2525E9%252596%2525A2%2525E4%2525BF%252582%2525E6%252580%2525A7%2525E3%252581%2525AB%2525E3%252581%2525A4%2525E3%252581%252584%2525E3%252581%2525A6%2525E3%252581%2525AE%2525E3%252582%2525B3%2525E3%252583%2525A1%2525E3%252583%2525B3%2525E3%252583%252588%2525E3%252581%2525AE%2525E7%2525BF%2525BB%2525E8%2525A8%2525B3%252Cw_1010%252Cx_90%252Cy_100%2Fg_south_west%252Cl_text%3Anotosansjp-medium.otf_37%3AYutaro%252520Adachi%252Cx_203%252Cy_121%2Fg_south_west%252Ch_90%252Cl_fetch%3AaHR0cHM6Ly9zdG9yYWdlLmdvb2dsZWFwaXMuY29tL3plbm4tdXNlci11cGxvYWQvYXZhdGFyLzhmZmYwM2RiYjYuanBlZw%3D%3D%252Cr_max%252Cw_90%252Cx_87%252Cy_95%2Fv1627283836%2Fdefault%2Fog-base-w1200-v2.png" alt="Dan氏によるCreate React Appの将来、および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://zenn.dev/comm_vue_nuxt/articles/what-is-vite"><span>あとで読む</span> </button> </div> <div class="centerarticle-entry-header"> <h3 class="centerarticle-entry-title"> <a href="https://zenn.dev/comm_vue_nuxt/articles/what-is-vite" 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%2Fcomm_vue_nuxt%2Farticles%2Fwhat-is-vite" alt="">Vite ってよく聞くけど何なんですか？あれは </a> </h3> <ul class="centerarticle-entry-data"> <li> <span class="centerarticle-users"> <a href="/entry/s/zenn.dev/comm_vue_nuxt/articles/what-is-vite" class="js-keyboard-entry-page-openable" title="Vite ってよく聞くけど何なんですか？あれは (157 ブックマーク)" data-gtm-click-label="entry-search-result-item-users"> 157 users </a> </span> </li> <li> <a href="/site/zenn.dev/comm_vue_nuxt" title="『zenn.dev/comm_vue_nuxt』の新着エントリー" data-gtm-click-label="entry-search-result-item-site-search-url"> zenn.dev/comm_vue_nuxt </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/22</span></li> </ul> </div> <div class="centerarticle-entry-contents has-image"> <div class="centerarticle-entry-item"> <p class="centerarticle-entry-summary">初めに Vue.js の学習をしているとよく「Vite」という単語を目にすると思います。一体全体あれはなんなのでしょうか？？なんだかよく分からないコマンドを打つと、いつの間にかプロジェクトが作成されていたり、ファイルを編集するだけでブラウザで動くようになっていたりします。そもそも読み方も良くわかりません 😵‍💫 (ヴィテ...？ヴァイト...？) この記事では、Vite についての基本的な情報をまとめてみます。発音？発音の仕方は「ヴィート」です。こちらは公式ドキュメントにも書かれています。 Vite（フランス語で「素早い」という意味の単語で /vit/ ヴィートのように発音）は、しかし、実はこれにはやや表記揺れがあって、「ヴィット」と表記されているところもあります。例えば、話題になった Kawaii ロゴではそのように表記されています。まぁこれらはカタカナ表記の限界</p> <ul class="entrysearch-entry-tags"> <li><a href="/q/Vite" data-gtm-click-label="entry-search-result-item-tag">Vite</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/TypeScript" data-gtm-click-label="entry-search-result-item-tag">TypeScript</a></li> <li><a href="/q/Vue" data-gtm-click-label="entry-search-result-item-tag">Vue</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/Vue.js" data-gtm-click-label="entry-search-result-item-tag">Vue.js</a></li> <li><a href="/q/programming" data-gtm-click-label="entry-search-result-item-tag">programming</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://zenn.dev/comm_vue_nuxt/articles/what-is-vite"> <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/comm_vue_nuxt/articles/what-is-vite" class="centerarticle-entry-image" target="_blank" rel="noopener"> <img src="https://cdn-ak-scissors.b.st-hatena.com/image/square/a43f5cec614f02558ffedc4a58f2f477c8c75aa0/height=288;version=1;width=512/https%3A%2F%2Fres.cloudinary.com%2Fzenn%2Fimage%2Fupload%2Fs--0zFiF_L4--%2Fc_fit%252Cg_north_west%252Cl_text%3Anotosansjp-medium.otf_55%3AVite%252520%2525E3%252581%2525A3%2525E3%252581%2525A6%2525E3%252582%252588%2525E3%252581%25258F%2525E8%252581%25259E%2525E3%252581%25258F%2525E3%252581%252591%2525E3%252581%2525A9%2525E4%2525BD%252595%2525E3%252581%2525AA%2525E3%252582%252593%2525E3%252581%2525A7%2525E3%252581%252599%2525E3%252581%25258B%2525EF%2525BC%25259F%252520%2525E3%252581%252582%2525E3%252582%25258C%2525E3%252581%2525AF%252Cw_1010%252Cx_90%252Cy_100%2Fg_south_west%252Cl_text%3Anotosansjp-medium.otf_34%3AVue%252520Beginners%252Cx_220%252Cy_108%2Fbo_3px_solid_rgb%3Ad6e3ed%252Cg_south_west%252Ch_90%252Cl_fetch%3AaHR0cHM6Ly9zdG9yYWdlLmdvb2dsZWFwaXMuY29tL3plbm4tdXNlci11cGxvYWQvYXZhdGFyLzU5MTZlOWFlNjguanBlZw%3D%3D%252Cr_20%252Cw_90%252Cx_92%252Cy_102%2Fco_rgb%3A6e7b85%252Cg_south_west%252Cl_text%3Anotosansjp-medium.otf_30%3AVue%2525E3%252583%2525BBNuxt%252520%2525E6%252583%252585%2525E5%2525A0%2525B1%2525E3%252581%25258C%2525E9%25259B%252586%2525E3%252581%2525BE%2525E3%252582%25258B%2525E5%2525BA%252583%2525E5%2525A0%2525B4%252520%25252F%252520P...%252Cx_220%252Cy_160%2Fbo_4px_solid_white%252Cg_south_west%252Ch_50%252Cl_fetch%3AaHR0cHM6Ly9zdG9yYWdlLmdvb2dsZWFwaXMuY29tL3plbm4tdXNlci11cGxvYWQvYXZhdGFyL2JjNzI5NGQ3YWQuanBlZw%3D%3D%252Cr_max%252Cw_50%252Cx_139%252Cy_84%2Fv1627283836%2Fdefault%2Fog-base-w1200-v2.png" alt="Vite ってよく聞くけど何なんですか？あれは" 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://www.kabuku.co.jp/developers/ultrafast-tsx-build-tool-esbuild"><span>あとで読む</span> </button> </div> <div class="centerarticle-entry-header"> <h3 class="centerarticle-entry-title"> <a href="https://www.kabuku.co.jp/developers/ultrafast-tsx-build-tool-esbuild" 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.kabuku.co.jp%2Fdevelopers%2Fultrafast-tsx-build-tool-esbuild" alt="">[Web フロントエンド] esbuild が爆速すぎて webpack / Rollup にはもう戻れない - 株式会社カブク </a> </h3> <ul class="centerarticle-entry-data"> <li> <span class="centerarticle-users"> <a href="/entry/s/www.kabuku.co.jp/developers/ultrafast-tsx-build-tool-esbuild" class="js-keyboard-entry-page-openable" title="[Web フロントエンド] esbuild が爆速すぎて webpack / Rollup にはもう戻れない - 株式会社カブク (150 ブックマーク)" data-gtm-click-label="entry-search-result-item-users"> 150 users </a> </span> </li> <li> <a href="/site/www.kabuku.co.jp/" title="『www.kabuku.co.jp』の新着エントリー" data-gtm-click-label="entry-search-result-item-site-search-url"> www.kabuku.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">2020/06/16</span></li> </ul> </div> <div class="centerarticle-entry-contents "> <div class="centerarticle-entry-item"> <p class="centerarticle-entry-summary">TypeScript + Preact + Material UI + material-table で作っている管理画面のビルドツールを Rollup から esbuild に変えたお話です。 2021/01/07 追記 esbuild に新しく CSS ローダーやプラグイン機構が実装されたので紹介記事を書きました！ esbuild の機能が足りないならプラグインを自作すればいいじゃない https://www.kabuku.co.jp/developers/create-your-own-esbuild-plugin はじめにこれまでの JavaScript ビルドツールと私以前は私も定石通り「アプリには webpack、ライブラリには Rollup」をビルドに利用していましたが、近年はアプリのビルドにも Rollup を利用することが多くなり、 webpack を利用することはな</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/webpack" data-gtm-click-label="entry-search-result-item-tag">webpack</a></li> <li><a href="/q/esbuild" data-gtm-click-label="entry-search-result-item-tag">esbuild</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/%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/%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/css" data-gtm-click-label="entry-search-result-item-tag">css</a></li> <li><a href="/q/Developers" data-gtm-click-label="entry-search-result-item-tag">Developers</a></li> </ul> <div class="following-bookmarks-container js-following-bookmarks-container" data-entry-url="https://www.kabuku.co.jp/developers/ultrafast-tsx-build-tool-esbuild"> <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://zenn.dev/mizchi/articles/deno-first-choice"><span>あとで読む</span> </button> </div> <div class="centerarticle-entry-header"> <h3 class="centerarticle-entry-title"> <a href="https://zenn.dev/mizchi/articles/deno-first-choice" 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%2Fmizchi%2Farticles%2Fdeno-first-choice" alt="">Deno first でやっていく </a> </h3> <ul class="centerarticle-entry-data"> <li> <span class="centerarticle-users"> <a href="/entry/s/zenn.dev/mizchi/articles/deno-first-choice" class="js-keyboard-entry-page-openable" title="Deno first でやっていく (146 ブックマーク)" data-gtm-click-label="entry-search-result-item-users"> 146 users </a> </span> </li> <li> <a href="/site/zenn.dev/mizchi" title="『zenn.dev/mizchi』の新着エントリー" data-gtm-click-label="entry-search-result-item-site-search-url"> zenn.dev/mizchi </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/19</span></li> </ul> </div> <div class="centerarticle-entry-contents has-image"> <div class="centerarticle-entry-item"> <p class="centerarticle-entry-summary">去年末ぐらいから Deno を使う割合がグッと増えてきた。最近のJS関連は7割ぐらい deno 環境の VSCode でコードを書いている気がする。今回はいくつかの実例を示しながら、実際に Deno 使えるじゃんというイメージを持ってもらうためのユースケースを紹介していく。というか、 deno が普及してくれないと、自分が作ったツールの紹介を全部 deno のインストールから書かないといけなくなる。みんなインストールしといて。最初に: なぜ Deno を使いたいか一番の問題点、Node は新しいプロジェクトを一式整えるための手間が非常に重い。とくに ts で書いたものを他の環境に渡すための方法が未だにしんどい。ある環境で動いたコードをそのままコピーしても、プロジェクト設定の非互換を踏む可能性が非常に高い。 deno にそういう側面がないとは言わないが、非常に少ない。とくに TS</p> <ul class="entrysearch-entry-tags"> <li><a href="/q/deno" data-gtm-click-label="entry-search-result-item-tag">deno</a></li> <li><a href="/q/TypeScript" data-gtm-click-label="entry-search-result-item-tag">TypeScript</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/node" data-gtm-click-label="entry-search-result-item-tag">node</a></li> <li><a href="/q/%E3%83%84%E3%83%BC%E3%83%AB" data-gtm-click-label="entry-search-result-item-tag">ツール</a></li> <li><a href="/q/vite" data-gtm-click-label="entry-search-result-item-tag">vite</a></li> <li><a href="/q/VSCode" data-gtm-click-label="entry-search-result-item-tag">VSCode</a></li> <li><a href="/q/CLI" data-gtm-click-label="entry-search-result-item-tag">CLI</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/%E9%81%8B%E7%94%A8" 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/mizchi/articles/deno-first-choice"> <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/mizchi/articles/deno-first-choice" class="centerarticle-entry-image" target="_blank" rel="noopener"> <img src="https://cdn-ak-scissors.b.st-hatena.com/image/square/fb74ad70050a10398fbce33c3ad5a9eb77b0c931/height=288;version=1;width=512/https%3A%2F%2Fres.cloudinary.com%2Fzenn%2Fimage%2Fupload%2Fs--oTRWo62_--%2Fc_fit%252Cg_north_west%252Cl_text%3Anotosansjp-medium.otf_55%3ADeno%252520first%252520%2525E3%252581%2525A7%2525E3%252582%252584%2525E3%252581%2525A3%2525E3%252581%2525A6%2525E3%252581%252584%2525E3%252581%25258F%252Cw_1010%252Cx_90%252Cy_100%2Fg_south_west%252Cl_text%3Anotosansjp-medium.otf_37%3Amizchi%252Cx_203%252Cy_121%2Fg_south_west%252Ch_90%252Cl_fetch%3AaHR0cHM6Ly9saDMuZ29vZ2xldXNlcmNvbnRlbnQuY29tL2EtL0FPaDE0R2liclRHT052Z3d3ay1fNGxlcVk4TGNGSlNuX0FoWnpEWVlKaXJNcWc9czI1MC1j%252Cr_max%252Cw_90%252Cx_87%252Cy_95%2Fv1627283836%2Fdefault%2Fog-base-w1200-v2.png" alt="Deno first でやっていく" 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/nekoya/articles/dd0f0e8a2fa35f"><span>あとで読む</span> </button> </div> <div class="centerarticle-entry-header"> <h3 class="centerarticle-entry-title"> <a href="https://zenn.dev/nekoya/articles/dd0f0e8a2fa35f" 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%2Fnekoya%2Farticles%2Fdd0f0e8a2fa35f" alt="">Create React Appは役割を終えました </a> </h3> <ul class="centerarticle-entry-data"> <li> <span class="centerarticle-users"> <a href="/entry/s/zenn.dev/nekoya/articles/dd0f0e8a2fa35f" class="js-keyboard-entry-page-openable" title="Create React Appは役割を終えました (144 ブックマーク)" data-gtm-click-label="entry-search-result-item-users"> 144 users </a> </span> </li> <li> <a href="/site/zenn.dev/nekoya" title="『zenn.dev/nekoya』の新着エントリー" data-gtm-click-label="entry-search-result-item-site-search-url"> zenn.dev/nekoya </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/07/20</span></li> </ul> </div> <div class="centerarticle-entry-contents has-image"> <div class="centerarticle-entry-item"> <p class="centerarticle-entry-summary">長らくReactの入門キットとして使われてきたCreact React App（CRA） 2023年春に正式版になった新しいReactの公式ドキュメントでは、選択肢として紹介されていません。標準から外れたとは言え、まだ一定の役割は担えるのだろうかと思い様子を見てみました。とりあえず試してみるまずは現状確認のために実際にプロジェクトを作ってみます。 $ npx create-react-app cra --template typescript Creating a new React app in /Users/nekoya/src/github.com/nekoya/ggg/cra. Installing packages. This might take a couple of minutes. Installing react, react-dom, and react-scr</p> <ul class="entrysearch-entry-tags"> <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/CRA" data-gtm-click-label="entry-search-result-item-tag">CRA</a></li> <li><a href="/q/vite" data-gtm-click-label="entry-search-result-item-tag">vite</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://zenn.dev/nekoya/articles/dd0f0e8a2fa35f"> <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/nekoya/articles/dd0f0e8a2fa35f" class="centerarticle-entry-image" target="_blank" rel="noopener"> <img src="https://cdn-ak-scissors.b.st-hatena.com/image/square/b30dd07a88997db6afdc8a60f3e44bd6ec66f393/height=288;version=1;width=512/https%3A%2F%2Fres.cloudinary.com%2Fzenn%2Fimage%2Fupload%2Fs--vRroOK-c--%2Fc_fit%252Cg_north_west%252Cl_text%3Anotosansjp-medium.otf_55%3ACreate%252520React%252520App%2525E3%252581%2525AF%2525E5%2525BD%2525B9%2525E5%252589%2525B2%2525E3%252582%252592%2525E7%2525B5%252582%2525E3%252581%252588%2525E3%252581%2525BE%2525E3%252581%252597%2525E3%252581%25259F%252Cw_1010%252Cx_90%252Cy_100%2Fg_south_west%252Cl_text%3Anotosansjp-medium.otf_37%3Anekoya%252Cx_203%252Cy_121%2Fg_south_west%252Ch_90%252Cl_fetch%3AaHR0cHM6Ly9zdG9yYWdlLmdvb2dsZWFwaXMuY29tL3plbm4tdXNlci11cGxvYWQvYXZhdGFyLzk2ZmU4ZWVmN2UuanBlZw%3D%3D%252Cr_max%252Cw_90%252Cx_87%252Cy_95%2Fv1627283836%2Fdefault%2Fog-base-w1200-v2.png" alt="Create React Appは役割を終えました" 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.webcreatorbox.com/blog/vite-react"><span>あとで読む</span> </button> </div> <div class="centerarticle-entry-header"> <h3 class="centerarticle-entry-title"> <a href="https://www.webcreatorbox.com/blog/vite-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%2Fwww.webcreatorbox.com%2Fblog%2Fvite-react" alt="">Vite + React で新規プロジェクトの開発環境を作ろう </a> </h3> <ul class="centerarticle-entry-data"> <li> <span class="centerarticle-users"> <a href="/entry/s/www.webcreatorbox.com/blog/vite-react" class="js-keyboard-entry-page-openable" title="Vite + React で新規プロジェクトの開発環境を作ろう (117 ブックマーク)" data-gtm-click-label="entry-search-result-item-users"> 117 users </a> </span> </li> <li> <a href="/site/www.webcreatorbox.com/" title="『www.webcreatorbox.com』の新着エントリー" data-gtm-click-label="entry-search-result-item-site-search-url"> www.webcreatorbox.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/01/18</span></li> </ul> </div> <div class="centerarticle-entry-contents has-image"> <div class="centerarticle-entry-item"> <p class="centerarticle-entry-summary">Vite + React で新規プロジェクトの開発環境を作ろうViteは2020年に発表されたフロントエンドのビルドツールです。最初「ヴァイト」と読んでたんですが、「ヴィート」と読むみたいですね。フランス語で「速い」という意味だそうです。絶賛Reactのお勉強中なので、ViteでReactの環境を作る流れを備忘録的にまとめておきます！この記事は動画でも解説しています。動画派の方はぜひご覧ください！ Vite とは？Viteを使えばベースのプログラムを予め準備しておいてくれているので、開発をすぐに始められるようになります。スターターキットとか、テンプレートみたいなものですね。他にも複数のファイルをひとつにまとめたり、Sass を CSS に変換するなどの作業を爆速でできるようになります。また、ファイルを保存すると同時に、確認画面も自動的に更新されます。ホットリロードと呼ばれるものですね。</p> <ul class="entrysearch-entry-tags"> <li><a href="/q/Vite" data-gtm-click-label="entry-search-result-item-tag">Vite</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/%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> <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/%E3%82%B3%E3%83%9E%E3%83%B3%E3%83%89" data-gtm-click-label="entry-search-result-item-tag">コマンド</a></li> <li><a href="/q/node.js" data-gtm-click-label="entry-search-result-item-tag">node.js</a></li> <li><a href="/q/js" data-gtm-click-label="entry-search-result-item-tag">js</a></li> </ul> <div class="following-bookmarks-container js-following-bookmarks-container" data-entry-url="https://www.webcreatorbox.com/blog/vite-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://www.webcreatorbox.com/blog/vite-react" class="centerarticle-entry-image" target="_blank" rel="noopener"> <img src="https://cdn-ak-scissors.b.st-hatena.com/image/square/c48fd4a89eb71cfa6466988ea6b561b26d9c07c9/height=288;version=1;width=512/https%3A%2F%2Fimages.microcms-assets.io%2Fassets%2F2d1b8c905c1d447eb649028ca07253a8%2F307e09dc29f14a58bf97c0fc3781621b%2Fthumbnail-vite-react.jpg" alt="Vite + 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://azukiazusa.dev/blog/full-stack-web-framework-honox/"><span>あとで読む</span> </button> </div> <div class="centerarticle-entry-header"> <h3 class="centerarticle-entry-title"> <a href="https://azukiazusa.dev/blog/full-stack-web-framework-honox/" 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%2Fazukiazusa.dev%2Fblog%2Ffull-stack-web-framework-honox%2F" alt="">フルスタック Web フレームワーク HonoX を使ってみる </a> </h3> <ul class="centerarticle-entry-data"> <li> <span class="centerarticle-users"> <a href="/entry/s/azukiazusa.dev/blog/full-stack-web-framework-honox/" class="js-keyboard-entry-page-openable" title="フルスタック Web フレームワーク HonoX を使ってみる (116 ブックマーク)" data-gtm-click-label="entry-search-result-item-users"> 116 users </a> </span> </li> <li> <a href="/site/azukiazusa.dev/" title="『azukiazusa.dev』の新着エントリー" data-gtm-click-label="entry-search-result-item-site-search-url"> azukiazusa.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">2024/02/11</span></li> </ul> </div> <div class="centerarticle-entry-contents has-image"> <div class="centerarticle-entry-item"> <p class="centerarticle-entry-summary">Warning HonoX は 2024 年 2 月現在アルファステージとなっています。セマンティックバージョンに従わずに破壊的な変更が行われる可能性があります。 HonoX は Hono と Vite をベースにしたフルスタック Web フレームワークです。以下のような特徴があります。ファイルベースのルーティング高速な SSR BYOR（Bring Your Own Rerender）：レンダリングエンジンを自由に選択できます islands ハイドレーションミドルウェア：バックエンドは Hono として動作するため、多くの Hono のミドルウェアを使用できます HonoX を始める新しい HonoX のプロジェクトを作成するためには、hono-create コマンドを使用します。</p> <ul class="entrysearch-entry-tags"> <li><a href="/q/hono" data-gtm-click-label="entry-search-result-item-tag">hono</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/honox" data-gtm-click-label="entry-search-result-item-tag">honox</a></li> <li><a href="/q/vite" data-gtm-click-label="entry-search-result-item-tag">vite</a></li> <li><a href="/q/JavaScript" data-gtm-click-label="entry-search-result-item-tag">JavaScript</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/web" data-gtm-click-label="entry-search-result-item-tag">web</a></li> <li><a href="/q/Web%E5%88%B6%E4%BD%9C" data-gtm-click-label="entry-search-result-item-tag">Web制作</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://azukiazusa.dev/blog/full-stack-web-framework-honox/"> <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://azukiazusa.dev/blog/full-stack-web-framework-honox/" class="centerarticle-entry-image" target="_blank" rel="noopener"> <img src="https://cdn-ak-scissors.b.st-hatena.com/image/square/0404fe696ae0b9ba0d36f171495a9450bc7695be/height=288;version=1;width=512/https%3A%2F%2Fazukiazusa.dev%2Fblog%2Fogp%2Ffull-stack-web-framework-honox.png" alt="フルスタック Web フレームワーク HonoX を使ってみる" 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://developers.prtimes.jp/2023/02/08/migrate-from-webpack-to-vite/"><span>あとで読む</span> </button> </div> <div class="centerarticle-entry-header"> <h3 class="centerarticle-entry-title"> <a href="https://developers.prtimes.jp/2023/02/08/migrate-from-webpack-to-vite/" 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%2Fdevelopers.prtimes.jp%2F2023%2F02%2F08%2Fmigrate-from-webpack-to-vite%2F" alt="">Webpack から Vite に段階的に移行しました | PR TIMES 開発者ブログ </a> </h3> <ul class="centerarticle-entry-data"> <li> <span class="centerarticle-users"> <a href="/entry/s/developers.prtimes.jp/2023/02/08/migrate-from-webpack-to-vite/" class="js-keyboard-entry-page-openable" title="Webpack から Vite に段階的に移行しました | PR TIMES 開発者ブログ (116 ブックマーク)" data-gtm-click-label="entry-search-result-item-users"> 116 users </a> </span> </li> <li> <a href="/site/developers.prtimes.jp/" title="『developers.prtimes.jp』の新着エントリー" data-gtm-click-label="entry-search-result-item-site-search-url"> developers.prtimes.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">2023/02/08</span></li> </ul> </div> <div class="centerarticle-entry-contents has-image"> <div class="centerarticle-entry-item"> <p class="centerarticle-entry-summary">こんにちは。PR TIMES フロントエンドエンジニアの岩元 (@yoiwamoto) です。 PR TIMES ではいくつかのページが React で実装されており、Webpack でビルドを行っていました。今回は、一部のページを除いてこの Webpack を Vite へ置き換えたので、その経緯や結果を共有します。まとめビルド時間が長いことが課題で移行を行い、結果として開発体験・デプロイ時間等が大幅に改善されました。開発環境のみの移行 → フィーチャートグルでの本番試験 → リリース → Webpack の廃止と、移行は段階的に進めました。なぜ Webpack をやめたのか一番はやはり、ビルド時間の遅さです。今回、当時の環境を再現することが難しく、改めて計測はできなかったのですが、本番用のビルドはおおよそ3~4分、開発環境での watch ビルドで変更が反映 (HMR)</p> <ul class="entrysearch-entry-tags"> <li><a href="/q/vite" data-gtm-click-label="entry-search-result-item-tag">vite</a></li> <li><a href="/q/webpack" data-gtm-click-label="entry-search-result-item-tag">webpack</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/Node.js" data-gtm-click-label="entry-search-result-item-tag">Node.js</a></li> <li><a href="/q/techfeed" data-gtm-click-label="entry-search-result-item-tag">techfeed</a></li> </ul> <div class="following-bookmarks-container js-following-bookmarks-container" data-entry-url="https://developers.prtimes.jp/2023/02/08/migrate-from-webpack-to-vite/"> <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://developers.prtimes.jp/2023/02/08/migrate-from-webpack-to-vite/" class="centerarticle-entry-image" target="_blank" rel="noopener"> <img src="https://cdn-ak-scissors.b.st-hatena.com/image/square/845f21092a44ffbd5d28787106a4d786feeeba24/height=288;version=1;width=512/https%3A%2F%2Fdevelopers.prtimes.jp%2Fwp-content%2Fuploads%2F2023%2F02%2FScreenshot-2023-02-06-at-15.06.44.png" alt="Webpack から Vite に段階的に移行しました | PR TIMES 開発者ブログ" 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.spacely.co.jp/entry/2023/06/30/145133"><span>あとで読む</span> </button> </div> <div class="centerarticle-entry-header"> <h3 class="centerarticle-entry-title"> <a href="https://tech.spacely.co.jp/entry/2023/06/30/145133" 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.spacely.co.jp%2Fentry%2F2023%2F06%2F30%2F145133" alt="">Vue 2 から 3 へ移行しようとしたらいちばん大変なのが Vuetify 2 から 3 への移行だった話 - spacelyのブログ </a> </h3> <ul class="centerarticle-entry-data"> <li> <span class="centerarticle-users"> <a href="/entry/s/tech.spacely.co.jp/entry/2023/06/30/145133" class="js-keyboard-entry-page-openable" title="Vue 2 から 3 へ移行しようとしたらいちばん大変なのが Vuetify 2 から 3 への移行だった話 - spacelyのブログ (116 ブックマーク)" data-gtm-click-label="entry-search-result-item-users"> 116 users </a> </span> </li> <li> <a href="/site/tech.spacely.co.jp/" title="『tech.spacely.co.jp』の新着エントリー" data-gtm-click-label="entry-search-result-item-site-search-url"> tech.spacely.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">2023/06/30</span></li> </ul> </div> <div class="centerarticle-entry-contents has-image"> <div class="centerarticle-entry-item"> <p class="centerarticle-entry-summary">はじめに株式会社スペースリーフロントエンドエンジニアの宮坂と申します。ふだんは3Dビューアやその編集画面のDOM部分をReactやVueで書きつつ、たまにフロントエンド開発環境構築おじさんとして他チームへ出しゃばったりして生きています。今回はその環境構築に関わるところ、Vue 2 から 3 へ移行しようとしたらいちばん大変なのが Vuetify 2 から 3 への移行だった話を書きます。レガシーを生かしつつアップグレードする苦労話としてニッチに刺されば幸いです。経緯と背景 Vue 2 のEOLまで1年を切ってスペースリーはサービスインから6年以上経つこともあり、技術スタックはプロジェクトによって新しいものもあれば、今となっては古いものもあります。リリースから日が浅いパノラマ変換3Dプレイヤーは2023年6月時点でエンドユーザー向けの部分がReact 18で、事業者向けの部分</p> <ul class="entrysearch-entry-tags"> <li><a href="/q/Vue.js" data-gtm-click-label="entry-search-result-item-tag">Vue.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/vue" data-gtm-click-label="entry-search-result-item-tag">vue</a></li> <li><a href="/q/web" data-gtm-click-label="entry-search-result-item-tag">web</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> <li><a href="/q/node.js" data-gtm-click-label="entry-search-result-item-tag">node.js</a></li> </ul> <div class="following-bookmarks-container js-following-bookmarks-container" data-entry-url="https://tech.spacely.co.jp/entry/2023/06/30/145133"> <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.spacely.co.jp/entry/2023/06/30/145133" class="centerarticle-entry-image" target="_blank" rel="noopener"> <img src="https://cdn-ak-scissors.b.st-hatena.com/image/square/627f638866533b897e9b10e071dc05137cd43967/height=288;version=1;width=512/https%3A%2F%2Fcdn.image.st-hatena.com%2Fimage%2Fscale%2F493865165f6ff4d03e627123563723ae6a15cffe%2Fbackend%3Dimagemagick%3Bversion%3D1%3Bwidth%3D1300%2Fhttps%253A%252F%252Fcdn-ak.f.st-hatena.com%252Fimages%252Ffotolife%252Fs%252Fspacely_rec%252F20230629%252F20230629105353.png" alt="Vue 2 から 3 へ移行しようとしたらいちばん大変なのが Vuetify 2 から 3 への移行だった話 - spacelyのブログ" 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://vike.dev/"><span>あとで読む</span> </button> </div> <div class="centerarticle-entry-header"> <h3 class="centerarticle-entry-title"> <a href="https://vike.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%2Fvike.dev%2F" alt="">Vike </a> </h3> <ul class="centerarticle-entry-data"> <li> <span class="centerarticle-users"> <a href="/entry/s/vike.dev/" class="js-keyboard-entry-page-openable" title="Vike (111 ブックマーク)" data-gtm-click-label="entry-search-result-item-users"> 111 users </a> </span> </li> <li> <a href="/site/vike.dev/" title="『vike.dev』の新着エントリー" data-gtm-click-label="entry-search-result-item-site-search-url"> vike.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">2023/09/27</span></li> </ul> </div> <div class="centerarticle-entry-contents has-image"> <div class="centerarticle-entry-item"> <p class="centerarticle-entry-summary">Flexible Your Stack, Your ChoiceEnjoy architectural freedom and choose any tool (React/Vue/...), any data connection (RPC/REST/GraphQL), any rendering (SPA/SSR/SSG), and any deployment (static/server/edge). Use Vike extensions for automatic integration and later, if the need arises, eject for full control over integration.</p> <ul class="entrysearch-entry-tags"> <li><a href="/q/vite" data-gtm-click-label="entry-search-result-item-tag">vite</a></li> <li><a href="/q/javascript" data-gtm-click-label="entry-search-result-item-tag">javascript</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/framework" data-gtm-click-label="entry-search-result-item-tag">framework</a></li> <li><a href="/q/ssr" data-gtm-click-label="entry-search-result-item-tag">ssr</a></li> <li><a href="/q/plugin" data-gtm-click-label="entry-search-result-item-tag">plugin</a></li> </ul> <div class="following-bookmarks-container js-following-bookmarks-container" data-entry-url="https://vike.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://vike.dev/" class="centerarticle-entry-image" target="_blank" rel="noopener"> <img src="https://cdn-ak-scissors.b.st-hatena.com/image/square/0e59d25e96a218109eb8cbab42d7bce5fbf96b5a/height=288;version=1;width=512/https%3A%2F%2Fvike.dev%2Fbanner.jpg" alt="Vike" 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.medpeer.co.jp/entry/auto-print-electron-app"><span>あとで読む</span> </button> </div> <div class="centerarticle-entry-header"> <h3 class="centerarticle-entry-title"> <a href="https://tech.medpeer.co.jp/entry/auto-print-electron-app" 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.medpeer.co.jp%2Fentry%2Fauto-print-electron-app" alt="">処方せんの自動印刷アプリを Electron でつくった話 - メドピア開発者ブログ </a> </h3> <ul class="centerarticle-entry-data"> <li> <span class="centerarticle-users"> <a href="/entry/s/tech.medpeer.co.jp/entry/auto-print-electron-app" class="js-keyboard-entry-page-openable" title="処方せんの自動印刷アプリを Electron でつくった話 - メドピア開発者ブログ (102 ブックマーク)" data-gtm-click-label="entry-search-result-item-users"> 102 users </a> </span> </li> <li> <a href="/site/tech.medpeer.co.jp/" title="『tech.medpeer.co.jp』の新着エントリー" data-gtm-click-label="entry-search-result-item-site-search-url"> tech.medpeer.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/08/19</span></li> </ul> </div> <div class="centerarticle-entry-contents has-image"> <div class="centerarticle-entry-item"> <p class="centerarticle-entry-summary">フロントエンドエンジニアの小林和弘です。 kakari という薬局向けに提供しているサービスで Electron を使って Windows アプリケーションを作成したので、そのことについてお話しようかと思います。事の発端これまで、「kakari」では、患者さまから薬局へ処方せんが送信されたときに薬剤師さまが処方せんの受信に気づけるように FAX で処方せんを送信していました。しかし、FAX 送信に利用していた Twilio Programmable Fax サービスが 2021 年 12 月 17 日をもってサービス終了になってしまいました。このサービス終了に対応すべく、薬局向けに処方せんが送信されたらプリンターで処方せん印刷ができる Windows アプリケーションを Electron で作成することになりました。そもそもElectronとは HTML, CSS, JS のフロ</p> <ul class="entrysearch-entry-tags"> <li><a href="/q/Electron" data-gtm-click-label="entry-search-result-item-tag">Electron</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%A2%E3%83%97%E3%83%AA" data-gtm-click-label="entry-search-result-item-tag">アプリ</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> <li><a href="/q/programming" data-gtm-click-label="entry-search-result-item-tag">programming</a></li> <li><a href="/q/development" data-gtm-click-label="entry-search-result-item-tag">development</a></li> <li><a href="/q/%E3%83%96%E3%83%AD%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://tech.medpeer.co.jp/entry/auto-print-electron-app"> <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.medpeer.co.jp/entry/auto-print-electron-app" class="centerarticle-entry-image" target="_blank" rel="noopener"> <img src="https://cdn-ak-scissors.b.st-hatena.com/image/square/26527bf00e2455531185bc4b5254e9d107b776d8/height=288;version=1;width=512/https%3A%2F%2Fcdn.image.st-hatena.com%2Fimage%2Fscale%2F8e53ab3754e4d32c7534a9f816b955aee39ab88c%2Fbackend%3Dimagemagick%3Bversion%3D1%3Bwidth%3D1300%2Fhttps%253A%252F%252Fcdn-ak.f.st-hatena.com%252Fimages%252Ffotolife%252Fm%252Fmpg-kazuhiro-kobayashi%252F20220819%252F20220819110605.png" alt="処方せんの自動印刷アプリを Electron でつくった話 - メドピア開発者ブログ" 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/kazukix/articles/react-setup-2024"><span>あとで読む</span> </button> </div> <div class="centerarticle-entry-header"> <h3 class="centerarticle-entry-title"> <a href="https://zenn.dev/kazukix/articles/react-setup-2024" 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%2Fkazukix%2Farticles%2Freact-setup-2024" alt="">2024年 React 環境構築 with Vite </a> </h3> <ul class="centerarticle-entry-data"> <li> <span class="centerarticle-users"> <a href="/entry/s/zenn.dev/kazukix/articles/react-setup-2024" class="js-keyboard-entry-page-openable" title="2024年 React 環境構築 with Vite (98 ブックマーク)" data-gtm-click-label="entry-search-result-item-users"> 98 users </a> </span> </li> <li> <a href="/site/zenn.dev/kazukix" title="『zenn.dev/kazukix』の新着エントリー" data-gtm-click-label="entry-search-result-item-site-search-url"> zenn.dev/kazukix </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/01/05</span></li> </ul> </div> <div class="centerarticle-entry-contents has-image"> <div class="centerarticle-entry-item"> <p class="centerarticle-entry-summary">2024年9月9日追記 2024年4月にこの記事を書いた時点から、Vite の設定ファイルや構成が変更されました。そのため、この記事の手順が現在では正しく動作しない可能性があります。下記の Github リポジトリと package.json を参照し、ライブラリのバージョンを合わせることをお勧めします。書いていて気づいたのですが、この記事に特に目新しいものはありません。コピペで最速環境構築をしたい方向けです。それぞれのツールについて細かい解説はしていないため、詳細は公式ドキュメントをご参照ください。リポジトリはこちら。 Node.js この記事では Node.js のバージョン管理に volta を使用しますが、nvm や nodebrew などでも問題ありません。パッケージマネージャーには pnpm を使用したいところですが、2024 年 1 月現在、volta の pnpm サ</p> <ul class="entrysearch-entry-tags"> <li><a href="/q/react" data-gtm-click-label="entry-search-result-item-tag">react</a></li> <li><a href="/q/vite" data-gtm-click-label="entry-search-result-item-tag">vite</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/programming" data-gtm-click-label="entry-search-result-item-tag">programming</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/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://zenn.dev/kazukix/articles/react-setup-2024"> <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/kazukix/articles/react-setup-2024" class="centerarticle-entry-image" target="_blank" rel="noopener"> <img src="https://cdn-ak-scissors.b.st-hatena.com/image/square/b1a3d7907e770a279f6029981e93e459f0d082ec/height=288;version=1;width=512/https%3A%2F%2Fres.cloudinary.com%2Fzenn%2Fimage%2Fupload%2Fs--9IkRuKXa--%2Fc_fit%252Cg_north_west%252Cl_text%3Anotosansjp-medium.otf_55%3A2024%2525E5%2525B9%2525B4%252520React%252520%2525E7%252592%2525B0%2525E5%2525A2%252583%2525E6%2525A7%25258B%2525E7%2525AF%252589%252520with%252520Vite%252Cw_1010%252Cx_90%252Cy_100%2Fg_south_west%252Cl_text%3Anotosansjp-medium.otf_37%3AKazuki%252520Matsuda%252Cx_203%252Cy_121%2Fg_south_west%252Ch_90%252Cl_fetch%3AaHR0cHM6Ly9zdG9yYWdlLmdvb2dsZWFwaXMuY29tL3plbm4tdXNlci11cGxvYWQvYXZhdGFyL2QyNTA3YTBjYzYuanBlZw%3D%3D%252Cr_max%252Cw_90%252Cx_87%252Cy_95%2Fv1627283836%2Fdefault%2Fog-base-w1200-v2.png" alt="2024年 React 環境構築 with Vite" 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://dev.henry.jp/entry/replace-vite-with-nextjs"><span>あとで読む</span> </button> </div> <div class="centerarticle-entry-header"> <h3 class="centerarticle-entry-title"> <a href="https://dev.henry.jp/entry/replace-vite-with-nextjs" 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%2Fdev.henry.jp%2Fentry%2Freplace-vite-with-nextjs" alt="">フロントエンドをViteからNext.jsに書き換えた話〜パフォーマンス編〜 - 株式会社ヘンリーエンジニアブログ </a> </h3> <ul class="centerarticle-entry-data"> <li> <span class="centerarticle-users"> <a href="/entry/s/dev.henry.jp/entry/replace-vite-with-nextjs" class="js-keyboard-entry-page-openable" title="フロントエンドをViteからNext.jsに書き換えた話〜パフォーマンス編〜 - 株式会社ヘンリーエンジニアブログ (98 ブックマーク)" data-gtm-click-label="entry-search-result-item-users"> 98 users </a> </span> </li> <li> <a href="/site/dev.henry.jp/" title="『dev.henry.jp』の新着エントリー" data-gtm-click-label="entry-search-result-item-site-search-url"> dev.henry.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">2023/06/02</span></li> </ul> </div> <div class="centerarticle-entry-contents has-image"> <div class="centerarticle-entry-item"> <p class="centerarticle-entry-summary">こんにちは。4月にヘンリーに入社したSWE / アーキテクト / SETのsumirenです。弊社ではレセコン一体型クラウド電子カルテの Henry を開発・提供しています。今回、HenryのフロントエンドをReact + ViteからNext.jsに書き換えました。この記事では、最初にNext.jsへの切り替えによってもたらされたユーザー体験の向上について説明します。次に、このユーザー体験の向上がどうして生じたのか、その背後にある技術的な要素をエンジニア向けに詳細に解説します。最後に、フロントエンドアーキテクチャに対する我々の長期的なビジョンについて述べます。対象読者 Next.js導入によるユーザー体験向上デモ定量的なパフォーマンス比較ユーザー体験がどう向上したか FCP高速化の技術的な仕組み Next.jsとViteの基本的なアーキテクチャの違い補足：工夫しているポイ</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/react" data-gtm-click-label="entry-search-result-item-tag">react</a></li> <li><a href="/q/vite" data-gtm-click-label="entry-search-result-item-tag">vite</a></li> <li><a href="/q/frontend" data-gtm-click-label="entry-search-result-item-tag">frontend</a></li> <li><a href="/q/%E3%83%91%E3%83%95%E3%82%A9%E3%83%BC%E3%83%9E%E3%83%B3%E3%82%B9" 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%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/techfeed" data-gtm-click-label="entry-search-result-item-tag">techfeed</a></li> </ul> <div class="following-bookmarks-container js-following-bookmarks-container" data-entry-url="https://dev.henry.jp/entry/replace-vite-with-nextjs"> <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://dev.henry.jp/entry/replace-vite-with-nextjs" class="centerarticle-entry-image" target="_blank" rel="noopener"> <img src="https://cdn-ak-scissors.b.st-hatena.com/image/square/da46e9ed4b52c6bc7de948f21f8161f30f76702a/height=288;version=1;width=512/https%3A%2F%2Fcdn.image.st-hatena.com%2Fimage%2Fscale%2F1eac8cda65247a4956a6f77acaf0d6999207be06%2Fbackend%3Dimagemagick%3Bversion%3D1%3Bwidth%3D1300%2Fhttps%253A%252F%252Fcdn-ak.f.st-hatena.com%252Fimages%252Ffotolife%252Fs%252Fsumiren_t%252F20230529%252F20230529173907.png" alt="フロントエンドをViteからNext.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://zenn.dev/comm_vue_nuxt/articles/vue-nuxt-in-2023"><span>あとで読む</span> </button> </div> <div class="centerarticle-entry-header"> <h3 class="centerarticle-entry-title"> <a href="https://zenn.dev/comm_vue_nuxt/articles/vue-nuxt-in-2023" 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%2Fcomm_vue_nuxt%2Farticles%2Fvue-nuxt-in-2023" alt="">Vue.js と Nuxt の 2023年まとめ </a> </h3> <ul class="centerarticle-entry-data"> <li> <span class="centerarticle-users"> <a href="/entry/s/zenn.dev/comm_vue_nuxt/articles/vue-nuxt-in-2023" class="js-keyboard-entry-page-openable" title="Vue.js と Nuxt の 2023年まとめ (97 ブックマーク)" data-gtm-click-label="entry-search-result-item-users"> 97 users </a> </span> </li> <li> <a href="/site/zenn.dev/comm_vue_nuxt" title="『zenn.dev/comm_vue_nuxt』の新着エントリー" data-gtm-click-label="entry-search-result-item-site-search-url"> zenn.dev/comm_vue_nuxt </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/01/03</span></li> </ul> </div> <div class="centerarticle-entry-contents has-image"> <div class="centerarticle-entry-item"> <p class="centerarticle-entry-summary">2023年は Vue.js および Nuxt のアップデートがとっても活発な一年でした。これだけ多くの、そして多様な進展があると、1年を振り返っておかないと何があったか忘れてしまいそうです。というわけで Nuxt, Vue.js, Vite 関連の情報をピックアップして🏃‍♂駆け足で振り返ってみます。（数が多かったので、おもに公式周辺のアカウントから告知されたものが中心です。漏れがあったらすみません。教えていただければ追加します） 🗓2023年1月 2022年の春先に正式に Vue.js 3 がデフォルトのバージョンとなり、2022年11月に Nuxt 3.0 がリリースされました。年が明けて2023年1月の主だった情報です。 🔼Nuxt 関連 2023年1月17日に公開された Daniel Roe @danielcroe氏による公式ブログ記事 Nuxt: A vision</p> <ul class="entrysearch-entry-tags"> <li><a href="/q/Vue" data-gtm-click-label="entry-search-result-item-tag">Vue</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/Nuxt" data-gtm-click-label="entry-search-result-item-tag">Nuxt</a></li> <li><a href="/q/Vite" data-gtm-click-label="entry-search-result-item-tag">Vite</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> <li><a href="/q/article" data-gtm-click-label="entry-search-result-item-tag">article</a></li> <li><a href="/q/%E3%81%BE%E3%81%A8%E3%82%81" 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/comm_vue_nuxt/articles/vue-nuxt-in-2023"> <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/comm_vue_nuxt/articles/vue-nuxt-in-2023" class="centerarticle-entry-image" target="_blank" rel="noopener"> <img src="https://cdn-ak-scissors.b.st-hatena.com/image/square/8cc52282bed2765d5db1a8bfc37c3b6806255f3e/height=288;version=1;width=512/https%3A%2F%2Fres.cloudinary.com%2Fzenn%2Fimage%2Fupload%2Fs--hy98Jjf6--%2Fc_fit%252Cg_north_west%252Cl_text%3Anotosansjp-medium.otf_55%3AVue.js%252520%2525E3%252581%2525A8%252520Nuxt%252520%2525E3%252581%2525AE%2525202023%2525E5%2525B9%2525B4%2525E3%252581%2525BE%2525E3%252581%2525A8%2525E3%252582%252581%252Cw_1010%252Cx_90%252Cy_100%2Fg_south_west%252Cl_text%3Anotosansjp-medium.otf_34%3Acoedo%252Cx_220%252Cy_108%2Fbo_3px_solid_rgb%3Ad6e3ed%252Cg_south_west%252Ch_90%252Cl_fetch%3AaHR0cHM6Ly9zdG9yYWdlLmdvb2dsZWFwaXMuY29tL3plbm4tdXNlci11cGxvYWQvYXZhdGFyLzU5MTZlOWFlNjguanBlZw%3D%3D%252Cr_20%252Cw_90%252Cx_92%252Cy_102%2Fco_rgb%3A6e7b85%252Cg_south_west%252Cl_text%3Anotosansjp-medium.otf_30%3AVue%2525E3%252583%2525BBNuxt%252520%2525E6%252583%252585%2525E5%2525A0%2525B1%2525E3%252581%25258C%2525E9%25259B%252586%2525E3%252581%2525BE%2525E3%252582%25258B%2525E5%2525BA%252583%2525E5%2525A0%2525B4%252520%25252F%252520P...%252Cx_220%252Cy_160%2Fbo_4px_solid_white%252Cg_south_west%252Ch_50%252Cl_fetch%3AaHR0cHM6Ly9saDMuZ29vZ2xldXNlcmNvbnRlbnQuY29tL2EtL0FPaDE0R2c4STBvUEtWYXpIUGdWdUFwVFNiaFdXUGVZd0l2Rkd3QlV0alAwaHc9czI1MC1j%252Cr_max%252Cw_50%252Cx_139%252Cy_84%2Fv1627283836%2Fdefault%2Fog-base-w1200-v2.png" alt="Vue.js と Nuxt の 2023年まとめ" 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://techblog.recruit.co.jp/article-639/"><span>あとで読む</span> </button> </div> <div class="centerarticle-entry-header"> <h3 class="centerarticle-entry-title"> <a href="https://techblog.recruit.co.jp/article-639/" 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%2Ftechblog.recruit.co.jp%2Farticle-639%2F" alt="">React 製アプリケーションのビルドシステムを webpack から Vite に移行して爆速な開発体験を手に入れよう | Recruit Tech Blog </a> </h3> <ul class="centerarticle-entry-data"> <li> <span class="centerarticle-users"> <a href="/entry/s/techblog.recruit.co.jp/article-639/" class="js-keyboard-entry-page-openable" title="React 製アプリケーションのビルドシステムを webpack から Vite に移行して爆速な開発体験を手に入れよう | Recruit Tech Blog (96 ブックマーク)" data-gtm-click-label="entry-search-result-item-users"> 96 users </a> </span> </li> <li> <a href="/site/techblog.recruit.co.jp/" title="『techblog.recruit.co.jp』の新着エントリー" data-gtm-click-label="entry-search-result-item-site-search-url"> techblog.recruit.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">2021/06/04</span></li> </ul> </div> <div class="centerarticle-entry-contents has-image"> <div class="centerarticle-entry-item"> <p class="centerarticle-entry-summary">React 製アプリケーションのビルドシステムを webpack から Vite に移行して爆速な開発体験を手に入れよう wakamsha Vite （ヴィート）とは Vue.js の作者である Evan You 氏が中心となって開発されているビルドツールです。 Vite - Next Generation Frontend Tooling ES Modules 形式のままブラウザからインポートする Dev サーバを搭載し、ソースコードをバンドルすることなく高速で動作させるのが特徴です。もちろん npm パッケージもブラウザから読み込み可能な ES Modules 形式に変換します。プロダクションビルド時は Rollup を使ってバンドルします。 Vue.js だけでなく React、Preact、Svelte のビルドもサポートしており、GitHub トレンドの上位にも頻繁に登場している</p> <ul class="entrysearch-entry-tags"> <li><a href="/q/vite" data-gtm-click-label="entry-search-result-item-tag">vite</a></li> <li><a href="/q/webpack" data-gtm-click-label="entry-search-result-item-tag">webpack</a></li> <li><a href="/q/react" data-gtm-click-label="entry-search-result-item-tag">react</a></li> <li><a href="/q/TypeScript" data-gtm-click-label="entry-search-result-item-tag">TypeScript</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> </ul> <div class="following-bookmarks-container js-following-bookmarks-container" data-entry-url="https://techblog.recruit.co.jp/article-639/"> <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://techblog.recruit.co.jp/article-639/" class="centerarticle-entry-image" target="_blank" rel="noopener"> <img src="https://cdn-ak-scissors.b.st-hatena.com/image/square/76a94f658445a3b7b3a4bbe056f279a99444530b/height=288;version=1;width=512/https%3A%2F%2Ftechblog.recruit.co.jp%2Fassets%2Frmp%2Fthumbnail%2F21250.jpg" alt="React 製アプリケーションのビルドシステムを webpack から Vite に移行して爆速な開発体験を手に入れよう | Recruit Tech 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://vite.dev/"><span>あとで読む</span> </button> </div> <div class="centerarticle-entry-header"> <h3 class="centerarticle-entry-title"> <a href="https://vite.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%2Fvite.dev%2F" alt="">Vite | 次世代フロントエンドツール </a> </h3> <ul class="centerarticle-entry-data"> <li> <span class="centerarticle-users"> <a href="/entry/s/vite.dev/" class="js-keyboard-entry-page-openable" title="Vite | 次世代フロントエンドツール (95 ブックマーク)" data-gtm-click-label="entry-search-result-item-users"> 95 users </a> </span> </li> <li> <a href="/site/vite.dev/" title="『vite.dev』の新着エントリー" data-gtm-click-label="entry-search-result-item-site-search-url"> vite.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">2021/07/27</span></li> </ul> </div> <div class="centerarticle-entry-contents has-image"> <div class="centerarticle-entry-item"> <p class="centerarticle-entry-summary">ViteConf 2025The Build Tool for the Web Vite is a blazing fast frontend build tool powering the next generation of web applications.</p> <ul class="entrysearch-entry-tags"> <li><a href="/q/vite" data-gtm-click-label="entry-search-result-item-tag">vite</a></li> <li><a href="/q/javascript" data-gtm-click-label="entry-search-result-item-tag">javascript</a></li> <li><a href="/q/TypeScript" data-gtm-click-label="entry-search-result-item-tag">TypeScript</a></li> <li><a href="/q/web%E5%88%B6%E4%BD%9C" data-gtm-click-label="entry-search-result-item-tag">web制作</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%A9%E3%82%A4%E3%83%96%E3%83%A9%E3%83%AA" data-gtm-click-label="entry-search-result-item-tag">ライブラリ</a></li> <li><a href="/q/CSS" data-gtm-click-label="entry-search-result-item-tag">CSS</a></li> <li><a href="/q/programming" data-gtm-click-label="entry-search-result-item-tag">programming</a></li> </ul> <div class="following-bookmarks-container js-following-bookmarks-container" data-entry-url="https://vite.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://vite.dev/" class="centerarticle-entry-image" target="_blank" rel="noopener"> <img src="https://cdn-ak-scissors.b.st-hatena.com/image/square/6f8c4c86a3c3903f261ad2677083516dbefa500f/height=288;version=1;width=512/https%3A%2F%2Fvite.dev%2Fog-image.jpg" alt="Vite | 次世代フロントエンドツール" 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/ytr0903/articles/c6c42147ed29be"><span>あとで読む</span> </button> </div> <div class="centerarticle-entry-header"> <h3 class="centerarticle-entry-title"> <a href="https://zenn.dev/ytr0903/articles/c6c42147ed29be" 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%2Fytr0903%2Farticles%2Fc6c42147ed29be" alt="">UnJS にどんなツールがあるのか、上位30件すべて紹介してみた（前編） </a> </h3> <ul class="centerarticle-entry-data"> <li> <span class="centerarticle-users"> <a href="/entry/s/zenn.dev/ytr0903/articles/c6c42147ed29be" class="js-keyboard-entry-page-openable" title="UnJS にどんなツールがあるのか、上位30件すべて紹介してみた（前編） (90 ブックマーク)" data-gtm-click-label="entry-search-result-item-users"> 90 users </a> </span> </li> <li> <a href="/site/zenn.dev/ytr0903" title="『zenn.dev/ytr0903』の新着エントリー" data-gtm-click-label="entry-search-result-item-site-search-url"> zenn.dev/ytr0903 </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/11/06</span></li> </ul> </div> <div class="centerarticle-entry-contents has-image"> <div class="centerarticle-entry-item"> <p class="centerarticle-entry-summary">タイトル通り、JavaScriptツール群「UnJS」にどんなライブラリが存在するのかをひたすら見てみよう！　という記事です。本当は全て紹介しようと思ったのですが、全75個あり、1つの記事に入れるとあまりにも多すぎるので、この記事では2023年11月4日時点のStar数の順に沿って上位30個を紹介していきます。それ以降のリポジトリは別の記事で紹介していますので、気になった方はこの記事の後に読んでみてください。 UnJS とは UnJSは、Nuxt 開発チームが中心となって開発・メンテナンスされている、あらゆるJavaScriptフレームワーク上で統一的に動作するユーティリティーツール・ライブラリ群です。 UnJSというプロジェクトが何であるかについては、2022年11月に公開された講演映像「UnJS: Nuxt 3 behind the scenes by Pooya Parsa」を観て</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/Vue" data-gtm-click-label="entry-search-result-item-tag">Vue</a></li> <li><a href="/q/%E3%83%A9%E3%82%A4%E3%83%96%E3%83%A9%E3%83%AA" data-gtm-click-label="entry-search-result-item-tag">ライブラリ</a></li> <li><a href="/q/%E3%83%84%E3%83%BC%E3%83%AB" data-gtm-click-label="entry-search-result-item-tag">ツール</a></li> <li><a href="/q/TypeScript" data-gtm-click-label="entry-search-result-item-tag">TypeScript</a></li> <li><a href="/q/js" data-gtm-click-label="entry-search-result-item-tag">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> </ul> <div class="following-bookmarks-container js-following-bookmarks-container" data-entry-url="https://zenn.dev/ytr0903/articles/c6c42147ed29be"> <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/ytr0903/articles/c6c42147ed29be" class="centerarticle-entry-image" target="_blank" rel="noopener"> <img src="https://cdn-ak-scissors.b.st-hatena.com/image/square/fae1b95b5dadfe59a4c508acba7b74dc1e82d341/height=288;version=1;width=512/https%3A%2F%2Fres.cloudinary.com%2Fzenn%2Fimage%2Fupload%2Fs--949xj08l--%2Fc_fit%252Cg_north_west%252Cl_text%3Anotosansjp-medium.otf_55%3AUnJS%252520%2525E3%252581%2525AB%2525E3%252581%2525A9%2525E3%252582%252593%2525E3%252581%2525AA%2525E3%252583%252584%2525E3%252583%2525BC%2525E3%252583%2525AB%2525E3%252581%25258C%2525E3%252581%252582%2525E3%252582%25258B%2525E3%252581%2525AE%2525E3%252581%25258B%2525E3%252580%252581%2525E4%2525B8%25258A%2525E4%2525BD%25258D30%2525E4%2525BB%2525B6%2525E3%252581%252599%2525E3%252581%2525B9%2525E3%252581%2525A6%2525E7%2525B4%2525B9%2525E4%2525BB%25258B%2525E3%252581%252597%2525E3%252581%2525A6%2525E3%252581%2525BF%2525E3%252581%25259F%2525EF%2525BC%252588%2525E5%252589%25258D%2525E7%2525B7%2525A8%2525EF%2525BC%252589%252Cw_1010%252Cx_90%252Cy_100%2Fg_south_west%252Cl_text%3Anotosansjp-medium.otf_37%3Aykoizumi0903%252Cx_203%252Cy_121%2Fg_south_west%252Ch_90%252Cl_fetch%3AaHR0cHM6Ly9zdG9yYWdlLmdvb2dsZWFwaXMuY29tL3plbm4tdXNlci11cGxvYWQvYXZhdGFyL2UyMWIwMjZhZGEuanBlZw%3D%3D%252Cr_max%252Cw_90%252Cx_87%252Cy_95%2Fv1627283836%2Fdefault%2Fog-base-w1200-v2.png" alt="UnJS にどんなツールがあるのか、上位30件すべて紹介してみた（前編）" 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://remix.run/blog/merging-remix-and-react-router"><span>あとで読む</span> </button> </div> <div class="centerarticle-entry-header"> <h3 class="centerarticle-entry-title"> <a href="https://remix.run/blog/merging-remix-and-react-router" 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%2Fremix.run%2Fblog%2Fmerging-remix-and-react-router" alt="">Merging Remix and React Router </a> </h3> <ul class="centerarticle-entry-data"> <li> <span class="centerarticle-users"> <a href="/entry/s/remix.run/blog/merging-remix-and-react-router" class="js-keyboard-entry-page-openable" title="Merging Remix and React Router (87 ブックマーク)" data-gtm-click-label="entry-search-result-item-users"> 87 users </a> </span> </li> <li> <a href="/site/remix.run/" title="『remix.run』の新着エントリー" data-gtm-click-label="entry-search-result-item-site-search-url"> remix.run </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/05/16</span></li> </ul> </div> <div class="centerarticle-entry-contents has-image"> <div class="centerarticle-entry-item"> <p class="centerarticle-entry-summary">Update (Dec 2024): React Router v7 has been released! We now recommend starting all new projects with React Router v7 and upgrading existing Remix apps. We've been building a bridge. You can hear Ryan talk about this announcement at React Conf 🎥 For nearly 4 years we've been working on Remix, a fullstack framework built on web standards to help you build better websites and applications. React Ro</p> <ul class="entrysearch-entry-tags"> <li><a href="/q/remix" data-gtm-click-label="entry-search-result-item-tag">remix</a></li> <li><a href="/q/react" data-gtm-click-label="entry-search-result-item-tag">react</a></li> <li><a href="/q/react-router" data-gtm-click-label="entry-search-result-item-tag">react-router</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> </ul> <div class="following-bookmarks-container js-following-bookmarks-container" data-entry-url="https://remix.run/blog/merging-remix-and-react-router"> <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://remix.run/blog/merging-remix-and-react-router" class="centerarticle-entry-image" target="_blank" rel="noopener"> <img src="https://cdn-ak-scissors.b.st-hatena.com/image/square/b2c07492c41a6d3c92383f3502acacb5d0c3b079/height=288;version=1;width=512/https%3A%2F%2Fremix.run%2Fimg%2Fmerging-remix-and-react-router%3Ftitle%3DMerging%2BRemix%2Band%2BReact%2BRouter%26date%3DMay%2B15%252C%2B2024%26authorName%3DBrooks%2BLybrand%26authorTitle%3DDeveloper%2BRelations%2BManager" alt="Merging Remix and React Router" 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/bengo4com/20241019-cloudsign-vuefesjapan2024-1"><span>あとで読む</span> </button> </div> <div class="centerarticle-entry-header"> <h3 class="centerarticle-entry-title"> <a href="https://speakerdeck.com/bengo4com/20241019-cloudsign-vuefesjapan2024-1" 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%2Fbengo4com%2F20241019-cloudsign-vuefesjapan2024-1" alt="">VueとViteで作るUIコンポーネントライブラリ ~デザインシステムとプロダクトの理想的な分離を目指して~ / 20241019_cloudsign_VueFesJapan2024_1 </a> </h3> <ul class="centerarticle-entry-data"> <li> <span class="centerarticle-users"> <a href="/entry/s/speakerdeck.com/bengo4com/20241019-cloudsign-vuefesjapan2024-1" class="js-keyboard-entry-page-openable" title="VueとViteで作るUIコンポーネントライブラリ ~デザインシステムとプロダクトの理想的な分離を目指して~ / 20241019_cloudsign_VueFesJapan2024_1 (86 ブックマーク)" data-gtm-click-label="entry-search-result-item-users"> 86 users </a> </span> </li> <li> <a href="/site/speakerdeck.com/bengo4com" title="『speakerdeck.com/bengo4com』の新着エントリー" data-gtm-click-label="entry-search-result-item-site-search-url"> speakerdeck.com/bengo4com </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/19</span></li> </ul> </div> <div class="centerarticle-entry-contents has-image"> <div class="centerarticle-entry-item"> <p class="centerarticle-entry-summary">2024年10月19日(土)「Vue Fes Japan 2024」に開催された、弁護士ドットコム株式会社クラウドサイン事業本部　フロントエンドエンジニアの辻佳佑が登壇した際の資料です。セッションタイトル：VueとViteで作るUIコンポーネントライブラリ ~デザインシステムとプロダクトの…</p> <ul class="entrysearch-entry-tags"> <li><a href="/q/vue" data-gtm-click-label="entry-search-result-item-tag">vue</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%87%E3%82%B6%E3%82%A4%E3%83%B3%E3%82%B7%E3%82%B9%E3%83%86%E3%83%A0" data-gtm-click-label="entry-search-result-item-tag">デザインシステム</a></li> <li><a href="/q/vite" data-gtm-click-label="entry-search-result-item-tag">vite</a></li> <li><a href="/q/Vue.js" data-gtm-click-label="entry-search-result-item-tag">Vue.js</a></li> <li><a href="/q/%E3%83%A9%E3%82%A4%E3%83%96%E3%83%A9%E3%83%AA" data-gtm-click-label="entry-search-result-item-tag">ライブラリ</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> <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://speakerdeck.com/bengo4com/20241019-cloudsign-vuefesjapan2024-1"> <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/bengo4com/20241019-cloudsign-vuefesjapan2024-1" class="centerarticle-entry-image" target="_blank" rel="noopener"> <img src="https://cdn-ak-scissors.b.st-hatena.com/image/square/0604013d47e454385d5b2884b9f626ffdc5063a6/height=288;version=1;width=512/https%3A%2F%2Ffiles.speakerdeck.com%2Fpresentations%2F687a08786b3b48d89efd1fb7daa09dc0%2Fslide_0.jpg%3F32258253" alt="VueとViteで作るUIコンポーネントライブラリ ~デザインシステムとプロダクトの理想的な分離を目指して~ / 20241019_cloudsign_VueFesJapan2024_1" 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.route06.co.jp/entry/2023/08/08/115253"><span>あとで読む</span> </button> </div> <div class="centerarticle-entry-header"> <h3 class="centerarticle-entry-title"> <a href="https://tech.route06.co.jp/entry/2023/08/08/115253" 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.route06.co.jp%2Fentry%2F2023%2F08%2F08%2F115253" alt="">Plainのフロントエンドにおける技術選定(2023年8月版) - ROUTE06 Tech Blog </a> </h3> <ul class="centerarticle-entry-data"> <li> <span class="centerarticle-users"> <a href="/entry/s/tech.route06.co.jp/entry/2023/08/08/115253" class="js-keyboard-entry-page-openable" title="Plainのフロントエンドにおける技術選定(2023年8月版) - ROUTE06 Tech Blog (85 ブックマーク)" data-gtm-click-label="entry-search-result-item-users"> 85 users </a> </span> </li> <li> <a href="/site/tech.route06.co.jp/" title="『tech.route06.co.jp』の新着エントリー" data-gtm-click-label="entry-search-result-item-site-search-url"> tech.route06.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">2023/08/08</span></li> </ul> </div> <div class="centerarticle-entry-contents has-image"> <div class="centerarticle-entry-item"> <p class="centerarticle-entry-summary">ROUTE06 でソフトウェアエンジニアをしている @MH4GF です。 ROUTE06 ではエンタープライズ向けビジネスプラットフォーム「Plain」を開発しています。この記事では 2023 年 8 月に Plain クラウド EDI の Web フロントエンドで採用している技術について、その選定理由をまとめました。現代の Web フロントエンド技術は領域ごとに選択肢が多く、プロダクトに最適な技術選定をする上で検討事項が多いと感じます。この記事がフロントエンド技術選定において参考になれば幸いです。前提プロダクトの特徴技術選定に影響するプロダクトの特徴を箇条書きでまとめます。エンタープライズ向け SaaS 現在開発中のプロダクトは商取引におけるクラウド EDI のドメインにフォーカス Plain が解決する課題は、元々フルスクラッチで開発すると 1 年かかるプロダクトの開発期間を</p> <ul class="entrysearch-entry-tags"> <li><a href="/q/frontend" data-gtm-click-label="entry-search-result-item-tag">frontend</a></li> <li><a href="/q/react" data-gtm-click-label="entry-search-result-item-tag">react</a></li> <li><a href="/q/ADR" data-gtm-click-label="entry-search-result-item-tag">ADR</a></li> <li><a href="/q/GraphQL" data-gtm-click-label="entry-search-result-item-tag">GraphQL</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/%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/%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://tech.route06.co.jp/entry/2023/08/08/115253"> <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.route06.co.jp/entry/2023/08/08/115253" class="centerarticle-entry-image" target="_blank" rel="noopener"> <img src="https://cdn-ak-scissors.b.st-hatena.com/image/square/d339a2c631fab92542d3acaf7c1beb209fbf292e/height=288;version=1;width=512/https%3A%2F%2Fcdn.image.st-hatena.com%2Fimage%2Fscale%2F7809955a7611418184de0b5990315d28bd86b879%2Fbackend%3Dimagemagick%3Bversion%3D1%3Bwidth%3D1300%2Fhttps%253A%252F%252Fcdn-ak.f.st-hatena.com%252Fimages%252Ffotolife%252Fr%252Froute06%252F20230808%252F20230808115254.png" alt="Plainのフロントエンドにおける技術選定(2023年8月版) - ROUTE06 Tech Blog" 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/vite?page=2" class="js-keyboard-openable">2</a></span> <span class="js-keyboard-selectable-item"><a href="https://b.hatena.ne.jp/q/vite?page=3" class="js-keyboard-openable">3</a></span> <span class="js-keyboard-selectable-item"><a href="https://b.hatena.ne.jp/q/vite?page=4" class="js-keyboard-openable">4</a></span> <span class="js-keyboard-selectable-item"><a href="https://b.hatena.ne.jp/q/vite?page=5" class="js-keyboard-openable">5</a></span> <span class="js-keyboard-selectable-item"><a href="https://b.hatena.ne.jp/q/vite?page=6" class="js-keyboard-openable">6</a></span> <span class="js-keyboard-selectable-item"><a href="https://b.hatena.ne.jp/q/vite?page=7" class="js-keyboard-openable">7</a></span> <span class="js-keyboard-selectable-item"><a href="https://b.hatena.ne.jp/q/vite?page=8" class="js-keyboard-openable">8</a></span> <span class="centerarticle-pager-next js-keyboard-selectable-item"><a href="https://b.hatena.ne.jp/q/vite?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/note.com/kaerusan/n/n4530294c2855" title="『カーネーション』再見：第1週「あこがれ」第1回｜kaerusan" data-gtm-label="entry-recentEntriesInEntrySearch-title">『カーネーション』再見：第1週「あこがれ」第1回｜kaerusan</a></h3> <p class="entry-group-meta"><span class="entry-group-users"><a href="/entry/s/note.com/kaerusan/n/n4530294c2855" data-gtm-label="entry-recentEntriesInEntrySearch-users">1 user</a></span><span class="entry-group-domain"><a href="/site/note.com/kaerusan" data-gtm-label="entry-recentEntriesInEntrySearch-domain"><img src="https://cdn-ak2.favicon.st-hatena.com/64?url=https%3A%2F%2Fnote.com%2Fkaerusan%2Fn%2Fn4530294c2855" alt="">note.com/kaerusan</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/note.com/gotch_akg/n/n52b521902e2a" title="ドサクサ日記 3/31-4/6 2025｜Masafumi Gotoh" data-gtm-label="entry-recentEntriesInEntrySearch-title">ドサクサ日記 3/31-4/6 2025｜Masafumi Gotoh</a></h3> <p class="entry-group-meta"><span class="entry-group-users"><a href="/entry/s/note.com/gotch_akg/n/n52b521902e2a" data-gtm-label="entry-recentEntriesInEntrySearch-users">1 user</a></span><span class="entry-group-domain"><a href="/site/note.com/gotch_akg" data-gtm-label="entry-recentEntriesInEntrySearch-domain"><img src="https://cdn-ak2.favicon.st-hatena.com/64?url=https%3A%2F%2Fnote.com%2Fgotch_akg%2Fn%2Fn52b521902e2a" alt="">note.com/gotch_akg</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/book.dmm.com/free_episode_streaming/0f90d36d46f647d9ep/?cid=FglfSVtRBEJRFl5cVhoWRQ4BQ1VEZg1dX1JRXwIBBAYBVQZfUAJWVgEAQRRVRANSPhZCRFVYCVAMBQpX&lin=0&sd=0" title="＃1 ユニコーンの少年の巻 (2)" data-gtm-label="entry-recentEntriesInEntrySearch-title">＃1 ユニコーンの少年の巻 (2)</a></h3> <p class="entry-group-meta"><span class="entry-group-users"><a href="/entry/s/book.dmm.com/free_episode_streaming/0f90d36d46f647d9ep/?cid=FglfSVtRBEJRFl5cVhoWRQ4BQ1VEZg1dX1JRXwIBBAYBVQZfUAJWVgEAQRRVRANSPhZCRFVYCVAMBQpX&lin=0&sd=0" data-gtm-label="entry-recentEntriesInEntrySearch-users">1 user</a></span><span class="entry-group-domain"><a href="/site/book.dmm.com/" data-gtm-label="entry-recentEntriesInEntrySearch-domain"><img src="https://cdn-ak2.favicon.st-hatena.com/64?url=https%3A%2F%2Fbook.dmm.com%2Ffree_episode_streaming%2F0f90d36d46f647d9ep%2F%3Fcid%3DFglfSVtRBEJRFl5cVhoWRQ4BQ1VEZg1dX1JRXwIBBAYBVQZfUAJWVgEAQRRVRANSPhZCRFVYCVAMBQpX%26lin%3D0%26sd%3D0" alt="">book.dmm.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/makorevo.com/%E7%B5%82%E7%9B%A4%E3%81%AE%E5%BC%B1%E3%81%95%E3%81%8C%E5%87%BA%E3%81%BE%E3%81%97%E3%81%9F/" title="終盤の弱さが出ました" data-gtm-label="entry-recentEntriesInEntrySearch-title">終盤の弱さが出ました</a></h3> <p class="entry-group-meta"><span class="entry-group-users"><a href="/entry/s/makorevo.com/%E7%B5%82%E7%9B%A4%E3%81%AE%E5%BC%B1%E3%81%95%E3%81%8C%E5%87%BA%E3%81%BE%E3%81%97%E3%81%9F/" data-gtm-label="entry-recentEntriesInEntrySearch-users">1 user</a></span><span class="entry-group-domain"><a href="/site/makorevo.com/" data-gtm-label="entry-recentEntriesInEntrySearch-domain"><img src="https://cdn-ak2.favicon.st-hatena.com/64?url=https%3A%2F%2Fmakorevo.com%2F%25E7%25B5%2582%25E7%259B%25A4%25E3%2581%25AE%25E5%25BC%25B1%25E3%2581%2595%25E3%2581%258C%25E5%2587%25BA%25E3%2581%25BE%25E3%2581%2597%25E3%2581%259F%2F" alt="">makorevo.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/hanabi-navi.info/tohoku-region/" title="【2025】東北地方で開催される花火大会一覧" data-gtm-label="entry-recentEntriesInEntrySearch-title">【2025】東北地方で開催される花火大会一覧</a></h3> <p class="entry-group-meta"><span class="entry-group-users"><a href="/entry/s/hanabi-navi.info/tohoku-region/" data-gtm-label="entry-recentEntriesInEntrySearch-users">1 user</a></span><span class="entry-group-domain"><a href="/site/hanabi-navi.info/" data-gtm-label="entry-recentEntriesInEntrySearch-domain"><img src="https://cdn-ak2.favicon.st-hatena.com/64?url=https%3A%2F%2Fhanabi-navi.info%2Ftohoku-region%2F" alt="">hanabi-navi.info</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/dogs.matchinfo-rank.com/%E6%9F%B4%E7%8A%AC/%E3%81%95%E3%82%93%E3%81%BD%E3%81%AE%E5%B8%B0%E3%82%8A%E9%81%93%E3%81%AF%E6%BA%80%E8%B6%B3%E3%81%97%E3%81%A6%E3%82%8B%E3%81%93%E3%81%A8%E3%81%8C%E3%83%90%E3%83%AC%E3%83%90%E3%83%AC-%E6%9F%B4%E7%8A%AC/" title="さんぽの帰り道は満足してることがバレバレな柴犬柴犬らんまる" data-gtm-label="entry-recentEntriesInEntrySearch-title">さんぽの帰り道は満足してることがバレバレな柴犬柴犬らんまる</a></h3> <p class="entry-group-meta"><span class="entry-group-users"><a href="/entry/s/dogs.matchinfo-rank.com/%E6%9F%B4%E7%8A%AC/%E3%81%95%E3%82%93%E3%81%BD%E3%81%AE%E5%B8%B0%E3%82%8A%E9%81%93%E3%81%AF%E6%BA%80%E8%B6%B3%E3%81%97%E3%81%A6%E3%82%8B%E3%81%93%E3%81%A8%E3%81%8C%E3%83%90%E3%83%AC%E3%83%90%E3%83%AC-%E6%9F%B4%E7%8A%AC/" data-gtm-label="entry-recentEntriesInEntrySearch-users">1 user</a></span><span class="entry-group-domain"><a href="/site/dogs.matchinfo-rank.com/" data-gtm-label="entry-recentEntriesInEntrySearch-domain"><img src="https://cdn-ak2.favicon.st-hatena.com/64?url=https%3A%2F%2Fdogs.matchinfo-rank.com%2F%25E6%259F%25B4%25E7%258A%25AC%2F%25E3%2581%2595%25E3%2582%2593%25E3%2581%25BD%25E3%2581%25AE%25E5%25B8%25B0%25E3%2582%258A%25E9%2581%2593%25E3%2581%25AF%25E6%25BA%2580%25E8%25B6%25B3%25E3%2581%2597%25E3%2581%25A6%25E3%2582%258B%25E3%2581%2593%25E3%2581%25A8%25E3%2581%258C%25E3%2583%2590%25E3%2583%25AC%25E3%2583%2590%25E3%2583%25AC-%25E6%259F%25B4%25E7%258A%25AC%2F" alt="">dogs.matchinfo-rank.com</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/60916d56956324e4a169c0314bee5eba5a44d43a/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/60916d56956324e4a169c0314bee5eba5a44d43a/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/60916d56956324e4a169c0314bee5eba5a44d43a/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>