CINXE.COM

<!DOCTYPE html> <html lang="ja" data-page-scope="EntrySearch" data-stable-request-url="https://b.hatena.ne.jp/q/vue.js" data-device-type="PC" data-sentry-environment="production" data-sentry-sample-rate="0.1" data-entry-search-query="vue.js" 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.jsの人気記事 566件 - はてなブックマーク</title> <script src="https://b.st-hatena.com/1b3c3aaeeb3650284f153f8a5a507d736736a15d/js/v4/bookmark.js" async></script> <link type="text/css" rel="stylesheet" href="https://b.st-hatena.com/1b3c3aaeeb3650284f153f8a5a507d736736a15d/css/v4/pikaday.css" /> <link type="text/css" rel="stylesheet" href="https://b.st-hatena.com/1b3c3aaeeb3650284f153f8a5a507d736736a15d/css/v4/triangle.css" /> <link type="text/css" rel="stylesheet" href="https://b.st-hatena.com/1b3c3aaeeb3650284f153f8a5a507d736736a15d/css/v4/bookmark.css" /> <link type="text/css" rel="stylesheet" href="https://b.st-hatena.com/1b3c3aaeeb3650284f153f8a5a507d736736a15d/css/v4/bookmark.star.css" /> <link rel="canonical" href="https://b.hatena.ne.jp/q/vue.js" /> <link rel="next" href="/q/vue.js?target=tag&page=2&safe=on&users=3&sort=popular&date_range=5y"> <link rel="shortcut icon" type="image/x-icon" href="/favicon.ico" /> <meta name="viewport" content="width=device-width"> <link rel="search" type="application/opensearchdescription+xml" title="はてなブックマーク検索" href="/opensearch.xml" /> <link rel="apple-touch-icon-precomposed" href="https://b.st-hatena.com/1b3c3aaeeb3650284f153f8a5a507d736736a15d/images/v4/public/apple-touch-icon-precomposed.png" /> <link rel="mask-icon" href="https://b.st-hatena.com/1b3c3aaeeb3650284f153f8a5a507d736736a15d/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/1b3c3aaeeb3650284f153f8a5a507d736736a15d/images/v4/public/icons/bookmark.ico" /> <meta name="msapplication-task" content="name=マイブックマーク; action-uri=/my; icon-uri=https://b.st-hatena.com/1b3c3aaeeb3650284f153f8a5a507d736736a15d/images/v4/public/icons/my-bookmark.ico" /> <meta name="msapplication-task" content="name=お気に入りのブックマーク; action-uri=/my/favorite; icon-uri=https://b.st-hatena.com/1b3c3aaeeb3650284f153f8a5a507d736736a15d/images/v4/public/icons/favorite-bookmark.ico" /> <meta name="msapplication-task" content="name=人気エントリー; action-uri=/hotentry; icon-uri=https://b.st-hatena.com/1b3c3aaeeb3650284f153f8a5a507d736736a15d/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.js?mode=rss&target=tag&safe=on&users=3&sort=popular&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.js" 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/1b3c3aaeeb3650284f153f8a5a507d736736a15d/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/1b3c3aaeeb3650284f153f8a5a507d736736a15d/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/1b3c3aaeeb3650284f153f8a5a507d736736a15d/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/1b3c3aaeeb3650284f153f8a5a507d736736a15d/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.js" 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.js?users=3&sort=popular&date_range=5y&safe=on&target=all" >すべて</a></li> <li><a href="/q/vue.js?safe=on&target=tag&date_range=5y&sort=popular&users=3" class="is-current">タグ</a></li> <li><a href="/q/vue.js?date_range=5y&sort=popular&users=3&safe=on&target=title" >タイトル</a></li> <li><a href="/q/vue.js?sort=popular&users=3&date_range=5y&target=text&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.js?safe=on&target=tag&date_range=5y&users=3&sort=recent" >新着</a></li> <li><a href="/q/vue.js?safe=on&target=tag&date_range=5y&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.js?sort=popular&users=1&date_range=5y&target=tag&safe=on" >1 user</a></li> <li><a href="/q/vue.js?sort=popular&users=3&date_range=5y&safe=on&target=tag" class="is-current">3 users</a></li> <li><a href="/q/vue.js?safe=on&target=tag&date_range=5y&users=50&sort=popular" >50 users</a></li> <li><a href="/q/vue.js?safe=on&target=tag&sort=popular&users=100&date_range=5y" >100 users</a></li> <li><a href="/q/vue.js?date_range=5y&sort=popular&users=500&target=tag&safe=on" >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.js?users=3&sort=popular&date_range=5y&safe=on&target=tag" class="is-current">オン</a></li> <li><a href="/q/vue.js?date_range=5y&sort=popular&users=3&target=tag&safe=off" >オフ</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.js?users=3&sort=popular&date_range=all&safe=on&target=tag" >すべて</a></li> <li><a href="/q/vue.js?users=3&sort=popular&date_range=w&safe=on&target=tag" >1週間</a></li> <li><a href="/q/vue.js?safe=on&target=tag&date_range=m&users=3&sort=popular" >1ヶ月</a></li> <li><a href="/q/vue.js?sort=popular&users=3&date_range=y&target=tag&safe=on" >1年</a></li> </ul> <form method="get" class="js-entrysearch-datepicker-form"> <input value="vue.js" 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 件 / 566件</p> <div class="entrysearch-bar-inner"> <button class="entrysearch-filter-btn js-entrysearch-filter-btn">絞り込み</button> <a class="entrysearch-sort-btn" href="/q/vue.js?safe=on&target=tag&date_range=5y&sort=popular&users=3">新着順</a> <a class="entrysearch-sort-btn is-current" href="/q/vue.js?sort=recent&users=3&date_range=5y&target=tag&safe=on">人気順</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.jsの検索結果</span><span class="entrysearch-result">1 - 40 件 / 566件</span> </h2> <div class="entrysearch-summary-text"> <span>vue.js</span>に関するエントリは<span>566</span>件あります。 <span>javascript</span>、 <span>react</span>、 <span>開発</span> などが関連タグです。人気エントリには <span>『レガシーおじさん、SPAを始めてみた。そして限界を知る』</span>などがあります。 </div> <div class="entrysearch-related-entries" data-gtm-inview-label="entry-search-recommend-header"> <h3 class="entrysearch-related-title">vue.jsの関連エントリー</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://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://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://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> <li class="entrysearch-related-listitem"> <div class="entrysearch-related-entry"> <a href="https://tech.smartcamp.co.jp/entry/new-graduate-learning-vue" 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/d69b71cac6a69bc8ad75edd498fbbafd57a91c77/height=288;version=1;width=512/https%3A%2F%2Fcdn-ak.f.st-hatena.com%2Fimages%2Ffotolife%2Fj%2Fjonpili%2F20200528%2F20200528175817.png" alt="20卒未経験エンジニアが研修でVue.jsに自信を持った話 - SMARTCAMP Engineer Blog"> </a> <h4 class="entrysearch-related-entry-title"> <a href="https://tech.smartcamp.co.jp/entry/new-graduate-learning-vue" target="_blank" rel="noopener" data-gtm-click-label="entry-search-recommend-header-c-title"> 20卒未経験エンジニアが研修でVue.jsに自信を持った話 - SMARTCAMP Engineer Blog </a> </h4> <a href="/entry/s/tech.smartcamp.co.jp/entry/new-graduate-learning-vue" class="entrysearch-related-users" data-gtm-click-label="entry-search-recommend-header-c-users"> 55 users </a> </div> </li> <li class="entrysearch-related-listitem"> <div class="entrysearch-related-entry"> <a href="https://devblog.thebase.in/entry/2020/07/16/141446" 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/e6854ada62cf0708a855c1d03999e051a3809a53/height=288;version=1;width=512/https%3A%2F%2Fcdn.image.st-hatena.com%2Fimage%2Fscale%2F8b45fd2b4ceca84edc19726664e6bdd6b711e430%2Fbackend%3Dimagemagick%3Bversion%3D1%3Bwidth%3D1300%2Fhttps%253A%252F%252Fcdn.user.blog.st-hatena.com%252Fdefault_entry_og_image%252F3327491%252F1594883367766636" alt="eslint-plugin-vue で来たる Vue.js 3 のリリースに備えよう - BASEプロダクトチームブログ"> </a> <h4 class="entrysearch-related-entry-title"> <a href="https://devblog.thebase.in/entry/2020/07/16/141446" target="_blank" rel="noopener" data-gtm-click-label="entry-search-recommend-header-c-title"> eslint-plugin-vue で来たる Vue.js 3 のリリースに備えよう - BASEプロダクトチームブログ </a> </h4> <a href="/entry/s/devblog.thebase.in/entry/2020/07/16/141446" class="entrysearch-related-users" data-gtm-click-label="entry-search-recommend-header-c-users"> 48 users </a> </div> </li> <li class="entrysearch-related-listitem"> <div class="entrysearch-related-entry"> <a href="https://findy-code.io/engineer-lab/kazupon" 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/f78a90fd1a9d3039ccf813486651b103785de0b6/height=288;version=1;width=512/https%3A%2F%2Fcdn.image.st-hatena.com%2Fimage%2Fscale%2F28f62e90fb4a03ec7f3c7e8e8dbd0dfa11dd2f8d%2Fbackend%3Dimagemagick%3Bversion%3D1%3Bwidth%3D1300%2Fhttps%253A%252F%252Fcdn-ak.f.st-hatena.com%252Fimages%252Ffotolife%252Ff%252Ffindy-shimada%252F20250117%252F20250117174910.jpg" alt="遠回りしたことは決して無駄にはならない。Vue.jsに魅せられ、OSSをライフワークにした私のキャリア - Findy Engineer Lab"> </a> <h4 class="entrysearch-related-entry-title"> <a href="https://findy-code.io/engineer-lab/kazupon" target="_blank" rel="noopener" data-gtm-click-label="entry-search-recommend-header-c-title"> 遠回りしたことは決して無駄にはならない。Vue.jsに魅せられ、OSSをライフワークにした私のキャリア - Findy Engineer Lab </a> </h4> <a href="/entry/s/findy-code.io/engineer-lab/kazupon" class="entrysearch-related-users" data-gtm-click-label="entry-search-recommend-header-c-users"> 39 users </a> </div> </li> <li class="entrysearch-related-listitem"> <div class="entrysearch-related-entry"> <a href="https://tech.smartcamp.co.jp/entry/vuejs-performance-improvement" 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/931cbccfd3a447a43d4d43c7226a6e4c73aec5a9/height=288;version=1;width=512/https%3A%2F%2Fcdn.image.st-hatena.com%2Fimage%2Fscale%2Fd9ac5fa4d58d211ad5115eac09f94f4c8bd21095%2Fbackend%3Dimagemagick%3Bversion%3D1%3Bwidth%3D1300%2Fhttps%253A%252F%252Fcdn-ak.f.st-hatena.com%252Fimages%252Ffotolife%252Fy%252Fyuxyosh%252F20200416%252F20200416180017.png" alt="プロダクトのパフォーマンスを改善するためにVue.jsの関数型コンポーネントやpropsに関する施策を行った話 - SMARTCAMP Engineer Blog"> </a> <h4 class="entrysearch-related-entry-title"> <a href="https://tech.smartcamp.co.jp/entry/vuejs-performance-improvement" target="_blank" rel="noopener" data-gtm-click-label="entry-search-recommend-header-c-title"> プロダクトのパフォーマンスを改善するためにVue.jsの関数型コンポーネントやpropsに関する施策を行った話 - SMARTCAMP Engineer Blog </a> </h4> <a href="/entry/s/tech.smartcamp.co.jp/entry/vuejs-performance-improvement" class="entrysearch-related-users" data-gtm-click-label="entry-search-recommend-header-c-users"> 36 users </a> </div> </li> </ul> </div> <ul class="entrysearch-articles"> <li class="bookmark-item js-user-bookmark-item js-keyboard-selectable-item"> <div class="centerarticle-entry is-image-entry-unit"> <div class="js-bookmark-stock-button is-hidden"> <button class="js-bookmark-stock-button-ready readlater-button" data-gtm-click-label="entry-search-result-item-stock-button" title="あとで読む" aria-label="あとで読む" tabindex="0" type="button" data-href="https://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://qiita.com/Hiro-mi/items/18e00060a0f8654f49d6"><span>あとで読む</span> </button> </div> <div class="centerarticle-entry-header"> <h3 class="centerarticle-entry-title"> <a href="https://qiita.com/Hiro-mi/items/18e00060a0f8654f49d6" 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%2FHiro-mi%2Fitems%2F18e00060a0f8654f49d6" alt="">SPAのログイン認証のベストプラクティスがわからなかったのでわりと網羅的に研究してみた〜JWT or Session どっち？〜 - Qiita </a> </h3> <ul class="centerarticle-entry-data"> <li> <span class="centerarticle-users"> <a href="/entry/s/qiita.com/Hiro-mi/items/18e00060a0f8654f49d6" class="js-keyboard-entry-page-openable" title="SPAのログイン認証のベストプラクティスがわからなかったのでわりと網羅的に研究してみた〜JWT or Session どっち？〜 - Qiita (649 ブックマーク)" data-gtm-click-label="entry-search-result-item-users"> 649 users </a> </span> </li> <li> <a href="/site/qiita.com/Hiro-mi" title="『qiita.com/Hiro-mi』の新着エントリー" data-gtm-click-label="entry-search-result-item-site-search-url"> qiita.com/Hiro-mi </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/24</span></li> </ul> </div> <div class="centerarticle-entry-contents has-image"> <div class="centerarticle-entry-item"> <p class="centerarticle-entry-summary">SPAのログイン周りについて、「これがベストプラクティスだ！」という情報があまり見当たらないので、様々な可能性を模索してみました。いろいろな状況が想定され、今回記載する内容に考慮の漏れや不備などがありましたら是非コメントでご指摘いただきたいです！特に「おすすめ度：○」と記載しているものに対しての批判をどしどしお待ちしております！この記事でおすすめしているものであっても、ご自身の責任で十分な検討・検証の上で選択されてください。前提想定しているAPIは、ログイン外のAPIにはPOST/PUT/DELETEのものがなく、GETのみ GETのAPIにはDBを更新するなどの操作がないとし、そのためログイン外ではCSRFを考慮しなくてよい、という前提で話を進めます。また、XSSに関しては常に対策は必要なのですが（フレームワーク側が自動的にしてくれる部分もある）、認証周りに関係すること以</p> <ul class="entrysearch-entry-tags"> <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/JWT" data-gtm-click-label="entry-search-result-item-tag">JWT</a></li> <li><a href="/q/SPA" data-gtm-click-label="entry-search-result-item-tag">SPA</a></li> <li><a href="/q/%E3%81%82%E3%81%A8%E3%81%A7%E8%AA%AD%E3%82%80" data-gtm-click-label="entry-search-result-item-tag">あとで読む</a></li> <li><a href="/q/javascript" data-gtm-click-label="entry-search-result-item-tag">javascript</a></li> <li><a href="/q/Cookie" data-gtm-click-label="entry-search-result-item-tag">Cookie</a></li> <li><a href="/q/api" data-gtm-click-label="entry-search-result-item-tag">api</a></li> <li><a href="/q/CSRF" data-gtm-click-label="entry-search-result-item-tag">CSRF</a></li> <li><a href="/q/security" data-gtm-click-label="entry-search-result-item-tag">security</a></li> <li><a href="/q/%E3%82%BB%E3%82%AD%E3%83%A5%E3%83%AA%E3%83%86%E3%82%A3" 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/Hiro-mi/items/18e00060a0f8654f49d6"> <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/Hiro-mi/items/18e00060a0f8654f49d6" class="centerarticle-entry-image" target="_blank" rel="noopener"> <img src="https://cdn-ak-scissors.b.st-hatena.com/image/square/597486a82b1a0bc1f10cf74d2e4640ff3ace0765/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%253DaHR0cHM6Ly9xaWl0YS11c2VyLXByb2ZpbGUtaW1hZ2VzLmltZ2l4Lm5ldC9odHRwcyUzQSUyRiUyRnFpaXRhLWltYWdlLXN0b3JlLnMzLmFwLW5vcnRoZWFzdC0xLmFtYXpvbmF3cy5jb20lMkYwJTJGMjM2NDcyJTJGcHJvZmlsZS1pbWFnZXMlMkYxNTg3NTU1OTAzP2l4bGliPXJiLTQuMC4wJmFyPTElM0ExJmZpdD1jcm9wJm1hc2s9ZWxsaXBzZSZmbT1wbmczMiZzPWZlZWZmYjRkYWM0YjdhOGUwMDI0ZmFiYzUxOWJjYjNl%2526blend-x%253D120%2526blend-y%253D467%2526blend-w%253D82%2526blend-h%253D82%2526blend-mode%253Dnormal%2526s%253D6a8342f804c4b6d59bae42cfb9b40336%3Fixlib%3Drb-4.0.0%26w%3D1200%26fm%3Djpg%26mark64%3DaHR0cHM6Ly9xaWl0YS11c2VyLWNvbnRlbnRzLmltZ2l4Lm5ldC9-dGV4dD9peGxpYj1yYi00LjAuMCZ3PTk2MCZoPTMyNCZ0eHQ9U1BBJUUzJTgxJUFFJUUzJTgzJUFEJUUzJTgyJUIwJUUzJTgyJUE0JUUzJTgzJUIzJUU4JUFBJThEJUU4JUE4JUJDJUUzJTgxJUFFJUUzJTgzJTk5JUUzJTgyJUI5JUUzJTgzJTg4JUUzJTgzJTk3JUUzJTgzJUE5JUUzJTgyJUFGJUUzJTgzJTg2JUUzJTgyJUEzJUUzJTgyJUI5JUUzJTgxJThDJUUzJTgyJThGJUUzJTgxJThCJUUzJTgyJTg5JUUzJTgxJUFBJUUzJTgxJThCJUUzJTgxJUEzJUUzJTgxJTlGJUUzJTgxJUFFJUUzJTgxJUE3JUUzJTgyJThGJUUzJTgyJThBJUUzJTgxJUE4JUU3JUI2JUIyJUU3JUJFJTg1JUU3JTlBJTg0JUUzJTgxJUFCJUU3JUEwJTk0JUU3JUE5JUI2JUUzJTgxJTk3JUUzJTgxJUE2JUUzJTgxJUJGJUUzJTgxJTlGJUUzJTgwJTlDSldUJTIwb3IlMjBTZSVFMiU4MCVBNiZ0eHQtYWxpZ249bGVmdCUyQ3RvcCZ0eHQtY29sb3I9JTIzMUUyMTIxJnR4dC1mb250PUhpcmFnaW5vJTIwU2FucyUyMFc2JnR4dC1zaXplPTU2JnR4dC1wYWQ9MCZzPWUwYWY4YTUwMmU0NjU0OTZmYzQ1Y2QyZDE5NjYyNmQ3%26mark-x%3D120%26mark-y%3D112%26blend64%3DaHR0cHM6Ly9xaWl0YS11c2VyLWNvbnRlbnRzLmltZ2l4Lm5ldC9-dGV4dD9peGxpYj1yYi00LjAuMCZ3PTgzOCZoPTU4JnR4dD0lNDBIaXJvLW1pJnR4dC1jb2xvcj0lMjMxRTIxMjEmdHh0LWZvbnQ9SGlyYWdpbm8lMjBTYW5zJTIwVzYmdHh0LXNpemU9MzYmdHh0LXBhZD0wJnM9NmE1MDVhODdkYjMzOWY4NWQ1MmRhZDFlZjhkNzM3Yjc%26blend-x%3D242%26blend-y%3D480%26blend-w%3D838%26blend-h%3D46%26blend-fit%3Dcrop%26blend-crop%3Dleft%252Cbottom%26blend-mode%3Dnormal%26s%3D5a8b65cc9ff25a6f9c567e4231c44335" alt="SPAのログイン認証のベストプラクティスがわからなかったのでわりと網羅的に研究してみた〜JWT or Session どっち？〜 - 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://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（アンビ） (630 ブックマーク)" data-gtm-click-label="entry-search-result-item-users"> 630 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> <div class="related-entry-wrapper"> <div class="entrysearch-related-entries" data-gtm-inview-label="entry-search-recommend-middle"> <h3 class="entrysearch-related-title">vue.jsの関連エントリー</h3> <ul class="entrysearch-related-list"> <li class="entrysearch-related-listitem"> <div class="entrysearch-related-entry"> <a href="https://speakerdeck.com/minorun365/yasasiimcpru-men" 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/4506a94edd331ddf1808d7b80e993e481a698524/height=288;version=1;width=512/https%3A%2F%2Ffiles.speakerdeck.com%2Fpresentations%2F10337a158da045d3a8374de70ea61986%2Fslide_0.jpg%3F34559608" alt="やさしいMCP入門"> </a> <h4 class="entrysearch-related-entry-title"> <a href="https://speakerdeck.com/minorun365/yasasiimcpru-men" target="_blank" rel="noopener" data-gtm-click-label="entry-search-recommend-middle-title"> やさしいMCP入門 </a> </h4> <a href="/entry/s/speakerdeck.com/minorun365/yasasiimcpru-men" class="entrysearch-related-users" data-gtm-click-label="entry-search-recommend-middle-users"> 782 users </a> </div> </li> <li class="entrysearch-related-listitem"> <div class="entrysearch-related-entry"> <a href="https://www.publickey1.jp/blog/25/github_copilotcopilot.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/db6fafd6fa378597f67aae9950f185c3ddd8d50f/height=288;version=1;width=512/https%3A%2F%2Fwww.publickey1.jp%2F2025%2Fgithub-copilot-codereview-ga.png" alt="「GitHub Copilotコードレビュー」正式リリース。コードのバグや性能劣化要因など基本的なレビューをCopilotが代行、人間のコードレビューを効率化"> </a> <h4 class="entrysearch-related-entry-title"> <a href="https://www.publickey1.jp/blog/25/github_copilotcopilot.html" target="_blank" rel="noopener" data-gtm-click-label="entry-search-recommend-middle-title"> 「GitHub Copilotコードレビュー」正式リリース。コードのバグや性能劣化要因など基本的なレビューをCopilotが代行、人間のコードレビューを効率化 </a> </h4> <a href="/entry/s/www.publickey1.jp/blog/25/github_copilotcopilot.html" class="entrysearch-related-users" data-gtm-click-label="entry-search-recommend-middle-users"> 212 users </a> </div> </li> <li class="entrysearch-related-listitem"> <div class="entrysearch-related-entry"> <a href="https://henjinkutsu.com/text/pc/magicmirror2/" 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/f07e8e315fb7236525ffbf36fff177399142e16a/height=288;version=1;width=512/https%3A%2F%2Fhenjinkutsu.com%2Fwp_henjinkutsu%2Fwp-content%2Fuploads%2F2025%2F04%2FIMG_6026-768x1024.jpg" alt="余った液晶テレビ(モニタ)を情報表示端末にする。 | OKUTSU"> </a> <h4 class="entrysearch-related-entry-title"> <a href="https://henjinkutsu.com/text/pc/magicmirror2/" target="_blank" rel="noopener" data-gtm-click-label="entry-search-recommend-middle-title"> 余った液晶テレビ(モニタ)を情報表示端末にする。 | OKUTSU </a> </h4> <a href="/entry/s/henjinkutsu.com/text/pc/magicmirror2/" class="entrysearch-related-users" data-gtm-click-label="entry-search-recommend-middle-users"> 550 users </a> </div> </li> <li class="entrysearch-related-listitem"> <div class="entrysearch-related-entry"> <a href="https://k-tai.watch.impress.co.jp/docs/column/stapa/2003865.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/52ff6e206871b2fad7a8b6014d06d465f379558b/height=288;version=1;width=512/https%3A%2F%2Fk-tai.watch.impress.co.jp%2Fimg%2Fktw%2Flist%2F2003%2F865%2F1.jpeg" alt="[スタパ齋藤の「スタパトロニクスMobile」] 画像生成AIの進歩が著しいッ!!!　Gemini 2.0 Flashがスゴすぎた"> </a> <h4 class="entrysearch-related-entry-title"> <a href="https://k-tai.watch.impress.co.jp/docs/column/stapa/2003865.html" target="_blank" rel="noopener" data-gtm-click-label="entry-search-recommend-middle-title"> [スタパ齋藤の「スタパトロニクスMobile」] 画像生成AIの進歩が著しいッ!!!　Gemini 2.0 Flashがスゴすぎた </a> </h4> <a href="/entry/s/k-tai.watch.impress.co.jp/docs/column/stapa/2003865.html" class="entrysearch-related-users" data-gtm-click-label="entry-search-recommend-middle-users"> 102 users </a> </div> </li> <li class="entrysearch-related-listitem"> <div class="entrysearch-related-entry"> <a href="https://pc.watch.impress.co.jp/docs/column/gyokai/2004492.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/07568676f93451785728b600479bde8ca22d6828/height=288;version=1;width=512/https%3A%2F%2Fpc.watch.impress.co.jp%2Fimg%2Fpcw%2Flist%2F2004%2F492%2F263.jpg" alt="【大河原克行の「パソコン業界、東奔西走」】レバノンでのトランシーバー爆発事件から半年。アイコムが風評被害を受けなかった理由とは？"> </a> <h4 class="entrysearch-related-entry-title"> <a href="https://pc.watch.impress.co.jp/docs/column/gyokai/2004492.html" target="_blank" rel="noopener" data-gtm-click-label="entry-search-recommend-middle-title"> 【大河原克行の「パソコン業界、東奔西走」】レバノンでのトランシーバー爆発事件から半年。アイコムが風評被害を受けなかった理由とは？ </a> </h4> <a href="/entry/s/pc.watch.impress.co.jp/docs/column/gyokai/2004492.html" class="entrysearch-related-users" data-gtm-click-label="entry-search-recommend-middle-users"> 89 users </a> </div> </li> <li class="entrysearch-related-listitem"> <div class="entrysearch-related-entry"> <a href="http://www.all-nationz.com/archives/1083290262.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/b770a8ad74c6f4e2188cfb1e93532e6430cba2fc/height=288;version=1;width=512/https%3A%2F%2Flivedoor.blogimg.jp%2Fall_nations%2Fimgs%2F0%2Fa%2F0a4b3c78-s.jpg" alt="海外「日本人が考えたAIの使い方が素晴らしい、間取り図を立体化するんだ」 : 海外の万国反応記＠海外の反応"> </a> <h4 class="entrysearch-related-entry-title"> <a href="http://www.all-nationz.com/archives/1083290262.html" target="_blank" rel="noopener" data-gtm-click-label="entry-search-recommend-middle-title"> 海外「日本人が考えたAIの使い方が素晴らしい、間取り図を立体化するんだ」 : 海外の万国反応記＠海外の反応 </a> </h4> <a href="/entry/www.all-nationz.com/archives/1083290262.html" class="entrysearch-related-users" data-gtm-click-label="entry-search-recommend-middle-users"> 84 users </a> </div> </li> <li class="entrysearch-related-listitem"> <div class="entrysearch-related-entry"> <a href="https://zenn.dev/urakawa_jinsei/articles/3efa94ac6d16e7" 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/055ee007f73b50b554c989d83b731fde5b00d677/height=288;version=1;width=512/https%3A%2F%2Fres.cloudinary.com%2Fzenn%2Fimage%2Fupload%2Fs--G6AFMYYw--%2Fc_fit%252Cg_north_west%252Cl_text%3Anotosansjp-medium.otf_55%3AGo%2525E3%252581%2525AE%2525E9%252580%2525B2%2525E5%25258C%252596%2525E3%252581%2525AB%2525E4%2525B9%252597%2525E3%252582%25258A%2525E9%252581%252585%2525E3%252582%25258C%2525E3%252582%25258B%2525E3%252581%2525AA%2525EF%2525BC%252581modernize%2525E3%252583%252591%2525E3%252583%252583%2525E3%252582%2525B1%2525E3%252583%2525BC%2525E3%252582%2525B8%2525E3%252581%2525A7%2525E3%252582%2525B3%2525E3%252583%2525BC%2525E3%252583%252589%2525E3%252582%252592%2525E7%25258F%2525BE%2525E4%2525BB%2525A3%2525E5%25258C%252596%2525E3%252581%252599%2525E3%252582%25258B%2525E3%252583%2525AA%2525E3%252583%252595%2525E3%252582%2525A1%2525E3%252582%2525AF%2525E3%252582%2525BF%2525E3%252583%2525AA%2525E3%252583%2525B3%2525E3%252582%2525B0%2525E5%252585%2525A5%2525E9%252596%252580%252Cw_1010%252Cx_90%252Cy_100%2Fg_south_west%252Cl_text%3Anotosansjp-medium.otf_37%3A%2525E6%2525B5%2525A6%2525E5%2525B7%25259D%252520%2525E4%2525BB%252581%2525E6%252588%252590%252Cx_203%252Cy_121%2Fg_south_west%252Ch_90%252Cl_fetch%3AaHR0cHM6Ly9zdG9yYWdlLmdvb2dsZWFwaXMuY29tL3plbm4tdXNlci11cGxvYWQvYXZhdGFyLzhlNjMwN2Y5YzMuanBlZw%3D%3D%252Cr_max%252Cw_90%252Cx_87%252Cy_95%2Fv1627283836%2Fdefault%2Fog-base-w1200-v2.png" alt="Goの進化に乗り遅れるな！modernizeパッケージでコードを現代化するリファクタリング入門"> </a> <h4 class="entrysearch-related-entry-title"> <a href="https://zenn.dev/urakawa_jinsei/articles/3efa94ac6d16e7" target="_blank" rel="noopener" data-gtm-click-label="entry-search-recommend-middle-title"> Goの進化に乗り遅れるな！modernizeパッケージでコードを現代化するリファクタリング入門 </a> </h4> <a href="/entry/s/zenn.dev/urakawa_jinsei/articles/3efa94ac6d16e7" class="entrysearch-related-users" data-gtm-click-label="entry-search-recommend-middle-users"> 106 users </a> </div> </li> <li class="entrysearch-related-listitem"> <div class="entrysearch-related-entry"> <a href="https://azukiazusa.dev/blog/build-your-own-coding-ai-agent/" 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/6a13787bfaffb9ff882421db8021bc54262e8bc1/height=288;version=1;width=512/https%3A%2F%2Fazukiazusa.dev%2Fblog%2Fogp%2Fbuild-your-own-coding-ai-agent.png" alt="コーディング AI エージェントを自作してみよう"> </a> <h4 class="entrysearch-related-entry-title"> <a href="https://azukiazusa.dev/blog/build-your-own-coding-ai-agent/" target="_blank" rel="noopener" data-gtm-click-label="entry-search-recommend-middle-title"> コーディング AI エージェントを自作してみよう </a> </h4> <a href="/entry/s/azukiazusa.dev/blog/build-your-own-coding-ai-agent/" class="entrysearch-related-users" data-gtm-click-label="entry-search-recommend-middle-users"> 176 users </a> </div> </li> <li class="entrysearch-related-listitem"> <div class="entrysearch-related-entry"> <a href="https://qiita.com/ny7760/items/137dec44d7fb188defea" 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/8ba1814eb0c2ba7bb5b6ebe8e5e504cfb9e44e63/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%253DaHR0cHM6Ly9xaWl0YS11c2VyLXByb2ZpbGUtaW1hZ2VzLmltZ2l4Lm5ldC9odHRwcyUzQSUyRiUyRmF2YXRhcnMwLmdpdGh1YnVzZXJjb250ZW50LmNvbSUyRnUlMkY0MDEwODAwNiUzRnYlM0Q0P2l4bGliPXJiLTQuMC4wJmFyPTElM0ExJmZpdD1jcm9wJm1hc2s9ZWxsaXBzZSZmbT1wbmczMiZzPTY1MmI4NTk1Yzc1MTEyYzRjNzNjNGFhNWUyZTAxMjZh%2526blend-x%253D120%2526blend-y%253D467%2526blend-w%253D82%2526blend-h%253D82%2526blend-mode%253Dnormal%2526s%253Df2c0bcd83bc1d06d33b868977dc01778%3Fixlib%3Drb-4.0.0%26w%3D1200%26fm%3Djpg%26mark64%3DaHR0cHM6Ly9xaWl0YS11c2VyLWNvbnRlbnRzLmltZ2l4Lm5ldC9-dGV4dD9peGxpYj1yYi00LjAuMCZ3PTk2MCZoPTMyNCZ0eHQ9TUNQJUU1JUFGJUJFJUU1JUJGJTlDJUUzJTgxJTk3JUUzJTgxJTlGVlMlMjBDb2RlJUUzJTgxJUE3QVdTJTIwTUNQJUUzJTgyJTkyJUU0JUJEJUJGJUUzJTgxJTg2JnR4dC1hbGlnbj1sZWZ0JTJDdG9wJnR4dC1jb2xvcj0lMjMxRTIxMjEmdHh0LWZvbnQ9SGlyYWdpbm8lMjBTYW5zJTIwVzYmdHh0LXNpemU9NTYmdHh0LXBhZD0wJnM9MzUwMTA4YmJjOTI1MWMzMzhjOTc2NjhiYTViMTIwYmM%26mark-x%3D120%26mark-y%3D112%26blend64%3DaHR0cHM6Ly9xaWl0YS11c2VyLWNvbnRlbnRzLmltZ2l4Lm5ldC9-dGV4dD9peGxpYj1yYi00LjAuMCZ3PTgzOCZoPTU4JnR4dD0lNDBueTc3NjAmdHh0LWNvbG9yPSUyMzFFMjEyMSZ0eHQtZm9udD1IaXJhZ2lubyUyMFNhbnMlMjBXNiZ0eHQtc2l6ZT0zNiZ0eHQtcGFkPTAmcz00ZGIxYTJkNDNlOWY5MzRmMmZmMGU2NjU0N2VmMjBhYw%26blend-x%3D242%26blend-y%3D480%26blend-w%3D838%26blend-h%3D46%26blend-fit%3Dcrop%26blend-crop%3Dleft%252Cbottom%26blend-mode%3Dnormal%26s%3D9cfcfb3f7f06282f66a691a052494bb7" alt="MCP対応したVS CodeでAWS MCPを使う - Qiita"> </a> <h4 class="entrysearch-related-entry-title"> <a href="https://qiita.com/ny7760/items/137dec44d7fb188defea" target="_blank" rel="noopener" data-gtm-click-label="entry-search-recommend-middle-title"> MCP対応したVS CodeでAWS MCPを使う - Qiita </a> </h4> <a href="/entry/s/qiita.com/ny7760/items/137dec44d7fb188defea" class="entrysearch-related-users" data-gtm-click-label="entry-search-recommend-middle-users"> 170 users </a> </div> </li> <li class="entrysearch-related-listitem"> <div class="entrysearch-related-entry"> <a href="https://pc.watch.impress.co.jp/docs/topic/feature/2004494.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/3308503cc082a50e8a4ba9bf5261f6425701d89c/height=288;version=1;width=512/https%3A%2F%2Fpc.watch.impress.co.jp%2Fimg%2Fpcw%2Flist%2F2004%2F494%2Fimage.jpg" alt="【特集】ネット回線は10Gbpsにアップグレードすべきか？1Gbpsとの違いや環境構築方法を解説"> </a> <h4 class="entrysearch-related-entry-title"> <a href="https://pc.watch.impress.co.jp/docs/topic/feature/2004494.html" target="_blank" rel="noopener" data-gtm-click-label="entry-search-recommend-middle-title"> 【特集】ネット回線は10Gbpsにアップグレードすべきか？1Gbpsとの違いや環境構築方法を解説 </a> </h4> <a href="/entry/s/pc.watch.impress.co.jp/docs/topic/feature/2004494.html" class="entrysearch-related-users" data-gtm-click-label="entry-search-recommend-middle-users"> 25 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/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://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://zenn.dev/moya_dev/articles/1c3da5422fb7d0"><span>あとで読む</span> </button> </div> <div class="centerarticle-entry-header"> <h3 class="centerarticle-entry-title"> <a href="https://zenn.dev/moya_dev/articles/1c3da5422fb7d0" 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%2Fmoya_dev%2Farticles%2F1c3da5422fb7d0" alt="">とりあえずWebサービス作る時の私の技術選定ポイント@2022/02 </a> </h3> <ul class="centerarticle-entry-data"> <li> <span class="centerarticle-users"> <a href="/entry/s/zenn.dev/moya_dev/articles/1c3da5422fb7d0" class="js-keyboard-entry-page-openable" title="とりあえずWebサービス作る時の私の技術選定ポイント@2022/02 (522 ブックマーク)" data-gtm-click-label="entry-search-result-item-users"> 522 users </a> </span> </li> <li> <a href="/site/zenn.dev/moya_dev" title="『zenn.dev/moya_dev』の新着エントリー" data-gtm-click-label="entry-search-result-item-site-search-url"> zenn.dev/moya_dev </a> </li> <li> <a href="/hotentry/it" data-gtm-click-label="entry-search-result-item-category">テクノロジー</a> </li> <li><span class="entry-contents-date">2022/02/12</span></li> </ul> </div> <div class="centerarticle-entry-contents has-image"> <div class="centerarticle-entry-item"> <p class="centerarticle-entry-summary">はじめに inspired mogaさんのブラウザで動くサービスを作るときの技術選定が素晴らしい記事だったので、自分も書いてみる事にしました。幸いにも技術選定からのお仕事をする機会が多くて、自分の中でパターンが大体決まってきているので言語化してみます。前提が同じサービスは無いので絶対的な正解は無いですが、なんかしらの参考になれば幸いです。 ※2022/02時点私/よくあるお仕事について Web系のサービスなんかいい感じにするマンとして、フリーランスとして働いています。準委任という形でスタートアップ企業をお手伝いする事が多いです。 MVPを作りたい、もしくはMVPは行けたのでちゃんと作り直したい、という要望があって参画して、まるっと作ってそのまま運用をします。作って終わりではなくて、運用や拡張性を考えてやってます（サービスに必要なのはもちろん、運用する自分が楽だから）。前提エンジニ</p> <ul class="entrysearch-entry-tags"> <li><a href="/q/GCP" data-gtm-click-label="entry-search-result-item-tag">GCP</a></li> <li><a href="/q/%E3%81%82%E3%81%A8%E3%81%A7%E8%AA%AD%E3%82%80" data-gtm-click-label="entry-search-result-item-tag">あとで読む</a></li> <li><a href="/q/%E6%8A%80%E8%A1%93" data-gtm-click-label="entry-search-result-item-tag">技術</a></li> <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/%E9%96%8B%E7%99%BA" data-gtm-click-label="entry-search-result-item-tag">開発</a></li> <li><a href="/q/%E3%82%B5%E3%83%BC%E3%83%93%E3%82%B9" data-gtm-click-label="entry-search-result-item-tag">サービス</a></li> <li><a href="/q/%E6%8A%80%E8%A1%93%E9%81%B8%E5%AE%9A" data-gtm-click-label="entry-search-result-item-tag">技術選定</a></li> <li><a href="/q/typescript" data-gtm-click-label="entry-search-result-item-tag">typescript</a></li> <li><a href="/q/web" data-gtm-click-label="entry-search-result-item-tag">web</a></li> <li><a href="/q/Firebase" data-gtm-click-label="entry-search-result-item-tag">Firebase</a></li> </ul> <div class="following-bookmarks-container js-following-bookmarks-container" data-entry-url="https://zenn.dev/moya_dev/articles/1c3da5422fb7d0"> <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/moya_dev/articles/1c3da5422fb7d0" class="centerarticle-entry-image" target="_blank" rel="noopener"> <img src="https://cdn-ak-scissors.b.st-hatena.com/image/square/3dcbe6ea846b62f89593d6ae457246a5218d9759/height=288;version=1;width=512/https%3A%2F%2Fres.cloudinary.com%2Fzenn%2Fimage%2Fupload%2Fs--_gRzCVuQ--%2Fc_fit%252Cg_north_west%252Cl_text%3Anotosansjp-medium.otf_55%3A%2525E3%252581%2525A8%2525E3%252582%25258A%2525E3%252581%252582%2525E3%252581%252588%2525E3%252581%25259AWeb%2525E3%252582%2525B5%2525E3%252583%2525BC%2525E3%252583%252593%2525E3%252582%2525B9%2525E4%2525BD%25259C%2525E3%252582%25258B%2525E6%252599%252582%2525E3%252581%2525AE%2525E7%2525A7%252581%2525E3%252581%2525AE%2525E6%25258A%252580%2525E8%2525A1%252593%2525E9%252581%2525B8%2525E5%2525AE%25259A%2525E3%252583%25259D%2525E3%252582%2525A4%2525E3%252583%2525B3%2525E3%252583%252588%2525402022%25252F02%252Cw_1010%252Cx_90%252Cy_100%2Fg_south_west%252Cl_text%3Anotosansjp-medium.otf_37%3Adaisuke-fukuda%252Cx_203%252Cy_121%2Fg_south_west%252Ch_90%252Cl_fetch%3AaHR0cHM6Ly9zdG9yYWdlLmdvb2dsZWFwaXMuY29tL3plbm4tdXNlci11cGxvYWQvYXZhdGFyLzYxZWE5MWI3NWIuanBlZw%3D%3D%252Cr_max%252Cw_90%252Cx_87%252Cy_95%2Fv1627283836%2Fdefault%2Fog-base-w1200-v2.png" alt="とりあえずWebサービス作る時の私の技術選定ポイント@2022/02" 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/KNR109/items/5f933df1292564e6dc70"><span>あとで読む</span> </button> </div> <div class="centerarticle-entry-header"> <h3 class="centerarticle-entry-title"> <a href="https://qiita.com/KNR109/items/5f933df1292564e6dc70" 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%2FKNR109%2Fitems%2F5f933df1292564e6dc70" alt="">【分野別】VSCodeのおすすめ拡張機能まとめ - Qiita </a> </h3> <ul class="centerarticle-entry-data"> <li> <span class="centerarticle-users"> <a href="/entry/s/qiita.com/KNR109/items/5f933df1292564e6dc70" class="js-keyboard-entry-page-openable" title="【分野別】VSCodeのおすすめ拡張機能まとめ - Qiita (485 ブックマーク)" data-gtm-click-label="entry-search-result-item-users"> 485 users </a> </span> </li> <li> <a href="/site/qiita.com/KNR109" title="『qiita.com/KNR109』の新着エントリー" data-gtm-click-label="entry-search-result-item-site-search-url"> qiita.com/KNR109 </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/04</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? はじめに今回はVSCodeでおすすめの拡張機能を分野別に紹介していきます。拡張機能は下記の分野に分けて紹介していきます。 VSCodeを使う全員向け Web制作関連 HTML&CSS関連 WordPress関連フロント向け JavaScript React Vue サーバーサイド向け PHP Ruby その他拡張機能を利用することで開発の生産性を上げることができるので、ぜひ参考にしていただければなと思います。この記事の対象者プログラミング初心者の人分野別におすすめの拡張機能を知りたい人開発の生産性をより上げたい人 VSC</p> <ul class="entrysearch-entry-tags"> <li><a href="/q/VSCode" data-gtm-click-label="entry-search-result-item-tag">VSCode</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%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/%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%81%BE%E3%81%A8%E3%82%81" data-gtm-click-label="entry-search-result-item-tag">まとめ</a></li> <li><a href="/q/php" data-gtm-click-label="entry-search-result-item-tag">php</a></li> <li><a href="/q/react" data-gtm-click-label="entry-search-result-item-tag">react</a></li> <li><a href="/q/wordpress" data-gtm-click-label="entry-search-result-item-tag">wordpress</a></li> <li><a href="/q/%22Visual%20Studio%20Code%22" data-gtm-click-label="entry-search-result-item-tag">Visual Studio Code</a></li> </ul> <div class="following-bookmarks-container js-following-bookmarks-container" data-entry-url="https://qiita.com/KNR109/items/5f933df1292564e6dc70"> <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/KNR109/items/5f933df1292564e6dc70" class="centerarticle-entry-image" target="_blank" rel="noopener"> <img src="https://cdn-ak-scissors.b.st-hatena.com/image/square/f2be0801ac5d51a2c466113aa46d3a9effdd6e19/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-9f5428127621718a910c8b63951390ad.png%3Fixlib%3Drb-4.0.0%26w%3D1200%26mark64%3DaHR0cHM6Ly9xaWl0YS11c2VyLWNvbnRlbnRzLmltZ2l4Lm5ldC9-dGV4dD9peGxpYj1yYi00LjAuMCZ3PTkxNiZoPTMzNiZ0eHQ9JUUzJTgwJTkwJUU1JTg4JTg2JUU5JTg3JThFJUU1JTg4JUE1JUUzJTgwJTkxVlNDb2RlJUUzJTgxJUFFJUUzJTgxJThBJUUzJTgxJTk5JUUzJTgxJTk5JUUzJTgyJTgxJUU2JThCJUExJUU1JUJDJUI1JUU2JUE5JTlGJUU4JTgzJUJEJUUzJTgxJUJFJUUzJTgxJUE4JUUzJTgyJTgxJnR4dC1jb2xvcj0lMjMyMTIxMjEmdHh0LWZvbnQ9SGlyYWdpbm8lMjBTYW5zJTIwVzYmdHh0LXNpemU9NTYmdHh0LWNsaXA9ZWxsaXBzaXMmdHh0LWFsaWduPWxlZnQlMkN0b3Amcz0yMjkxZWNkNDljMTJhMWRlZGU1OTNmZTE5ZjI4ZjBmYw%26mark-x%3D142%26mark-y%3D112%26blend64%3DaHR0cHM6Ly9xaWl0YS11c2VyLWNvbnRlbnRzLmltZ2l4Lm5ldC9-dGV4dD9peGxpYj1yYi00LjAuMCZ3PTcxNiZ0eHQ9JTQwS05SMTA5JTIwaW4lMjAlRTYlQTAlQUElRTUlQkMlOEYlRTQlQkMlOUElRTclQTQlQkUlRTMlODIlQTQlRTMlODMlOEUlRTMlODMlOTklRTMlODIlQTQlRTMlODMlODYlRTMlODIlQTMlRTMlODIlQTImdHh0LWNvbG9yPSUyMzIxMjEyMSZ0eHQtZm9udD1IaXJhZ2lubyUyMFNhbnMlMjBXNiZ0eHQtc2l6ZT0zMiZ0eHQtYWxpZ249bGVmdCUyQ3RvcCZzPWFmMGY3NjY3NGMyNWViZTEwYmI3OGFhY2JkZTQwZjAx%26blend-x%3D142%26blend-y%3D491%26blend-mode%3Dnormal%26s%3D8de8b0dab0ed5b4ea3abcdffd9951cd9" alt="【分野別】VSCodeのおすすめ拡張機能まとめ - 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 (468 ブックマーク)" data-gtm-click-label="entry-search-result-item-users"> 468 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 (457 ブックマーク)" data-gtm-click-label="entry-search-result-item-users"> 457 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/monsoonTropicalBird/items/904e8f24ba7a816511d3"><span>あとで読む</span> </button> </div> <div class="centerarticle-entry-header"> <h3 class="centerarticle-entry-title"> <a href="https://qiita.com/monsoonTropicalBird/items/904e8f24ba7a816511d3" 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%2FmonsoonTropicalBird%2Fitems%2F904e8f24ba7a816511d3" alt="">何故くそややこしいReactを勉強しないといけないのか？ - Qiita </a> </h3> <ul class="centerarticle-entry-data"> <li> <span class="centerarticle-users"> <a href="/entry/s/qiita.com/monsoonTropicalBird/items/904e8f24ba7a816511d3" class="js-keyboard-entry-page-openable" title="何故くそややこしいReactを勉強しないといけないのか？ - Qiita (442 ブックマーク)" data-gtm-click-label="entry-search-result-item-users"> 442 users </a> </span> </li> <li> <a href="/site/qiita.com/monsoonTropicalBird" title="『qiita.com/monsoonTropicalBird』の新着エントリー" data-gtm-click-label="entry-search-result-item-site-search-url"> qiita.com/monsoonTropicalBird </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/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, Angular, Vueといったフレームワークの話題は避けて通れないのだけど、面倒にかまけてみて見ぬふりをしているデヴェロッパー諸君は多いと思う。自分もそういうダメグラマーの一人でした。だが、Nodeベースでバックエンドを開発していると、どうしてもフロント側が必要だし、使いたいライブラリーや機能、操作性を組み込むためには、フロント側のフレームワークからは逃げられず、立派なフルスタックデベロッパーになる為に、重いけつを上げ、学習することにしたのであります。 React, Angular, Vueの３大フレームワークをざっと調べてみた際に、一番取っつきやすそうだったReactをチョイス。しょせんはHTMLとCSSとJavascript で、結局Reactは何をやっているかというと、しょせんはHT</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/%E5%8B%89%E5%BC%B7" 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/qiita" data-gtm-click-label="entry-search-result-item-tag">qiita</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/HTML" data-gtm-click-label="entry-search-result-item-tag">HTML</a></li> <li><a href="/q/css" data-gtm-click-label="entry-search-result-item-tag">css</a></li> <li><a href="/q/web%E5%88%B6%E4%BD%9C" data-gtm-click-label="entry-search-result-item-tag">web制作</a></li> </ul> <div class="following-bookmarks-container js-following-bookmarks-container" data-entry-url="https://qiita.com/monsoonTropicalBird/items/904e8f24ba7a816511d3"> <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/monsoonTropicalBird/items/904e8f24ba7a816511d3" class="centerarticle-entry-image" target="_blank" rel="noopener"> <img src="https://cdn-ak-scissors.b.st-hatena.com/image/square/59e4948b459631a0753863da095b0fb55d3a7414/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-dGV4dD9peGxpYj1yYi00LjAuMCZ3PTk3MiZoPTM3OCZ0eHQ9JUU0JUJEJTk1JUU2JTk1JTg1JUUzJTgxJThGJUUzJTgxJTlEJUUzJTgyJTg0JUUzJTgyJTg0JUUzJTgxJTkzJUUzJTgxJTk3JUUzJTgxJTg0UmVhY3QlRTMlODIlOTIlRTUlOEIlODklRTUlQkMlQjclRTMlODElOTclRTMlODElQUElRTMlODElODQlRTMlODElQTglRTMlODElODQlRTMlODElOTElRTMlODElQUElRTMlODElODQlRTMlODElQUUlRTMlODElOEIlRUYlQkMlOUYmdHh0LWFsaWduPWxlZnQlMkN0b3AmdHh0LWNvbG9yPSUyMzFFMjEyMSZ0eHQtZm9udD1IaXJhZ2lubyUyMFNhbnMlMjBXNiZ0eHQtc2l6ZT01NiZzPTdkMjIwYmJhMzllZGRkOTVhODNiZGRkOWEyOTgxOWFl%26mark-x%3D142%26mark-y%3D57%26blend64%3DaHR0cHM6Ly9xaWl0YS11c2VyLWNvbnRlbnRzLmltZ2l4Lm5ldC9-dGV4dD9peGxpYj1yYi00LjAuMCZoPTc2Jnc9NzcwJnR4dD0lNDBtb25zb29uVHJvcGljYWxCaXJkJnR4dC1jb2xvcj0lMjMxRTIxMjEmdHh0LWZvbnQ9SGlyYWdpbm8lMjBTYW5zJTIwVzYmdHh0LXNpemU9MzYmdHh0LWFsaWduPWxlZnQlMkN0b3Amcz1hMWYxYmE5OGNiMDRkNWZhOGE4ODI1OTc4ZmNjNmU2YQ%26blend-x%3D142%26blend-y%3D486%26blend-mode%3Dnormal%26s%3D92c47993acdf2b6e84b07640e39c1b41" 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://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://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への侵略の歴史 (426 ブックマーク)" data-gtm-click-label="entry-search-result-item-users"> 426 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://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 (425 ブックマーク)" data-gtm-click-label="entry-search-result-item-users"> 425 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/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://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://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/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 "> <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/typescript-guide/react.html"><span>あとで読む</span> </button> </div> <div class="centerarticle-entry-header"> <h3 class="centerarticle-entry-title"> <a href="https://future-architect.github.io/typescript-guide/react.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%2Ffuture-architect.github.io%2Ftypescript-guide%2Freact.html" alt="">Reactの環境構築 — 仕事ですぐに使えるTypeScript ドキュメント </a> </h3> <ul class="centerarticle-entry-data"> <li> <span class="centerarticle-users"> <a href="/entry/s/future-architect.github.io/typescript-guide/react.html" class="js-keyboard-entry-page-openable" title="Reactの環境構築 — 仕事ですぐに使えるTypeScript ドキュメント (348 ブックマーク)" data-gtm-click-label="entry-search-result-item-users"> 348 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">2020/09/04</span></li> </ul> </div> <div class="centerarticle-entry-contents "> <div class="centerarticle-entry-item"> <p class="centerarticle-entry-summary">TypeScriptの世界を知る前書き Node.jsエコシステムを体験しよう TypeScriptの書き方変数プリミティブ型複合型基本的な構文基本的な型付け関数その他の組み込み型・関数クラス非同期処理例外処理モジュール console.logによるログ出力中級のテクニックジェネリクス関数型指向のプログラミングクラス上級編リアクティブ高度なテクニック環境ごとのTips（共通環境・ブラウザ以外）ソフトウェア開発の環境を考える基本の環境構築ライブラリ開発のための環境設定 CLIツール・ウェブサーバー作成のための環境設定 CI（継続的インテグレーション）環境の構築成果物のデプロイ使用ライブラリのバージョン管理環境ごとのTips（ブラウザ環境）ブラウザ環境ブラウザ関連の組み込み型 Reactの環境構築 create-react-appによる環境</p> <ul class="entrysearch-entry-tags"> <li><a href="/q/react" data-gtm-click-label="entry-search-result-item-tag">react</a></li> <li><a href="/q/TypeScript" data-gtm-click-label="entry-search-result-item-tag">TypeScript</a></li> <li><a href="/q/%E3%81%82%E3%81%A8%E3%81%A7%E8%AA%AD%E3%82%80" data-gtm-click-label="entry-search-result-item-tag">あとで読む</a></li> <li><a href="/q/javascript" data-gtm-click-label="entry-search-result-item-tag">javascript</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/techfeed" data-gtm-click-label="entry-search-result-item-tag">techfeed</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/%E7%92%B0%E5%A2%83" 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%83%97%E3%83%AD%E3%82%B8%E3%82%A7%E3%82%AF%E3%83%88" data-gtm-click-label="entry-search-result-item-tag">プロジェクト</a></li> </ul> <div class="following-bookmarks-container js-following-bookmarks-container" data-entry-url="https://future-architect.github.io/typescript-guide/react.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> </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://sizu.me/ktsn/posts/v3n2rkzcckia"><span>あとで読む</span> </button> </div> <div class="centerarticle-entry-header"> <h3 class="centerarticle-entry-title"> <a href="https://sizu.me/ktsn/posts/v3n2rkzcckia" 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%2Fsizu.me%2Fktsn%2Fposts%2Fv3n2rkzcckia" alt="">ライブラリを気軽に導入しないこと｜Katashin </a> </h3> <ul class="centerarticle-entry-data"> <li> <span class="centerarticle-users"> <a href="/entry/s/sizu.me/ktsn/posts/v3n2rkzcckia" class="js-keyboard-entry-page-openable" title="ライブラリを気軽に導入しないこと｜Katashin (309 ブックマーク)" data-gtm-click-label="entry-search-result-item-users"> 309 users </a> </span> </li> <li> <a href="/site/sizu.me/" title="『sizu.me』の新着エントリー" data-gtm-click-label="entry-search-result-item-site-search-url"> sizu.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">2023/12/14</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/%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%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/development" data-gtm-click-label="entry-search-result-item-tag">development</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%A9%E3%82%A4%E3%83%96%E3%83%A9%E3%83%AA" data-gtm-click-label="entry-search-result-item-tag">ライブラリ</a></li> <li><a href="/q/%E3%83%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/%E3%83%86%E3%82%B9%E3%83%88" 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/library" data-gtm-click-label="entry-search-result-item-tag">library</a></li> <li><a href="/q/UI" data-gtm-click-label="entry-search-result-item-tag">UI</a></li> </ul> <div class="following-bookmarks-container js-following-bookmarks-container" data-entry-url="https://sizu.me/ktsn/posts/v3n2rkzcckia"> <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://sizu.me/ktsn/posts/v3n2rkzcckia" class="centerarticle-entry-image" target="_blank" rel="noopener"> <img src="https://cdn-ak-scissors.b.st-hatena.com/image/square/963b5c6f818adc47afe69140e893223681f33a2d/height=288;version=1;width=512/https%3A%2F%2Fstatic.sizu.me%2Fapi%2Fog-image%2Fc1b95377d1b7%3FavatarUrl%3Dhttps%253A%252F%252Fr2.sizu.me%252Fusers%252F293%252Favatar.png%253Fv%253D1700029658617%26theme%3Duser%26username%3Dktsn" alt="ライブラリを気軽に導入しないこと｜Katashin" data-gtm-click-label="entry-search-result-item-image"> </a> </div> </div> </div> </li> <li class="bookmark-item js-user-bookmark-item js-keyboard-selectable-item"> <div class="centerarticle-entry is-image-entry-unit"> <div class="js-bookmark-stock-button is-hidden"> <button class="js-bookmark-stock-button-ready readlater-button" data-gtm-click-label="entry-search-result-item-stock-button" title="あとで読む" aria-label="あとで読む" tabindex="0" type="button" data-href="https://www.publickey1.jp/blog/23/astro_30javascriptspa.html"><span>あとで読む</span> </button> </div> <div class="centerarticle-entry-header"> <h3 class="centerarticle-entry-title"> <a href="https://www.publickey1.jp/blog/23/astro_30javascriptspa.html" class="js-clickable-link js-keyboard-openable" target="_blank" rel="noopener" data-gtm-click-label="entry-search-result-item-title"> <img class="centerarticle-entry-favicon" src="https://cdn-ak2.favicon.st-hatena.com/64?url=https%3A%2F%2Fwww.publickey1.jp%2Fblog%2F23%2Fastro_30javascriptspa.html" alt="">静的サイトジェネレータ「Astro 3.0」正式リリース。JavaScriptなしでSPAのようなアニメーションの画面遷移など新機能 </a> </h3> <ul class="centerarticle-entry-data"> <li> <span class="centerarticle-users"> <a href="/entry/s/www.publickey1.jp/blog/23/astro_30javascriptspa.html" class="js-keyboard-entry-page-openable" title="静的サイトジェネレータ「Astro 3.0」正式リリース。JavaScriptなしでSPAのようなアニメーションの画面遷移など新機能 (278 ブックマーク)" data-gtm-click-label="entry-search-result-item-users"> 278 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/09/12</span></li> </ul> </div> <div class="centerarticle-entry-contents has-image"> <div class="centerarticle-entry-item"> <p class="centerarticle-entry-summary">静的サイトジェネレータ「Astro 3.0」正式リリース。JavaScriptなしでSPAのようなアニメーションの画面遷移など新機能オープンソースで開発されている静的サイトジェネレータ「Astro」の最新バージョンとなる「Astro 3.0」が正式にリリースされました。 Astro 3.0 is out now! 30% faster and more powerful than ever. View Transitions, Image Optimization, JSX Fast Refresh, and so much more. https://t.co/vOi44246Hg — Astro (@astrodotbuild) August 30, 2023 Astroは、ReactやVue、Svelte、Alpine.js、TypeScriptなどのさまざまなフレームワークやライ</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/web%E5%88%B6%E4%BD%9C" data-gtm-click-label="entry-search-result-item-tag">web制作</a></li> <li><a href="/q/Astro" data-gtm-click-label="entry-search-result-item-tag">Astro</a></li> <li><a href="/q/%E3%83%96%E3%83%A9%E3%82%A6%E3%82%B6%E6%9C%80%E6%96%B0%E5%8B%95%E5%90%91" data-gtm-click-label="entry-search-result-item-tag">ブラウザ最新動向</a></li> <li><a href="/q/Web%E6%A8%99%E6%BA%96" data-gtm-click-label="entry-search-result-item-tag">Web標準</a></li> <li><a href="/q/web" data-gtm-click-label="entry-search-result-item-tag">web</a></li> <li><a href="/q/%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/SPA" data-gtm-click-label="entry-search-result-item-tag">SPA</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://www.publickey1.jp/blog/23/astro_30javascriptspa.html"> <ul class="following-bookmarks js-following-bookmarks"></ul> <script type="text/x-template" id="template-following-bookmark"> <li> <a href="{{ anchor_path }}" class="following-bookmark-link" data-gtm-label="entry-info-followingBookmarks"> <img src="{{ profile_image_url }}" alt="{{ user_name }}" class="following-bookmark-icon"> </a> <span class="following-bookmark-popup"> <span class="following-bookmark-username">{{ user_name }}</span><span class="following-bookmark-timestamp">{{ created }}</span> <span class="following-bookmark-text"> {{ #comment }}<span class="following-bookmark-comment">{{ comment }}</span>{{ /comment }} <ul class="following-bookmark-tags">{{ #tags }}<li>{{ label }}</li>{{ /tags }}</ul> </span> </span> </li> </script> </div> </div> <div class="centerarticle-entry-image-wrapper"> <a href="https://www.publickey1.jp/blog/23/astro_30javascriptspa.html" class="centerarticle-entry-image" target="_blank" rel="noopener"> <img src="https://cdn-ak-scissors.b.st-hatena.com/image/square/15b254903e4b4d81bf59ca68cfbcedbc65d94d0d/height=288;version=1;width=512/https%3A%2F%2Fwww.publickey1.jp%2F2023%2FFRCs0xMa.jpg" alt="静的サイトジェネレータ「Astro 3.0」正式リリース。JavaScriptなしで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://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を使うのかについて個人的なモチベーションを整理したかった (274 ブックマーク)" data-gtm-click-label="entry-search-result-item-users"> 274 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> <li class="bookmark-item js-user-bookmark-item js-keyboard-selectable-item"> <div class="centerarticle-entry is-image-entry-unit"> <div class="js-bookmark-stock-button is-hidden"> <button class="js-bookmark-stock-button-ready readlater-button" data-gtm-click-label="entry-search-result-item-stock-button" title="あとで読む" aria-label="あとで読む" tabindex="0" type="button" data-href="https://www.webcreatorbox.com/blog/learning-vue-nuxt"><span>あとで読む</span> </button> </div> <div class="centerarticle-entry-header"> <h3 class="centerarticle-entry-title"> <a href="https://www.webcreatorbox.com/blog/learning-vue-nuxt" class="js-clickable-link js-keyboard-openable" target="_blank" rel="noopener" data-gtm-click-label="entry-search-result-item-title"> <img class="centerarticle-entry-favicon" src="https://cdn-ak2.favicon.st-hatena.com/64?url=https%3A%2F%2Fwww.webcreatorbox.com%2Fblog%2Flearning-vue-nuxt" alt="">Vue.js、Nuxt JSを学習するときにやったこと </a> </h3> <ul class="centerarticle-entry-data"> <li> <span class="centerarticle-users"> <a href="/entry/s/www.webcreatorbox.com/blog/learning-vue-nuxt" class="js-keyboard-entry-page-openable" title="Vue.js、Nuxt JSを学習するときにやったこと (266 ブックマーク)" data-gtm-click-label="entry-search-result-item-users"> 266 users </a> </span> </li> <li> <a href="/site/www.webcreatorbox.com/" title="『www.webcreatorbox.com』の新着エントリー" data-gtm-click-label="entry-search-result-item-site-search-url"> www.webcreatorbox.com </a> </li> <li> <a href="/hotentry/it" data-gtm-click-label="entry-search-result-item-category">テクノロジー</a> </li> <li><span class="entry-contents-date">2021/01/21</span></li> </ul> </div> <div class="centerarticle-entry-contents has-image"> <div class="centerarticle-entry-item"> <p class="centerarticle-entry-summary">Vue.js、Nuxt JSを学習するときにやったこと以前「WebデザイナーのためのVue.js事始め」という記事でVue.jsについて触れたのですが、それから今まで、どんな手順で勉強してきたのかを紹介してみます。途中ReactやGatsbyを取り入れたりもしていたのですが、結局 .vueファイルでの単一ファイルコンポーネントが楽だなーと思い、今はVue.jsに全振り中です。これから勉強してみたい方の参考になれば幸いです。 Web デザイナーのための Vue.js 事始め 1. Vue.js 公式 Web サイトを確認まずはVue.js の公式 Web サイトを確認。日本語にも対応しています。ここで基本的な使い方、文法、何ができるのかなどをざっくり学習しました。サンプルコードがある箇所は実際にCodePenを使ってコードを記述し、動作確認します。公式は今後何度も繰り返しチェックすることに</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/Nuxt.js" data-gtm-click-label="entry-search-result-item-tag">Nuxt.js</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/web" data-gtm-click-label="entry-search-result-item-tag">web</a></li> <li><a href="/q/javascript" data-gtm-click-label="entry-search-result-item-tag">javascript</a></li> <li><a href="/q/js" data-gtm-click-label="entry-search-result-item-tag">js</a></li> <li><a href="/q/NuxtJS" data-gtm-click-label="entry-search-result-item-tag">NuxtJS</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> </ul> <div class="following-bookmarks-container js-following-bookmarks-container" data-entry-url="https://www.webcreatorbox.com/blog/learning-vue-nuxt"> <ul class="following-bookmarks js-following-bookmarks"></ul> <script type="text/x-template" id="template-following-bookmark"> <li> <a href="{{ anchor_path }}" class="following-bookmark-link" data-gtm-label="entry-info-followingBookmarks"> <img src="{{ profile_image_url }}" alt="{{ user_name }}" class="following-bookmark-icon"> </a> <span class="following-bookmark-popup"> <span class="following-bookmark-username">{{ user_name }}</span><span class="following-bookmark-timestamp">{{ created }}</span> <span class="following-bookmark-text"> {{ #comment }}<span class="following-bookmark-comment">{{ comment }}</span>{{ /comment }} <ul class="following-bookmark-tags">{{ #tags }}<li>{{ label }}</li>{{ /tags }}</ul> </span> </span> </li> </script> </div> </div> <div class="centerarticle-entry-image-wrapper"> <a href="https://www.webcreatorbox.com/blog/learning-vue-nuxt" class="centerarticle-entry-image" target="_blank" rel="noopener"> <img src="https://cdn-ak-scissors.b.st-hatena.com/image/square/a5bf2bd57a0da38b453f8cb3d62573f5914ecedd/height=288;version=1;width=512/https%3A%2F%2Fimages.microcms-assets.io%2Fassets%2F2d1b8c905c1d447eb649028ca07253a8%2Ff4be24f93b28467c880d212d0b350b7a%2Fthumb-vue-nuxt.jpg" alt="Vue.js、Nuxt 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://note.com/erukiti/n/na34114522cdf"><span>あとで読む</span> </button> </div> <div class="centerarticle-entry-header"> <h3 class="centerarticle-entry-title"> <a href="https://note.com/erukiti/n/na34114522cdf" 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%2Fna34114522cdf" alt="">僕のフロントエンド技術に対するスタンス｜erukiti </a> </h3> <ul class="centerarticle-entry-data"> <li> <span class="centerarticle-users"> <a href="/entry/s/note.com/erukiti/n/na34114522cdf" class="js-keyboard-entry-page-openable" title="僕のフロントエンド技術に対するスタンス｜erukiti (264 ブックマーク)" data-gtm-click-label="entry-search-result-item-users"> 264 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/06/05</span></li> </ul> </div> <div class="centerarticle-entry-contents has-image"> <div class="centerarticle-entry-item"> <p class="centerarticle-entry-summary">僕は日頃からReact Hooks + TypeScript 最高だの言ってますけど、実のところ、それらを超えるモノが登場したら一瞬で「React Hooksなんて過去の技術だよねー、#にゃーん（社会性フィルター）」とか「TypeScript？へなにそれ？過去の言語ですよね」とかボロクソに言ってる自信があります。補足: ボロクソにいうとは限りません。その頃に、単に手のひらクルーって返してるだけで、新しい技術を「〇〇＋□□最高！」って言ってるだけになるように、人格的に成長してるかもしれませんｗ僕にとっては技術はただの道具にすぎません。道具に対して必要以上の思い入れもしなければ、信仰する気持ちもありません。というより今あるクソなモノよりマシなものを求める渇望がここ数十年ずっと続いてる感じです。そんな僕が判定するフロントエンド技術の数々を書いてみます。ブログなんでぶっちゃけテキトウで率直</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/TypeScript" data-gtm-click-label="entry-search-result-item-tag">TypeScript</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%A9%E3%82%A4%E3%83%96%E3%83%A9%E3%83%AA" data-gtm-click-label="entry-search-result-item-tag">ライブラリ</a></li> <li><a href="/q/%E3%82%A8%E3%83%B3%E3%82%B8%E3%83%8B%E3%82%A2" data-gtm-click-label="entry-search-result-item-tag">エンジニア</a></li> <li><a href="/q/%E6%8A%80%E8%A1%93" data-gtm-click-label="entry-search-result-item-tag">技術</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/Vue.js" data-gtm-click-label="entry-search-result-item-tag">Vue.js</a></li> </ul> <div class="following-bookmarks-container js-following-bookmarks-container" data-entry-url="https://note.com/erukiti/n/na34114522cdf"> <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/na34114522cdf" class="centerarticle-entry-image" target="_blank" rel="noopener"> <img src="https://cdn-ak-scissors.b.st-hatena.com/image/square/8cdf9ddfa86436963c974d7bd6a4f526e3a76aa0/height=288;version=1;width=512/https%3A%2F%2Fassets.st-note.com%2Fproduction%2Fuploads%2Fimages%2F6018717%2Fprofile_8d6455741cfff2a9a50e85c249a5f96f.jpg%3Ffit%3Dbounds%26format%3Djpeg%26quality%3D85%26width%3D330" alt="僕のフロントエンド技術に対するスタンス｜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://www.yuu-progra.com/2021/09/12/laravel-vue-cal/"><span>あとで読む</span> </button> </div> <div class="centerarticle-entry-header"> <h3 class="centerarticle-entry-title"> <a href="https://www.yuu-progra.com/2021/09/12/laravel-vue-cal/" 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.yuu-progra.com%2F2021%2F09%2F12%2Flaravel-vue-cal%2F" alt="">Laravel + Vue.jsでGoogleカレンダーのクローンを作ろう！！【Laravel8対応】準備編｜Yuu's Memo </a> </h3> <ul class="centerarticle-entry-data"> <li> <span class="centerarticle-users"> <a href="/entry/s/www.yuu-progra.com/2021/09/12/laravel-vue-cal/" class="js-keyboard-entry-page-openable" title="Laravel + Vue.jsでGoogleカレンダーのクローンを作ろう！！【Laravel8対応】準備編｜Yuu's Memo (260 ブックマーク)" data-gtm-click-label="entry-search-result-item-users"> 260 users </a> </span> </li> <li> <a href="/site/www.yuu-progra.com/" title="『www.yuu-progra.com』の新着エントリー" data-gtm-click-label="entry-search-result-item-site-search-url"> www.yuu-progra.com </a> </li> <li> <a href="/hotentry/it" data-gtm-click-label="entry-search-result-item-category">テクノロジー</a> </li> <li><span class="entry-contents-date">2021/09/12</span></li> </ul> </div> <div class="centerarticle-entry-contents has-image"> <div class="centerarticle-entry-item"> <p class="centerarticle-entry-summary">皆さんこんにちは！！今日から何回かに分けて、Laravel8とVue.jsを使用して「スケジュール管理アプリ」を作成したいと思います。簡単に言えば、「Googleカレンダーのクローン」を作成していくチュートリアルです。 WEBアプリケーションにスケジュール管理機能を組み込む場合、「FullCalendar」を利用することが多いと思いますが、今回はFullCalendarなどは使用しません。 LaravelとVue.jsは非常に人気が高いので、多くの解説記事やチュートリアルが出ています。ただ、どれも小さなサンプルを作ったり、解説が断片的で、実際の開発に活かせないものが多いです。今回から皆さんと作る「Google Calendar Clone」は、LaravelやVueを触ったことがない方には少し難しいかも知れませんが、中規模のアプリケーションを開発することで、LaravelやVue.</p> <ul class="entrysearch-entry-tags"> <li><a href="/q/Laravel" data-gtm-click-label="entry-search-result-item-tag">Laravel</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/%E9%96%8B%E7%99%BA" data-gtm-click-label="entry-search-result-item-tag">開発</a></li> <li><a href="/q/PHP" data-gtm-click-label="entry-search-result-item-tag">PHP</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/%E3%83%87%E3%83%BC%E3%82%BF%E3%83%99%E3%83%BC%E3%82%B9" data-gtm-click-label="entry-search-result-item-tag">データベース</a></li> <li><a href="/q/db" data-gtm-click-label="entry-search-result-item-tag">db</a></li> </ul> <div class="following-bookmarks-container js-following-bookmarks-container" data-entry-url="https://www.yuu-progra.com/2021/09/12/laravel-vue-cal/"> <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.yuu-progra.com/2021/09/12/laravel-vue-cal/" class="centerarticle-entry-image" target="_blank" rel="noopener"> <img src="https://cdn-ak-scissors.b.st-hatena.com/image/square/e7464e5c174cb740620cba406eedc28c2100a27b/height=288;version=1;width=512/https%3A%2F%2Fi0.wp.com%2Fwww.yuu-progra.com%2Fstorage%2F2021%2F09%2Fgoogle-calendar-clone.png%3Ffit%3D599%252C400%26ssl%3D1" alt="Laravel + Vue.jsでGoogleカレンダーのクローンを作ろう！！【Laravel8対応】準備編｜Yuu's Memo" 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/Takazudo/items/5180f5eb6d798a52074f"><span>あとで読む</span> </button> </div> <div class="centerarticle-entry-header"> <h3 class="centerarticle-entry-title"> <a href="https://qiita.com/Takazudo/items/5180f5eb6d798a52074f" 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%2FTakazudo%2Fitems%2F5180f5eb6d798a52074f" alt="">ユーティリティーファーストとTailwind CSSのススメ - Qiita </a> </h3> <ul class="centerarticle-entry-data"> <li> <span class="centerarticle-users"> <a href="/entry/s/qiita.com/Takazudo/items/5180f5eb6d798a52074f" class="js-keyboard-entry-page-openable" title="ユーティリティーファーストとTailwind CSSのススメ - Qiita (254 ブックマーク)" data-gtm-click-label="entry-search-result-item-users"> 254 users </a> </span> </li> <li> <a href="/site/qiita.com/Takazudo" title="『qiita.com/Takazudo』の新着エントリー" data-gtm-click-label="entry-search-result-item-site-search-url"> qiita.com/Takazudo </a> </li> <li> <a href="/hotentry/it" data-gtm-click-label="entry-search-result-item-category">テクノロジー</a> </li> <li><span class="entry-contents-date">2021/04/02</span></li> </ul> </div> <div class="centerarticle-entry-contents has-image"> <div class="centerarticle-entry-item"> <p class="centerarticle-entry-summary">.align-left { text-align: left; } .align-center { text-align: center; } .align-right { text-align: right; } .align-top { vertical-align: top; } .align-middle { vertical-align: middle; } .align-bottom { vertical-align: bottom; } .mb-1 { margin-bottom: 1rem; } .mb-2 { margin-bottom: 2rem; } .mb-3 { margin-bottom: 3rem; } これをHTMLに当てまくって画面を作ればほら簡単！お手軽に画面が作れるね！と言う感じである。これの良いところというのは、サクサク画面が作れること。これを体</p> <ul class="entrysearch-entry-tags"> <li><a href="/q/css" data-gtm-click-label="entry-search-result-item-tag">css</a></li> <li><a href="/q/Tailwind" data-gtm-click-label="entry-search-result-item-tag">Tailwind</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/%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/TailwindCSS" data-gtm-click-label="entry-search-result-item-tag">TailwindCSS</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/html" data-gtm-click-label="entry-search-result-item-tag">html</a></li> <li><a href="/q/%E3%82%B3%E3%83%B3%E3%83%9D%E3%83%BC%E3%83%8D%E3%83%B3%E3%83%88" 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> </ul> <div class="following-bookmarks-container js-following-bookmarks-container" data-entry-url="https://qiita.com/Takazudo/items/5180f5eb6d798a52074f"> <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/Takazudo/items/5180f5eb6d798a52074f" class="centerarticle-entry-image" target="_blank" rel="noopener"> <img src="https://cdn-ak-scissors.b.st-hatena.com/image/square/eb3474d23900112953e8b5d75d7bc1a63df42319/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-dGV4dD9peGxpYj1yYi00LjAuMCZ3PTk3MiZoPTM3OCZ0eHQ9JUUzJTgzJUE2JUUzJTgzJUJDJUUzJTgzJTg2JUUzJTgyJUEzJUUzJTgzJUFBJUUzJTgzJTg2JUUzJTgyJUEzJUUzJTgzJUJDJUUzJTgzJTk1JUUzJTgyJUExJUUzJTgzJUJDJUUzJTgyJUI5JUUzJTgzJTg4JUUzJTgxJUE4VGFpbHdpbmQlMjBDU1MlRTMlODElQUUlRTMlODIlQjklRTMlODIlQjklRTMlODMlQTEmdHh0LWNvbG9yPSUyMzIxMjEyMSZ0eHQtZm9udD1IaXJhZ2lubyUyMFNhbnMlMjBXNiZ0eHQtc2l6ZT01NiZ0eHQtYWxpZ249bGVmdCUyQ3RvcCZzPTYwYzU5NTc5MjdkMmM3YjFiOWNlZmNkMGVlYzg4MTlm%26mark-x%3D142%26mark-y%3D57%26blend64%3DaHR0cHM6Ly9xaWl0YS11c2VyLWNvbnRlbnRzLmltZ2l4Lm5ldC9-dGV4dD9peGxpYj1yYi00LjAuMCZoPTc2Jnc9NzcwJnR4dD0lNDBUYWthenVkbyZ0eHQtY29sb3I9JTIzMjEyMTIxJnR4dC1mb250PUhpcmFnaW5vJTIwU2FucyUyMFc2JnR4dC1zaXplPTM2JnR4dC1hbGlnbj1sZWZ0JTJDdG9wJnM9NWUxM2EzYmVjNTNmNTEyYzA0MjdiYmUyZmYzNTFjMzI%26blend-x%3D142%26blend-y%3D436%26blend-mode%3Dnormal%26txt64%3DaW4g5qCq5byP5Lya56S-44OU44Kv44K744Or44Kw44Oq44OD44OJ%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%3Deda7c8b251e0ac01db4717baf740e923" alt="ユーティリティーファーストとTailwind CSSのススメ - 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://coliss.com/articles/build-websites/operation/work/front-end-developers-should-learn-in-2021.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/front-end-developers-should-learn-in-2021.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%2Ffront-end-developers-should-learn-in-2021.html" alt="">フロントエンドのデベロッパーが2021年に向けてチェックしておきたいこと </a> </h3> <ul class="centerarticle-entry-data"> <li> <span class="centerarticle-users"> <a href="/entry/s/coliss.com/articles/build-websites/operation/work/front-end-developers-should-learn-in-2021.html" class="js-keyboard-entry-page-openable" title="フロントエンドのデベロッパーが2021年に向けてチェックしておきたいこと (251 ブックマーク)" data-gtm-click-label="entry-search-result-item-users"> 251 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">2020/12/10</span></li> </ul> </div> <div class="centerarticle-entry-contents has-image"> <div class="centerarticle-entry-item"> <p class="centerarticle-entry-summary">フロントエンドのデベロッパーが2021年に向けて何に注目すべきかを紹介します。特に上級職や転職など、ステップアップを目指す人は要チェックです！ 10 Things Front-End Developers Should Learn in 2021 by Simon Holdorf 下記は各ポイントを意訳したものです。 ※当ブログでの翻訳記事は、元サイト様にライセンスを得て翻訳しています。はじめに 1. フレームワーク 2. 静的サイトジェネレーター（SSG） 3. JAMstack 4. プログレッシブウェブアプリ（PWA） 5. GraphQL 6. コードエディタ/IDE 7. テスト環境 8. クリーンなコード 9. Git 10. ソフトスキル終わりにはじめに 2021年は、フロントエンドの開発がテクノロジー業界で最もホットなトレンドの1つになることは間違いないでしょう。フ</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/frontend" data-gtm-click-label="entry-search-result-item-tag">frontend</a></li> <li><a href="/q/web%E5%88%B6%E4%BD%9C" data-gtm-click-label="entry-search-result-item-tag">web制作</a></li> <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/web" data-gtm-click-label="entry-search-result-item-tag">web</a></li> <li><a href="/q/%E3%83%86%E3%82%B9%E3%83%88" data-gtm-click-label="entry-search-result-item-tag">テスト</a></li> <li><a href="/q/Git" data-gtm-click-label="entry-search-result-item-tag">Git</a></li> </ul> <div class="following-bookmarks-container js-following-bookmarks-container" data-entry-url="https://coliss.com/articles/build-websites/operation/work/front-end-developers-should-learn-in-2021.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/front-end-developers-should-learn-in-2021.html" class="centerarticle-entry-image" target="_blank" rel="noopener"> <img src="https://cdn-ak-scissors.b.st-hatena.com/image/square/1366b987e0ab0a5d7cf35b1ba22d4500e2879781/height=288;version=1;width=512/https%3A%2F%2Fcoliss.com%2Fwp-content%2Fuploads-202004%2F2020120510%402x.png" alt="フロントエンドのデベロッパーが2021年に向けてチェックしておきたいこと" data-gtm-click-label="entry-search-result-item-image"> </a> </div> </div> </div> </li> <li class="bookmark-item js-user-bookmark-item js-keyboard-selectable-item"> <div class="centerarticle-entry is-image-entry-unit"> <div class="js-bookmark-stock-button is-hidden"> <button class="js-bookmark-stock-button-ready readlater-button" data-gtm-click-label="entry-search-result-item-stock-button" title="あとで読む" aria-label="あとで読む" tabindex="0" type="button" data-href="https://ja.vuejs.org/style-guide/rules-strongly-recommended"><span>あとで読む</span> </button> </div> <div class="centerarticle-entry-header"> <h3 class="centerarticle-entry-title"> <a href="https://ja.vuejs.org/style-guide/rules-strongly-recommended" 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%2Fja.vuejs.org%2Fstyle-guide%2Frules-strongly-recommended" alt="">Vue.js </a> </h3> <ul class="centerarticle-entry-data"> <li> <span class="centerarticle-users"> <a href="/entry/s/ja.vuejs.org/style-guide/rules-strongly-recommended" class="js-keyboard-entry-page-openable" title="Vue.js (250 ブックマーク)" data-gtm-click-label="entry-search-result-item-users"> 250 users </a> </span> </li> <li> <a href="/site/ja.vuejs.org/" title="『ja.vuejs.org』の新着エントリー" data-gtm-click-label="entry-search-result-item-site-search-url"> ja.vuejs.org </a> </li> <li> <a href="/hotentry/it" data-gtm-click-label="entry-search-result-item-category">テクノロジー</a> </li> <li><span class="entry-contents-date">2023/11/02</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/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/%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/%E9%96%8B%E7%99%BA" 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/development" data-gtm-click-label="entry-search-result-item-tag">development</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://ja.vuejs.org/style-guide/rules-strongly-recommended"> <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://ja.vuejs.org/style-guide/rules-strongly-recommended" class="centerarticle-entry-image" target="_blank" rel="noopener"> <img src="https://cdn-ak-scissors.b.st-hatena.com/image/square/8ea9a6e4788232aa4a025498558b3af7836085e7/height=288;version=1;width=512/https%3A%2F%2Fvuejs.org%2Fimages%2Flogo.png" alt="Vue.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://future-architect.github.io/articles/20201013/"><span>あとで読む</span> </button> </div> <div class="centerarticle-entry-header"> <h3 class="centerarticle-entry-title"> <a href="https://future-architect.github.io/articles/20201013/" 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%2F20201013%2F" alt="">2020年秋にVue.jsのアプリケーションを作るなら、押さえておきたい5つのポイント | フューチャー技術ブログ </a> </h3> <ul class="centerarticle-entry-data"> <li> <span class="centerarticle-users"> <a href="/entry/s/future-architect.github.io/articles/20201013/" class="js-keyboard-entry-page-openable" title="2020年秋にVue.jsのアプリケーションを作るなら、押さえておきたい5つのポイント | フューチャー技術ブログ (250 ブックマーク)" data-gtm-click-label="entry-search-result-item-users"> 250 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">2020/10/13</span></li> </ul> </div> <div class="centerarticle-entry-contents has-image"> <div class="centerarticle-entry-item"> <p class="centerarticle-entry-summary">TIGの伊藤真彦です。ここ最近はVue.jsでのフロントエンド開発を行っています。ほぼ何もない状態からのスタート段階から始めたのですが、その際調査したことが学びになったので共有します。 ※この記事は 2020/10/13 に執筆されました。調査日は2020/08/17～2020/09/01 のため、バージョンなど当時と状況が異なるものがあります。この1ヶ月の間でも、alphaからbetaに変わったり、betaが取れたりと進化が速いです。公式ライブラリのステータスはこちらもご参考ください。 https://v3.vuejs.org/guide/migration/introduction.html#supporting-libraries 前提として押さえておきたい2点のポイント環境構築はVue CLIフューチャーでは仕事ですぐに使えるTypeScriptと題しまして、TypeScri</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/TypeScript" data-gtm-click-label="entry-search-result-item-tag">TypeScript</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/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/%E6%8A%80%E8%A1%93" 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://future-architect.github.io/articles/20201013/"> <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/20201013/" class="centerarticle-entry-image" target="_blank" rel="noopener"> <img src="https://cdn-ak-scissors.b.st-hatena.com/image/square/d0ef4b0bccd8fb84a537d143617a26a12b954e7d/height=288;version=1;width=512/https%3A%2F%2Ffuture-architect.github.io%2Fimages%2F20201013%2Ftop.png" alt="2020年秋にVue.jsのアプリケーションを作るなら、押さえておきたい5つのポイント | フューチャー技術ブログ" 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://iwasiman.hatenablog.com/entry/20210322-serverless-app-dev-guide"><span>あとで読む</span> </button> </div> <div class="centerarticle-entry-header"> <h3 class="centerarticle-entry-title"> <a href="https://iwasiman.hatenablog.com/entry/20210322-serverless-app-dev-guide" 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%2Fiwasiman.hatenablog.com%2Fentry%2F20210322-serverless-app-dev-guide" alt="">【感想】『Amazon Web Servicesを使ったサーバーレスアプリケーション開発ガイド』：Lambdaで本格サービス開発まで - Rのつく財団入り口 </a> </h3> <ul class="centerarticle-entry-data"> <li> <span class="centerarticle-users"> <a href="/entry/s/iwasiman.hatenablog.com/entry/20210322-serverless-app-dev-guide" class="js-keyboard-entry-page-openable" title="【感想】『Amazon Web Servicesを使ったサーバーレスアプリケーション開発ガイド』：Lambdaで本格サービス開発まで - Rのつく財団入り口 (240 ブックマーク)" data-gtm-click-label="entry-search-result-item-users"> 240 users </a> </span> </li> <li> <a href="/site/iwasiman.hatenablog.com/" title="『iwasiman.hatenablog.com』の新着エントリー" data-gtm-click-label="entry-search-result-item-site-search-url"> iwasiman.hatenablog.com </a> </li> <li> <a href="/hotentry/it" data-gtm-click-label="entry-search-result-item-category">テクノロジー</a> </li> <li><span class="entry-contents-date">2021/03/22</span></li> </ul> </div> <div class="centerarticle-entry-contents has-image"> <div class="centerarticle-entry-item"> <p class="centerarticle-entry-summary">サーバーレスアプリケーション開発ガイド Lambda関数を用いたサーバーレス開発をもっと知っておこうと思って読んだ本の感想です。2018年4月刊行、サーバーレスの主要サービス解説にコードはPython、のみならずフロントはVue.jsを使った本格開発まで、実践的な内容が詰まった本です。作者は現Amazon Web Services Japan所属のKeisuke69こと西谷圭介さん。Twitterでもよくお見掛けします。(@Keisuke69) サーバーレスアプリケーション開発ガイド Chapter1 サーバーレスアプリケーションの概要 1-1 サーバーレスアプリケーションとは 1-2 ユースケースとアーキテクチャパターン 1-3 サーバーレスアプリケーションのライフサイクル管理 Chapter2 Amazon Web Services（AWS）利用の準備 Chapter3 インフラを自</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/lambda" data-gtm-click-label="entry-search-result-item-tag">lambda</a></li> <li><a href="/q/serverless" data-gtm-click-label="entry-search-result-item-tag">serverless</a></li> <li><a href="/q/%E9%96%8B%E7%99%BA" data-gtm-click-label="entry-search-result-item-tag">開発</a></li> <li><a href="/q/%E3%82%A2%E3%83%97%E3%83%AA%E3%82%B1%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/amazon" data-gtm-click-label="entry-search-result-item-tag">amazon</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/%E6%9C%AC" 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://iwasiman.hatenablog.com/entry/20210322-serverless-app-dev-guide"> <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://iwasiman.hatenablog.com/entry/20210322-serverless-app-dev-guide" class="centerarticle-entry-image" target="_blank" rel="noopener"> <img src="https://cdn-ak-scissors.b.st-hatena.com/image/square/16cbf4b6c3eae1cd755813eae8b8fbecab2a26b4/height=288;version=1;width=512/https%3A%2F%2Fcdn-ak.f.st-hatena.com%2Fimages%2Ffotolife%2Fi%2Fiwasiman%2F20210220%2F20210220110228.png" alt="【感想】『Amazon Web Servicesを使ったサーバーレスアプリケーション開発ガイド』：Lambdaで本格サービス開発まで - Rのつく財団入り口" 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/javascript/table-for-all-popular-javascript-frameworks.html"><span>あとで読む</span> </button> </div> <div class="centerarticle-entry-header"> <h3 class="centerarticle-entry-title"> <a href="https://coliss.com/articles/build-websites/operation/javascript/table-for-all-popular-javascript-frameworks.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%2Fjavascript%2Ftable-for-all-popular-javascript-frameworks.html" alt="">React、Angular、Vue対応、高性能なテーブルを実装できるシンプルで軽量のJavaScriptライブラリ -Grid.js </a> </h3> <ul class="centerarticle-entry-data"> <li> <span class="centerarticle-users"> <a href="/entry/s/coliss.com/articles/build-websites/operation/javascript/table-for-all-popular-javascript-frameworks.html" class="js-keyboard-entry-page-openable" title="React、Angular、Vue対応、高性能なテーブルを実装できるシンプルで軽量のJavaScriptライブラリ -Grid.js (239 ブックマーク)" data-gtm-click-label="entry-search-result-item-users"> 239 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">2020/07/15</span></li> </ul> </div> <div class="centerarticle-entry-contents has-image"> <div class="centerarticle-entry-item"> <p class="centerarticle-entry-summary">高性能なテーブルを実装できる、シンプルで軽量のJavaScriptライブラリを紹介します。HTMLテーブル、ページネーション、検索機能、ソート機能、XMLやJSONからインポートなどに対応しています。 React、Angular、Preact、Vueなどの主要なフレームワークのプラグインとして動作するだけでなく、フレームワークなしのバニラJavaScriptでも使用できます。 Grid.js Grid.js -GitHub Grid.jsの特徴 Grid.jsのデモ Grid.jsの使い方 Grid.jsの特徴 Grid.jsは高性能なテーブルを実装できる12Kbの超軽量のJavaScriptです。シンプルで軽量な実装。人気が高いすべてのJavaScriptフレームワーク（React、Angular、Vueなど）で使用できます。フレームワークなし（バニラJavaScript）でも使用</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/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" 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/Vue.js" data-gtm-click-label="entry-search-result-item-tag">Vue.js</a></li> <li><a href="/q/%E3%83%86%E3%83%BC%E3%83%96%E3%83%AB" data-gtm-click-label="entry-search-result-item-tag">テーブル</a></li> <li><a href="/q/grid" data-gtm-click-label="entry-search-result-item-tag">grid</a></li> <li><a href="/q/table" data-gtm-click-label="entry-search-result-item-tag">table</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://coliss.com/articles/build-websites/operation/javascript/table-for-all-popular-javascript-frameworks.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/javascript/table-for-all-popular-javascript-frameworks.html" class="centerarticle-entry-image" target="_blank" rel="noopener"> <img src="https://cdn-ak-scissors.b.st-hatena.com/image/square/12533cf92c07a1b662eed09a74aeae6d55e26be2/height=288;version=1;width=512/https%3A%2F%2Fcoliss.com%2Fwp-content%2Fuploads-202003%2F2020071201.png" alt="React、Angular、Vue対応、高性能なテーブルを実装できるシンプルで軽量のJavaScriptライブラリ -Grid.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/sa2knight/articles/why_react_folks_dont_choose_vue"><span>あとで読む</span> </button> </div> <div class="centerarticle-entry-header"> <h3 class="centerarticle-entry-title"> <a href="https://zenn.dev/sa2knight/articles/why_react_folks_dont_choose_vue" 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%2Fsa2knight%2Farticles%2Fwhy_react_folks_dont_choose_vue" alt="">[Twitter] React ユーザーが Vue を選ばない理由 </a> </h3> <ul class="centerarticle-entry-data"> <li> <span class="centerarticle-users"> <a href="/entry/s/zenn.dev/sa2knight/articles/why_react_folks_dont_choose_vue" class="js-keyboard-entry-page-openable" title="[Twitter] React ユーザーが Vue を選ばない理由 (238 ブックマーク)" data-gtm-click-label="entry-search-result-item-users"> 238 users </a> </span> </li> <li> <a href="/site/zenn.dev/sa2knight" title="『zenn.dev/sa2knight』の新着エントリー" data-gtm-click-label="entry-search-result-item-site-search-url"> zenn.dev/sa2knight </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/20</span></li> </ul> </div> <div class="centerarticle-entry-contents has-image"> <div class="centerarticle-entry-item"> <p class="centerarticle-entry-summary">概要本記事は、 Vue.js コアチームメンバーである @antfu7 氏の以下ツイートに対する回答を個人的にまとめたものです。 React ユーザーの皆さん、好奇心で聞くのですが、Vue を使ったり試したりするのを妨げているブロッカーや欠点は何ですか？注意事項対立煽りっぽいタイトルにはなっていますが、個人的な好奇心がモチベーションとなっており、特定の技術を贔屓、批判する意図はありません。私自身は長らく Vue を愛用しており、業務でも大規模 Vue アプリのメンテに携わっている一方で、React は小規模プロジェクトや個人開発でしか利用していません。そのため、理解度に差がある状態であるため、改めて Vue と React の対比やそれぞれの良さを実感したいと思い、一通りのツイートに目を通した次第です。また、 Vue.js の生みの親である Evan You氏が以下のようにツイ</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" 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/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> <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/development" data-gtm-click-label="entry-search-result-item-tag">development</a></li> <li><a href="/q/js" data-gtm-click-label="entry-search-result-item-tag">js</a></li> <li><a href="/q/twitter" data-gtm-click-label="entry-search-result-item-tag">twitter</a></li> </ul> <div class="following-bookmarks-container js-following-bookmarks-container" data-entry-url="https://zenn.dev/sa2knight/articles/why_react_folks_dont_choose_vue"> <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/sa2knight/articles/why_react_folks_dont_choose_vue" class="centerarticle-entry-image" target="_blank" rel="noopener"> <img src="https://cdn-ak-scissors.b.st-hatena.com/image/square/050cb810e4b79fc48a4bc3fe8753540d585f1720/height=288;version=1;width=512/https%3A%2F%2Fres.cloudinary.com%2Fzenn%2Fimage%2Fupload%2Fs--QTloU7Jr--%2Fc_fit%252Cg_north_west%252Cl_text%3Anotosansjp-medium.otf_55%3A%25255BTwitter%25255D%252520React%252520%2525E3%252583%2525A6%2525E3%252583%2525BC%2525E3%252582%2525B6%2525E3%252583%2525BC%2525E3%252581%25258C%252520Vue%252520%2525E3%252582%252592%2525E9%252581%2525B8%2525E3%252581%2525B0%2525E3%252581%2525AA%2525E3%252581%252584%2525E7%252590%252586%2525E7%252594%2525B1%252Cw_1010%252Cx_90%252Cy_100%2Fg_south_west%252Cl_text%3Anotosansjp-medium.otf_37%3Ashingo.sasaki%252Cx_203%252Cy_121%2Fg_south_west%252Ch_90%252Cl_fetch%3AaHR0cHM6Ly9zdG9yYWdlLmdvb2dsZWFwaXMuY29tL3plbm4tdXNlci11cGxvYWQvYXZhdGFyLzg0NWZhNzViYTguanBlZw%3D%3D%252Cr_max%252Cw_90%252Cx_87%252Cy_95%2Fv1627283836%2Fdefault%2Fog-base-w1200-v2.png" alt="[Twitter] React ユーザーが 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://tech.pepabo.com/2020/09/23/session-management-for-web-apps-using-spa-ssr-api/"><span>あとで読む</span> </button> </div> <div class="centerarticle-entry-header"> <h3 class="centerarticle-entry-title"> <a href="https://tech.pepabo.com/2020/09/23/session-management-for-web-apps-using-spa-ssr-api/" 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.pepabo.com%2F2020%2F09%2F23%2Fsession-management-for-web-apps-using-spa-ssr-api%2F" alt="">SPA+SSR+APIで構成したWebアプリケーションのセッション管理 - Pepabo Tech Portal </a> </h3> <ul class="centerarticle-entry-data"> <li> <span class="centerarticle-users"> <a href="/entry/s/tech.pepabo.com/2020/09/23/session-management-for-web-apps-using-spa-ssr-api/" class="js-keyboard-entry-page-openable" title="SPA+SSR+APIで構成したWebアプリケーションのセッション管理 - Pepabo Tech Portal (237 ブックマーク)" data-gtm-click-label="entry-search-result-item-users"> 237 users </a> </span> </li> <li> <a href="/site/tech.pepabo.com/" title="『tech.pepabo.com』の新着エントリー" data-gtm-click-label="entry-search-result-item-site-search-url"> tech.pepabo.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/09/23</span></li> </ul> </div> <div class="centerarticle-entry-contents has-image"> <div class="centerarticle-entry-item"> <p class="centerarticle-entry-summary">カラーミーショップサービス基盤チームのkymmtです。この記事では、サーバサイドレンダリングするシングルページアプリケーションとAPIサーバからなるWebアプリケーションのセッション管理方法について紹介します。アプリケーションの構成構成の概要今回は例としてEC事業部で提供するカラーミーリピートをとりあげます。構成としては、Railsで作られたAPIサーバ1と、Vue.jsで作られたシングルページアプリケーション(SPA)からなります。また、SPAはExpressが動くフロントエンドサーバでサーバサイドレンダリング(SSR)します。APIサーバはSPAかフロントエンドサーバだけが呼び出します。各ロールはサブドメインが異なります。 APIサーバでセッションIDを持つCookieを発行し、Redisを用いてセッション管理します。また、APIサーバへのセッションが有効なリクエストはフロント</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/api" data-gtm-click-label="entry-search-result-item-tag">api</a></li> <li><a href="/q/%E3%81%82%E3%81%A8%E3%81%A7%E8%AA%AD%E3%82%80" data-gtm-click-label="entry-search-result-item-tag">あとで読む</a></li> <li><a href="/q/rails" data-gtm-click-label="entry-search-result-item-tag">rails</a></li> <li><a href="/q/vue.js" data-gtm-click-label="entry-search-result-item-tag">vue.js</a></li> <li><a href="/q/%E3%82%BB%E3%83%83%E3%82%B7%E3%83%A7%E3%83%B3" data-gtm-click-label="entry-search-result-item-tag">セッション</a></li> <li><a href="/q/cookie" data-gtm-click-label="entry-search-result-item-tag">cookie</a></li> <li><a href="/q/config" data-gtm-click-label="entry-search-result-item-tag">config</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/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://tech.pepabo.com/2020/09/23/session-management-for-web-apps-using-spa-ssr-api/"> <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.pepabo.com/2020/09/23/session-management-for-web-apps-using-spa-ssr-api/" class="centerarticle-entry-image" target="_blank" rel="noopener"> <img src="https://cdn-ak-scissors.b.st-hatena.com/image/square/96ce53fc7aa7c1c7f7f90f0ecaf8c29621cda38d/height=288;version=1;width=512/https%3A%2F%2Ftech.pepabo.com%2Fimages%2Fogpimage.png" alt="SPA+SSR+APIで構成したWebアプリケーションのセッション管理 - Pepabo Tech Portal" 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/alt_yamamoto/items/2fbd63ee77d87dd727f7"><span>あとで読む</span> </button> </div> <div class="centerarticle-entry-header"> <h3 class="centerarticle-entry-title"> <a href="https://qiita.com/alt_yamamoto/items/2fbd63ee77d87dd727f7" 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%2Falt_yamamoto%2Fitems%2F2fbd63ee77d87dd727f7" alt="">VueもReactもやったことないのでVanilla JSでやってみたSPA - Qiita </a> </h3> <ul class="centerarticle-entry-data"> <li> <span class="centerarticle-users"> <a href="/entry/s/qiita.com/alt_yamamoto/items/2fbd63ee77d87dd727f7" class="js-keyboard-entry-page-openable" title="VueもReactもやったことないのでVanilla JSでやってみたSPA - Qiita (235 ブックマーク)" data-gtm-click-label="entry-search-result-item-users"> 235 users </a> </span> </li> <li> <a href="/site/qiita.com/alt_yamamoto" title="『qiita.com/alt_yamamoto』の新着エントリー" data-gtm-click-label="entry-search-result-item-site-search-url"> qiita.com/alt_yamamoto </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/10/04</span></li> </ul> </div> <div class="centerarticle-entry-contents has-image"> <div class="centerarticle-entry-item"> <p class="centerarticle-entry-summary">Vanilla JSのメリットフレームワークのサイズが大したことないなら、バニラでやるメリットはあるのか？という話になりますが、実際作ってみてバニラの方が優位だった点が１つありました。それは動作が速いことです。今回作ったSPAの中に1つ、画面内の要素が多すぎて描画に数秒時間がかかるページがありました。どれくらい多いかというと、テキストボックス・チェックボックス・プルダウンなどの入力要素が１画面に１万個以上あります。この画面を高速化したいと思い、試しにVue.jsで同じようなページを作ってみたのですが、比較するとVanilla JSの方が速かったです。仮想DOMは速いみたいな記事を目にすることがあり、VueやReactはなんとなく速いイメージを持っていたのですが、よく考えてみるとVueやReactだって最終的には画面描画のためにリアルDOMを操作するわけで、それなら必要最小限のリ</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/SPA" data-gtm-click-label="entry-search-result-item-tag">SPA</a></li> <li><a href="/q/react" data-gtm-click-label="entry-search-result-item-tag">react</a></li> <li><a href="/q/js" data-gtm-click-label="entry-search-result-item-tag">js</a></li> <li><a href="/q/jQuery" data-gtm-click-label="entry-search-result-item-tag">jQuery</a></li> <li><a href="/q/qiita" data-gtm-click-label="entry-search-result-item-tag">qiita</a></li> <li><a href="/q/npm" data-gtm-click-label="entry-search-result-item-tag">npm</a></li> <li><a href="/q/webDev" data-gtm-click-label="entry-search-result-item-tag">webDev</a></li> </ul> <div class="following-bookmarks-container js-following-bookmarks-container" data-entry-url="https://qiita.com/alt_yamamoto/items/2fbd63ee77d87dd727f7"> <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/alt_yamamoto/items/2fbd63ee77d87dd727f7" class="centerarticle-entry-image" target="_blank" rel="noopener"> <img src="https://cdn-ak-scissors.b.st-hatena.com/image/square/bcf63dcdaa1abc37c33a8750b77786e8e81434e2/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%253DaHR0cHM6Ly9xaWl0YS11c2VyLXByb2ZpbGUtaW1hZ2VzLmltZ2l4Lm5ldC9odHRwcyUzQSUyRiUyRnFpaXRhLWltYWdlLXN0b3JlLnMzLmFtYXpvbmF3cy5jb20lMkYwJTJGMjMzNzY5JTJGcHJvZmlsZS1pbWFnZXMlMkYxNTE3ODAwMDk0P2l4bGliPXJiLTQuMC4wJmFyPTElM0ExJmZpdD1jcm9wJm1hc2s9ZWxsaXBzZSZmbT1wbmczMiZzPTAzOTU1MGQ4YmQyMTk0OGRjYjc3YjI5NjQ2Zjk5MWZk%2526blend-x%253D120%2526blend-y%253D467%2526blend-w%253D82%2526blend-h%253D82%2526blend-mode%253Dnormal%2526s%253D6bf939b435f7c9b995743384cdcff341%3Fixlib%3Drb-4.0.0%26w%3D1200%26fm%3Djpg%26mark64%3DaHR0cHM6Ly9xaWl0YS11c2VyLWNvbnRlbnRzLmltZ2l4Lm5ldC9-dGV4dD9peGxpYj1yYi00LjAuMCZ3PTk2MCZoPTMyNCZ0eHQ9VnVlJUUzJTgyJTgyUmVhY3QlRTMlODIlODIlRTMlODIlODQlRTMlODElQTMlRTMlODElOUYlRTMlODElOTMlRTMlODElQTglRTMlODElQUElRTMlODElODQlRTMlODElQUUlRTMlODElQTdWYW5pbGxhJTIwSlMlRTMlODElQTclRTMlODIlODQlRTMlODElQTMlRTMlODElQTYlRTMlODElQkYlRTMlODElOUZTUEEmdHh0LWFsaWduPWxlZnQlMkN0b3AmdHh0LWNvbG9yPSUyMzFFMjEyMSZ0eHQtZm9udD1IaXJhZ2lubyUyMFNhbnMlMjBXNiZ0eHQtc2l6ZT01NiZ0eHQtcGFkPTAmcz1lZmY5ODkyNDY0MzI3YmJmNjhkMzY1NzA0ZDUxZjRiNQ%26mark-x%3D120%26mark-y%3D112%26blend64%3DaHR0cHM6Ly9xaWl0YS11c2VyLWNvbnRlbnRzLmltZ2l4Lm5ldC9-dGV4dD9peGxpYj1yYi00LjAuMCZ3PTgzOCZoPTU4JnR4dD0lNDBhbHRfeWFtYW1vdG8mdHh0LWNvbG9yPSUyMzFFMjEyMSZ0eHQtZm9udD1IaXJhZ2lubyUyMFNhbnMlMjBXNiZ0eHQtc2l6ZT0zNiZ0eHQtcGFkPTAmcz00NTcxODgwMzUzN2NiZmIxYmNjNmUxN2MyZDgxNWZjYg%26blend-x%3D242%26blend-y%3D480%26blend-w%3D838%26blend-h%3D46%26blend-fit%3Dcrop%26blend-crop%3Dleft%252Cbottom%26blend-mode%3Dnormal%26s%3Dcee26a8c3e1bdabc5020fe5d5f575746" alt="VueもReactもやったことないのでVanilla JSでやってみたSPA - 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/overflow_offers/articles/20220523-component-design-best-practice"><span>あとで読む</span> </button> </div> <div class="centerarticle-entry-header"> <h3 class="centerarticle-entry-title"> <a href="https://zenn.dev/overflow_offers/articles/20220523-component-design-best-practice" 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%2Foverflow_offers%2Farticles%2F20220523-component-design-best-practice" alt="">【React/Vue.js】コンポーネント設計の（個人的）ベストプラクティス | Offers Tech Blog </a> </h3> <ul class="centerarticle-entry-data"> <li> <span class="centerarticle-users"> <a href="/entry/s/zenn.dev/overflow_offers/articles/20220523-component-design-best-practice" class="js-keyboard-entry-page-openable" title="【React/Vue.js】コンポーネント設計の（個人的）ベストプラクティス | Offers Tech Blog (225 ブックマーク)" data-gtm-click-label="entry-search-result-item-users"> 225 users </a> </span> </li> <li> <a href="/site/zenn.dev/overflow_offers" title="『zenn.dev/overflow_offers』の新着エントリー" data-gtm-click-label="entry-search-result-item-site-search-url"> zenn.dev/overflow_offers </a> </li> <li> <a href="/hotentry/it" data-gtm-click-label="entry-search-result-item-category">テクノロジー</a> </li> <li><span class="entry-contents-date">2022/05/23</span></li> </ul> </div> <div class="centerarticle-entry-contents has-image"> <div class="centerarticle-entry-item"> <p class="centerarticle-entry-summary">概要こんにちは、Offers を運営している株式会社 overflow の Software Engineer（主戦場はフロントエンド）の Kazuya です。今回は、React や Vue.js などの SPA フレームワークにおけるコンポーネント設計について紹介します。昨今のフロントエンド開発では、コンポーネント指向での開発がスタンダート化しつつありますが、コンポーネント設計には厳格なルールが無く、どのように設計すればいいか悩む方も多いのではないでしょうか？（筆者は沼にはまりました）コンポーネントの単位はどの程度に分割すべきなのか、状態管理はどうすればいいのか、API 通信はどこですべきなのかなど、一言にコンポーネント設計と言っても考えるべき項目が多いです。チーム開発では、認識があっていないとコードが魔境になることもしばしばあると思います。（筆者の経験談より）そこで今回は、数々</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/%E8%A8%AD%E8%A8%88" 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%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/%E9%96%8B%E7%99%BA" 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.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/%E3%83%99%E3%82%B9%E3%83%88%E3%83%97%E3%83%A9%E3%82%AF%E3%83%86%E3%82%A3%E3%82%B9" 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/overflow_offers/articles/20220523-component-design-best-practice"> <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/overflow_offers/articles/20220523-component-design-best-practice" class="centerarticle-entry-image" target="_blank" rel="noopener"> <img src="https://cdn-ak-scissors.b.st-hatena.com/image/square/e8ad1c38cd0d50cd929f91f062c2c5193bed78f0/height=288;version=1;width=512/https%3A%2F%2Fres.cloudinary.com%2Fzenn%2Fimage%2Fupload%2Fs--LCUAxqZV--%2Fc_fit%252Cg_north_west%252Cl_text%3Anotosansjp-medium.otf_55%3A%2525E3%252580%252590React%25252FVue.js%2525E3%252580%252591%2525E3%252582%2525B3%2525E3%252583%2525B3%2525E3%252583%25259D%2525E3%252583%2525BC%2525E3%252583%25258D%2525E3%252583%2525B3%2525E3%252583%252588%2525E8%2525A8%2525AD%2525E8%2525A8%252588%2525E3%252581%2525AE%2525EF%2525BC%252588%2525E5%252580%25258B%2525E4%2525BA%2525BA%2525E7%25259A%252584%2525EF%2525BC%252589%2525E3%252583%252599%2525E3%252582%2525B9%2525E3%252583%252588%2525E3%252583%252597%2525E3%252583%2525A9%2525E3%252582%2525AF%2525E3%252583%252586%2525E3%252582%2525A3%2525E3%252582%2525B9%252520%25257C%252520Offers%252520Tech%252520Blog%252Cw_1010%252Cx_90%252Cy_100%2Fg_south_west%252Cl_text%3Anotosansjp-medium.otf_34%3AKazuya%252Cx_220%252Cy_108%2Fbo_3px_solid_rgb%3Ad6e3ed%252Cg_south_west%252Ch_90%252Cl_fetch%3AaHR0cHM6Ly9zdG9yYWdlLmdvb2dsZWFwaXMuY29tL3plbm4tdXNlci11cGxvYWQvYXZhdGFyLzY4M2UwNWE5MjAuanBlZw%3D%3D%252Cr_20%252Cw_90%252Cx_92%252Cy_102%2Fco_rgb%3A6e7b85%252Cg_south_west%252Cl_text%3Anotosansjp-medium.otf_30%3AOffers%252520Tech%252520Blog%252Cx_220%252Cy_160%2Fbo_4px_solid_white%252Cg_south_west%252Ch_50%252Cl_fetch%3AaHR0cHM6Ly9saDMuZ29vZ2xldXNlcmNvbnRlbnQuY29tL2EtL0FPaDE0R2pOQkxNQmx1ZU96T0wtQmw1MzAwTGVKblRfamlXOFF2TUVVeHNGOXc9czk2LWM%3D%252Cr_max%252Cw_50%252Cx_139%252Cy_84%2Fv1627283836%2Fdefault%2Fog-base-w1200-v2.png" alt="【React/Vue.js】コンポーネント設計の（個人的）ベストプラクティス | Offers Tech Blog" data-gtm-click-label="entry-search-result-item-image"> </a> </div> </div> </div> </li> <li class="bookmark-item js-user-bookmark-item js-keyboard-selectable-item"> <div class="centerarticle-entry is-image-entry-unit"> <div class="js-bookmark-stock-button is-hidden"> <button class="js-bookmark-stock-button-ready readlater-button" data-gtm-click-label="entry-search-result-item-stock-button" title="あとで読む" aria-label="あとで読む" tabindex="0" type="button" data-href="https://zenn.dev/yuuhu04/books/xss-anti-pattern-of-react-and-vue"><span>あとで読む</span> </button> </div> <div class="centerarticle-entry-header"> <h3 class="centerarticle-entry-title"> <a href="https://zenn.dev/yuuhu04/books/xss-anti-pattern-of-react-and-vue" 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%2Fyuuhu04%2Fbooks%2Fxss-anti-pattern-of-react-and-vue" alt="">React と Vue に関する XSS アンチパターン </a> </h3> <ul class="centerarticle-entry-data"> <li> <span class="centerarticle-users"> <a href="/entry/s/zenn.dev/yuuhu04/books/xss-anti-pattern-of-react-and-vue" class="js-keyboard-entry-page-openable" title="React と Vue に関する XSS アンチパターン (220 ブックマーク)" data-gtm-click-label="entry-search-result-item-users"> 220 users </a> </span> </li> <li> <a href="/site/zenn.dev/yuuhu04" title="『zenn.dev/yuuhu04』の新着エントリー" data-gtm-click-label="entry-search-result-item-site-search-url"> zenn.dev/yuuhu04 </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/18</span></li> </ul> </div> <div class="centerarticle-entry-contents has-image"> <div class="centerarticle-entry-item"> <p class="centerarticle-entry-summary">React と Vue.js におけるエスケープ機構と XSS について、簡単なハンズオンを交えて説明していきます。無料で読めますが、お気に召されたらご購入いただけると嬉しいです。</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/XSS" data-gtm-click-label="entry-search-result-item-tag">XSS</a></li> <li><a href="/q/%E3%82%BB%E3%82%AD%E3%83%A5%E3%83%AA%E3%83%86%E3%82%A3" data-gtm-click-label="entry-search-result-item-tag">セキュリティ</a></li> <li><a href="/q/security" data-gtm-click-label="entry-search-result-item-tag">security</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/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://zenn.dev/yuuhu04/books/xss-anti-pattern-of-react-and-vue"> <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/yuuhu04/books/xss-anti-pattern-of-react-and-vue" class="centerarticle-entry-image" target="_blank" rel="noopener"> <img src="https://cdn-ak-scissors.b.st-hatena.com/image/square/896bf4284fb0eb2235c59f393665bcf7e920e6c0/height=288;version=1;width=512/https%3A%2F%2Fres.cloudinary.com%2Fzenn%2Fimage%2Fupload%2Fs--jUZB7RBC--%2Fg_center%252Ch_280%252Cl_fetch%3AaHR0cHM6Ly9zdG9yYWdlLmdvb2dsZWFwaXMuY29tL3plbm4tdXNlci11cGxvYWQvYm9va19jb3Zlci9jM2YyYTNlMjUyLmpwZw%3D%3D%252Cw_200%2Fv1627283836%2Fdefault%2Fog-base-book_yz4z02.jpg" alt="React と Vue に関する XSS アンチパターン" 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.js?page=2" class="js-keyboard-openable">2</a></span> <span class="js-keyboard-selectable-item"><a href="https://b.hatena.ne.jp/q/vue.js?page=3" class="js-keyboard-openable">3</a></span> <span class="js-keyboard-selectable-item"><a href="https://b.hatena.ne.jp/q/vue.js?page=4" class="js-keyboard-openable">4</a></span> <span class="js-keyboard-selectable-item"><a href="https://b.hatena.ne.jp/q/vue.js?page=5" class="js-keyboard-openable">5</a></span> <span class="js-keyboard-selectable-item"><a href="https://b.hatena.ne.jp/q/vue.js?page=6" class="js-keyboard-openable">6</a></span> <span class="js-keyboard-selectable-item"><a href="https://b.hatena.ne.jp/q/vue.js?page=7" class="js-keyboard-openable">7</a></span> <span class="js-keyboard-selectable-item"><a href="https://b.hatena.ne.jp/q/vue.js?page=8" class="js-keyboard-openable">8</a></span> <span class="js-keyboard-selectable-item"><a href="https://b.hatena.ne.jp/q/vue.js?page=9" class="js-keyboard-openable">9</a></span> <span class="js-keyboard-selectable-item"><a href="https://b.hatena.ne.jp/q/vue.js?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.js?page=2" class="js-keyboard-openable">次のページ</a></span> </div> </div> <ins id="entrysearch-ad-rectangle-middle-sp" class="entrylist-ad-sp-fluid for-sp"></ins> <div id="entrysearch-ad-rectangle-bottom-sp" class="touch-ad-rectangle"></div> </div> <div class="entry-wrapper"> <section class="entry-group"> <h2 class="entry-group-sectionTitle">新着記事</h2> <ul class="entry-group-list"> <li> <div class="entry-group-list-inner"> <div class="entry-group-text"> <h3 class="entry-group-title"><a href="/entry/s/note.com/iida_yasuyuki/n/n188504694afa" title="トランプ関税の算出式解説｜飯田泰之" data-gtm-label="entry-recentEntriesInEntrySearch-title">トランプ関税の算出式解説｜飯田泰之</a></h3> <p class="entry-group-meta"><span class="entry-group-users"><a href="/entry/s/note.com/iida_yasuyuki/n/n188504694afa" data-gtm-label="entry-recentEntriesInEntrySearch-users">1 user</a></span><span class="entry-group-domain"><a href="/site/note.com/iida_yasuyuki" data-gtm-label="entry-recentEntriesInEntrySearch-domain"><img src="https://cdn-ak2.favicon.st-hatena.com/64?url=https%3A%2F%2Fnote.com%2Fiida_yasuyuki%2Fn%2Fn188504694afa" alt="">note.com/iida_yasuyuki</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/bear-snow.com/entry/2025/04/07/050000" title="月次成績(2025年3月実績) -737,542円 -3.14% - bear-snowの投資生活" data-gtm-label="entry-recentEntriesInEntrySearch-title">月次成績(2025年3月実績) -737,542円 -3.14% - bear-snowの投資生活</a></h3> <p class="entry-group-meta"><span class="entry-group-users"><a href="/entry/s/bear-snow.com/entry/2025/04/07/050000" data-gtm-label="entry-recentEntriesInEntrySearch-users">1 user</a></span><span class="entry-group-domain"><a href="/site/bear-snow.com/" data-gtm-label="entry-recentEntriesInEntrySearch-domain"><img src="https://cdn-ak2.favicon.st-hatena.com/64?url=https%3A%2F%2Fbear-snow.com%2Fentry%2F2025%2F04%2F07%2F050000" alt="">bear-snow.com</a></span></p> </div> </div> </li> <li> <div class="entry-group-list-inner"> <div class="entry-group-text"> <h3 class="entry-group-title"><a href="/entry/s/www.iezo.net/forum/badminton-h/122784/" title="山梨県高校総体バドミントン2025インターハイ予選日程・組合せ・結果" data-gtm-label="entry-recentEntriesInEntrySearch-title">山梨県高校総体バドミントン2025インターハイ予選日程・組合せ・結果</a></h3> <p class="entry-group-meta"><span class="entry-group-users"><a href="/entry/s/www.iezo.net/forum/badminton-h/122784/" data-gtm-label="entry-recentEntriesInEntrySearch-users">1 user</a></span><span class="entry-group-domain"><a href="/site/www.iezo.net/" data-gtm-label="entry-recentEntriesInEntrySearch-domain"><img src="https://cdn-ak2.favicon.st-hatena.com/64?url=https%3A%2F%2Fwww.iezo.net%2Fforum%2Fbadminton-h%2F122784%2F" alt="">www.iezo.net</a></span></p> </div> </div> </li> <li> <div class="entry-group-list-inner"> <div class="entry-group-text"> <h3 class="entry-group-title"><a href="/entry/s/encount.press/archives/698661/" title="激レア国産車を父→おじ→息子と継承　ベテラン業界人も太鼓判の1台は「よく残っていた」" data-gtm-label="entry-recentEntriesInEntrySearch-title">激レア国産車を父→おじ→息子と継承　ベテラン業界人も太鼓判の1台は「よく残っていた」</a></h3> <p class="entry-group-meta"><span class="entry-group-users"><a href="/entry/s/encount.press/archives/698661/" data-gtm-label="entry-recentEntriesInEntrySearch-users">1 user</a></span><span class="entry-group-domain"><a href="/site/encount.press/" data-gtm-label="entry-recentEntriesInEntrySearch-domain"><img src="https://cdn-ak2.favicon.st-hatena.com/64?url=https%3A%2F%2Fencount.press%2Farchives%2F698661%2F" alt="">encount.press</a></span></p> </div> </div> </li> <li> <div class="entry-group-list-inner"> <div class="entry-group-text"> <h3 class="entry-group-title"><a href="/entry/s/b.hatena.ne.jp/entry/4768615876627470369/comment/asumi2021" title="『「正義にソースは要らない。無くても美味しいから」ネット風刺漫画「インスタントジャスティス」のセリフ回しが面白い』へのコメント" data-gtm-label="entry-recentEntriesInEntrySearch-title">『「正義にソースは要らない。無くても美味しいから」ネット風刺漫画「インスタントジャスティス」のセリフ回しが面白い』へのコメント</a></h3> <p class="entry-group-meta"><span class="entry-group-users"><a href="/entry/s/b.hatena.ne.jp/entry/4768615876627470369/comment/asumi2021" data-gtm-label="entry-recentEntriesInEntrySearch-users">1 user</a></span><span class="entry-group-domain"><a href="/site/b.hatena.ne.jp/" data-gtm-label="entry-recentEntriesInEntrySearch-domain"><img src="https://cdn-ak2.favicon.st-hatena.com/64?url=https%3A%2F%2Fb.hatena.ne.jp%2Fentry%2F4768615876627470369%2Fcomment%2Fasumi2021" alt="">b.hatena.ne.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.hbc.co.jp/news/e54fd35995f509d5a91b3e2538143f05.html" title="札幌市内で道路のひび割れ通報　去年同時期の1.7倍　雪少なく雪解け水がしみ込みやすかったか　補修作業前倒しに" data-gtm-label="entry-recentEntriesInEntrySearch-title">札幌市内で道路のひび割れ通報　去年同時期の1.7倍　雪少なく雪解け水がしみ込みやすかったか　補修作業前倒しに</a></h3> <p class="entry-group-meta"><span class="entry-group-users"><a href="/entry/s/www.hbc.co.jp/news/e54fd35995f509d5a91b3e2538143f05.html" data-gtm-label="entry-recentEntriesInEntrySearch-users">1 user</a></span><span class="entry-group-domain"><a href="/site/www.hbc.co.jp/" data-gtm-label="entry-recentEntriesInEntrySearch-domain"><img src="https://cdn-ak2.favicon.st-hatena.com/64?url=https%3A%2F%2Fwww.hbc.co.jp%2Fnews%2Fe54fd35995f509d5a91b3e2538143f05.html" alt="">www.hbc.co.jp</a></span></p> </div> </div> </li> </ul> </section> </div> </div> <div id="keyboard-shortcut-help" class="shortcut-help is-hidden"> <h3 class="shortcut-help-title">キーボードショートカット一覧</h3> <p><span class="shortcut-help-key">j</span>次のブックマーク</p> <p><span class="shortcut-help-key">k</span>前のブックマーク</p> <p><span class="shortcut-help-key">l</span>あとで読む</p> <p><span class="shortcut-help-key">e</span>コメント一覧を開く</p> <p><span class="shortcut-help-key">o</span>ページを開く</p> <button tyle="button" class="shortcut-help-close js-close-button">✕</button> </div> <script type="text/javascript"> // ---------------- dfp section ---------------- var valve = valve || []; if (isMobile()) { valve.push(function(v) { v.defineDFPSlot({ unit: '/4374287/bookmark_overlay_sp', sizes: [[320,80],[320,70],[320,50]], slotId: 'touch-footer-ad' }); v.defineDFPSlot({ unit: '/4374287/bookmark_entrysearch_rectangle_bottom_sp', sizes: [[300,250]], slotId: 'entrysearch-ad-rectangle-bottom-sp' }); v.sealDFPSlots(); }); } else { valve.push(function(v) { v.defineDFPSlot({ unit: '/4374287/bookmark_entrysearch_sidebar_top_pc', sizes: [[300,250]], slotId: 'entrysearch-ad-sidebar-top' }); v.defineDFPSlot({ unit: '/4374287/bookmark_entrysearch_sidebar_bottom_pc', sizes: [[300,250]], slotId: 'entrysearch-ad-sidebar-bottom' }); v.sealDFPSlots(); }); } // ---------------- ydn section ---------------- if (isMobile()) { valve.push(function(v) { v.defineFluidSlot({ insId: 'entrysearch-ad-rectangle-middle-sp', yadsAdDs: '62199_242886' }); }); } </script> <script> var valve = window.valve || []; valve.push(function(v) { var pageKeyValues = {}; if (document.cookie.split(';').some(function(item) { return item.indexOf('202011_guest_status=register_incomplete') >= 0})) { pageKeyValues.bookmark_status = 'register_incomplete'; } v.config({ pageKeyValues: pageKeyValues, textSelector: ".entry-search-articles", content: { result: "ng" }, service: 'bookmark' }); }); </script> <script src="https://cdn.pool.st-hatena.com/valve/valve.js" async></script> <div class="footer"> <div class="footer-inner"> <div class="footer-inner-group footer-bookmark"> <h2 class="footer-title"><a href="/" data-gtm-label="footer-btop">はてなブックマーク</a></h2> <div class="footer-list-wrapper"> <ul class="footer-list footer-list--pc"> <li class="footer-list-item js-keyboard-selectable-item"><a href="/hotentry/all" class="hotentry js-keyboard-openable" data-gtm-label="footerCategories-hotentry">総合</a></li> <li class="footer-list-item js-keyboard-selectable-item"><a href="/hotentry/general" class="general js-keyboard-openable" data-gtm-label="footerCategories-general">一般</a></li> <li class="footer-list-item js-keyboard-selectable-item"><a href="/hotentry/social" class="cat-social js-keyboard-openable" data-gtm-label="footerCategories-social">世の中</a></li> <li class="footer-list-item js-keyboard-selectable-item"><a href="/hotentry/economics" class="cat-economics js-keyboard-openable" data-gtm-label="footerCategories-economics">政治と経済</a></li> <li class="footer-list-item js-keyboard-selectable-item"><a href="/hotentry/life" class="cat-life js-keyboard-openable" data-gtm-label="footerCategories-life">暮らし</a></li> <li class="footer-list-item js-keyboard-selectable-item"><a href="/hotentry/knowledge" class="cat-knowledge js-keyboard-openable" data-gtm-label="footerCategories-knowledge">学び</a></li> </ul> <ul class="footer-list footer-list--pc"> <li class="footer-list-item js-keyboard-selectable-item"><a href="/hotentry/it" class="cat-it js-keyboard-openable" data-gtm-label="footerCategories-it">テクノロジー</a></li> <li class="footer-list-item js-keyboard-selectable-item"><a href="/hotentry/entertainment" class="cat-entertainment js-keyboard-openable" data-gtm-label="footerCategories-entertainment">エンタメ</a></li> <li class="footer-list-item js-keyboard-selectable-item"><a href="/hotentry/game" class="cat-game js-keyboard-openable" data-gtm-label="footerCategories-game">アニメとゲーム</a></li> <li class="footer-list-item js-keyboard-selectable-item"><a href="/hotentry/fun" class="cat-fun js-keyboard-openable" data-gtm-label="footerCategories-fun">おもしろ</a></li> </ul> <ul class="footer-list"> <li class="footer-list-item"><a href="/guide/tools">アプリ・拡張機能</a></li> <li class="footer-list-item"><a href="https://bookmark.hatenastaff.com/">開発ブログ</a></li> <li class="footer-list-item"><a href="/help/">ヘルプ</a></li> <li class="footer-list-item"><a href="https://hatena.zendesk.com/hc/ja/categories/900000153166">お問い合わせ</a></li> <li class="footer-list-item footer-list-item--sp"><a href="/guide/guideline">ガイドライン</a></li> <li class="footer-list-item footer-list-item--sp"><a href="https://policies.hatena.ne.jp/rule">利用規約</a></li> <li class="footer-list-item footer-list-item--sp"><a href="https://policies.hatena.ne.jp/privacypolicy-ja">プライバシーポリシー</a></li> <li class="footer-list-item footer-list-item--sp"><a href="https://policies.hatena.ne.jp/cookie-policy">利用者情報の外部送信について</a></li> </ul> <ul class="footer-list footer-list--pc"> <li class="footer-list-item footer-list-item--pc"><a href="/guide/guideline">ガイドライン</a></li> <li class="footer-list-item footer-list-item--pc"><a href="https://policies.hatena.ne.jp/rule">利用規約</a></li> <li class="footer-list-item footer-list-item--pc"><a href="https://policies.hatena.ne.jp/privacypolicy-ja">プライバシーポリシー</a></li> <li class="footer-list-item footer-list-item--pc"><a href="https://policies.hatena.ne.jp/cookie-policy">利用者情報の外部送信について</a></li> </ul> </div> </div> <div class="footer-inner-group footer-bookmark-sns"> <h2 class="footer-title">公式Twitter</h2> <div class="footer-bookmark-list"> <ul class="footer-list"> <li class="footer-list-item"><a href="https://twitter.com/HatenaBookmark" target="_blank" rel="noopener" data-gtm-click-label="footer-officialTwitter-name">公式アカウント</a></li> <li class="footer-list-item"><a href="https://twitter.com/hatebu" target="_blank" rel="noopener" data-gtm-click-label="footer-hotentryTwitter-name">ホットエントリー</a></li> </ul> </div> </div> <div class="footer-inner-group footer-hatena"> <h2 class="footer-title">はてなのサービス</h2> <ul class="footer-list"> <li class="footer-list-item"><a href="https://hatenablog.com/" data-gtm-label="footerServices-blog">はてなブログ</a></li> <li class="footer-list-item"><a href="https://hatenablog.com/guide/pro?plus_via=hatenabookmark_footer&utm_source=hatenabookmark&utm_medium=referral&utm_campaign=hatenabookmark_to_hatenablog_pro&utm_content=hatenabookmark_footer" data-gtm-label="footerServices-blog-pro">はてなブログPro</a></li> <li class="footer-list-item"><a href="https://q.hatena.ne.jp/" data-gtm-label="footerServices-question">人力検索はてな</a></li> <li class="footer-list-item"><a href="http://d.hatena.ne.jp/" data-gtm-label="footerServices-keyword">はてなブログタグ</a></li> <li class="footer-list-item"><a href="http://hatenanews.com/" data-gtm-label="footerServices-hatenanews">はてなニュース</a></li> <li class="footer-list-item"><a href="https://soredoko.jp/" data-gtm-label="footerServices-soredoko">ソレドコ</a></li> </ul> </div> </div> <div class="footer-bottom"> <div class="footer-app"> <ul> <li class="footer-list-item"><a href="https://apps.apple.com/jp/app/hatenabukkumaku/id354976659?mt=8" target="_blank" rel="noopener" data-gtm-click-label="footer-app-ios"><img src="https://b.st-hatena.com/1b3c3aaeeb3650284f153f8a5a507d736736a15d/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/1b3c3aaeeb3650284f153f8a5a507d736736a15d/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/1b3c3aaeeb3650284f153f8a5a507d736736a15d/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>