CINXE.COM

<!DOCTYPE html> <html lang="ja" data-page-scope="EntrySearch" data-stable-request-url="https://b.hatena.ne.jp/q/vue" data-device-type="PC" data-sentry-environment="production" data-sentry-sample-rate="0.1" data-entry-search-query="vue" 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>vueの人気記事 842件 - はてなブックマーク</title> <script src="https://b.st-hatena.com/0c3a38c41aeb08c713c990efb1b369be703ea86c/js/v4/bookmark.js" async></script> <link type="text/css" rel="stylesheet" href="https://b.st-hatena.com/0c3a38c41aeb08c713c990efb1b369be703ea86c/css/v4/pikaday.css" /> <link type="text/css" rel="stylesheet" href="https://b.st-hatena.com/0c3a38c41aeb08c713c990efb1b369be703ea86c/css/v4/triangle.css" /> <link type="text/css" rel="stylesheet" href="https://b.st-hatena.com/0c3a38c41aeb08c713c990efb1b369be703ea86c/css/v4/bookmark.css" /> <link type="text/css" rel="stylesheet" href="https://b.st-hatena.com/0c3a38c41aeb08c713c990efb1b369be703ea86c/css/v4/bookmark.star.css" /> <link rel="canonical" href="https://b.hatena.ne.jp/q/vue" /> <link rel="next" href="/q/vue?users=3&safe=on&sort=popular&date_range=5y&target=tag&page=2"> <link rel="shortcut icon" type="image/x-icon" href="/favicon.ico" /> <meta name="viewport" content="width=device-width"> <link rel="search" type="application/opensearchdescription+xml" title="はてなブックマーク検索" href="/opensearch.xml" /> <link rel="apple-touch-icon-precomposed" href="https://b.st-hatena.com/0c3a38c41aeb08c713c990efb1b369be703ea86c/images/v4/public/apple-touch-icon-precomposed.png" /> <link rel="mask-icon" href="https://b.st-hatena.com/0c3a38c41aeb08c713c990efb1b369be703ea86c/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/0c3a38c41aeb08c713c990efb1b369be703ea86c/images/v4/public/icons/bookmark.ico" /> <meta name="msapplication-task" content="name=マイブックマーク; action-uri=/my; icon-uri=https://b.st-hatena.com/0c3a38c41aeb08c713c990efb1b369be703ea86c/images/v4/public/icons/my-bookmark.ico" /> <meta name="msapplication-task" content="name=お気に入りのブックマーク; action-uri=/my/favorite; icon-uri=https://b.st-hatena.com/0c3a38c41aeb08c713c990efb1b369be703ea86c/images/v4/public/icons/favorite-bookmark.ico" /> <meta name="msapplication-task" content="name=人気エントリー; action-uri=/hotentry; icon-uri=https://b.st-hatena.com/0c3a38c41aeb08c713c990efb1b369be703ea86c/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/vue?safe=on&sort=popular&users=3&mode=rss&target=tag&date_range=5y" /> <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%2Fvue" 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/0c3a38c41aeb08c713c990efb1b369be703ea86c/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/0c3a38c41aeb08c713c990efb1b369be703ea86c/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/0c3a38c41aeb08c713c990efb1b369be703ea86c/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/0c3a38c41aeb08c713c990efb1b369be703ea86c/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="vue" 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/vue?users=3&sort=popular&safe=on&target=all&date_range=5y" >すべて</a></li> <li><a href="/q/vue?target=tag&date_range=5y&sort=popular&safe=on&users=3" class="is-current">タグ</a></li> <li><a href="/q/vue?sort=popular&safe=on&users=3&date_range=5y&target=title" >タイトル</a></li> <li><a href="/q/vue?date_range=5y&target=text&users=3&sort=popular&safe=on" >本文</a></li> </ul> </div> <div class="centerarticle-sidebar-menu"> <h3 class="centerarticle-aside-title">並び順</h3> <ul class="centerarticle-sub-navi"> <li><a href="/q/vue?target=tag&date_range=5y&users=3&safe=on&sort=recent" >新着</a></li> <li><a href="/q/vue?target=tag&date_range=5y&safe=on&sort=popular&users=3" 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/vue?target=tag&date_range=5y&users=1&sort=popular&safe=on" >1 user</a></li> <li><a href="/q/vue?date_range=5y&target=tag&safe=on&sort=popular&users=3" class="is-current">3 users</a></li> <li><a href="/q/vue?safe=on&sort=popular&users=50&target=tag&date_range=5y" >50 users</a></li> <li><a href="/q/vue?target=tag&date_range=5y&safe=on&sort=popular&users=100" >100 users</a></li> <li><a href="/q/vue?target=tag&date_range=5y&users=500&safe=on&sort=popular" >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/vue?sort=popular&safe=on&users=3&target=tag&date_range=5y" class="is-current">オン</a></li> <li><a href="/q/vue?date_range=5y&target=tag&sort=popular&safe=off&users=3" >オフ</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/vue?target=tag&date_range=all&sort=popular&safe=on&users=3" >すべて</a></li> <li><a href="/q/vue?target=tag&date_range=w&users=3&sort=popular&safe=on" >1週間</a></li> <li><a href="/q/vue?safe=on&sort=popular&users=3&target=tag&date_range=m" >1ヶ月</a></li> <li><a href="/q/vue?target=tag&date_range=y&users=3&sort=popular&safe=on" >1年</a></li> </ul> <form method="get" class="js-entrysearch-datepicker-form"> <input value="vue" 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 件 / 842件</p> <div class="entrysearch-bar-inner"> <button class="entrysearch-filter-btn js-entrysearch-filter-btn">絞り込み</button> <a class="entrysearch-sort-btn" href="/q/vue?users=3&safe=on&sort=popular&date_range=5y&target=tag">新着順</a> <a class="entrysearch-sort-btn is-current" href="/q/vue?target=tag&date_range=5y&safe=on&sort=recent&users=3">人気順</a> </div> </div> <div class="entrysearch-filter js-entrysearch-filter is-hidden"> <div class="entrysearch-filter-header"> <h2 class="entrysearch-filter-title">絞り込み</h2> <button class="entrysearch-filter-close js-entrysearch-filter-close"></button> </div> <ul class="entrysearch-filter-list"> <li class="entrysearch-filter-item js-entrysearch-target-dropdown"> <h3 class="entrysearch-filter-item-head">検索対象</h3> <div class="entrysearch-filter-item-value-wrapper"> <select class="entrysearch-filter-item-value js-entrysearch-filter-target"> <option value="all" >すべて</option> <option value="tag" selected>タグ</option> <option value="title" >タイトル</option> <option value="text" >本文</option> </select> </div> </li> <li class="entrysearch-filter-item"> <h3 class="entrysearch-filter-item-head">ブックマーク数</h3> <div class="entrysearch-filter-item-value-wrapper"> <select class="entrysearch-filter-item-value js-entrysearch-filter-users"> <option value="1" >1 user</option> <option value="3" selected>3 users</option> <option value="50" >50 users</option> <option value="100" >100 users</option> <option value="500" >500 users</option> </select> </div> </li> <li class="entrysearch-filter-item"> <h3 class="entrysearch-filter-item-head">期間</h3> <div class="entrysearch-filter-item-value-wrapper"> <select class="entrysearch-filter-item-value js-entrysearch-filter-daterange"> <option value="all">すべて</option> <option value="w" >1週間</option> <option value="m" >1ヶ月</option> <option value="y" >1年</option> </select> </div> </li> <li class="entrysearch-filter-item js-safe-search-div is-hidden"> <h3 class="entrysearch-filter-item-head">セーフサーチ</h3> <div class="entrysearch-filter-checkbox"> <input type="checkbox" name="safesearch" id="safesearch" class="js-entryseach-safesearch" checked> <label class="entrysearch-filter-checkbox-label" for="safesearch"></label> </div> </li> </ul> <div class="entrysearch-filter-footer"> <button class="entrysearch-filter-search-btn styleguide-btn-primary js-entrysearch-filter-search-btn">検索する</button> <button class="entrysearch-filter-clear-btn styleguide-btn-text js-entrysearch-filter-clear-btn">条件をクリアする</button> </div> </div> <div class="search-container"> <h2 class="entrysearch-title"> <span class="entrysearch-word">vueの検索結果</span><span class="entrysearch-result">1 - 40 件 / 842件</span> </h2> <div class="entrysearch-summary-text"> <span>vue</span>に関するエントリは<span>842</span>件あります。 <span>javascript</span>、 <span>react</span>、 <span>フロントエンド</span> などが関連タグです。人気エントリには <span>『VOICEVOX | 無料のテキスト読み上げ・歌声合成ソフトウェア』</span>などがあります。 </div> <div class="entrysearch-related-entries" data-gtm-inview-label="entry-search-recommend-header"> <h3 class="entrysearch-related-title">vueの関連エントリー</h3> <ul class="entrysearch-related-list"> <li class="entrysearch-related-listitem"> <div class="entrysearch-related-entry"> <a href="https://tech-blog.monotaro.com/entry/2021/11/02/090000" 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/1e06cc23d906947b21dce80fb84cb31c3c2c43b2/height=288;version=1;width=512/https%3A%2F%2Fcdn-ak.f.st-hatena.com%2Fimages%2Ffotolife%2Fm%2Fmonotaro-tech-blog%2F20211021%2F20211021133012.png" alt="Vue.js？React？フレームワーク選びの７つの選定基準、大規模ECサイトのフロント刷新プロジェクト - MonotaRO Tech Blog"> </a> <h4 class="entrysearch-related-entry-title"> <a href="https://tech-blog.monotaro.com/entry/2021/11/02/090000" target="_blank" rel="noopener" data-gtm-click-label="entry-search-recommend-header-c-title"> Vue.js？React？フレームワーク選びの７つの選定基準、大規模ECサイトのフロント刷新プロジェクト - MonotaRO Tech Blog </a> </h4> <a href="/entry/s/tech-blog.monotaro.com/entry/2021/11/02/090000" class="entrysearch-related-users" data-gtm-click-label="entry-search-recommend-header-c-users"> 393 users </a> </div> </li> <li class="entrysearch-related-listitem"> <div class="entrysearch-related-entry"> <a href="https://tech.andpad.co.jp/entry/2021/07/01/170000" 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/afd734292368c9098144ee72be3d3f2cc8b1b28d/height=288;version=1;width=512/https%3A%2F%2Fcdn-ak.f.st-hatena.com%2Fimages%2Ffotolife%2Fy%2Fytr0903%2F20210628%2F20210628183622.png" alt="Vue + JSX + Nuxt Composition API で最高のフロント開発体験 - ANDPAD Tech Blog"> </a> <h4 class="entrysearch-related-entry-title"> <a href="https://tech.andpad.co.jp/entry/2021/07/01/170000" target="_blank" rel="noopener" data-gtm-click-label="entry-search-recommend-header-c-title"> Vue + JSX + Nuxt Composition API で最高のフロント開発体験 - ANDPAD Tech Blog </a> </h4> <a href="/entry/s/tech.andpad.co.jp/entry/2021/07/01/170000" class="entrysearch-related-users" data-gtm-click-label="entry-search-recommend-header-c-users"> 204 users </a> </div> </li> <li class="entrysearch-related-listitem"> <div class="entrysearch-related-entry"> <a href="https://blog.flatt.tech/entry/spa_injection" 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/46dfc8180fb346997a9fa6327569732bff1ad2f9/height=288;version=1;width=512/https%3A%2F%2Fcdn-ak.f.st-hatena.com%2Fimages%2Ffotolife%2Ff%2Fflattsecurity%2F20220406%2F20220406184000.png" alt="SPA開発とセキュリティ - DOM based XSSを引き起こすインジェクションのVue, React, Angularにおける解説と対策 - Flatt Security Blog"> </a> <h4 class="entrysearch-related-entry-title"> <a href="https://blog.flatt.tech/entry/spa_injection" target="_blank" rel="noopener" data-gtm-click-label="entry-search-recommend-header-c-title"> SPA開発とセキュリティ - DOM based XSSを引き起こすインジェクションのVue, React, Angularにおける解説と対策 - Flatt Security Blog </a> </h4> <a href="/entry/s/blog.flatt.tech/entry/spa_injection" class="entrysearch-related-users" data-gtm-click-label="entry-search-recommend-header-c-users"> 178 users </a> </div> </li> <li class="entrysearch-related-listitem"> <div class="entrysearch-related-entry"> <a href="https://devblog.thebase.in/entry/2020/09/17/110000" 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/34cf97994496a2dc6b21ef8f86cabd43f2a59c45/height=288;version=1;width=512/https%3A%2F%2Fcdn.image.st-hatena.com%2Fimage%2Fscale%2F3206abc85b9b236adef6365bb15e9e8b185d66da%2Fbackend%3Dimagemagick%3Bversion%3D1%3Bwidth%3D1300%2Fhttps%253A%252F%252Fcdn.user.blog.st-hatena.com%252Fdefault_entry_og_image%252F153078222%252F1599640516128983" alt="BASEにおけるVue.jsのこれまでとこれから - BASEプロダクトチームブログ"> </a> <h4 class="entrysearch-related-entry-title"> <a href="https://devblog.thebase.in/entry/2020/09/17/110000" target="_blank" rel="noopener" data-gtm-click-label="entry-search-recommend-header-c-title"> BASEにおけるVue.jsのこれまでとこれから - BASEプロダクトチームブログ </a> </h4> <a href="/entry/s/devblog.thebase.in/entry/2020/09/17/110000" class="entrysearch-related-users" data-gtm-click-label="entry-search-recommend-header-c-users"> 174 users </a> </div> </li> <li class="entrysearch-related-listitem"> <div class="entrysearch-related-entry"> <a href="https://studist.tech/migration-to-vue-3-4b4c4fad0324" 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/661682d8127b19576230278f77daf2b9983d788f/height=288;version=1;width=512/https%3A%2F%2Fmiro.medium.com%2Fv2%2Fda%3Atrue%2Fresize%3Afit%3A600%2F0%2A-wPAnMneCErjgr-t" alt="機能開発を止めずに、500コンポーネント規模の Vue 3 移行を完了させた開発プロセス"> </a> <h4 class="entrysearch-related-entry-title"> <a href="https://studist.tech/migration-to-vue-3-4b4c4fad0324" target="_blank" rel="noopener" data-gtm-click-label="entry-search-recommend-header-c-title"> 機能開発を止めずに、500コンポーネント規模の Vue 3 移行を完了させた開発プロセス </a> </h4> <a href="/entry/s/studist.tech/migration-to-vue-3-4b4c4fad0324" class="entrysearch-related-users" data-gtm-click-label="entry-search-recommend-header-c-users"> 174 users </a> </div> </li> <li class="entrysearch-related-listitem"> <div class="entrysearch-related-entry"> <a href="https://engineers.ntt.com/entry/2024/02/19/055601" 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/592a70e19b4aee0fb6c93415854afe9e9993a675/height=288;version=1;width=512/https%3A%2F%2Fcdn.image.st-hatena.com%2Fimage%2Fscale%2F2818b5e06577415535188496419f9fe45c5d0e59%2Fbackend%3Dimagemagick%3Bversion%3D1%3Bwidth%3D1300%2Fhttps%253A%252F%252Fcdn-ak.f.st-hatena.com%252Fimages%252Ffotolife%252FN%252FNTTCom%252F20240214%252F20240214135052.gif" alt="フロントエンドを Vue.js から React にリプレイスしたお話 (前編) - NTT Communications Engineers' Blog"> </a> <h4 class="entrysearch-related-entry-title"> <a href="https://engineers.ntt.com/entry/2024/02/19/055601" target="_blank" rel="noopener" data-gtm-click-label="entry-search-recommend-header-c-title"> フロントエンドを Vue.js から React にリプレイスしたお話 (前編) - NTT Communications Engineers' Blog </a> </h4> <a href="/entry/s/engineers.ntt.com/entry/2024/02/19/055601" class="entrysearch-related-users" data-gtm-click-label="entry-search-recommend-header-c-users"> 155 users </a> </div> </li> <li class="entrysearch-related-listitem"> <div class="entrysearch-related-entry"> <a href="https://engineer.crowdworks.jp/entry/2020/08/26/170745" 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/6d96048ee6721842c8c05c29c58ecde5353d40a7/height=288;version=1;width=512/https%3A%2F%2Fcdn.image.st-hatena.com%2Fimage%2Fscale%2F0f956d4f7479c609ea530d08bcfb9cf7746956a0%2Fbackend%3Dimagemagick%3Bversion%3D1%3Bwidth%3D1300%2Fhttps%253A%252F%252Fi.imgur.com%252FGzoN72q.png" alt="【Vue.js】負債を返却しながら機能追加しなければならない状況で実践したフロントエンドのコンポーネント設計 - クラウドワークスエンジニアブログ"> </a> <h4 class="entrysearch-related-entry-title"> <a href="https://engineer.crowdworks.jp/entry/2020/08/26/170745" target="_blank" rel="noopener" data-gtm-click-label="entry-search-recommend-header-c-title"> 【Vue.js】負債を返却しながら機能追加しなければならない状況で実践したフロントエンドのコンポーネント設計 - クラウドワークスエンジニアブログ </a> </h4> <a href="/entry/s/engineer.crowdworks.jp/entry/2020/08/26/170745" class="entrysearch-related-users" data-gtm-click-label="entry-search-recommend-header-c-users"> 147 users </a> </div> </li> <li class="entrysearch-related-listitem"> <div class="entrysearch-related-entry"> <a href="https://tech.spacely.co.jp/entry/2023/06/30/145133" 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/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のブログ"> </a> <h4 class="entrysearch-related-entry-title"> <a href="https://tech.spacely.co.jp/entry/2023/06/30/145133" target="_blank" rel="noopener" data-gtm-click-label="entry-search-recommend-header-c-title"> Vue 2 から 3 へ移行しようとしたらいちばん大変なのが Vuetify 2 から 3 への移行だった話 - spacelyのブログ </a> </h4> <a href="/entry/s/tech.spacely.co.jp/entry/2023/06/30/145133" class="entrysearch-related-users" data-gtm-click-label="entry-search-recommend-header-c-users"> 116 users </a> </div> </li> <li class="entrysearch-related-listitem"> <div class="entrysearch-related-entry"> <a href="https://www.keisuke69.net/entry/2020/06/09/112907" 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/e48ff92117a6a16ee54821fb0880a735d0dd1bae/height=288;version=1;width=512/https%3A%2F%2Fcdn-ak.f.st-hatena.com%2Fimages%2Ffotolife%2FK%2FKeisuke69%2F20200609%2F20200609112825.png" alt="Vue.jsのサイトジェネレータGridsomeが最高かもしれない - Sweet Escape"> </a> <h4 class="entrysearch-related-entry-title"> <a href="https://www.keisuke69.net/entry/2020/06/09/112907" target="_blank" rel="noopener" data-gtm-click-label="entry-search-recommend-header-c-title"> Vue.jsのサイトジェネレータGridsomeが最高かもしれない - Sweet Escape </a> </h4> <a href="/entry/s/www.keisuke69.net/entry/2020/06/09/112907" class="entrysearch-related-users" data-gtm-click-label="entry-search-recommend-header-c-users"> 103 users </a> </div> </li> <li class="entrysearch-related-listitem"> <div class="entrysearch-related-entry"> <a href="https://toranoana-lab.hatenablog.com/entry/2020/09/11/182515" 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/2e31525c56c69abaca7225e044caa4317fcbf0c6/height=288;version=1;width=512/https%3A%2F%2Fcdn.image.st-hatena.com%2Fimage%2Fscale%2F80db0ed2f5906ccf6251ed3853c9bc3f8dbfacb8%2Fbackend%3Dimagemagick%3Bversion%3D1%3Bwidth%3D1300%2Fhttps%253A%252F%252Fcdn-ak.f.st-hatena.com%252Fimages%252Ffotolife%252Ft%252Ftoranoana-lab%252F20200911%252F20200911165159.png" alt="Vue.js初心者でも書ける！ゼロから始めるVuexのテスト入門編その１(vue-test-utils) - 虎の穴ラボ技術ブログ"> </a> <h4 class="entrysearch-related-entry-title"> <a href="https://toranoana-lab.hatenablog.com/entry/2020/09/11/182515" target="_blank" rel="noopener" data-gtm-click-label="entry-search-recommend-header-c-title"> Vue.js初心者でも書ける！ゼロから始めるVuexのテスト入門編その１(vue-test-utils) - 虎の穴ラボ技術ブログ </a> </h4> <a href="/entry/s/toranoana-lab.hatenablog.com/entry/2020/09/11/182515" class="entrysearch-related-users" data-gtm-click-label="entry-search-recommend-header-c-users"> 75 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://voicevox.hiroshiba.jp/"><span>あとで読む</span> </button> </div> <div class="centerarticle-entry-header"> <h3 class="centerarticle-entry-title"> <a href="https://voicevox.hiroshiba.jp/" 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%2Fvoicevox.hiroshiba.jp%2F" alt="">VOICEVOX | 無料のテキスト読み上げ・歌声合成ソフトウェア </a> </h3> <ul class="centerarticle-entry-data"> <li> <span class="centerarticle-users"> <a href="/entry/s/voicevox.hiroshiba.jp/" class="js-keyboard-entry-page-openable" title="VOICEVOX | 無料のテキスト読み上げ・歌声合成ソフトウェア (2009 ブックマーク)" data-gtm-click-label="entry-search-result-item-users"> 2009 users </a> </span> </li> <li> <a href="/site/voicevox.hiroshiba.jp/" title="『voicevox.hiroshiba.jp』の新着エントリー" data-gtm-click-label="entry-search-result-item-site-search-url"> voicevox.hiroshiba.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/08/01</span></li> </ul> </div> <div class="centerarticle-entry-contents "> <div class="centerarticle-entry-item"> <p class="centerarticle-entry-summary">オープンソース VOICEVOX は OSS（オープンソース・ソフトウェア）版 VOICEVOX をもとに構築されています。製品版と OSS 版の違いやモジュール構成は VOICEVOX の全体構成をご参照ください。ソフトウェア部分は Electron + Vue 、音声合成エンジン部分は Python + FastAPI です。追加したい・改善したい機能があれば、ぜひ開発にご参加ください。</p> <ul class="entrysearch-entry-tags"> <li><a href="/q/%E9%9F%B3%E5%A3%B0%E5%90%88%E6%88%90" 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%83%84%E3%83%BC%E3%83%AB" data-gtm-click-label="entry-search-result-item-tag">ツール</a></li> <li><a href="/q/%E3%82%BD%E3%83%95%E3%83%88%E3%82%A6%E3%82%A7%E3%82%A2" data-gtm-click-label="entry-search-result-item-tag">ソフトウェア</a></li> <li><a href="/q/software" data-gtm-click-label="entry-search-result-item-tag">software</a></li> <li><a href="/q/%E9%9F%B3%E5%A3%B0" data-gtm-click-label="entry-search-result-item-tag">音声</a></li> <li><a href="/q/%E3%83%95%E3%83%AA%E3%83%BC%E3%82%BD%E3%83%95%E3%83%88" 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> <li><a href="/q/DTM" data-gtm-click-label="entry-search-result-item-tag">DTM</a></li> <li><a href="/q/%E7%84%A1%E6%96%99" 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://voicevox.hiroshiba.jp/"> <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/morinokami/books/learning-patterns-1"><span>あとで読む</span> </button> </div> <div class="centerarticle-entry-header"> <h3 class="centerarticle-entry-title"> <a href="https://zenn.dev/morinokami/books/learning-patterns-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%2Fzenn.dev%2Fmorinokami%2Fbooks%2Flearning-patterns-1" alt="">フロントエンドのデザインパターン </a> </h3> <ul class="centerarticle-entry-data"> <li> <span class="centerarticle-users"> <a href="/entry/s/zenn.dev/morinokami/books/learning-patterns-1" class="js-keyboard-entry-page-openable" title="フロントエンドのデザインパターン (1019 ブックマーク)" data-gtm-click-label="entry-search-result-item-users"> 1019 users </a> </span> </li> <li> <a href="/site/zenn.dev/morinokami" title="『zenn.dev/morinokami』の新着エントリー" data-gtm-click-label="entry-search-result-item-site-search-url"> zenn.dev/morinokami </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/03</span></li> </ul> </div> <div class="centerarticle-entry-contents has-image"> <div class="centerarticle-entry-item"> <p class="centerarticle-entry-summary">本書は、Lydia Hallie 氏と Addy Osmani 氏らによる Learning Patterns (https://www.patterns.dev/) の日本語訳です。原著は大きく 3 つのセクションに分かれていますが、本書は、その最初のセクションである Design Patterns を訳したものとなります。</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/%E3%83%87%E3%82%B6%E3%82%A4%E3%83%B3%E3%83%91%E3%82%BF%E3%83%BC%E3%83%B3" data-gtm-click-label="entry-search-result-item-tag">デザインパターン</a></li> <li><a href="/q/%E8%A8%AD%E8%A8%88" data-gtm-click-label="entry-search-result-item-tag">設計</a></li> <li><a href="/q/javascript" data-gtm-click-label="entry-search-result-item-tag">javascript</a></li> <li><a href="/q/%E3%83%87%E3%82%B6%E3%82%A4%E3%83%B3" data-gtm-click-label="entry-search-result-item-tag">デザイン</a></li> <li><a href="/q/design" data-gtm-click-label="entry-search-result-item-tag">design</a></li> <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/%E5%AD%A6%E7%BF%92" 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/morinokami/books/learning-patterns-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://zenn.dev/morinokami/books/learning-patterns-1" class="centerarticle-entry-image" target="_blank" rel="noopener"> <img src="https://cdn-ak-scissors.b.st-hatena.com/image/square/c5cab4c0da5b35e3a4503f4a9cc5eb51c9ee8892/height=288;version=1;width=512/https%3A%2F%2Fres.cloudinary.com%2Fzenn%2Fimage%2Fupload%2Fs--JHzogfRP--%2Fg_center%252Ch_280%252Cl_fetch%3AaHR0cHM6Ly9zdG9yYWdlLmdvb2dsZWFwaXMuY29tL3plbm4tdXNlci11cGxvYWQvYm9va19jb3Zlci9kZjJkYzdjMzM1LnBuZw%3D%3D%252Cw_200%2Fv1627283836%2Fdefault%2Fog-base-book_yz4z02.jpg" 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://www.hokeniryo.metro.tokyo.lg.jp/kansen/info/corona/corona_portal"><span>あとで読む</span> </button> </div> <div class="centerarticle-entry-header"> <h3 class="centerarticle-entry-title"> <a href="https://www.hokeniryo.metro.tokyo.lg.jp/kansen/info/corona/corona_portal" 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.hokeniryo.metro.tokyo.lg.jp%2Fkansen%2Finfo%2Fcorona%2Fcorona_portal" alt="">N501Y変異株スクリーニングの実施状況N501Y陽性例構成割合,変異株PCR検査実施割合 | 東京都新型コロナウイルス感染症対策サイト </a> </h3> <ul class="centerarticle-entry-data"> <li> <span class="centerarticle-users"> <a href="/entry/s/www.hokeniryo.metro.tokyo.lg.jp/kansen/info/corona/corona_portal" class="js-keyboard-entry-page-openable" title="N501Y変異株スクリーニングの実施状況N501Y陽性例構成割合,変異株PCR検査実施割合 | 東京都新型コロナウイルス感染症対策サイト (928 ブックマーク)" data-gtm-click-label="entry-search-result-item-users"> 928 users </a> </span> </li> <li> <a href="/site/www.hokeniryo.metro.tokyo.lg.jp/" title="『www.hokeniryo.metro.tokyo.lg.jp』の新着エントリー" data-gtm-click-label="entry-search-result-item-site-search-url"> www.hokeniryo.metro.tokyo.lg.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/03/04</span></li> </ul> </div> <div class="centerarticle-entry-contents has-image"> <div class="centerarticle-entry-item"> <p class="centerarticle-entry-summary">東京都保健医療局の新型コロナ保健医療情報ポータル(新型コロナウイルス)のページです。</p> <ul class="entrysearch-entry-tags"> <li><a href="/q/COVID-19" data-gtm-click-label="entry-search-result-item-tag">COVID-19</a></li> <li><a href="/q/%E6%9D%B1%E4%BA%AC" data-gtm-click-label="entry-search-result-item-tag">東京</a></li> <li><a href="/q/%E5%8C%BB%E7%99%82" data-gtm-click-label="entry-search-result-item-tag">医療</a></li> <li><a href="/q/%E3%82%B3%E3%83%AD%E3%83%8A" data-gtm-click-label="entry-search-result-item-tag">コロナ</a></li> <li><a href="/q/%E3%82%B3%E3%83%AD%E3%83%8A%E3%82%A6%E3%82%A4%E3%83%AB%E3%82%B9" data-gtm-click-label="entry-search-result-item-tag">コロナウイルス</a></li> <li><a href="/q/tokyo" data-gtm-click-label="entry-search-result-item-tag">tokyo</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%9D%B1%E4%BA%AC%E9%83%BD" 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/visualization" data-gtm-click-label="entry-search-result-item-tag">visualization</a></li> </ul> <div class="following-bookmarks-container js-following-bookmarks-container" data-entry-url="https://www.hokeniryo.metro.tokyo.lg.jp/kansen/info/corona/corona_portal"> <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.hokeniryo.metro.tokyo.lg.jp/kansen/info/corona/corona_portal" class="centerarticle-entry-image" target="_blank" rel="noopener"> <img src="https://cdn-ak-scissors.b.st-hatena.com/image/square/c5e2b016594c01bed41ee0679cd9b73d11d4179e/height=288;version=1;width=512/https%3A%2F%2Fwww.hokeniryo.metro.tokyo.lg.jp%2Fdocuments%2F158990%2F5052145%2Fopg.png%2F3c79ba89-ab16-4589-4fad-b5b411615b25%3Fversion%3D1.0%26t%3D1697102162136%26imagePreview%3D1" alt="N501Y変異株スクリーニングの実施状況N501Y陽性例構成割合,変異株PCR検査実施割合 | 東京都新型コロナウイルス感染症対策サイト" data-gtm-click-label="entry-search-result-item-image"> </a> </div> </div> </div> </li> <li class="bookmark-item js-user-bookmark-item js-keyboard-selectable-item"> <div class="centerarticle-entry is-image-entry-unit"> <div class="js-bookmark-stock-button is-hidden"> <button class="js-bookmark-stock-button-ready readlater-button" data-gtm-click-label="entry-search-result-item-stock-button" title="あとで読む" aria-label="あとで読む" tabindex="0" type="button" data-href="https://note.com/erukiti/n/nffdcbfafbabb"><span>あとで読む</span> </button> </div> <div class="centerarticle-entry-header"> <h3 class="centerarticle-entry-title"> <a href="https://note.com/erukiti/n/nffdcbfafbabb" class="js-clickable-link js-keyboard-openable" target="_blank" rel="noopener" data-gtm-click-label="entry-search-result-item-title"> <img class="centerarticle-entry-favicon" src="https://cdn-ak2.favicon.st-hatena.com/64?url=https%3A%2F%2Fnote.com%2Ferukiti%2Fn%2Fnffdcbfafbabb" alt="">現代ウェブフロントエンド（ウェブアプリケーション）について理解する唯一の方法｜erukiti </a> </h3> <ul class="centerarticle-entry-data"> <li> <span class="centerarticle-users"> <a href="/entry/s/note.com/erukiti/n/nffdcbfafbabb" class="js-keyboard-entry-page-openable" title="現代ウェブフロントエンド（ウェブアプリケーション）について理解する唯一の方法｜erukiti (854 ブックマーク)" data-gtm-click-label="entry-search-result-item-users"> 854 users </a> </span> </li> <li> <a href="/site/note.com/erukiti" title="『note.com/erukiti』の新着エントリー" data-gtm-click-label="entry-search-result-item-site-search-url"> note.com/erukiti </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/03/29</span></li> </ul> </div> <div class="centerarticle-entry-contents has-image"> <div class="centerarticle-entry-item"> <p class="centerarticle-entry-summary">この記事は、ウェブ技術の開発者（Java, PHP, Ruby, Go... 全て含む）のうち、少しでもJavaScriptを触ったことがあるけど、現代ウェブフロントエンドというか、特にウェブアプリケーション —— React, Vue, Angular など—— が分からない人に向けて、たったひとつの理解方法を提示するものです。追記: ちなみに果てしなくどうでもいいですが、今回の記事が記念すべき100記事目らしいです。（Noteさん！その手のヤツはいっそ自動で記事にバッヂを表示するとかしてくれるとうれしいです！）対象読者は、Java, PH(以下略）などのコードと一緒に、ほんの少しでもJSのコードを触った、見たことがあるというレベル感の人なので、既にReact, Vue, Angular などでガリガリコードを書いている人は対象ではありません。あとホームページ屋さんとかウェブコーダ</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%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/TypeScript" data-gtm-click-label="entry-search-result-item-tag">TypeScript</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/web" data-gtm-click-label="entry-search-result-item-tag">web</a></li> <li><a href="/q/html" data-gtm-click-label="entry-search-result-item-tag">html</a></li> <li><a href="/q/react" data-gtm-click-label="entry-search-result-item-tag">react</a></li> <li><a href="/q/frontend" data-gtm-click-label="entry-search-result-item-tag">frontend</a></li> <li><a href="/q/%E3%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://note.com/erukiti/n/nffdcbfafbabb"> <ul class="following-bookmarks js-following-bookmarks"></ul> <script type="text/x-template" id="template-following-bookmark"> <li> <a href="{{ anchor_path }}" class="following-bookmark-link" data-gtm-label="entry-info-followingBookmarks"> <img src="{{ profile_image_url }}" alt="{{ user_name }}" class="following-bookmark-icon"> </a> <span class="following-bookmark-popup"> <span class="following-bookmark-username">{{ user_name }}</span><span class="following-bookmark-timestamp">{{ created }}</span> <span class="following-bookmark-text"> {{ #comment }}<span class="following-bookmark-comment">{{ comment }}</span>{{ /comment }} <ul class="following-bookmark-tags">{{ #tags }}<li>{{ label }}</li>{{ /tags }}</ul> </span> </span> </li> </script> </div> </div> <div class="centerarticle-entry-image-wrapper"> <a href="https://note.com/erukiti/n/nffdcbfafbabb" class="centerarticle-entry-image" target="_blank" rel="noopener"> <img src="https://cdn-ak-scissors.b.st-hatena.com/image/square/3ddcb2854471ee3980cea78ff9477ef0e23122c4/height=288;version=1;width=512/https%3A%2F%2Fassets.st-note.com%2Fproduction%2Fuploads%2Fimages%2F21766717%2Frectangle_large_type_2_f1f51f24b3a5a5300336b92c46416efe.jpg%3Ffit%3Dbounds%26quality%3D85%26width%3D1280" alt="現代ウェブフロントエンド（ウェブアプリケーション）について理解する唯一の方法｜erukiti" 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">vueの関連エントリー</h3> <ul class="entrysearch-related-list"> <li class="entrysearch-related-listitem"> <div class="entrysearch-related-entry"> <a href="https://fullswing.dena.com/archives/100153/" 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/73c19d87644b13398592cd2687b12b59d2274bb4/height=288;version=1;width=512/https%3A%2F%2Fimages.ctfassets.net%2F7mrdlclm9xss%2FkRtvTn82hDLUGuLx0UNHL%2F361530fe4fe889cc73b3700ce393a1d8%2Fkv_250205_0212.jpg" alt="DeNA南場智子が語る「AI時代の会社経営と成長戦略」全文書き起こし | フルスイング by DeNA"> </a> <h4 class="entrysearch-related-entry-title"> <a href="https://fullswing.dena.com/archives/100153/" target="_blank" rel="noopener" data-gtm-click-label="entry-search-recommend-middle-title"> DeNA南場智子が語る「AI時代の会社経営と成長戦略」全文書き起こし | フルスイング by DeNA </a> </h4> <a href="/entry/s/fullswing.dena.com/archives/100153/" class="entrysearch-related-users" data-gtm-click-label="entry-search-recommend-middle-users"> 816 users </a> </div> </li> <li class="entrysearch-related-listitem"> <div class="entrysearch-related-entry"> <a href="https://nowokay.hatenablog.com/entry/2025/02/17/152827" 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/843f58aa3f6e19c6817492974c743145526d04a5/height=288;version=1;width=512/https%3A%2F%2Fcdn.image.st-hatena.com%2Fimage%2Fscale%2Fbc7307bfd23ab26fcf834ad86a8a4d772e635c7d%2Fbackend%3Dimagemagick%3Bversion%3D1%3Bwidth%3D1300%2Fhttps%253A%252F%252Fcdn-ak.f.st-hatena.com%252Fimages%252Ffotolife%252Fn%252Fnowokay%252F20250217%252F20250217153941.png" alt="rinnaのDeepSeek R1蒸留モデルがすごい - きしだのHatena"> </a> <h4 class="entrysearch-related-entry-title"> <a href="https://nowokay.hatenablog.com/entry/2025/02/17/152827" target="_blank" rel="noopener" data-gtm-click-label="entry-search-recommend-middle-title"> rinnaのDeepSeek R1蒸留モデルがすごい - きしだのHatena </a> </h4> <a href="/entry/s/nowokay.hatenablog.com/entry/2025/02/17/152827" class="entrysearch-related-users" data-gtm-click-label="entry-search-recommend-middle-users"> 169 users </a> </div> </li> <li class="entrysearch-related-listitem"> <div class="entrysearch-related-entry"> <a href="https://togetter.com/li/2512991" 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/5baac889b4de103a2dc3c7f45f1da36fcf4ae453/height=288;version=1;width=512/https%3A%2F%2Fs.tgstc.com%2Fogp3%2Ff37ef1c0153a2f3d0e7ed414d31eda96-1200x630.jpeg" alt="日産、役員クラスに超高給を払うシステムが会社崩壊の原因になるかもしれない→やっぱり「ゴーン。お前だったのか...」"> </a> <h4 class="entrysearch-related-entry-title"> <a href="https://togetter.com/li/2512991" target="_blank" rel="noopener" data-gtm-click-label="entry-search-recommend-middle-title"> 日産、役員クラスに超高給を払うシステムが会社崩壊の原因になるかもしれない→やっぱり「ゴーン。お前だったのか...」 </a> </h4> <a href="/entry/s/togetter.com/li/2512991" class="entrysearch-related-users" data-gtm-click-label="entry-search-recommend-middle-users"> 198 users </a> </div> </li> <li class="entrysearch-related-listitem"> <div class="entrysearch-related-entry"> <a href="https://zenn.dev/jessicazu/articles/7a46a7e15c153f" 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/d32d1b7ad2bb151dbcb7d75fa76a70f540f26381/height=288;version=1;width=512/https%3A%2F%2Fres.cloudinary.com%2Fzenn%2Fimage%2Fupload%2Fs--fqDeRTft--%2Fc_fit%252Cg_north_west%252Cl_text%3Anotosansjp-medium.otf_55%3A%2525E5%252590%25259B%2525E3%252581%25259F%2525E3%252581%2525A1%2525E3%252581%2525AFCursor%2525E3%252582%252592%2525E6%25259C%2525AC%2525E5%2525BD%252593%2525E3%252581%2525AB%2525E4%2525BD%2525BF%2525E3%252581%252588%2525E3%252581%2525A6%2525E3%252581%252584%2525E3%252582%25258B%2525E3%252581%25258B%252Cw_1010%252Cx_90%252Cy_100%2Fg_south_west%252Cl_text%3Anotosansjp-medium.otf_37%3AKazuki%252520Tomita%252Cx_203%252Cy_121%2Fg_south_west%252Ch_90%252Cl_fetch%3AaHR0cHM6Ly9zdG9yYWdlLmdvb2dsZWFwaXMuY29tL3plbm4tdXNlci11cGxvYWQvYXZhdGFyLzY1YmIzZTM0YjYuanBlZw%3D%3D%252Cr_max%252Cw_90%252Cx_87%252Cy_95%2Fv1627283836%2Fdefault%2Fog-base-w1200-v2.png" alt="君たちはCursorを本当に使えているか"> </a> <h4 class="entrysearch-related-entry-title"> <a href="https://zenn.dev/jessicazu/articles/7a46a7e15c153f" target="_blank" rel="noopener" data-gtm-click-label="entry-search-recommend-middle-title"> 君たちはCursorを本当に使えているか </a> </h4> <a href="/entry/s/zenn.dev/jessicazu/articles/7a46a7e15c153f" class="entrysearch-related-users" data-gtm-click-label="entry-search-recommend-middle-users"> 63 users </a> </div> </li> <li class="entrysearch-related-listitem"> <div class="entrysearch-related-entry"> <a href="https://gigazine.net/news/20250217-chinese-sex-doll-maker-ai-boosts/" 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/1da774434c3244e06ac9696b0514e1fecd8c75dd/height=288;version=1;width=512/https%3A%2F%2Fi.gzn.jp%2Fimg%2F2025%2F02%2F17%2Fchinese-sex-doll-maker-ai-boosts%2F00_m.jpg" alt="中国のラブドールメーカーが「大人のおもちゃにAIを統合することで売上が30％伸びる」と予想"> </a> <h4 class="entrysearch-related-entry-title"> <a href="https://gigazine.net/news/20250217-chinese-sex-doll-maker-ai-boosts/" target="_blank" rel="noopener" data-gtm-click-label="entry-search-recommend-middle-title"> 中国のラブドールメーカーが「大人のおもちゃにAIを統合することで売上が30％伸びる」と予想 </a> </h4> <a href="/entry/s/gigazine.net/news/20250217-chinese-sex-doll-maker-ai-boosts/" class="entrysearch-related-users" data-gtm-click-label="entry-search-recommend-middle-users"> 97 users </a> </div> </li> <li class="entrysearch-related-listitem"> <div class="entrysearch-related-entry"> <a href="https://mtx2s.hatenablog.com/entry/2025/02/17/212153" 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/e2ebfb1c4a8411ec567d2264e2b28c7b02625c15/height=288;version=1;width=512/https%3A%2F%2Fcdn.image.st-hatena.com%2Fimage%2Fscale%2Fde07d15e6fc7d9b164fc8ae82db7600a72e8a877%2Fbackend%3Dimagemagick%3Bversion%3D1%3Bwidth%3D1300%2Fhttps%253A%252F%252Fcdn-ak.f.st-hatena.com%252Fimages%252Ffotolife%252Fm%252Fmtx2s%252F20250217%252F20250217075000.png" alt="GitHub Copilotの活用はプルリク数・コードレビューの速さ・開発者体験・協働レベルを引き上げる - mtx2s’s blog"> </a> <h4 class="entrysearch-related-entry-title"> <a href="https://mtx2s.hatenablog.com/entry/2025/02/17/212153" target="_blank" rel="noopener" data-gtm-click-label="entry-search-recommend-middle-title"> GitHub Copilotの活用はプルリク数・コードレビューの速さ・開発者体験・協働レベルを引き上げる - mtx2s’s blog </a> </h4> <a href="/entry/s/mtx2s.hatenablog.com/entry/2025/02/17/212153" class="entrysearch-related-users" data-gtm-click-label="entry-search-recommend-middle-users"> 41 users </a> </div> </li> <li class="entrysearch-related-listitem"> <div class="entrysearch-related-entry"> <a href="https://speakerdeck.com/j5ik2o/esdejie-kufu-za-xi-sisutemunoke-ti" 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/1d37b49c63b02ac6de843c5383d35fb4899b4179/height=288;version=1;width=512/https%3A%2F%2Ffiles.speakerdeck.com%2Fpresentations%2F3b071ac06b924c958de248cce5244432%2Fslide_0.jpg%3F33869281" alt="なぜイベント駆動が必要なのか - CQRS/ESで解く複雑系システムの課題 -"> </a> <h4 class="entrysearch-related-entry-title"> <a href="https://speakerdeck.com/j5ik2o/esdejie-kufu-za-xi-sisutemunoke-ti" target="_blank" rel="noopener" data-gtm-click-label="entry-search-recommend-middle-title"> なぜイベント駆動が必要なのか - CQRS/ESで解く複雑系システムの課題 - </a> </h4> <a href="/entry/s/speakerdeck.com/j5ik2o/esdejie-kufu-za-xi-sisutemunoke-ti" class="entrysearch-related-users" data-gtm-click-label="entry-search-recommend-middle-users"> 37 users </a> </div> </li> <li class="entrysearch-related-listitem"> <div class="entrysearch-related-entry"> <a href="https://www.publickey1.jp/blog/25/fluid_computevercel.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/9a22f370d69f92909c54c6d4dd1229961fe9dd75/height=288;version=1;width=512/https%3A%2F%2Fwww.publickey1.jp%2F2025%2FEn4WHhvg.jpg" alt="従来のサーバレスよりさらに高効率で高速な「Fluid Compute」、Vercelが提供開始"> </a> <h4 class="entrysearch-related-entry-title"> <a href="https://www.publickey1.jp/blog/25/fluid_computevercel.html" target="_blank" rel="noopener" data-gtm-click-label="entry-search-recommend-middle-title"> 従来のサーバレスよりさらに高効率で高速な「Fluid Compute」、Vercelが提供開始 </a> </h4> <a href="/entry/s/www.publickey1.jp/blog/25/fluid_computevercel.html" class="entrysearch-related-users" data-gtm-click-label="entry-search-recommend-middle-users"> 39 users </a> </div> </li> <li class="entrysearch-related-listitem"> <div class="entrysearch-related-entry"> <a href="https://addyosmani.com/blog/puppeteer-recipes/" 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/35a9c7d032fa7b303a5e74fdb8e4aed7d9b1438a/height=288;version=1;width=512/https%3A%2F%2Faddyosmani.com%2Fassets%2Fimages%2Fpuppeteer-webperf.jpg" alt="Web Performance Recipes With Puppeteer"> </a> <h4 class="entrysearch-related-entry-title"> <a href="https://addyosmani.com/blog/puppeteer-recipes/" target="_blank" rel="noopener" data-gtm-click-label="entry-search-recommend-middle-title"> Web Performance Recipes With Puppeteer </a> </h4> <a href="/entry/s/addyosmani.com/blog/puppeteer-recipes/" class="entrysearch-related-users" data-gtm-click-label="entry-search-recommend-middle-users"> 94 users </a> </div> </li> <li class="entrysearch-related-listitem"> <div class="entrysearch-related-entry"> <a href="https://gigazine.net/news/20250217-android-calclator-app/" 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/6f104da4a93421c2600eb8c72e7cddf5276b7450/height=288;version=1;width=512/https%3A%2F%2Fi.gzn.jp%2Fimg%2F2025%2F02%2F17%2Fandroid-calclator-app%2F00_m.png" alt="電卓アプリを作るのはなぜ難しいのか、Androidの「電卓」に施された工夫とは？"> </a> <h4 class="entrysearch-related-entry-title"> <a href="https://gigazine.net/news/20250217-android-calclator-app/" target="_blank" rel="noopener" data-gtm-click-label="entry-search-recommend-middle-title"> 電卓アプリを作るのはなぜ難しいのか、Androidの「電卓」に施された工夫とは？ </a> </h4> <a href="/entry/s/gigazine.net/news/20250217-android-calclator-app/" class="entrysearch-related-users" data-gtm-click-label="entry-search-recommend-middle-users"> 91 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://zenn.dev/koduki/articles/0fe6cc5ada58e5600f75"><span>あとで読む</span> </button> </div> <div class="centerarticle-entry-header"> <h3 class="centerarticle-entry-title"> <a href="https://zenn.dev/koduki/articles/0fe6cc5ada58e5600f75" 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%2Fkoduki%2Farticles%2F0fe6cc5ada58e5600f75" alt="">レガシーおじさん、SPAを始めてみた。そして限界を知る </a> </h3> <ul class="centerarticle-entry-data"> <li> <span class="centerarticle-users"> <a href="/entry/s/zenn.dev/koduki/articles/0fe6cc5ada58e5600f75" class="js-keyboard-entry-page-openable" title="レガシーおじさん、SPAを始めてみた。そして限界を知る (848 ブックマーク)" data-gtm-click-label="entry-search-result-item-users"> 848 users </a> </span> </li> <li> <a href="/site/zenn.dev/koduki" title="『zenn.dev/koduki』の新着エントリー" data-gtm-click-label="entry-search-result-item-site-search-url"> zenn.dev/koduki </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/10/19</span></li> </ul> </div> <div class="centerarticle-entry-contents has-image"> <div class="centerarticle-entry-item"> <p class="centerarticle-entry-summary">はじめに最近、Webの記事を見てるとReactだVue.jsばかりが上がっていてJSPやERBの話をしてる人は誰もいません。jQueryの記事ももちろん見ない。つまり、Webだけ見る限りではほとんどの人がSPAを使ってるように見えます。私はWeb界隈には居るもののどちらかというとバックエンド寄り、もっというとそもそもWebとか関係ない領域を見る事が多いので、ちょっとキャッチアップを兼ねていくつかの個人プロダクトにVue.jsを採用してみました。 jQueryくらいで頭が止まってたので。サーバサイドもマイクロサービスでAPI化が進んでるのでフロントもそれに合った技術を選ばないとですしね。というわけで、今回はその中で得た知見というか、従来型のサーバサイドでのWeb開発をしていた人の視点でVue.jsをキャッチアップする流れで書いていきたいと思います。まあ最終的な結論は正直「これすごく</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/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/%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/javascript" data-gtm-click-label="entry-search-result-item-tag">javascript</a></li> <li><a href="/q/web" data-gtm-click-label="entry-search-result-item-tag">web</a></li> <li><a href="/q/programming" data-gtm-click-label="entry-search-result-item-tag">programming</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/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/koduki/articles/0fe6cc5ada58e5600f75"> <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/koduki/articles/0fe6cc5ada58e5600f75" class="centerarticle-entry-image" target="_blank" rel="noopener"> <img src="https://cdn-ak-scissors.b.st-hatena.com/image/square/9d7f563bd5dfd955e99387aa29a88d652be77a3e/height=288;version=1;width=512/https%3A%2F%2Fres.cloudinary.com%2Fzenn%2Fimage%2Fupload%2Fs--tlFWYuF3--%2Fc_fit%252Cg_north_west%252Cl_text%3Anotosansjp-medium.otf_55%3A%2525E3%252583%2525AC%2525E3%252582%2525AC%2525E3%252582%2525B7%2525E3%252583%2525BC%2525E3%252581%25258A%2525E3%252581%252598%2525E3%252581%252595%2525E3%252582%252593%2525E3%252580%252581SPA%2525E3%252582%252592%2525E5%2525A7%25258B%2525E3%252582%252581%2525E3%252581%2525A6%2525E3%252581%2525BF%2525E3%252581%25259F%2525E3%252580%252582%2525E3%252581%25259D%2525E3%252581%252597%2525E3%252581%2525A6%2525E9%252599%252590%2525E7%252595%25258C%2525E3%252582%252592%2525E7%25259F%2525A5%2525E3%252582%25258B%252Cw_1010%252Cx_90%252Cy_100%2Fg_south_west%252Cl_text%3Anotosansjp-medium.otf_37%3Akoduki%252Cx_203%252Cy_121%2Fg_south_west%252Ch_90%252Cl_fetch%3AaHR0cHM6Ly9zdG9yYWdlLmdvb2dsZWFwaXMuY29tL3plbm4tdXNlci11cGxvYWQvYXZhdGFyLzM0NmExZDBlNTQuanBlZw%3D%3D%252Cr_max%252Cw_90%252Cx_87%252Cy_95%2Fv1627283836%2Fdefault%2Fog-base-w1200-v2.png" alt="レガシーおじさん、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://engineering.linecorp.com/ja/blog/uit-baseline-for-front-end-development-in-2022/"><span>あとで読む</span> </button> </div> <div class="centerarticle-entry-header"> <h3 class="centerarticle-entry-title"> <a href="https://engineering.linecorp.com/ja/blog/uit-baseline-for-front-end-development-in-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%2Fengineering.linecorp.com%2Fja%2Fblog%2Fuit-baseline-for-front-end-development-in-2022%2F" alt="">2022年におけるフロントエンド開発のベースライン </a> </h3> <ul class="centerarticle-entry-data"> <li> <span class="centerarticle-users"> <a href="/entry/s/engineering.linecorp.com/ja/blog/uit-baseline-for-front-end-development-in-2022/" class="js-keyboard-entry-page-openable" title="2022年におけるフロントエンド開発のベースライン (771 ブックマーク)" data-gtm-click-label="entry-search-result-item-users"> 771 users </a> </span> </li> <li> <a href="/site/engineering.linecorp.com/" title="『engineering.linecorp.com』の新着エントリー" data-gtm-click-label="entry-search-result-item-site-search-url"> engineering.linecorp.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/26</span></li> </ul> </div> <div class="centerarticle-entry-contents has-image"> <div class="centerarticle-entry-item"> <p class="centerarticle-entry-summary">LINE株式会社は、2023年10月1日にLINEヤフー株式会社になりました。LINEヤフー株式会社の新しいブログはこちらです。 LINEヤフー Tech Blog TL;DR:2022にフロントエンド開発で最も考慮すべきユーザー環境は、パフォーマンスでは低スペックのAndroid端末、標準仕様では2年前のSafari、そしてネットワークでは４Gです。それに対してはJSへの過剰依存などが原因で主にパフォーマンスの面でのウェブ全体の対応がよくありません。こんにちは！LINEフロントエンド開発室のダバロスアランです。この記事のタイトルを見て「釣りタイトルですね〜」と考えている方がいると思いますが今回に限ってはそれを大目に見てください。それはなぜかと言いますと、2021年から2022年にかけて私たちフロントエンドエンジニアが全体的に考え方を改める必要が出るほど大きな変化がありました。その変</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/%E9%96%8B%E7%99%BA" data-gtm-click-label="entry-search-result-item-tag">開発</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/development" data-gtm-click-label="entry-search-result-item-tag">development</a></li> <li><a href="/q/javascript" data-gtm-click-label="entry-search-result-item-tag">javascript</a></li> <li><a href="/q/LINE" data-gtm-click-label="entry-search-result-item-tag">LINE</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/web" data-gtm-click-label="entry-search-result-item-tag">web</a></li> </ul> <div class="following-bookmarks-container js-following-bookmarks-container" data-entry-url="https://engineering.linecorp.com/ja/blog/uit-baseline-for-front-end-development-in-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 class="centerarticle-entry-image-wrapper"> <a href="https://engineering.linecorp.com/ja/blog/uit-baseline-for-front-end-development-in-2022/" class="centerarticle-entry-image" target="_blank" rel="noopener"> <img src="https://cdn-ak-scissors.b.st-hatena.com/image/square/59bed13301ceeeaa264fdf9ce0c9397b79de9e09/height=288;version=1;width=512/https%3A%2F%2Fvos.line-scdn.net%2Flandpress-content-v2_1761%2F1666854335969.png%3FupdatedAt%3D1666854336000" 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://employment.en-japan.com/engineerhub/entry/2020/05/19/103000"><span>あとで読む</span> </button> </div> <div class="centerarticle-entry-header"> <h3 class="centerarticle-entry-title"> <a href="https://employment.en-japan.com/engineerhub/entry/2020/05/19/103000" 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%2Femployment.en-japan.com%2Fengineerhub%2Fentry%2F2020%2F05%2F19%2F103000" alt="">東京都の新型コロナ対策サイトはなぜNuxtJSだったのか？ ─ シビックテックのベストプラクティス｜ハイクラス転職・求人情報サイト AMBI（アンビ） </a> </h3> <ul class="centerarticle-entry-data"> <li> <span class="centerarticle-users"> <a href="/entry/s/employment.en-japan.com/engineerhub/entry/2020/05/19/103000" class="js-keyboard-entry-page-openable" title="東京都の新型コロナ対策サイトはなぜNuxtJSだったのか？ ─ シビックテックのベストプラクティス｜ハイクラス転職・求人情報サイト AMBI（アンビ） (632 ブックマーク)" data-gtm-click-label="entry-search-result-item-users"> 632 users </a> </span> </li> <li> <a href="/site/employment.en-japan.com/" title="『employment.en-japan.com』の新着エントリー" data-gtm-click-label="entry-search-result-item-site-search-url"> employment.en-japan.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">2020/05/19</span></li> </ul> </div> <div class="centerarticle-entry-contents has-image"> <div class="centerarticle-entry-item"> <p class="centerarticle-entry-summary">文科系の学部に在籍しながらシビックテックに興味を持ち、関治之氏の「右腕インターン」として1年ほど関わる。その後いくつかのシビックテック活動やインターンシップを経て、株式会社almaの創業に参画。プロダクト開発をリードするかたわら、共同設立したCode for Youthなどでも活動する。学習院大学4年。なぜNuxtJSだったのか？あるいはjQueryでなかったか？偶然に決まったNetlifyは開発にとても役立った後でコンポーネントを変更改善できるよう小さく作るベストエフォートでの開発体制リリース直後から届いたエンジニアの反響シビックテック活動のベストプラクティスなぜNuxtJSだったのか？あるいはjQueryでなかったか？ ── まず最初に、今回の技術的なバックグラウンドから聞かせてください。一見すると行政が関係した仕事とは思えない現代的な技術選定のWebサービスですが、</p> <ul class="entrysearch-entry-tags"> <li><a href="/q/nuxt.js" data-gtm-click-label="entry-search-result-item-tag">nuxt.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.js" data-gtm-click-label="entry-search-result-item-tag">Vue.js</a></li> <li><a href="/q/COVID-19" data-gtm-click-label="entry-search-result-item-tag">COVID-19</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/%E9%96%8B%E7%99%BA" data-gtm-click-label="entry-search-result-item-tag">開発</a></li> <li><a href="/q/NuxtJS" data-gtm-click-label="entry-search-result-item-tag">NuxtJS</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/netlify" data-gtm-click-label="entry-search-result-item-tag">netlify</a></li> <li><a href="/q/github" data-gtm-click-label="entry-search-result-item-tag">github</a></li> </ul> <div class="following-bookmarks-container js-following-bookmarks-container" data-entry-url="https://employment.en-japan.com/engineerhub/entry/2020/05/19/103000"> <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://employment.en-japan.com/engineerhub/entry/2020/05/19/103000" class="centerarticle-entry-image" target="_blank" rel="noopener"> <img src="https://cdn-ak-scissors.b.st-hatena.com/image/square/f07c10a17f0270380a44bd4cf15d1f085144b173/height=288;version=1;width=512/https%3A%2F%2Fen-ambi.com%2FimageFile%2Fuser%2Fglobal%2Fogp_01.png" alt="東京都の新型コロナ対策サイトはなぜNuxtJSだったのか？ ─ シビックテックのベストプラクティス｜ハイクラス転職・求人情報サイト AMBI（アンビ）" 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/rana_kualu/items/915345b8f3f870cfe2aa?utm_content=buffer5338f&utm_medium=social&utm_source=facebook.com&utm_campaign=buffer"><span>あとで読む</span> </button> </div> <div class="centerarticle-entry-header"> <h3 class="centerarticle-entry-title"> <a href="https://qiita.com/rana_kualu/items/915345b8f3f870cfe2aa?utm_content=buffer5338f&utm_medium=social&utm_source=facebook.com&utm_campaign=buffer" 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%2Frana_kualu%2Fitems%2F915345b8f3f870cfe2aa%3Futm_content%3Dbuffer5338f%26utm_medium%3Dsocial%26utm_source%3Dfacebook.com%26utm_campaign%3Dbuffer" alt="">2020年のフロントエンドマスターになりたければこの9プロジェクトを作れ - Qiita </a> </h3> <ul class="centerarticle-entry-data"> <li> <span class="centerarticle-users"> <a href="/entry/s/qiita.com/rana_kualu/items/915345b8f3f870cfe2aa?utm_content=buffer5338f&utm_medium=social&utm_source=facebook.com&utm_campaign=buffer" class="js-keyboard-entry-page-openable" title="2020年のフロントエンドマスターになりたければこの9プロジェクトを作れ - Qiita (602 ブックマーク)" data-gtm-click-label="entry-search-result-item-users"> 602 users </a> </span> </li> <li> <a href="/site/qiita.com/rana_kualu" title="『qiita.com/rana_kualu』の新着エントリー" data-gtm-click-label="entry-search-result-item-site-search-url"> qiita.com/rana_kualu </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/07/03</span></li> </ul> </div> <div class="centerarticle-entry-contents has-image"> <div class="centerarticle-entry-item"> <p class="centerarticle-entry-summary">以下はSimon Holdorf( dev.to/ Twitter / GitHub )による記事、9 Projects you can do to become a Frontend Master in 2020の日本語訳です。 9 Projects you can do to become a Frontend Master in 2020 Introduction あなたがプログラミングの初心者であるか、既に経験豊富な開発者であるかにかかわらず、この業界では、急速な変化に追いつくために新しい概念と言語・フレームワークを学び続けることが必要です。たとえばFacebookが4年前にオープンソース化したReactは、既に世界中のJavaScript開発者にとって第一の選択肢になっています。もちろんVueとAngularにも多くのフォロアーがついています。さらにはSvelte、Next</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/javascript" data-gtm-click-label="entry-search-result-item-tag">javascript</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> <li><a href="/q/react" data-gtm-click-label="entry-search-result-item-tag">react</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%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%81%E3%83%A5%E3%83%BC%E3%83%88%E3%83%AA%E3%82%A2%E3%83%AB" 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/app" data-gtm-click-label="entry-search-result-item-tag">app</a></li> </ul> <div class="following-bookmarks-container js-following-bookmarks-container" data-entry-url="https://qiita.com/rana_kualu/items/915345b8f3f870cfe2aa?utm_content=buffer5338f&utm_medium=social&utm_source=facebook.com&utm_campaign=buffer"> <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/rana_kualu/items/915345b8f3f870cfe2aa?utm_content=buffer5338f&utm_medium=social&utm_source=facebook.com&utm_campaign=buffer" class="centerarticle-entry-image" target="_blank" rel="noopener"> <img src="https://cdn-ak-scissors.b.st-hatena.com/image/square/f24d4ba59df5c3df08a8fbef8c24228971c72831/height=288;version=1;width=512/https%3A%2F%2Fqiita-user-contents.imgix.net%2Fhttps%253A%252F%252Fcdn.qiita.com%252Fassets%252Fpublic%252Farticle-ogp-background-412672c5f0600ab9a64263b751f1bc81.png%3Fixlib%3Drb-4.0.0%26w%3D1200%26mark64%3DaHR0cHM6Ly9xaWl0YS11c2VyLWNvbnRlbnRzLmltZ2l4Lm5ldC9-dGV4dD9peGxpYj1yYi00LjAuMCZ3PTk3MiZoPTM3OCZ0eHQ9MjAyMCVFNSVCOSVCNCVFMyU4MSVBRSVFMyU4MyU5NSVFMyU4MyVBRCVFMyU4MyVCMyVFMyU4MyU4OCVFMyU4MiVBOCVFMyU4MyVCMyVFMyU4MyU4OSVFMyU4MyU5RSVFMyU4MiVCOSVFMyU4MiVCRiVFMyU4MyVCQyVFMyU4MSVBQiVFMyU4MSVBQSVFMyU4MiU4QSVFMyU4MSU5RiVFMyU4MSU5MSVFMyU4MiU4QyVFMyU4MSVCMCVFMyU4MSU5MyVFMyU4MSVBRTklRTMlODMlOTclRTMlODMlQUQlRTMlODIlQjglRTMlODIlQTclRTMlODIlQUYlRTMlODMlODglRTMlODIlOTIlRTQlQkQlOUMlRTMlODIlOEMmdHh0LWFsaWduPWxlZnQlMkN0b3AmdHh0LWNvbG9yPSUyMzFFMjEyMSZ0eHQtZm9udD1IaXJhZ2lubyUyMFNhbnMlMjBXNiZ0eHQtc2l6ZT01NiZzPTExZTQxZGQxZjhlZDdiY2I3MWUyNmJhYzBhM2ZiNzA1%26mark-x%3D142%26mark-y%3D57%26blend64%3DaHR0cHM6Ly9xaWl0YS11c2VyLWNvbnRlbnRzLmltZ2l4Lm5ldC9-dGV4dD9peGxpYj1yYi00LjAuMCZoPTc2Jnc9NzcwJnR4dD0lNDByYW5hX2t1YWx1JnR4dC1jb2xvcj0lMjMxRTIxMjEmdHh0LWZvbnQ9SGlyYWdpbm8lMjBTYW5zJTIwVzYmdHh0LXNpemU9MzYmdHh0LWFsaWduPWxlZnQlMkN0b3Amcz04MDExYmU1Y2VmYmMzMDJiYjQzZjJhMmU2ZGNjNmZjNA%26blend-x%3D142%26blend-y%3D486%26blend-mode%3Dnormal%26s%3Db3672cd496aba2b6633ea0c2510d9244" alt="2020年のフロントエンドマスターになりたければこの9プロジェクトを作れ - 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://zenn.dev/mirumi/articles/how-far-can-i-go"><span>あとで読む</span> </button> </div> <div class="centerarticle-entry-header"> <h3 class="centerarticle-entry-title"> <a href="https://zenn.dev/mirumi/articles/how-far-can-i-go" 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%2Fmirumi%2Farticles%2Fhow-far-can-i-go" alt="">「引っ越しするけど会社から歩いて10分圏内ってどこまで？」を調べるサービスをつくりました </a> </h3> <ul class="centerarticle-entry-data"> <li> <span class="centerarticle-users"> <a href="/entry/s/zenn.dev/mirumi/articles/how-far-can-i-go" class="js-keyboard-entry-page-openable" title="「引っ越しするけど会社から歩いて10分圏内ってどこまで？」を調べるサービスをつくりました (591 ブックマーク)" data-gtm-click-label="entry-search-result-item-users"> 591 users </a> </span> </li> <li> <a href="/site/zenn.dev/mirumi" title="『zenn.dev/mirumi』の新着エントリー" data-gtm-click-label="entry-search-result-item-site-search-url"> zenn.dev/mirumi </a> </li> <li> <a href="/hotentry/it" data-gtm-click-label="entry-search-result-item-category">テクノロジー</a> </li> <li><span class="entry-contents-date">2022/02/11</span></li> </ul> </div> <div class="centerarticle-entry-contents has-image"> <div class="centerarticle-entry-item"> <p class="centerarticle-entry-summary">こうです。新しい住居を探そうとしたとき、「会社から歩いてちょうど 30 分のところに住めたら QOL 高くない？」と思いました。(運動できる、公共交通機関と無縁、買い物もできるetc...) でもある一点を中心とした移動可能エリアを知りたいとき、円でざっくりと表示をする以外のアプローチがほぼないことに気がつきました。海外サイトも含めかなり調べてみましたが、類似のサービスは見当たりません。という経緯でつくったのが How far can I go? というサイト。ぽちぽちやっていただければわかりますが、結果の精度はかなりのものと思われます。特に道の有無や川沿いなどを検証してもらえるとその効果がすぐにわかるかと。転職先が決まっているなら、そこにピンを差して交通手段と所要時間を設定してください。HOME'S などの住宅検索サービスには条件絞り込みをしたあとにそれらを地図上にまとめてマ</p> <ul class="entrysearch-entry-tags"> <li><a href="/q/web%E3%82%B5%E3%83%BC%E3%83%93%E3%82%B9" data-gtm-click-label="entry-search-result-item-tag">webサービス</a></li> <li><a href="/q/%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/vue.js" data-gtm-click-label="entry-search-result-item-tag">vue.js</a></li> <li><a href="/q/%E3%82%B5%E3%83%BC%E3%83%93%E3%82%B9" data-gtm-click-label="entry-search-result-item-tag">サービス</a></li> <li><a href="/q/map" data-gtm-click-label="entry-search-result-item-tag">map</a></li> <li><a href="/q/%E5%9C%B0%E5%9B%B3" data-gtm-click-label="entry-search-result-item-tag">地図</a></li> <li><a href="/q/%E5%BC%95%E3%81%A3%E8%B6%8A%E3%81%97" data-gtm-click-label="entry-search-result-item-tag">引っ越し</a></li> <li><a href="/q/%E3%81%8A%E5%BD%B9%E7%AB%8B%E3%81%A1" data-gtm-click-label="entry-search-result-item-tag">お役立ち</a></li> <li><a href="/q/%E4%BC%9A%E7%A4%BE" 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/mirumi/articles/how-far-can-i-go"> <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/mirumi/articles/how-far-can-i-go" class="centerarticle-entry-image" target="_blank" rel="noopener"> <img src="https://cdn-ak-scissors.b.st-hatena.com/image/square/22d644ff334da2929ea1c4bc1e3f7754376434bd/height=288;version=1;width=512/https%3A%2F%2Fres.cloudinary.com%2Fzenn%2Fimage%2Fupload%2Fs--ntjyfRCp--%2Fc_fit%252Cg_north_west%252Cl_text%3Anotosansjp-medium.otf_55%3A%2525E3%252580%25258C%2525E5%2525BC%252595%2525E3%252581%2525A3%2525E8%2525B6%25258A%2525E3%252581%252597%2525E3%252581%252599%2525E3%252582%25258B%2525E3%252581%252591%2525E3%252581%2525A9%2525E4%2525BC%25259A%2525E7%2525A4%2525BE%2525E3%252581%25258B%2525E3%252582%252589%2525E6%2525AD%2525A9%2525E3%252581%252584%2525E3%252581%2525A610%2525E5%252588%252586%2525E5%25259C%25258F%2525E5%252586%252585%2525E3%252581%2525A3%2525E3%252581%2525A6%2525E3%252581%2525A9%2525E3%252581%252593%2525E3%252581%2525BE%2525E3%252581%2525A7%2525EF%2525BC%25259F%2525E3%252580%25258D%2525E3%252582%252592%2525E8%2525AA%2525BF%2525E3%252581%2525B9%2525E3%252582%25258B%2525E3%252582%2525B5%2525E3%252583%2525BC%2525E3%252583%252593%2525E3%252582%2525B9%2525E3%252582%252592%2525E3%252581%2525A4%2525E3%252581%25258F%2525E3%252582%25258A%2525E3%252581%2525BE%2525E3%252581%252597%2525E3%252581%25259F%252Cw_1010%252Cx_90%252Cy_100%2Fg_south_west%252Cl_text%3Anotosansjp-medium.otf_37%3A%2525E3%252581%2525BF%2525E3%252582%25258B%2525E3%252581%2525BF%252Cx_203%252Cy_121%2Fg_south_west%252Ch_90%252Cl_fetch%3AaHR0cHM6Ly9zdG9yYWdlLmdvb2dsZWFwaXMuY29tL3plbm4tdXNlci11cGxvYWQvYXZhdGFyLzAyZTRkOGIzNGQuanBlZw%3D%3D%252Cr_max%252Cw_90%252Cx_87%252Cy_95%2Fv1627283836%2Fdefault%2Fog-base-w1200-v2.png" alt="「引っ越しするけど会社から歩いて10分圏内ってどこまで？」を調べるサービスをつくりました" 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://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://d.potato4d.me/entry/20201129-frontend-2020/"><span>あとで読む</span> </button> </div> <div class="centerarticle-entry-header"> <h3 class="centerarticle-entry-title"> <a href="https://d.potato4d.me/entry/20201129-frontend-2020/" 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%2Fd.potato4d.me%2Fentry%2F20201129-frontend-2020%2F" alt="">2020年のフロントエンドエンジニアの技術スタックの一例 </a> </h3> <ul class="centerarticle-entry-data"> <li> <span class="centerarticle-users"> <a href="/entry/s/d.potato4d.me/entry/20201129-frontend-2020/" class="js-keyboard-entry-page-openable" title="2020年のフロントエンドエンジニアの技術スタックの一例 (553 ブックマーク)" data-gtm-click-label="entry-search-result-item-users"> 553 users </a> </span> </li> <li> <a href="/site/d.potato4d.me/" title="『d.potato4d.me』の新着エントリー" data-gtm-click-label="entry-search-result-item-site-search-url"> d.potato4d.me </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/11/29</span></li> </ul> </div> <div class="centerarticle-entry-contents has-image"> <div class="centerarticle-entry-item"> <p class="centerarticle-entry-summary">年の瀬なので、私自身が今年利用した技術をベースに技術スタックをまとめてみようと思います。とはいえ Web Standard といった広い対象から、フレームワークやライブラリまで、粒度の違うものを全て言及するのは無理があるというもの。特に強く言及できるものは個別で説明しつつ、最後に利用する機会がなかったものも最後に記載する形で。以下常体。追記: マイナー企業のようなので一応書いておきますが、筆者は本業ではLINE株式会社という組織でいわゆるエンジニアリングマネージャーと言われるような業務とその採用に関わる仕事をしています。利用した技術一覧 HTML/CSS/JS みたいなことを書いてるとキリがないので、独断と偏見で区分けして適宜漉いています。特に利用する機会が多かったものは太字でピックアップ。 Frontend Language/Platform TypeScript JavaScr</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/%E9%96%8B%E7%99%BA" 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> <li><a href="/q/javascript" data-gtm-click-label="entry-search-result-item-tag">javascript</a></li> <li><a href="/q/firebase" data-gtm-click-label="entry-search-result-item-tag">firebase</a></li> <li><a href="/q/node" data-gtm-click-label="entry-search-result-item-tag">node</a></li> <li><a href="/q/development" data-gtm-click-label="entry-search-result-item-tag">development</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://d.potato4d.me/entry/20201129-frontend-2020/"> <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://d.potato4d.me/entry/20201129-frontend-2020/" class="centerarticle-entry-image" target="_blank" rel="noopener"> <img src="https://cdn-ak-scissors.b.st-hatena.com/image/square/f52b06c3d7f4fe330575799f00f2f094201a5dc4/height=288;version=1;width=512/https%3A%2F%2Fd.potato4d.me%2Fstatic%2Fopengraph.png" alt="2020年のフロントエンドエンジニアの技術スタックの一例" 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/take77/articles/0f5abf4fc0691a"><span>あとで読む</span> </button> </div> <div class="centerarticle-entry-header"> <h3 class="centerarticle-entry-title"> <a href="https://zenn.dev/take77/articles/0f5abf4fc0691a" 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%2Ftake77%2Farticles%2F0f5abf4fc0691a" alt="">フロント開発を炎上させてしまった話 </a> </h3> <ul class="centerarticle-entry-data"> <li> <span class="centerarticle-users"> <a href="/entry/s/zenn.dev/take77/articles/0f5abf4fc0691a" class="js-keyboard-entry-page-openable" title="フロント開発を炎上させてしまった話 (530 ブックマーク)" data-gtm-click-label="entry-search-result-item-users"> 530 users </a> </span> </li> <li> <a href="/site/zenn.dev/take77" title="『zenn.dev/take77』の新着エントリー" data-gtm-click-label="entry-search-result-item-site-search-url"> zenn.dev/take77 </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/23</span></li> </ul> </div> <div class="centerarticle-entry-contents has-image"> <div class="centerarticle-entry-item"> <p class="centerarticle-entry-summary">はじめにお久しぶりです、皆様のサンドバックが帰ってまいりました。投稿ができていない期間、Nuxtにボコボコにされて裸足で逃げ出し、逃げた先のReactにも強烈な左カウンターをお見舞いされました。本来であれば、このような場所に投稿することすらはばかられる内容ですが、敢えて書きましょう。私はフロント開発を炎上させた愚か者です。なぜ今懺悔するのか Twitterでこんな投稿を見ました。確かに、実務で得られる経験は、とても大きく得難いものです。当然、ご迷惑をおかけしてしまうことは、だれであろうとあるでしょう。ただし、その「ご迷惑」の大きさについて、我々は知っておかなくてはなりません。見えている地雷を踏んでしまうようなモノ好きもいないでしょう。特に、この手の地雷は強力ですからね。塵となって吹き飛んだ私の命が、新たな浅瀬の民の糧となることを祈っています。具体的に何が起こったのか</p> <ul class="entrysearch-entry-tags"> <li><a href="/q/%E9%96%8B%E7%99%BA" data-gtm-click-label="entry-search-result-item-tag">開発</a></li> <li><a href="/q/%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%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/%E3%83%95%E3%83%AD%E3%83%B3%E3%83%88%E3%82%A8%E3%83%B3%E3%83%89" data-gtm-click-label="entry-search-result-item-tag">フロントエンド</a></li> <li><a href="/q/%E7%82%8E%E4%B8%8A" 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> <li><a href="/q/Vue" data-gtm-click-label="entry-search-result-item-tag">Vue</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/development" data-gtm-click-label="entry-search-result-item-tag">development</a></li> </ul> <div class="following-bookmarks-container js-following-bookmarks-container" data-entry-url="https://zenn.dev/take77/articles/0f5abf4fc0691a"> <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/take77/articles/0f5abf4fc0691a" class="centerarticle-entry-image" target="_blank" rel="noopener"> <img src="https://cdn-ak-scissors.b.st-hatena.com/image/square/91fc2ce3431fa6c0d02061c69335458f3929546f/height=288;version=1;width=512/https%3A%2F%2Fres.cloudinary.com%2Fzenn%2Fimage%2Fupload%2Fs--DM4xDAtE--%2Fc_fit%252Cg_north_west%252Cl_text%3Anotosansjp-medium.otf_55%3A%2525E3%252583%252595%2525E3%252583%2525AD%2525E3%252583%2525B3%2525E3%252583%252588%2525E9%252596%25258B%2525E7%252599%2525BA%2525E3%252582%252592%2525E7%252582%25258E%2525E4%2525B8%25258A%2525E3%252581%252595%2525E3%252581%25259B%2525E3%252581%2525A6%2525E3%252581%252597%2525E3%252581%2525BE%2525E3%252581%2525A3%2525E3%252581%25259F%2525E8%2525A9%2525B1%252Cw_1010%252Cx_90%252Cy_100%2Fg_south_west%252Cl_text%3Anotosansjp-medium.otf_37%3Atake77%252Cx_203%252Cy_121%2Fg_south_west%252Ch_90%252Cl_fetch%3AaHR0cHM6Ly9saDMuZ29vZ2xldXNlcmNvbnRlbnQuY29tL2EtL0FPaDE0R2hXbHVPMm5lLXF0dnd4WkNVN2x5VVFMcF9jcGJsdTNDOFlvX2paPXM5Ni1j%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://feb19.jp/blog/20220904_jqueryreactvue"><span>あとで読む</span> </button> </div> <div class="centerarticle-entry-header"> <h3 class="centerarticle-entry-title"> <a href="https://feb19.jp/blog/20220904_jqueryreactvue" 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%2Ffeb19.jp%2Fblog%2F20220904_jqueryreactvue" alt="">ウェブ制作で React(Next) や Vue(Nuxt)、jQuery が最近どれぐらい使われているのか調べてみた - feb19 </a> </h3> <ul class="centerarticle-entry-data"> <li> <span class="centerarticle-users"> <a href="/entry/s/feb19.jp/blog/20220904_jqueryreactvue" class="js-keyboard-entry-page-openable" title="ウェブ制作で React(Next) や Vue(Nuxt)、jQuery が最近どれぐらい使われているのか調べてみた - feb19 (527 ブックマーク)" data-gtm-click-label="entry-search-result-item-users"> 527 users </a> </span> </li> <li> <a href="/site/feb19.jp/" title="『feb19.jp』の新着エントリー" data-gtm-click-label="entry-search-result-item-site-search-url"> feb19.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/09/05</span></li> </ul> </div> <div class="centerarticle-entry-contents has-image"> <div class="centerarticle-entry-item"> <p class="centerarticle-entry-summary">ウェブ制作で React(Next) や Vue(Nuxt)、jQuery が最近どれぐらい使われているのか調べてみたdate2022.9.4(Sun.)tagsweb developmentFrontendJavaScript ウェブアプリケーション開発で React や Vue を使うのはよくある話かなと思うのですが、マーケティングや広報活動など広告クリエイティブ系のウェブサイト制作ではどれぐらい使われているのかなと思い、暇つぶしにリサーチしてみました。調査方法母集団ウェブギャラリーサイトをいくつか見て比較的国内系のセレクトが多そうな https://io3000.com/ さんから 2022 年に紹介されている 175 件と、ウェブサイトのアワードサイトとして有名な https://www.awwwards.com/websites/ さんで 2022.8 以降に Winner と</p> <ul class="entrysearch-entry-tags"> <li><a href="/q/jquery" data-gtm-click-label="entry-search-result-item-tag">jquery</a></li> <li><a href="/q/%E3%81%82%E3%81%A8%E3%81%A7%E8%AA%AD%E3%82%80" data-gtm-click-label="entry-search-result-item-tag">あとで読む</a></li> <li><a href="/q/react" data-gtm-click-label="entry-search-result-item-tag">react</a></li> <li><a href="/q/web%E5%88%B6%E4%BD%9C" 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/%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/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/frontend" data-gtm-click-label="entry-search-result-item-tag">frontend</a></li> <li><a href="/q/web" data-gtm-click-label="entry-search-result-item-tag">web</a></li> </ul> <div class="following-bookmarks-container js-following-bookmarks-container" data-entry-url="https://feb19.jp/blog/20220904_jqueryreactvue"> <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://feb19.jp/blog/20220904_jqueryreactvue" class="centerarticle-entry-image" target="_blank" rel="noopener"> <img src="https://cdn-ak-scissors.b.st-hatena.com/image/square/8b06a0e0bcc0e330870fc6b8f94be7f8d56f7081/height=288;version=1;width=512/https%3A%2F%2Ffeb19.jp%2Fimages%2Fblog%2F20220904_jqueryreactvue%2Fcover.png" alt="ウェブ制作で React(Next) や Vue(Nuxt)、jQuery が最近どれぐらい使われているのか調べてみた - feb19" 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://lealog.hateblo.jp/entry/2022/11/02/102525"><span>あとで読む</span> </button> </div> <div class="centerarticle-entry-header"> <h3 class="centerarticle-entry-title"> <a href="https://lealog.hateblo.jp/entry/2022/11/02/102525" 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%2Flealog.hateblo.jp%2Fentry%2F2022%2F11%2F02%2F102525" alt="">最近のフロントエンドフレームワークに対する認識とお気持ちの整理 - console.lealog(); </a> </h3> <ul class="centerarticle-entry-data"> <li> <span class="centerarticle-users"> <a href="/entry/s/lealog.hateblo.jp/entry/2022/11/02/102525" class="js-keyboard-entry-page-openable" title="最近のフロントエンドフレームワークに対する認識とお気持ちの整理 - console.lealog(); (515 ブックマーク)" data-gtm-click-label="entry-search-result-item-users"> 515 users </a> </span> </li> <li> <a href="/site/lealog.hateblo.jp/" title="『lealog.hateblo.jp』の新着エントリー" data-gtm-click-label="entry-search-result-item-site-search-url"> lealog.hateblo.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/11/02</span></li> </ul> </div> <div class="centerarticle-entry-contents has-image"> <div class="centerarticle-entry-item"> <p class="centerarticle-entry-summary">久しぶりに、いわゆるポエムを。新規・運用ヘルプを問わず、受託や副業でよくフロントエンドをやってるWeb屋の見解、そして手札のお悩み。この先、また技術選定する際なんかにも参考になるかと思ったので。 React 「いまフロントエンドやるなら最初に覚えるべき！」は、もう過去の話かなーと個人的には思ってる。 Reactは`UI = fn(state)`なのが良い！とか言われるけど、あなたが必要としてるのは`UI = Component(props)`かもよって。一昔前までは、たしかにあらゆる面で頭一つ抜けてる印象はあったけど、今はそうでもないか、その差はだいぶ埋まってきてると思ってる。（もちろん先行者利益みたいなところで、エコシステムはまだまだ優位な差があるかもしれんけど、それもあまり実感できたことはないし、いまからはじめる人はそんなんで困らんやろうし）原初の時代からReactな案件をそれ</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%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> <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/Svelte" data-gtm-click-label="entry-search-result-item-tag">Svelte</a></li> <li><a href="/q/Vue" data-gtm-click-label="entry-search-result-item-tag">Vue</a></li> <li><a href="/q/API" data-gtm-click-label="entry-search-result-item-tag">API</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/Remix" data-gtm-click-label="entry-search-result-item-tag">Remix</a></li> </ul> <div class="following-bookmarks-container js-following-bookmarks-container" data-entry-url="https://lealog.hateblo.jp/entry/2022/11/02/102525"> <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://lealog.hateblo.jp/entry/2022/11/02/102525" class="centerarticle-entry-image" target="_blank" rel="noopener"> <img src="https://cdn-ak-scissors.b.st-hatena.com/image/square/5a018cc6c7a2451fc1890dc15dde707f025c26e4/height=288;version=1;width=512/https%3A%2F%2Fogimage.blog.st-hatena.com%2F13208692334729901128%2F4207112889932748483%2F1667352396" alt="最近のフロントエンドフレームワークに対する認識とお気持ちの整理 - console.lealog();" 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/fruitriin/items/3249bb24d60932bb42ee"><span>あとで読む</span> </button> </div> <div class="centerarticle-entry-header"> <h3 class="centerarticle-entry-title"> <a href="https://qiita.com/fruitriin/items/3249bb24d60932bb42ee" 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%2Ffruitriin%2Fitems%2F3249bb24d60932bb42ee" alt="">今からVue.jsを始める人のための「知るのを後回しにしてよい」n個のこと - Qiita </a> </h3> <ul class="centerarticle-entry-data"> <li> <span class="centerarticle-users"> <a href="/entry/s/qiita.com/fruitriin/items/3249bb24d60932bb42ee" class="js-keyboard-entry-page-openable" title="今からVue.jsを始める人のための「知るのを後回しにしてよい」n個のこと - Qiita (509 ブックマーク)" data-gtm-click-label="entry-search-result-item-users"> 509 users </a> </span> </li> <li> <a href="/site/qiita.com/fruitriin" title="『qiita.com/fruitriin』の新着エントリー" data-gtm-click-label="entry-search-result-item-site-search-url"> qiita.com/fruitriin </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/03/07</span></li> </ul> </div> <div class="centerarticle-entry-contents has-image"> <div class="centerarticle-entry-item"> <p class="centerarticle-entry-summary">Deleted articles cannot be recovered. Draft of this article would be also deleted. Are you sure you want to delete this article? ＊この記事は2020年3月頭に書かれている記事ですどうも、Vueはいいぞおねーさん(自称)です。 Vue.jsは私に言わせるととてもよいフロントエンドフレームワークであり、その理由の一つにプログレッシブフレームワークである(段階的に利用する機能を増やしていくスタイルにマッチしている)ものとして、フロントエンド初学者の皆さんにもおすすめしたい代物です。しかし、現在までに様々なプラクティスが考案されたがゆえに、「最初からベストな方法で始めたい」という思いから一度にたくさんのことに挑戦してしまいたくなりがちです。そしてそれはプログレッシ</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/javascript" data-gtm-click-label="entry-search-result-item-tag">javascript</a></li> <li><a href="/q/NuxtJS" data-gtm-click-label="entry-search-result-item-tag">NuxtJS</a></li> <li><a href="/q/Vuex" data-gtm-click-label="entry-search-result-item-tag">Vuex</a></li> <li><a href="/q/Qiita" data-gtm-click-label="entry-search-result-item-tag">Qiita</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/Nuxt.js" data-gtm-click-label="entry-search-result-item-tag">Nuxt.js</a></li> <li><a href="/q/study" data-gtm-click-label="entry-search-result-item-tag">study</a></li> </ul> <div class="following-bookmarks-container js-following-bookmarks-container" data-entry-url="https://qiita.com/fruitriin/items/3249bb24d60932bb42ee"> <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/fruitriin/items/3249bb24d60932bb42ee" class="centerarticle-entry-image" target="_blank" rel="noopener"> <img src="https://cdn-ak-scissors.b.st-hatena.com/image/square/a94863bb53ecc5e01ac4d14f8e7a3dcb5bf23ca3/height=288;version=1;width=512/https%3A%2F%2Fqiita-user-contents.imgix.net%2Fhttps%253A%252F%252Fcdn.qiita.com%252Fassets%252Fpublic%252Farticle-ogp-background-412672c5f0600ab9a64263b751f1bc81.png%3Fixlib%3Drb-4.0.0%26w%3D1200%26mark64%3DaHR0cHM6Ly9xaWl0YS11c2VyLWNvbnRlbnRzLmltZ2l4Lm5ldC9-dGV4dD9peGxpYj1yYi00LjAuMCZ3PTk3MiZoPTM3OCZ0eHQ9JUU0JUJCJThBJUUzJTgxJThCJUUzJTgyJTg5VnVlLmpzJUUzJTgyJTkyJUU1JUE3JThCJUUzJTgyJTgxJUUzJTgyJThCJUU0JUJBJUJBJUUzJTgxJUFFJUUzJTgxJTlGJUUzJTgyJTgxJUUzJTgxJUFFJUUzJTgwJThDJUU3JTlGJUE1JUUzJTgyJThCJUUzJTgxJUFFJUUzJTgyJTkyJUU1JUJFJThDJUU1JTlCJTlFJUUzJTgxJTk3JUUzJTgxJUFCJUUzJTgxJTk3JUUzJTgxJUE2JUUzJTgyJTg4JUUzJTgxJTg0JUUzJTgwJThEbiVFNSU4MCU4QiVFMyU4MSVBRSVFMyU4MSU5MyVFMyU4MSVBOCZ0eHQtYWxpZ249bGVmdCUyQ3RvcCZ0eHQtY29sb3I9JTIzMUUyMTIxJnR4dC1mb250PUhpcmFnaW5vJTIwU2FucyUyMFc2JnR4dC1zaXplPTU2JnM9MjQxOGU1OWZiMDBmZDAwYmQ5OTViZTg4ZDc3ODhlOTU%26mark-x%3D142%26mark-y%3D57%26blend64%3DaHR0cHM6Ly9xaWl0YS11c2VyLWNvbnRlbnRzLmltZ2l4Lm5ldC9-dGV4dD9peGxpYj1yYi00LjAuMCZoPTc2Jnc9NzcwJnR4dD0lNDBmcnVpdHJpaW4mdHh0LWNvbG9yPSUyMzFFMjEyMSZ0eHQtZm9udD1IaXJhZ2lubyUyMFNhbnMlMjBXNiZ0eHQtc2l6ZT0zNiZ0eHQtYWxpZ249bGVmdCUyQ3RvcCZzPTg2ODIyNjE3ODY1MjYwMTIxYjliOTFiNTFiOTkyMGM1%26blend-x%3D142%26blend-y%3D436%26blend-mode%3Dnormal%26txt64%3DaW4g5qCq5byP5Lya56S-44K544K_44OH44Kj44K544OI%26txt-width%3D770%26txt-clip%3Dend%252Cellipsis%26txt-color%3D%25231E2121%26txt-font%3DHiragino%2520Sans%2520W6%26txt-size%3D36%26txt-x%3D156%26txt-y%3D536%26s%3Df579f809b83577c35613807230cee1c4" alt="今からVue.jsを始める人のための「知るのを後回しにしてよい」n個のこと - 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://sli.dev/"><span>あとで読む</span> </button> </div> <div class="centerarticle-entry-header"> <h3 class="centerarticle-entry-title"> <a href="https://sli.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%2Fsli.dev%2F" alt="">Slidev </a> </h3> <ul class="centerarticle-entry-data"> <li> <span class="centerarticle-users"> <a href="/entry/s/sli.dev/" class="js-keyboard-entry-page-openable" title="Slidev (469 ブックマーク)" data-gtm-click-label="entry-search-result-item-users"> 469 users </a> </span> </li> <li> <a href="/site/sli.dev/" title="『sli.dev』の新着エントリー" data-gtm-click-label="entry-search-result-item-site-search-url"> sli.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/05/07</span></li> </ul> </div> <div class="centerarticle-entry-contents has-image"> <div class="centerarticle-entry-item"> <p class="centerarticle-entry-summary">Presentation slides for developers</p> <ul class="entrysearch-entry-tags"> <li><a href="/q/markdown" data-gtm-click-label="entry-search-result-item-tag">markdown</a></li> <li><a href="/q/slide" data-gtm-click-label="entry-search-result-item-tag">slide</a></li> <li><a href="/q/%E3%83%97%E3%83%AC%E3%82%BC%E3%83%B3" data-gtm-click-label="entry-search-result-item-tag">プレゼン</a></li> <li><a href="/q/%E3%83%97%E3%83%AC%E3%82%BC%E3%83%B3%E3%83%86%E3%83%BC%E3%82%B7%E3%83%A7%E3%83%B3" data-gtm-click-label="entry-search-result-item-tag">プレゼンテーション</a></li> <li><a href="/q/presentation" data-gtm-click-label="entry-search-result-item-tag">presentation</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/tool" data-gtm-click-label="entry-search-result-item-tag">tool</a></li> <li><a href="/q/%E3%82%B9%E3%83%A9%E3%82%A4%E3%83%89" data-gtm-click-label="entry-search-result-item-tag">スライド</a></li> <li><a href="/q/slidev" data-gtm-click-label="entry-search-result-item-tag">slidev</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://sli.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://sli.dev/" class="centerarticle-entry-image" target="_blank" rel="noopener"> <img src="https://cdn-ak-scissors.b.st-hatena.com/image/square/9f8f67afac624c5929b684c62a5b567e52a3f681/height=288;version=1;width=512/https%3A%2F%2Fsli.dev%2Fog-image.png" alt="Slidev" data-gtm-click-label="entry-search-result-item-image"> </a> </div> </div> </div> </li> <li class="bookmark-item js-user-bookmark-item js-keyboard-selectable-item"> <div class="centerarticle-entry is-image-entry-unit"> <div class="js-bookmark-stock-button is-hidden"> <button class="js-bookmark-stock-button-ready readlater-button" data-gtm-click-label="entry-search-result-item-stock-button" title="あとで読む" aria-label="あとで読む" tabindex="0" type="button" data-href="https://logmi.jp/main/technology/323856"><span>あとで読む</span> </button> </div> <div class="centerarticle-entry-header"> <h3 class="centerarticle-entry-title"> <a href="https://logmi.jp/main/technology/323856" class="js-clickable-link js-keyboard-openable" target="_blank" rel="noopener" data-gtm-click-label="entry-search-result-item-title"> <img class="centerarticle-entry-favicon" src="https://cdn-ak2.favicon.st-hatena.com/64?url=https%3A%2F%2Flogmi.jp%2Fmain%2Ftechnology%2F323856" alt="">「Angular」「React」「Vue」の3大フレームワークに集約　ICSの代表が教える「フロントエンド技術」のトレンド | ログミーBusiness </a> </h3> <ul class="centerarticle-entry-data"> <li> <span class="centerarticle-users"> <a href="/entry/s/logmi.jp/main/technology/323856" class="js-keyboard-entry-page-openable" title="「Angular」「React」「Vue」の3大フレームワークに集約　ICSの代表が教える「フロントエンド技術」のトレンド | ログミーBusiness (458 ブックマーク)" data-gtm-click-label="entry-search-result-item-users"> 458 users </a> </span> </li> <li> <a href="/site/logmi.jp/" title="『logmi.jp』の新着エントリー" data-gtm-click-label="entry-search-result-item-site-search-url"> logmi.jp </a> </li> <li> <a href="/hotentry/it" data-gtm-click-label="entry-search-result-item-category">テクノロジー</a> </li> <li><span class="entry-contents-date">2021/01/26</span></li> </ul> </div> <div class="centerarticle-entry-contents has-image"> <div class="centerarticle-entry-item"> <p class="centerarticle-entry-summary">スピーカー自己紹介、『JavaScript コードレシピ集』を出版池田泰延氏（以下、池田）：みなさんよろしくお願いします。ICSの話として、私と鹿野の2名で発表します。HTMLとかCSSとかJavaScriptとか、フロントエンドまわりの最新を説明していきたいと思います。では始めていきましょう！ます自己紹介します。ICSの池田と言います。株式会社ICSの代表をやっています。これはオフィスの写真でして、南麻布にあるのですが、こんなところで仕事をやっています。今はこの状況下なので、会社にはほとんど誰も行っていませんが、こんなところでやっていました。 JavaScriptに関して2年ほど前に『JavaScript コードレシピ集』という本を出しています。この本はまだ役に立つ内容もあるかなと思いますので、もし書店で見かけましたらぜひご購入を検討ください。宣伝でした。 Webの劇的な変化は少なく</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/react" data-gtm-click-label="entry-search-result-item-tag">react</a></li> <li><a href="/q/Angular" data-gtm-click-label="entry-search-result-item-tag">Angular</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/%E6%8A%80%E8%A1%93" 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/Vue.js" data-gtm-click-label="entry-search-result-item-tag">Vue.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://logmi.jp/main/technology/323856"> <ul class="following-bookmarks js-following-bookmarks"></ul> <script type="text/x-template" id="template-following-bookmark"> <li> <a href="{{ anchor_path }}" class="following-bookmark-link" data-gtm-label="entry-info-followingBookmarks"> <img src="{{ profile_image_url }}" alt="{{ user_name }}" class="following-bookmark-icon"> </a> <span class="following-bookmark-popup"> <span class="following-bookmark-username">{{ user_name }}</span><span class="following-bookmark-timestamp">{{ created }}</span> <span class="following-bookmark-text"> {{ #comment }}<span class="following-bookmark-comment">{{ comment }}</span>{{ /comment }} <ul class="following-bookmark-tags">{{ #tags }}<li>{{ label }}</li>{{ /tags }}</ul> </span> </span> </li> </script> </div> </div> <div class="centerarticle-entry-image-wrapper"> <a href="https://logmi.jp/main/technology/323856" class="centerarticle-entry-image" target="_blank" rel="noopener"> <img src="https://cdn-ak-scissors.b.st-hatena.com/image/square/5bbe1b16cc7d9b4d73f43c4b704b889548c4bf56/height=288;version=1;width=512/https%3A%2F%2Fimages.logmi.jp%2Fmedia%2Farticle%2F323856%2Fimages%2FFbBcKKPHWU7cUptwBnNBPV.png" alt="「Angular」「React」「Vue」の3大フレームワークに集約　ICSの代表が教える「フロントエンド技術」のトレンド | ログミーBusiness" data-gtm-click-label="entry-search-result-item-image"> </a> </div> </div> </div> </li> <li class="bookmark-item js-user-bookmark-item js-keyboard-selectable-item"> <div class="centerarticle-entry is-image-entry-unit"> <div class="js-bookmark-stock-button is-hidden"> <button class="js-bookmark-stock-button-ready readlater-button" data-gtm-click-label="entry-search-result-item-stock-button" title="あとで読む" aria-label="あとで読む" tabindex="0" type="button" data-href="https://qiita.com/irico/items/33744e15a4e0ca52d6bc"><span>あとで読む</span> </button> </div> <div class="centerarticle-entry-header"> <h3 class="centerarticle-entry-title"> <a href="https://qiita.com/irico/items/33744e15a4e0ca52d6bc" 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%2Firico%2Fitems%2F33744e15a4e0ca52d6bc" alt="">TypeScript学習ロードマップ - Qiita </a> </h3> <ul class="centerarticle-entry-data"> <li> <span class="centerarticle-users"> <a href="/entry/s/qiita.com/irico/items/33744e15a4e0ca52d6bc" class="js-keyboard-entry-page-openable" title="TypeScript学習ロードマップ - Qiita (443 ブックマーク)" data-gtm-click-label="entry-search-result-item-users"> 443 users </a> </span> </li> <li> <a href="/site/qiita.com/irico" title="『qiita.com/irico』の新着エントリー" data-gtm-click-label="entry-search-result-item-site-search-url"> qiita.com/irico </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/08/17</span></li> </ul> </div> <div class="centerarticle-entry-contents has-image"> <div class="centerarticle-entry-item"> <p class="centerarticle-entry-summary">Deleted articles cannot be recovered. Draft of this article would be also deleted. Are you sure you want to delete this article? TypeScript全然わかんない... という状態から、プロジェクトに導入できるまでになんとかなったので、学習の参考になったものなどをまとめて学習ロードマップを作成いたしました。私自身もまだまだのレベルですが、これからTypeScriptを勉強したい!という方の道しるべになれば幸いです Level 0: TypeScriptってなんぞや？まず学習する前に、その対象がなんなのか、を見極める作業です。 TypeScriptは altJS の１つです。 JSは元々大規模なコードを組むには不向きな設計になっているので、 altJSという</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/%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/%E5%AD%A6%E7%BF%92" 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/React" data-gtm-click-label="entry-search-result-item-tag">React</a></li> <li><a href="/q/qiita" data-gtm-click-label="entry-search-result-item-tag">qiita</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/%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> </ul> <div class="following-bookmarks-container js-following-bookmarks-container" data-entry-url="https://qiita.com/irico/items/33744e15a4e0ca52d6bc"> <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/irico/items/33744e15a4e0ca52d6bc" class="centerarticle-entry-image" target="_blank" rel="noopener"> <img src="https://cdn-ak-scissors.b.st-hatena.com/image/square/d26900157c1a937e3cd6ca0ce6b542c0e7a39716/height=288;version=1;width=512/https%3A%2F%2Fqiita-user-contents.imgix.net%2Fhttps%253A%252F%252Fcdn.qiita.com%252Fassets%252Fpublic%252Farticle-ogp-background-412672c5f0600ab9a64263b751f1bc81.png%3Fixlib%3Drb-4.0.0%26w%3D1200%26mark64%3DaHR0cHM6Ly9xaWl0YS11c2VyLWNvbnRlbnRzLmltZ2l4Lm5ldC9-dGV4dD9peGxpYj1yYi00LjAuMCZ3PTk3MiZoPTM3OCZ0eHQ9VHlwZVNjcmlwdCVFNSVBRCVBNiVFNyVCRiU5MiVFMyU4MyVBRCVFMyU4MyVCQyVFMyU4MyU4OSVFMyU4MyU5RSVFMyU4MyU4MyVFMyU4MyU5NyZ0eHQtYWxpZ249bGVmdCUyQ3RvcCZ0eHQtY29sb3I9JTIzMUUyMTIxJnR4dC1mb250PUhpcmFnaW5vJTIwU2FucyUyMFc2JnR4dC1zaXplPTU2JnM9NzdlYTkyNmZjOTI2NDJlNmM2NmM5MDFiYzcwNzk3MTQ%26mark-x%3D142%26mark-y%3D57%26blend64%3DaHR0cHM6Ly9xaWl0YS11c2VyLWNvbnRlbnRzLmltZ2l4Lm5ldC9-dGV4dD9peGxpYj1yYi00LjAuMCZoPTc2Jnc9NzcwJnR4dD0lNDBpcmljbyZ0eHQtY29sb3I9JTIzMUUyMTIxJnR4dC1mb250PUhpcmFnaW5vJTIwU2FucyUyMFc2JnR4dC1zaXplPTM2JnR4dC1hbGlnbj1sZWZ0JTJDdG9wJnM9ZDE2ZDgzNWI2ZTA0YmZjMDQyNTcwMDdhMDczOTQ3YWQ%26blend-x%3D142%26blend-y%3D436%26blend-mode%3Dnormal%26txt64%3DaW4g5qCq5byP5Lya56S-V2l6%26txt-width%3D770%26txt-clip%3Dend%252Cellipsis%26txt-color%3D%25231E2121%26txt-font%3DHiragino%2520Sans%2520W6%26txt-size%3D36%26txt-x%3D156%26txt-y%3D536%26s%3D3bf3021d5f8c8eb91ee342aef634fbc5" alt="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.plaid.co.jp/frontend-performance-contest-in-plaid"><span>あとで読む</span> </button> </div> <div class="centerarticle-entry-header"> <h3 class="centerarticle-entry-title"> <a href="https://tech.plaid.co.jp/frontend-performance-contest-in-plaid" 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.plaid.co.jp%2Ffrontend-performance-contest-in-plaid" alt="">社内でフロントエンドのパフォーマンスチューニングコンテストを開催した </a> </h3> <ul class="centerarticle-entry-data"> <li> <span class="centerarticle-users"> <a href="/entry/s/tech.plaid.co.jp/frontend-performance-contest-in-plaid" class="js-keyboard-entry-page-openable" title="社内でフロントエンドのパフォーマンスチューニングコンテストを開催した (434 ブックマーク)" data-gtm-click-label="entry-search-result-item-users"> 434 users </a> </span> </li> <li> <a href="/site/tech.plaid.co.jp/" title="『tech.plaid.co.jp』の新着エントリー" data-gtm-click-label="entry-search-result-item-site-search-url"> tech.plaid.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/09/30</span></li> </ul> </div> <div class="centerarticle-entry-contents has-image"> <div class="centerarticle-entry-item"> <p class="centerarticle-entry-summary">フロントエンド/Node.js エンジニアの mizchi です。plaid では新しい分析エンジンのフロントエンド側の技術的な仕様を考えたり、それを実装したりしています。趣味として社内の他のプロダクトのパフォーマンスを勝手に測って、貼り付けていくこともあります。 plaid のエンジニア組織には「組」という制度があって、メインとなるプロダクト以外にも、そのテーマで会社横断で活動するグループがあ</p> <ul class="entrysearch-entry-tags"> <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/%E3%81%82%E3%81%A8%E3%81%A7%E8%AA%AD%E3%82%80" data-gtm-click-label="entry-search-result-item-tag">あとで読む</a></li> <li><a href="/q/javascript" data-gtm-click-label="entry-search-result-item-tag">javascript</a></li> <li><a href="/q/frontend" data-gtm-click-label="entry-search-result-item-tag">frontend</a></li> <li><a href="/q/webpack" data-gtm-click-label="entry-search-result-item-tag">webpack</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/Vue" data-gtm-click-label="entry-search-result-item-tag">Vue</a></li> <li><a href="/q/%E3%83%81%E3%83%A5%E3%83%BC%E3%83%8B%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://tech.plaid.co.jp/frontend-performance-contest-in-plaid"> <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.plaid.co.jp/frontend-performance-contest-in-plaid" class="centerarticle-entry-image" target="_blank" rel="noopener"> <img src="https://cdn-ak-scissors.b.st-hatena.com/image/square/0c7baf29d837c8a5afe3022e32face55cca11866/height=288;version=1;width=512/https%3A%2F%2Fik.imagekit.io%2Fnewt%2F61b151f921640c0018173598%2Ffe729a0d-4139-430b-8c10-8c4a46062fc5%2Fperf.jpg%3Ftr%3Dw-1000%2Ch-1000%2Cc-at_max" 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://fwywd.com/tech/nuxt-to-next"><span>あとで読む</span> </button> </div> <div class="centerarticle-entry-header"> <h3 class="centerarticle-entry-title"> <a href="https://fwywd.com/tech/nuxt-to-next" 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%2Ffwywd.com%2Ftech%2Fnuxt-to-next" alt="">Vue.js & Nuxt.js から React & Next.js へ移行した理由 | fwywd（フュード）powered by キカガク </a> </h3> <ul class="centerarticle-entry-data"> <li> <span class="centerarticle-users"> <a href="/entry/s/fwywd.com/tech/nuxt-to-next" class="js-keyboard-entry-page-openable" title="Vue.js & Nuxt.js から React & Next.js へ移行した理由 | fwywd（フュード）powered by キカガク (432 ブックマーク)" data-gtm-click-label="entry-search-result-item-users"> 432 users </a> </span> </li> <li> <a href="/site/fwywd.com/" title="『fwywd.com』の新着エントリー" data-gtm-click-label="entry-search-result-item-site-search-url"> fwywd.com </a> </li> <li> <a href="/hotentry/it" data-gtm-click-label="entry-search-result-item-category">テクノロジー</a> </li> <li><span class="entry-contents-date">2021/05/25</span></li> </ul> </div> <div class="centerarticle-entry-contents has-image"> <div class="centerarticle-entry-item"> <p class="centerarticle-entry-summary">2021 年から React ベースのフレームワークである Next.js を本格的に学び始めました。昨年 2020 年は Vue.js ベースのフレームワークである Nuxt.js にどっぷりと使った１年であり、昨年リリースしたキカガク (kikagaku.ai) など、本運用に乗せるところまでプロダクト開発チームで学びながら進めていきました。その昨年に１年間もかけて知見を貯めた Vue.js & Nuxt.js を離れて、React & 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/vue.js" data-gtm-click-label="entry-search-result-item-tag">vue.js</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/Next.js" data-gtm-click-label="entry-search-result-item-tag">Next.js</a></li> <li><a href="/q/Vue" data-gtm-click-label="entry-search-result-item-tag">Vue</a></li> <li><a href="/q/nuxt.js" data-gtm-click-label="entry-search-result-item-tag">nuxt.js</a></li> <li><a href="/q/%E9%96%8B%E7%99%BA" data-gtm-click-label="entry-search-result-item-tag">開発</a></li> <li><a href="/q/Firebase" data-gtm-click-label="entry-search-result-item-tag">Firebase</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://fwywd.com/tech/nuxt-to-next"> <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://fwywd.com/tech/nuxt-to-next" class="centerarticle-entry-image" target="_blank" rel="noopener"> <img src="https://cdn-ak-scissors.b.st-hatena.com/image/square/f9d478e4c57a8f63fe53474ab051e5e789e1d2c7/height=288;version=1;width=512/https%3A%2F%2Ffwywd.com%2Fimg%2Fpages%2Ftech%2Fnuxt-to-next%2Fogp.png" alt="Vue.js & Nuxt.js から React & Next.js へ移行した理由 | fwywd（フュード）powered by キカガク" 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/kahirokunn/items/b4f3ede5b2eb94711880"><span>あとで読む</span> </button> </div> <div class="centerarticle-entry-header"> <h3 class="centerarticle-entry-title"> <a href="https://qiita.com/kahirokunn/items/b4f3ede5b2eb94711880" 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%2Fkahirokunn%2Fitems%2Fb4f3ede5b2eb94711880" alt="">2020年後半版Vue.jsを使ってる人には必ず知っていてほしいVue.jsの武器とドキュメントに書かれていないコンポーネントやメンテナンスの際に役立つTips - Qiita </a> </h3> <ul class="centerarticle-entry-data"> <li> <span class="centerarticle-users"> <a href="/entry/s/qiita.com/kahirokunn/items/b4f3ede5b2eb94711880" class="js-keyboard-entry-page-openable" title="2020年後半版Vue.jsを使ってる人には必ず知っていてほしいVue.jsの武器とドキュメントに書かれていないコンポーネントやメンテナンスの際に役立つTips - Qiita (426 ブックマーク)" data-gtm-click-label="entry-search-result-item-users"> 426 users </a> </span> </li> <li> <a href="/site/qiita.com/kahirokunn" title="『qiita.com/kahirokunn』の新着エントリー" data-gtm-click-label="entry-search-result-item-site-search-url"> qiita.com/kahirokunn </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/07/16</span></li> </ul> </div> <div class="centerarticle-entry-contents has-image"> <div class="centerarticle-entry-item"> <p class="centerarticle-entry-summary">リポジトリはこちらから見れます. https://github.com/kahirokunn/vue-ts-sample Vue.js + TypeScriptの対応状況は日々改善されています. 以前までは.vueを利用してもVue.extendを利用してコンポーネントを開発する場合はこのシンプルなコードでも型のエラーが出てしまい、TypeScriptでの開発体験はまだまだ改善できるものでした. @vue/composition-apiを利用すればTypeScriptの体験を向上できます. 早速@vue/composition-apiをインストールします. install @vue/composition-api インストール方法はこちらのリポジトリに書いてあります. https://github.com/vuejs/composition-api 一応install後の$ git dif</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/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/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/qiita" data-gtm-click-label="entry-search-result-item-tag">qiita</a></li> <li><a href="/q/GraphQL" data-gtm-click-label="entry-search-result-item-tag">GraphQL</a></li> <li><a href="/q/FrontEnd" data-gtm-click-label="entry-search-result-item-tag">FrontEnd</a></li> <li><a href="/q/https" data-gtm-click-label="entry-search-result-item-tag">https</a></li> <li><a href="/q/%E3%83%89%E3%82%AD%E3%83%A5%E3%83%A1%E3%83%B3%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/kahirokunn/items/b4f3ede5b2eb94711880"> <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/kahirokunn/items/b4f3ede5b2eb94711880" class="centerarticle-entry-image" target="_blank" rel="noopener"> <img src="https://cdn-ak-scissors.b.st-hatena.com/image/square/590653df3a105d7fa7c77d3dfd407050ac0851d0/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%253DaHR0cHM6Ly9xaWl0YS11c2VyLXByb2ZpbGUtaW1hZ2VzLmltZ2l4Lm5ldC9odHRwcyUzQSUyRiUyRnFpaXRhLWltYWdlLXN0b3JlLnMzLmFtYXpvbmF3cy5jb20lMkYwJTJGMTQxNzExJTJGcHJvZmlsZS1pbWFnZXMlMkYxNTQyMTc0MjAyP2l4bGliPXJiLTQuMC4wJmFyPTElM0ExJmZpdD1jcm9wJm1hc2s9ZWxsaXBzZSZmbT1wbmczMiZzPWVjYTFkOGYyNWZjNGQwNGQ4ZGJiMWM2MjZhNTM4NTdh%2526blend-x%253D120%2526blend-y%253D467%2526blend-w%253D82%2526blend-h%253D82%2526blend-mode%253Dnormal%2526s%253Dd36330ec80ab5f06ba3a994ca89bfe4a%3Fixlib%3Drb-4.0.0%26w%3D1200%26fm%3Djpg%26mark64%3DaHR0cHM6Ly9xaWl0YS11c2VyLWNvbnRlbnRzLmltZ2l4Lm5ldC9-dGV4dD9peGxpYj1yYi00LjAuMCZ3PTk2MCZoPTMyNCZ0eHQ9MjAyMCVFNSVCOSVCNCVFNSVCRSU4QyVFNSU4RCU4QSVFNyU4OSU4OFZ1ZS5qcyVFMyU4MiU5MiVFNCVCRCVCRiVFMyU4MSVBMyVFMyU4MSVBNiVFMyU4MiU4QiVFNCVCQSVCQSVFMyU4MSVBQiVFMyU4MSVBRiVFNSVCRiU4NSVFMyU4MSU5QSVFNyU5RiVBNSVFMyU4MSVBMyVFMyU4MSVBNiVFMyU4MSU4NCVFMyU4MSVBNiVFMyU4MSVCQiVFMyU4MSU5NyVFMyU4MSU4NFZ1ZS5qcyVFMyU4MSVBRSVFNiVBRCVBNiVFNSU5OSVBOCVFMyU4MSVBOCVFMyU4MyU4OSVFMyU4MiVBRCVFMyU4MyVBNSVFMyU4MyVBMSVFMyU4MyVCMyVFMyU4MyU4OCVFMyU4MSVBQiVFNiU5QiVCOCVFMyU4MSU4QiVFMyU4MiU4QyVFMyU4MSVBNiVFMyU4MSU4NCVFMyU4MSVBQSVFMiU4MCVBNiZ0eHQtYWxpZ249bGVmdCUyQ3RvcCZ0eHQtY29sb3I9JTIzMUUyMTIxJnR4dC1mb250PUhpcmFnaW5vJTIwU2FucyUyMFc2JnR4dC1zaXplPTU2JnR4dC1wYWQ9MCZzPWIyNDNiM2UyZmFlMWE0ZTViMWEwNTE5ZjM2Y2VlYjU0%26mark-x%3D120%26mark-y%3D112%26blend64%3DaHR0cHM6Ly9xaWl0YS11c2VyLWNvbnRlbnRzLmltZ2l4Lm5ldC9-dGV4dD9peGxpYj1yYi00LjAuMCZ3PTgzOCZoPTU4JnR4dD0lNDBrYWhpcm9rdW5uJnR4dC1jb2xvcj0lMjMxRTIxMjEmdHh0LWZvbnQ9SGlyYWdpbm8lMjBTYW5zJTIwVzYmdHh0LXNpemU9MzYmdHh0LXBhZD0wJnM9ZjBhNGQ0MTdhMjNlYzUxYzcyNmRjYjc4ZTMwZjE0OGI%26blend-x%3D242%26blend-y%3D480%26blend-w%3D838%26blend-h%3D46%26blend-fit%3Dcrop%26blend-crop%3Dleft%252Cbottom%26blend-mode%3Dnormal%26s%3D3b883cb5e05950cfaa3e5aa9a407df60" alt="2020年後半版Vue.jsを使ってる人には必ず知っていてほしいVue.jsの武器とドキュメントに書かれていないコンポーネントやメンテナンスの際に役立つTips - 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://zenn.dev/koduki/articles/c07db4179bb7b86086a1"><span>あとで読む</span> </button> </div> <div class="centerarticle-entry-header"> <h3 class="centerarticle-entry-title"> <a href="https://zenn.dev/koduki/articles/c07db4179bb7b86086a1" 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%2Fkoduki%2Farticles%2Fc07db4179bb7b86086a1" alt="">WASMとRustはVue.js/React.jsを打倒するのか？ - JSへの侵略の歴史 </a> </h3> <ul class="centerarticle-entry-data"> <li> <span class="centerarticle-users"> <a href="/entry/s/zenn.dev/koduki/articles/c07db4179bb7b86086a1" class="js-keyboard-entry-page-openable" title="WASMとRustはVue.js/React.jsを打倒するのか？ - JSへの侵略の歴史 (425 ブックマーク)" data-gtm-click-label="entry-search-result-item-users"> 425 users </a> </span> </li> <li> <a href="/site/zenn.dev/koduki" title="『zenn.dev/koduki』の新着エントリー" data-gtm-click-label="entry-search-result-item-site-search-url"> zenn.dev/koduki </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/11/02</span></li> </ul> </div> <div class="centerarticle-entry-contents has-image"> <div class="centerarticle-entry-item"> <p class="centerarticle-entry-summary">はじめに「Typescriptの次はRustかもしれない」という記事がバズってるのを見かけました。なかなか面白くて、PAとしてのWASMとRustを比較している記事です。ちょうど最近「レガシーおじさん、SPAを始めてみた。そして限界を知る」でも書いた通り最近SPAに手を出してみたのですが、いろいろやろうとするとSSRのためのBackend for Frontend (BFF)等が必要になるとわかり「これJSでやる必要なくない？」とも感じていたのでちょうど良かったです。こういうのを見るとRIAやGWTのように似たアプローチで廃れた技術や、登場が早すぎたMeteor、今も頑張ってるMSのBlazorなど色々頭をよぎります。といわけで歴史を俯瞰する意味でHTML + JavaScriptとそれ以外の技術のせめぎ合いの歴史やMSのBlazorやRustのyewなどWebassemblyを使う</p> <ul class="entrysearch-entry-tags"> <li><a href="/q/rust" data-gtm-click-label="entry-search-result-item-tag">rust</a></li> <li><a href="/q/javascript" data-gtm-click-label="entry-search-result-item-tag">javascript</a></li> <li><a href="/q/WebAssembly" data-gtm-click-label="entry-search-result-item-tag">WebAssembly</a></li> <li><a href="/q/wasm" data-gtm-click-label="entry-search-result-item-tag">wasm</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%AD%B4%E5%8F%B2" 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/react" data-gtm-click-label="entry-search-result-item-tag">react</a></li> <li><a href="/q/HTML" data-gtm-click-label="entry-search-result-item-tag">HTML</a></li> </ul> <div class="following-bookmarks-container js-following-bookmarks-container" data-entry-url="https://zenn.dev/koduki/articles/c07db4179bb7b86086a1"> <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/koduki/articles/c07db4179bb7b86086a1" class="centerarticle-entry-image" target="_blank" rel="noopener"> <img src="https://cdn-ak-scissors.b.st-hatena.com/image/square/4346fa843f75db7dc7bfb6faaf17261729f0324d/height=288;version=1;width=512/https%3A%2F%2Fres.cloudinary.com%2Fzenn%2Fimage%2Fupload%2Fs--42VQzPgX--%2Fc_fit%252Cg_north_west%252Cl_text%3Anotosansjp-medium.otf_55%3AWASM%2525E3%252581%2525A8Rust%2525E3%252581%2525AFVue.js%25252FReact.js%2525E3%252582%252592%2525E6%252589%252593%2525E5%252580%252592%2525E3%252581%252599%2525E3%252582%25258B%2525E3%252581%2525AE%2525E3%252581%25258B%2525EF%2525BC%25259F%252520%252520-%252520JS%2525E3%252581%2525B8%2525E3%252581%2525AE%2525E4%2525BE%2525B5%2525E7%252595%2525A5%2525E3%252581%2525AE%2525E6%2525AD%2525B4%2525E5%25258F%2525B2%252Cw_1010%252Cx_90%252Cy_100%2Fg_south_west%252Cl_text%3Anotosansjp-medium.otf_37%3Akoduki%252Cx_203%252Cy_121%2Fg_south_west%252Ch_90%252Cl_fetch%3AaHR0cHM6Ly9zdG9yYWdlLmdvb2dsZWFwaXMuY29tL3plbm4tdXNlci11cGxvYWQvYXZhdGFyLzM0NmExZDBlNTQuanBlZw%3D%3D%252Cr_max%252Cw_90%252Cx_87%252Cy_95%2Fv1627283836%2Fdefault%2Fog-base-w1200-v2.png" alt="WASMとRustはVue.js/React.jsを打倒するのか？ - 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/coder_ka/articles/275b551d662e35"><span>あとで読む</span> </button> </div> <div class="centerarticle-entry-header"> <h3 class="centerarticle-entry-title"> <a href="https://zenn.dev/coder_ka/articles/275b551d662e35" 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%2Fcoder_ka%2Farticles%2F275b551d662e35" alt="">2021年現在Vueを選択すべきでないと思う理由 </a> </h3> <ul class="centerarticle-entry-data"> <li> <span class="centerarticle-users"> <a href="/entry/s/zenn.dev/coder_ka/articles/275b551d662e35" class="js-keyboard-entry-page-openable" title="2021年現在Vueを選択すべきでないと思う理由 (424 ブックマーク)" data-gtm-click-label="entry-search-result-item-users"> 424 users </a> </span> </li> <li> <a href="/site/zenn.dev/coder_ka" title="『zenn.dev/coder_ka』の新着エントリー" data-gtm-click-label="entry-search-result-item-site-search-url"> zenn.dev/coder_ka </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/23</span></li> </ul> </div> <div class="centerarticle-entry-contents has-image"> <div class="centerarticle-entry-item"> <p class="centerarticle-entry-summary">使ってわかる、Vueへの恨み、つらつらと（随時更新）コンポーネントのローカルスコープでコンポーネントを定義しようとするとJSXが必要 JSXが嫌でReactを使わないならSvelteがあり、SvelteはゼロオーバーヘッドでVueより速い React+JSXと違って、マークアップをJavaScriptの式として扱えないせいで、TypeScriptとの相性も悪い後述するが、コンポーネントのプロパティの型をジェネリックにできないところなどは、これの例にあたる Vueの新しい機能が出て、新しい構文を必要とするたびにIDEのプラグインの対応が必要になる JSXも構文拡張だが、JS関数呼び出しのシンタックスシュガーでしかないので、関数と同じだけの表現力（汎用性）を持ち、ReactのAPI拡張のためにいちいちJSXまで拡張する必要はない JSX無しだと、マークアップ内でアクセスしたいコンポーネント</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/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/react" data-gtm-click-label="entry-search-result-item-tag">react</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/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/%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/%E9%96%8B%E7%99%BA" 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> </ul> <div class="following-bookmarks-container js-following-bookmarks-container" data-entry-url="https://zenn.dev/coder_ka/articles/275b551d662e35"> <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/coder_ka/articles/275b551d662e35" class="centerarticle-entry-image" target="_blank" rel="noopener"> <img src="https://cdn-ak-scissors.b.st-hatena.com/image/square/5b4784b701b52fe4e030d45462c3305eea10024d/height=288;version=1;width=512/https%3A%2F%2Fres.cloudinary.com%2Fzenn%2Fimage%2Fupload%2Fs--ZEh8o-6f--%2Fc_fit%252Cg_north_west%252Cl_text%3Anotosansjp-medium.otf_55%3A2021%2525E5%2525B9%2525B4%2525E7%25258F%2525BE%2525E5%25259C%2525A8Vue%2525E3%252582%252592%2525E9%252581%2525B8%2525E6%25258A%25259E%2525E3%252581%252599%2525E3%252581%2525B9%2525E3%252581%25258D%2525E3%252581%2525A7%2525E3%252581%2525AA%2525E3%252581%252584%2525E3%252581%2525A8%2525E6%252580%25259D%2525E3%252581%252586%2525E7%252590%252586%2525E7%252594%2525B1%252Cw_1010%252Cx_90%252Cy_100%2Fg_south_west%252Cl_text%3Anotosansjp-medium.otf_37%3Aekoda%252Cx_203%252Cy_121%2Fg_south_west%252Ch_90%252Cl_fetch%3AaHR0cHM6Ly9zdG9yYWdlLmdvb2dsZWFwaXMuY29tL3plbm4tdXNlci11cGxvYWQvYXZhdGFyL2JjN2VlNjk3YTEuanBlZw%3D%3D%252Cr_max%252Cw_90%252Cx_87%252Cy_95%2Fv1627283836%2Fdefault%2Fog-base-w1200-v2.png" alt="2021年現在Vueを選択すべきでないと思う理由" 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://coliss.com/articles/build-websites/operation/work/ui-component-gallery-for-developer.html"><span>あとで読む</span> </button> </div> <div class="centerarticle-entry-header"> <h3 class="centerarticle-entry-title"> <a href="https://coliss.com/articles/build-websites/operation/work/ui-component-gallery-for-developer.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%2Fcoliss.com%2Farticles%2Fbuild-websites%2Foperation%2Fwork%2Fui-component-gallery-for-developer.html" alt="">Web制作者はブックマークしておくと便利！各UIコンポーネントのさまざまな実装方法のまとめ -The Component Gallery </a> </h3> <ul class="centerarticle-entry-data"> <li> <span class="centerarticle-users"> <a href="/entry/s/coliss.com/articles/build-websites/operation/work/ui-component-gallery-for-developer.html" class="js-keyboard-entry-page-openable" title="Web制作者はブックマークしておくと便利！各UIコンポーネントのさまざまな実装方法のまとめ -The Component Gallery (417 ブックマーク)" data-gtm-click-label="entry-search-result-item-users"> 417 users </a> </span> </li> <li> <a href="/site/coliss.com/" title="『coliss.com』の新着エントリー" data-gtm-click-label="entry-search-result-item-site-search-url"> coliss.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/11/09</span></li> </ul> </div> <div class="centerarticle-entry-contents has-image"> <div class="centerarticle-entry-item"> <p class="centerarticle-entry-summary">Webサイトやアプリでよく使用される各UIコンポーネントのさまざまな実装方法がまとめられたThe Component Galleryを紹介します。コンポーネントは再利用可能な単一の部品として利用でき、実装するコードや名前の付け方など、Web制作者には非常に勉強になると思います。 The Component Gallery The Component Galleryの特徴 The Component Galleryの利用方法各UIコンポーネントのまとめ The Component Galleryの特徴 The Component Galleryには、実際のデザインシステムで使用されているUIコンポーネントがまとめられています。フロントエンドのデベロッパーとして毎日経験する問題を解決するために作成されました。 The Component Gallery コンポーネントや要素に名前を付けるの</p> <ul class="entrysearch-entry-tags"> <li><a href="/q/ui" data-gtm-click-label="entry-search-result-item-tag">ui</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/css" data-gtm-click-label="entry-search-result-item-tag">css</a></li> <li><a href="/q/web" data-gtm-click-label="entry-search-result-item-tag">web</a></li> <li><a href="/q/web%E3%83%87%E3%82%B6%E3%82%A4%E3%83%B3" 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/%E4%BE%BF%E5%88%A9" data-gtm-click-label="entry-search-result-item-tag">便利</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> <li><a href="/q/web%E3%82%B5%E3%83%BC%E3%83%93%E3%82%B9" data-gtm-click-label="entry-search-result-item-tag">webサービス</a></li> <li><a href="/q/%E3%83%87%E3%82%B6%E3%82%A4%E3%83%B3" 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://coliss.com/articles/build-websites/operation/work/ui-component-gallery-for-developer.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://coliss.com/articles/build-websites/operation/work/ui-component-gallery-for-developer.html" class="centerarticle-entry-image" target="_blank" rel="noopener"> <img src="https://cdn-ak-scissors.b.st-hatena.com/image/square/48440e215dab97956a70fc7bc074869bafd8b5f7/height=288;version=1;width=512/https%3A%2F%2Fcoliss.com%2Fwp-content%2Fuploads-202204%2F2022110901%402x.png" alt="Web制作者はブックマークしておくと便利！各UIコンポーネントのさまざまな実装方法のまとめ -The Component Gallery" 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/javascriptwebpackturbopack.html"><span>あとで読む</span> </button> </div> <div class="centerarticle-entry-header"> <h3 class="centerarticle-entry-title"> <a href="https://www.publickey1.jp/blog/23/javascriptwebpackturbopack.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%2Fjavascriptwebpackturbopack.html" alt="">人気のJavaScriptバンドルツール「webpack」の開発はなぜ終わり、後継として「Turbopack」の開発が始まったのか。開発者がその理由を語る </a> </h3> <ul class="centerarticle-entry-data"> <li> <span class="centerarticle-users"> <a href="/entry/s/www.publickey1.jp/blog/23/javascriptwebpackturbopack.html" class="js-keyboard-entry-page-openable" title="人気のJavaScriptバンドルツール「webpack」の開発はなぜ終わり、後継として「Turbopack」の開発が始まったのか。開発者がその理由を語る (416 ブックマーク)" data-gtm-click-label="entry-search-result-item-users"> 416 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/31</span></li> </ul> </div> <div class="centerarticle-entry-contents has-image"> <div class="centerarticle-entry-item"> <p class="centerarticle-entry-summary">人気のJavaScriptバンドルツール「webpack」の開発はなぜ終わり、後継として「Turbopack」の開発が始まったのか。開発者がその理由を語る複数のJavaScriptやTypeScriptの依存関係などを解決し、コードやフォント、画像などのリソースなどをまとめるバンドルツール（あるいはモジュールバンドラやビルドツールなどとも呼ばれます）は、多数のライブラリやコンポーネントなどを用いてチームで開発するWebアプリケーションの開発には欠かせないツールとなっています。そのバンドルツールの代表がwebpackです。約4万人のITエンジニアによるアンケート結果が示された「State of JavaScript 2022」でもwebpackはGulpやViteなどを抑えて最も人気のあるバンドルツールとなっています。参考：「State of JavaScript 2022」公開。利用</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/%E9%96%8B%E7%99%BA" 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/%E3%83%84%E3%83%BC%E3%83%AB" 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/Node.js" data-gtm-click-label="entry-search-result-item-tag">Node.js</a></li> <li><a href="/q/build" data-gtm-click-label="entry-search-result-item-tag">build</a></li> </ul> <div class="following-bookmarks-container js-following-bookmarks-container" data-entry-url="https://www.publickey1.jp/blog/23/javascriptwebpackturbopack.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/javascriptwebpackturbopack.html" class="centerarticle-entry-image" target="_blank" rel="noopener"> <img src="https://cdn-ak-scissors.b.st-hatena.com/image/square/8511a927d2ae3e3a6ff7a8bee61677edc3aa0e9c/height=288;version=1;width=512/https%3A%2F%2Fwww.publickey1.jp%2F2023%2FTUDDXd4l.jpg" alt="人気のJavaScriptバンドルツール「webpack」の開発はなぜ終わり、後継として「Turbopack」の開発が始まったのか。開発者がその理由を語る" 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://future-architect.github.io/articles/20241111a/"><span>あとで読む</span> </button> </div> <div class="centerarticle-entry-header"> <h3 class="centerarticle-entry-title"> <a href="https://future-architect.github.io/articles/20241111a/" 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%2Ffuture-architect.github.io%2Farticles%2F20241111a%2F" alt="">フロントエンドフレームワークからサーバーにアクセスするパターン | フューチャー技術ブログ </a> </h3> <ul class="centerarticle-entry-data"> <li> <span class="centerarticle-users"> <a href="/entry/s/future-architect.github.io/articles/20241111a/" class="js-keyboard-entry-page-openable" title="フロントエンドフレームワークからサーバーにアクセスするパターン | フューチャー技術ブログ (407 ブックマーク)" data-gtm-click-label="entry-search-result-item-users"> 407 users </a> </span> </li> <li> <a href="/site/future-architect.github.io/" title="『future-architect.github.io』の新着エントリー" data-gtm-click-label="entry-search-result-item-site-search-url"> future-architect.github.io </a> </li> <li> <a href="/hotentry/it" data-gtm-click-label="entry-search-result-item-category">テクノロジー</a> </li> <li><span class="entry-contents-date">2024/11/11</span></li> </ul> </div> <div class="centerarticle-entry-contents has-image"> <div class="centerarticle-entry-item"> <p class="centerarticle-entry-summary">僕が触り始めた頃のウェブフロントエンド開発はデバッガーもなく、ダイナミックHTMLと呼ばれて文字をチカチカさせたりするようなものでした。IE6という超安定ブラウザが出てきたり（Netscape 4.xも7.xも不安定だった）その後jQueryが登場したときは、天使が降臨したように思えたものです。そこから長い年月が経ち、ウェブフロントエンドの比重が大きくなるにつれ、フロントエンドのコードはどんどん複雑化しました。OpenAPIなどのコードジェネレータなども普及した結果、通信というものが隠され、イベントの中でawaitや.then()で呼ばれる何か、みたいな理解をしているメンバーも今後増えていくのではないかという懸念があります。現在ではウェブフロントエンド開発はReactやVueといったフレームワーク上で行われ、イベントというのはそのフレームワークの提供するライフサイクルイベントに対応付け</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/frontend" data-gtm-click-label="entry-search-result-item-tag">frontend</a></li> <li><a href="/q/DOM" data-gtm-click-label="entry-search-result-item-tag">DOM</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/API" data-gtm-click-label="entry-search-result-item-tag">API</a></li> <li><a href="/q/%E3%83%96%E3%83%A9%E3%82%A6%E3%82%B6" 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/%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://future-architect.github.io/articles/20241111a/"> <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://future-architect.github.io/articles/20241111a/" class="centerarticle-entry-image" target="_blank" rel="noopener"> <img src="https://cdn-ak-scissors.b.st-hatena.com/image/square/b9be62291d78e27267f8473dac85bd25513a6a08/height=288;version=1;width=512/https%3A%2F%2Ffuture-architect.github.io%2Fimages%2F20241111a%2Fimage.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://ics.media/entry/200716/"><span>あとで読む</span> </button> </div> <div class="centerarticle-entry-header"> <h3 class="centerarticle-entry-title"> <a href="https://ics.media/entry/200716/" 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%2F200716%2F" alt="">エラーは出ないけど…何か変？？Vue.jsでやりがちな「サイレント・ミス」（ロジック編） - ICS MEDIA </a> </h3> <ul class="centerarticle-entry-data"> <li> <span class="centerarticle-users"> <a href="/entry/s/ics.media/entry/200716/" class="js-keyboard-entry-page-openable" title="エラーは出ないけど…何か変？？Vue.jsでやりがちな「サイレント・ミス」（ロジック編） - ICS MEDIA (405 ブックマーク)" data-gtm-click-label="entry-search-result-item-users"> 405 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">2020/07/16</span></li> </ul> </div> <div class="centerarticle-entry-contents has-image"> <div class="centerarticle-entry-item"> <p class="centerarticle-entry-summary">Vue.jsは初学者にもとても手厚いサポートを提供してくれるフレームワークです。たとえば、以下のコードで「リセット」ボタンを押すと「propsのcountは子コンポーネントから変更すべきではない」とわかりやすくエラーを表示してくれます。 <template> <div class="CountViewComponent"> カウント={{count}} <button @click="reset">リセット</button> </div> </template> <script> export default { props: { // 表示するカウント値 count: { type: Number, default: 3 } }, methods: { // カウントをリセットします reset() { this.count = 0 } } } </script> それでも時として、</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/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/javascript" data-gtm-click-label="entry-search-result-item-tag">javascript</a></li> <li><a href="/q/js" data-gtm-click-label="entry-search-result-item-tag">js</a></li> <li><a href="/q/%E3%82%B3%E3%83%BC%E3%83%89" data-gtm-click-label="entry-search-result-item-tag">コード</a></li> <li><a href="/q/%E3%82%A8%E3%83%A9%E3%83%BC" 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://ics.media/entry/200716/"> <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/200716/" class="centerarticle-entry-image" target="_blank" rel="noopener"> <img src="https://cdn-ak-scissors.b.st-hatena.com/image/square/97de0d674e89ec6c242dffddfa3bb5e7cbdfc0de/height=288;version=1;width=512/https%3A%2F%2Fics.media%2Fentry%2F200716%2Fimages%2Feyecatch.png" alt="エラーは出ないけど…何か変？？Vue.jsでやりがちな「サイレント・ミス」（ロジック編） - 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://zenn.dev/shamokit/articles/44ecb8b708ceae"><span>あとで読む</span> </button> </div> <div class="centerarticle-entry-header"> <h3 class="centerarticle-entry-title"> <a href="https://zenn.dev/shamokit/articles/44ecb8b708ceae" 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%2Fshamokit%2Farticles%2F44ecb8b708ceae" alt="">（基礎編）jQuery使いのエンジニアがReactとNext.jsでWebサイト制作するために最低限押さえておきたいコード </a> </h3> <ul class="centerarticle-entry-data"> <li> <span class="centerarticle-users"> <a href="/entry/s/zenn.dev/shamokit/articles/44ecb8b708ceae" class="js-keyboard-entry-page-openable" title="（基礎編）jQuery使いのエンジニアがReactとNext.jsでWebサイト制作するために最低限押さえておきたいコード (397 ブックマーク)" data-gtm-click-label="entry-search-result-item-users"> 397 users </a> </span> </li> <li> <a href="/site/zenn.dev/shamokit" title="『zenn.dev/shamokit』の新着エントリー" data-gtm-click-label="entry-search-result-item-site-search-url"> zenn.dev/shamokit </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/24</span></li> </ul> </div> <div class="centerarticle-entry-contents has-image"> <div class="centerarticle-entry-item"> <p class="centerarticle-entry-summary">なぜ書いたか筆者もWebサイト制作をそこそこ長くやってきておりいまは業務でVueを書いたりちょっとReactを書いたりSvelteを書いたりしていますが、2年前くらいまではReactやES6の構文すら書いたことがありませんでした。 WordPressでのサイト制作が多く、機能が少ないサイト制作会社ではjQueryで充分なことも多く、恥ずかしながら業務時間外での学習や外部の情報を追うこともしていなかったため、開発系の技術スタックに慣れるのにかなり時間がかかりました。まずはよく使うコードを見て解説しながら答えの一つを示し、よく出てくるコードをざっくり理解して書けるようにすることで、実務でReactを取り入れる取っ掛かりになればいいなぁという思いでこの記事を書いています。続編は多分今月中に書きます。こちらは基礎編です。対象者普段jQueryでWebサイトを制作している生の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/%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/jquery" data-gtm-click-label="entry-search-result-item-tag">jquery</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/js" data-gtm-click-label="entry-search-result-item-tag">js</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/web%E5%88%B6%E4%BD%9C" data-gtm-click-label="entry-search-result-item-tag">web制作</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/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://zenn.dev/shamokit/articles/44ecb8b708ceae"> <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/shamokit/articles/44ecb8b708ceae" class="centerarticle-entry-image" target="_blank" rel="noopener"> <img src="https://cdn-ak-scissors.b.st-hatena.com/image/square/d7e02f0005aaf55979bda8c9cde4ca73c55b9275/height=288;version=1;width=512/https%3A%2F%2Fres.cloudinary.com%2Fzenn%2Fimage%2Fupload%2Fs--mBmeunMS--%2Fc_fit%252Cg_north_west%252Cl_text%3Anotosansjp-medium.otf_55%3A%2525EF%2525BC%252588%2525E5%25259F%2525BA%2525E7%2525A4%25258E%2525E7%2525B7%2525A8%2525EF%2525BC%252589jQuery%2525E4%2525BD%2525BF%2525E3%252581%252584%2525E3%252581%2525AE%2525E3%252582%2525A8%2525E3%252583%2525B3%2525E3%252582%2525B8%2525E3%252583%25258B%2525E3%252582%2525A2%2525E3%252581%25258CReact%2525E3%252581%2525A8Next.js%2525E3%252581%2525A7Web%2525E3%252582%2525B5%2525E3%252582%2525A4%2525E3%252583%252588%2525E5%252588%2525B6%2525E4%2525BD%25259C%2525E3%252581%252599%2525E3%252582%25258B%2525E3%252581%25259F%2525E3%252582%252581%2525E3%252581%2525AB%2525E6%25259C%252580%2525E4%2525BD%25258E%2525E9%252599%252590%2525E6%25258A%2525BC%2525E3%252581%252595%2525E3%252581%252588%2525E3%252581%2525A6%2525E3%252581%25258A%2525E3%252581%25258D%2525E3%252581%25259F...%252Cw_1010%252Cx_90%252Cy_100%2Fg_south_west%252Cl_text%3Anotosansjp-medium.otf_37%3A%2525E3%252581%252597%2525E3%252582%252583%2525E3%252582%252582%2525E3%252581%25258D%2525E3%252581%2525A3%2525E3%252581%2525A8%252Cx_203%252Cy_121%2Fg_south_west%252Ch_90%252Cl_fetch%3AaHR0cHM6Ly9zdG9yYWdlLmdvb2dsZWFwaXMuY29tL3plbm4tdXNlci11cGxvYWQvYXZhdGFyLzNiZGU4MzE0YzAuanBlZw%3D%3D%252Cr_max%252Cw_90%252Cx_87%252Cy_95%2Fv1627283836%2Fdefault%2Fog-base-w1200-v2.png" alt="（基礎編）jQuery使いのエンジニアがReactとNext.jsでWebサイト制作するために最低限押さえておきたいコード" data-gtm-click-label="entry-search-result-item-image"> </a> </div> </div> </div> </li> <li class="bookmark-item js-user-bookmark-item js-keyboard-selectable-item"> <div class="centerarticle-entry is-image-entry-unit"> <div class="js-bookmark-stock-button is-hidden"> <button class="js-bookmark-stock-button-ready readlater-button" data-gtm-click-label="entry-search-result-item-stock-button" title="あとで読む" aria-label="あとで読む" tabindex="0" type="button" data-href="https://tech-blog.monotaro.com/entry/2021/11/02/090000"><span>あとで読む</span> </button> </div> <div class="centerarticle-entry-header"> <h3 class="centerarticle-entry-title"> <a href="https://tech-blog.monotaro.com/entry/2021/11/02/090000" 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-blog.monotaro.com%2Fentry%2F2021%2F11%2F02%2F090000" alt="">Vue.js？React？フレームワーク選びの７つの選定基準、大規模ECサイトのフロント刷新プロジェクト - MonotaRO Tech Blog </a> </h3> <ul class="centerarticle-entry-data"> <li> <span class="centerarticle-users"> <a href="/entry/s/tech-blog.monotaro.com/entry/2021/11/02/090000" class="js-keyboard-entry-page-openable" title="Vue.js？React？フレームワーク選びの７つの選定基準、大規模ECサイトのフロント刷新プロジェクト - MonotaRO Tech Blog (393 ブックマーク)" data-gtm-click-label="entry-search-result-item-users"> 393 users </a> </span> </li> <li> <a href="/site/tech-blog.monotaro.com/" title="『tech-blog.monotaro.com』の新着エントリー" data-gtm-click-label="entry-search-result-item-site-search-url"> tech-blog.monotaro.com </a> </li> <li> <a href="/hotentry/it" data-gtm-click-label="entry-search-result-item-category">テクノロジー</a> </li> <li><span class="entry-contents-date">2021/11/02</span></li> </ul> </div> <div class="centerarticle-entry-contents has-image"> <div class="centerarticle-entry-item"> <p class="centerarticle-entry-summary">こんにちは。モノタロウでフロントエンド寄りの開発をしている、陳です。今回はモノタロウの新フロントエンドのメインフレームワーク選定についてお話しします。選定結果から言うと、モノタロウ独自の７つの選定基準をもとに、Reactを選ぶことになりました。背景新フロントエンドプロジェクトの立ち上がり Vue.jsとReactの比較検討をしてみた俯瞰して改めて選定基準を考えた一般的な視点モノタロウの社内事情７つの選定基準選定結果技術選定を通して得た３つの学び背景まず、モノタロウの現フロントエンドについてざっくり説明します。モノタロウは2002年から、PythonとJavaScriptでECサイトを開発してきました。基本構成として、サーバサイドのPythonでHTMLを生成し、クライアントサイドのJavaScriptでカートインなどの動的処理を補完する形ですが、実はこの構成で違</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/Vue.js" data-gtm-click-label="entry-search-result-item-tag">Vue.js</a></li> <li><a href="/q/%E9%96%8B%E7%99%BA" data-gtm-click-label="entry-search-result-item-tag">開発</a></li> <li><a href="/q/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/vue" data-gtm-click-label="entry-search-result-item-tag">vue</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/framework" data-gtm-click-label="entry-search-result-item-tag">framework</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://tech-blog.monotaro.com/entry/2021/11/02/090000"> <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-blog.monotaro.com/entry/2021/11/02/090000" class="centerarticle-entry-image" target="_blank" rel="noopener"> <img src="https://cdn-ak-scissors.b.st-hatena.com/image/square/1e06cc23d906947b21dce80fb84cb31c3c2c43b2/height=288;version=1;width=512/https%3A%2F%2Fcdn-ak.f.st-hatena.com%2Fimages%2Ffotolife%2Fm%2Fmonotaro-tech-blog%2F20211021%2F20211021133012.png" alt="Vue.js？React？フレームワーク選びの７つの選定基準、大規模ECサイトのフロント刷新プロジェクト - MonotaRO 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://qiita.com/Sicut_study/items/d520f9a858506b81e874"><span>あとで読む</span> </button> </div> <div class="centerarticle-entry-header"> <h3 class="centerarticle-entry-title"> <a href="https://qiita.com/Sicut_study/items/d520f9a858506b81e874" 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%2FSicut_study%2Fitems%2Fd520f9a858506b81e874" alt="">【完全版】これ1本でReactの基本がマスターできる！初心者チュートリアル！ - Qiita </a> </h3> <ul class="centerarticle-entry-data"> <li> <span class="centerarticle-users"> <a href="/entry/s/qiita.com/Sicut_study/items/d520f9a858506b81e874" class="js-keyboard-entry-page-openable" title="【完全版】これ1本でReactの基本がマスターできる！初心者チュートリアル！ - Qiita (374 ブックマーク)" data-gtm-click-label="entry-search-result-item-users"> 374 users </a> </span> </li> <li> <a href="/site/qiita.com/Sicut_study" title="『qiita.com/Sicut_study』の新着エントリー" data-gtm-click-label="entry-search-result-item-site-search-url"> qiita.com/Sicut_study </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/08/19</span></li> </ul> </div> <div class="centerarticle-entry-contents has-image"> <div class="centerarticle-entry-item"> <p class="centerarticle-entry-summary">はじめに Reactの人気はどんどん加速しています。これからフレームワークを学ぶならReactを選ぶのは賢い選択でしょうこんにちは、Watanabe Jin(@Sicut_study)です。今回はReactをこれから学んでいこうと思っている方に向けて、初心者チュートリアルを作成しました。このチュートリアルではReactを書く上で欠かせないことを紹介しています。実際にアプリを作りながらReactの機能について学ぶことによってより深く理解することが可能です。このチュートリアルを最後までやったら、次に自分で習ったことを活かして簡単なTODOアプリなどを作れば基本がしっかり身につくようになっています。またこのチュートリアルではJavaScriptではなくTypeScriptを採用しています。モダンな会社ではTypeScriptが採用されることが多いはずだなので、少しでも慣れていただけ</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/TypeScript" data-gtm-click-label="entry-search-result-item-tag">TypeScript</a></li> <li><a href="/q/%E3%83%81%E3%83%A5%E3%83%BC%E3%83%88%E3%83%AA%E3%82%A2%E3%83%AB" 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/Qiita" data-gtm-click-label="entry-search-result-item-tag">Qiita</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/vue" data-gtm-click-label="entry-search-result-item-tag">vue</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/%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://qiita.com/Sicut_study/items/d520f9a858506b81e874"> <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/Sicut_study/items/d520f9a858506b81e874" class="centerarticle-entry-image" target="_blank" rel="noopener"> <img src="https://cdn-ak-scissors.b.st-hatena.com/image/square/fb7cdf029683b9bd03be0d2d97f4b04e90daee99/height=288;version=1;width=512/https%3A%2F%2Fqiita-user-contents.imgix.net%2Fhttps%253A%252F%252Fcdn.qiita.com%252Fassets%252Fpublic%252Farticle-ogp-background-412672c5f0600ab9a64263b751f1bc81.png%3Fixlib%3Drb-4.0.0%26w%3D1200%26mark64%3DaHR0cHM6Ly9xaWl0YS11c2VyLWNvbnRlbnRzLmltZ2l4Lm5ldC9-dGV4dD9peGxpYj1yYi00LjAuMCZ3PTk3MiZoPTM3OCZ0eHQ9JUUzJTgwJTkwJUU1JUFFJThDJUU1JTg1JUE4JUU3JTg5JTg4JUUzJTgwJTkxJUUzJTgxJTkzJUUzJTgyJThDMSVFNiU5QyVBQyVFMyU4MSVBN1JlYWN0JUUzJTgxJUFFJUU1JTlGJUJBJUU2JTlDJUFDJUUzJTgxJThDJUUzJTgzJTlFJUUzJTgyJUI5JUUzJTgyJUJGJUUzJTgzJUJDJUUzJTgxJUE3JUUzJTgxJThEJUUzJTgyJThCJUVGJUJDJTgxJUU1JTg4JTlEJUU1JUJGJTgzJUU4JTgwJTg1JUUzJTgzJTgxJUUzJTgzJUE1JUUzJTgzJUJDJUUzJTgzJTg4JUUzJTgzJUFBJUUzJTgyJUEyJUUzJTgzJUFCJUVGJUJDJTgxJnR4dC1hbGlnbj1sZWZ0JTJDdG9wJnR4dC1jb2xvcj0lMjMxRTIxMjEmdHh0LWZvbnQ9SGlyYWdpbm8lMjBTYW5zJTIwVzYmdHh0LXNpemU9NTYmcz0xOWMzYmIwNjRlMzMyNGEzODAyOTM4MWE5MWE2MWEyNA%26mark-x%3D142%26mark-y%3D57%26blend64%3DaHR0cHM6Ly9xaWl0YS11c2VyLWNvbnRlbnRzLmltZ2l4Lm5ldC9-dGV4dD9peGxpYj1yYi00LjAuMCZoPTc2Jnc9NzcwJnR4dD0lNDBTaWN1dF9zdHVkeSZ0eHQtY29sb3I9JTIzMUUyMTIxJnR4dC1mb250PUhpcmFnaW5vJTIwU2FucyUyMFc2JnR4dC1zaXplPTM2JnR4dC1hbGlnbj1sZWZ0JTJDdG9wJnM9ZjFjMDViOTY3OTlkOTE3NjEzZGJmZjJkMmI2YmJhODI%26blend-x%3D142%26blend-y%3D436%26blend-mode%3Dnormal%26txt64%3DaW4gSklTT1UgfCDntYzpqJPogIXlsILploDjg5fjg63jgrDjg6njg5_jg7PjgrDjgrPjg7zjg4Hjg7PjgrA%26txt-width%3D770%26txt-clip%3Dend%252Cellipsis%26txt-color%3D%25231E2121%26txt-font%3DHiragino%2520Sans%2520W6%26txt-size%3D36%26txt-x%3D156%26txt-y%3D536%26s%3D4d980a6aea94ff93dc8e462eb18f3066" alt="【完全版】これ1本でReactの基本がマスターできる！初心者チュートリアル！ - 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://liginc.co.jp/529890"><span>あとで読む</span> </button> </div> <div class="centerarticle-entry-header"> <h3 class="centerarticle-entry-title"> <a href="https://liginc.co.jp/529890" 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%2Fliginc.co.jp%2F529890" alt="">たった数分で環境構築が完了！TypeScriptでWebアプリケーション開発ができるフレームワーク「frourio」が本当に手軽だった。 | 株式会社LIG(リグ)｜DX支援・システム開発・Web制作 </a> </h3> <ul class="centerarticle-entry-data"> <li> <span class="centerarticle-users"> <a href="/entry/s/liginc.co.jp/529890" class="js-keyboard-entry-page-openable" title="たった数分で環境構築が完了！TypeScriptでWebアプリケーション開発ができるフレームワーク「frourio」が本当に手軽だった。 | 株式会社LIG(リグ)｜DX支援・システム開発・Web制作 (355 ブックマーク)" data-gtm-click-label="entry-search-result-item-users"> 355 users </a> </span> </li> <li> <a href="/site/liginc.co.jp/" title="『liginc.co.jp』の新着エントリー" data-gtm-click-label="entry-search-result-item-site-search-url"> liginc.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/12/15</span></li> </ul> </div> <div class="centerarticle-entry-contents has-image"> <div class="centerarticle-entry-item"> <p class="centerarticle-entry-summary">たった数分で環境構築が完了！TypeScriptでWebアプリケーション開発ができるフレームワーク「frourio」が本当に手軽だった。こんにちは、エンジニアのづやです。突然ですがエンジニアのみなさん、TypeScriptに触れた経験はありますか？ TypeScriptはGitHubが毎年発表しているランキングで今年4位に急上昇したくらい、もっともアツいプログラム言語の1つです。出典：https://octoverse.github.com/ しかし、いざ試してみようと思っても、フレームワークは何を使えば良い？どうやって導入したら良い？など、意外とハードルって高くないですか？そこで「frourio（フルーリオ）」という画期的なフレームワークを見つけました。こういうのってある程度経験を積んだエンジニアでないと使いこなせない……というケースも多いですよね。でもfrourioはそ</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/%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%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/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/framework" data-gtm-click-label="entry-search-result-item-tag">framework</a></li> <li><a href="/q/web" data-gtm-click-label="entry-search-result-item-tag">web</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/server" data-gtm-click-label="entry-search-result-item-tag">server</a></li> </ul> <div class="following-bookmarks-container js-following-bookmarks-container" data-entry-url="https://liginc.co.jp/529890"> <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://liginc.co.jp/529890" class="centerarticle-entry-image" target="_blank" rel="noopener"> <img src="https://cdn-ak-scissors.b.st-hatena.com/image/square/47bec27ed829556e93d5c3f39641eabd0e61a3c7/height=288;version=1;width=512/https%3A%2F%2Fliginc.co.jp%2Fwp-content%2Fuploads%2F2020%2F12%2Fec_201120_e_OGP-1.png" alt="たった数分で環境構築が完了！TypeScriptでWebアプリケーション開発ができるフレームワーク「frourio」が本当に手軽だった。 | 株式会社LIG(リグ)｜DX支援・システム開発・Web制作" data-gtm-click-label="entry-search-result-item-image"> </a> </div> </div> </div> </li> <li class="bookmark-item js-user-bookmark-item js-keyboard-selectable-item"> <div class="centerarticle-entry is-image-entry-unit"> <div class="js-bookmark-stock-button is-hidden"> <button class="js-bookmark-stock-button-ready readlater-button" data-gtm-click-label="entry-search-result-item-stock-button" title="あとで読む" aria-label="あとで読む" tabindex="0" type="button" data-href="https://qiita.com/tronicboy/items/18c36cb713f77af627d8"><span>あとで読む</span> </button> </div> <div class="centerarticle-entry-header"> <h3 class="centerarticle-entry-title"> <a href="https://qiita.com/tronicboy/items/18c36cb713f77af627d8" 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%2Ftronicboy%2Fitems%2F18c36cb713f77af627d8" alt="">React、過剰に複雑な代物。 - Qiita </a> </h3> <ul class="centerarticle-entry-data"> <li> <span class="centerarticle-users"> <a href="/entry/s/qiita.com/tronicboy/items/18c36cb713f77af627d8" class="js-keyboard-entry-page-openable" title="React、過剰に複雑な代物。 - Qiita (354 ブックマーク)" data-gtm-click-label="entry-search-result-item-users"> 354 users </a> </span> </li> <li> <a href="/site/qiita.com/tronicboy" title="『qiita.com/tronicboy』の新着エントリー" data-gtm-click-label="entry-search-result-item-site-search-url"> qiita.com/tronicboy </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/07/06</span></li> </ul> </div> <div class="centerarticle-entry-contents has-image"> <div class="centerarticle-entry-item"> <p class="centerarticle-entry-summary">はいさい！ちゅらデータぬオースティンやいびーん！今回の記事は筆者に珍しく、技術紹介ではなく、僕の個人的な意見を書きます。あくまでも、自説です。 React自体は画期的で、プログラミング界に貢献したプロジェクトだと思っていますし、完全に否定したいわけではありません。 Reactに対する違和感＝芽生えては大きく育った種筆者はReactがとても好きでした。JavaScriptが好きになったきっかけもReactでした。何から何までもReactで書き直して、Custom Hooksを作って、refを子部品に渡したり、バリバリ満喫していました。 Vueも仕事の関係で習得せざるを得なくなったのですが、Vueは最高に大嫌いでした。これならReactで書き直してやるぅ！と思ったりも。 Reactについて社内でも導入を推進したり、React入門の勉強会を開いたりもしています。しかし、そんな筆者は、最近に</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/javascript" data-gtm-click-label="entry-search-result-item-tag">javascript</a></li> <li><a href="/q/%E8%80%83%E3%81%88%E6%96%B9" 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/hooks" data-gtm-click-label="entry-search-result-item-tag">hooks</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/DOM" data-gtm-click-label="entry-search-result-item-tag">DOM</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://qiita.com/tronicboy/items/18c36cb713f77af627d8"> <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/tronicboy/items/18c36cb713f77af627d8" class="centerarticle-entry-image" target="_blank" rel="noopener"> <img src="https://cdn-ak-scissors.b.st-hatena.com/image/square/2686ee681d910edc713ac27fe4c0d514b2674fb2/height=288;version=1;width=512/https%3A%2F%2Fqiita-user-contents.imgix.net%2Fhttps%253A%252F%252Fcdn.qiita.com%252Fassets%252Fpublic%252Farticle-ogp-background-412672c5f0600ab9a64263b751f1bc81.png%3Fixlib%3Drb-4.0.0%26w%3D1200%26mark64%3DaHR0cHM6Ly9xaWl0YS11c2VyLWNvbnRlbnRzLmltZ2l4Lm5ldC9-dGV4dD9peGxpYj1yYi00LjAuMCZ3PTk3MiZoPTM3OCZ0eHQ9UmVhY3QlRTMlODAlODElRTklODElOEUlRTUlODklQjAlRTMlODElQUIlRTglQTQlODclRTklOUIlOTElRTMlODElQUElRTQlQkIlQTMlRTclODklQTklRTMlODAlODImdHh0LWNvbG9yPSUyMzIxMjEyMSZ0eHQtZm9udD1IaXJhZ2lubyUyMFNhbnMlMjBXNiZ0eHQtc2l6ZT01NiZ0eHQtYWxpZ249bGVmdCUyQ3RvcCZzPTQ1NWFhYTgxYmFjNGI5OWVlZWU2YzY4Y2U3ZGM2N2Qx%26mark-x%3D142%26mark-y%3D57%26blend64%3DaHR0cHM6Ly9xaWl0YS11c2VyLWNvbnRlbnRzLmltZ2l4Lm5ldC9-dGV4dD9peGxpYj1yYi00LjAuMCZoPTc2Jnc9NzcwJnR4dD0lNDB0cm9uaWNib3kmdHh0LWNvbG9yPSUyMzIxMjEyMSZ0eHQtZm9udD1IaXJhZ2lubyUyMFNhbnMlMjBXNiZ0eHQtc2l6ZT0zNiZ0eHQtYWxpZ249bGVmdCUyQ3RvcCZzPTEwNjIzYmJjMzg1YjRjOTI5MDIyM2Y5NjllOWE3OTY4%26blend-x%3D142%26blend-y%3D436%26blend-mode%3Dnormal%26txt64%3DaW4g44Gh44KF44KJ44OH44O844K_5qCq5byP5Lya56S-%26txt-width%3D770%26txt-clip%3Dend%252Cellipsis%26txt-color%3D%2523212121%26txt-font%3DHiragino%2520Sans%2520W6%26txt-size%3D36%26txt-x%3D156%26txt-y%3D536%26s%3D99ef8a74a8f89d4e9214693dff042b1e" alt="React、過剰に複雑な代物。 - 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://note.com/erukiti/n/n38495d44386a"><span>あとで読む</span> </button> </div> <div class="centerarticle-entry-header"> <h3 class="centerarticle-entry-title"> <a href="https://note.com/erukiti/n/n38495d44386a" class="js-clickable-link js-keyboard-openable" target="_blank" rel="noopener" data-gtm-click-label="entry-search-result-item-title"> <img class="centerarticle-entry-favicon" src="https://cdn-ak2.favicon.st-hatena.com/64?url=https%3A%2F%2Fnote.com%2Ferukiti%2Fn%2Fn38495d44386a" alt="">2020年のウェブフロントエンドエンジニアが学び実践すべきこと｜erukiti </a> </h3> <ul class="centerarticle-entry-data"> <li> <span class="centerarticle-users"> <a href="/entry/s/note.com/erukiti/n/n38495d44386a" class="js-keyboard-entry-page-openable" title="2020年のウェブフロントエンドエンジニアが学び実践すべきこと｜erukiti (344 ブックマーク)" data-gtm-click-label="entry-search-result-item-users"> 344 users </a> </span> </li> <li> <a href="/site/note.com/erukiti" title="『note.com/erukiti』の新着エントリー" data-gtm-click-label="entry-search-result-item-site-search-url"> note.com/erukiti </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/04/05</span></li> </ul> </div> <div class="centerarticle-entry-contents has-image"> <div class="centerarticle-entry-item"> <p class="centerarticle-entry-summary">先日、ウェブフロントエンドについて理解するためのただ一つの方法を記事にしました。それは「古い知識に頼るな。公式を読め」でした。たった一つの方法です。これをできない人は必ず行き詰まります。公式をひたすら読み込むことができる人は、たぶん大丈夫でしょう。今回の記事は、その先にあるものです。モダンフロントエンドの重要性ここでは少し前回の記事のおさらいをしておきます。 2020年のソフトウェアエンジニアリングの世界ではウェブ技術の重要度は増すばかりです。もちろんウェブ技術というのは広い分野です。ウェブ（HTTP/HTML/JS/CSSその他）によるサーバー・クライアント型のソフトウェアは、莫大な市場を背景にどんどか技術が投入されています。ウェブ技術の中でも、ここ数年はフロントエンド技術の比重がとても大きくなりました。前回の記事にも書いた通り、少なくとも50%以上の影響力を持っています。ソフト</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/react" data-gtm-click-label="entry-search-result-item-tag">react</a></li> <li><a href="/q/frontend" data-gtm-click-label="entry-search-result-item-tag">frontend</a></li> <li><a href="/q/%E9%96%8B%E7%99%BA" 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> <li><a href="/q/Vue" data-gtm-click-label="entry-search-result-item-tag">Vue</a></li> <li><a href="/q/%E3%82%BD%E3%83%95%E3%83%88%E3%82%A6%E3%82%A7%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://note.com/erukiti/n/n38495d44386a"> <ul class="following-bookmarks js-following-bookmarks"></ul> <script type="text/x-template" id="template-following-bookmark"> <li> <a href="{{ anchor_path }}" class="following-bookmark-link" data-gtm-label="entry-info-followingBookmarks"> <img src="{{ profile_image_url }}" alt="{{ user_name }}" class="following-bookmark-icon"> </a> <span class="following-bookmark-popup"> <span class="following-bookmark-username">{{ user_name }}</span><span class="following-bookmark-timestamp">{{ created }}</span> <span class="following-bookmark-text"> {{ #comment }}<span class="following-bookmark-comment">{{ comment }}</span>{{ /comment }} <ul class="following-bookmark-tags">{{ #tags }}<li>{{ label }}</li>{{ /tags }}</ul> </span> </span> </li> </script> </div> </div> <div class="centerarticle-entry-image-wrapper"> <a href="https://note.com/erukiti/n/n38495d44386a" class="centerarticle-entry-image" target="_blank" rel="noopener"> <img src="https://cdn-ak-scissors.b.st-hatena.com/image/square/4a5518b1a314b3210a236398445896f8d747731a/height=288;version=1;width=512/https%3A%2F%2Fassets.st-note.com%2Fproduction%2Fuploads%2Fimages%2F22287733%2Frectangle_large_type_2_4aa85eda48f2fdcd45818a07a9c218d6.jpg%3Ffit%3Dbounds%26quality%3D85%26width%3D1280" alt="2020年のウェブフロントエンドエンジニアが学び実践すべきこと｜erukiti" 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/rana_kualu/items/e8a0f8f5589ff082539d"><span>あとで読む</span> </button> </div> <div class="centerarticle-entry-header"> <h3 class="centerarticle-entry-title"> <a href="https://qiita.com/rana_kualu/items/e8a0f8f5589ff082539d" 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%2Frana_kualu%2Fitems%2Fe8a0f8f5589ff082539d" alt="">JavaScript ベスト・オブ・ザ・イヤー 2020 - Qiita </a> </h3> <ul class="centerarticle-entry-data"> <li> <span class="centerarticle-users"> <a href="/entry/s/qiita.com/rana_kualu/items/e8a0f8f5589ff082539d" class="js-keyboard-entry-page-openable" title="JavaScript ベスト・オブ・ザ・イヤー 2020 - Qiita (344 ブックマーク)" data-gtm-click-label="entry-search-result-item-users"> 344 users </a> </span> </li> <li> <a href="/site/qiita.com/rana_kualu" title="『qiita.com/rana_kualu』の新着エントリー" data-gtm-click-label="entry-search-result-item-site-search-url"> qiita.com/rana_kualu </a> </li> <li> <a href="/hotentry/it" data-gtm-click-label="entry-search-result-item-category">テクノロジー</a> </li> <li><span class="entry-contents-date">2021/01/18</span></li> </ul> </div> <div class="centerarticle-entry-contents has-image"> <div class="centerarticle-entry-item"> <p class="centerarticle-entry-summary">Deleted articles cannot be recovered. Draft of this article would be also deleted. Are you sure you want to delete this article? 2021 / 2020 / 2019 JavaScriptライブラリのトレンドを紹介しているbestofjs.orgが、2020年に最もホットであったJavaScriptライブラリのランキングを発表しました。選考基準は現在のスター数ではなく、『2020年の一年間で増えたスターの数』です。過去流行っていたけど落ち目となった技術は出てこないので、最近注目されている技術がわかります。ちなみに2016年の総合ランキング1位はVue.js、2017年の総合ランキング1位はVue.js、2018年の総合ランキング1位はVue.js、2019年</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/react" data-gtm-click-label="entry-search-result-item-tag">react</a></li> <li><a href="/q/qiita" data-gtm-click-label="entry-search-result-item-tag">qiita</a></li> <li><a href="/q/TypeScript" data-gtm-click-label="entry-search-result-item-tag">TypeScript</a></li> <li><a href="/q/css" data-gtm-click-label="entry-search-result-item-tag">css</a></li> <li><a href="/q/js" data-gtm-click-label="entry-search-result-item-tag">js</a></li> <li><a href="/q/dev" data-gtm-click-label="entry-search-result-item-tag">dev</a></li> <li><a href="/q/vue" data-gtm-click-label="entry-search-result-item-tag">vue</a></li> <li><a href="/q/angular" data-gtm-click-label="entry-search-result-item-tag">angular</a></li> </ul> <div class="following-bookmarks-container js-following-bookmarks-container" data-entry-url="https://qiita.com/rana_kualu/items/e8a0f8f5589ff082539d"> <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/rana_kualu/items/e8a0f8f5589ff082539d" class="centerarticle-entry-image" target="_blank" rel="noopener"> <img src="https://cdn-ak-scissors.b.st-hatena.com/image/square/ae684218261c82781561b61709df2acd884c15f4/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%253DaHR0cHM6Ly9xaWl0YS11c2VyLXByb2ZpbGUtaW1hZ2VzLmltZ2l4Lm5ldC9odHRwcyUzQSUyRiUyRnFpaXRhLWltYWdlLXN0b3JlLnMzLmFwLW5vcnRoZWFzdC0xLmFtYXpvbmF3cy5jb20lMkYwJTJGMjYwODglMkZwcm9maWxlLWltYWdlcyUyRjE1NjUwMTU3NDQ_aXhsaWI9cmItNC4wLjAmYXI9MSUzQTEmZml0PWNyb3AmbWFzaz1lbGxpcHNlJmZtPXBuZzMyJnM9N2Y1YzI1MzQ1ODMyOTk5ODM0MTY0YjQ2Yzc3YjQ5MzA%2526blend-x%253D120%2526blend-y%253D467%2526blend-w%253D82%2526blend-h%253D82%2526blend-mode%253Dnormal%2526s%253Dac270065f427e043e02ce1f16c64ed9d%3Fixlib%3Drb-4.0.0%26w%3D1200%26fm%3Djpg%26mark64%3DaHR0cHM6Ly9xaWl0YS11c2VyLWNvbnRlbnRzLmltZ2l4Lm5ldC9-dGV4dD9peGxpYj1yYi00LjAuMCZ3PTk2MCZoPTMyNCZ0eHQ9SmF2YVNjcmlwdCUyMCVFMyU4MyU5OSVFMyU4MiVCOSVFMyU4MyU4OCVFMyU4MyVCQiVFMyU4MiVBQSVFMyU4MyU5NiVFMyU4MyVCQiVFMyU4MiVCNiVFMyU4MyVCQiVFMyU4MiVBNCVFMyU4MyVBNCVFMyU4MyVCQyUyMDIwMjAmdHh0LWFsaWduPWxlZnQlMkN0b3AmdHh0LWNvbG9yPSUyMzFFMjEyMSZ0eHQtZm9udD1IaXJhZ2lubyUyMFNhbnMlMjBXNiZ0eHQtc2l6ZT01NiZ0eHQtcGFkPTAmcz05ZThhY2Q2NDJhNmNlNzY0MDgxNTlmZjU4ODY5ZWJjYQ%26mark-x%3D120%26mark-y%3D112%26blend64%3DaHR0cHM6Ly9xaWl0YS11c2VyLWNvbnRlbnRzLmltZ2l4Lm5ldC9-dGV4dD9peGxpYj1yYi00LjAuMCZ3PTgzOCZoPTU4JnR4dD0lNDByYW5hX2t1YWx1JnR4dC1jb2xvcj0lMjMxRTIxMjEmdHh0LWZvbnQ9SGlyYWdpbm8lMjBTYW5zJTIwVzYmdHh0LXNpemU9MzYmdHh0LXBhZD0wJnM9OTRmMWRlNGQ0OTgyZWU5MDEyY2YyODliZmI3YzhkMTU%26blend-x%3D242%26blend-y%3D480%26blend-w%3D838%26blend-h%3D46%26blend-fit%3Dcrop%26blend-crop%3Dleft%252Cbottom%26blend-mode%3Dnormal%26s%3D7bb56cae07752602fe5acf58d20405c0" alt="JavaScript ベスト・オブ・ザ・イヤー 2020 - 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://aws.amazon.com/jp/builders-flash/202008/amplify-crud-app/"><span>あとで読む</span> </button> </div> <div class="centerarticle-entry-header"> <h3 class="centerarticle-entry-title"> <a href="https://aws.amazon.com/jp/builders-flash/202008/amplify-crud-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%2Faws.amazon.com%2Fjp%2Fbuilders-flash%2F202008%2Famplify-crud-app%2F" alt="">AWS Amplify と Vue.js を使って、基本的な認証と CRUD 操作ができる Web アプリケーションを作る- builders.flash☆ - 変化を求めるデベロッパーを応援するウェブマガジン | AWS </a> </h3> <ul class="centerarticle-entry-data"> <li> <span class="centerarticle-users"> <a href="/entry/s/aws.amazon.com/jp/builders-flash/202008/amplify-crud-app/" class="js-keyboard-entry-page-openable" title="AWS Amplify と Vue.js を使って、基本的な認証と CRUD 操作ができる Web アプリケーションを作る- builders.flash☆ - 変化を求めるデベロッパーを応援するウェブマガジン | AWS (341 ブックマーク)" data-gtm-click-label="entry-search-result-item-users"> 341 users </a> </span> </li> <li> <a href="/site/aws.amazon.com/" title="『aws.amazon.com』の新着エントリー" data-gtm-click-label="entry-search-result-item-site-search-url"> aws.amazon.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">2020/08/07</span></li> </ul> </div> <div class="centerarticle-entry-contents has-image"> <div class="centerarticle-entry-item"> <p class="centerarticle-entry-summary">こんにちは、JAWS-UG 浜松支部の松井です。普段からモノリシックな環境やそれに準じる環境での Web アプリケーションの開発、保守に取り組んでいますが、継続的にサービスを運用していく上では様々な悩みが尽きません。 OS のバージョンアップ、セキュリティパッチはどうするか ? 言語やミドルウェアのバージョンはどうするか ? ステージング、本番等の環境のデプロイはどうするか ? コスト最適化はどうするか ? etc・・・そこで、サーバーレスアーキテクチャを採用することにより、こう言ったホストマシンやネットワークの管理に起因する悩みを軽減することができます。とはいえ、いきなりサーバーレスに着手するとしても、本当にちゃんと動くのか ? 設計、構築が難しいのではないか ? コストはどのくらいかかるのか ? まずどこから手をつければ良いのか ? と言った疑問があると思います。今回はそう言</p> <ul class="entrysearch-entry-tags"> <li><a href="/q/aws" data-gtm-click-label="entry-search-result-item-tag">aws</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/amplify" data-gtm-click-label="entry-search-result-item-tag">amplify</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/%E8%AA%8D%E8%A8%BC" 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/cloud" data-gtm-click-label="entry-search-result-item-tag">cloud</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/PWA" data-gtm-click-label="entry-search-result-item-tag">PWA</a></li> </ul> <div class="following-bookmarks-container js-following-bookmarks-container" data-entry-url="https://aws.amazon.com/jp/builders-flash/202008/amplify-crud-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://aws.amazon.com/jp/builders-flash/202008/amplify-crud-app/" class="centerarticle-entry-image" target="_blank" rel="noopener"> <img src="https://cdn-ak-scissors.b.st-hatena.com/image/square/c4f530e16dfb308a48108c71972db725de90d0d5/height=288;version=1;width=512/https%3A%2F%2Fa0.awsstatic.com%2Flibra-css%2Fimages%2Flogos%2Faws_logo_smile_1200x630.png" alt="AWS Amplify と Vue.js を使って、基本的な認証と CRUD 操作ができる Web アプリケーションを作る- builders.flash☆ - 変化を求めるデベロッパーを応援するウェブマガジン | AWS" 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://mizchi.hatenablog.com/entry/2020/12/28/140530"><span>あとで読む</span> </button> </div> <div class="centerarticle-entry-header"> <h3 class="centerarticle-entry-title"> <a href="https://mizchi.hatenablog.com/entry/2020/12/28/140530" 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%2Fmizchi.hatenablog.com%2Fentry%2F2020%2F12%2F28%2F140530" alt="">2020年やったこと、考えたこと、触った技術のまとめ - mizchi's blog </a> </h3> <ul class="centerarticle-entry-data"> <li> <span class="centerarticle-users"> <a href="/entry/s/mizchi.hatenablog.com/entry/2020/12/28/140530" class="js-keyboard-entry-page-openable" title="2020年やったこと、考えたこと、触った技術のまとめ - mizchi's blog (313 ブックマーク)" data-gtm-click-label="entry-search-result-item-users"> 313 users </a> </span> </li> <li> <a href="/site/mizchi.hatenablog.com/" title="『mizchi.hatenablog.com』の新着エントリー" data-gtm-click-label="entry-search-result-item-site-search-url"> mizchi.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">2020/12/28</span></li> </ul> </div> <div class="centerarticle-entry-contents has-image"> <div class="centerarticle-entry-item"> <p class="centerarticle-entry-summary">今年の本業は、 3rd party script で、そこから呼ぶウィジェットを最適化するコンパイラを書く、その仕様を考えて、実装するという感じだった。要は Google Analytics と、最適化コンパイラ付き GTM みたいなものを作っていた。その内容は以下に書いた。サードパーティスクリプトの極限環境向け Svelte パフォーマンス改善に Core WebVitals という大義名分を得た今年は、パフォーマンスのエンジニアをやっていた、と思う。サードパーティスクリプトの配信を生業にする会社のエンジニアとしては、来年の Core WebVitals というパフォーマンス関連の大きな変化で、波にのってやりたいことがやれたと思う。 Core WebVitals の導入で実際にどれぐらいの影響がでるか不明だが、パフォーマンスが SEO に影響する、というのは、若干やりすぎと思いつ</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/react" data-gtm-click-label="entry-search-result-item-tag">react</a></li> <li><a href="/q/performance" data-gtm-click-label="entry-search-result-item-tag">performance</a></li> <li><a href="/q/frontend" data-gtm-click-label="entry-search-result-item-tag">frontend</a></li> <li><a href="/q/%E6%8A%80%E8%A1%93" data-gtm-click-label="entry-search-result-item-tag">技術</a></li> <li><a href="/q/javascript" data-gtm-click-label="entry-search-result-item-tag">javascript</a></li> <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/%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/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://mizchi.hatenablog.com/entry/2020/12/28/140530"> <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://mizchi.hatenablog.com/entry/2020/12/28/140530" class="centerarticle-entry-image" target="_blank" rel="noopener"> <img src="https://cdn-ak-scissors.b.st-hatena.com/image/square/7d7bb30f986000850e84593c470ff8d84b83e5ed/height=288;version=1;width=512/https%3A%2F%2Fogimage.blog.st-hatena.com%2F13208692334729889376%2F26006613670948810%2F1609135733" alt="2020年やったこと、考えたこと、触った技術のまとめ - mizchi's 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://photoshopvip.net/127065"><span>あとで読む</span> </button> </div> <div class="centerarticle-entry-header"> <h3 class="centerarticle-entry-title"> <a href="https://photoshopvip.net/127065" 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%2Fphotoshopvip.net%2F127065" alt="">どう書くんだっけ？を一発解決！コピペ用コードスニペットを集めたオススメWebサイトまとめ </a> </h3> <ul class="centerarticle-entry-data"> <li> <span class="centerarticle-users"> <a href="/entry/s/photoshopvip.net/127065" class="js-keyboard-entry-page-openable" title="どう書くんだっけ？を一発解決！コピペ用コードスニペットを集めたオススメWebサイトまとめ (285 ブックマーク)" data-gtm-click-label="entry-search-result-item-users"> 285 users </a> </span> </li> <li> <a href="/site/photoshopvip.net/" title="『photoshopvip.net』の新着エントリー" data-gtm-click-label="entry-search-result-item-site-search-url"> photoshopvip.net </a> </li> <li> <a href="/hotentry/it" data-gtm-click-label="entry-search-result-item-category">テクノロジー</a> </li> <li><span class="entry-contents-date">2021/01/27</span></li> </ul> </div> <div class="centerarticle-entry-contents has-image"> <div class="centerarticle-entry-item"> <p class="centerarticle-entry-summary">この記事では、コーディング作業で迷ったときに確認したいコードスニペットを集めた便利サイトをまとめて紹介しています。ウェブ開発において、フロントエンドやデベロッパーが悩んでしまう問題の解決方法を知ることができるだけでなく、世界中の優秀なプログラマーの作成したコードを確認、実際に動かしながら学ぶことができます。ちなみに、2020年に人気だったコードスニペットランキングがこちら。 2020年にCodepenで話題！コピペ可なHTMLスニペットベスト100発表どう書くんだっけ？を一発解決！コードスニペットを集めたオススメWebサイトまとめ CoddMyUI Javascript、HTML、CSS、jQueryプラグイン、ウェブ開発にできるデザインスニペット1200個以上が揃ったサイト。ボタンやホバーリンク、テキストアニメーションなど細かくカテゴリ分けされているので、必要なパーツごとのコー</p> <ul class="entrysearch-entry-tags"> <li><a href="/q/%E3%82%B9%E3%83%8B%E3%83%9A%E3%83%83%E3%83%88" 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/css" data-gtm-click-label="entry-search-result-item-tag">css</a></li> <li><a href="/q/web" data-gtm-click-label="entry-search-result-item-tag">web</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/web%E5%88%B6%E4%BD%9C" 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/bootstrap" data-gtm-click-label="entry-search-result-item-tag">bootstrap</a></li> <li><a href="/q/web%E3%82%B5%E3%83%BC%E3%83%93%E3%82%B9" data-gtm-click-label="entry-search-result-item-tag">webサービス</a></li> <li><a href="/q/%E3%83%97%E3%83%AD%E3%82%B0%E3%83%A9%E3%83%9E" 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://photoshopvip.net/127065"> <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://photoshopvip.net/127065" class="centerarticle-entry-image" target="_blank" rel="noopener"> <img src="https://cdn-ak-scissors.b.st-hatena.com/image/square/a17f0a532438a377bbef6f5cb3b5df3d0bfeb019/height=288;version=1;width=512/https%3A%2F%2Fphotoshopvip.net%2Fwp-content%2Fuploads%2F2021%2F01%2F15-code-snippet-site-1.jpg" alt="どう書くんだっけ？を一発解決！コピペ用コードスニペットを集めたオススメWebサイトまとめ" data-gtm-click-label="entry-search-result-item-image"> </a> </div> </div> </div> </li> <li class="bookmark-item js-user-bookmark-item js-keyboard-selectable-item"> <div class="centerarticle-entry is-image-entry-unit"> <div class="js-bookmark-stock-button is-hidden"> <button class="js-bookmark-stock-button-ready readlater-button" data-gtm-click-label="entry-search-result-item-stock-button" title="あとで読む" aria-label="あとで読む" tabindex="0" type="button" data-href="https://note.com/yuitosato/n/n382f7dcc97c2"><span>あとで読む</span> </button> </div> <div class="centerarticle-entry-header"> <h3 class="centerarticle-entry-title"> <a href="https://note.com/yuitosato/n/n382f7dcc97c2" class="js-clickable-link js-keyboard-openable" target="_blank" rel="noopener" data-gtm-click-label="entry-search-result-item-title"> <img class="centerarticle-entry-favicon" src="https://cdn-ak2.favicon.st-hatena.com/64?url=https%3A%2F%2Fnote.com%2Fyuitosato%2Fn%2Fn382f7dcc97c2" alt="">愛すべきAngularとのお別れ。2,3年後を見据えReactにリプレイスする話｜Yuito Sato </a> </h3> <ul class="centerarticle-entry-data"> <li> <span class="centerarticle-users"> <a href="/entry/s/note.com/yuitosato/n/n382f7dcc97c2" class="js-keyboard-entry-page-openable" title="愛すべきAngularとのお別れ。2,3年後を見据えReactにリプレイスする話｜Yuito Sato (284 ブックマーク)" data-gtm-click-label="entry-search-result-item-users"> 284 users </a> </span> </li> <li> <a href="/site/note.com/yuitosato" title="『note.com/yuitosato』の新着エントリー" data-gtm-click-label="entry-search-result-item-site-search-url"> note.com/yuitosato </a> </li> <li> <a href="/hotentry/it" data-gtm-click-label="entry-search-result-item-category">テクノロジー</a> </li> <li><span class="entry-contents-date">2021/02/26</span></li> </ul> </div> <div class="centerarticle-entry-contents has-image"> <div class="centerarticle-entry-item"> <p class="centerarticle-entry-summary">「Reactに書き換えないとこのプロダクトチームは緩やかに死を迎えます」こんにちは、ログラスのエンジニアの佐藤です。昨年に入社して早2ヶ月経ちましたので、入社記事でも書いていきます。「Reactに書き換えないとこのプロダクトチームは緩やかに死を迎えます」と、CTOに言ったのは昨年末くらいでした。入社してまだ1ヶ月経たないくらいです。ログラスは創業当時からAngularを使って開発をしていました。正社員のフロントエンドエンジニアは自分が入るまではいなくて、業務委託の方と協働しながら開発をしていました。そのプロダクトをゼロからこの創業期のタイミングでReactでフロントエンドを作り直そうというお話です。今回のお話はあくまでログラスのプロダクトチームの目指す理想像とAngularの相性が悪いだけで、AngularがReactより劣っているわけではありません。 Angularはフ</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/Angular" data-gtm-click-label="entry-search-result-item-tag">Angular</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%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/%E6%8A%80%E8%A1%93" 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/%E6%8E%A1%E7%94%A8" data-gtm-click-label="entry-search-result-item-tag">採用</a></li> <li><a href="/q/%E3%82%AD%E3%83%A3%E3%83%AA%E3%82%A2" data-gtm-click-label="entry-search-result-item-tag">キャリア</a></li> <li><a href="/q/%E4%BC%81%E6%A5%AD" 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://note.com/yuitosato/n/n382f7dcc97c2"> <ul class="following-bookmarks js-following-bookmarks"></ul> <script type="text/x-template" id="template-following-bookmark"> <li> <a href="{{ anchor_path }}" class="following-bookmark-link" data-gtm-label="entry-info-followingBookmarks"> <img src="{{ profile_image_url }}" alt="{{ user_name }}" class="following-bookmark-icon"> </a> <span class="following-bookmark-popup"> <span class="following-bookmark-username">{{ user_name }}</span><span class="following-bookmark-timestamp">{{ created }}</span> <span class="following-bookmark-text"> {{ #comment }}<span class="following-bookmark-comment">{{ comment }}</span>{{ /comment }} <ul class="following-bookmark-tags">{{ #tags }}<li>{{ label }}</li>{{ /tags }}</ul> </span> </span> </li> </script> </div> </div> <div class="centerarticle-entry-image-wrapper"> <a href="https://note.com/yuitosato/n/n382f7dcc97c2" class="centerarticle-entry-image" target="_blank" rel="noopener"> <img src="https://cdn-ak-scissors.b.st-hatena.com/image/square/35b3631d2f8a6c4846948281fa10d69be123dcf7/height=288;version=1;width=512/https%3A%2F%2Fassets.st-note.com%2Fproduction%2Fuploads%2Fimages%2F46253499%2Frectangle_large_type_2_68dd8a6fb9cd9a42cdd16eb01caed0bc.jpg%3Ffit%3Dbounds%26quality%3D85%26width%3D1280" alt="愛すべきAngularとのお別れ。2,3年後を見据えReactにリプレイスする話｜Yuito Sato" 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://ics.media/entry/200225/"><span>あとで読む</span> </button> </div> <div class="centerarticle-entry-header"> <h3 class="centerarticle-entry-title"> <a href="https://ics.media/entry/200225/" 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%2F200225%2F" alt="">CSS・SVGとVue.jsでのアニメーション作成入門 - ライブラリに頼らない表現力を身に付けよう - ICS MEDIA </a> </h3> <ul class="centerarticle-entry-data"> <li> <span class="centerarticle-users"> <a href="/entry/s/ics.media/entry/200225/" class="js-keyboard-entry-page-openable" title="CSS・SVGとVue.jsでのアニメーション作成入門 - ライブラリに頼らない表現力を身に付けよう - ICS MEDIA (280 ブックマーク)" data-gtm-click-label="entry-search-result-item-users"> 280 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">2020/02/25</span></li> </ul> </div> <div class="centerarticle-entry-contents has-image"> <div class="centerarticle-entry-item"> <p class="centerarticle-entry-summary">※ CSS Animationに関してはWeb Animation APIを使うことでより簡単にJavaScriptからアニメーションを構築・制御できるようになります。2020年2月時点ではブラウザの実装が不十分でPolyfillを要するため、この記事では対象外としています。専用ライブラリを使わずにアニメーションを作ろう各ライブラリは特別な魔法を使っているわけではありません。原理的にはCSS・SVG・WebGLといった各要素技術をしっかりと習得すれば、専用のライブラリと同等のことができるばかりか、より高い自由度を手に入れながら軽量化を実現できる可能性もあります。また、専用のライブラリを利用する場合にも、基礎となる原理や各技術の得意不得意を知っていることは大きな武器となるでしょう。 Vue.jsを使ってCSSやSVGのアニメーションを書くとは言え、これらのアニメーションを土台の技術</p> <ul class="entrysearch-entry-tags"> <li><a href="/q/SVG" data-gtm-click-label="entry-search-result-item-tag">SVG</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/css" data-gtm-click-label="entry-search-result-item-tag">css</a></li> <li><a href="/q/%E3%82%A2%E3%83%8B%E3%83%A1%E3%83%BC%E3%82%B7%E3%83%A7%E3%83%B3" 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/%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/animation" data-gtm-click-label="entry-search-result-item-tag">animation</a></li> <li><a href="/q/javascript" data-gtm-click-label="entry-search-result-item-tag">javascript</a></li> <li><a href="/q/js" data-gtm-click-label="entry-search-result-item-tag">js</a></li> </ul> <div class="following-bookmarks-container js-following-bookmarks-container" data-entry-url="https://ics.media/entry/200225/"> <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/200225/" class="centerarticle-entry-image" target="_blank" rel="noopener"> <img src="https://cdn-ak-scissors.b.st-hatena.com/image/square/68dfefdf912704b3d43f2ab908b5fbb6f5be2c6a/height=288;version=1;width=512/https%3A%2F%2Fics.media%2Fentry%2F200225%2Fimages%2Feyecatch.png" alt="CSS・SVGとVue.jsでのアニメーション作成入門 - ライブラリに頼らない表現力を身に付けよう - 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://zenn.dev/marokanatani/articles/compare_vue_and_react"><span>あとで読む</span> </button> </div> <div class="centerarticle-entry-header"> <h3 class="centerarticle-entry-title"> <a href="https://zenn.dev/marokanatani/articles/compare_vue_and_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%2Fzenn.dev%2Fmarokanatani%2Farticles%2Fcompare_vue_and_react" alt="">Reactを使うのかVueを使うのかについて個人的なモチベーションを整理したかった </a> </h3> <ul class="centerarticle-entry-data"> <li> <span class="centerarticle-users"> <a href="/entry/s/zenn.dev/marokanatani/articles/compare_vue_and_react" class="js-keyboard-entry-page-openable" title="Reactを使うのかVueを使うのかについて個人的なモチベーションを整理したかった (273 ブックマーク)" data-gtm-click-label="entry-search-result-item-users"> 273 users </a> </span> </li> <li> <a href="/site/zenn.dev/marokanatani" title="『zenn.dev/marokanatani』の新着エントリー" data-gtm-click-label="entry-search-result-item-site-search-url"> zenn.dev/marokanatani </a> </li> <li> <a href="/hotentry/it" data-gtm-click-label="entry-search-result-item-category">テクノロジー</a> </li> <li><span class="entry-contents-date">2022/03/28</span></li> </ul> </div> <div class="centerarticle-entry-contents has-image"> <div class="centerarticle-entry-item"> <p class="centerarticle-entry-summary">本記事はあくまで執筆時点(2022/3/27)での一意見でありますので、今後時間や技術的な変化により参考にならない部分も出てくるかもしれません。 Reactはいいぞ、Vueはいいぞと様々な情報が世の中には溢れているものの、「こういう場合には」という前提条件にあまり言及されていない情報が多いような気がしたので自分なりの視点で考えてみたいと思いました。また、SvelteやAngular等他のフレームワークもありますが、そちらは個人的にはよくわからないので、あくまでReactとVueについてだけ言及していきます。私のフロントエンド経験と気持ちの変化 2018年くらいにReactを勉強し始める。 → Reactって難しい…。 2019年くらいにVueを学び始める。 → Vueって簡単！Reactよりわかりやすくてええやん！ 2020年くらいにNuxtの案件に参画する。 → Webフロントエンド</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/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/javascript" data-gtm-click-label="entry-search-result-item-tag">javascript</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%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/%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/svelte" data-gtm-click-label="entry-search-result-item-tag">svelte</a></li> </ul> <div class="following-bookmarks-container js-following-bookmarks-container" data-entry-url="https://zenn.dev/marokanatani/articles/compare_vue_and_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://zenn.dev/marokanatani/articles/compare_vue_and_react" class="centerarticle-entry-image" target="_blank" rel="noopener"> <img src="https://cdn-ak-scissors.b.st-hatena.com/image/square/2f46dae520b7369839dbe85d29206c2928c9191f/height=288;version=1;width=512/https%3A%2F%2Fres.cloudinary.com%2Fzenn%2Fimage%2Fupload%2Fs--hv5TPk9U--%2Fc_fit%252Cg_north_west%252Cl_text%3Anotosansjp-medium.otf_55%3AReact%2525E3%252582%252592%2525E4%2525BD%2525BF%2525E3%252581%252586%2525E3%252581%2525AE%2525E3%252581%25258BVue%2525E3%252582%252592%2525E4%2525BD%2525BF%2525E3%252581%252586%2525E3%252581%2525AE%2525E3%252581%25258B%2525E3%252581%2525AB%2525E3%252581%2525A4%2525E3%252581%252584%2525E3%252581%2525A6%2525E5%252580%25258B%2525E4%2525BA%2525BA%2525E7%25259A%252584%2525E3%252581%2525AA%2525E3%252583%2525A2%2525E3%252583%252581%2525E3%252583%252599%2525E3%252583%2525BC%2525E3%252582%2525B7%2525E3%252583%2525A7%2525E3%252583%2525B3%2525E3%252582%252592%2525E6%252595%2525B4%2525E7%252590%252586%2525E3%252581%252597%2525E3%252581%25259F%2525E3%252581%25258B%2525E3%252581%2525A3%2525E3%252581%25259F%252Cw_1010%252Cx_90%252Cy_100%2Fg_south_west%252Cl_text%3Anotosansjp-medium.otf_37%3AmaroKanatani%252Cx_203%252Cy_121%2Fg_south_west%252Ch_90%252Cl_fetch%3AaHR0cHM6Ly9zdG9yYWdlLmdvb2dsZWFwaXMuY29tL3plbm4tdXNlci11cGxvYWQvYXZhdGFyL2IxNTUzZDY3ZjkuanBlZw%3D%3D%252Cr_max%252Cw_90%252Cx_87%252Cy_95%2Fv1627283836%2Fdefault%2Fog-base-w1200-v2.png" alt="Reactを使うのかVueを使うのかについて個人的なモチベーションを整理したかった" 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/vue?page=2" class="js-keyboard-openable">2</a></span> <span class="js-keyboard-selectable-item"><a href="https://b.hatena.ne.jp/q/vue?page=3" class="js-keyboard-openable">3</a></span> <span class="js-keyboard-selectable-item"><a href="https://b.hatena.ne.jp/q/vue?page=4" class="js-keyboard-openable">4</a></span> <span class="js-keyboard-selectable-item"><a href="https://b.hatena.ne.jp/q/vue?page=5" class="js-keyboard-openable">5</a></span> <span class="js-keyboard-selectable-item"><a href="https://b.hatena.ne.jp/q/vue?page=6" class="js-keyboard-openable">6</a></span> <span class="js-keyboard-selectable-item"><a href="https://b.hatena.ne.jp/q/vue?page=7" class="js-keyboard-openable">7</a></span> <span class="js-keyboard-selectable-item"><a href="https://b.hatena.ne.jp/q/vue?page=8" class="js-keyboard-openable">8</a></span> <span class="js-keyboard-selectable-item"><a href="https://b.hatena.ne.jp/q/vue?page=9" class="js-keyboard-openable">9</a></span> <span class="js-keyboard-selectable-item"><a href="https://b.hatena.ne.jp/q/vue?page=10" class="js-keyboard-openable">10</a></span> <span class="centerarticle-pager-next js-keyboard-selectable-item"><a href="https://b.hatena.ne.jp/q/vue?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/www.nedo.go.jp/news/press/AA5_101809.html" title="国内公的機関として初めて、量子コンピューターの利活用事例集を公開しました | ニュース | NEDO" data-gtm-label="entry-recentEntriesInEntrySearch-title">国内公的機関として初めて、量子コンピューターの利活用事例集を公開しました | ニュース | NEDO</a></h3> <p class="entry-group-meta"><span class="entry-group-users"><a href="/entry/s/www.nedo.go.jp/news/press/AA5_101809.html" data-gtm-label="entry-recentEntriesInEntrySearch-users">1 user</a></span><span class="entry-group-domain"><a href="/site/www.nedo.go.jp/" data-gtm-label="entry-recentEntriesInEntrySearch-domain"><img src="https://cdn-ak2.favicon.st-hatena.com/64?url=https%3A%2F%2Fwww.nedo.go.jp%2Fnews%2Fpress%2FAA5_101809.html" alt="">www.nedo.go.jp</a></span></p> </div> </div> </li> <li> <div class="entry-group-list-inner"> <div class="entry-group-text"> <h3 class="entry-group-title"><a href="/entry/s/shiruto.jp/culture/6031/" title="<strong>『百年の孤独』はいかにして読むべきか？　文学部教授が教える“難読”を楽しむ方法</strong>" data-gtm-label="entry-recentEntriesInEntrySearch-title"><strong>『百年の孤独』はいかにして読むべきか？　文学部教授が教える“難読”を楽しむ方法</strong></a></h3> <p class="entry-group-meta"><span class="entry-group-users"><a href="/entry/s/shiruto.jp/culture/6031/" data-gtm-label="entry-recentEntriesInEntrySearch-users">1 user</a></span><span class="entry-group-domain"><a href="/site/shiruto.jp/" data-gtm-label="entry-recentEntriesInEntrySearch-domain"><img src="https://cdn-ak2.favicon.st-hatena.com/64?url=https%3A%2F%2Fshiruto.jp%2Fculture%2F6031%2F" alt="">shiruto.jp</a></span></p> </div> </div> </li> <li> <div class="entry-group-list-inner"> <div class="entry-group-text"> <h3 class="entry-group-title"><a href="/entry/s/sotokoto-online.jp/sotokoto_pen_club/25737" title="私が訪れた地域の立ち飲み「宮先酒店/GuitarSakabar Penny Lane」（兵庫県高砂市） | sotokoto online（ソトコトオンライン）" data-gtm-label="entry-recentEntriesInEntrySearch-title">私が訪れた地域の立ち飲み「宮先酒店/GuitarSakabar Penny Lane」（兵庫県高砂市） | sotokoto online（ソトコトオンライン）</a></h3> <p class="entry-group-meta"><span class="entry-group-users"><a href="/entry/s/sotokoto-online.jp/sotokoto_pen_club/25737" data-gtm-label="entry-recentEntriesInEntrySearch-users">1 user</a></span><span class="entry-group-domain"><a href="/site/sotokoto-online.jp/" data-gtm-label="entry-recentEntriesInEntrySearch-domain"><img src="https://cdn-ak2.favicon.st-hatena.com/64?url=https%3A%2F%2Fsotokoto-online.jp%2Fsotokoto_pen_club%2F25737" alt="">sotokoto-online.jp</a></span></p> </div> </div> </li> <li> <div class="entry-group-list-inner"> <div class="entry-group-text"> <h3 class="entry-group-title"><a href="/entry/s/www.asahi.com/articles/AST2K2DJ7T2KPOMB008M.html" title="メンタル休職3年連続ワースト2位　奈良県知事「何としても脱却を」：朝日新聞" data-gtm-label="entry-recentEntriesInEntrySearch-title">メンタル休職3年連続ワースト2位　奈良県知事「何としても脱却を」：朝日新聞</a></h3> <p class="entry-group-meta"><span class="entry-group-users"><a href="/entry/s/www.asahi.com/articles/AST2K2DJ7T2KPOMB008M.html" data-gtm-label="entry-recentEntriesInEntrySearch-users">1 user</a></span><span class="entry-group-domain"><a href="/site/www.asahi.com/" data-gtm-label="entry-recentEntriesInEntrySearch-domain"><img src="https://cdn-ak2.favicon.st-hatena.com/64?url=https%3A%2F%2Fwww.asahi.com%2Farticles%2FAST2K2DJ7T2KPOMB008M.html" alt="">www.asahi.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/gooday.nikkei.co.jp/atcl/column/20/120300008/021300055/" title="先発品と後発品、目薬ならではの「違い」って何？" data-gtm-label="entry-recentEntriesInEntrySearch-title">先発品と後発品、目薬ならではの「違い」って何？</a></h3> <p class="entry-group-meta"><span class="entry-group-users"><a href="/entry/s/gooday.nikkei.co.jp/atcl/column/20/120300008/021300055/" data-gtm-label="entry-recentEntriesInEntrySearch-users">1 user</a></span><span class="entry-group-domain"><a href="/site/gooday.nikkei.co.jp/" data-gtm-label="entry-recentEntriesInEntrySearch-domain"><img src="https://cdn-ak2.favicon.st-hatena.com/64?url=https%3A%2F%2Fgooday.nikkei.co.jp%2Fatcl%2Fcolumn%2F20%2F120300008%2F021300055%2F" alt="">gooday.nikkei.co.jp</a></span></p> </div> </div> </li> <li> <div class="entry-group-list-inner"> <div class="entry-group-text"> <h3 class="entry-group-title"><a href="/entry/s/www.shionogi.com/jp/ja/sustainability/informations-for-id/covid-care.html?utm_source=x&utm_medium=display&utm_campaign=50-&utm_content=all_07_a&twclid=2-75vcuifisq3dvg5sgjw4mdwjn" title="新型コロナ最新情報｜コロナ早期受診｜自分と、大切な人のために。｜塩野義製薬" data-gtm-label="entry-recentEntriesInEntrySearch-title">新型コロナ最新情報｜コロナ早期受診｜自分と、大切な人のために。｜塩野義製薬</a></h3> <p class="entry-group-meta"><span class="entry-group-users"><a href="/entry/s/www.shionogi.com/jp/ja/sustainability/informations-for-id/covid-care.html?utm_source=x&utm_medium=display&utm_campaign=50-&utm_content=all_07_a&twclid=2-75vcuifisq3dvg5sgjw4mdwjn" data-gtm-label="entry-recentEntriesInEntrySearch-users">1 user</a></span><span class="entry-group-domain"><a href="/site/www.shionogi.com/" data-gtm-label="entry-recentEntriesInEntrySearch-domain"><img src="https://cdn-ak2.favicon.st-hatena.com/64?url=https%3A%2F%2Fwww.shionogi.com%2Fjp%2Fja%2Fsustainability%2Finformations-for-id%2Fcovid-care.html%3Futm_source%3Dx%26utm_medium%3Ddisplay%26utm_campaign%3D50-%26utm_content%3Dall_07_a%26twclid%3D2-75vcuifisq3dvg5sgjw4mdwjn" alt="">www.shionogi.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/0c3a38c41aeb08c713c990efb1b369be703ea86c/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/0c3a38c41aeb08c713c990efb1b369be703ea86c/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/0c3a38c41aeb08c713c990efb1b369be703ea86c/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>