1<!DOCTYPE html><html lang="ja"><head><meta charSet="utf-8"/><meta name="viewport" content="width=device-width"/><link rel="preload" as="image" imagesrcset="/_next/image?url=%2Fimg%2Fcommon%2Flogo.png&w=256&q=100 1x, /_next/image?url=%2Fimg%2Fcommon%2Flogo.png&w=640&q=100 2x"/><meta name="robots" content="noindex"/><title>Instant Searchã®ã¿ã°ä¸è¦§ | fwywdï¼ãã¥ã¼ãï¼</title><meta title="Instant Searchã®ã¿ã°ä¸è¦§ | fwywdï¼ãã¥ã¼ãï¼"/><meta name="description" content="Instant Searchã®ã¿ã°ä¸è¦§ | fwywdï¼ãã¥ã¼ãï¼ ã¿ã°ã®ç¹éãã¼ã¸ã§ãã"/><meta property="og:description" content="Instant Searchã®ã¿ã°ä¸è¦§ | fwywdï¼ãã¥ã¼ãï¼ ã¿ã°ã®ç¹éãã¼ã¸ã§ãã"/><meta property="og:site_name" content="Instant Searchã®ã¿ã°ä¸è¦§ | fwywdï¼ãã¥ã¼ãï¼"/><meta property="og:type" content="article"/><meta property="og:url" content="https://fwywd.com/tech/tags/instant%2520search"/><meta property="og:title" content="Instant Searchã®ã¿ã°ä¸è¦§ | fwywdï¼ãã¥ã¼ãï¼"/><meta property="og:image" content="https://fwywd.com/img/ogp.png"/><meta name="facebook-domain-verification" content="e7bpyf73x7npm0sjrmkypd661bwi9g"/><link rel="canonical" href="https://fwywd.com/tech/tags/instant%2520search"/><meta name="next-head-count" content="15"/>
vendor: 66 bytes, line 1
1<script async="" src="https://www.googletagmanager.com/gtag/js?id=
1UA-90878820-10
vendor: 11 bytes, line 1
1"></script>
1<script> 2
vendor: 163 bytes, lines 2-5
2window.dataLayer = window.dataLayer || []; 3 function gtag(){dataLayer.push(arguments);} 4 gtag('js', new Date()); 5 gtag('config', '
5UA-90878820-10
vendor: 80 bytes, lines 5-8
5', { 6 page_path: window.location.pathname, 7 }); 8
8</script>
8<meta name="twitter:card" content="summary_large_image"/><meta property="article:publisher" content="https://www.facebook.com/kikagaku.co.jp"/><meta property="fb:app_id" content="293896155660080"/><link rel="shortcut icon" href="/favicon.ico"/><link rel="preload" href="/_next/static/css/5645facba0c4f0d8.css" as="style"/><link rel="stylesheet" href="/_next/static/css/5645facba0c4f0d8.css" data-n-g=""/><link rel="preload" href="/_next/static/css/605f94f12e5d18a9.css" as="style"/><link rel="stylesheet" href="/_next/static/css/605f94f12e5d18a9.css" data-n-p=""/><noscript data-n-css=""></noscript>
8<script defer="" nomodule="" src="/_next/static/chunks/polyfills-c67a75d1b6f99dc8.js"></script>
8<script src="/_next/static/chunks/webpack-7a4556bda6d2aa7a.js" defer=""></script>
8<script src="/_next/static/chunks/framework-79bce4a3a540b080.js" defer=""></script>
8<script src="/_next/static/chunks/main-8929b355bf712381.js" defer=""></script>
8<script src="/_next/static/chunks/pages/_app-3aa92feca933b46c.js" defer=""></script>
8<script src="/_next/static/chunks/9545-f02c20dae96fa048.js" defer=""></script>
8<script src="/_next/static/chunks/6499-0fc93911ad26607a.js" defer=""></script>
8<script src="/_next/static/chunks/pages/tech/tags/%5Bid%5D-62381bd2b7a3262d.js" defer=""></script>
8<script src="/_next/static/8g7VE4IFZHCF7i2FMUki4/_buildManifest.js" defer=""></script>
8<script src="/_next/static/8g7VE4IFZHCF7i2FMUki4/_ssgManifest.js" defer=""></script>
8</head><body><div id="__next" data-reactroot=""><style data-emotion="css-global ay0t7w">:host,:root,[data-theme]{--chakra-ring-inset:var(--chakra-empty,/*!*/ /*!*/);--chakra-ring-offset-width:0px;--chakra-ring-offset-color:#fff;--chakra-ring-color:rgba(66, 153, 225, 0.6);--chakra-ring-offset-shadow:0 0 #0000;--chakra-ring-shadow:0 0 #0000;--chakra-space-x-reverse:0;--chakra-space-y-reverse:0;--chakra-colors-transparent:transparent;--chakra-colors-current:currentColor;--chakra-colors-black-dark:#000000;--chakra-colors-black-light:#333333;--chakra-colors-white:#FFFFFF;--chakra-colors-whiteAlpha-50:rgba(255, 255, 255, 0.04);--chakra-colors-whiteAlpha-100:rgba(255, 255, 255, 0.06);--chakra-colors-whiteAlpha-200:rgba(255, 255, 255, 0.08);--chakra-colors-whiteAlpha-300:rgba(255, 255, 255, 0.16);--chakra-colors-whiteAlpha-400:rgba(255, 255, 255, 0.24);--chakra-colors-whiteAlpha-500:rgba(255, 255, 255, 0.36);--chakra-colors-whiteAlpha-600:rgba(255, 255, 255, 0.48);--chakra-colors-whiteAlpha-700:rgba(255, 255, 255, 0.64);--chakra-colors-whiteAlpha-800:rgba(255, 255, 255, 0.80);--chakra-colors-whiteAlpha-900:rgba(255, 255, 255, 0.92);--chakra-colors-blackAlpha-50:rgba(0, 0, 0, 0.04);--chakra-colors-blackAlpha-100:rgba(0, 0, 0, 0.06);--chakra-colors-blackAlpha-200:rgba(0, 0, 0, 0.08);--chakra-colors-blackAlpha-300:rgba(0, 0, 0, 0.16);--chakra-colors-blackAlpha-400:rgba(0, 0, 0, 0.24);--chakra-colors-blackAlpha-500:rgba(0, 0, 0, 0.36);--chakra-colors-blackAlpha-600:rgba(0, 0, 0, 0.48);--chakra-colors-blackAlpha-700:rgba(0, 0, 0, 0.64);--chakra-colors-blackAlpha-800:rgba(0, 0, 0, 0.80);--chakra-colors-blackAlpha-900:rgba(0, 0, 0, 0.92);--chakra-colors-gray-50:#F7FAFC;--chakra-colors-gray-100:#EDF2F7;--chakra-colors-gray-200:#E2E8F0;--chakra-colors-gray-300:#CBD5E0;--chakra-colors-gray-400:#A0AEC0;--chakra-colors-gray-500:#718096;--chakra-colors-gray-600:#4A5568;--chakra-colors-gray-700:#2D3748;--chakra-colors-gray-800:#1A202C;--chakra-colors-gray-900:#171923;--chakra-colors-red-50:#FFF5F5;--chakra-colors-red-100:#FED7D7;--chakra-colors-red-200:#FEB2B2;--chakra-colors-red-300:#FC8181;--chakra-colors-red-400:#F56565;--chakra-colors-red-500:#E53E3E;--chakra-colors-red-600:#C53030;--chakra-colors-red-700:#9B2C2C;--chakra-colors-red-800:#822727;--chakra-colors-red-900:#63171B;--chakra-colors-orange-50:#FFFAF0;--chakra-colors-orange-100:#FEEBC8;--chakra-colors-orange-200:#FBD38D;--chakra-colors-orange-300:#F6AD55;--chakra-colors-orange-400:#ED8936;--chakra-colors-orange-500:#DD6B20;--chakra-colors-orange-600:#C05621;--chakra-colors-orange-700:#9C4221;--chakra-colors-orange-800:#7B341E;--chakra-colors-orange-900:#652B19;--chakra-colors-yellow-50:#FFFFF0;--chakra-colors-yellow-100:#FEFCBF;--chakra-colors-yellow-200:#FAF089;--chakra-colors-yellow-300:#F6E05E;--chakra-colors-yellow-400:#ECC94B;--chakra-colors-yellow-500:#D69E2E;--chakra-colors-yellow-600:#B7791F;--chakra-colors-yellow-700:#975A16;--chakra-colors-yellow-800:#744210;--chakra-colors-yellow-900:#5F370E;--chakra-colors-green-50:#F0FFF4;--chakra-colors-green-100:#C6F6D5;--chakra-colors-green-200:#9AE6B4;--chakra-colors-green-300:#68D391;
8--chakra-colors-green-400:#48BB78;--chakra-colors-green-500:#38A169;--chakra-colors-green-600:#2F855A;--chakra-colors-green-700:#276749;--chakra-colors-green-800:#22543D;--chakra-colors-green-900:#1C4532;--chakra-colors-teal-50:#E6FFFA;--chakra-colors-teal-100:#B2F5EA;--chakra-colors-teal-200:#81E6D9;--chakra-colors-teal-300:#4FD1C5;--chakra-colors-teal-400:#38B2AC;--chakra-colors-teal-500:#319795;--chakra-colors-teal-600:#2C7A7B;--chakra-colors-teal-700:#285E61;--chakra-colors-teal-800:#234E52;--chakra-colors-teal-900:#1D4044;--chakra-colors-blue-50:#ebf8ff;--chakra-colors-blue-100:#bee3f8;--chakra-colors-blue-200:#90cdf4;--chakra-colors-blue-300:#63b3ed;--chakra-colors-blue-400:#4299e1;--chakra-colors-blue-500:#3182ce;--chakra-colors-blue-600:#2b6cb0;--chakra-colors-blue-700:#2c5282;--chakra-colors-blue-800:#2a4365;--chakra-colors-blue-900:#1A365D;--chakra-colors-cyan-50:#EDFDFD;--chakra-colors-cyan-100:#C4F1F9;--chakra-colors-cyan-200:#9DECF9;--chakra-colors-cyan-300:#76E4F7;--chakra-colors-cyan-400:#0BC5EA;--chakra-colors-cyan-500:#00B5D8;--chakra-colors-cyan-600:#00A3C4;--chakra-colors-cyan-700:#0987A0;--chakra-colors-cyan-800:#086F83;--chakra-colors-cyan-900:#065666;--chakra-colors-purple-50:#FAF5FF;--chakra-colors-purple-100:#E9D8FD;--chakra-colors-purple-200:#D6BCFA;--chakra-colors-purple-300:#B794F4;--chakra-colors-purple-400:#9F7AEA;--chakra-colors-purple-500:#805AD5;--chakra-colors-purple-600:#6B46C1;--chakra-colors-purple-700:#553C9A;--chakra-colors-purple-800:#44337A;--chakra-colors-purple-900:#322659;--chakra-colors-pink-50:#FFF5F7;--chakra-colors-pink-100:#FED7E2;--chakra-colors-pink-200:#FBB6CE;--chakra-colors-pink-300:#F687B3;--chakra-colors-pink-400:#ED64A6;--chakra-colors-pink-500:#D53F8C;--chakra-colors-pink-600:#B83280;--chakra-colors-pink-700:#97266D;--chakra-colors-pink-800:#702459;--chakra-colors-pink-900:#521B41;--chakra-colors-linkedin-50:#E8F4F9;--chakra-colors-linkedin-100:#CFEDFB;--chakra-colors-linkedin-200:#9BDAF3;--chakra-colors-linkedin-300:#68C7EC;--chakra-colors-linkedin-400:#34B3E4;--chakra-colors-linkedin-500:#00A0DC;--chakra-colors-linkedin-600:#008CC9;--chakra-colors-linkedin-700:#0077B5;--chakra-colors-linkedin-800:#005E93;--chakra-colors-linkedin-900:#004471;--chakra-colors-facebook-50:#E8F4F9;--chakra-colors-facebook-100:#D9DEE9;--chakra-colors-facebook-200:#B7C2DA;--chakra-colors-facebook-300:#6482C0;--chakra-colors-facebook-400:#4267B2;--chakra-colors-facebook-500:#385898;--chakra-colors-facebook-600:#314E89;--chakra-colors-facebook-700:#29487D;--chakra-colors-facebook-800:#223B67;--chakra-colors-facebook-900:#1E355B;--chakra-colors-messenger-50:#D0E6FF;--chakra-colors-messenger-100:#B9DAFF;--chakra-colors-messenger-200:#A2CDFF;--chakra-colors-messenger-300:#7AB8FF;--chakra-colors-messenger-400:#2E90FF;--chakra-colors-messenger-500:#0078FF;--chakra-colors-messenger-600:#0063D1;--chakra-colors-messenger-700:#0052AC;--chakra-colors-messenger-800:#003C7E;--chakra-colors-messenger-900:#002C5C;--chakra-colors-whatsapp-50:#dffeec;--chakra-colors-whatsapp-100:#b9f5d0;--chakra-colors-whatsapp-200:#90edb3;--chakra-colors-whatsapp-300:#65e495;--chakra-colors-whatsapp-400:#3cdd78;--chakra-colors-whatsapp-500:#22c35e;--chakra-colors-whatsapp-600:#179848;--chakra-colors-whatsapp-700:#0c6c33;--chakra-colors-whatsapp-800:#01421c;--chakra-colors-whatsapp-900:#001803;--chakra-colors-twitter-50:#E5F4FD;--chakra-colors-twitter-100:#C8E9FB;--chakra-colors-twitter-200:#A8DCFA;--chakra-colors-twitter-300:#83CDF7;--chakra-colors-twitter-400:#57BBF5;--chakra-colors-twitter-500:#1DA1F2;--chakra-colors-twitter-600:#1A94DA;--chakra-colors-twitter-700:#1681BF;--chakra-colors-twitter-800:#136B9E;--chakra-colors-twitter-900:#0D4D71;--chakra-colors-telegram-50:#E3F2F9;--chakra-colors-telegram-100:#C5E4F3;--chakra-colors-telegram-200:#A2D4EC;--chakra-colors-telegram-300:#7AC1E4;--chakra-colors-telegram-400:#47A9DA;--chakra-colors-telegram-500:#0088CC;--chakra-colors-telegram-600:#007AB8;--chakra-colors-telegram-700:#006BA1;--chakra-colors-telegram-800:#005885;--chakra-colors-telegram-900:#003F5E;--chakra-colors-primary-base:#179ACA;--chakra-colors-primary-light:#15B7C1;--chakra-borders-none:0;--chakra-borders-1px:1px solid;--chakra-borders-2px:2px solid;--chakra-borders-4px:4px solid;--chakra-borders-8px:8px solid;--chakra-fonts-heading:-apple-system,BlinkMacSystemFont,"Segoe UI",Helvetica,Arial,sans-serif,"Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol";--chakra-fonts-body:-apple-system,BlinkMacSystemFont,"Segoe UI",Helvetica,Arial,sans-serif,"Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol";--chakra-fonts-mono:SFMono-Regular,Menlo,Monaco,Consolas,"Liberation Mono","Courier New",monospace;--chakra-fontSizes-xs:0.75rem;--chakra-fontSizes-sm:0.875rem;--chakra-fontSizes-md:1rem;--chakra-fontSizes-lg:1.125rem;--chakra-fontSizes-xl:1.25rem;--chakra-fontSizes-2xl:1.5rem;--chakra-fontSizes-3xl:1.875rem;--chakra-fontSizes-4xl:2.25rem;--chakra-fontSizes-5xl:3rem;--chakra-fontSizes-6xl:3.75rem;--chakra-fontSizes-7xl:4.5rem;--chakra-fontSizes-8xl:6rem;--chakra-fontSizes-9xl:8rem;--chakra-fontWeights-hairline:100;--chakra-fontWeights-thin:200;--chakra-fontWeights-light:300;--chakra-fontWeights-normal:400;--chakra-fontWeights-medium:500;--chakra-fontWeights-semibold:600;--chakra-fontWeights-bold:700;--chakra-fontWeights-extrabold:800;--chakra-fontWeights-black:900;--chakra-letterSpacings-tighter:-0.05em;
8--chakra-letterSpacings-tight:-0.025em;--chakra-letterSpacings-normal:0;--chakra-letterSpacings-wide:0.025em;--chakra-letterSpacings-wider:0.05em;--chakra-letterSpacings-widest:0.1em;--chakra-lineHeights-3:.75rem;--chakra-lineHeights-4:1rem;--chakra-lineHeights-5:1.25rem;--chakra-lineHeights-6:1.5rem;--chakra-lineHeights-7:1.75rem;--chakra-lineHeights-8:2rem;--chakra-lineHeights-9:2.25rem;--chakra-lineHeights-10:2.5rem;--chakra-lineHeights-normal:normal;--chakra-lineHeights-none:1;--chakra-lineHeights-shorter:1.25;--chakra-lineHeights-short:1.375;--chakra-lineHeights-base:1.5;--chakra-lineHeights-tall:1.625;--chakra-lineHeights-taller:2;--chakra-radii-none:0;--chakra-radii-sm:0.125rem;--chakra-radii-base:0.25rem;--chakra-radii-md:0.375rem;--chakra-radii-lg:0.5rem;--chakra-radii-xl:0.75rem;--chakra-radii-2xl:1rem;--chakra-radii-3xl:1.5rem;--chakra-radii-full:9999px;--chakra-space-1:0.25rem;--chakra-space-2:0.5rem;--chakra-space-3:0.75rem;--chakra-space-4:1rem;--chakra-space-5:1.25rem;--chakra-space-6:1.5rem;--chakra-space-7:1.75rem;--chakra-space-8:2rem;--chakra-space-9:2.25rem;--chakra-space-10:2.5rem;--chakra-space-12:3rem;--chakra-space-14:3.5rem;--chakra-space-16:4rem;--chakra-space-20:5rem;--chakra-space-24:6rem;--chakra-space-28:7rem;--chakra-space-32:8rem;--chakra-space-36:9rem;--chakra-space-40:10rem;--chakra-space-44:11rem;--chakra-space-48:12rem;--chakra-space-52:13rem;--chakra-space-56:14rem;--chakra-space-60:15rem;--chakra-space-64:16rem;--chakra-space-72:18rem;--chakra-space-80:20rem;--chakra-space-96:24rem;--chakra-space-px:1px;--chakra-space-0-5:0.125rem;--chakra-space-1-5:0.375rem;--chakra-space-2-5:0.625rem;--chakra-space-3-5:0.875rem;--chakra-shadows-xs:0 0 0 1px rgba(0, 0, 0, 0.05);--chakra-shadows-sm:0 1px 2px 0 rgba(0, 0, 0, 0.05);--chakra-shadows-base:0 1px 3px 0 rgba(0, 0, 0, 0.1),0 1px 2px 0 rgba(0, 0, 0, 0.06);--chakra-shadows-md:0 4px 6px -1px rgba(0, 0, 0, 0.1),0 2px 4px -1px rgba(0, 0, 0, 0.06);--chakra-shadows-lg:0 10px 15px -3px rgba(0, 0, 0, 0.1),0 4px 6px -2px rgba(0, 0, 0, 0.05);--chakra-shadows-xl:0 20px 25px -5px rgba(0, 0, 0, 0.1),0 10px 10px -5px rgba(0, 0, 0, 0.04);--chakra-shadows-2xl:0 25px 50px -12px rgba(0, 0, 0, 0.25);--chakra-shadows-outline:0 0 0 3px rgba(66, 153, 225, 0.6);--chakra-shadows-inner:inset 0 2px 4px 0 rgba(0,0,0,0.06);--chakra-shadows-none:none;--chakra-shadows-dark-lg:rgba(0, 0, 0, 0.1) 0px 0px 0px 1px,rgba(0, 0, 0, 0.2) 0px 5px 10px,rgba(0, 0, 0, 0.4) 0px 15px 40px;--chakra-sizes-1:0.25rem;--chakra-sizes-2:0.5rem;--chakra-sizes-3:0.75rem;--chakra-sizes-4:1rem;--chakra-sizes-5:1.25rem;--chakra-sizes-6:1.5rem;--chakra-sizes-7:1.75rem;--chakra-sizes-8:2rem;--chakra-sizes-9:2.25rem;--chakra-sizes-10:2.5rem;--chakra-sizes-12:3rem;--chakra-sizes-14:3.5rem;--chakra-sizes-16:4rem;--chakra-sizes-20:5rem;--chakra-sizes-24:6rem;--chakra-sizes-28:7rem;--chakra-sizes-32:8rem;--chakra-sizes-36:9rem;--chakra-sizes-40:10rem;--chakra-sizes-44:11rem;--chakra-sizes-48:12rem;--chakra-sizes-52:13rem;--chakra-sizes-56:14rem;--chakra-sizes-60:15rem;--chakra-sizes-64:16rem;--chakra-sizes-72:18rem;--chakra-sizes-80:20rem;--chakra-sizes-96:24rem;--chakra-sizes-px:1px;--chakra-sizes-0-5:0.125rem;--chakra-sizes-1-5:0.375rem;--chakra-sizes-2-5:0.625rem;--chakra-sizes-3-5:0.875rem;--chakra-sizes-max:max-content;--chakra-sizes-min:min-content;--chakra-sizes-full:100%;--chakra-sizes-3xs:14rem;--chakra-sizes-2xs:16rem;--chakra-sizes-xs:20rem;--chakra-sizes-sm:24rem;--chakra-sizes-md:28rem;--chakra-sizes-lg:32rem;--chakra-sizes-xl:36rem;--chakra-sizes-2xl:42rem;--chakra-sizes-3xl:48rem;--chakra-sizes-4xl:56rem;--chakra-sizes-5xl:64rem;--chakra-sizes-6xl:72rem;--chakra-sizes-7xl:80rem;--chakra-sizes-8xl:90rem;--chakra-sizes-container-sm:640px;--chakra-sizes-container-md:768px;--chakra-sizes-container-lg:1024px;--chakra-sizes-container-xl:1280px;--chakra-zIndices-hide:-1;--chakra-zIndices-auto:auto;--chakra-zIndices-base:0;--chakra-zIndices-docked:10;--chakra-zIndices-dropdown:1000;--chakra-zIndices-sticky:1100;--chakra-zIndices-banner:1200;--chakra-zIndices-overlay:1300;--chakra-zIndices-modal:1400;--chakra-zIndices-popover:1500;--chakra-zIndices-skipLink:1600;--chakra-zIndices-toast:1700;--chakra-zIndices-tooltip:1800;--chakra-transition-property-common:background-color,border-color,color,fill,stroke,opacity,box-shadow,transform;--chakra-transition-property-colors:background-color,border-color,color,fill,stroke;--chakra-transition-property-dimensions:width,height;--chakra-transition-property-position:left,right,top,bottom;--chakra-transition-property-background:background-color,background-image,background-position;--chakra-transition-easing-ease-in:cubic-bezier(0.4, 0, 1, 1);--chakra-transition-easing-ease-out:cubic-bezier(0, 0, 0.2, 1);--chakra-transition-easing-ease-in-out:cubic-bezier(0.4, 0, 0.2, 1);--chakra-transition-duration-ultra-fast:50ms;--chakra-transition-duration-faster:100ms;--chakra-transition-duration-fast:150ms;--chakra-transition-duration-normal:200ms;--chakra-transition-duration-slow:300ms;--chakra-transition-duration-slower:400ms;--chakra-transition-duration-ultra-slow:500ms;--chakra-blur-none:0;--chakra-blur-sm:4px;--chakra-blur-base:8px;--chakra-blur-md:12px;--chakra-blur-lg:16px;
8--chakra-blur-xl:24px;--chakra-blur-2xl:40px;--chakra-blur-3xl:64px;}</style><style data-emotion="css-global 1jqlf9g">html{line-height:1.5;-webkit-text-size-adjust:100%;font-family:system-ui,sans-serif;-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;-moz-osx-font-smoothing:grayscale;touch-action:manipulation;}body{position:relative;min-height:100%;font-feature-settings:'kern';}*,*::before,*::after{border-width:0;border-style:solid;box-sizing:border-box;}main{display:block;}hr{border-top-width:1px;box-sizing:content-box;height:0;overflow:visible;}pre,code,kbd,samp{font-family:SFMono-Regular,Menlo,Monaco,Consolas,monospace;font-size:1em;}a{background-color:transparent;color:inherit;-webkit-text-decoration:inherit;text-decoration:inherit;}abbr[title]{border-bottom:none;-webkit-text-decoration:underline;text-decoration:underline;-webkit-text-decoration:underline dotted;-webkit-text-decoration:underline dotted;text-decoration:underline dotted;}b,strong{font-weight:bold;}small{font-size:80%;}sub,sup{font-size:75%;line-height:0;position:relative;vertical-align:baseline;}sub{bottom:-0.25em;}sup{top:-0.5em;}img{border-style:none;}button,input,optgroup,select,textarea{font-family:inherit;font-size:100%;line-height:1.15;margin:0;}button,input{overflow:visible;}button,select{text-transform:none;}button::-moz-focus-inner,[type="button"]::-moz-focus-inner,[type="reset"]::-moz-focus-inner,[type="submit"]::-moz-focus-inner{border-style:none;padding:0;}fieldset{padding:0.35em 0.75em 0.625em;}legend{box-sizing:border-box;color:inherit;display:table;max-width:100%;padding:0;white-space:normal;}progress{vertical-align:baseline;}textarea{overflow:auto;}[type="checkbox"],[type="radio"]{box-sizing:border-box;padding:0;}[type="number"]::-webkit-inner-spin-button,[type="number"]::-webkit-outer-spin-button{-webkit-appearance:none!important;}input[type="number"]{-moz-appearance:textfield;}[type="search"]{-webkit-appearance:textfield;outline-offset:-2px;}[type="search"]::-webkit-search-decoration{-webkit-appearance:none!important;}::-webkit-file-upload-button{-webkit-appearance:button;font:inherit;}details{display:block;}summary{display:-webkit-box;display:-webkit-list-item;display:-ms-list-itembox;display:list-item;}template{display:none;}[hidden]{display:none!important;}body,blockquote,dl,dd,h1,h2,h3,h4,h5,h6,hr,figure,p,pre{margin:0;}button{background:transparent;padding:0;}fieldset{margin:0;padding:0;}ol,ul{margin:0;padding:0;}textarea{resize:vertical;}button,[role="button"]{cursor:pointer;}button::-moz-focus-inner{border:0!important;}table{border-collapse:collapse;}h1,h2,h3,h4,h5,h6{font-size:inherit;font-weight:inherit;}button,input,optgroup,select,textarea{padding:0;line-height:inherit;color:inherit;}img,svg,video,canvas,audio,iframe,embed,object{display:block;}img,video{max-width:100%;height:auto;}[data-js-focus-visible] :focus:not([data-focus-visible-added]){outline:none;box-shadow:none;}select::-ms-expand{display:none;}</style><style data-emotion="css-global 1baqkrf">body{font-family:var(--chakra-fonts-body);color:var(--chakra-colors-gray-800);background:var(--chakra-colors-white);transition-property:background-color;transition-duration:var(--chakra-transition-duration-normal);line-height:var(--chakra-lineHeights-base);}*::-webkit-input-placeholder{color:var(--chakra-colors-gray-400);}*::-moz-placeholder{color:var(--chakra-colors-gray-400);}*:-ms-input-placeholder{color:var(--chakra-colors-gray-400);}*::placeholder{color:var(--chakra-colors-gray-400);}*,*::before,::after{border-color:var(--chakra-colors-gray-200);word-wrap:break-word;}</style><div class="font-sans text-primary"><header class="pb-[67.44px] sm:pb-0"><div class="fixed z-20 w-full bg-white border-b-2 border-[#e3efef] sm:static"><div class="flex items-center justify-between mx-auto sm:max-w-screen-sm md:max-w-screen-md lg:max-w-screen-lg xl:max-w-screen-xl 2xl:max-w-screen-2xl"><div class="w-32 py-2 mx-4 sm:py-3 sm:mx-10"><a class="hover:opacity-75" href="/"><span style="box-sizing:border-box;display:inline-block;overflow:hidden;width:initial;height:initial;background:none;opacity:1;border:0;margin:0;padding:0;position:relative;max-width:100%"><span style="box-sizing:border-box;display:block;width:initial;height:initial;background:none;opacity:1;border:0;margin:0;padding:0;max-width:100%"><img style="display:block;max-width:100%;width:initial;height:initial;background:none;opacity:1;border:0;margin:0;padding:0" alt="" aria-hidden="true" src="data:image/svg+xml,%3csvg%20xmlns=%27http://www.w3.org/2000/svg%27%20version=%271.1%27%20width=%27200%27%20height=%2771%27/%3e"/></span><img alt="fwywd" srcSet="/_next/image?url=%2Fimg%2Fcommon%2Flogo.png&w=256&q=100 1x, /_next/image?url=%2Fimg%2Fcommon%2Flogo.png&w=640&q=100 2x" src="/_next/image?url=%2Fimg%2Fcommon%2Flogo.png&w=640&q=100" decoding="async" data-nimg="intrinsic" style="position:absolute;top:0;left:0;bottom:0;right:0;box-sizing:border-box;padding:0;border:none;margin:auto;display:block;width:0;height:0;min-width:100%;max-width:100%;min-height:100%;max-height:100%"/></span></a></div><nav class="flex items-center gap-4"><div class="items-center hidden lg:flex divide-x"><a class="px-4 py-2 font-bold tracking-widest cursor-pointer duration-300 hover:text-primary-base" href="/">HOME</a><a class="px-4 py-2 font-bold tracking-widest cursor-pointer duration-300 hover:text-primary-base" href="/concept">ã³ã³ã»ãã</a><a href="https://www.kikagaku.co.jp" target="_blank" class="px-4 py-2 font-bold tracking-widest cursor-pointer duration-300 hover:text-primary-base" rel="noreferrer">éå¶ä¼ç¤¾</a></div><div class="px-2"><button class="flex items-center px-4 py-3 text-sm text-gray-500 rounded-full shadow w-28 focus:outline-none sm:w-72 hover:bg-[#f1f7f8] hover:text-primary-dark hover:shadow-lg hover:duration-500"><svg xmlns="http://www.w3.org/2000/svg" class="w-6 h-6 " fill="none" viewBox="0 0 24 24" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z"></path></svg><p class="ml-2"><span class="hidden sm:inline">è¨äºã</span>æ¤ç´¢</p></button></div></nav></div></div></header><ul class="scrollbar_scroll__aiwBC flex flex-row px-4 overflow-x-scroll space-x-4 xl:px-6 xl:space-x-6 bg-primary-lighter"><li class="my-2 xl:my-3"><a class="py-1 text-xs font-bold border rounded-full cursor-pointer xl:text-sm whitespace-nowrap border-primary-base px-7 text-primary-dark transition-all duration-250 hover:bg-primary-base hover:text-white tag_tag__wWcwT" href="/tech/tags/new"><span>New</span></a></li><li class="my-2 xl:my-3"><a class="py-1 text-xs font-bold border rounded-full cursor-pointer xl:text-sm whitespace-nowrap border-primary-base px-7 text-primary-dark transition-all duration-250 hover:bg-primary-base hover:text-white tag_tag__wWcwT" href="/tech/tags/popular"><span>Popular</span></a></li><li class="my-2 xl:my-3"><a class="py-1 text-xs font-bold border rounded-full cursor-pointer xl:text-sm whitespace-nowrap border-primary-base px-7 text-primary-dark transition-all duration-250 hover:bg-primary-base hover:text-white tag_tag__wWcwT" href="/tech/tags/tailwind%20css"><span>Tailwind CSS</span></a></li><li class="my-2 xl:my-3"><a class="py-1 text-xs font-bold border rounded-full cursor-pointer xl:text-sm whitespace-nowrap border-primary-base px-7 text-primary-dark transition-all duration-250 hover:bg-primary-base hover:text-white tag_tag__wWcwT" href="/tech/tags/tailwind%20ui"><span>Tailwind UI</span></a></li><li class="my-2 xl:my-3"><a class="py-1 text-xs font-bold border rounded-full cursor-pointer xl:text-sm whitespace-nowrap border-primary-base px-7 text-primary-dark transition-all duration-250 hover:bg-primary-base hover:text-white tag_tag__wWcwT" href="/tech/tags/syntax"><span>Syntax</span></a></li><li class="my-2 xl:my-3"><a class="py-1 text-xs font-bold border rounded-full cursor-pointer xl:text-sm whitespace-nowrap border-primary-base px-7 text-primary-dark transition-all duration-250 hover:bg-primary-base hover:text-white tag_tag__wWcwT" href="/tech/tags/markdoc"><span>Markdoc</span></a></li><li class="my-2 xl:my-3"><a class="py-1 text-xs font-bold border rounded-full cursor-pointer xl:text-sm whitespace-nowrap border-primary-base px-7 text-primary-dark transition-all duration-250 hover:bg-primary-base hover:text-white tag_tag__wWcwT" href="/tech/tags/markdown"><span>Markdown</span></a></li><li class="my-2 xl:my-3"><a class="py-1 text-xs font-bold border rounded-full cursor-pointer xl:text-sm whitespace-nowrap border-primary-base px-7 text-primary-dark transition-all duration-250 hover:bg-primary-base hover:text-white tag_tag__wWcwT" href="/tech/tags/azure"><span>Azure</span></a></li><li class="my-2 xl:my-3"><a class="py-1 text-xs font-bold border rounded-full cursor-pointer xl:text-sm whitespace-nowrap border-primary-base px-7 text-primary-dark transition-all duration-250 hover:bg-primary-base hover:text-white tag_tag__wWcwT" href="/tech/tags/azure%20app%20service"><span>Azure App Service</span></a></li><li class="my-2 xl:my-3"><a class="py-1 text-xs font-bold border rounded-full cursor-pointer xl:text-sm whitespace-nowrap border-primary-base px-7 text-primary-dark transition-all duration-250 hover:bg-primary-base hover:text-white tag_tag__wWcwT" href="/tech/tags/express.js"><span>Express.js</span></a></li><li class="my-2 xl:my-3"><a class="py-1 text-xs font-bold border rounded-full cursor-pointer xl:text-sm whitespace-nowrap border-primary-base px-7 text-primary-dark transition-all duration-250 hover:bg-primary-base hover:text-white tag_tag__wWcwT" href="/tech/tags/nestjs"><span>NestJS</span></a></li><li class="my-2 xl:my-3"><a class="py-1 text-xs font-bold border rounded-full cursor-pointer xl:text-sm whitespace-nowrap border-primary-base px-7 text-primary-dark transition-all duration-250 hover:bg-primary-base hover:text-white tag_tag__wWcwT" href="/tech/tags/next.js"><span>Next.js</span></a></li><li class="my-2 xl:my-3"><a class="py-1 text-xs font-bold border rounded-full cursor-pointer xl:text-sm whitespace-nowrap border-primary-base px-7 text-primary-dark transition-all duration-250 hover:bg-primary-base hover:text-white tag_tag__wWcwT" href="/tech/tags/%E3%83%9E%E3%83%BC%E3%82%B1%E3%83%86%E3%82%A3%E3%83%B3%E3%82%B0"><span>ãã¼ã±ãã£ã³ã°</span></a></li><li class="my-2 xl:my-3"><a class="py-1 text-xs font-bold border rounded-full cursor-pointer xl:text-sm whitespace-nowrap border-primary-base px-7 text-primary-dark transition-all duration-250 hover:bg-primary-base hover:text-white tag_tag__wWcwT" href="/tech/tags/fwywd"><span>fwywd</span></a></li><li class="my-2 xl:my-3"><a class="py-1 text-xs font-bold border rounded-full cursor-pointer xl:text-sm whitespace-nowrap border-primary-base px-7 text-primary-dark transition-all duration-250 hover:bg-primary-base hover:text-white tag_tag__wWcwT" href="/tech/tags/%E8%B5%B7%E6%A5%AD"><span>èµ·æ¥</span></a></li><li class="my-2 xl:my-3"><a class="py-1 text-xs font-bold border rounded-full cursor-pointer xl:text-sm whitespace-nowrap border-primary-base px-7 text-primary-dark transition-all duration-250 hover:bg-primary-base hover:text-white tag_tag__wWcwT" href="/tech/tags/%E7%BE%A4%E3%81%AB%E5%AF%BE%E3%81%99%E3%82%8B%E6%95%99%E8%82%B2"><span>群ã«å¯¾ããæè²</span></a></li><li class="my-2 xl:my-3"><a class="py-1 text-xs font-bold border rounded-full cursor-pointer xl:text-sm whitespace-nowrap border-primary-base px-7 text-primary-dark transition-all duration-250 hover:bg-primary-base hover:text-white tag_tag__wWcwT" href="/tech/tags/%E4%BA%95%E3%81%AE%E4%B8%AD%E3%81%AE%E8%9B%99"><span>äºã®ä¸ã®è</span></a></li><li class="my-2 xl:my-3"><a class="py-1 text-xs font-bold border rounded-full cursor-pointer xl:text-sm whitespace-nowrap border-primary-base px-7 text-primary-dark transition-all duration-250 hover:bg-primary-base hover:text-white tag_tag__wWcwT" href="/tech/tags/%E5%80%8B%E4%BA%BA%E4%BA%8B%E6%A5%AD%E4%B8%BB"><span>åäººäºæ¥ä¸»</span></a></li><li class="my-2 xl:my-3"><a class="py-1 text-xs font-bold border rounded-full cursor-pointer xl:text-sm whitespace-nowrap border-primary-base px-7 text-primary-dark transition-all duration-250 hover:bg-primary-base hover:text-white tag_tag__wWcwT" href="/tech/tags/%E5%AD%A6%E7%BF%92"><span>å¦ç¿</span></a></li><li class="my-2 xl:my-3"><a class="py-1 text-xs font-bold border rounded-full cursor-pointer xl:text-sm whitespace-nowrap border-primary-base px-7 text-primary-dark transition-all duration-250 hover:bg-primary-base hover:text-white tag_tag__wWcwT" href="/tech/tags/%E3%83%97%E3%83%AD%E3%82%B0%E3%83%A9%E3%83%9F%E3%83%B3%E3%82%B0"><span>ããã°ã©ãã³ã°</span></a></li><li class="my-2 xl:my-3"><a class="py-1 text-xs font-bold border rounded-full cursor-pointer xl:text-sm whitespace-nowrap border-primary-base px-7 text-primary-dark transition-all duration-250 hover:bg-primary-base hover:text-white tag_tag__wWcwT" href="/tech/tags/%E3%82%B9%E3%82%BF%E3%83%BC%E3%83%88%E3%82%A2%E3%83%83%E3%83%97"><span>ã¹ã¿ã¼ãã¢ãã</span></a></li><li class="my-2 xl:my-3"><a class="py-1 text-xs font-bold border rounded-full cursor-pointer xl:text-sm whitespace-nowrap border-primary-base px-7 text-primary-dark transition-all duration-250 hover:bg-primary-base hover:text-white tag_tag__wWcwT" href="/tech/tags/%E3%83%94%E3%83%83%E3%83%81"><span>ããã</span></a></li><li class="my-2 xl:my-3"><a class="py-1 text-xs font-bold border rounded-full cursor-pointer xl:text-sm whitespace-nowrap border-primary-base px-7 text-primary-dark transition-all duration-250 hover:bg-primary-base hover:text-white tag_tag__wWcwT" href="/tech/tags/%E6%8A%95%E8%B3%87"><span>æè³</span></a></li><li class="my-2 xl:my-3"><a class="py-1 text-xs font-bold border rounded-full cursor-pointer xl:text-sm whitespace-nowrap border-primary-base px-7 text-primary-dark transition-all duration-250 hover:bg-primary-base hover:text-white tag_tag__wWcwT" href="/tech/tags/%E5%AD%A6%E3%81%B3%E6%96%B9"><span>å¦ã³æ¹</span></a></li><li class="my-2 xl:my-3"><a class="py-1 text-xs font-bold border rounded-full cursor-pointer xl:text-sm whitespace-nowrap border-primary-base px-7 text-primary-dark transition-all duration-250 hover:bg-primary-base hover:text-white tag_tag__wWcwT" href="/tech/tags/%E8%B5%B7%E6%A5%AD%E5%AE%B6"><span>èµ·æ¥å®¶</span></a></li><li class="my-2 xl:my-3"><a class="py-1 text-xs font-bold border rounded-full cursor-pointer xl:text-sm whitespace-nowrap border-primary-base px-7 text-primary-dark transition-all duration-250 hover:bg-primary-base hover:text-white tag_tag__wWcwT" href="/tech/tags/%E7%B5%84%E7%B9%94%E4%BD%9C%E3%82%8A"><span>çµç¹ä½ã</span></a></li><li class="my-2 xl:my-3"><a class="py-1 text-xs font-bold border rounded-full cursor-pointer xl:text-sm whitespace-nowrap border-primary-base px-7 text-primary-dark transition-all duration-250 hover:bg-primary-base hover:text-white tag_tag__wWcwT" href="/tech/tags/%E3%83%AB%E3%83%BC%E3%83%AB"><span>ã«ã¼ã«</span></a></li><li class="my-2 xl:my-3"><a class="py-1 text-xs font-bold border rounded-full cursor-pointer xl:text-sm whitespace-nowrap border-primary-base px-7 text-primary-dark transition-all duration-250 hover:bg-primary-base hover:text-white tag_tag__wWcwT" href="/tech/tags/%E3%83%87%E3%82%B6%E3%82%A4%E3%83%B3"><span>ãã¶ã¤ã³</span></a></li><li class="my-2 xl:my-3"><a class="py-1 text-xs font-bold border rounded-full cursor-pointer xl:text-sm whitespace-nowrap border-primary-base px-7 text-primary-dark transition-all duration-250 hover:bg-primary-base hover:text-white tag_tag__wWcwT" href="/tech/tags/%E3%82%A2%E3%82%A4%E3%83%87%E3%82%A2"><span>ã¢ã¤ãã¢</span></a></li><li class="my-2 xl:my-3"><a class="py-1 text-xs font-bold border rounded-full cursor-pointer xl:text-sm whitespace-nowrap border-primary-base px-7 text-primary-dark transition-all duration-250 hover:bg-primary-base hover:text-white tag_tag__wWcwT" href="/tech/tags/studio"><span>STUDIO</span></a></li><li class="my-2 xl:my-3"><a class="py-1 text-xs font-bold border rounded-full cursor-pointer xl:text-sm whitespace-nowrap border-primary-base px-7 text-primary-dark transition-all duration-250 hover:bg-primary-base hover:text-white tag_tag__wWcwT" href="/tech/tags/%E6%8A%80%E8%A1%93%E9%81%B8%E5%AE%9A"><span>æè¡é¸å®</span></a>
8</li><li class="my-2 xl:my-3"><a class="py-1 text-xs font-bold border rounded-full cursor-pointer xl:text-sm whitespace-nowrap border-primary-base px-7 text-primary-dark transition-all duration-250 hover:bg-primary-base hover:text-white tag_tag__wWcwT" href="/tech/tags/%E3%82%A8%E3%83%B3%E3%82%B8%E3%83%8B%E3%82%A2"><span>ã¨ã³ã¸ãã¢</span></a></li><li class="my-2 xl:my-3"><a class="py-1 text-xs font-bold border rounded-full cursor-pointer xl:text-sm whitespace-nowrap border-primary-base px-7 text-primary-dark transition-all duration-250 hover:bg-primary-base hover:text-white tag_tag__wWcwT" href="/tech/tags/%E3%83%93%E3%82%B8%E3%83%8D%E3%82%B9"><span>ãã¸ãã¹</span></a></li><li class="my-2 xl:my-3"><a class="py-1 text-xs font-bold border rounded-full cursor-pointer xl:text-sm whitespace-nowrap border-primary-base px-7 text-primary-dark transition-all duration-250 hover:bg-primary-base hover:text-white tag_tag__wWcwT" href="/tech/tags/lpo"><span>LPO</span></a></li><li class="my-2 xl:my-3"><a class="py-1 text-xs font-bold border rounded-full cursor-pointer xl:text-sm whitespace-nowrap border-primary-base px-7 text-primary-dark transition-all duration-250 hover:bg-primary-base hover:text-white tag_tag__wWcwT" href="/tech/tags/%E8%A7%A3%E8%AA%AC%E8%A8%98%E4%BA%8B"><span>解説è¨äº</span></a></li><li class="my-2 xl:my-3"><a class="py-1 text-xs font-bold border rounded-full cursor-pointer xl:text-sm whitespace-nowrap border-primary-base px-7 text-primary-dark transition-all duration-250 hover:bg-primary-base hover:text-white tag_tag__wWcwT" href="/tech/tags/google%20%E5%BA%83%E5%91%8A"><span>Google åºå</span></a></li><li class="my-2 xl:my-3"><a class="py-1 text-xs font-bold border rounded-full cursor-pointer xl:text-sm whitespace-nowrap border-primary-base px-7 text-primary-dark transition-all duration-250 hover:bg-primary-base hover:text-white tag_tag__wWcwT" href="/tech/tags/google%20tag%20manager"><span>Google Tag Manager</span></a></li><li class="my-2 xl:my-3"><a class="py-1 text-xs font-bold border rounded-full cursor-pointer xl:text-sm whitespace-nowrap border-primary-base px-7 text-primary-dark transition-all duration-250 hover:bg-primary-base hover:text-white tag_tag__wWcwT" href="/tech/tags/%E6%84%8F%E6%80%9D%E6%B1%BA%E5%AE%9A"><span>æææ±ºå®</span></a></li><li class="my-2 xl:my-3"><a class="py-1 text-xs font-bold border rounded-full cursor-pointer xl:text-sm whitespace-nowrap border-primary-base px-7 text-primary-dark transition-all duration-250 hover:bg-primary-base hover:text-white tag_tag__wWcwT" href="/tech/tags/%E8%A8%AD%E8%A8%88"><span>è¨è¨</span></a></li><li class="my-2 xl:my-3"><a class="py-1 text-xs font-bold border rounded-full cursor-pointer xl:text-sm whitespace-nowrap border-primary-base px-7 text-primary-dark transition-all duration-250 hover:bg-primary-base hover:text-white tag_tag__wWcwT" href="/tech/tags/%E3%82%BD%E3%83%95%E3%83%88%E3%82%A6%E3%82%A7%E3%82%A2"><span>ã½ããã¦ã§ã¢</span></a></li><li class="my-2 xl:my-3"><a class="py-1 text-xs font-bold border rounded-full cursor-pointer xl:text-sm whitespace-nowrap border-primary-base px-7 text-primary-dark transition-all duration-250 hover:bg-primary-base hover:text-white tag_tag__wWcwT" href="/tech/tags/%E4%BB%95%E6%A7%98%E6%9B%B8"><span>仿§æ¸</span></a></li><li class="my-2 xl:my-3"><a class="py-1 text-xs font-bold border rounded-full cursor-pointer xl:text-sm whitespace-nowrap border-primary-base px-7 text-primary-dark transition-all duration-250 hover:bg-primary-base hover:text-white tag_tag__wWcwT" href="/tech/tags/%E3%83%86%E3%82%AF%E3%83%8E%E3%83%AD%E3%82%B8%E3%83%BC"><span>ãã¯ããã¸ã¼</span></a></li><li class="my-2 xl:my-3"><a class="py-1 text-xs font-bold border rounded-full cursor-pointer xl:text-sm whitespace-nowrap border-primary-base px-7 text-primary-dark transition-all duration-250 hover:bg-primary-base hover:text-white tag_tag__wWcwT" href="/tech/tags/%E6%8A%80%E8%A1%93"><span>æè¡</span></a></li><li class="my-2 xl:my-3"><a class="py-1 text-xs font-bold border rounded-full cursor-pointer xl:text-sm whitespace-nowrap border-primary-base px-7 text-primary-dark transition-all duration-250 hover:bg-primary-base hover:text-white tag_tag__wWcwT" href="/tech/tags/podcast"><span>Podcast</span></a></li><li class="my-2 xl:my-3"><a class="py-1 text-xs font-bold border rounded-full cursor-pointer xl:text-sm whitespace-nowrap border-primary-base px-7 text-primary-dark transition-all duration-250 hover:bg-primary-base hover:text-white tag_tag__wWcwT" href="/tech/tags/%E3%82%BB%E3%83%BC%E3%83%AB%E3%82%B9"><span>ã»ã¼ã«ã¹</span></a></li><li class="my-2 xl:my-3"><a class="py-1 text-xs font-bold border rounded-full cursor-pointer xl:text-sm whitespace-nowrap border-primary-base px-7 text-primary-dark transition-all duration-250 hover:bg-primary-base hover:text-white tag_tag__wWcwT" href="/tech/tags/react"><span>React</span></a></li><li class="my-2 xl:my-3"><a class="py-1 text-xs font-bold border rounded-full cursor-pointer xl:text-sm whitespace-nowrap border-primary-base px-7 text-primary-dark transition-all duration-250 hover:bg-primary-base hover:text-white tag_tag__wWcwT" href="/tech/tags/aadb2c"><span>AADB2C</span></a></li><li class="my-2 xl:my-3"><a class="py-1 text-xs font-bold border rounded-full cursor-pointer xl:text-sm whitespace-nowrap border-primary-base px-7 text-primary-dark transition-all duration-250 hover:bg-primary-base hover:text-white tag_tag__wWcwT" href="/tech/tags/%E8%AA%8D%E8%A8%BC%E3%83%BB%E8%AA%8D%E5%8F%AF"><span>èªè¨¼ã»èªå¯</span></a></li><li class="my-2 xl:my-3"><a class="py-1 text-xs font-bold border rounded-full cursor-pointer xl:text-sm whitespace-nowrap border-primary-base px-7 text-primary-dark transition-all duration-250 hover:bg-primary-base hover:text-white tag_tag__wWcwT" href="/tech/tags/idaas"><span>IDaaS</span></a></li><li class="my-2 xl:my-3"><a class="py-1 text-xs font-bold border rounded-full cursor-pointer xl:text-sm whitespace-nowrap border-primary-base px-7 text-primary-dark transition-all duration-250 hover:bg-primary-base hover:text-white tag_tag__wWcwT" href="/tech/tags/%E8%AA%8D%E8%A8%BC"><span>èªè¨¼</span></a></li><li class="my-2 xl:my-3"><a class="py-1 text-xs font-bold border rounded-full cursor-pointer xl:text-sm whitespace-nowrap border-primary-base px-7 text-primary-dark transition-all duration-250 hover:bg-primary-base hover:text-white tag_tag__wWcwT" href="/tech/tags/%E8%AA%8D%E5%8F%AF"><span>èªå¯</span></a></li><li class="my-2 xl:my-3"><a class="py-1 text-xs font-bold border rounded-full cursor-pointer xl:text-sm whitespace-nowrap border-primary-base px-7 text-primary-dark transition-all duration-250 hover:bg-primary-base hover:text-white tag_tag__wWcwT" href="/tech/tags/%E5%89%B5%E6%A5%AD%E8%80%85"><span>嵿¥è
</span></a></li><li class="my-2 xl:my-3"><a class="py-1 text-xs font-bold border rounded-full cursor-pointer xl:text-sm whitespace-nowrap border-primary-base px-7 text-primary-dark transition-all duration-250 hover:bg-primary-base hover:text-white tag_tag__wWcwT" href="/tech/tags/%E7%B5%8C%E5%96%B6%E8%80%85"><span>çµå¶è
</span></a></li><li class="my-2 xl:my-3"><a class="py-1 text-xs font-bold border rounded-full cursor-pointer xl:text-sm whitespace-nowrap border-primary-base px-7 text-primary-dark transition-all duration-250 hover:bg-primary-base hover:text-white tag_tag__wWcwT" href="/tech/tags/%E3%82%AD%E3%83%A3%E3%83%AA%E3%82%A2"><span>ãã£ãªã¢</span></a></li><li class="my-2 xl:my-3"><a class="py-1 text-xs font-bold border rounded-full cursor-pointer xl:text-sm whitespace-nowrap border-primary-base px-7 text-primary-dark transition-all duration-250 hover:bg-primary-base hover:text-white tag_tag__wWcwT" href="/tech/tags/%E3%82%A2%E3%82%A4%E3%83%87%E3%82%A3%E3%82%A2"><span>ã¢ã¤ãã£ã¢</span></a></li><li class="my-2 xl:my-3"><a class="py-1 text-xs font-bold border rounded-full cursor-pointer xl:text-sm whitespace-nowrap border-primary-base px-7 text-primary-dark transition-all duration-250 hover:bg-primary-base hover:text-white tag_tag__wWcwT" href="/tech/tags/%E5%87%BA%E3%81%97%E6%96%B9"><span>åºãæ¹</span></a></li><li class="my-2 xl:my-3"><a class="py-1 text-xs font-bold border rounded-full cursor-pointer xl:text-sm whitespace-nowrap border-primary-base px-7 text-primary-dark transition-all duration-250 hover:bg-primary-base hover:text-white tag_tag__wWcwT" href="/tech/tags/%E5%8E%9F%E4%BD%93%E9%A8%93"><span>åä½é¨</span></a></li><li class="my-2 xl:my-3"><a class="py-1 text-xs font-bold border rounded-full cursor-pointer xl:text-sm whitespace-nowrap border-primary-base px-7 text-primary-dark transition-all duration-250 hover:bg-primary-base hover:text-white tag_tag__wWcwT" href="/tech/tags/%E3%81%8A%E3%81%99%E3%81%99%E3%82%81"><span>ãããã</span></a></li><li class="my-2 xl:my-3"><a class="py-1 text-xs font-bold border rounded-full cursor-pointer xl:text-sm whitespace-nowrap border-primary-base px-7 text-primary-dark transition-all duration-250 hover:bg-primary-base hover:text-white tag_tag__wWcwT" href="/tech/tags/%E3%82%A2%E3%83%B3%E3%83%88%E3%83%AC%E3%83%97%E3%83%AC%E3%83%8A%E3%83%BC"><span>ã¢ã³ãã¬ãã¬ãã¼</span></a></li><li class="my-2 xl:my-3"><a class="py-1 text-xs font-bold border rounded-full cursor-pointer xl:text-sm whitespace-nowrap border-primary-base px-7 text-primary-dark transition-all duration-250 hover:bg-primary-base hover:text-white tag_tag__wWcwT" href="/tech/tags/%E8%B1%86%E7%9F%A5%E8%AD%98"><span>è±ç¥è</span></a></li><li class="my-2 xl:my-3"><a class="py-1 text-xs font-bold border rounded-full cursor-pointer xl:text-sm whitespace-nowrap border-primary-base px-7 text-primary-dark transition-all duration-250 hover:bg-primary-base hover:text-white tag_tag__wWcwT" href="/tech/tags/%E7%94%A8%E8%AA%9E"><span>ç¨èª</span></a></li><li class="my-2 xl:my-3"><a class="py-1 text-xs font-bold border rounded-full cursor-pointer xl:text-sm whitespace-nowrap border-primary-base px-7 text-primary-dark transition-all duration-250 hover:bg-primary-base hover:text-white tag_tag__wWcwT" href="/tech/tags/%E8%8B%B1%E8%AA%9E"><span>è±èª</span></a></li><li class="my-2 xl:my-3"><a class="py-1 text-xs font-bold border rounded-full cursor-pointer xl:text-sm whitespace-nowrap border-primary-base px-7 text-primary-dark transition-all duration-250 hover:bg-primary-base hover:text-white tag_tag__wWcwT" href="/tech/tags/%E6%95%99%E8%82%B2"><span>æè²</span></a></li><li class="my-2 xl:my-3"><a class="py-1 text-xs font-bold border rounded-full cursor-pointer xl:text-sm whitespace-nowrap border-primary-base px-7 text-primary-dark transition-all duration-250 hover:bg-primary-base hover:text-white tag_tag__wWcwT" href="/tech/tags/%E7%A4%BE%E4%BC%9A%E8%AA%B2%E9%A1%8C"><span>社ä¼èª²é¡</span></a></li><li class="my-2 xl:my-3"><a class="py-1 text-xs font-bold border rounded-full cursor-pointer xl:text-sm whitespace-nowrap border-primary-base px-7 text-primary-dark transition-all duration-250 hover:bg-primary-base hover:text-white tag_tag__wWcwT" href="/tech/tags/%E6%88%A6%E7%95%A5"><span>æ¦ç¥</span></a></li><li class="my-2 xl:my-3"><a class="py-1 text-xs font-bold border rounded-full cursor-pointer xl:text-sm whitespace-nowrap border-primary-base px-7 text-primary-dark transition-all duration-250 hover:bg-primary-base hover:text-white tag_tag__wWcwT" href="/tech/tags/%E8%B3%87%E6%9C%AC%E4%B8%BB%E7%BE%A9"><span>è³æ¬ä¸»ç¾©</span></a></li><li class="my-2 xl:my-3"><a class="py-1 text-xs font-bold border rounded-full cursor-pointer xl:text-sm whitespace-nowrap border-primary-base px-7 text-primary-dark transition-all duration-250 hover:bg-primary-base hover:text-white tag_tag__wWcwT" href="/tech/tags/%E6%9B%B8%E7%B1%8D"><span>æ¸ç±</span></a></li><li class="my-2 xl:my-3"><a class="py-1 text-xs font-bold border rounded-full cursor-pointer xl:text-sm whitespace-nowrap border-primary-base px-7 text-primary-dark transition-all duration-250 hover:bg-primary-base hover:text-white tag_tag__wWcwT" href="/tech/tags/%E6%80%9D%E8%80%83"><span>æè</span></a></li><li class="my-2 xl:my-3"><a class="py-1 text-xs font-bold border rounded-full cursor-pointer xl:text-sm whitespace-nowrap border-primary-base px-7 text-primary-dark transition-all duration-250 hover:bg-primary-base hover:text-white tag_tag__wWcwT" href="/tech/tags/%E6%B7%A1%E8%B7%AF%E5%B3%B6"><span>淡路島</span></a></li><li class="my-2 xl:my-3"><a class="py-1 text-xs font-bold border rounded-full cursor-pointer xl:text-sm whitespace-nowrap border-primary-base px-7 text-primary-dark transition-all duration-250 hover:bg-primary-base hover:text-white tag_tag__wWcwT" href="/tech/tags/%E5%9C%B0%E6%96%B9%E5%89%B5%E7%94%9F"><span>å°æ¹åµç</span></a></li><li class="my-2 xl:my-3"><a class="py-1 text-xs font-bold border rounded-full cursor-pointer xl:text-sm whitespace-nowrap border-primary-base px-7 text-primary-dark transition-all duration-250 hover:bg-primary-base hover:text-white tag_tag__wWcwT" href="/tech/tags/sdgs"><span>SDGs</span></a></li><li class="my-2 xl:my-3"><a class="py-1 text-xs font-bold border rounded-full cursor-pointer xl:text-sm whitespace-nowrap border-primary-base px-7 text-primary-dark transition-all duration-250 hover:bg-primary-base hover:text-white tag_tag__wWcwT" href="/tech/tags/%E3%83%91%E3%82%BD%E3%83%8A%E3%82%B0%E3%83%AB%E3%83%BC%E3%83%97"><span>ãã½ãã°ã«ã¼ã</span></a></li><li class="my-2 xl:my-3"><a class="py-1 text-xs font-bold border rounded-full cursor-pointer xl:text-sm whitespace-nowrap border-primary-base px-7 text-primary-dark transition-all duration-250 hover:bg-primary-base hover:text-white tag_tag__wWcwT" href="/tech/tags/c
8hakra%20ui"><span>Chakra UI</span></a></li><li class="my-2 xl:my-3"><a class="py-1 text-xs font-bold border rounded-full cursor-pointer xl:text-sm whitespace-nowrap border-primary-base px-7 text-primary-dark transition-all duration-250 hover:bg-primary-base hover:text-white tag_tag__wWcwT" href="/tech/tags/stylelint"><span>Stylelint</span></a></li><li class="my-2 xl:my-3"><a class="py-1 text-xs font-bold border rounded-full cursor-pointer xl:text-sm whitespace-nowrap border-primary-base px-7 text-primary-dark transition-all duration-250 hover:bg-primary-base hover:text-white tag_tag__wWcwT" href="/tech/tags/prettier"><span>Prettier</span></a></li><li class="my-2 xl:my-3"><a class="py-1 text-xs font-bold border rounded-full cursor-pointer xl:text-sm whitespace-nowrap border-primary-base px-7 text-primary-dark transition-all duration-250 hover:bg-primary-base hover:text-white tag_tag__wWcwT" href="/tech/tags/typescript"><span>TypeScript</span></a></li><li class="my-2 xl:my-3"><a class="py-1 text-xs font-bold border rounded-full cursor-pointer xl:text-sm whitespace-nowrap border-primary-base px-7 text-primary-dark transition-all duration-250 hover:bg-primary-base hover:text-white tag_tag__wWcwT" href="/tech/tags/eslint"><span>ESLint</span></a></li><li class="my-2 xl:my-3"><a class="py-1 text-xs font-bold border rounded-full cursor-pointer xl:text-sm whitespace-nowrap border-primary-base px-7 text-primary-dark transition-all duration-250 hover:bg-primary-base hover:text-white tag_tag__wWcwT" href="/tech/tags/rss"><span>RSS</span></a></li><li class="my-2 xl:my-3"><a class="py-1 text-xs font-bold border rounded-full cursor-pointer xl:text-sm whitespace-nowrap border-primary-base px-7 text-primary-dark transition-all duration-250 hover:bg-primary-base hover:text-white tag_tag__wWcwT" href="/tech/tags/feed"><span>feed</span></a></li><li class="my-2 xl:my-3"><a class="py-1 text-xs font-bold border rounded-full cursor-pointer xl:text-sm whitespace-nowrap border-primary-base px-7 text-primary-dark transition-all duration-250 hover:bg-primary-base hover:text-white tag_tag__wWcwT" href="/tech/tags/google%20analytics"><span>Google Analytics</span></a></li><li class="my-2 xl:my-3"><a class="py-1 text-xs font-bold border rounded-full cursor-pointer xl:text-sm whitespace-nowrap border-primary-base px-7 text-primary-dark transition-all duration-250 hover:bg-primary-base hover:text-white tag_tag__wWcwT" href="/tech/tags/%E3%83%86%E3%82%B9%E3%83%88%E9%A7%86%E5%8B%95%E9%96%8B%E7%99%BA"><span>ãã¹ãé§åéçº</span></a></li><li class="my-2 xl:my-3"><a class="py-1 text-xs font-bold border rounded-full cursor-pointer xl:text-sm whitespace-nowrap border-primary-base px-7 text-primary-dark transition-all duration-250 hover:bg-primary-base hover:text-white tag_tag__wWcwT" href="/tech/tags/jest"><span>Jest</span></a></li><li class="my-2 xl:my-3"><a class="py-1 text-xs font-bold border rounded-full cursor-pointer xl:text-sm whitespace-nowrap border-primary-base px-7 text-primary-dark transition-all duration-250 hover:bg-primary-base hover:text-white tag_tag__wWcwT" href="/tech/tags/node.js"><span>Node.js</span></a></li><li class="my-2 xl:my-3"><a class="py-1 text-xs font-bold border rounded-full cursor-pointer xl:text-sm whitespace-nowrap border-primary-base px-7 text-primary-dark transition-all duration-250 hover:bg-primary-base hover:text-white tag_tag__wWcwT" href="/tech/tags/chart.js"><span>Chart.js</span></a></li><li class="my-2 xl:my-3"><a class="py-1 text-xs font-bold border rounded-full cursor-pointer xl:text-sm whitespace-nowrap border-primary-base px-7 text-primary-dark transition-all duration-250 hover:bg-primary-base hover:text-white tag_tag__wWcwT" href="/tech/tags/react-chartjs-2"><span>react-chartjs-2</span></a></li><li class="my-2 xl:my-3"><a class="py-1 text-xs font-bold border rounded-full cursor-pointer xl:text-sm whitespace-nowrap border-primary-base px-7 text-primary-dark transition-all duration-250 hover:bg-primary-base hover:text-white tag_tag__wWcwT" href="/tech/tags/microsoft"><span>Microsoft</span></a></li><li class="my-2 xl:my-3"><a class="py-1 text-xs font-bold border rounded-full cursor-pointer xl:text-sm whitespace-nowrap border-primary-base px-7 text-primary-dark transition-all duration-250 hover:bg-primary-base hover:text-white tag_tag__wWcwT" href="/tech/tags/microsoft%20azure"><span>Microsoft Azure</span></a></li><li class="my-2 xl:my-3"><a class="py-1 text-xs font-bold border rounded-full cursor-pointer xl:text-sm whitespace-nowrap border-primary-base px-7 text-primary-dark transition-all duration-250 hover:bg-primary-base hover:text-white tag_tag__wWcwT" href="/tech/tags/azure%20functions"><span>Azure Functions</span></a></li><li class="my-2 xl:my-3"><a class="py-1 text-xs font-bold border rounded-full cursor-pointer xl:text-sm whitespace-nowrap border-primary-base px-7 text-primary-dark transition-all duration-250 hover:bg-primary-base hover:text-white tag_tag__wWcwT" href="/tech/tags/textlint"><span>textlint</span></a></li><li class="my-2 xl:my-3"><a class="py-1 text-xs font-bold border rounded-full cursor-pointer xl:text-sm whitespace-nowrap border-primary-base px-7 text-primary-dark transition-all duration-250 hover:bg-primary-base hover:text-white tag_tag__wWcwT" href="/tech/tags/lint"><span>Lint</span></a></li><li class="my-2 xl:my-3"><a class="py-1 text-xs font-bold border rounded-full cursor-pointer xl:text-sm whitespace-nowrap border-primary-base px-7 text-primary-dark transition-all duration-250 hover:bg-primary-base hover:text-white tag_tag__wWcwT" href="/tech/tags/%E6%96%87%E7%AB%A0"><span>æç« </span></a></li><li class="my-2 xl:my-3"><a class="py-1 text-xs font-bold border rounded-full cursor-pointer xl:text-sm whitespace-nowrap border-primary-base px-7 text-primary-dark transition-all duration-250 hover:bg-primary-base hover:text-white tag_tag__wWcwT" href="/tech/tags/%E6%8B%AC%E5%BC%A7"><span>æ¬å¼§</span></a></li><li class="my-2 xl:my-3"><a class="py-1 text-xs font-bold border rounded-full cursor-pointer xl:text-sm whitespace-nowrap border-primary-base px-7 text-primary-dark transition-all duration-250 hover:bg-primary-base hover:text-white tag_tag__wWcwT" href="/tech/tags/%E5%8F%A5%E8%AA%AD%E7%82%B9"><span>å¥èªç¹</span></a></li><li class="my-2 xl:my-3"><a class="py-1 text-xs font-bold border rounded-full cursor-pointer xl:text-sm whitespace-nowrap border-primary-base px-7 text-primary-dark transition-all duration-250 hover:bg-primary-base hover:text-white tag_tag__wWcwT" href="/tech/tags/github"><span>GitHub</span></a></li><li class="my-2 xl:my-3"><a class="py-1 text-xs font-bold border rounded-full cursor-pointer xl:text-sm whitespace-nowrap border-primary-base px-7 text-primary-dark transition-all duration-250 hover:bg-primary-base hover:text-white tag_tag__wWcwT" href="/tech/tags/git"><span>Git</span></a></li><li class="my-2 xl:my-3"><a class="py-1 text-xs font-bold border rounded-full cursor-pointer xl:text-sm whitespace-nowrap border-primary-base px-7 text-primary-dark transition-all duration-250 hover:bg-primary-base hover:text-white tag_tag__wWcwT" href="/tech/tags/husky"><span>husky</span></a></li><li class="my-2 xl:my-3"><a class="py-1 text-xs font-bold border rounded-full cursor-pointer xl:text-sm whitespace-nowrap border-primary-base px-7 text-primary-dark transition-all duration-250 hover:bg-primary-base hover:text-white tag_tag__wWcwT" href="/tech/tags/lint-staged"><span>lint-staged</span></a></li><li class="my-2 xl:my-3"><a class="py-1 text-xs font-bold border rounded-full cursor-pointer xl:text-sm whitespace-nowrap border-primary-base px-7 text-primary-dark transition-all duration-250 hover:bg-primary-base hover:text-white tag_tag__wWcwT" href="/tech/tags/testing"><span>Testing</span></a></li><li class="my-2 xl:my-3"><a class="py-1 text-xs font-bold border rounded-full cursor-pointer xl:text-sm whitespace-nowrap border-primary-base px-7 text-primary-dark transition-all duration-250 hover:bg-primary-base hover:text-white tag_tag__wWcwT" href="/tech/tags/github%20actions"><span>GitHub Actions</span></a></li><li class="my-2 xl:my-3"><a class="py-1 text-xs font-bold border rounded-full cursor-pointer xl:text-sm whitespace-nowrap border-primary-base px-7 text-primary-dark transition-all duration-250 hover:bg-primary-base hover:text-white tag_tag__wWcwT" href="/tech/tags/%E3%82%B5%E3%82%A4%E3%83%88%E3%83%9E%E3%83%83%E3%83%97"><span>ãµã¤ãããã</span></a></li><li class="my-2 xl:my-3"><a class="py-1 text-xs font-bold border rounded-full cursor-pointer xl:text-sm whitespace-nowrap border-primary-base px-7 text-primary-dark transition-all duration-250 hover:bg-primary-base hover:text-white tag_tag__wWcwT" href="/tech/tags/seo"><span>SEO</span></a></li><li class="my-2 xl:my-3"><a class="py-1 text-xs font-bold border rounded-full cursor-pointer xl:text-sm whitespace-nowrap border-primary-base px-7 text-primary-dark transition-all duration-250 hover:bg-primary-base hover:text-white tag_tag__wWcwT" href="/tech/tags/algolia"><span>algolia</span></a></li><li class="my-2 xl:my-3"><a class="py-1 text-xs font-bold border rounded-full cursor-pointer xl:text-sm whitespace-nowrap border-primary-base px-7 text-primary-dark transition-all duration-250 hover:bg-primary-base hover:text-white tag_tag__wWcwT" href="/tech/tags/instant%20search"><span>Instant Search</span></a></li><li class="my-2 xl:my-3"><a class="py-1 text-xs font-bold border rounded-full cursor-pointer xl:text-sm whitespace-nowrap border-primary-base px-7 text-primary-dark transition-all duration-250 hover:bg-primary-base hover:text-white tag_tag__wWcwT" href="/tech/tags/headless%20ui"><span>Headless UI</span></a></li><li class="my-2 xl:my-3"><a class="py-1 text-xs font-bold border rounded-full cursor-pointer xl:text-sm whitespace-nowrap border-primary-base px-7 text-primary-dark transition-all duration-250 hover:bg-primary-base hover:text-white tag_tag__wWcwT" href="/tech/tags/%E7%92%B0%E5%A2%83%E5%A4%89%E6%95%B0"><span>
8ç°å¢å¤æ°</span></a></li><li class="my-2 xl:my-3"><a class="py-1 text-xs font-bold border rounded-full cursor-pointer xl:text-sm whitespace-nowrap border-primary-base px-7 text-primary-dark transition-all duration-250 hover:bg-primary-base hover:text-white tag_tag__wWcwT" href="/tech/tags/env%20%E3%83%95%E3%82%A1%E3%82%A4%E3%83%AB"><span>env ãã¡ã¤ã«</span></a></li><li class="my-2 xl:my-3"><a class="py-1 text-xs font-bold border rounded-full cursor-pointer xl:text-sm whitespace-nowrap border-primary-base px-7 text-primary-dark transition-all duration-250 hover:bg-primary-base hover:text-white tag_tag__wWcwT" href="/tech/tags/active%20directory%20b2c"><span>Active Directory B2C</span></a></li><li class="my-2 xl:my-3"><a class="py-1 text-xs font-bold border rounded-full cursor-pointer xl:text-sm whitespace-nowrap border-primary-base px-7 text-primary-dark transition-all duration-250 hover:bg-primary-base hover:text-white tag_tag__wWcwT" href="/tech/tags/auth"><span>Auth</span></a></li><li class="my-2 xl:my-3"><a class="py-1 text-xs font-bold border rounded-full cursor-pointer xl:text-sm whitespace-nowrap border-primary-base px-7 text-primary-dark transition-all duration-250 hover:bg-primary-base hover:text-white tag_tag__wWcwT" href="/tech/tags/javascript"><span>JavaScript</span></a></li><li class="my-2 xl:my-3"><a class="py-1 text-xs font-bold border rounded-full cursor-pointer xl:text-sm whitespace-nowrap border-primary-base px-7 text-primary-dark transition-all duration-250 hover:bg-primary-base hover:text-white tag_tag__wWcwT" href="/tech/tags/%E3%82%A8%E3%83%B3%E3%82%B3%E3%83%BC%E3%83%89"><span>ã¨ã³ã³ã¼ã</span></a></li><li class="my-2 xl:my-3"><a class="py-1 text-xs font-bold border rounded-full cursor-pointer xl:text-sm whitespace-nowrap border-primary-base px-7 text-primary-dark transition-all duration-250 hover:bg-primary-base hover:text-white tag_tag__wWcwT" href="/tech/tags/git%20flow"><span>Git Flow</span></a></li><li class="my-2 xl:my-3"><a class="py-1 text-xs font-bold border rounded-full cursor-pointer xl:text-sm whitespace-nowrap border-primary-base px-7 text-primary-dark transition-all duration-250 hover:bg-primary-base hover:text-white tag_tag__wWcwT" href="/tech/tags/%E3%83%96%E3%83%A9%E3%83%B3%E3%83%81%E3%83%A2%E3%83%87%E3%83%AB"><span>ãã©ã³ãã¢ãã«</span></a></li><li class="my-2 xl:my-3"><a class="py-1 text-xs font-bold border rounded-full cursor-pointer xl:text-sm whitespace-nowrap border-primary-base px-7 text-primary-dark transition-all duration-250 hover:bg-primary-base hover:text-white tag_tag__wWcwT" href="/tech/tags/vscode"><span>VSCode</span></a></li><li class="my-2 xl:my-3"><a class="py-1 text-xs font-bold border rounded-full cursor-pointer xl:text-sm whitespace-nowrap border-primary-base px-7 text-primary-dark transition-all duration-250 hover:bg-primary-base hover:text-white tag_tag__wWcwT" href="/tech/tags/%E3%83%91%E3%83%95%E3%82%A9%E3%83%BC%E3%83%9E%E3%83%B3%E3%82%B9"><span>ããã©ã¼ãã³ã¹</span></a></li><li class="my-2 xl:my-3"><a class="py-1 text-xs font-bold border rounded-full cursor-pointer xl:text-sm whitespace-nowrap border-primary-base px-7 text-primary-dark transition-all duration-250 hover:bg-primary-base hover:text-white tag_tag__wWcwT" href="/tech/tags/react.memo"><span>React.memo</span></a></li><li class="my-2 xl:my-3"><a class="py-1 text-xs font-bold border rounded-full cursor-pointer xl:text-sm whitespace-nowrap border-primary-base px-7 text-primary-dark transition-all duration-250 hover:bg-primary-base hover:text-white tag_tag__wWcwT" href="/tech/tags/react-syntax-highlighter"><span>react-syntax-highlighter</span></a></li><li class="my-2 xl:my-3"><a class="py-1 text-xs font-bold border rounded-full cursor-pointer xl:text-sm whitespace-nowrap border-primary-base px-7 text-primary-dark transition-all duration-250 hover:bg-primary-base hover:text-white tag_tag__wWcwT" href="/tech/tags/atom"><span>Atom</span></a></li><li class="my-2 xl:my-3"><a class="py-1 text-xs font-bold border rounded-full cursor-pointer xl:text-sm whitespace-nowrap border-primary-base px-7 text-primary-dark transition-all duration-250 hover:bg-primary-base hover:text-white tag_tag__wWcwT" href="/tech/tags/next-sitemap"><span>next-sitemap</span></a></li><li class="my-2 xl:my-3"><a class="py-1 text-xs font-bold border rounded-full cursor-pointer xl:text-sm whitespace-nowrap border-primary-base px-7 text-primary-dark transition-all duration-250 hover:bg-primary-base hover:text-white tag_tag__wWcwT" href="/tech/tags/react-scroll"><span>react-scroll</span></a></li><li class="my-2 xl:my-3"><a class="py-1 text-xs font-bold border rounded-full cursor-pointer xl:text-sm whitespace-nowrap border-primary-base px-7 text-primary-dark transition-all duration-250 hover:bg-primary-base hover:text-white tag_tag__wWcwT" href="/tech/tags/atom"><span>ATOM</span></a></li><li class="my-2 xl:my-3"><a class="py-1 text-xs font-bold border rounded-full cursor-pointer xl:text-sm whitespace-nowrap border-primary-base px-7 text-primary-dark transition-all duration-250 hover:bg-primary-base hover:text-white tag_tag__wWcwT" href="/tech/tags/slack"><span>Slack</span></a></li><li class="my-2 xl:my-3"><a class="py-1 text-xs font-bold border rounded-full cursor-pointer xl:text-sm whitespace-nowrap border-primary-base px-7 text-primary-dark transition-all duration-250 hover:bg-primary-base hover:text-white tag_tag__wWcwT" href="/tech/tags/vue.js"><span>Vue.js</span></a></li><li class="my-2 xl:my-3"><a class="py-1 text-xs font-bold border rounded-full cursor-pointer xl:text-sm whitespace-nowrap border-primary-base px-7 text-primary-dark transition-all duration-250 hover:bg-primary-base hover:text-white tag_tag__wWcwT" href="/tech/tags/nuxt.js"><span>Nuxt.js</span></a></li><li class="my-2 xl:my-3"><a class="py-1 text-xs font-bold border rounded-full cursor-pointer xl:text-sm whitespace-nowrap border-primary-base px-7 text-primary-dark transition-all duration-250 hover:bg-primary-base hover:text-white tag_tag__wWcwT" href="/tech/tags/%E9%96%8B%E7%99%BA%E4%BD%93%E5%88%B6"><span>éçºä½å¶</span></a></li><li class="my-2 xl:my-3"><a class="py-1 text-xs font-bold border rounded-full cursor-pointer xl:text-sm whitespace-nowrap border-primary-base px-7 text-primary-dark transition-all duration-250 hover:bg-primary-base hover:text-white tag_tag__wWcwT" href="/tech/tags/%E6%8E%A1%E7%94%A8%E8%A9%A6%E9%A8%93"><span>æ¡ç¨è©¦é¨</span></a></li><li class="my-2 xl:my-3"><a class="py-1 text-xs font-bold border rounded-full cursor-pointer xl:text-sm whitespace-nowrap border-primary-base px-7 text-primary-dark transition-all duration-250 hover:bg-primary-base hover:text-white tag_tag__wWcwT" href="/tech/tags/%E6%96%B0%E8%A6%8F%E4%BA%8B%E6%A5%AD"><span>æ°è¦äºæ¥</span></a></li><li class="my-2 xl:my-3"><a class="py-1 text-xs font-bold border rounded-full cursor-pointer xl:text-sm whitespace-nowrap border-primary-base px-7 text-primary-dark transition-all duration-250 hover:bg-primary-base hover:text-white tag_tag__wWcwT" href="/tech/tags/react%20testing%20library"><span>React Testing Library</span></a></li><li class="my-2 xl:my-3"><a class="py-1 text-xs font-bold border rounded-full cursor-pointer xl:text-sm whitespace-nowrap border-primary-base px-7 text-primary-dark transition-all duration-250 hover:bg-primary-base hover:text-white tag_tag__wWcwT" href="/tech/tags/storybook"><span>Storybook</span></a></li><li class="my-2 xl:my-3"><a class="py-1 text-xs font-bold border rounded-full cursor-pointer xl:text-sm whitespace-nowrap border-primary-base px-7 text-primary-dark transition-all duration-250 hover:bg-primary-base hover:text-white tag_tag__wWcwT" href="/tech/tags/cms"><span>CMS</span></a></li><li class="my-2 xl:my-3"><a class="py-1 text-xs font-bold border rounded-full cursor-pointer xl:text-sm whitespace-nowrap border-primary-base px-7 text-primary-dark transition-all duration-250 hover:bg-primary-base hover:text-white tag_tag__wWcwT" href="/tech/tags/%E3%82%B3%E3%83%B3%E3%82%BB%E3%83%97%E3%83%88"><span>ã³ã³ã»ãã</span></a></li><li class="my-2 xl:my-3"><a class="py-1 text-xs font-bold border rounded-full cursor-pointer xl:text-sm whitespace-nowrap border-primary-base px-7 text-primary-dark transition-all duration-250 hover:bg-primary-base hover:text-white tag_tag__wWcwT" href="/tech/tags/web"><span>Web</span></a></li><li class="my-2 xl:my-3"><a class="py-1 text-xs font-bold border rounded-full cursor-pointer xl:text-sm whitespace-nowrap border-primary-base px-7 text-primary-dark transition-all duration-250 hover:bg-primary-base hover:text-white tag_tag__wWcwT" href="/tech/tags/%E3%83%97%E3%83%A9%E3%82%A4%E3%83%90%E3%82%B7%E3%83%BC%E3%83%9D%E3%83%AA%E3%82%B7%E3%83%BC"><span>ãã©ã¤ãã·ã¼ããªã·ã¼</span></a></li><li class="my-2 xl:my-3"><a class="py-1 text-xs font-bold border rounded-full cursor-pointer xl:text-sm whitespace-nowrap border-primary-base px-7 text-primary-dark transition-all duration-250 hover:bg-primary-base hover:text-white tag_tag__wWcwT" href="/tech/tags/%E6%8A%80%E8%A1%93%E7%B4%B9%E4%BB%8B"><span>æè¡ç´¹ä»</span></a></li></ul><div class="px-4"><div class="pb-6 mx-auto my-8 lg:w-[1000px] xl:w-[1200px] 2xl:w-[1500px]"><div class="lg:grid lg:grid-cols-3 lg:gap-6 xl:gap-8"><div class="col-span-2"><nav class="flex" aria-label="Breadcrumb"><ul class="flex items-center list-none space-x-4"><li><a class="text-gray-400 hover:text-gray-500" href="/"><svg class="w-5 h-5" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor" aria-hidden="true"><path d="M10.707 2.293a1 1 0 00-1.414 0l-7 7a1 1 0 001.414 1.414L4 10.414V17a1 1 0 001 1h2a1 1 0 001-1v-2a1 1 0 011-1h2a1 1 0 011 1v2a1 1 0 001 1h2a1 1 0 001-1v-6.586l.293.293a1 1 0 001.414-1.414l-7-7z"></path></svg><span class="sr-only">Home</span></a></li><li><div class="flex items-center"><div class="text-gray-400"><svg class="w-5 h-5" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor" aria-hidden="true"><path fill-rule="evenodd" d="M7.293 14.707a1 1 0 010-1.414L10.586 10 7.293 6.707a1 1 0 011.414-1.414l4 4a1 1 0 010 1.414l-4 4a1 1 0 01-1.414 0z" clip-rule="evenodd"></path></svg></div><p class="ml-4 text-sm font-medium text-gray-500">ã¿ã°</p></div></li></ul></nav><h2 class="py-8 text-3xl font-bold text-center md:py-12">Instant Search</h2><div class="grid md:grid-cols-2 gap-4 lg:gap-6 xl:gap-8"><div class="relative block w-full h-full bg-white rounded-lg shadow-md cursor-pointer duration-300 hover:opacity-75"><a href="/tech/next-algolia"><span style="box-sizing:border-box;display:block;overflow:hidden;width:initial;height:initial;background:none;opacity:1;border:0;margin:0;padding:0;position:relative"><span style="box-sizing:border-box;display:block;width:initial;height:initial;background:none;opacity:1;border:0;margin:0;padding:0;padding-top:52.5%"></span><img alt="React / Next.js ã« algolia ãå°å
¥ãã¦æ¤ç´¢æ©è½ã追å ããã" src="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7" decoding="async" data-nimg="responsive" class="object-cover w-full h-auto" style="position:absolute;top:0;left:0;bottom:0;right:0;box-sizing:border-box;padding:0;border:none;margin:auto;display:block;width:0;height:0;min-width:100%;max-width:100%;min-height:100%;max-height:100%"/><noscript><img alt="React / Next.js ã« algolia ãå°å
¥ãã¦æ¤ç´¢æ©è½ã追å ããã" sizes="100vw" srcSet="/_next/image?url=%2Fimg%2Fpages%2Ftech%2Fnext-algolia%2Fogp.png&w=340&q=75 340w, /_next/image?url=%2Fimg%2Fpages%2Ftech%2Fnext-algolia%2Fogp.png&w=640&q=75 640w, /_next/image?url=%2Fimg%2Fpages%2Ftech%2Fnext-algolia%2Fogp.png&w=768&q=75 768w, /_next/image?url=%2Fimg%2Fpages%2Ftech%2Fnext-algolia%2Fogp.png&w=1024&q=75 1024w, /_next/image?url=%2Fimg%2Fpages%2Ftech%2Fnext-algolia%2Fogp.png&w=1280&q=75 1280w, /_next/image?url=%2Fimg%2Fpages%2Ftech%2Fnext-algolia%2Fogp.png&w=1440&q=75 1440w, /_next/image?url=%2Fimg%2Fpages%2Ftech%2Fnext-algolia%2Fogp.png&w=1980&q=75 1980w" src="/_next/image?url=%2Fimg%2Fpages%2Ftech%2Fnext-algolia%2Fogp.png&w=1980&q=75" decoding="async" data-nimg="responsive" style="position:absolute;top:0;left:0;bottom:0;right:0;box-sizing:border-box;padding:0;border:none;margin:auto;display:block;width:0;height:0;min-width:100%;max-width:100%;min-height:100%;max-height:100%" class="object-cover w-full h-auto" loading="lazy"/></noscript></span><div class="px-6 py-6 whitespace-normal border-t"><div class="relative"><p class="text-sm font-normal text-gray-light">2021/06/01</p><div class="absolute bottom-0 right-0 w-18"><div class="w-12 h-12 mx-auto border rounded-full border-primary-base lg:w-14 lg:h-14"><span style="box-sizing:border-box;display:block;overflow:hidden;width:initial;height:initial;background:none;opacity:1;border:0;margin:0;padding:0;position:relative"><span style="box-sizing:border-box;display:block;width:initial;height:initial;background:none;opacity:1;border:0;margin:0;padding:0;padding-top:100%"></span><img alt="yoshizaki" src="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7" decoding="async" data-nimg="responsive" class="w-16 h-16 border-2 rounded-full" style="position:absolute;top:0;left:0;bottom:0;right:0;box-sizing:border-box;padding:0;border:none;margin:auto;display:block;width:0;height:0;min-width:100%;max-width:100%;min-height:100%;max-height:100%"/><noscript><img alt="yoshizaki" sizes="100vw" srcSet="/_next/image?url=%2Fimg%2Fauthors%2Fyoshizaki.jpg&w=340&q=75 340w, /_next/image?url=%2Fimg%2Fauthors%2Fyoshizaki.jpg&w=640&q=75 640w, /_next/image?url=%2Fimg%2Fauthors%2Fyoshizaki.jpg&w=768&q=75 768w, /_next/image?url=%2Fimg%2Fauthors%2Fyoshizaki.jpg&w=1024&q=75 1024w, /_next/image?url=%2Fimg%2Fauthors%2Fyoshizaki.jpg&w=1280&q=75 1280w, /_next/image?url=%2Fimg%2Fauthors%2Fyoshizaki.jpg&w=1440&q=75 1440w, /_next/image?url=%2Fimg%2Fauthors%2Fyoshizaki.jpg&w=1980&q=75 1980w" src="/_next/image?url=%2Fimg%2Fauthors%2Fyoshizaki.jpg&w=1980&q=75" decoding="async" data-nimg="responsive" style="position:absolute;top:0;left:0;bottom:0;right:0;box-sizing:border-box;padding:0;border:none;margin:auto;display:block;width:0;height:0;min-width:100%;max-width:100%;min-height:100%;max-height:100%" class="w-16 h-16 border-2 rounded-full" loading="lazy"/></noscript></span></div><p class="text-sm font-bold text-center">åå´ äº®ä»</p></div></div><div class="pt-2"><h3 class="font-bold text-strong text-black-base line-clamp-2">React / Next.js ã« algolia ãå°å
¥ãã¦æ¤ç´¢æ©è½ã追å ããã</h3><ul class="inline-block pt-3 -mb-3"><li class="inline-block mb-3 mr-3"><span class="px-2 py-1 font-bold border text-[0.8125rem] border-primary-base text-primary-base rounded-[0.3125rem]">React</span></li><li class="inline-block mb-3 mr-3"><span class="px-2 py-1 font-bold border text-[0.8125rem] border-primary-base text-primary-base rounded-[0.3125rem]">Next.js</span></li><li class="inline-block mb-3 mr-3"><span class="px-2 py-1 font-bold border text-[0.8125rem] border-primary-base text-primary-base rounded-[0.3125rem]">TypeScript</span></li><li class="inline-block mb-3 mr-3"><span class="px-2 py-1 font-bold border text-[0.8125rem] border-primary-base text-primary-base rounded-[0.3125rem]">algolia</span></li><li class="inline-block mb-3 mr-3"><span class="px-2 py-1 font-bold border text-[0.8125rem] border-primary-base text-primary-base rounded-[0.3125rem]">Instant Search</span></li><li class="inline-block mb-3 mr-3"><span class="px-2 py-1 font-bold border text-[0.8125rem] border-primary-base text-primary-base rounded-[0.3125rem]">Headless UI</span></li><li class="inline-block mb-3 mr-3"><span class="px-2 py-1 font-bold border text-[0.8125rem] border-primary-base text-primary-base rounded-[0.3125rem]">Tailwind CSS</span></li></ul></div></div></a></div></div></div><div class="mt-10 lg:mt-0 lg:col-span-1 space-y-5"><aside class="lg:h-full"><div class="pb-5"><h3 class="flex items-center text-lg font-bold tracking-widest">æ°çè¨äº<span class="pl-3 text-sm font-normal tracking-wider up
8percase text-primary-dark">new</span></h3><div class="mt-4 grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-1 space-y-3"><a class="items-center cursor-pointer grid grid-cols-4 transition-shadow duration-500 ease-in-out hover:opacity-75" href="/tech/markdown-viewer-by-markdoc"><div class="relative col-span-1"><span style="box-sizing:border-box;display:block;overflow:hidden;width:initial;height:initial;background:none;opacity:1;border:0;margin:0;padding:0;position:relative"><span style="box-sizing:border-box;display:block;width:initial;height:initial;background:none;opacity:1;border:0;margin:0;padding:0;padding-top:100%"></span><img alt="Markdoc ï¼Tailwind UI ã® Syntax ãã¼ã¹ï¼ã«ãã Markdown Viewer ã®å®è£
" src="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7" decoding="async" data-nimg="responsive" style="position:absolute;top:0;left:0;bottom:0;right:0;box-sizing:border-box;padding:0;border:none;margin:auto;display:block;width:0;height:0;min-width:100%;max-width:100%;min-height:100%;max-height:100%;object-fit:cover"/><noscript><img alt="Markdoc ï¼Tailwind UI ã® Syntax ãã¼ã¹ï¼ã«ãã Markdown Viewer ã®å®è£
" sizes="100vw" srcSet="/_next/image?url=%2Fimg%2Fpages%2Ftech%2Fmarkdown-viewer-by-markdoc%2Fogp.png&w=340&q=95 340w, /_next/image?url=%2Fimg%2Fpages%2Ftech%2Fmarkdown-viewer-by-markdoc%2Fogp.png&w=640&q=95 640w, /_next/image?url=%2Fimg%2Fpages%2Ftech%2Fmarkdown-viewer-by-markdoc%2Fogp.png&w=768&q=95 768w, /_next/image?url=%2Fimg%2Fpages%2Ftech%2Fmarkdown-viewer-by-markdoc%2Fogp.png&w=1024&q=95 1024w, /_next/image?url=%2Fimg%2Fpages%2Ftech%2Fmarkdown-viewer-by-markdoc%2Fogp.png&w=1280&q=95 1280w, /_next/image?url=%2Fimg%2Fpages%2Ftech%2Fmarkdown-viewer-by-markdoc%2Fogp.png&w=1440&q=95 1440w, /_next/image?url=%2Fimg%2Fpages%2Ftech%2Fmarkdown-viewer-by-markdoc%2Fogp.png&w=1980&q=95 1980w" src="/_next/image?url=%2Fimg%2Fpages%2Ftech%2Fmarkdown-viewer-by-markdoc%2Fogp.png&w=1980&q=95" decoding="async" data-nimg="responsive" style="position:absolute;top:0;left:0;bottom:0;right:0;box-sizing:border-box;padding:0;border:none;margin:auto;display:block;width:0;height:0;min-width:100%;max-width:100%;min-height:100%;max-height:100%;object-fit:cover" loading="lazy"/></noscript></span></div><div class="w-full px-3 col-span-3"><div class="text-sm font-bold tracking-wide sm:text-base line-clamp-3 lg:line-clamp-2 2xl:line-clamp-3 leading-5">Markdoc ï¼Tailwind UI ã® Syntax ãã¼ã¹ï¼ã«ãã Markdown Viewer ã®å®è£
</div><div class="flex justify-between pt-3"><span class="text-xs tracking-wide text-gray-light">2022/08/09</span><span class="text-xs font-bold tracking-widest underline uppercase text-primary-base">â¶ï¸Â view more</span></div></div></a><a class="items-center cursor-pointer grid grid-cols-4 transition-shadow duration-500 ease-in-out hover:opacity-75" href="/tech/deployment-by-azure-app-service-for-nodejs"><div class="relative col-span-1"><span style="box-sizing:border-box;display:block;overflow:hidden;width:initial;height:initial;background:none;opacity:1;border:0;margin:0;padding:0;position:relative"><span style="box-sizing:border-box;display:block;width:initial;height:initial;background:none;opacity:1;border:0;margin:0;padding:0;padding-top:100%"></span><img alt="GitHub Actions ãå©ç¨ãã¦ç¶ç¶ãããã¤ãã¦ã¿ãã" src="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7" decoding="async" data-nimg="responsive" style="position:absolute;top:0;left:0;bottom:0;right:0;box-sizing:border-box;padding:0;border:none;margin:auto;display:block;width:0;height:0;min-width:100%;max-width:100%;min-height:100%;max-height:100%;object-fit:cover"/><noscript><img alt="GitHub Actions ãå©ç¨ãã¦ç¶ç¶ãããã¤ãã¦ã¿ãã" sizes="100vw" srcSet="/_next/image?url=%2Fimg%2Fpages%2Ftech%2Fdeployment-by-azure-app-service-for-nodejs%2Fogp.png&w=340&q=95 340w, /_next/image?url=%2Fimg%2Fpages%2Ftech%2Fdeployment-by-azure-app-service-for-nodejs%2Fogp.png&w=640&q=95 640w, /_next/image?url=%2Fimg%2Fpages%2Ftech%2Fdeployment-by-azure-app-service-for-nodejs%2Fogp.png&w=768&q=95 768w, /_next/image?url=%2Fimg%2Fpages%2Ftech%2Fdeployment-by-azure-app-service-for-nodejs%2Fogp.png&w=1024&q=95 1024w, /_next/image?url=%2Fimg%2Fpages%2Ftech%2Fdeployment-by-azure-app-service-for-nodejs%2Fogp.png&w=1280&q=95 1280w, /_next/image?url=%2Fimg%2Fpages%2Ftech%2Fdeployment-by-azure-app-service-for-nodejs%2Fogp.png&w=1440&q=95 1440w, /_next/image?url=%2Fimg%2Fpages%2Ftech%2Fdeployment-by-azure-app-service-for-nodejs%2Fogp.png&w=1980&q=95 1980w" src="/_next/image?url=%2Fimg%2Fpages%2Ftech%2Fdeployment-by-azure-app-service-for-nodejs%2Fogp.png&w=1980&q=95" decoding="async" data-nimg="responsive" style="position:absolute;top:0;left:0;bottom:0;right:0;box-sizing:border-box;padding:0;border:none;margin:auto;display:block;width:0;height:0;min-width:100%;max-width:100%;min-height:100%;max-height:100%;object-fit:cover" loading="lazy"/></noscript></span></div><div class="w-full px-3 col-span-3"><div class="text-sm font-bold tracking-wide sm:text-base line-clamp-3 lg:line-clamp-2 2xl:line-clamp-3 leading-5">ãAzure App Service | Node.jsãGitHub Actions ãå©ç¨ãã¦ç¶ç¶ãããã¤ãã¦ã¿ããã ãã©ãã«ã¬ã¤ãä»ã</div><div class="flex justify-between pt-3"><span class="text-xs tracking-wide text-gray-light">2022/08/06</span><span class="text-xs font-bold tracking-widest underline uppercase text-primary-base">â¶ï¸Â view more</span></div></div></a><a class="items-center cursor-pointer grid grid-cols-4 transition-shadow duration-500 ease-in-out hover:opacity-75" href="/blog/how-to-write-sentenses"><div class="relative col-span-1"><span style="box-sizing:border-box;display:block;overflow:hidden;width:initial;height:initial;background:none;opacity:1;border:0;margin:0;padding:0;position:relative"><span style="box-sizing:border-box;display:block;width:initial;height:initial;background:none;opacity:1;border:0;margin:0;padding:0;padding-top:100%"></span><img alt="ã©ã¤ã¿ã¼ç´ä¼ï¼èªã¿ãããã«å·®ãã¤ããæç« æ¿ç¸®è¡" src="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7" decoding="async" data-nimg="responsive" style="position:absolute;top:0;left:0;bottom:0;right:0;box-sizing:border-box;padding:0;border:none;margin:auto;display:block;width:0;height:0;min-width:100%;max-width:100%;min-height:100%;max-height:100%;object-fit:cover"/>
8<noscript><img alt="ã©ã¤ã¿ã¼ç´ä¼ï¼èªã¿ãããã«å·®ãã¤ããæç« æ¿ç¸®è¡" sizes="100vw" srcSet="/_next/image?url=%2Fimg%2Fpages%2Fblog%2Fhow-to-write-sentenses%2Fogp.png&w=340&q=95 340w, /_next/image?url=%2Fimg%2Fpages%2Fblog%2Fhow-to-write-sentenses%2Fogp.png&w=640&q=95 640w, /_next/image?url=%2Fimg%2Fpages%2Fblog%2Fhow-to-write-sentenses%2Fogp.png&w=768&q=95 768w, /_next/image?url=%2Fimg%2Fpages%2Fblog%2Fhow-to-write-sentenses%2Fogp.png&w=1024&q=95 1024w, /_next/image?url=%2Fimg%2Fpages%2Fblog%2Fhow-to-write-sentenses%2Fogp.png&w=1280&q=95 1280w, /_next/image?url=%2Fimg%2Fpages%2Fblog%2Fhow-to-write-sentenses%2Fogp.png&w=1440&q=95 1440w, /_next/image?url=%2Fimg%2Fpages%2Fblog%2Fhow-to-write-sentenses%2Fogp.png&w=1980&q=95 1980w" src="/_next/image?url=%2Fimg%2Fpages%2Fblog%2Fhow-to-write-sentenses%2Fogp.png&w=1980&q=95" decoding="async" data-nimg="responsive" style="position:absolute;top:0;left:0;bottom:0;right:0;box-sizing:border-box;padding:0;border:none;margin:auto;display:block;width:0;height:0;min-width:100%;max-width:100%;min-height:100%;max-height:100%;object-fit:cover" loading="lazy"/></noscript></span></div><div class="w-full px-3 col-span-3"><div class="text-sm font-bold tracking-wide sm:text-base line-clamp-3 lg:line-clamp-2 2xl:line-clamp-3 leading-5">ã©ã¤ã¿ã¼ç´ä¼ï¼èªã¿ãããã«å·®ãã¤ããæç« æ¿ç¸®è¡</div><div class="flex justify-between pt-3"><span class="text-xs tracking-wide text-gray-light">2022/07/28</span><span class="text-xs font-bold tracking-widest underline uppercase text-primary-base">â¶ï¸Â view more</span></div></div></a><a class="items-center cursor-pointer grid grid-cols-4 transition-shadow duration-500 ease-in-out hover:opacity-75" href="/blog/educational-design-for-groups"><div class="relative col-span-1"><span style="box-sizing:border-box;display:block;overflow:hidden;width:initial;height:initial;background:none;opacity:1;border:0;margin:0;padding:0;position:relative"><span style="box-sizing:border-box;display:block;width:initial;height:initial;background:none;opacity:1;border:0;margin:0;padding:0;padding-top:100%"></span><img alt="äºã®ä¸ã®èã人ã®åãå¼ãåºãã群ã«å¯¾ããæè²ã®è¨è¨è¡ ~ å°éå®¶ãæãã¦çºè¨ã§ããªãããããªä¸ã®ä¸ã« ~" src="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7" decoding="async" data-nimg="responsive" style="position:absolute;top:0;left:0;bottom:0;right:0;box-sizing:border-box;padding:0;border:none;margin:auto;display:block;width:0;height:0;min-width:100%;max-width:100%;min-height:100%;max-height:100%;object-fit:cover"/><noscript><img alt="äºã®ä¸ã®èã人ã®åãå¼ãåºãã群ã«å¯¾ããæè²ã®è¨è¨è¡ ~ å°éå®¶ãæãã¦çºè¨ã§ããªãããããªä¸ã®ä¸ã« ~" sizes="100vw" srcSet="/_next/image?url=%2Fimg%2Fpages%2Fblog%2Feducational-design-for-groups%2Fogp.png&w=340&q=95 340w, /_next/image?url=%2Fimg%2Fpages%2Fblog%2Feducational-design-for-groups%2Fogp.png&w=640&q=95 640w, /_next/image?url=%2Fimg%2Fpages%2Fblog%2Feducational-design-for-groups%2Fogp.png&w=768&q=95 768w, /_next/image?url=%2Fimg%2Fpages%2Fblog%2Feducational-design-for-groups%2Fogp.png&w=1024&q=95 1024w, /_next/image?url=%2Fimg%2Fpages%2Fblog%2Feducational-design-for-groups%2Fogp.png&w=1280&q=95 1280w, /_next/image?url=%2Fimg%2Fpages%2Fblog%2Feducational-design-for-groups%2Fogp.png&w=1440&q=95 1440w, /_next/image?url=%2Fimg%2Fpages%2Fblog%2Feducational-design-for-groups%2Fogp.png&w=1980&q=95 1980w" src="/_next/image?url=%2Fimg%2Fpages%2Fblog%2Feducational-design-for-groups%2Fogp.png&w=1980&q=95" decoding="async" data-nimg="responsive" style="position:absolute;top:0;left:0;bottom:0;right:0;box-sizing:border-box;padding:0;border:none;margin:auto;display:block;width:0;height:0;min-width:100%;max-width:100%;min-height:100%;max-height:100%;object-fit:cover" loading="lazy"/></noscript></span></div><div class="w-full px-3 col-span-3"><div class="text-sm font-bold tracking-wide sm:text-base line-clamp-3 lg:line-clamp-2 2xl:line-clamp-3 leading-5">äºã®ä¸ã®èã人ã®åãå¼ãåºãã群ã«å¯¾ããæè²ã®è¨è¨è¡ ~ å°éå®¶ãæãã¦çºè¨ã§ããªãããããªä¸ã®ä¸ã« ~</div><div class="flex justify-between pt-3"><span class="text-xs tracking-wide text-gray-light">2022/07/28</span><span class="text-xs font-bold tracking-widest underline uppercase text-primary-base">â¶ï¸Â view more</span></div></div></a><a class="items-center cursor-pointer grid grid-cols-4 transition-shadow duration-500 ease-in-out hover:opacity-75" href="/blog/2022072704"><div class="relative col-span-1"><span style="box-sizing:border-box;display:block;overflow:hidden;width:initial;height:initial;background:none;opacity:1;border:0;margin:0;padding:0;position:relative"><span style="box-sizing:border-box;display:block;width:initial;height:initial;background:none;opacity:1;border:0;margin:0;padding:0;padding-top:100%"></span><img alt="æ³åãã¦ãããããã¯ããç°¡åã«ç¤¾é·ã«ãªã£ã話" src="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7" decoding="async" data-nimg="responsive" style="position:absolute;top:0;left:0;bottom:0;right:0;box-sizing:border-box;padding:0;border:none;margin:auto;display:block;width:0;height:0;min-width:100%;max-width:100%;min-height:100%;max-height:100%;object-fit:cover"/>
8<noscript><img alt="æ³åãã¦ãããããã¯ããç°¡åã«ç¤¾é·ã«ãªã£ã話" sizes="100vw" srcSet="/_next/image?url=%2Fimg%2Fpages%2Fblog%2F2022072704%2Fogp.png&w=340&q=95 340w, /_next/image?url=%2Fimg%2Fpages%2Fblog%2F2022072704%2Fogp.png&w=640&q=95 640w, /_next/image?url=%2Fimg%2Fpages%2Fblog%2F2022072704%2Fogp.png&w=768&q=95 768w, /_next/image?url=%2Fimg%2Fpages%2Fblog%2F2022072704%2Fogp.png&w=1024&q=95 1024w, /_next/image?url=%2Fimg%2Fpages%2Fblog%2F2022072704%2Fogp.png&w=1280&q=95 1280w, /_next/image?url=%2Fimg%2Fpages%2Fblog%2F2022072704%2Fogp.png&w=1440&q=95 1440w, /_next/image?url=%2Fimg%2Fpages%2Fblog%2F2022072704%2Fogp.png&w=1980&q=95 1980w" src="/_next/image?url=%2Fimg%2Fpages%2Fblog%2F2022072704%2Fogp.png&w=1980&q=95" decoding="async" data-nimg="responsive" style="position:absolute;top:0;left:0;bottom:0;right:0;box-sizing:border-box;padding:0;border:none;margin:auto;display:block;width:0;height:0;min-width:100%;max-width:100%;min-height:100%;max-height:100%;object-fit:cover" loading="lazy"/></noscript></span></div><div class="w-full px-3 col-span-3"><div class="text-sm font-bold tracking-wide sm:text-base line-clamp-3 lg:line-clamp-2 2xl:line-clamp-3 leading-5">æ³åãã¦ãããããã¯ããç°¡åã«ç¤¾é·ã«ãªã£ã話</div><div class="flex justify-between pt-3"><span class="text-xs tracking-wide text-gray-light">2022/07/27</span><span class="text-xs font-bold tracking-widest underline uppercase text-primary-base">â¶ï¸Â view more</span></div></div></a></div></div></aside></div></div></div></div><div class="pt-6 pb-24 text-white xl:py-12 bg-footer"><div class="max-w-sm mx-auto md:max-w-lg"><div class="flex justify-center text-xs text-center xl:text-sm"><p class="px-2 py-2 md:px-4 hover:opacity-50"><a href="https://www.kikagaku.co.jp">éå¶ä¼ç¤¾</a></p><p class="py-2">|</p><p class="px-2 py-2 md:px-4 hover:opacity-50"><a href="/privacypolicy">ãã©ã¤ãã·ã¼ããªã·ã¼</a></p><p class="py-2">|</p><p class="px-2 py-2 md:px-4 hover:opacity-50"><a href="https://share.hsforms.com/1TnFZX_WgSxaaKJzPZuCY7A3zqie">ãåãåãã</a></p></div><div class="w-16 py-4 mx-auto md:py-8 xl:w-24 hover:opacity-75"><a href="/"><span style="box-sizing:border-box;display:block;overflow:hidden;width:initial;height:initial;background:none;opacity:1;border:0;margin:0;padding:0;position:relative"><span style="box-sizing:border-box;display:block;width:initial;height:initial;background:none;opacity:1;border:0;margin:0;padding:0;padding-top:120%"></span><img alt="fwywd white logo" sizes="100vw" srcSet="/_next/image?url=%2Fimg%2Fcommon%2Flogo_white.png&w=340&q=75 340w, /_next/image?url=%2Fimg%2Fcommon%2Flogo_white.png&w=640&q=75 640w, /_next/image?url=%2Fimg%2Fcommon%2Flogo_white.png&w=768&q=75 768w, /_next/image?url=%2Fimg%2Fcommon%2Flogo_white.png&w=1024&q=75 1024w, /_next/image?url=%2Fimg%2Fcommon%2Flogo_white.png&w=1280&q=75 1280w, /_next/image?url=%2Fimg%2Fcommon%2Flogo_white.png&w=1440&q=75 1440w, /_next/image?url=%2Fimg%2Fcommon%2Flogo_white.png&w=1980&q=75 1980w" src="/_next/image?url=%2Fimg%2Fcommon%2Flogo_white.png&w=1980&q=75" decoding="async" data-nimg="responsive" style="position:absolute;top:0;left:0;bottom:0;right:0;box-sizing:border-box;padding:0;border:none;margin:auto;display:block;width:0;height:0;min-width:100%;max-width:100%;min-height:100%;max-height:100%"/></span></a></div><div class="flex justify-center gap-x-3"><a href="https://twitter.com/intent/tweet?url=https://fwywd.com/tech/tags/instant%2520search&hashtags=fwywd,ãã«ã¬ã¯" target="_blank" class="text-white fill-current transition-all duration-250 hover:opacity-75" rel="noopener noreferrer"><svg id="Layer_1" enable-background="new 0 0 100 100" height="20" viewBox="0 0 100 100" width="20" xmlns="http://www.w3.org/2000/svg"><path id="_x30_4.Twitter" d="m89.9 25.2c-3 1.3-6.1 2.2-9.4 2.6 3.4-2 6-5.2 7.2-9.1-3.2 1.9-6.7 3.2-10.4 4-3-3.2-7.3-5.2-12-5.2-9.1 0-16.4 7.4-16.4 16.4 0 1.3.1 2.5.4 3.7-13.6-.6-25.6-7.2-33.7-17.1-5.8 10.4.7 19 5 21.9-2.6 0-5.2-.8-7.4-2 0 8.1 5.7 14.8 13.1 16.3-1.6.5-5.2.8-7.4.3 2.1 6.5 8.2 11.3 15.3 11.4-5.6 4.4-13.8 7.9-24.3 6.8 7.3 4.7 15.9 7.4 25.2 7.4 30.2 0 46.6-25 46.6-46.6 0-.7 0-1.4-.1-2.1 3.4-2.5 6.2-5.4 8.3-8.7z"></path></svg></a><a href="https://www.facebook.com/sharer/sharer.php?u=https://fwywd.com/tech/tags/instant%2520search" target="_blank" class="text-white fill-current transition-all duration-250 hover:opacity-75" rel="noopener noreferrer"><svg id="Layer_1" height="20" viewBox="0 0 512 512" width="20" xmlns="http://www.w3.org/2000/svg" data-name="Layer 1"><path d="m255.1824 7.7579q69.23.79 125.0851 34.0293a249.7343 249.7343 0 0 1 88.8909 89.4346q33.0371 56.1914 33.8244 125.8428-1.962 95.3-60.1167 162.791c-38.77 44.9941-88.425 72.83-139.8274 83.5009v-178.1275h48.5969l10.99-70h-73.5869v-45.8481a39.844 39.844 0 0 1 8.4739-26.3232q8.8275-11.2527 31.0895-11.8287h44.4366v-61.3184q-.9563-.3077-18.15-2.4336a360.7434 360.7434 0 0 0 -39.16-2.4336q-44.4328.205-70.2811 25.0674-25.8488 24.8554-26.4085 71.9209v53.1973h-56v70h56v178.1275c-63.1149-10.6709-112.77-38.5068-151.54-83.5009s-58.808-99.2578-60.1162-162.791q.7851-69.6546 33.8236-125.8428a249.7389 249.7389 0 0 1 88.8917-89.4346q55.8534-33.2329 125.0842-34.0293z" fill-rule="evenodd"></path></svg></a></div><div class="flex justify-center"><p class="mt-6 text-xs uppercase xl:text-lg">Â©ï¸ 2021 kikagaku</p></div></div></div></div><span></span></div>
8<script id="__NEXT_DATA__" type="application/json">{"props":{"pageProps":{"tags":[{"name":"New","path":"/tech/tags/new"},{"name":"Popular","path":"/tech/tags/popular"},{"name":"Tailwind CSS","path":"/tech/tags/tailwind%20css"},{"name":"Tailwind UI","path":"/tech/tags/tailwind%20ui"},{"name":"Syntax","path":"/tech/tags/syntax"},{"name":"Markdoc","path":"/tech/tags/markdoc"},{"name":"Markdown","path":"/tech/tags/markdown"},{"name":"Azure","path":"/tech/tags/azure"},{"name":"Azure App Service","path":"/tech/tags/azure%20app%20service"},{"name":"Express.js","path":"/tech/tags/express.js"},{"name":"NestJS","path":"/tech/tags/nestjs"},{"name":"Next.js","path":"/tech/tags/next.js"},{"name":"ãã¼ã±ãã£ã³ã°","path":"/tech/tags/%E3%83%9E%E3%83%BC%E3%82%B1%E3%83%86%E3%82%A3%E3%83%B3%E3%82%B0"},{"name":"fwywd","path":"/tech/tags/fwywd"},{"name":"èµ·æ¥","path":"/tech/tags/%E8%B5%B7%E6%A5%AD"},{"name":"群ã«å¯¾ããæè²","path":"/tech/tags/%E7%BE%A4%E3%81%AB%E5%AF%BE%E3%81%99%E3%82%8B%E6%95%99%E8%82%B2"},{"name":"äºã®ä¸ã®è","path":"/tech/tags/%E4%BA%95%E3%81%AE%E4%B8%AD%E3%81%AE%E8%9B%99"},{"name":"åäººäºæ¥ä¸»","path":"/tech/tags/%E5%80%8B%E4%BA%BA%E4%BA%8B%E6%A5%AD%E4%B8%BB"},{"name":"å¦ç¿","path":"/tech/tags/%E5%AD%A6%E7%BF%92"},{"name":"ããã°ã©ãã³ã°","path":"/tech/tags/%E3%83%97%E3%83%AD%E3%82%B0%E3%83%A9%E3%83%9F%E3%83%B3%E3%82%B0"},{"name":"ã¹ã¿ã¼ãã¢ãã","path":"/tech/tags/%E3%82%B9%E3%82%BF%E3%83%BC%E3%83%88%E3%82%A2%E3%83%83%E3%83%97"},{"name":"ããã","path":"/tech/tags/%E3%83%94%E3%83%83%E3%83%81"},{"name":"æè³","path":"/tech/tags/%E6%8A%95%E8%B3%87"},{"name":"å¦ã³æ¹","path":"/tech/tags/%E5%AD%A6%E3%81%B3%E6%96%B9"},{"name":"èµ·æ¥å®¶","path":"/tech/tags/%E8%B5%B7%E6%A5%AD%E5%AE%B6"},{"name":"çµç¹ä½ã","path":"/tech/tags/%E7%B5%84%E7%B9%94%E4%BD%9C%E3%82%8A"},{"name":"ã«ã¼ã«","path":"/tech/tags/%E3%83%AB%E3%83%BC%E3%83%AB"},{"name":"ãã¶ã¤ã³","path":"/tech/tags/%E3%83%87%E3%82%B6%E3%82%A4%E3%83%B3"},{"name":"ã¢ã¤ãã¢","path":"/tech/tags/%E3%82%A2%E3%82%A4%E3%83%87%E3%82%A2"},{"name":"STUDIO","path":"/tech/tags/studio"},{"name":"æè¡é¸å®","path":"/tech/tags/%E6%8A%80%E8%A1%93%E9%81%B8%E5%AE%9A"},{"name":"ã¨ã³ã¸ãã¢","path":"/tech/tags/%E3%82%A8%E3%83%B3%E3%82%B8%E3%83%8B%E3%82%A2"},{"name":"ãã¸ãã¹","path":"/tech/tags/%E3%83%93%E3%82%B8%E3%83%8D%E3%82%B9"},{"name":"LPO","path":"/tech/tags/lpo"},{"name":"解説è¨äº","path":"/tech/tags/%E8%A7%A3%E8%AA%AC%E8%A8%98%E4%BA%8B"},{"name":"Google åºå","path":"/tech/tags/google%20%E5%BA%83%E5%91%8A"},{"name":"Google Tag Manager","path":"/tech/tags/google%20tag%20manager"},{"name":"æææ±ºå®","path":"/tech/tags/%E6%84%8F%E6%80%9D%E6%B1%BA%E5%AE%9A"},{"name":"è¨è¨","path":"/tech/tags/%E8%A8%AD%E8%A8%88"},{"name":"ã½ããã¦ã§ã¢","path":"/tech/tags/%E3%82%BD%E3%83%95%E3%83%88%E3%82%A6%E3%82%A7%E3%82%A2"},{"name":"仿§æ¸","path":"/tech/tags/%E4%BB%95%E6%A7%98%E6%9B%B8"},{"name":"ãã¯ããã¸ã¼","path":"/tech/tags/%E3%83%86%E3%82%AF%E3%83%8E%E3%83%AD%E3%82%B8%E3%83%BC"},{"name":"æè¡","path":"/tech/tags/%E6%8A%80%E8%A1%93"},{"name":"Podcast","path":"/tech/tags/podcast"},{"name":"ã»ã¼ã«ã¹","path":"/tech/tags/%E3%82%BB%E3%83%BC%E3%83%AB%E3%82%B9"},{"name":"React","path":"/tech/tags/react"},{"name":"AADB2C","path":"/tech/tags/aadb2c"},{"name":"èªè¨¼ã»èªå¯","path":"/tech/tags/%E8%AA%8D%E8%A8%BC%E3%83%BB%E8%AA%8D%E5%8F%AF"},{"name":"IDaaS","path":"/tech/tags/idaas"},{"name":"èªè¨¼","path":"/tech/tags/%E8%AA%8D%E8%A8%BC"},{"name":"èªå¯","path":"/tech/tags/%E8%AA%8D%E5%8F%AF"},{"name":"嵿¥è
","path":"/tech/tags/%E5%89%B5%E6%A5%AD%E8%80%85"},{"name":"çµå¶è
","path":"/tech/tags/%E7%B5%8C%E5%96%B6%E8%80%85"},{"name":"ãã£ãªã¢","path":"/tech/tags/%E3%82%AD%E3%83%A3%E3%83%AA%E3%82%A2"},{"name":"ã¢ã¤ãã£ã¢","path":"/tech/tags/%E3%82%A2%E3%82%A4%E3%83%87%E3%82%A3%E3%82%A2"},{"name":"åºãæ¹","path":"/tech/tags/%E5%87%BA%E3%81%97%E6%96%B9"},{"name":"åä½é¨","path":"/tech/tags/%E5%8E%9F%E4%BD%93%E9%A8%93"},{"name":"ãããã","path":"/tech/tags/%E3%81%8A%E3%81%99%E3%81%99%E3%82%81"},{"name":"ã¢ã³ãã¬ãã¬ãã¼","path":"/tech/tags/%E3%82%A2%E3%83%B3%E3%83%88%E3%83%AC%E3%83%97%E3%83%AC%E3%83%8A%E3%83%BC"},{"name":"è±ç¥è","path":"/tech/tags/%E8%B1%86%E7%9F%A5%E8%AD%98"},{"name":"ç¨èª","path":"/tech/tags/%E7%94%A8%E8%AA%9E"},{"name":"è±èª","path":"/tech/tags/%E8%8B%B1%E8%AA%9E"},{"name":"æè²","path":"/tech/tags/%E6%95%99%E8%82%B2"},{"name":"社ä¼èª²é¡","path":"/tech/tags/%E7%A4%BE%E4%BC%9A%E8%AA%B2%E9%A1%8C"},{"name":"æ¦ç¥","path":"/tech/tags/%E6%88%A6%E7%95%A5"},{"name":"è³æ¬ä¸»ç¾©","path":"/tech/tags/%E8%B3%87%E6%9C%AC%E4%B8%BB%E7%BE%A9"},{"name":"æ¸ç±","path":"/tech/tags/%E6%9B%B8%E7%B1%8D"},{"name":"æè","path":"/tech/tags/%E6%80%9D%E8%80%83"},{"name":"淡路島","path":"/tech/tags/%E6%B7%A1%E8%B7%AF%E5%B3%B6"},{"name":"å°æ¹åµç","path":"/tech/tags/%E5%9C%B0%E6%96%B9%E5%89%B5%E7%94%9F"},{"name":"SDGs","path":"/tech/tags/sdgs"},{"name":"ãã½ãã°ã«ã¼ã","path":"/tech/tags/%E3%83%91%E3%82%BD%E3%83%8A%E3%82%B0%E3%83%AB%E3%83%BC%E3%83%97"}
8,{"name":"Chakra UI","path":"/tech/tags/chakra%20ui"},{"name":"Stylelint","path":"/tech/tags/stylelint"},{"name":"Prettier","path":"/tech/tags/prettier"},{"name":"TypeScript","path":"/tech/tags/typescript"},{"name":"ESLint","path":"/tech/tags/eslint"},{"name":"RSS","path":"/tech/tags/rss"},{"name":"feed","path":"/tech/tags/feed"},{"name":"Google Analytics","path":"/tech/tags/google%20analytics"},{"name":"ãã¹ãé§åéçº","path":"/tech/tags/%E3%83%86%E3%82%B9%E3%83%88%E9%A7%86%E5%8B%95%E9%96%8B%E7%99%BA"},{"name":"Jest","path":"/tech/tags/jest"},{"name":"Node.js","path":"/tech/tags/node.js"},{"name":"Chart.js","path":"/tech/tags/chart.js"},{"name":"react-chartjs-2","path":"/tech/tags/react-chartjs-2"},{"name":"Microsoft","path":"/tech/tags/microsoft"},{"name":"Microsoft Azure","path":"/tech/tags/microsoft%20azure"},{"name":"Azure Functions","path":"/tech/tags/azure%20functions"},{"name":"textlint","path":"/tech/tags/textlint"},{"name":"Lint","path":"/tech/tags/lint"},{"name":"æç« ","path":"/tech/tags/%E6%96%87%E7%AB%A0"},{"name":"æ¬å¼§","path":"/tech/tags/%E6%8B%AC%E5%BC%A7"},{"name":"å¥èªç¹","path":"/tech/tags/%E5%8F%A5%E8%AA%AD%E7%82%B9"},{"name":"GitHub","path":"/tech/tags/github"},{"name":"Git","path":"/tech/tags/git"},{"name":"husky","path":"/tech/tags/husky"},{"name":"lint-staged","path":"/tech/tags/lint-staged"},{"name":"Testing","path":"/tech/tags/testing"},{"name":"GitHub Actions","path":"/tech/tags/github%20actions"},{"name":"ãµã¤ãããã","path":"/tech/tags/%E3%82%B5%E3%82%A4%E3%83%88%E3%83%9E%E3%83%83%E3%83%97"},{"name":"SEO","path":"/tech/tags/seo"},{"name":"algolia","path":"/tech/tags/algolia"},{"name":"Instant Search","path":"/tech/tags/instant%20search"},{"name":"Headless UI","path":"/tech/tags/headless%20ui"},{"name":"ç°å¢å¤æ°","path":"/tech/tags/%E7%92%B0%E5%A2%83%E5%A4%89%E6%95%B0"},{"name":"env ãã¡ã¤ã«","path":"/tech/tags/env%20%E3%83%95%E3%82%A1%E3%82%A4%E3%83%AB"},{"name":"Active Directory B2C","path":"/tech/tags/active%20directory%20b2c"},{"name":"Auth","path":"/tech/tags/auth"},{"name":"JavaScript","path":"/tech/tags/javascript"},{"name":"ã¨ã³ã³ã¼ã","path":"/tech/tags/%E3%82%A8%E3%83%B3%E3%82%B3%E3%83%BC%E3%83%89"},{"name":"Git Flow","path":"/tech/tags/git%20flow"},{"name":"ãã©ã³ãã¢ãã«","path":"/tech/tags/%E3%83%96%E3%83%A9%E3%83%B3%E3%83%81%E3%83%A2%E3%83%87%E3%83%AB"},{"name":"VSCode","path":"/tech/tags/vscode"},{"name":"ããã©ã¼ãã³ã¹","path":"/tech/tags/%E3%83%91%E3%83%95%E3%82%A9%E3%83%BC%E3%83%9E%E3%83%B3%E3%82%B9"},{"name":"React.memo","path":"/tech/tags/react.memo"},{"name":"react-syntax-highlighter","path":"/tech/tags/react-syntax-highlighter"},{"name":"Atom","path":"/tech/tags/atom"},{"name":"next-sitemap","path":"/tech/tags/next-sitemap"},{"name":"react-scroll","path":"/tech/tags/react-scroll"},{"name":"ATOM","path":"/tech/tags/atom"},{"name":"Slack","path":"/tech/tags/slack"},{"name":"Vue.js","path":"/tech/tags/vue.js"},{"name":"Nuxt.js","path":"/tech/tags/nuxt.js"},{"name":"éçºä½å¶","path":"/tech/tags/%E9%96%8B%E7%99%BA%E4%BD%93%E5%88%B6"},{"name":"æ¡ç¨è©¦é¨","path":"/tech/tags/%E6%8E%A1%E7%94%A8%E8%A9%A6%E9%A8%93"},{"name":"æ°è¦äºæ¥","path":"/tech/tags/%E6%96%B0%E8%A6%8F%E4%BA%8B%E6%A5%AD"},{"name":"React Testing Library","path":"/tech/tags/react%20testing%20library"},{"name":"Storybook","path":"/tech/tags/storybook"},{"name":"CMS","path":"/tech/tags/cms"},{"name":"ã³ã³ã»ãã","path":"/tech/tags/%E3%82%B3%E3%83%B3%E3%82%BB%E3%83%97%E3%83%88"},{"name":"Web","path":"/tech/tags/web"},{"name":"ãã©ã¤ãã·ã¼ããªã·ã¼","path":"/tech/tags/%E3%83%97%E3%83%A9%E3%82%A4%E3%83%90%E3%82%B7%E3%83%BC%E3%83%9D%E3%83%AA%E3%82%B7%E3%83%BC"},{"name":"æè¡ç´¹ä»","path":"/tech/tags/%E6%8A%80%E8%A1%93%E7%B4%B9%E4%BB%8B"}],"tagName":"Instant Search","tagPosts":[{"id":"/tech/next-algolia","data":{"title":"React / Next.js ã« algolia ãå°å
¥ãã¦æ¤ç´¢æ©è½ã追å ããã","date":"2021-06-01T20:00:00.000+0900","img_path":"/img/pages/tech/next-algolia/ogp.png","img_alt":"React / Next.js ã« algolia ãå°å
¥ãã¦æ¤ç´¢æ©è½ã追å ããã","description":"React ã Next.js ãæ¡ç¨ã㦠Web ã¢ããªã±ã¼ã·ã§ã³ãéçºãã¦ããéã«å¿
ãæ¬²ãããªãæ¤ç´¢æ©è½ã§ãããèªåã§ã®å®è£
ã¯æå¤ã¨å°é£ã§ãã ãã®ä¸æ¹ã§ãalgolia ã Elastic Search ãç¨ãããã¨ã§æ¯è¼çç¨æã«å®è£
ãå¯è½ãã¤ããä¸å®éã¾ã§ã
8¯ç¡æã§ä½¿ç¨ã§ãããããåæã®ãããã¯ãã¸ã®å°å
¥ããªã¹ã¹ã¡ã§ãã ä»å㯠fwywdï¼ãã¥ã¼ãï¼ã®ãã¼ã¸ã¸ã®æ¤ç´¢æ©è½ã追å ããå
·ä½çãªæé ã解説ãã¾ãã","tags":["React","Next.js","TypeScript","algolia","Instant Search","Headless UI","Tailwind CSS"],"prev_title":"Next.js ã«ãããç°å¢å¤æ° (env) ã®åºæ¬çãªè¨å®æ¹æ³","prev_link":"/tech/next-ga-pv","next_title":"Web éçºè
ã®ããã® GitHub Actions å
¥é","next_link":"/tech/introduction-to-github-actions","author":"yoshizaki"},"content":"\n## ã¯ããã«\n\n### æ¦è¦\n\n**React** ã **Next.js** ãæ¡ç¨ã㦠Web ã¢ããªã±ã¼ã·ã§ã³ãéçºãã¦ããéã«å¿
ãæ¬²ãããªã**æ¤ç´¢æ©è½**ã§ãããèªåã§ã®å®è£
ã¯æå¤ã¨å°é£ã§ãã \nãã®ä¸æ¹ã§ã**algolia** ã **Elastic Search** ãç¨ãããã¨ã§æ¯è¼çç¨æã«å®è£
ãå¯è½ãã¤ããä¸å®éã¾ã§ã¯ç¡æã§ä½¿ç¨ã§ãããããåæã®ãããã¯ãã¸ã®å°å
¥ããªã¹ã¹ã¡ã§ãã\nä»å㯠[**fwywdï¼ãã¥ã¼ãï¼**](/) ã®ãã¼ã¸ã¸ã®æ¤ç´¢æ©è½ã追å ããå
·ä½çãªæé ã解説ãã¾ãã\n\n### ææç©\n\nä»åã¯ä»¥ä¸ã®ããã« [**fwywdï¼ãã¥ã¼ãï¼**](/) å
ã®è¨äºãæ¤ç´¢ãã¦é·ç§»ã§ããæ©è½ãå®è£
ãã¦ããã¾ãã\n\n\n\n### ãã¼ã¸ã§ã³æ
å ±\n\n- Node.jsï¼15.11.0\n- Reactï¼17.0.2\n- Next.jsï¼10.2.2\n- remove-markdownï¼0.3.0\n- algoliasearchï¼4.0.0\n- react-instantsearch-domï¼6.10.0\n- instantsearch.cssï¼6.10.0\n- @algolia/client-searchï¼4.9.1\n- @headlessui/reactï¼1.2.0\n\n## algolia\n\n### algolia ã¨ã¯ï¼\n\n\nåºå
¸ï¼[algolia å
¬å¼ãã¼ã¸](https://www.algolia.com/)\n\n[**algolia**](https://www.algolia.com/) ã¯ç°¡åã«æ¤ç´¢æ©è½ãå®è£
ãããã¨ãã§ãããµã¼ãã¹ã§ãã \n[**Contentful**](https://www.contentful.com/) ã [**microCMS**](https://microcms.io/) ã¨ãã£ã**ãããã¬ã¹ CMS** ã¨ãç¸æ§ãè¯ãã**æè»½ãªããã°ãµã¼ãã¹ã§ algolia ãå©ç¨ããã¦ããå ´é¢**ãå¤ãè¦ããã¾ãã\n\nåºæ¬çãªæ¤ç´¢æ©è½ä»¥å¤ã«ãã**AI ã«ãããã¼ã½ãã©ã¤ãºæ©è½**ãªã©ãç¨æããã¦ããããã§ãã\n\n\n\néçºè
ç®ç·ã§ã¯ã**ããã¥ã¡ã³ããè±å¯ã«ç¨æããã¦ãããã¨**ã¨ãJavaScript/TypeScript 以å¤ã®ããã°ã©ãã³ã°è¨èªã§ãå©ç¨ã§ãããã**æ±ç¨æ§ãé«ããã¨**ã®ï¼ç¹ãé
åçã ã¨æãã¾ãã\n\n\n\n### algolia 以å¤ã®ãµã¼ãã¹ã¨æ¯è¼\n\næ¤ç´¢ç³»ã®ãµã¼ãã¹ã¯ä»ã«ãããã¾ãããä»å algolia ãæ¡ç¨ããä¸çªã®çç±ã¯ [**Tailwind CSS ã®å
¬å¼ãã¼ã¸**](https://tailwindcss.com/) ã§æ¡ç¨ããã¦ããããã§ãã\n\n\n\nalgolia ã®æ¯è¼å¯¾è±¡ã¨ãã¦ã¯ [**Elasticsearch**](https://www.elastic.co/jp/elasticsearch/) ãããããã§ãã \nãããã®ãµã¼ãã¹ãæ¯è¼ãã¦ããè¨äºãããå
容ãæç²ããã¨ä»¥ä¸ã®ããã«é¸ã¶ã¨è¯ãããã§ãã\n\n- æ¤ç´¢å¯¾è±¡æ°ãå°ãªãæè»½ã«å®è£
ãããæã¯ algoria\n- æ¤ç´¢ã®è³ªãéè¦ãããå ´å㯠Elasticsearch\n\n\u003e Algolia ã¯éç¨ã³ã¹ããä½ããæ¥æ¬èªã®æ¤ç´¢ãå種é«åº¦ãªæ©è½ã«ãããªã対å¿ãã¦ãããªã¨æãã¾ããã æ¤ç´¢å¯¾è±¡æ°ãããã»ã©å¤ããªãå ´åããæ¤ç´¢ã¯ããã¾ã§è£è¶³çãªæ©è½ã¨ãããã¨ã§ããã° Algolia ã§ååã ãªã¨æãã¾ãã(è¥å¹²å¤æ®µã¯é«ãã¨æãã¾ãã)ã \n\u003e 䏿¹ã§ãããæ¤ç´¢ã®è³ªãéè¦ãããã»å¹
åºãè¦ä»¶ã«å¯¾å¿ãããã»æ¤ç´¢æ©è½ã®åªå£ããµã¼ãã¹ã®ç«¶ååªä½æ§ã«ãªãããã¨ãããã¨ã§ããã°èªç±åº¦ã®é«ã Elasticsearch ã使ãã®ãè¯ãããã¨æãã¾ããã\n\nå¼ç¨ï¼[Elasticsearch 㨠Algolia ã®æ¯è¼æ¤è¨](https://saitoxu.io/2
8020/03/elasticsearch-and-algolia)\n\nä»åã¯**ã¾ãæè»½ã«æ¤ç´¢æ©è½ãå®è£
ããã**ã¨ããè¦ä»¶ã§ãã®ã§ algolia ã®æ¹ãè¯ãããã§ãã\n\nã¾ããå°æ¥çãªè©±ããã¦ããã¨ã[**fwywdï¼ãã¥ã¼ãï¼**](/) ã§ã¯ algolia ãã [**Azure Cognitive Search**](https://azure.microsoft.com/ja-jp/services/search/) ã¸æ¤ç´¢æ©è½ãç§»è¡ãã¦ããäºå®ã§ãã \næ¤ç´¢ã§ã¯**ã¤ã³ããã¯ã¹ä»ã**ã¨ããæ¤ç´¢å¯¾è±¡ã®ãã¼ã¿ã渡ãéç¨ãããã**fwywd** ã§ã¯ãã¼ã¿ãã¼ã¹ï¼**Azure Cosmos DB**ï¼ãå«ããããã¯ã¨ã³ãã **Microsoft Azure** ã§æ§ç¯ãã¦ããã¾ãã \n**Cosmos DB ããèªåçã«ã¤ã³ããã¯ã¹ä»ããã»ã¼å®è£
ãªãã§ GUI æä½**ã«ããè¡ããã¨ãã§ãã**ãã¼ã¿ä¿åããæ¤ç´¢ã¾ã§ã®é£æºãã·ã¼ã ã¬ã¹**ã§ãããã¨ã大ããªçç±ã§ãã\n\n\nåºå
¸ï¼[Azure Cognitive Search](https://azure.microsoft.com/ja-jp/services/search/)\n\nãã ããæåã®ãã¼ã¿ãã¼ã¹ã®è¨è¨ãªã©éçºã³ã¹ãããããã¾ãã®ã§ããã®ç§»è¡ãæé ã«ã¤ãã¦ã¯å¾ã
ã«ç´¹ä»ãã¦ããã¾ãã \n**Microsoft Azure** ã¨ãããã³ãã¼ããã¯ã¤ã³ãçã¾ãã¾ãã®ã§ããããã£ãã±ã¼ã¹ãé¿ãããæ¹ã¯ algolia ã使ãç¶ãããã¨ãæåã ã¨æãã¾ãã\n\nãã®ç¹ãä»ãå ããã¨ã以ä¸ã®æ¹ã« algolia ã¯ãªã¹ã¹ã¡ã§ãã\n\n- **æ¤ç´¢å¯¾è±¡æ°ãå°ãªãæè»½ã«å®è£
ãããæã¯ algoria** ã«å ãã¦\n - **ãã³ãã¼ããã¯ã¤ã³ããããªã**\n - **ãã¼ã¿ãã¼ã¹ã§ãªããã¼ã«ã«ãã¡ã¤ã«ããããã¬ã¹ CMS ãããã¼ã¿ãåå¾ãã¦ãã**\n\n### algolia ã使ãä¸ã§ç¥ã£ã¦ãããããã¨\n\nä¸çªæ°ã«ãªããã¨ã¯**è²»ç¨**ã§ãããã \nåæã®ãããã¯ããå人éçºã¬ãã«ã§ã¯ãããã**ç¡æ**ã§ä½¿ç¨ã§ããç¯å²å
ã ã¨æ³å®ãã¦ãã¾ãã\n\n\n\n**10 units** ã¨ããåä½ã¾ã§ç¡æã§ã**1unit ã 1000 åã®æ¤ç´¢ãªã¯ã¨ã¹ã**ã§ããããã**10,000 åã®æ¤ç´¢ã¾ã§ã¯ç¡æ**ã¨ãããã¨ã«ãªãã¾ãã \n**1 æ¥ã« 3000 åã®æ¤ç´¢ããã£ãã¨ãã¦ãç¡æ**ã®ç¯å²å
ã§ãã®ã§ãå人ã®ããã°ãå°è¦æ¨¡ãªãããã¯ãã§ã¯ä½è£ã§å¤§ä¸å¤«ã§ã
8¯ãªãã§ããããã\n\n\n\nããããå
ãè¦æ®ããæã«ã**æé 100 ä¸åï¼ç´ 33,000 å/æ¥ï¼ã®æ¤ç´¢ãªã¯ã¨ã¹ã**ããã£ãå ´åã®è²»ç¨ã確èªãã¦ã¿ãã¨ä¸è¨ã®éãã§**ç´ 93,000 åï¼3,100 å/æ¥ï¼** ã§ãã \næé 100 ä¸åã®æ¤ç´¢ããããããªãµã¼ãã¹ã¯ç¸å½å¤§è¦æ¨¡ãã¨äºæ³ããã¾ãã®ã§ãããã§ããã®ãããã®è²»ç¨æã ã¨ãããã¨ã¯**è¦æ¨¡ã大ãããªã£ã¦ã使ãç¶ãããããµã¼ãã¹**ã§ãããã¨ããããã¾ãã\n\nãã©ã³ã¯ Free, Standard, Premium ã¨ããã10 units ã¾ã§ã¯ Free, ãã以ä¸ã¯ Standard, Personalization ãªã©ã®æ©è½ã追å ãããå ´å㯠Premium ã¨é¸æã¯ç°¡åããã§ãã\n\n\n\nããããéä¸ã§ãã©ã³ã®ã¢ããã°ã¬ã¼ãããã¦ã³ã°ã¬ã¼ããã§ããã¨æããã¾ãã®ã§ã**ã¾ã㯠Free** ããå§ãã¦ããã¾ãããã\n\n### ã¦ã¼ã¶ã¼ç»é²\n\n[**algolia å
¬å¼ãã¼ã¸**](https://www.algolia.com/) ããå§ãã¾ãããã \nç¹ã«å¤ãã£ãæä½ã¯ããã¾ããã®ã§ã表示ãããæç¤ºã«ãããã£ã¦é²ãã¾ãããã\n\n\n\n\n\n\n\n## ã¤ã³ããã¯ã¹\n\n### åæ\n\n[**fwywdï¼ãã¥ã¼ãï¼**](/) ã§ã¯ç¾ç¶ãããã¬ã¹ CMS ã使ç¨ãããè¨äºã®ãã¼ã¿ã¯ãã¼ã«ã«ãã¡ã¤ã«ãåç
§ãã¦ãã¾ãã \nContentful ãªã©ã®ãããã¬ã¹ CMS ãå©ç¨ããå ´åã¯ä»¥ä¸ã®è¨äºãåèã«ããªããé²ããã¨è¯ãã§ãããã\n\nåèï¼[Contentful ã®è¨äºã Algolia ã®ã¤ã³ããã¯ã¹ã«ç»é²ãã](https://sunday-morning.app/posts/2021-03-27-generate-contentful-algolia-index)\n\n### ã¤ã³ããã¯ã¹ã®ä½æ\n\nalgolia ã®ãã¼ã¸ããã¤ã³ããã¯ã¹ã®ååãæå®ãã¦ä½æãã¾ãããã\n\n\n\nã¤ã³ããã¯ã¹ã®è¿½å ã«ã¯ããã¤ãã®æ¹æ³ããããJSON ãã¡ã¤ã«ãæåã§ã¢ãããã¼ããããã¨ãã§ãã¾ãã\n\n\n\nãã®ä»ã«ã API çµç±ã§ã®è¿½å ãã§ãããã¡ãã鏿ããã¨ãAPI ã§ã®è¿½å æé ã表示ããã¾ãã\n\n\n\nä»å¾**ãã«ãã®ã¿ã¤ãã³ã°ã§èªåçã«ã¤ã³ããã¯ã¹ã®è¿½å ãè¡ãéç¨**ãèãã㨠API çµç±ãæã¾ãããããä»åã¯ãã¡ãã鏿ãã¾ãã\n\n### ã¤ã³ããã¯ã¹ã®å½¢å¼\n\n使ããã¤ã³ããã¯ã¹ã¯ä»¥ä¸ã®ãããªå½¢å¼ãç®æ¨ã¨ãã¾ãã \nããã§ã`objectID` ã Algolia ç¹æã®ãã®ã§ããã以å¤ã¯å¿
è¦ã«å¿ãã¦å¤æ´ãããã¨ãã§ãã¾ãã\n\n```json\n{\n \"objectID\": \"è¨äºID\",\n \"url\": \"è¨äºURL\",\n \"title\": \"ã¿ã¤ãã«\",\n \"description\": \"è¨äºæ¦è¦\",\n \"content\": \"MarkdownãPlainTextã«å¤æããè¨äºæ¬æ\"\n}\n```\n\n`objectID` ãæå®ããªãå ´åã¯èªåã§çæãããã¨ãã§ãã¾ãããæå®ãã¦ããæ¹ãéç¨ä¸æ¥½ã§ãã \nãã®çç±ã¯ãè¨äºã使ãããã³ã«ã¤ã³ããã¯ã¹ã®å·®åã Algolia å´ã«éç¥ããªãã¨ãããªãã®ã§ãããå·®åãæ½åºããã³ã¼ããå®è£
ãããããããã¹ã¦ã®è¨äºã Algolia ã«ä¼ããã³ã¼ããããã¦ããã¦ã`objectID` ãåãã§ããã°å¤æ´åã¯è¿½å ãæ´æ°ãããã¦ããã以å¤ã®éè¤åã¯ç¡è¦ãããã®ã§æ¥½ã§ãã \nå·®åã ãéãæ¹ã API ã®éä¿¡éã忏ã§ãã¾ããããã®è¾ºãã¯ãªãã¡ã¯ã¿ãªã³ã°ã®ã¿ã¤ãã³ã°ã§è¯ãã§ãããã\n\n### ã¤ã³ããã¯ã¹ã«å¿
è¦ãªæ
å ±ã®æ´å½¢\n\n[**fwywd**](/) ã®ããããã¼ã¸ã¯ç¾ç¶ **SSG** ã§æ§æãã¦ããã`getStaticProps` ã«**ã¤ã³ããã¯ã¹æ
å ±ã
8®æ´å½¢** + **API ã§æ
å ±ã®éä¿¡**ã®æ©è½ãå®è£
ãã¦ããã¾ãããã \nã¾ãã¯ã¤ã³ããã¯ã¹ã«å¿
è¦ãªæ
å ±ã®æ´å½¢ãè¡ãã¾ãã\n\nç§ã¯ä»¥ä¸ã®ãããªå®è£
ãè¡ãã¾ããã\n\n```typescript\n// src/lib/algolia.ts\n\nimport removeMd from 'remove-markdown';\n\nexport const generateIndex = async (): Promise\u003cvoid\u003e =\u003e {\n // ãã¼ã«ã« or ãããã¬ã¹ CMS çµç±ã§è¨äºã®æ
å ±ãåå¾\n // åèªã§å®è£
ãå¿
è¦\n const posts = async getPosts(...);\n\n // posts ã®ããããã£ä¾\n // id, title, description, content\n const objects = posts.map((post) =\u003e {\n return {\n objectID: post.id,\n url: `https://fwywd.com/${post.id}`,\n title: post.title,\n description: post.description,\n content: removeMd(post.content), // markdown =\u003e plaintext\n };\n });\n\n // å
容ã®ç¢ºèª\n console.log(objects)\n};\n```\n\nããã§ãMarkdown ã®ãã¡ã¤ã«ãèªã¿è¾¼ãã§ `post.content` ã«æ ¼ç´ãã¦ãããalogolia ã§ã¯ Platin Text ã®å½¢å¼ãæã¾ããããã`remove-markdown` ãã¤ã³ã¹ãã¼ã«ãã¦å©ç¨ãã¦ãã¾ãã\n\n```bash\n# npm ã®å ´å\nnpm install --save-dev remove-markdown\n\n# yarn ã®å ´å\nyarn add --dev remove-markdown\n```\n\nãã¡ããããããã¼ã¸ã® `getStaticProps` ã«
8追å ãã¦ãããããã¼ã¸ã«ã¢ã¯ã»ã¹ãããã°ã確èªãã¦ã¿ã¾ãããã\n\n```tsx\n// src/page/index.tsx\n\n...\nimport { generateIndex } from 'lib/algolia';\n...\n\nexport default function Index(): JSX.Element {\n return (\n \u003c\u003e...\u003c/\u003e\n );\n}\n\nexport const getStaticProps: GetStaticProps = async () =\u003e {\n await generateIndex();\n ...\n return { props: { ... } };\n};\n```\n\n以ä¸ã®ããã«ã表示ã確èªã§ããã°æ
å ±ã®æ´å½¢ãå®äºã§ãã\n\n```bash\n[{\n objectID: 'blog/publish',\n url: 'https://fwywd.com/blog/publish',\n title: 'æ°äºæ¥ã® fwywd ãã¤ãã«å
¬éãã¾ããï¼',\n description: 'ã¿ãªãããããã«ã¡ã¯ãæ ªå¼ä¼ç¤¾ãã«ã¬ã¯ä»£è¡¨åç· å½¹ä¼é·ã®åå´ã§ããæ°ããéè¨ãã fwywdï¼ãã¥ã¼ãï¼ã¸ãè¶ãããã ãã¾ãã¦ãèª ã«ãããã¨ããããã¾ããæ¬æ¥ 2021 å¹´ 5 æ 17 æ¥ã«ãã«ã¬ã¯ã®æ°äºæ¥ã§ãã fwywd ãå
¬éãããã¨ãã§ãã¾ãããæ§æ³ããçºè¡¨ã¾ã§ç´ï¼ã¶æã®ä»è¾¼ã¿ãããã¾ããã®ã§ãçºè¡¨ã¾ã§è¾¿ãçããã¨ãã§ãã大å¤å¬ããæãã¾ãã仿¥ã¾ã§æ¯ãã¦ãã ãã£ããã«ã¬ã¯ã®ã¡ã³ãã¼ã«æ¹ãã¦ã礼ãç³ãä¸ãã¾ãã',\n content: '\\n' +\n 'äºæ¥é åã®æ¡å¤§ã¸ã®ä¸æ©\\n' +\n ...\n}]\n```\n\n### API çµç±ã§ã®ã¤ã³ããã¯ã¹ã®è¿½å \n\n次ã«ãalogolia ã® API çµç±ã§æ´å½¢ããæ
å ±ãéä¿¡ãã¾ãããã \nalgolia ç¨ã®ããã±ã¼ã¸ãç¨æããã¦ããããããã®å®è£
ãé常ã«ç°¡åã§ãã\n\n```bash\n# npm ã®å ´å\nnpm install --save-dev algoliasearch\n\n# yarn ã®å ´å\nyarn add --dev algoliasearch\n```\n\nAPI ã使ç¨ããå ´åã«ã¯ **API ãã¼**ãå¿
è¦ã¨ãªããalgolia ã®ããã·ã¥ãã¼ãç»é¢ãã確èªãããã¨ãã§ãã¾ãã \n**Appilcation ID** 㨠**Admin API Key** ã® 2 ã¤ãå¿
è¦ã¨ãªãã¾ãã\n\n\n\nãã®æ
å ±ãç¨ãã¦ã以ä¸ã®ããã« API çµç±ã§æ
å ±ãéä¿¡ãã¾ãããã\n\n```typescript\n// src/lib/algolia.ts\n\nimport removeMd from 'remove-markdown';\nimport algoliasearch from 'algoliasearch'; // 追å \n\nexport const generateIndex = async (): Promise\u003cvoid\u003e =\u003e {\n const posts = async getPosts(...);\n const objects = posts.map((post) =\u003e {\n return {\n objectID: post.id,\n url: `https://fwywd.com/${post.id}`,\n title: post.title,\n description: post.description,\n content: removeMd(post.content),\n };\n });\n\n // 追å \n const client = algoliasearch('Application ID', 'Admin API Key');\n const index = client.initIndex('æ°è¦ã§ä½æãã index ã®ååï¼ä»åã®ä¾ã§ã¯ fwywd');\n await index.saveObjects(objects, { autoGenerateObjectIDIfNotExist: true });\n};\n```\n\n夿´ãå ãããã¨ã«ãããããã¼ã¸ã¸ã¢ã¯ã»ã¹ãã¾ãã \nãã¾ã API çµç±ã§ã¤ã³ããã¯ã¹ã®æ
å ±ãéä¿¡ã§ãã¦ããã°ã以ä¸ã®ããã« algolia ã®ããã·ã¥ãã¼ãæ
å ±ãæ´æ°ããã¾ãã\n\n\n\n`getStaticProps` ã«
8追å ãããããVercel ã¸ãããã¤ããæã«èªåçã«ææ°ã®ã¤ã³ããã¯ã¹æ
å ±ãæ´æ°ãããããã«ãªãã¾ãã \nISR ã SSR ã使ãããæ¹ã¯ãã®ç¹ãç°ãªãããæ³¨æãå¿
è¦ã§ãã \nã¾ãããããã¬ã¹ CMS ã使ãããæ¹ã¯ **Webhook** ã®æ©è½ãå©ç¨ãã¦ãè¯ãã§ãããã\n\nåèï¼[Contentful ã®è¨äºã Algolia ã®ã¤ã³ããã¯ã¹ã«ç»é²ãã](https://sunday-morning.app/posts/2021-03-27-generate-contentful-algolia-index)\n\n### æ¬çªç°å¢ã§ã®ã¿ã¤ã³ããã¯ã¹ä½æ\n\nã¤ã³ããã¯ã¹ã®ä½ææ¹æ³ãããããå®éã« API çµç±ã§ã¤ã³ããã¯ã¹ã®ãã¼ã¿ãéä¿¡ãããã¨ãã§ãã¾ããããç¾ç¶ã®å®è£
ã§ã¯ç¡é§ãããã¾ãã \nããã¯ãã¼ã«ã«ã®éçºç°å¢ã§ãããããã¼ã¸ã«ã¢ã¯ã»ã¹ãããã³ã«ã¤ã³ããã¯ã¹ã®æ
å ±ãéã£ã¦ãã¾ã£ã¦ãã¾ãã \næ¬æ¥ã¯æ¬çªç°å¢ã§ã®ãã«ãæã®ã¿ã§è¯ããããç°å¢å¤æ°ã® `NODE_ENV` ã `production` ã®ã¨ãã®ã¿ãã¤ã³ããã¯ã¹ä½æããã³ API çµç±ã§ã®æ
å ±ã®éä¿¡ãè¡ãããã«æ¡ä»¶ãåå²ãã¦ããã¾ãããã\n\n```tsx\n// src/page/index.tsx\n\n...\nimport { generateIndex } from 'lib/algolia';\n...\n\nexport default function Index(): JSX.Element {\n return (\n \u003c\u003e...\u003c/\u003e\n );\n}\n\nexport const getStaticProps: GetStaticProps = async () =\u003e {\n // æ¡ä»¶åå²ã追è¨\n if (process.env.NODE_ENV === 'production') {\n await generateIndex();\n }\n ...\n return { props: { ... } };\n};\n```\n\n## æ¤ç´¢ç»é¢ã® UI å®è£
\n\n### æãã·ã³ãã«ãªæ¤ç´¢ç»é¢\n\n[**å
¬å¼ãã¼ã¸ã®ããã¥ã¡ã³ã**](https://www.algolia.com/doc/guides/building-search-ui/getting-started/react/#welcome-to-react-instantsearch)ã§ã¯ã[**React InstantSearch**](https://github.com/algolia/react-instantsearch) ã¨ããããã±ã¼ã¸ãå©ç¨ãã¦ãã¾ãã\n\nåèï¼[GUIDES / BUILDING SEARCH UI - Getting Started](https://www.algolia.com/doc/guides/building-search-ui/getting-started/react/#welcome-to-react-instantsearch)\n\n[**React InstantSearch**](https://github.com/algolia/react-instantsearch) 㯠algolia å
¬å¼ãä½ã£ã¦ããã¿ããã§ããã\n\n```bash\n# npm ã®å ´å\nnpm install --save-dev react-instantsearch-dom\n\n# yarn ã®å ´å\nyarn add --dev react-instantsearch-dom\n```\n\n[**React InstantSearch**](https://github.com/algolia/react-instantsearch) ã®ãã¼ã¸ã§æ¸ããã¦ãã **Get Started** ãåèã«ãæãç°¡å㪠UI ãä½ã£ã¦ã¿ã¾ãããã\n\næ¤ç´¢æã« API ã®æ
å ±ãå¿
è¦ã¨ãªããããä¸è¨ã®ç»é¢ãã確èªãã¦ããã¾ãããã\n\n\n\nä¸è¨ã®ããã« `Search` ã³ã³ãã¼ãã³ãã使ãããããã¼ä½ç½®ã«æ¿å
¥ãã¾ããã\n\n```tsx\n// components/common/Search.tsx\n\nimport algoliasearch from 'algoliasearch/lite';\nimport { InstantSearch, SearchBox, Hits } from 'react-instantsearch-dom';\n\nexport default function Search(): JSX.Element {\n const searchClient = algoliasearch('Application ID', 'Search-Only API Key');\n const indexName = 'æ°è¦ã§ä½æãã index ã®ååï¼ä»åã®ä¾ã§ã¯ fwywd';\n return (\n \u003cdiv\u003e\n \u003cInstantSearch indexName={indexName} searchClient={searchClient}\u003e\n \u003cSearchBox /\u003e\n \u003cHits /\u003e\n \u003c/InstantSearch\u003e\n \u003c/div\u003e\n );\n}\n```\n\nãã¡ãã§çµæã確èªãã¦ã¿ãã¨ä»¥ä¸ã®ããã«ããªãã®è¡¨ç¤ºå´©ãã¯ããã¾ãããAPI çµç±ã§æ
å ±ãåå¾ãã¦ãä¸å¿æ¤ç´¢æ©è½ãåä½ãã¦ãããã¨ããããã¾ãã\n\n\n\n\n### æ¤ç´¢çµæãå å·¥\n\næ¤ç´¢çµæã `{\"hit\": {\"url\": ...}` ã¨ãªã£ã¦ãããç¾ç¶ã§ã¯æ¤ç´¢çµæã¨ãã¦ä½¿ãã«ãããããã¾ãã¯**ã¿ã¤ãã«**ã ããæ½åºãã¦ããã® **URL** ããªã³ã¯ã¨ãã¦è¨å®ã§ããããã«ãã¾ãããã \nãããã©ã表ç¾ãã¹ãããå°ãé£ããã®ã§ãããè²ã
調æ»ãã¦ã`Hits` ã³ã³ãã¼ãã³ãã®å¼æ°ã« `hitComponent` ãæå®ããã¨è¯ããã¨ããããã以ä¸ã®ããã«æ¸ãã¨ããã«è¾¿ãçãã¾ããã\n\n\u003e è£è¶³ï¼ç°å¢å¤æ° \n\u003e ãããã API ãã¼ãªã©ã¯ `.env` ãã¡ã¤ã«ã«æ ¼ç´ãã¦å
8ç
§ãã¦ãã¾ãã \n\u003e `Admin API Key` ã®ã¿ãµã¼ãã¼ãµã¤ãã§é è½ãããããã`NEXT_PUBLIC_` ãå¤ãã¦ãã¾ãã\n\u003e åèè¨äºï¼[Next.js ã«ãããç°å¢å¤æ° (env) ã®åºæ¬çãªè¨å®æ¹æ³](/tech/next-env)\n\n```bash\n# .env.development\n\n# 追è¨\nNEXT_PUBLIC_ALGOLIA_APPLICATION_ID='Application ID'\nNEXT_PUBLIC_ALGOLIA_INDEX='IndexName'\nNEXT_PUBLIC_ALGOLIA_SEARCH_API_KEY='Search API Key'\nALGOLIA_ADMIN_API_KEY='Admin API Key'\n```\n\n```tsx\n// src/components/common/Search.tsx\n\nimport algoliasearch from 'algoliasearch/lite';\nimport { hitComponent } from 'components/common/HitComponent';\nimport { InstantSearch, SearchBox, Hits } from 'react-instantsearch-dom';\n\nexport default function Search(): JSX.Element {\n const searchClient = algoliasearch(\n process.env.NEXT_PUBLIC_ALGOLIA_APPLICATION_ID || '',\n process.env.NEXT_PUBLIC_ALGOLIA_SEARCH_API_KEY || '',\n );\n const indexName = process.env.NEXT_PUBLIC_ALGOLIA_INDEX || '';\n\n return (\n \u003cdiv\u003e\n \u003cInstantSearch indexName={indexName} searchClient={searchClient}\u003e\n \u003cSearchBox /\u003e\n \u003cHits hitComponent={hitComponent} /\u003e\n \u003c/InstantSearch\u003e\n \u003c/div\u003e\n );\n}\n```\n\nããã§ä½¿ç¨ãã¦ãã `hitComponent` ãæ¤ç´¢çµæã«å¯¾ãã¦æä½ãã§ãããã®ã§ã以ä¸ã®ããã«å®ç¾©ãã¦ãã¾ãã\n\n```tsx\n// src/components/common/HitComponent\n\nimport Link from 'next/link';\nimport { Hit } from 'react-instantsearch-core';\n\ninterface HitDoc {\n objectID: string;\n url: string;\n title: string;\n description: string;\n content: string;\n}\n\ninterface Props {\n hit: Hit\u003cHitDoc\u003e;\n}\n\ninterface HitComponentProps extends Props {\n onClick: () =\u003e void;\n}\n\nfunction HitComponent({ hit }: HitComponentProps): JSX.Element {\n return (\n \u003cdiv\u003e\n \u003cLink href={hit.url}\u003e\n \u003ca className=\"hover:text-[#06bbbc]\"\u003e{hit.title}\u003c/a\u003e\n \u003c/Link\u003e\n \u003c/div\u003e\n );\n}\n\nexport const hitComponent = ({ hit }: Props): JSX.Element =\u003e (\n \u003cHitComponent hit={hit} onClick={() =\u003e null} /\u003e\n);\n```\n\n`Hits` ã³ã³ãã¼ãã³ãã®å¼æ°ãã¡ãã£ã¨ç¹æ®ã§ããããæåã¯ãããã«ããããç¥ãã¾ããããä¸åº¦è¨å®ãã¦ãã¾ãã°ããã¨ã¯ `HitComponent` ãç·¨éããã° OK ã§ãã\n\n以ä¸ã®ããã«ãã¿ã¤ãã«ã®ã¿ã表示ãããããã«ãªãã¾ããã\n\n\n\n\nå°ããã¤å½¢ã«ãªã£ã¦ãã¾ããã\n\n### æ¤ç´¢çµæã®ãããæ°ãå¶é\n\nç¾ç¶ã§ã¯ããããããå
¨ã¦ã表示ããã¦ãã¾ã£ã¦ããããã**ä¸ä½ï¼ä»¶**ã®è¡¨ç¤ºã«å¶éãã¦ã¿ã¾ãããã \n`Configure` ã³ã³ãã¼ãã³ãã追å ããã ãã§ã¨ã¦ãç°¡åã§ãã\n\n```tsx\n// src/components/common/Search.tsx\n\nimport algoliasearch from 'algoliasearch/lite';\nimport { hitComponent } from 'components/common/HitComponent';\nimport { InstantSearch, SearchBox, Hits, Configure } from 'react-instantsearch-dom';\n\nexport default function Search(): JSX.Element {\n const searchClient = algoliasearch(\n process.env.NEXT_PUBLIC_ALGOLIA_APPLICATION_ID || '',\n process.env.NEXT_PUBLIC_ALGOLIA_SEARCH_API_KEY || '',\n );\n const indexName = process.env.NEXT_PUBLIC_ALGOLIA_INDEX || '';\n\n return (\n \u003cdiv\u003e\n \u003cInstantSearch indexName={indexName} searchClient={searchClient}\u003e\n \u003cConfigure hitsPerPage={5} /\u003e {/* \u003c== è¿½è¨ */}\n \u003cSearchBox /\u003e\n \u003cHits hitComponent={hitComponent} /\u003e\n \u003c/InstantSearch\u003e\n \u003c/div\u003e\n );\n}\n```\n\n\n\n### ãã¼ã¸ãã¼ã·ã§ã³ã®è¨å®\n\næ¤ç´¢çµæãå¶éããé¢ä¿ã§ä¸ä½ 5 ä»¶ãã表示ãããªããªãã¾ããã \n5 ä»¶ç®ä»¥éã®æ¤ç´¢çµæã«ã¢ã¯ã»ã¹ããããã«**ãã¼ã¸ãã¼ã·ã§ã³**ã追å ãã¾ãããã \nãã¡ãã `Pagination` ã³ã³ãã¼ãã³ãã追å ããã ãã§è¯ãããç°¡åã§ãã\n\n```tsx\n// src/components/common/Search.tsx\n\nimport algoliasearch from 'algoliasearch/lite';\nimport { hitComponent } from 'components/common/HitComponent';\nimport { InstantSearch, SearchBox, Hits, Configure, Pagination } from 'react-instantsearch-dom';
8\n\nexport default function Search(): JSX.Element {\n const searchClient = algoliasearch(\n process.env.NEXT_PUBLIC_ALGOLIA_APPLICATION_ID || '',\n process.env.NEXT_PUBLIC_ALGOLIA_SEARCH_API_KEY || '',\n );\n const indexName = process.env.NEXT_PUBLIC_ALGOLIA_INDEX || '';\n\n return (\n \u003cdiv\u003e\n \u003cInstantSearch indexName={indexName} searchClient={searchClient}\u003e\n \u003cConfigure hitsPerPage={5} /\u003e\n \u003cSearchBox /\u003e\n \u003cHits hitComponent={hitComponent} /\u003e\n \u003cPagination /\u003e {/* \u003c== è¿½è¨ */}\n \u003c/InstantSearch\u003e\n \u003c/div\u003e\n );\n}\n```\n\n\n\n### CSS ãé©ç¨\n\nããããã®å½¹å²ãå°ããã¤ææ¡ã§ãã¦ããã¨ããã§ã表示崩ããè§£æ¶ããããã® CSS ãé©ç¨ãã¾ãããã \næ¨æºã® CSS ãç¨æããã¦ããããã以ä¸ã®ããã«ã¤ã³ã¹ãã¼ã«ãã¾ãããã\n\n```bash\n# npm ã®å ´å\nnpm install instantsearch.css\n\n# yarn ã®å ´å\nyarn add instantsearch.css\n```\n\nããã§ `node_modules/instantsearch.css` ä¸ã« CSS ãå«ãã ããã±ã¼ã¸ãã¤ã³ã¹ãã¼ã«ããã¾ãã\n\næ¨æºç㪠`algolia.css`ãå¥ãã¿ã¼ã³ã® `satellite.css` ãç¨æããã¦ãã¾ãã \nå
¨ã¦æºåããã人åãã® `reset.css` ãããã¾ãã\nããããã«ãã¡ã¤ã«ãæå°å `min` çãããã¾ãã®ã§ããã¡ãã使ãã¨è¯ãã§ãããã\n\n```tsx\n// src/components/common/Search.tsx\n\nimport algoliasearch from 'algoliasearch/lite';\nimport { hitComponent } from 'components/common/HitComponent';\nimport { InstantSearch, SearchBox, Hits, Configure, Pagination } from 'react-instantsearch-dom';\nimport 'instantsearch.css/themes/algolia-min.css'; // \u003c== 追è¨ï¼ä½¿ãããã¹ã¿ã¤ã«ã«åããã¦å¤æ´\n\nexport default function Search(): JSX.Element {\n const searchClient = algoliasearch(\n process.env.NEXT_PUBLIC_ALGOLIA_APPLICATION_ID || '',\n process.env.NEXT_PUBLIC_ALGOLIA_SEARCH_API_KEY || '',\n );\n const indexName = process.env.NEXT_PUBLIC_ALGOLIA_INDEX || '';\n\n return (\n \u003cdiv\u003e\n \u003cInstantSearch indexName={indexName} searchClient={searchClient}\u003e\n \u003cConfigure hitsPerPage={5} /\u003e\n \u003cSearchBox /\u003e\n \u003cHits hitComponent={hitComponent} /\u003e\n \u003cPagination /\u003e\n \u003c/InstantSearch\u003e\n \u003c/div\u003e\n );\n}\n```\n\n\n\n\n\n[**fwywdï¼ãã¥ã¼ãï¼**](/) ã§ã¯ `satellite-min.css` ã使ç¨ãããã¨ã«ãã¾ããã \nCSS ãé©ç¨ããã ãã§ãæ¤ç´¢æ©è½ã¨ãã¦ããããããªã£ã¦ãã¾ãããã\n\nåèã«ããè¨äºã§ã¯ `Search` ã®ã³ã³ãã¼ãã³ãèªä½ã§èªã¿è¾¼ãã®ã§ã¯ãªãã`_app.tsx` ã§ã°ãã¼ãã«ã«èªã¿è¾¼ãã§ãã¾ããã \nããã¯ãã¼ãã® CSS ã䏿¸ããããå ´åã«å¿
è¦ã§ããã詳ããçç±ã¯ã¾ãå¿
è¦ãªå ´é¢ã§ç´¹ä»ãã¾ãã®ã§ãå®å¿ãã ããã\n\nåèï¼[Next.js + Algolia ã§å
¨ææ¤ç´¢ UI ãå®è£
ãã](https://sunday-morning.app/posts/2021-03-28-next-js-algolia-search-ui)\n\n## UI ã®è©³ç´°ãªã«ã¹ã¿ãã¤ãº\n\n### åæç¶æ
ã§æ¤ç´¢çµæã表示ããªã\n\nç¾ç¶ã§ã¯åæç¶æ
ã®ç©ºæåã«å¯¾ãã¦ãæ¤ç´¢ãè¡ã£ã¦ãã¾ãã \n空æåã§ã¯æ¤ç´¢ãè¡ããªãããã«è¨å®ãè¡ãã¾ãã\n\n詳細ãªè¨å®ã®å ´åã¯å¥é `@algolia/*` ã§å®ç¾©ããã¦ããããã±ã¼ã¸ãå¿
è¦ã¨ãªãã¾ãã\n\nåèï¼[algoliasearch-client-javascript/packages/](https://github.com/algolia/algoliasearch-client-javascript/tree/3aec216a9704f818b4faaa8b97d988ec2794f9da/packages)\n\n```bash\n# npm ã®å ´å\nnpm install --save-dev @algolia/client-search\n\n# yarn ã®å ´å\nyarn add --dev @algolia/client-search\n```\n\nã¾ãã¯æ¤ç´¢ã«é¢ããè¨å®ãè¡ãããã®éå½¢ã使ãã¦ããã¾ãã\n\nåèï¼[Conditional Requests - algolia](https://www.algolia.com/doc/guides/building-search-ui/going-further/conditional-requests/react/)\n\n```tsx\n// src/components/common/Search.tsx\n\nimport { MultipleQueriesQuery } from '@algolia/client-search'; // \u003c== 追è¨\nimport algoliasearch from 'algoliasearch/lite';\nimport { hitComponent } from 'components/common/HitComponent';\nimport { InstantSearch, SearchBox, Hits, Configure, Pagination } from 'react-instantsearch-dom';\nimport 'instantsearch.css/themes/satellite-min.css';\n\nexport default function Search(): JSX.Element {\n const indexName = process.env.NEXT_PUBLIC_ALGOLIA_INDEX || '';
8\n const algoliaClient = algoliasearch(\n process.env.NEXT_PUBLIC_ALGOLIA_APPLICATION_ID || '',\n process.env.NEXT_PUBLIC_ALGOLIA_SEARCH_API_KEY || '',\n ); // \u003c== åç§°ã夿´\n\n // ãã¡ãã«è¨å®ã追è¨ãã¦ãã\n const searchClient = {\n ...algoliaClient,\n search(requests: MultipleQueriesQuery[]) {\n return algoliaClient.search(requests);\n },\n };\n\n return (\n \u003cdiv\u003e\n \u003cInstantSearch indexName={indexName} searchClient={searchClient}\u003e\n \u003cConfigure hitsPerPage={5} /\u003e\n \u003cSearchBox /\u003e\n \u003cHits hitComponent={hitComponent} /\u003e\n \u003cPagination /\u003e\n \u003c/InstantSearch\u003e\n \u003c/div\u003e\n );\n}\n```\n\nããã¦ã空æå `!params?.query` ã®å ´åã«ã¯æ¤ç´¢çµæãä½ããªãã¨ã¢ãã¯ããæ
å ± `mock` ãéãã¾ãã \næ¸ãæ¹ã®ã使³ã¯ä»¥ä¸ã®å
¬å¼ãã¼ã¸ãåèã«ãã¦ãããæãã¤ãã§æ¸ããããã§ã¯ããã¾ããã\n\nåèï¼[Conditional Requests - algolia](https://www.algolia.com/doc/guides/building-search-ui/going-further/conditional-requests/react/)\n\n```tsx\n// src/components/common/Search.tsx\n\nimport { MultipleQueriesQuery } from '@algolia/client-search';\n\nimport algoliasearch from 'algoliasearch/lite';\nimport { hitComponent } from 'components/common/HitComponent';\nimport { InstantSearch, SearchBox, Hits, Configure, Pagination } from 'react-instantsearch-dom';\nimport 'instantsearch.css/themes/satellite-min.css';\n\nexport default function Search(): JSX.Element {\n const indexName = process.env.NEXT_PUBLIC_ALGOLIA_INDEX || '';\n const algoliaClient = algoliasearch(\n process.env.NEXT_PUBLIC_ALGOLIA_APPLICATION_ID || '',\n process.env.NEXT_PUBLIC_ALGOLIA_SEARCH_API_KEY || '',\n );\n\n // æ¤ç´¢çµæãªãã®ã¢ãã¯æ
å ±\n const mock = {\n hits: [],\n nbHits: 0,\n nbPages: 0,\n page: 0,\n processingTimeMS: 0,\n };\n\n // 空æåã®å ´åã¯ä½ããªãæ
å ±ãã¢ãã¯ãã¦æ¸¡ã\n const searchClient = {\n ...algoliaClient,\n search(requests: MultipleQueriesQuery[]) {\n if (requests.every(({ params }) =\u003e !params?.query)) {\n return Promise.resolve(mock);\n }\n return algoliaClient.search(requests);\n },\n };\n\n return (\n \u003cdiv\u003e\n \u003cInstantSearch indexName={indexName} searchClient={searchClient}\u003e\n \u003cConfigure hitsPerPage={5} /\u003e\n \u003cSearchBox /\u003e\n \u003cHits hitComponent={hitComponent} /\u003e\n \u003cPagination /\u003e\n \u003c/InstantSearch\u003e\n \u003c/div\u003e\n );\n}\n```\n\nåèè¨äºã§ã¯ `Promise.resolve` ã®ä¸ã `map` ã§é
åãè¿ãããã«æå®ãã¦ãã¾ããããç¡é§ãªãã¼ã¸ãã¼ã·ã§ã³ã表示ãããããããã®ç¹ã¯å¤æ´ãã¦ãã¾ãã \nç¹ã«ä»ã®ã¨ããã¯åé¡ãããã¾ããããã¾ãåé¡ãããã°åèè¨äºã®å½¢å¼ã«åããããã¨æãã¾ãã\n\n\n\nããã§ã`searchClient` å¨ããæ
å ±ãå¤ããªã£ã¦ããããã管çãããããããã«åãåºãã¦ããã¾ãããã\n\n```typescript\n// src/lib/searchClient.ts\n\nimport { MultipleQueriesQuery } from '@algolia/client-search';\nimport algoliasearch from 'algoliasearch/lite';\n\nexport const indexName = process.env.NEXT_PUBLIC_ALGOLIA_INDEX || '';\nexport const algoliaClient = algoliasearch(\n process.env.NEXT_PUBLIC_ALGOLIA_APPLICATION_ID || '',\n process.env.NEXT_PUBLIC_ALGOLIA_SEARCH_API_KEY || '',\n);\n\n// 空æåã®å ´åã¯ä½ããªãæ
å ±ãã¢ãã¯ãã¦æ¸¡ã\nexport const searchClient = {\n ...algoliaClient,\n search(requests: MultipleQueriesQuery[]) {\n if (requests.every(({ params }) =\u003e !params?.query)) {\n return Promise.resolve(mock);\n }\n return algoliaClient.search(requests);\n },\n};\n\n// æ¤ç´¢çµæãªãã®ã¢ãã¯æ
å ±\nconst mock = {\n hits: [],\n nbHits: 0,\n nbPages: 0,\n page: 0,\n processingTimeMS: 0,\n};\n```\n\n```tsx\n// src/component/common/Search.tsx\n\nimport { hitComponent } from 'components/common/HitComponent';\nimport { indexName, searchClient } from 'lib/searchClient';\nimport { InstantSearch, SearchBox, Hits, Configure, Pagination } from 'react-instantsearch-dom';\nimport 'instantsearch.css/themes/satellite-min.css';\n\nexport default function Search(): JSX.Element {\n return (\n \u003cdiv\u003e\n \u003cInstantSearch indexName={indexName} searchClient={searchClient}\u003e\n \u003cConfigure hitsPerPage={5} /\u003e\n \u003cSearchBox /\u003e\n \u003cHits hitComponent={hitComponent} /\u003e\n \u003cPagination /\u003e\n \u003c/InstantSearch\u003e\n \u003c/div\u003e\n );\n}\n```\n\nã ãã¶ã¹ãããªã¨æ¸ããã¨ãã§ãã¾ããã\n\n### æ¤ç´¢çµæã
8æ®ãåé¡ãè§£æ¶\n\nå
é¨ãªã³ã¯ãå©ç¨ãã `Link` ã³ã³ãã¼ãã³ãã§é·ç§»ããããã¨ããã¼ã¸é·ç§»å¾ãæ¤ç´¢çµæãæ®ã£ã¦ãã¾ããã¨ãããã¾ãã\n\n\n\n\nãã¡ãã®åèè¨äºãããã`connectSearchBox` ãå©ç¨ããã¨è¯ãããã§ãã\n\nåèï¼[Algolia Instantsearch ã§ãæ¤ç´¢çµæã¯ãªãã¯æã«ãã¼ã¯ã¼ãããªã»ãããã](https://wp-kyoto.net/algolia-instantsearch-reset-serchword-by-custom-event/)\n\nã¾ãã¯å
¨ä½ã®éå½¢ãä½ã£ã¦ããã¾ãã \n`Hits` ã³ã³ãã¼ãã³ãã `SearchResult` ã³ã³ãã¼ãã³ãå
ã«æ ¼ç´ããã ãã§ãç¹ã«åä½ã®å¤æ´ã¯ã¾ã ããã¾ããã\n\n```tsx\n// src/component/common/Search.tsx\n\nimport { indexName, searchClient } from 'lib/searchClient';\nimport { InstantSearch, SearchBox, Configure, Pagination } from 'react-instantsearch-dom';\nimport 'instantsearch.css/themes/satellite-min.css';\nimport { SearchResult } from './HitComponent'; // \u003c== 夿´\n\nexport default function Search(): JSX.Element {\n return (\n \u003cdiv\u003e\n \u003cInstantSearch indexName={indexName} searchClient={searchClient}\u003e\n \u003cConfigure hitsPerPage={5} /\u003e\n \u003cSearchBox /\u003e\n \u003cSearchResult /\u003e {/* Hits =\u003e SearchResult */}\n \u003cPagination /\u003e\n \u003c/InstantSearch\u003e\n \u003c/div\u003e\n );\n}\n```\n\n```tsx\n// src/components/common/HitComponent.tsx\n\nimport Link from 'next/link';\nimport { Hit } from 'react-instantsearch-core';\nimport { Hits, connectSearchBox } from 'react-instantsearch-dom';\n\ninterface HitDoc {\n objectID: string;\n url: string;\n title: string;\n description: string;\n content: string;\n}\n\ninterface Props {\n hit: Hit\u003cHitDoc\u003e;\n}\n\ninterface HitComponentProps extends Props {\n onClick: () =\u003e void;\n}\n\nfunction HitComponent({ hit }: HitComponentProps): JSX.Element {\n return (\n \u003cdiv\u003e\n \u003cLink href={hit.url}\u003e\n \u003ca className=\"hover:text-[#06bbbc]\"\u003e{hit.title}\u003c/a\u003e\n \u003c/Link\u003e\n \u003c/div\u003e\n );\n}\n\n// åæã®éå½¢\nexport const SearchResult = connectSearchBox(({ refine, currentRefinement }) =\u003e {\n const hitComponent = ({ hit }: Props): JSX.Element =\u003e (\n \u003cHitComponent hit={hit} onClick={() =\u003e null} /\u003e\n );\n\n return \u003cHits hitComponent={hitComponent} /\u003e;\n});\n```\n\nãããããå°ãé£èºãããã¾ããã以ä¸ã®ããã«å¤æ´ãã¦ããã¾ãã\n\n```tsx\n// src/components/common/HitComponent.tsx\n\nimport Link from 'next/link';\nimport { useEffect, useState, useCallback } from 'react'; // 追å \nimport { Hit } from 'react-instantsearch-core';\nimport { Hits, connectSearchBox } from 'react-instantsearch-dom';\n\ninterface HitDoc {\n objectID: string;\n url: string;\n title: string;\n description: string;\n content: string;\n}\n\ninterface Props {\n hit: Hit\u003cHitDoc\u003e;\n}\n\ninterface HitComponentProps extends Props {\n onClick: () =\u003e void;\n}\n\nfunction HitComponent({ hit, onClick }: HitComponentProps): JSX.Element {\n return (\n \u003cdiv\u003e\n \u003cLink href={hit.url}\u003e\n \u003cbutton className=\"hover:text-[#06bbbc]\" onClick={onClick}\u003e\n {hit.title}\n \u003c/button\u003e\n \u003c/Link\u003e\n \u003c/div\u003e\n );\n}\n\nexport const SearchResult = connectSearchBox(({ refine, currentRefinement }) =\u003e {\n // refine: function =\u003e ç¾ç¶ã®ã¯ã¨ãªã夿´\n // currentRefinement: string =\u003e ç¾ç¶ã®ã¯ã¨ãª\n\n const [isShow, setShow] = useState\u003cboolean\u003e(false);\n\n // ãã¦ã³ãæã«å®è¡\n useEffect(() =\u003e {\n // !! 㯠currentRefinement ã空æåãå¤å® (true or false)\n setShow(!!currentRefinement); // =\u003e 空æåã¯è¡¨ç¤ºããªãããã«ã»ããããã\n }, [currentRefinement]);
8 // currentRefinement ã«å¤åãããã°å度å®è¡\n\n // ãªã»ããã¨åæã« useCallback ã§ã¡ã¢åãã¦ç¡é§ãªã¬ã³ããªã³ã°ãé²ã\n const handleResetSearchWords = useCallback(() =\u003e {\n refine(''); // ã¯ã¨ãªã空æåã«æå®ãã¦ãªã»ãã\n }, [refine]);\n\n const hitComponent = ({ hit }: Props): JSX.Element =\u003e (\n \u003cHitComponent hit={hit} onClick={handleResetSearchWords} /\u003e\n );\n\n if (!isShow) return null;\n return \u003cHits hitComponent={hitComponent} /\u003e;\n});\n```\n\nããããã®å½¹å²ã¯ã³ã¡ã³ãã¢ã¦ããã¦ããã¾ããã\nã¾ãã`connectSearchBox` ã®å¼æ° `refine` 㨠`currentRefinement` ã¯å
¬å¼ãã¼ã¸ããå½¹å²ã確èªãã¾ããã\n\nåèï¼[SearchBox - algolia](https://www.algolia.com/doc/api-reference/widgets/search-box/react/)\n\nå°ãæéããããæ¹æ³ã§ãããæ¤ç´¢çµæããã¦ã³ãæã«ãªã»ãããããã¨ãã§ãã¾ããã\n\n\n\n\u003e **è£è¶³**\n\u003e æçµçãªææç©ã«ã¯ `Link` ã³ã³ãã¼ãã³ãã使ããã« `a` ã¿ã°ã§ã®é·ç§»ã«åãæ¿ãã¦ããããã®å¦çã¯åä½çã«ã¯å¿
è¦ãªããªãã¾ããã \n\u003e ãã ããããç¶æ
管çãªã©å°ãè¾¼ã¿ãã£ãå®è£
ãè¡ãã°ããã®æ¹æ³ã®ã¾ã¾é²ãããã¨ãã§ãããã¡ãããã¹ãã§ãã®ã§ç¥ã£ã¦ããã¦æã¯ããã¾ããã\n\nãã ããä¸è¦ãªãã¼ã¸ãã¼ã·ã§ã³ãè¨å®ããã¦ãã¾ã£ã¦ãã¾ãã \nããã§ã`Pagination` ã³ã³ãã¼ãã³ãã `SearchResult` ã³ã³ãã¼ãã³ãã«å
å«ãã¦ãã¾ãã¾ãããã\n\n以ä¸ãæçµçãªå
¨ä½åã§ãã \n`HitComponent.tsx` ãã `SearchResult.tsx` ã«ãã¡ã¤ã«åã夿´ãã¦ããã¨ãããæ³¨æã§ãã\n\n```tsx\n// src/components/common/Search.tsx\n\nimport SearchResult from 'components/common/SearchResult';\nimport { indexName, searchClient } from 'lib/searchClient';\nimport { InstantSearch, SearchBox, Configure } from 'react-instantsearch-dom';\nimport 'instantsearch.css/themes/satellite-min.css';\n\nexport default function Search(): JSX.Element {\n return (\n \u003cdiv\u003e\n \u003cInstantSearch indexName={indexName} searchClient={searchClient}\u003e\n \u003cConfigure hitsPerPage={5} /\u003e\n \u003cSearchBox /\u003e\n \u003cSearchResult /\u003e\n \u003c/InstantSearch\u003e\n \u003c/div\u003e\n );\n}\n```\n\n```tsx\n// src/components/common/SearchResult.tsx\n\nimport Link from 'next/link';\nimport { useEffect, useState, useCallback } from 'react';\nimport { Hit } from 'react-instantsearch-core';\nimport { Hits, connectSearchBox, Pagination } from 'react-instantsearch-dom';\n\ninterface HitDoc {\n objectID: string;\n url: string;\n title: string;\n description: string;\n content: string;\n}\n\ninterface Props {\n hit: Hit\u003cHitDoc\u003e;\n}\n\ninterface HitComponentProps extends Props {\n onClick: () =\u003e void;\n}\n\nfunction HitComponent({ hit, onClick }: HitComponentProps): JSX.Element {\n return (\n \u003cdiv\u003e\n \u003cLink href={hit.url}\u003e\n \u003cbutton className=\"hover:text-[#06bbbc]\" onClick={onClick}\u003e\n {hit.title}\n \u003c/button\u003e\n \u003c/Link\u003e\n \u003c/div\u003e\n );\n}\n\nconst SearchResult = connectSearchBox(({ refine, currentRefinement }) =\u003e {\n const [isShow, setShow] = useState\u003cboolean\u003e(false);\n\n useEffect(() =\u003e {\n setShow(!!currentRefinement);\n }, [currentRefinement]);\n\n const handleResetSearchWords = useCallback(() =\u003e {\n refine('');\n }, [refine]);\n\n const hitComponent = ({ hit }: Props): JSX.Element =\u003e (\n \u003cHitComponent hit={hit} onClick={handleResetSearchWords} /\u003e\n );\n\n if (!isShow) return null;\n return (\n \u003c\u003e\n \u003cHits hitComponent={hitComponent} /\u003e\n \u003cPagination /\u003e {/* 追å */}\n \u003c/\u003e\n );\n});\n\nexport default SearchResult;\n```\n\nããã§ãã¼ã¸ãã¼ã·ã§ã³ãä¸è¦ã«è¡¨ç¤ºãããåé¡ã解決ããã¾ããã\n\n### æ¤ç´¢å¯¾è±¡ã®è¨å®\n\nããã§å°ãå®è£
ããé¢ã㦠algolia ã®è¨å®ãè¦ç´ãã¾ãããã \næ¤ç´¢ã«ä½¿ç¨ãã対象ãå®ç¾©ããã¤ã³ããã¯ã¹ã®å
¨ã¦ã«ãªã£ã¦ãã¾ãããä»åã¯ãã®ä¸ã§ã `title` 㨠`description` ã®ã¿ãæ¤ç´¢å¯¾è±¡ã¨ãã¦çµã£ã¦ã¿ã¾ãããã \nãã®åæ©ã¨ãã¦ã`content` ã¾ã§å
¥ãã¦ãã¾ã㨠`React` ã `Next.js` ã¨ãã£ãç¨èªãã©ã®ãããªè¨äºã§ãå¿
ãå
¥ã£ã¦ãã¾ããããæ¤ç´¢ã®è³ªãè½ã¡ã¦ãã¾ãããã§ãã \n`content` ãå«ãããã©ããã¯è¦æ¨¡ã«ãã£ã¦ãå¤ãã£ã¦ããããããã®ç¶æ³ã«åããã¦æ¤è¨ãã¾ãããã\n\n\n\n\n\nã¾ããæ¤ç´¢ã®è¨èªãæ¥æ¬èªã«ãè¨å®ãã¦ããã¨è¯ãã§ãããã\n\n\n\n\n\n### æ¤ç´¢ã¯ã¨ãªããã¤ã©ã¤ã\n\næ¤ç´¢ã¯ã¨ãªã¨è©²å½ãã¦ããç®æã®è²ã夿´ããã¨ãã£ã**ãã¤ã©ã¤ã**ã `Highlight` ã³ã³ãã¼ãã³ãã§ç°¡åã«å®è£
ã§ãã¾ãã\n\n```tsx\n// 夿´ç®æ\nfunction HitComponent({ hit, onClick }: HitComponentProps): JSX.Element {\n return (\n \u003cdiv\u003e\n \u003cLink href={hit.url}\u003e\n \u003cbutton className=\"hover:text-[#06bbbc]\" onClick={onClick}\u003e\n \u003cHighlight attribute=\"title\" hit={hit} /\u003e {/* \u003c== title ã®å±æ§ã表示 */}\n \u003c/button\u003e\n \u003c/Link\u003e\n \u003c/div\u003e\n );\n}\n```\n\nå
¨ä½åã¯ãã¡ãã§ãã\n\n```tsx\n// src/components/common/SearchResult.tsx\n\nimport Link from 'next/link';\nimport { useEffect, useState, useCallback } from 'react';\nimport { Hit } from 'react-instantsearch-core';\nimport { Hits, connectSearchBox, Pagination, Highlight } from 'react-instantsearch-dom';\n\ninterface HitDoc {\n objectID: string;\n url: string;\n title: string;\n description: string;\n content: string;\n}\n\ninterface Props {\n hit: Hit\u003cHitDoc\u003e;\n}\n\ninterface HitComponentProps extends Props {\n onClick: () =\u003e void;\n}\n\nfunction HitComponent({ hit, onClick }: HitComponentProps): JSX.Element {\n return (\n \u003cdiv\u003e\n \u003cLink href={hit.url}\u003e\n \u003cbutton className=\"hover:text-[#06bbbc]\" onClick={onClick}\u003e\n \u003cHighlight attribute=\"title\" hit={hit} /\u003e\n \u003c/button\u003e\n \u003c/Link\u003e\n \u003c/div\u003e\n );\n}\n\nconst SearchResult = connectSearchBox(({ refine, currentRefinement }) =\u003e {\n const [isShow, setShow] = useState\u003cboolean\u003e(false);\n\n useEffect(() =\u003e {\n setShow(!!currentRefinement);\n }, [currentRefinement]);\n\n const handleResetSearchWords = useCallback(() =\u003e {\n refine('');\n }, [refine]);\n\n const hitComponent = ({ hit }: Props): JSX.Element =\u003e (\n \u003cHitComponent hit={hit} onClick={handleResetSearchWords} /\u003e\n );\n\n if (!isShow) return null;\n return (\n \u003c\u003e\n \u003cHits hitComponent={hitComponent} /\u003e\n \u003cPagination /\u003e {/* 追å */}\n \u003c/\u003e\n );\n});\n\nexport default SearchResult;\n```\n\nããã§ç°¡åã«ãã¤ã©ã¤ããå®è£
ã§ãã¾ããã\n\n\n\nãã¤ã©ã¤ãã®è²ãªã©ã夿´ãããå ´åã¯ã屿§ã確èªã㦠aloglia ã® CSS ã䏿¸ãããã° OK ã§ãã\n\n### ç¡æç㯠algolia ã®ãã´ã表示å¿
é \n\nalgolia ã§ã¯ç¡æçã使ç¨ãã¦ãã人㯠algolia ã®ã¯ã¬ã¸ãã表示ãå¿
è¦ã§ãã\n\n\u003e Algolia requires that you use this widget if you only use your free usage credits, or are on a Community or Free legacy plan.\n\nå¼ç¨ï¼[poweredBy - algolia](https://www.algolia.com/doc/api-reference/widgets/powered-by/js/)\n\nãã¡ãã `PowerdBy` ã³ã³ãã¼ãã³ããç¨æããã¦ããããããã¡ãã追å ããã ãã§ãã \n注æç¹ã¨ã㦠`Search` ã³ã³ãã¼ãã³ãå
ã«è¿½å ããã¨æ¤ç´¢ããã¦ããªãæã表示ããã¦ãã¾ãããã`SearchResult` ã³ã³ãã¼ãã³ããªãã«è¿½è¨ãã¦ããã¨è¯ãã§ãããã\n\n```tsx\n// 夿´ç¹\
8nreturn (\n \u003c\u003e\n \u003cHits hitComponent={hitComponent} /\u003e\n \u003cPagination /\u003e\n \u003cPoweredBy /\u003e {/* 追å */}\n \u003c/\u003e\n);\n```\n\nå
¨ä½åã¯ãã¡ãã§ãã\n\n```tsx\n// src/components/common/SearchResult.tsx\n\nimport Link from 'next/link';\nimport { useEffect, useState, useCallback } from 'react';\nimport { Hit } from 'react-instantsearch-core';\nimport { Hits, connectSearchBox, Pagination, Highlight, PoweredBy } from 'react-instantsearch-dom';\n\ninterface HitDoc {\n objectID: string;\n url: string;\n title: string;\n description: string;\n content: string;\n}\n\ninterface Props {\n hit: Hit\u003cHitDoc\u003e;\n}\n\ninterface HitComponentProps extends Props {\n onClick: () =\u003e void;\n}\n\nfunction HitComponent({ hit, onClick }: HitComponentProps): JSX.Element {\n return (\n \u003cdiv\u003e\n \u003cLink href={hit.url}\u003e\n \u003cbutton className=\"hover:text-[#06bbbc]\" onClick={onClick}\u003e\n \u003cHighlight attribute=\"title\" hit={hit} /\u003e\n \u003c/button\u003e\n \u003c/Link\u003e\n \u003c/div\u003e\n );\n}\n\nconst SearchResult = connectSearchBox(({ refine, currentRefinement }) =\u003e {\n const [isShow, setShow] = useState\u003cboolean\u003e(false);\n\n useEffect(() =\u003e {\n setShow(!!currentRefinement);\n }, [currentRefinement]);\n\n const handleResetSearchWords = useCallback(() =\u003e {\n refine('');\n }, [refine]);\n\n const hitComponent = ({ hit }: Props): JSX.Element =\u003e (\n \u003cHitComponent hit={hit} onClick={handleResetSearchWords} /\u003e\n );\n\n if (!isShow) return null;\n return (\n \u003c\u003e\n \u003cHits hitComponent={hitComponent} /\u003e\n \u003cPagination /\u003e\n \u003cPoweredBy /\u003e {/* 追å */}\n \u003c/\u003e\n );\n});\n\nexport default SearchResult;\n```\n\n\n\n## ã¢ã¼ãã«ã¦ã£ã³ãã¦ã表示\n\nTailwind CSS ã確èªãã¦ããã ãã¨ãããéãããããã¼å
ã§æ¤ç´¢ã®å¦çãè¡ããããã**ã¢ã¼ãã«ã¦ã£ã³ãã¦**ã«é£ã°ãã¦ããæ¤ç´¢çµæã表示ãããã¨ãå¤ãã¨æãã¾ãã\nä»åããããã¼ã«æ¤ç´¢ç»é¢ãç½®ãã¦ãã以ä¸ããããã¼ã伸ã³ç¸®ã¿ãã¦ãã¾ã表示崩ããèµ·ãã£ã¦ãã¾ããã\nå°ãæéããããã¾ãããã¢ã¼ãã«ã¦ã£ã³ãã¦å
ã§æ¤ç´¢ç»é¢ã表示ã§ããããã«ãã¦ããã¾ãããã\n\n### ã¢ã¼ãã«ã¦ã£ã³ãã¦ã®æºå\n\n[**fwywdï¼ãã¥ã¼ãï¼**](/) ã®ãã¼ã 㯠Tailwind CSS ãã¡ã¤ã³ã§ä½¿ç¨ãã¦ãããTailwind CSS ã§ã¯ [**Headless UI**](https://blog.tailwindcss.com/headless-ui-v1) ã¨ããããã±ã¼ã¸ã§åé¢ãã¦ã¢ã¼ãã«ã¦ã£ã³ãã¦ãªã©ãç°¡åã«å®è£
ã§ããããã«ãªã£ã¦ãã¾ãã\n\nã¾ãã¯æ¤ç´¢ç»é¢ãæ¼ãããã¢ã¼ãã«ã¦ã£ã³ãã¦ã表示ãããã¨ããã¾ã§ä½ã£ã¦ããã¾ãããã \n`PageHeader` ã«è¿½å ãã¦ãã `Search` ã³ã³ãã¼ãã³ãã¯ã¢ã¼ãã«ã¦ã£ã³ãã¦å
ã«ç§»æ¤ãããããã²ã¨ã¾ãé¤å»ãã¦ããã®ä½ç½®ã«ããããç´¹ä»ãã `SearchForm` ãæ¿å
¥ãã¦ãã¾ãã\n\n```bash\n# npm ã®å ´å\nnpm install --save-dev @headlessui/react\n\n# yarn ã®å ´å\nyarn add --dev @headlessui/react\n```\n\nã¹ã¿ã¤ãªã³ã°ãå«ãã¦ä»¥ä¸ã®ããã« `Modal` ä»ãã®æ¤ç´¢ãã¿ã³ãè¨å®ãã¾ããã \nHeadless UI ã§ã®ã¢ã¼ãã«ã¦ã£ã³ãã¦ã®å®è£
æ¹æ³ã«æ
£ãã¦ããªãæ¹ã¯ä»¥ä¸ã®åèè¨äºãèªãã¨è¯ãã§ãããã\n\nåèè¨äºï¼[Dialog (Modal) - Headless UI](https://headlessui.dev/react/dialog)\n\n```tsx\n// src/components/common/SearchForm.tsx\n\nimport { Dialog, Transition } from '@headlessui/react';\nimport SearchIcon from 'components/icons/Search';\nimport { useState, Fragment } from 'react';\n\nexport default function SearchForm(): JSX.Element {\n const [isOpen, setIsOpen] = useState\u003cboolean\u003e(false);\n const openModal = () =\u003e setIsOpen(true);\n const closeModal = () =\u003e setIsOpen(false);\n\n return (\n \u003c\u003e\n \u003cbutton\n onClick={openModal}\n className=\"flex items-center px-4 py-3 text-sm text-gray-500 rounded-full shadow focus:outline-none w-72 hover:bg-[#f1f7f8] hover:text-primary-dark hover:shadow-lg hover:duration-500\"\n \u003e\n \u003cSearchIcon /\u003e\n \u003cspan className=\"ml-2\"\u003eè¨äºãæ¤ç´¢\u003c/span\u003e\n \u003c/button\u003e\n\n \u003cTransition appear show={isOpen} as={Fragment}\u003e\n \u003cDialog as=\"div\" className=\"fixed inset-0 z-10 overflow-y-auto\" onClose={closeModal}\u003e\n \u003cdiv className=\"min-h-screen px-4 text-center\"\u003e\n \u003cDialog.Overlay className=\"fixed inset-0 opacity-50 bg-primary-lightest\" /\u003e\n\n \u003cTransition.Child\n as={Fragment}\n enter=\"ease-out duration-300\"\n enterFrom=\"opacity-0 scale-95\"\n enterTo=\"opacity-100 scale-100\"\n leave=\"ease-in duration-200\"\n leaveFrom=\"opacity-100 scale-100\"\n leaveTo=\"opacity-0 scale-95\"\n \u003e\n \u003cdiv className=\"inline-block w-full max-w-md p-6 my-8 overflow-hidden text-left align-middle bg-white shadow-xl transition-all transform rounded-2xl\"\u003e\n \u003cDialog.Title as=\"h3\" className=\"text-lg font-medium text-gray-900 leading-6\"\u003e\n æ¤ç´¢çµæ\n \u003c/Dialog.Title\u003e\n \u003cdiv className=\"mt-2\"\u003e\n \u003cp className=\"text-sm text-gray-500\"\u003eããã«æ¤ç´¢çµæãæ¿å
¥ãã¦ããã¾ã ã\u003c/p\u003e\n \u003c/div\u003e\n\n \u003cdiv className=\"mt-4\"\u003e\n \u003cbutton\n type=\"button\"\n className=\"inline-flex justify-center px-4 py-2 text-sm font-medium text-blue-900 bg-blue-100 border border-transparent roun
8ded-md hover:bg-blue-200 focus:outline-none focus-visible:ring-2 focus-visible:ring-offset-2 focus-visible:ring-blue-500\"\n onClick={closeModal}\n \u003e\n éãã\n \u003c/button\u003e\n \u003c/div\u003e\n \u003c/div\u003e\n \u003c/Transition.Child\u003e\n \u003c/div\u003e\n \u003c/Dialog\u003e\n \u003c/Transition\u003e\n \u003c/\u003e\n );\n}\n```\n\n\n\nããã§åä½ã確èªããã¨ä»¥ä¸ã®ããã«ãæ¤ç´¢ãã¿ã³ãæ¼ãã¨ã¢ã¼ãã«ã¦ã£ã³ãã¦ã表示ããã¾ããã \nããã«æ¤ç´¢çµæã追å ãã¦ããã¾ãããã\n\n### æ¤ç´¢çµæã¨çµ±åãã¦èª¿æ´\n\nå®è£
ããã³ã¼ãã®ä¸å¼ã¯å¾ã«åããæçµçã« CSS ã調æ´ãã¦ããã以ä¸ã®ããã«æ¤ç´¢æ©è½ãå®è£
ã§ãã¾ããã\n\n\n\nããã§ã¯ãå®è£
ããã³ã¼ãä¸å¼ã§ãã \næå¾ã«ç´°ãã調æ´ãããããããã¾ã§è§£èª¬ãã¦ããã¨ããã¨å°ãéã£ã¦ãã¾ãã®ã§ããã²ããããã確èªãã¦ã¿ã¦ãã ããã\n\n\u003e **è£è¶³ï¼** \n\u003e å
é¨ãªã³ã¯ããã®æ¤ç´¢çµæãæ®ãåé¡ã解決ãã¦ãã¾ãããããã®å¾ã**ã¢ã¼ãã«ã¦ã£ã³ãã¦ããã¼ã¸é·ç§»å¾ãæ¶ãã**ãæ³£ãæ³£ã `Link` ã³ã³ãã¼ãã³ãã使ããã« `a` ã¿ã°ã¸ã¨å¤ãã¾ããã \n\u003e ã³ã³ãã¼ãã³ãéã§ç¶æ
ã®å
±æãã§ããã° `Link` ã§ã®å®è£
ãå¯è½ã§ããã`useContext` ãç
©ããããããä»åã¯åä½åªå
ã¨ãã¾ããã \n\u003e ç¶æ
管çç¨ã®å¤é¨ããã±ã¼ã¸ã¨ã㦠Atom ãªã©ãããããã¡ãã使ãã¨é常ã«ç°¡åã§ãã®ã§ãè¿ããã¡ã«ãã¡ãã§ãªãã¡ã¯ã¿ãªã³ã°ããäºå®ã§ãã\n\n\u003e **è£è¶³ï¼** \n\u003e `instantsearch.css` 㯠`Search` ã³ã³ãã¼ãã³ãå
ã§èªã¿è¾¼ãã§ãã¾ããããCSS ã®ä¸æ¸ããããã®ã§ããã° `_app.tsx` ã§èªã¿è¾¼ã¾ãªãã¨ããã¾ããã§ããã \n\u003e ã¾ãåæã¨ãã¦ãCSS Modules ã¨ã¯ç°ãªãããã«ããè¡ããªã対象㮠CSS 㯠`_app.tsx` ã§ã°ãã¼ãã«ã«èªã¿è¾¼ãå¿
è¦ãããã¾ãã \n\u003e algolia ã§æå®ããã¦ããã¯ã©ã¹åã«åãããã«ã¯ CSS Modules ã使ããªããããå¿
ç¶çã«ä¸æ¸ãç¨ã® `algolia.css` 㯠`_app.tsx` ã§ã°ãã¼ãã«ã«èªã¿è¾¼ãå¿
è¦ãããã¾ãã \n\u003e `Search` ã³ã³ãã¼ãã³ãå
ã§ `instantsearch.css` ãèªã¿è¾¼ãã¨ã`_app.tsx` ã®å¾ã«èªã¿è¾¼ã¾ãããããèªä½ãã `algolia.css` ã§ä¸æ¸ããããã¨ãã§ãã¾ããã§ããã \n\u003e ãããã£ã¦ã`_app.tsx` å
ã§ `instantsearch.css` ãèªã¿è¾¼ãã å¾ã«èªä½ãã `algolia.css` ãèªã¿è¾¼ãã¨ãã£ãæ¹æ³ã«éãããããã§ãã\n\nãã¡ãã使ç¨ããã³ã¼ãä¸å¼ã«ãªãã¾ãã \n`SearchForm` ããããã¼ã«æ¿å
¥ãã¦ãã¾ãã\n\n```tsx\n// src/components/common/Search.tsx\n\nimport SearchResult from 'components/common/SearchResult';\nimport { indexName, searchClient } from 'lib/searchClient';\nimport { InstantSearch, SearchBox, Configure } from 'react-instantsearch-dom';\n\nexport default function Search(): JSX.Element {\n return (\n \u003cdiv\u003e\n \u003cInstantSearch indexName={indexName} searchClient={searchClient}\u003e\n \u003cConfigure hitsPerPage={5} /\u003e\n \u003cSearchBox /\u003e\n \u003cSearchResult /\u003e\n \u003c/InstantSearch\u003e\n \u003c/div\u003e\n );\n}\n```\n\n```tsx\n// src/components/common/SearchForm.tsx\n\nimport { Dialog, Transition } from '@headlessui/react';\nimport Search from 'components/common/Search';\nimport SearchIcon from 'components/icons/SearchIcon';\nimport { useState, Fragment } from 'react';\n\nexport default function SearchForm(): JSX.Element {\n const [isOpen, setIsOpen] = useState\u003cboolean\u003e(false);\n const openModal = () =\u003e setIsOpen(true);\n const closeModal = () =\u003e setIsOpen(false);\n\n return (\n \u003c\u003e\n \u003cbutton\n onClick={openModal}\n className=\"flex items-center px-4 py-3 text-sm text-gray-500 rounded-full shadow focus:outline-none w-72 hover:bg-[#f1f7f8] hover:text-primary-dark hover:shadow-lg hover:duration-500\"\n \u003e\n \u003cSearchIcon /\u003e\n \u003cspan className=\"ml-2\"\u003eè¨äºãæ¤ç´¢\u003c/span\u003e\n \u003c/button\u003e\n\n \u003cTransition appear show={isOpen} as={Fragment}\u003e\n \u003cDialog as=\"div\" className=\"fixed inset-0 z-10 overflow-y-auto\" onClose={closeModal}\u003e\n \u003cdiv className=\"min-h-screen px-4 text-center\"\u003e\n \u003cDialog.Overlay className=\"fixed inset-0 opacity-50 bg-primary-lightest\" /\u003e\n\n \u003cTransition.Child\n as={Fragment}\n enter=\"ease-out duration-300\"\n enterFrom=\"opacity-0 scale-95\"\n enterTo=\"opacity-100 scale-100\"\n leave=\"ease-in duration-200\"\n leaveFrom=\"opacity-100 scale-100\"\n leaveTo=\"opacity-0 scale-95\"\n \u003e\n \u003cdiv className=\"inline-block w-full max-w-2xl p-6 my-8 overflow-hidden text-left align-middle bg-white shadow-xl transition-all transform rounded-2xl\"\u003e\n \u003cSearch /\u003e\n \u003c/div\u003e\n \u003c/Transition.Child\u003e\n \u003c/div\u003e\n \u003c/Dialog\u003e\n \u003c/Transition\u003e\n \u003c/\u003e\n );\n}\n```\n\n```tsx\n// src/components/common/SearchResult.tsx\n\nimport { useEffect, useState, useCallback } from 'react';\nimport { Hit } from 'react-instantsearch-core';\nimport { Hits, connectSearchBox, Pagination, Highlight, PoweredBy } from 'react-instantsearch-dom';\n\ninterface HitDoc {\n objectID: string;\n url: string;\n title: string;\n description: string;\n content: string;\n}\n\ninterface Props {\n hit: Hit\u003cHitDoc\u003e;\n}\n\ninterface HitComponentProps extends Props {\n onClick: () =\u003e void;\n}\n\nfunction HitComponent({ hit, onClick }: HitComponentProps): JSX.Element {\n return (\n \u003ca href={hit.url}\u003e\n \u003cbutton onClick={onClick} className=\"flex justify-start w-full px-5 py-5\"\u003e\n \u003cHighlight attribute=\"title\" hit={hit} /\u003e\n \u003c/button\u003e\n \u003c/a\u003e\n );\n}\n\nconst SearchResult = connectSearchBox(({ refine, currentRefinement }) =\u003e {\n const [isShow, setShow] = useState\u003cboolean\u003e(false);\n\n useEffect(() =\u003e {\n setShow(!!currentRefinement);\n }, [currentRefinement]);\n\n const handleResetSearchWords = useCallback(() =\u003e {\n refine('');\n }, [refine]);\n\n const hitComponent = ({ hit }: Props): JSX.Element =\u003e (\n \u003cHitComponent hit={hit} onClick={handleResetSearchWords} /\u003e\n );\n\n if (!isShow) return null;\n return (\n \u003c\u003e\n \u003cp className=\"mt-5 text-sm font-semibold tracking-wider text-gray-500\"\u003eè¨äºä¸è¦§\u003c/p\u003e\n \u003cHits hitComponent={hitComponent} /\u003e\n \u003cPagination /\u003e\n \u003cPoweredBy /\u003e\n \u003c/\u003e\n );\n});\n\nexport default SearchResult;\n```\n\n```tsx\n// src/components/icons/SearchIcon.tsx\n\ninterface Props {\n w?: number;\n h?: number;\n}\n\nexport default function Search({ w = 6, h = 6 }: Props): JSX.Element {\n return (\n \u003csvg\n xmlns=\"http://www.w3.org/2000/svg\"\n className={`w-${w} h-${h} `}
8\n fill=\"none\"\n viewBox=\"0 0 24 24\"\n stroke=\"currentColor\"\n \u003e\n \u003cpath\n strokeLinecap=\"round\"\n strokeLinejoin=\"round\"\n strokeWidth={2}\n d=\"M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z\"\n /\u003e\n \u003c/svg\u003e\n );\n}\n```\n\n```css\n/* src/styles/algolia.css */\n\n.ais-Hits-list {\n padding: 5px 0;\n}\n\n.ais-Hits-item {\n background-color: #fafafa;\n border-radius: 5px;\n box-shadow: none;\n display: block;\n margin: 10px 0;\n padding: 0;\n}\n\n.ais-Hits-item:hover {\n background-color: #d9ebeb;\n}\n\n.ais-Hits-item:first-of-type,\n.ais-InfiniteHits-item:first-of-type {\n border-radius: 5px;\n}\n\n.ais-Highlight {\n font-weight: 600;\n}\n\n.ais-Highlight-highlighted {\n background-color: transparent;\n color: #06bbbc;\n}\n\n.ais-Pagination {\n display: flex;\n justify-content: center;\n}\n\n.ais-PoweredBy {\n display: flex;\n justify-content: flex-end;\n}\n\n.ais-PoweredBy-text {\n font-size: small;\n margin-right: 5px;\n}\n```\n\n```tsx\nsrc/pages/_app.tsx\n\n...\nimport 'instantsearch.css/themes/satellite-min.css';\nimport 'styles/algolia.css';\n\nexport default function App({ Component, pageProps }: AppProps): JSX.Element {\n ...\n return \u003cComponent {...pageProps} /\u003e;\n}\n```\n\n## ãããã«\n\n### algolia ã¯æ¤ç´¢ã®æ©è½ã ãã§ãªã UI ã¾ã§ä½ãè¾¼ã¾ãã¦åªç§\n\nããã¾ã§ä¸ç·ã«å®è£
ãã¦ããããæ¹ãæ¬å½ã«ãç²ãæ§ã§ããã\nä»åã¯ããã¾ã§ã§æãé·ãè¨äºã¨ãªããæ¬å½ã«å¤§å¤ã ã£ãã¨æãã¾ãã\n\nç§èªèº«ã¯è¨äºãæ¸ããªããæ¤è¨¼ãã¦å®è£
ããé
ãã®ãã¼ã¹ã§ããã \nããã§ãï¼æ¥ããã°çµãããã¨ãã§ããã®ã¯ããã¯ã algolia ã使ãããããUI ã¾ã§ä¸å¯§ã«ä½ãè¾¼ã¾ãã¦ãããããã§ãã \nããå°ããã¹ããã¡ããã¨æ¸ããããã¾ã ã¾ã ãªãã¡ã¯ã¿ãªã³ã°ãå¿
è¦ãªã¨ããã§ãããã¾ãã¯åä½ããã¦ã¿ããã¨ã大äºã§ãã®ã§ããã®è¾ºãã®åªå
度ã¯ä½ãã«ãã¦ãã¾ãã\n\næ¬æ¥ãæ¤ç´¢ã¨ãã£ãæ©è½ãå®è£
ãããã¨æãã¨ããªã大å¤ã§ãã®ã§ããã®å®è£
ã³ã¹ãã§ UX ãåä¸ããã®ã§ããã°ãåãçµãã§ã¿ã¦ãè¯ãã¨æãã¾ãã \næ¥æ¬èªã§ãè¨äºããã£ãã
8®ã§ãããåºæ¬çã«ã¯ææç©ãã¼ã¹ã§ã®å ±åè¨äºãå¤ãããã®éãåããã¨ããã«å
¬å¼ãã¼ã¸ãè¦ã¦ãã²ã¨ã¤ãã¤å®è£
ãã¦ã¿ã¦...ã¨ãã®ç¹ãçµæ§å¤§å¤ã§ããã \nãã®ä»£ããã«ãç§ä»¥éã®äººã¯ãªãã¹ã調æ»ããæéãããå®è£
ããªããçè§£ã«éããç½®ãããããªè§£èª¬ãä½ãã¾ããã®ã§ããã²ãæ´»ç¨ããã ãã¾ãã¨å¹¸ãã§ãã\n\næ ªå¼ä¼ç¤¾ãã«ã¬ã¯ 代表åç· å½¹ä¼é· \nåå´ äº®ä» \ntwitter: [**@yoshizaki_91**](https://twitter.com/yoshizaki_91)\n"}],"newPosts":[{"id":"/tech/markdown-viewer-by-markdoc","data":{"title":"Markdoc ï¼Tailwind UI ã® Syntax ãã¼ã¹ï¼ã«ãã Markdown Viewer ã®å®è£
","date":"2022-08-09T17:30:00.000+0900","img_path":"/img/pages/tech/markdown-viewer-by-markdoc/ogp.png","img_alt":"Markdoc ï¼Tailwind UI ã® Syntax ãã¼ã¹ï¼ã«ãã Markdown Viewer ã®å®è£
","description":"fwywd ãã¼ã ã§ã¯æ°ããã°ã Tailwind UI ã® Syntax ã使ç¨ãã¦å®è£
äºå®ã§ããè¨äºã®è¡¨ç¤ºã¨è¨äºä½æç»é¢ã®ãã¬ãã¥ã¼ãæããã \u0026 å¾ã
ã® Syntax å°å
¥ãã¹ã ã¼ãºã«ãããç®çã§ Tailwind UI ã® Syntax ãã¼ã¹ã§ Markdown Viewer ãå®è£
ãã¾ããï¼","tags":["Tailwind CSS","Tailwind UI","Syntax","Markdoc","Markdown"],"prev_title":"ãAzure App Service | Node.jsãGitHub Actions ãå©ç¨ãã¦ç¶ç¶ãããã¤ãã¦ã¿ããã ãã©ãã«ã¬ã¤ãä»ã","prev_link":"/tech/deployment-by-azure-app-service-for-nodejs","next_title":"","next_link":"","author":"takahashi"},"content":"\nfwywd ãã¼ã ã§ã¯æ°ããã°ã Tailwind UI ã® Syntax ã使ç¨ãã¦å®è£
äºå®ã§ãã\n\n[Syntax - Tailwind CSS Documentation Template](https://tailwindui.com/templates/syntax)\n\nè¨äºã®è¡¨ç¤ºã¨è¨äºä½æç»é¢ã®ãã¬ãã¥ã¼ãæããã \u0026 å¾ã
ã® Syntax å°å
¥ãã¹ã ã¼ãºã«ãããç®çã§ Tailwind UI ã® Syntax ãã¼ã¹ã® Markdown Viewer ãå®è£
ãã¾ããï¼\n\n## markdoc ã®ã©ã¤ãã©ãªãã¤ã³ã¹ãã¼ã«\n\n```bash\nyarn add @markdoc/markdoc @markdoc/next.js -D\n```\n\n## next.config.js ãæ¸ãæãã\n\næ¬å¼§ã®ä½ç½®ãééããããã®ã§æ³¨æãå¿
è¦ã§ãã\n\n```jsx\n// next.config.js\n\nconst withMarkdoc = require('@markdoc/next.js');\n\n/** @type {import('next').NextConfig} */\nconst nextConfig = {\n reactStrictMode: true,\n images: {\n deviceSizes: [340, 640, 768, 1024, 1280, 1440, 1980],\n domains: [],\n },\n pageExtensions: ['js', 'jsx', 'ts', 'tsx', 'md'],\n};\n\nmodule.exports = withMarkdoc()(nextConfig);\n```\n\n## Prose.tsx\n\nMarkdoc ã§å¤æãããã¼ã¿ã children ã§æ¸¡ãç»é¢è¡¨ç¤ºããã³ã³ãã¼ãã³ãã§ãã\n\nTailwind CSS ã® prose ã¨ããã¯ã©ã¹ã«ãã£ã¦ä½ç½ãæåéã調ç¯ãã¦ãã¾ãã\n\n䏿ºåã¨ãã¦ãclsx, @tailwindcss/typography ãã¤ã³ã¹ãã¼ã«ãã¾ãã\n\n```bash\nyarn add clsx -D\n\nyarn add @tailwindcss/typography -D\n```\n\ntailwind.config.js ã« plugins ã追è¨ãã¾ãã\n\n```jsx\nplugins: [require('@tailwindcss/typography')],\n```\n\nProse.tsx ã®å
容ã¯ä»¥ä¸ã§ãã\n\n```tsx\n// Prose.tsx\n\nimport clsx from 'clsx';\nimport { ReactNode } from 'react';\n\ninterface ProseProps {\n children: ReactNode;\n className?: string;\n}\n\nexport const Prose: React.FC\u003cProseProps\u003e = ({ className, ...props }) =\u003e (\n \u003cdiv\n className={clsx(\n className,\n 'dark:text-gray-400 prose prose-gray max-w-none dark:prose-invert',\n // headings\n 'prose-headings:font-display prose-headings:scroll-mt-28 prose-headings:font-normal lg:prose-headings:scroll-mt-[8.5rem]',\n // lead\n 'prose-lead:text-gray-700 dark:prose-lead:text-gray-700',\n // links\n 'prose-a:font-semibold dark:prose-a:text-primary-500',\n // link underline\n 'prose-a:no-underline prose-a:shadow-[inset_0_-2px_0_0_var(--tw-prose-background,#fff),inset_0_calc(-1*(var(--tw-prose-underline-size,4px)+2px))_0_0_var(--tw-prose-underline,theme(colors.primary.200))] hover:prose-a:[--tw-prose-underline-size:6px] dark:[--tw-prose-background:theme(colors.gray.9
800)] dark:prose-a:shadow-[inset_0_calc(-1*var(--tw-prose-underline-size,2px))_0_0_var(--tw-prose-underline,theme(colors.primary.800))] dark:hover:prose-a:[--tw-prose-underline-size:6px]',\n // pre\n 'prose-pre:rounded-xl prose-pre:bg-gray-900 prose-pre:shadow-lg dark:prose-pre:bg-gray-800/60 dark:prose-pre:shadow-none dark:prose-pre:ring-1 dark:prose-pre:ring-gray-700/10',\n // hr\n 'dark:prose-hr:border-gray-800',\n )}\n {...props}\n /\u003e\n);\n```\n\nMarkdoc ã§ãã¼ã¿ã夿ã㦠Prose.tsx ã«æ¸¡ãã³ã³ãã¼ãã³ãã使ãã¾ãã\n\n```tsx\n// Markdown.tsx\n\nexport const Markdown = () =\u003e {\n const doc = `\n # heading 1\n \n ## heading 2\n\n 1. ol\n 1. ol\n\n - ul\n - ul\n`;\n\n const ast = Markdoc.parse(doc);\n const content = Markdoc.transform(ast);\n const children = Markdoc.renderers.react(content, React);\n\n return (\n \u003cProse className={`${style.md} h-[600px] w-full overflow-auto border border-primary-800 p-2`}\u003e\n {children}\n \u003c/Prose\u003e\n );\n};\n```\n\nä½ç½ãæåé㯠Tailwind CSS ã® prose ã§ããæãã«ãªã£ã¦ããã®ã§ããã¹ãã®å¤§ãããè²ãªã©ã®è£
飾ã CSS ã¢ã¸ã¥ã¼ã«ã§é©ç¨ãã¾ãã\n\nãã¼ã¯ãã¦ã³è¡¨ç¤ºã§ãã¾ãã\n\n\n\n## Fence.tsx\n\nãã¼ã¯ãã¦ã³ã®è¡¨ç¤ºã¯ã§ãã¾ãããã³ã¼ãã®ãã¤ã©ã¤ãã¯ãããªãç¶æ
ã§ãã\n\nMarkdoc ã® Syntax highlighting ãåèã«ã㦠Tailwind UI ã® Syntax ãã¼ã¹ã§ã³ã¼ãã®ãã¤ã©ã¤ããå®è£
ãã¾ãã\n\n[Common examples](https://markdoc.io/docs/examples#syntax-highlighting)\n\nå°ãè¤éã§ããã大ã¾ããªæµãã¨ãããã\n\n1. code ããã¤ã©ã¤ããã `Fence.tsx` ã使ãã\n2. code ãåãåºãã¦ãã¤ã©ã¤ãé©ç¨ããããã® config ãã¡ã¤ã« `node.ts` ã使ãã\n3. Markdoc ã§ãã¼ã¿å¤æãã颿°ã« `node.ts` ãã config ãæ¸¡ã\n\nã¨ãã£ãæµãã§ãã\n\n### code ããã¤ã©ã¤ããã Fence.tsx ã®ä½æ\n\nã³ã¼ãããã¤ã©ã¤ãããããã® prism-react-renderer ãã¤ã³ã¹ãã¼ã«ãã¾ãã\n\n```bash\nyarn add prism-react-renderer -D\n```\n\nTailwind UI ãããã®ã¾ã¾æã£ã¦ãã¦åä»ãããã¦ãã¾ãã\n\n`\u003cHighlight\u003e` ã«æ¸¡ã code ã® children 㯠String(children) ã¨ããªãã¨åã®ã¨ã©ã¼ãçºçãã¦ãã¾ãã®ã§æ³¨æã§ãã\n\n```tsx\n// Fence.tsx\n\nimport { Fragment, ReactNode } from 'react';\nimport Highlight, { defaultProps, Language } from 'prism-react-renderer';\nimport vsDark from 'prism-react-renderer/themes/vsDark';\n\ninterface FenceProps {\n children: ReactNode;\n language: Language;\n}\n\nexport const Fence: React.FC\u003cFenceProps\u003e = ({ children, language }) =\u003e (\n \u003cHighlight\n {...defaultProps}\n code={children === undefined ? '' : String(children).trimEnd()}\n language={language}\n theme={vsDark}\n \u003e\n {({ className, style, tokens, getTokenProps }) =\u003e (\n \u003cpre className={className} style={style}\u003e\n \u003ccode\u003e\n {tokens.map((line, lineIndex) =\u003e (\n \u003cFragment key={lineIndex}\u003e\n {line\n .filter((token) =\u003e !token.empty)\n .map((token, tokenIndex) =\u003e (\n \u003cspan key={tokenIndex} {...getTokenProps({ token })} /\u003e\n ))}\n {'\\n'}\n \u003c/Fragment\u003e\n ))}\n \u003c/code\u003e\n \u003c/pre\u003e\n )}\n \u003c/Highlight\u003e\n);\n```\n\n### ãã¤ã©ã¤ããé©ç¨ãããããã® node.ts ã使\n\n```tsx\n// markdoc/node.ts\n\nconst node = {\n fence: {\n render: 'Fence',\n attributes: {\n language: {\n type: String,\n },\n },\n },\n};\n\nexport default node;\n```\n\n### Markdoc ã§ãã¼ã¿å¤æãã颿°ã« config ãæ¸¡ã\n\n```tsx\n// Markdown.tsx\n\nconst ast = Markdoc.parse(doc);\nconst content = Markdoc.transform(ast, { nodes: node });\nconst children = Markdoc.renderers.react(content, React, {\n
8components: { Fence },\n});\n```\n\ncode ããã¤ã©ã¤ãããã¾ãã\n\n\n\n## ã¾ã¨ã\n\nTypeScript ã®åä»ã㨠code ã®ãã¤ã©ã¤ã表示ã«è¦æ¦ãã¾ããããªãã¨ããªãã¾ããã\n\nãªã«ãã Tailwind CSS ã® prose ã便å©ã§ããï¼\n\nå°ãããã¢ãã¯ãªã¨ããã§ããåèã«ãªãæ¹ãããã°å¬ããã§ãï¼\n"},{"id":"/tech/deployment-by-azure-app-service-for-nodejs","data":{"title":"ãAzure App Service | Node.jsãGitHub Actions ãå©ç¨ãã¦ç¶ç¶ãããã¤ãã¦ã¿ããã ãã©ãã«ã¬ã¤ãä»ã","date":"2022-08-06T11:30:00.000+0900","img_path":"/img/pages/tech/deployment-by-azure-app-service-for-nodejs/ogp.png","img_alt":"GitHub Actions ãå©ç¨ãã¦ç¶ç¶ãããã¤ãã¦ã¿ãã","description":"Q. ããªã³ãã¼ãã£ã³ã°ã§æãããã©ãã£ãé¨åã¯ã©ãã§ãããï¼ãçãã¯ã»ã»ã»\\ Azure App Service 䏿ã¦ãï¼/ Azure ãµã¼ãã¹ç¾¤ã®ä¸ã§ã屿ã®é¢åèããèªãï¼å½ç¤¾æ¯ï¼Azure App Service ã§ã®ãããã¤æ¹æ³ã¬ã¤ããå§ã¾ãå§ã¾ãã","tags":["Azure","Azure App Service","Express.js","NestJS","Next.js"],"prev_title":"ã³ã¼ããæ¸ããã¨ã³ã¸ãã¢ã STUDIO ããã¸ãã¹åãã«ä½¿ã£ã¦ããã£ãã¡ãªããã¨ãã¡ãªãã","prev_link":"/tech/why-adopt-studio","next_title":"Markdoc ï¼Tailwind UI ã® Syntax ãã¼ã¹ï¼ã«ãã Markdown Viewer ã®å®è£
","next_link":"/tech/markdown-viewer-by-markdoc","author":"furukawa"},"content":"\nQ. ããªã³ãã¼ãã£ã³ã°ã§æãããã©ãã£ãé¨åã¯ã©ãã§ãããï¼ã\n\n\\ Azure App Service 䏿ã¦ãï¼/\n\nAzure ãµã¼ãã¹ç¾¤ã®ä¸ã§ã屿ã®é¢åèããèªãï¼å½ç¤¾æ¯ï¼Azure App Service ã§ã®ãããã¤æ¹æ³ã¬ã¤ããå§ã¾ãå§ã¾ãã\n\næ¬è¨äºã¯[å
¬å¼ããã¥ã¡ã³ã](https://docs.microsoft.com/ja-jp/learn/modules/javascript-deploy-expressjs-app-service/)ãåèã«ä½æãã¦ãã¾ãã\n\n## ä½¿ç¨æè¡\n\n- Node.js\n- Express.js\n- Visual Studio Code\n- [GitLens](https://gitlens.amod.io/)ï¼Visual Studio Code ã®æ¡å¼µæ©è½ï¼\n- Azure App Service\n- GitHub\n- GitHub Actions\n\n## ãã®è¨äºãèªãã§ããããã¨\n\nAzure App Service ã« GitHub Actions ã使ç¨ãã¦ã¢ããªã±ã¼ã·ã§ã³ãç¶ç¶çã«ãããã¤ããããã®å
·ä½çãªæé ã\n\nã¤ã¾ãã**main ãã©ã³ã㸠push ãããã³èªåçã« Azure App Service ã¸ãããã¤ãã**ããã¨ãã§ããããã«ãªãã¾ãã\n\n## ãã®è¨äºã§ã¯èª¬æããªããã¨\n\n- ãµãã¹ã¯ãªãã·ã§ã³ããªã½ã¼ã¹ã°ã«ã¼ãããªã½ã¼ã¹ãªã© Azure ç¹æã®ç¨èªã®æ°ã
ã詳ããç¥ãããæ¹ã¯[ãã¡ã](https://docs.microsoft.com/ja-jp/learn/modules/javascript-deploy-expressjs-app-service/use-resource-group)ãã¾ãèªãã§ã¿ã¦ãã ããã\n- Node.js ã GitHub ãªã©ä½¿ç¨æè¡ã«é¢ããåºç¤ç¥è\n\n## 大ã¾ããªæé ã®æµã\n\n1. ãããã¤ããããã®ãç¨æãã\n2. ãªã½ã¼ã¹ã°ã«ã¼ãã使ãã\n3. Azure App Service ãªã½ã¼ã¹ã使ãã\n4. GitHub Actions ã使ããããæºåãã\n5. CI/CD çµç±ã§ãããã¤\n\n## 1. ãããã¤ããããã®ãç¨æ\n\nNode.js 製ã§ããã°ãªãã§ã OKãåºæ¬ã®æµãã¯åãã§ãã\n\nä»å㯠Express.js ã§ããã£ã¨ç¨æãã¡ããã¾ãã\n\n[Azure ãå
¬å¼ã«ç¨æãã¦ãããµã³ãã«](https://github.com/Azure-Samples/msdocs-javascript-nodejs-server)ãã¯ãã¼ã³ã\n\n\n\n\n\n\n\nä»åã¯ã2-Deploy-app-to-azureãã®ä¸èº«ã ã使ç¨ãã¾ããä»ã¯æ¶ãã¡ãã£ã¦ OKã\n\n\n\n\n\n## 2. Azure Portal ãããªã½ã¼ã¹ã°ã«ã¼ãã使\n\nã¢ã«ã¦ã³ã使ã»ãµãã¹ã¯ãªãã·ã§ã³ã®è¨å®ã«ã¤ãã¦ã®èª¬æã»æé ã¯çãã¾ãã\n\nã¾ã ã®æ¹ã¯ Azure å
¬å¼ãµã¤ãããç¡æã¢ã«ã¦ã³ãã使ã Azure Portal ã¸ã¢ã¯ã»ã¹ã»ãã°ã¤ã³ãã¦ãµãã¹ã¯ãªãã·ã§ã³ã®ç¨æã¾ã§è¡ã£ã¦ãã ããã\n\næé ã詳ããç¥ããã人ã¯[ãã¡ã](https://docs.microsoft.com/ja-jp/learn/modules/create-an-azure-account/)ã\n\nAzure Portal ãããªã½ã¼ã¹ã°ã«ã¼ãã使ãã¦ããã¾ãã\n\n\n\n\n\n\n\n\n\nç¡äºä½æãããã°æåã\n\n## 3. Azure App Service ãªã½ã¼ã¹ã®ä½æ\n\n2ã§ä½æãããªã½ã¼ã¹ã°ã«ã¼ãã®ä¸ã« Azure App Service ãªã½ã¼ã¹ãä½ã£ã¦ããã¾ãã\n\nã¾ãã¯ãã©ã³ã®ä½æããã\n\n\n\n\n\nAzure Service ãã©ã³ã鏿ãã使ããã¯ãªãã¯ã\n\n\n\nä»åã¯ããã£ã¨è©¦ãããã ããªã®ã§ä¾¡æ ¼ã¬ãã«ã **Free F1** ã¸å¤æ´ã**ããã夿´ãã¦ãããªãã¨æé¡èª²éãçºçããããæ³¨æï¼**\n\nã確èªããã³ä½æãâã使ãã§ãªã½ã¼ã¹ä½æãå®äºãã¾ãã使ã¾ã§å°ãæéãããããã¨ãããã®ã§ã³ã¼ãã¼ã§ãåããªããå¾
ã¡ã¾ãããã\n\n\n\nå®äºããã App Service ã§ Web ã¢ããªã®ãªã½ã¼ã¹ãä½ã£ã¦ããã¾ãã\n\n\n\n\n\n\n\nã確èªããã³ä½æãâã使ãã§å®äºããã¡ããæéããããããã³ã¼ãã¼ãã²ã¨åãããªããå¾
ã¡ã¾ããããå®äºå¾ãªã½ã¼ã¹ã«ç§»åããã¨ãããªæãã\n\n\n\n## 4. GitHub Actions ã®æºåãããã\n\nã¾ã㯠GitHub ã«ã¬ãã¸ããªã使ãã¾ããããè©³ç´°ãªæé ã¯çãã¾ããGitHub ã¢ã«ã¦ã³ããæã£ã¦ããªãæ¹ã¯ [GitHub å
¬å¼ãµã¤ã](https://github.co.jp/)ã§ã¢ã«ã¦ã³ãã使ã»ãã°ã¤ã³ãã¦ãã ããã\n\nã¬ãã¸ããªã®ä½æãå®äºããããããªæãã®ãã¼ã¸ãåºãã£ã¦ããã¯ããURL ãã³ãã¼ãã¦ããã¾ãã\n\n\n\n1ã§éãã¦ãã Visual Studio Code ã¸æ»ãã¾ãããªã¢ã¼ãå
ãèªèº«ã§ä½æããã¬ãã¸ããªã¸å¤æ´ãã¡ããã¾ãããã\n\n\n\nâ» REMOTES ãªãã¦è¦å½ãããªããï¼ã¨ããäººã¯æ¡å¼µæ©è½ãGitLensããå°å
¥ãã¦ãã ããã\n\n\n\nname: origin\n\nurl: ã³ãã¼ãã URL ãè²¼ãä»ã\n\nå
8®äºããããã£ããã³ãããï¼ãã©ã³ãã®çºè¡ã試ãã¦ã¿ã¦ãã ãããææ°ã®ãã®ã«åæ ããã¦ããã°æåã\n\n\n\nãããããæ¬çªã GitHub Actions çµç±ã§ãããã¤ããæºåãé²ãã¦ããã¾ãã\n\n3ã§ä½æãã App Service ã¸ç§»åããGitHub Actions ã¨é£æºããã¦ããã¾ãã\n\n\n\n\n\nä¿åããã¨ãã便å©ã GitHub å´ã§åæã«è¨å®ãã¡ã¤ã«ãçæãã¦ããã¾ãã\n\n\n\n## 5. CI/CD çµç±ã§ãããã¤\n\nãã£ãã GitHub Actions çµç±ã§ãããã¤ãã¦ã¿ã¾ãããã\n\nãããé·ã£ããããååã® `.github/workflows/main_fwywdazuredeployintro.yml`ãã¡ã¤ã«ã `deploy.yml` ã¸åç§°å¤æ´ãããã·ã¥ãã¦ã¿ã¾ãã\n\n\n\ndeploy.yml ã®ããã©ã«ãè¨å®ã§ã¯ãmain ãã©ã³ãã« push ããéã«ãããã¤ãèµ°ããããã«ãªã£ã¦ãã¾ãããããã¤ãçµãã£ãããã£ãã確èªãã«ããã¾ãããã\n\n\n\nããã»ã»ã» Azure App Service ããã®ããããã»ã»ã»ï¼\n\n\n\n**åºããã親ã®é¡ããè¦ãå
æ¯ã**\n\nã¢ããªã±ã¼ã·ã§ã³èµ·åæã«åºãã¨ã©ã¼ãAzure App Service 触ã£ããã¨ããã人ã¯çµ¶å¯¾ã«è¦ããã¨ãããã¤ã§ããç§ã¯ãã¯ã :( ãè¦ãã¨é¦ã®å¾ãããã¥ãã»ã»ã»ã¨ãªãã¾ãã\n\n## :( Application Error ã«ééããæã®å¯¾å¦æ³\n\nåºæ¬ã¯ä»¥ä¸ã®ã¹ãããã§å°éã«ã¨ã©ã¼ãæ½°ãã¦ããå½¢ã«ãªãã¾ãã\n\n1. ãã°ã確èªãã\n2. åå ã£ã½ãç®æãæ¢ãã¦è©¦è¡é¯èª¤ãã\n\n### 1. ãã°ã確èªãã\n\nAzure Portal 㧠該å½ãã Azure App Service ãéããåé¡ã®è¨ºæã¨è§£æ±ºããè¦ãã¦ã¿ã¾ããããä¸é¨ã«ãããã¦ã§ãã¢ããªãã¦ã³ããã¯ãªãã¯ã\n\n\n\nç¾å¨7ã¤ã®åé¡ãæ±ãã¦ããæ¨¡æ§ã詳ããè¦ã¦ããã¾ãã\n\n\n\n### 2. åå ã£ã½ãç®æãæ¢ãã¦è©¦è¡é¯èª¤ãã\n\n7ã¤ã®åé¡ã®ãã¡ç´æ¥ã¢ããªã±ã¼ã·ã§ã³ã¨ã©ã¼ãå¼ãèµ·ããã¦ããããªãã®ãæ¢ãã¾ãããã\n\n\n\nä¸ãã4ã¤ã¯ãææãã©ã³ã«ã¢ããã°ã¬ã¼ããã¦ã»ãããªâ¤ï¸ã¨è¨ã£ã¦ããã ãããè¦åã§èµ·å失æã«é¢ãããã®ã§ã¯ãªããããã£ã½ããã¨ãèªã¿åãã¾ããä¸ã®3ã¤ãã¢ããªã±ã¼ã·ã§ã³ã¨ã©ã¼ã«é¢ãã£ã¦ãããã§ããããã«åæããã¨ãµã¼ãã¼ã¨ã©ã¼ã¯èµ·åã«å¤±æãã¦ãããããã«åºã¦ãããã®ã¨äºæ³ããã¾ããããããã**ã³ã³ããã¯ã©ãã·ã¥ã»ã³ã³ããã®åé¡ã解決ããã°èµ·åã§ãããï¼**ãã¨ç®æ®µãã¤ãããã¾ããã\n\nä¸çªæªãããªãã³ã³ããã¯ã©ãã·ã¥ãããè¦ã¦ããã¨ã»ã»ã»\n\n\n\nåå ãã²ã¨ã¤å¤æã**ã¢ããªãã¹ã¿ã¼ããããããã®ã³ãã³ããè¨å®ããã¦ããªã**ããã§ãããã£ããè¨å®ãã«ããã¾ããããå·¦ãã¼ã®è¨å®å
ã«ããæ§æãã¯ãªãã¯ãå
¨è¬è¨å®ãè¦ãã¦ã¿ã¾ãã\n\n\n\n確ãã«ã¹ã¿ã¼ãã¢ããã³ãã³ãã空ã£ã½ã«ãªã£ã¦ã¾ãããã§ã¯ããã« `npm start` ãªãã `yarn start` ãããããï¼ã¨é常ã¯ãªãããã§ããã**å
¥ãã¦ãåããªãããæ³¨æ**ãç´æ¥ node ã³ãã³ããå©ãã¾ãã`package.json` ã® start ã¹ã¯ãªããã確èªãã¦ã¿ã¾ãããã\n\n\n\n`\"start\": \"cross-env-shell DEBUG=express:* node index.js\"`ã¨ãªã£ã¦ã¾ããã`cross-env-shell DEBUG=express:*`ã¯ããããç°å¢å¤æ°ã»ãããã°ã«é¢ããã³ãã³ããªã®ã§çç¥ã`node index.js`ã ãæãåºãã¦å
¥åã»ä¿åãã¾ãã\n\n\n\nãåèµ·åãã¾ããï¼ãã¨èãããããäºæ¿ãã¦ä¿åå®äºã§ãã\n\nããã§ä¸åº¦ã¢ããªãè¦ãã¦ã¿ã¾ãããã\n\n\n\n以åã¨ãã¦ã¢ããªã±ã¼ã·ã§ã³ã¨ã©ã¼ã¯åºãã¾ã¾ãã¾ã 対å¦ãã¦ããªãã¨ã©ã¼ãæ®ã£ã¦ããããã§ãããããä¸ã¤ã®åé¡ã ã£ããã³ã³ããã®åé¡ããè¦ã¦ã¿ã¾ãã\n\n\n\nã©ãããã³ã³ãããã¿ã¤ã ã¢ã¦ãããããã§èµ·åã§ãã¦ããªãã¿ããã»ã»ã»ã¨ããã®ãè¦ã¦åãã¾ãã説æãè¥å¹²åããé£ãã®ã§ããããã¢ããªã±ã¼ã·ã§ã³ã®è¨å®ã§`WEBSITES_CONTAINER_START_TIME_LIMIT`ã®è¨å®æéã伸ã°ãã¦ã¿ã¦ããã¨ãããã¨ãããã§ãããã£ãã夿´ãã«ããã¾ãã\n\n\n\nä¿åããã¨ã¢ããªã±ã¼ã·ã§ã³ãåèµ·åããã¾ããããã§æ£å¸¸ã«èµ·åã§ããã¯ããã»ã»ã»\n\n\n\n**ã§ãã§ãããããï¼ï¼ï¼ï¼ã¯ã½ãã«ãã¤ã¹ï¼**\nãã¤ãããã¾ã§ããã»ã»ã»ï¼\n\n## ãã©ãã«ã¬ã¤ã\n\næå¾ã« Next.js ã§ä½ã£ãã¢ããªã±ã¼ã·ã§ã³ã¨ NestJS ã§ä½ã£ã API ããããããããã¤ããæã«ééããã¨ã©ã¼ã¨å¯¾å¦æ³ããç´¹ä»ã\nåãçç¶ã«è¦ããã§ããããªãã«å±ãã¾ãããã«ã»ã»ã»ï¼\n\n### ãããã¤ã«æéããããããã\n\nã¢ããªã±ã¼ã·ã§ã³ã®å®¹éãå°ãããªãå ´åããããã¤ã¾ã§ã
8«åã¾ããæéããããã¾ããç§ã®å ´å Next.js ã§ä½ã£ãç°¡å㪠Todo ã¢ããªããããã¤ããã®ã«**50å**ãããã¾ããã50åå¾
ã£ãæå¥ãããã¤ã«å¤±æããæ¥ã«ã¯æ³¡å¹ãã¦åãããã«ãªãã¾ãã»ã»ã»ï¼å®ä½é¨ï¼ã\n\n坾妿³ã¨ã㦠`deploy.yml` ãã¡ã¤ã«ã®ä¸èº«ãããã£ã¦ã¢ããªã zip åâ GitHub Actions ã«ã¢ãããã¼ãâ zip ã Azure App Service ã¸ã¢ãããã¼ããããã夿´ãããã¨ãæãããã¾ããç§ã¯ããã§ãããã¤æéã**7å**ã¾ã§ç縮ã§ãã¾ãããæãã¹ãããã©ã¼ã¢ãã¿ã¼ï¼\n\nåèã« Next.js ããããã¤ããæã®ã³ã¼ãã®ä¸èº«ãè¼ãã¦ããã¾ãã\n\n```yaml\nname: Build and deploy Node.js app to Azure Web App - fwywdTodoAppApi\n\non:\n push:\n branches:\n - main\n\n workflow_dispatch:\n\njobs:\n build:\n runs-on: ubuntu-latest\n\n env:\n DATABASE_URL: ${{ secrets.DATABASE_URL }}\n DB_PASSWORD: ${{ secrets.DB_PASSWORD }}\n DB_USERNAME: ${{ secrets.DB_USERNAME }}\n\n steps:\n - uses: actions/checkout@v2\n\n - name: Set up Node.js version\n uses: actions/setup-node@v1\n with:\n node-version: '16.x'\n\n - name: yarn install, build, and test\n run: |\n yarn install\n yarn build\n yarn test-setup\n yarn test:unit \n yarn test:integration\n\n - name: delete node_modules dir\n run: rm -rf node_modules\n\n - name: Zip all files for upload between jobs\n run: zip --symlinks -r next.zip ./*\n\n - name: Upload artifact for deployment job\n uses: actions/upload-artifact@v2\n with:\n name: node-app\n path: next.zip\n\n deploy:\n runs-on: ubuntu-latest\n needs: build\n environment:\n name: 'Production'\n url: ${{ steps.deploy-to-webapp.outputs.webapp-url }}\n\n steps:\n - name: Download artifact from build job\n uses: actions/download-artifact@v2\n with:\n name: node-app\n\n - name: yarn install production\n run: yarn install --production\n\n - name: 'Deploy to Azure Web App'\n id: deploy-to-webapp\n uses: azure/webapps-deploy@v2\n with:\n app-name: 'fwywdtodoapp'\n slot-name: 'Production'\n publish-profile: ${{ secrets.AZUREAPPSERVICE_PUBLISHPROFILE_630E8D07124C436791B1A377E09DC005}}\n package: next.zip\n\n - name: Delete zip file\n run: rm next.zip\n```\n\n### ãããã¤ãéä¸ã§æ¢ã¾ã\n\nãã¡ããã¢ããªã±ã¼ã·ã§ã³ã®å®¹éãããããããæã«çºçã`node_modules` ã `npm install` ã¾ã㯠`yarn install` ããéãã¦ã³ãã¼ãã«æéããããããã¦ã¿ã¤ã ã¢ã¦ããããã¿ã¼ã³ã§ããããã¸ã§ã¯ããã©ã«ãç´ä¸ã«`.yarnrc` ãã¡ã¤ã«ãä½ã£ã¦ä»¥ä¸ãè¨è¿°ãããã¨ã«ããåé¿å¯è½ã\n\n```yaml\nnetwork-timeout 600000\n```\n\n### ã¹ã¿ã¼ãã¢ããã³ãã³ãã«é¢ããã¨ã©ã¼\n\n使ç¨ãããã¬ã¼ã ã¯ã¼ã¯ã«ãã£ã¦ã¯ããã©ã«ãã®ã¹ã¿ã¼ãã¢ããã³ãã³ããå¹ããªããã¨ãããã¾ããç§ã®å ´å㯠Azure App Service å
ã®æ§æâå
¨è¬è¨å®âã¹ã¿ã¼ãã¢ããã³ãã³ãã«ä»¥ä¸ãå
¥åãããã¨ã§è§£æ±ºãã¾ãããåèã«ã©ããã\n\nNext.js ã®å ´åã»ã»ã»`node_modules/next/dist/bin/next start`\n\nNestJS ã®å ´åã»ã»ã»`node dist/main`\n\n### ä½ãåå ã§ã¨ã©ã¼ãèµ·ãã¦ããã®ãããããªãã¨ã\n\nãã¢ããªã±ã¼ã·ã§ã³ã¨ã©ã¼ãèµ·ãã¦ããåé¡ã®è¨ºæã¨è§£æ±ºãè¦ããã©ããã£ã½ãã¨ã©ã¼ãè¦ã¤ãããªãããªãã§ãï¼ï¼ã\n\nãããããééãã¾ãããããªæã¯ãã°ã¹ããªã¼ã ãã¿ãã¹ãã\n\n\n\nã¢ããªãåèµ·åâãã°ã¹ããªã¼ã ï¼ãã¬ãã¥ã¼ï¼ã§ãªã¢ã«ã¿ã¤ã ã«ãã°åºåãã§ããããã©ãã§å¤±æãã¦ããã®ããããããããªãã¾ãã\n\n## çªå¤ç·¨ï¼ NestJS ãããã¤ã§è©°ã¾ã£ãæã®è§£æ±ºçï¼ä½é¨è«ï¼\n\nç¶æ³ã¨ãã¦ã¯ GitHub Actions ã§ zip å½¢å¼ã§ãããã¤ããã ãã®ç¶æ
ã§ Azure Portal ã§ä½ãè¨å®ãã¦ããªãã»ã»ã»ã¨ããæé軸ã
8§ãã\n\nçµç·¯ã¾ã§æ¸ãã¨å¤§ããªã¥ã¼ã ã«ãªãã®ã§çµè«ã ãç½®ãã¨ãã¾ãã\n\n1. `deploy.yml` ã®ä¸èº«ã¯ãã¡ãï¼ãããã¤æéãç縮ã§ãã¾ãï¼ã\n\n```yaml\nname: Build and deploy Node.js app to Azure Web App - fwywdAzureDeployNest\n\non:\n push:\n branches:\n - master\n workflow_dispatch:\n\njobs:\n build:\n runs-on: ubuntu-latest\n\n steps:\n - uses: actions/checkout@v2\n\n - name: Set up Node.js version\n uses: actions/setup-node@v1\n with:\n node-version: '16.x'\n\n - name: npm install, build, and test\n run: |\n npm install\n npm run build --if-present\n npm run test --if-present\n\n - name: Zip all files for upload between jobs\n run: zip --symlinks -r nest.zip ./*\n\n - name: Upload artifact for deployment job\n uses: actions/upload-artifact@v2\n with:\n name: node-app\n path: nest.zip\n\n deploy:\n runs-on: ubuntu-latest\n needs: build\n environment:\n name: 'Production'\n url: ${{ steps.deploy-to-webapp.outputs.webapp-url }}\n\n steps:\n - name: Download artifact from build job\n uses: actions/download-artifact@v2\n with:\n name: node-app\n\n - name: 'Deploy to Azure Web App'\n id: deploy-to-webapp\n uses: azure/webapps-deploy@v2\n with:\n app-name: 'fwywdAzureDeployNest'\n slot-name: 'Production'\n publish-profile: ${{ secrets.AZUREAPPSERVICE_PUBLISHPROFILE_2A62A5035C4241D78AC3A13D8D636DCA }}\n package: nest.zip\n\n - name: Delete zip file\n run: rm nest.zip\n```\n\n2. ãAzure App Service å
ã®æ§æâå
¨è¬è¨å®âã¹ã¿ã¼ãã¢ããã³ãã³ã ã« `node dist/main` ã¨å
¥åãã\n3. ãAzure App Service å
ã®æ§æâ ã¢ããªã±ã¼ã·ã§ã³ã®è¨å®â æ°ããã¢ããªã±ã¼ã·ã§ã³è¨å®ãã§ãååï¼WEBSITES_CONTAINER_START_TIME_LIMITããå¤ï¼600ãã¨è¨å®\n4. `package.json` ã® script å
ã«ããã³ãã³ã `âstart:prodâ` ã以ä¸ã«ç½®ãæãã\n\n```json\n\"start:prod\": \"yarn build \u0026\u0026 node dist/main\",\n```\n\n5. main.ts ã®ãã¼ãè¨å®ã夿´ãã\n\n```TypeScript\nimport { NestFactory } from '@nestjs/core';\nimport { AppModule } from './app.module';\n\nasync function bootstrap() {\n const app = await NestFactory.create(AppModule);\n const port = process.env.PORT || 3000;\n await app.listen(port);\n}\nbootstrap();\n```\n\n## ãã®3ã¤ãæãã¦ããã° Azure App Service ãæããªãï¼å¤åï¼\n\n- ã¹ã¿ã¼ãã¢ããã³ãã³ããé©åã«è¨å®ããã¦ããã\n- ã³ã³ãããã¿ã¤ã ã¢ã¦ããã¦ããªãã\n- ãã®ä»ããªãããã®çç±ã§ã³ã³ãããã¯ã©ãã·ã¥ãã¦ããªããï¼ãã°ã¹ããªã¼ã ã§ç¢ºèªå¯è½ï¼\n\nç¹ã«ä¸2ã¤ã¯ Node.js ã§ã®ãããã¤ã ã¨åç¾æ§é«ãç®ã«ããã¨ã©ã¼ï¼å½ç¤¾æ¯ï¼ãªã®ã§çã£å
ã«ç¢ºèªãã¦ã¿ã価å¤ã¢ãªã\nãã®è¨äºã§ Azure App Service ã¢ã¬ã«ã®ã¼ã«ç½¹ã£ã¦ãã人ã1人ã§ãæ¸ãã¾ãããã«ã»ã»ã»ï¼"},{"id":"/blog/how-to-write-sentenses","data":{"title":"ã©ã¤ã¿ã¼ç´ä¼ï¼èªã¿ãããã«å·®ãã¤ããæç« æ¿ç¸®è¡","date":"2022-07-28T12:48:00.000+0900","img_path":"/img/pages/blog/how-to-write-sentenses/ogp.png","img_alt":"ã©ã¤ã¿ã¼ç´ä¼ï¼èªã¿ãããã«å·®ãã¤ããæç« æ¿ç¸®è¡","description":"æéãããã¦æ¸ããã®ã«ã»ã»ã»ãåã®æããªããèªã¿è¾ããï¼ãºãã¢ï¼ãã¨è¨ãããçµé¨ãããã¾ãããï¼è¨äºã®æ¸ãæ¹ã¬ã¤ã第ä¸å¼¾ï¼ããããæ¬å½ã®ãæç« åããé«ããç§è¨£ãåè·ã©ã¤ã¿ã¼ã®ç§å¤å·ãç´ä¼ãã¡ããã¾ãï¼","tags":["ãã¼ã±ãã£ã³ã°","fwywd","èµ·æ¥"],"prev_title":"äºã®ä¸ã®èã人ã®åãå¼ãåºãã群ã«å¯¾ããæè²ã®è¨è¨è¡ ~ å°éå®¶ãæãã¦çºè¨ã§ããªãããããªä¸ã®ä¸ã« ~","prev_link":"/blog/educational-design-for-groups","next_title":"ä¼ç¤¾ã§æ´»èºãããã»èµ·æ¥ãæåãããã人ã«ããã°ã©ãã³ã°ç¿å¾ããªã¹ã¹ã¡ããçç±","
8next_link":"/blog/active-entrepreneurship-programming","author":"furukawa"},"content":"\n\næéãããã¦æ¸ããã®ã«ã»ã»ã»\n\nã**åã®æããªããèªã¿è¾ããï¼ãºãã¢ï¼**ãã¨è¨ãããçµé¨ãããã¾ãããï¼\n\nè¨äºã®æ¸ãæ¹ã¬ã¤ã第3å¼¾ï¼ããããæ¬å½ã®ãæç« åããé«ããç§è¨£ãåè·ã©ã¤ã¿ã¼ã®ç§å¤å·ãç´ä¼ãã¡ããã¾ãï¼\n\nãè¨äºã®æ¸ãæ¹ã¬ã¤ãã·ãªã¼ãºã\n\n第1å¼¾ï¼[ããæ©ã¾ãªãï¼PVæ°ããããã伸ã³ãã¿ã¤ãã«ã®ä»ãæ¹ã¬ã¤ã](https://fwywd.com/blog/2022051001)\n\n第2å¼¾ï¼[é©å½ã«ã¤ãã¦ãªãï¼ç®ãå¼ãè¦åºãã§å·®ãã¤ããï¼è¨äºã®è¦åºãæ´é è¡3ã¤ã®ãã¤ã³ã](https://fwywd.com/blog/2022072702)\n\n## 対象èªè
\n\nè¨äºãæç« ãæ¸ããæã«\n\n- ãä½ãè¨ãããã®ãããããããªããã¨è¨ããã¦æ²ãããªã£ããã¨ããã\n- æ¸ãã¦ãããã¡ã«èªåããã®æã§ä½ãè¨ãããã£ãã®ãããããªããªã£ã¦ããç¾è±¡ã«æ©ã¾ããã¦ãã\n- èªåã®æç« ããããèªã¿ããããåããããããæ¹åããããæ¹æ³ãããããå°ã£ã¦ãã\n\n人ã\n\n## æ¬æã®å½¹å²\n\nãããå¤ãã®äººã«èªãã§ãããããã観ç¹ããè¨äºå
ã®éè¦ãªè¦ç´ ã3ã¤ä¸¦ã¹ãã¨ãããã©ããªãããçããèãããã¨ã¯ããã¾ããï¼\n\n[é©å½ã«ã¤ãã¦ãªãï¼ç®ãå¼ãè¦åºãã§å·®ãã¤ããï¼è¨äºã®è¦åºãæ´é è¡3ã¤ã®ãã¤ã³ã](https://fwywd.com/blog/2022072702)\n\nã§è¿°ã¹ãéãç§ã¯ã**ã¿ã¤ãã«\u003eè¦åºã\u003eæ¬æ**ãã¨æã£ã¦ãã¾ãï¼è©³ããã¯è¨äºåç
§ï¼ãããããªããå½ç¶ãæ¬æãæ
ãå½¹å²ãã¯é常ã«å¤§ããã§ããã¿ã¤ãã«ã¨è¦åºããè¨äºã®åéãã³ã³ããã¼ã«ããæ
å½ã§ããã¨ãããªããçã«è¨äºã®ä¾¡å¤ãæ¯ããã®ãæ¬æã¨è¨ã£ãã¨ããã§ãããããè¨äºã®å
容ã¯ãã¡ããã®ãã¨ã**æä½ãèªã¿è¾ããã°èªã¿æã®é¢è±çã¯çä¸ãã**ãã¾ããæ
ã«ãèªã¿ãããã»åãããããã»ç®ãæ»ãã«ãããæç« ãæ¸ããããã«ãªããã¨ã¯è¨äºãå·çãã¦ããä¸ã§é常ã«éè¦ãªããã§ãã\n\n## èªã¿è¾ãæã®ç¹å¾´3é¸\n\nãã®ç¹å¾´ã«ã²ã¨ã¤ã§ãå½ã¦ã¯ã¾ãæãããããã¨ä¸¦ãã§ããã¨æç« å
¨ä½ã®å質ãããä¸ãããã¾ããèªåã®æç« ã®ä¸ã§ããããçºè¦ãããç´ã¡ã«æ¹åãã¹ãã§ãã\n\n###
81. ææ³ãæããã«ãããã\n\nç§ãã¡ã¯äººéãªã®ã§æ¸ãã¦ãããã¡ã«èª¤åè±åãçºçããããã¡ããã£ã¨å©è©ã®ä½¿ãæ¹ããããããªã£ã¦ãã¾ã£ããã»ã»ã»ã¨ãããããã³ã°ã¯å¾ã
ã«ãã¦èµ·ããã¾ãããããã£ããå¡ãã¹ãã¬ãã«ã®è©±ã§ãªããã£ã¨å¤§ããæ¬ãã§ãããã¯ã©ãè¦ã¦ãå¤ãããªãã»ã»ã»ï¼ãã¨æãããããããªææ³ãã¹ããã£ãæã**æ¸ãæã¸ã®ä¿¡é ¼åº¦ã¯å¤±å¢**ãã¾ããè¨äºã¨ãã¦è´å½å·ã¨ãªããããªãã®ã§æãæ°ãã¤ãããé¨åã§ãã\n\næè¿ããè¦ãããééããã³ãã¼ã¯ã³ï¼å人調ã¹ï¼ãä¸ä¾ã¨ãã¦æãã¦ããã¾ããããã§ããããã§ããããªã©éèª¬ã®æ¥ç¶è©ãé£ç¶ã§ä¸¦ã¹ãã±ã¼ã¹ã§ãã\n\nâï¸ããããã¯ããããã§ãããã¿ããã®æ¹ããã£ã¨å¥½ãã§ãããé
¸ã£ã±ãã§ãã\n\nâããããã¯ããããã§ãããã¿ããã®æ¹ããã£ã¨å¥½ãã§ãããã®é
¸ã£ã±ãã好ããªãã§ããã\n\nNG æã§æã®ä¸»æ¨ã䏿°ã«è¿·åã«ãªã£ããã¨ã«æ°ã¥ãã¾ãããï¼ãçµå±ä½ãè¨ãããã®ããé常ã«ä¼ããé£ããªãã¾ããããã¾ãããã\n\n### 2. èªç¹ãããä¹±ãæã¡\n\n**0ãçæ³ã1å㯠OKã2åã§ã®ãªã®ãªã3å以ä¸ã§ã¢ã¦ã**ã§ããä¸è¦ãªèªç¹ã¯å¯èªæ§ã䏿°ã«å¼ãä¸ãã¾ããããããèªç¹ãæã¡ãããªã£ãã¨ãã¯1æã®ä¸ã«è¤æ°ã®ä¸»æ¨ãæ··ããè¾¼ãã§ããªãã確èªãã¦ã¿ã¾ãããã1æ1主æ¨ãåºæ¬ã§ãã\n\n0åï¼ããã®ãããããããã§ãããããã鿣®çç£ã§ããã¾ãè²·ãããã§ãããã¡ãããã¾ã§ãããã\n\n1åï¼ããã®ãããããããã§ãããããã鿣®çç£ã§ããã¾ãè²·ãããã§ãããã¡ãããã¾ã§ãããã\n\n2åï¼ã®ãªã®ãªï¼ï¼ããã®ãããããããã§ãããããã鿣®çç£ãã¾ãè²·ãããã§ãããã¡ãããã¾ã§ãããã\n\n3åï¼ã¢ã¦ãï¼ï¼ããã®ãããããããã§ãããããã鿣®çç£ãã¾ãè²·ãããã§ãããã¡ãããã¾ã§ãããã\n\nä¸ã«è¡ãã°è¡ãã»ã©ä¸ç®çç¶ã®èªã¿è¾ãã«ãªã£ã¦ãããã¨ãããããã¨æãã¾ãã0å or 1åã§å¸¸ã«çãã¦ãããã¨ãã¹ãã\n\n### 3. 1æã®ä¸ã«ãè¨ããããã¨ããè¤æ°æ··ãã£ã¦ãã\n\n1æãè¶
é·ã人ã«ãããã¡ã大äºãªãã¨ãªã®ã§ããä¸åº¦è¨ãã¾ãã**1æ1主æ¨ãåºæ¬**ã§ããã2. èªç¹ä¹±ãæã¡ãã¨ãé¢é£ãã¦ãã¾ããèªç¹ãä¹±ãæã¡ãããé·ãã1æã¯è¨ããããã¨ã大éã«æ··å¨ããæå¼·ã«èªã¿ã¥ããæã¨ãªããããã§ããç¨ã«1æãé·ãåã£ã¦ããã«ãé¢ããã主æ¨ã®ä¸è²«æ§ããããã«ä¿ã£ã¦é常ã«èªã¿ãããæç« ãæ¸ã人ããã¾ãããããã¯ç¸å½ãªããæã©ã¤ã¿ã¼ããã®ã¿ãã§ããè¸å½ã§ãï¼å¼ç¤¾åå´ããã®ã¿ã¤ãã ãªãã¨ãã¤ãå°æ¬ãã¦ãã¾ãï¼ãåå¿è
ã¯ããã¨ãã¾ãããã\n\n### ããã ãã¯è¦ãã¦å¸°ã£ã¦ã»ãã10ç§ã§ãããçµè«\n\n- ææ³æ£ãã\n- 1æ1主æ¨\n- èªç¹2åã¾ã§\n\n## ã©ã¤ã¿ã¼ç´ä¼ï¼èªã¿ãããæç« ã®ãã±ã3é¸\n\nãNG ãªé¨åã¯ããã£ããããã©ãã£ã¨èªåã®æãèªã¿ãããæ¹åããããã ï¼ãã¨ããããªãã«ã\n\nåè·ã©ã¤ã¿ã¼ \u0026 è¨äºæ ¡æ£ã»ä»ããããã¦è¨äºãã¤ãã¤ãæ¸ãã¦ããç§ãå¸¸ã«æ°ãä»ãã¦ããç§èµã®è¨èãã¤ã¨ããæ³ãæãã¡ããã¾ãï¼\n\n### 1. åºæ¬ã¯ãå¾¹åºçã«çãã\n\nç§ãæç« ã®çæ³ç³»ã¯ã100%æ¿ç¸®ã¸ã¥ã¼ã¹ãã ã¨æã£ã¦ãã¾ãã1æããã
ã£ã¨ããã
ã¼ã¼ã¼ã¼ã¼ã£ã¨æ¿ç¸®ãã¦æ¿åã¨ãã¹ã«ãããã®ãçããã«é£²ãã§ããã ããããªã¤ã¡ã¼ã¸ã\n\n- ãªãã¦ãæå³ãä¼ããåèª\n- çãè¨ãæãããã¨ãã§ããåèª\n\nãåå¨ããªããï¼å¸¸æ¥é ããæèãã¦ããã¨å¾ã
ã«èº«ã«ä»ãã¦ããããºã§ããå°éã«åãçµãã§ã¿ã¦ãã ãããã\n\nã¾ãæã£åãæ©ãæãçãã§ããå°æã®ã²ã¨ã¤ã¨ã㦠**ãã ã»ã§ãããèª¿ãæ¡ç¨ãã**ã®ããªã¹ã¹ã¡ã§ãããã§ãã»ã¾ããèª¿ã«æ¯ã¹èªç¶ã¨èªæ°ãå°ãªããªãã®ã§å´ããã¹ãããªããæãæ¸ãã¾ããæ¡ç¨ OK ãªç°å¢ã§ããã°ãã²è©¦ãã¦ã¿ã¦ãã ãããã¡ãªã¿ã«1è¨äºã®ä¸ã§ãã ã»ã§ããã調ã¨ãã§ãã»ã¾ãã調ãã¾ãã¾ããã¦ä½¿ç¨ããã®ã¯ NG ã§ãããæ³¨æãã\n\n### 2. ãªãºã æãæèãã\n\nããã¯ããªãæè¦çãªãã®ãå«ã¾ãã¦ããã®ã§ããã**ãé ã®ä¸ã§æ¯åãè¯ãèªããæç« ããæèãã**ã¨æå
¨ä½ã墿ãã¦è¦ããããã«ãªãã¾ããå®éèªãã§ãã¦ããèªã¿ãããã»ãããããããã¨æãããã¨ééããªããç§ã¯ä»¥ä¸ã®2ç¹ãç¹ã«æ°ãä»ãã¦ãã¾ãã\n\n- å¯è½ã§ããã°ã5ã»7ã»5ãã«\n- é»ãè¸ãã§ãããã©ãã\n\nå·æ³ãã©ãããã¤ã¡ã¼ã¸ããã¨ããããããããããã¾ãããè³å
ã§ã©ããã¼ã«ãªã£ã¦æç« ã§ã©ããããã«ãã¦ã¿ã¾ããããããªãããªãºã ããèªããªããªããã¨æã£ããåãè¶³ãå¼ããã¦æ´ãã¦ã¿ã¦ãã ããããã¡ããå°éã«è¡ããã¨ã§é ã²ã¨ã¤æããåºãç©æ¸ãã«ãªããã¨ãã§ãã¾ãã\n\n### 3. ãããã ãèªãã°8å²ããããé¨åã強調ãã\n\nè¨äºãæ¸ãã¦ããã¨æãè½ã¡ãããæ²ããäºå®ã
8人ã¯ãã¡ããæã£ã¦ãã以ä¸ã«æç« ãèªãã§ããªããã¨ãããã¨ãããã¨ã»ã»ã»ãæµãèªã¿ãããã¦ãè¨äºã®æ¬è³ªãä¼ããããã**ãããããèªãã§ããã°æå³ã¯8å²ä¼ãããé¨åã強調**ãã¾ããããå¼·èª¿ç®æãå¢ããããã¨éã«å¯èªæ§ãä¸ãã£ã¦ãã¾ããããè¦åºãã²ã¨ã¤ã«ã«1-2ãæã»å¤ãã¦ã3ãæããããç®å®ã«ããã¨è¯ãã§ãããã\n\n## ããããã§ããã§ãããããç¦æ¢ä»¤\n\næå¾ã«å人çãªæè¦100%ã§æ§æããã¦ããæãã®ä¸ãå«ãã§ç· ãããã¨æãã¾ãã\n\n**è¨äºã®çµããã«ããããã§ããã§ããããããä»ããã®ãä»ããããã¦ããã**\n\n䏿åã«æµè¡ã£ãæé»ã®éç£ã³ããã¾ã¨ãè¨äºãèå»¶ã£ã¦ããæä»£ãæãåºããã§ããã»ã»ã»ï¼æ³£ï¼æç« è¡ã¨ãã観ç¹ããè¦ã¦ããããããã§ããã§ããããããè¨äºã®æ¬è³ªãçãä¸ããä½ããæ
ãã¦ããã¨ã¯å°åºæãã¾ãããæ
å ±é0ã§ãããã¡èªè
ã¨ãã¦ã¯ããããã§ããã§ããããããããããªãã®ä»æ¥ã®æ©å¾¡é£¯ã¯ä½ãããæ¸ãã¦ãã£ãæ¹ããã£ã½ã©é¢ç½ããªï¼ã¨æãã¾ããä»ããã試ãããï¼ï¼å§ï¼\n"},{"id":"/blog/educational-design-for-groups","data":{"title":"äºã®ä¸ã®èã人ã®åãå¼ãåºãã群ã«å¯¾ããæè²ã®è¨è¨è¡ ~ å°éå®¶ãæãã¦çºè¨ã§ããªãããããªä¸ã®ä¸ã« ~","date":"2022-07-28T12:15:00.000+0900","img_path":"/img/pages/blog/educational-design-for-groups/ogp.png","img_alt":"äºã®ä¸ã®èã人ã®åãå¼ãåºãã群ã«å¯¾ããæè²ã®è¨è¨è¡ ~ å°éå®¶ãæãã¦çºè¨ã§ããªãããããªä¸ã®ä¸ã« ~","description":"åä¾ã®ã¨ãããç®çææãæã£ã¦å¦ã¹ã大人ã®å¦ã³ã¯æ¥½ããã§ããããã§ãã大人ã«ãªã£ã¦ããå¦ã¶ãã¨ãåå«ã«ãªã£ããã¨ãããã¾ããããã®çç±ã¯å¦ã³ãå
±æããç¸æãããªããã¨ã§ãããã¡ããä»ã©ã㯠SNS ã§ã®ç¹ããã§å
±æãããã¨ãã§ãã¾ãããæãã¬è½ã¨ãç©´ã...ãæ°è»½ã«ã¤ã¶ãããã¤ããããå°éå®¶ããããµã«ãªã¨å¼ã°ããæè¡çãªææãé£ãã§ãããã¨ãããã¾ãããã¨ãã¨ãªäººã®æè¦ã ããé£ã³äº¤ãä¸ç´ç¤¾ä¼ã¨åãã SNSãåä¾ã®ã¨ãã»ã©ç¡éªæ°ã«å¦ã¹ãªããã®ãæä¸ãå°éå®¶ãæãã¦çºè¨ã§ããªãããããªä¸ã®ä¸ã«ããã£ã¨å¤§äººãå¦ã³ãããã人ã®åãå¼ãåºããã¨ãã§ããæè²ã®ããæ¹ãããã®ã§ã¯ãªãããä»åã¯æè²ç³»ãã³ãã£ã¼ä¼æ¥ã§ãããã«ã¬ã¯ä»£è¡¨ã®ç§ï¼åå´ï¼ãããã®çãã®ï¼ã¤ã¨ãã¦èããã群ã«å¯¾ããæè²ããç´¹ä»ãã¾ãããªãã¨ãäºã®ä¸ã®èãããã³ããªãã§ãã","tags":["fwywd","群ã«å¯¾ããæè²","äºã®ä¸ã®è","èµ·æ¥"],"prev_title":"æ³åãã¦ãããããã¯ããç°¡åã«ç¤¾é·ã«ãªã£ã話","prev_link":"/blog/2022072704","next_title":"ã©ã¤ã¿ã¼ç´ä¼ï¼èªã¿ãããã«å·®ãã¤ããæç« æ¿ç¸®è¡","next_link":"/blog/how-to-write-sentenses","author":"yoshizaki"},"content":"\n## 大人ã«ãªã£ã¦ããå¦ã¶ã®è¾ããªãã§ããï¼\n\nåä¾ã®ã¨ãããç®çææãæã£ã¦å¦ã¹ã大人ã®å¦ã³ã¯æ¥½ããã§ãããã\n\nã§ãã大人ã«ãªã£ã¦ããå¦ã¶ãã¨ãåå«ã«ãªã£ããã¨ãããã¾ããã \nãã®çç±ã¯**å¦ã³ãå
±æããç¸æãããªããã¨**ã§ãã\n\nãã¡ããä»ã©ã㯠SNS ã§ã®ç¹ããã§å
±æãããã¨ãã§ãã¾ãããæãã¬è½ã¨ãç©´ã...ã \næ°è»½ã«ã¤ã¶ãããã¤ããããå°éå®¶ãã**ããµã«ãª**ã¨å¼ã°ããæè¡çãªææãé£ãã§ãããã¨ãããã¾ãã\n\n**ãã¨ãã¨ãªäººã®æè¦ã ããé£ã³äº¤ãä¸ç´ç¤¾ä¼ã¨åãã SNS**\n\nåä¾ã®ã¨ãã»ã©ç¡éªæ°ã«å¦ã¹ãªããã®ãæä¸ã \nå°éå®¶ãæãã¦çºè¨ã§ããªãããããªä¸ã®ä¸ã«ã \nãã£ã¨å¤§äººãå¦ã³ãããã**人ã®åãå¼ãåºããã¨ãã§ããæè²ã®ããæ¹**ãããã®ã§ã¯ãªããã\n\nä»åã¯**æè²ç³»ãã³ãã£ã¼ä¼æ¥**ã§ãããã«ã¬ã¯ä»£è¡¨ã®ç§ï¼åå´ï¼ãããã®çãã®ï¼ã¤ã¨ãã¦èããã**群ã«å¯¾ããæè²**ããç´¹ä»ãã¾ãã \nãªãã¨ã**äºã®ä¸ã®è**ãããã³ããªãã§ãã\n\n## åã«å¯¾ããæè²ã®å é\n\n### ãªã³ã©ã¤ã³åç»ã§ãã¤ã§ãã©ãã§ãå¦ã¹ãæä»£ã¸\n\n\n\nç§ã¯ 1991 å¹´çã¾ããç¾å¨ 30 æ³ã \nç§ãä¸å¦çã®ã¨ãã«ã¯å¡¾ã«è¡ãããé²ç ã¼ãã Z ä¼ã®éä¿¡æè²ã®ææãå®æè³¼å
¥ãããããªãã¨å¦æ ¡ä»¥å¤ã®å¦ã³ã®ç°å¢ã¯ããã¾ããã§ããã \nç°èã§ããã親ã«éãè¿ãããã¦ããããã¯ã©ã¹ã¡ã¤ãã® 9 å²ä»¥ä¸ã塾ã«éã£ã¦ããè¨æ¶ãããã¾ãã\n\nãããï¼åä¸ã®å¼ã®é ã«ã¯ã¹ã¿ãã£ãµããªãç»å ´ããã¹ããã§åç»ãè¦ãªããå¦ã¶æä»£ã«å¤ãã£ã¦ãã¾ããã \nä»ã§ã¯æè²ç³» YouTuber ã®ç»å ´ã«ãããç¡æã§ãå¦ã¹ãç°å¢ãå¢ãã¾ããã \nï¼æ¬¡å
ã ã£ãæç§æ¸ãæé軸ãå«ããï¼æ¬¡å
ã«ããããã«ã¯å¡¾ã«éãå¿
è¦ãããã¾ãããããããåç»ææã®çºå±ã«ããå®¶ã§ãå¦ã¹ãããã«ãªãã¾ããã \nã**ã©ãã§ã**ãã«å¤ãã£ãç¬éã§ãã\n\nããã¦ãããï¼ã¤å¤ãã£ããã¨ãåç»ã¯ã**ãã¤ã§ã**ãè¦è´ãããã¨ãã§ãã¾ãã \nå¡¾ã®ææ¥ã§ã¯æ±ºã¾ã£ãæéã«è¡ããªãã¨åããããªã£ã**åæç**ãªã¹ã¿ã¤ã«ããã**éåæ**ã§ææ¥ãåããããããã«ãªãã¾ããã\n\nãªã³ã©ã¤ã³åç»ã§å¦ã¹ãæä»£ã¯ã**ãã¤ã§ããã©ãã§ã**ãã¨ãã£ãï¼ã¤ã®ãã¼ãã§å¤§ããªå¤é©ãããããã¾ãã\n\n### å¤§äººã®æè²ã C2C ã§ããã«å é\n\n\n\nå¦çã«å¯¾ããæè²ã®è©±ã§ãããããã¡ãã社ä¼äººã§ãã**大人ã®å¦ã³ã«ããªã³ã©ã¤ã³åç»ã¯å¤é©ãããããã¾ã**ã \nããã**大人ã®å¦ã³ã®æ¹ãç¸æ§ãè¯ããã¨**ãããã¾ããã\n\n髿 ¡çã¾ã§ã®ææã¯æé¨ç§å¦çãå®ããæ¹éããã¼ã¹ã«ãã¦ãããããã«ã¹ã¿ãã¤ãºã§ããç¯å²ãçãããªãªã¸ãã«ã®ææãä½ããããã§ãã \nããã«å¯¾ãã¦ã大人ã®å¦ã³ã¯ç¤¾ä¼ã§æ±ããããããã¨ãããããã¼ãã対象ã§ããã伿¥ã¨ã¯ããç°¡åã«ãªãªã¸ãã«ã®ææãä½ããã¨ãã§ãã¾ããã§ããã \nç¹ã«æè¡ç³»ãªã©ã¯æ¥é²ææ©ã§ãããã³ã¹ããæãã¦ä½ã£ãã³ã³ãã³ããç¿å¹´ã«ã¯ä½¿ãç©ã«ãªããªããã¨ãããã¾ãã\n\nããã« [**Udemy**](https://www.udemy.com/) ã代表ã¨ãã **Consumer to Consumer (C2C)** ã®æè²ãµã¼ãã¹ãç»å ´ãã¾ãã \nå人ã§ã³ã³ãã³ããä½ããããææã®è³ªã¨ã®ãã¬ã¼ããªãã¯ãããã**å¤ç¨®å¤æ§ãªãã¼ãã®ææãæä¾å¯è½**ã«ãªãã¾ããã \n大人ã®å¦ã³ã«å¿
è¦ãªéè¦ãæºãããã¨ãã§ããç§ãå¤ãã®æ©æµãåãã¾ããã\n\n### å®ã¯ãªã³ã©ã¤ã³åç»ã®çµäºçã¯ä½ãã¨ããäºå®\n\n\n\nãããªã**ãã¤ã§ããã©ãã§ã**ãã«å ãã¦ã**å¤ç¨®å¤æ§ãªãã¼ã**ãã¨ããç´ æ´ãããæè²ç°å¢ãæä¾ãã¦ãããªã³ã©ã¤ã³æè²ã«ã**ã¨ãã§ããªãè½ã¨ãç©´**ãããã®ã§ãã\n\nããã¯**çµäºçãç°å¸¸ãªãããä½ããã¨**ã\n\n以ä¸ã®è«æã«ããã¨ããã³ããã¼ã¯ã¨ãã¦å¤§å¦ã®ææ¥ãªã©ãå¤ãç¡æã§æä¾ãã¦ãã MOOCs (Massive Open Online Courses) ã®**å¹³åçµäºç㯠4~5%** ãªãã§ãã \næµ·å¤ã®å¤§å¦ã®æé«å³°ã®å
容ãæé«å³°ã®ææé£ãææããææ¥ã§ã**ã»ã¨ãã©ãè¦è´å®äºãããªã**ã®ã§ãã\n\nâ¶ åèæç®ï¼[çµç¹ãè¶ãã Learning Analytics ã®å¯è½æ§ â ãã®æ¹å¤çæ¤è¨ â | ç¦äºçç«å¤§å¦ å±±å·ä¿® æ° (2015)](https://www.jstage.jst.go.jp/article/konpyutariyoukyouiku/38/0/38_55/_pdf/-char/ja)\n\n### è¯ãæè²ã®æ§æè¦ç´ ã¯ãææãã¨ãè¬å¸«ãã®è³ªã ãï¼\n\n\n\n**è¯ãæè²ã¨ã¯ä½ãï¼** ã¨ããããè°é¡ã§ãããããããããæ§æè¦ç´ ãã**ææ**ãã¨ã**è¬å¸«**ãã§ãã \nå§åçã«ããããããææãããã¦å§åçã«ãããããã解説ãããè¬å¸«ã\n\næ¥ããããªããã以åã®ç§ããã®ï¼ã¤ã極ãããã¨ãæè²ä¼æ¥ã¨ãã¦ã®è¡ãå
ã ã¨æã£ã¦ãã¾ããã \nãããã£ãæ
8å³ã§ã¯ãããã¾ã§ã«ç´¯è¨ 50,000 åãè¶
ããæ¹ã«åè¬ãã¦ããã ãã AI ã®åºç¤ãå¦ã¹ã [**[ãã«ã¬ã¯æµ] 人工ç¥è½ã»æ©æ¢°å¦ç¿è±ãã©ãã¯ããã¯ã¹ã³ã¼ã¹**](https://www.kikagaku.ai/) ã¯ï¼ã¤ã®å®æå½¢ã¨è¨ããããç¥ãã¾ããã\n\nãã ãããã®ã³ã¼ã¹ã**å¹³åçµäºçã¯ ç´ 10%** ã§ããã \nå
è¿°ãã MOOCs ã®ä¾ããã¯ï¼åç¨åº¦ã®çµäºçã¨ãªã£ã¦ãã¾ãããããã§ã **90% ã®äººã¯çµäºãã¦ãã¾ãã**ã \nã**ææ**ãã¨ã**è¬å¸«**ããè¯ãæè²ã«å¯¾ãã¦å¯ä¸çã®é«ãæ§æè¦ç´ ã§ããã°ããããæ¥µããçµæã¨ãã¦ã¯ **80~90%** ã®æ¹ãè¦è´å®äºããã¯ãã§ãã\n\nã¤ã¾ãã**è¦è´å®äºãã¦ãããããã«ã¯ãã£ã¨ä»ã«å¯ä¸çã®é«ãæ§æè¦ç´ **ãããã®ã§ãã\n\n\u003e **è£è¶³ 1** \n\u003e è¦è´å®äºã ããæè²ã®ã´ã¼ã«ã¨ãã¦è¨è¨ãã¦ããããã§ã¯ãªããåè¬ãã人æã®æ´»èºãè¨æ¸¬ãã¦ãã¾ããå¤ãã®ã±ã¼ã¹ãè¦è´å®äºå¾ããæ¬¡ã®ã¹ãããã¸é²ãã¨æ³å®ããããããæ´»èºã®åæã¨ãã¦è¦è´å®äºãæ®ãã¦ãã¾ãã\n\n\u003e **è£è¶³ 2** \n\u003e ããä¸é¨ã®ãªã³ã©ã¤ã³é
ä¿¡ã§ãå¦ç¿ãå®äºã§ãã人ã«ã¯ãææãã¨ãè¬å¸«ãã®è³ªãé常ã«éè¦ã¨è¨ãããããå¼ç¤¾ã§ã¯ããããããã®ï¼ç¹ãè¿½ãæ±ãç¶ãã¾ãããã以éã¯å¤ãã®äººã«ç®ãåããããããã®è¦è´å®äºãé«ã人ã¯è°è«ã®å¯¾è±¡å¤ã¨ãã¾ãã\n\n### ãªã³ã©ã¤ã³ã§ããªã¢ã«ã¿ã¤ã ã®ã©ã¤ããªã³ç ä¿®ããã£ã¨äººæ°ãªçç±\n\n\n\nã³ããç¦ã§æå®¤ã«éã¾ã£ã¦å¦ã¹ãç°å¢ãæä¾ã§ããªããªãã¾ããã \nããã«ãããZoom ã Teams ãªã©ã®ãªã³ã©ã¤ã³ç°å¢ã§è¬ç¾©ãæä¾ããããã«å¤ããã¾ãã\n\nãªã³ã©ã¤ã³ã§ããã°åç»ãæ®å½±ãã¦ãYouTube ã Netflix ã®ããã«**ãªã³ããã³ãé
ä¿¡**ã§è¯ãã®ã§ã¯ï¼ã¨ä»®èª¬ãããã¾ããã \nããã§ã**ãªã¢ã«ã¿ã¤ã ã§æéãææããã©ã¤ããªã³ç ä¿®**ã¨ã**ãã¤ã§ãã©ãã§ãåãããããªã³ããã³ãé
ä¿¡ã®ç ä¿®**ã®ä¸¡æ¹ãæä¾ãã¦ã¿ã¾ãã \nãã¡ãã夿®µã¯ãªã³ããã³ãé
ä¿¡ã®æ¹ãå®ãã©ã¤ããªã³ç 修㮠1/2 ~ 1/3 ç¨åº¦ã§ãã\n\n社ä¼äººåãã®ç ä¿®ã¨ããåæã§ãããã©ã¡ãã人æ°ã ã£ããã¨ããã¨ãå§åçã«**ã©ã¤ããªã³ç ä¿®**ã§ããã \n**å¹³åçµäºç㯠95% 以ä¸**ã¨é常ã«é«ããä»äºã®é½åã§ã©ããã¦ãæããªãã¨ãããªãå ´åãé¤ããã¿ãªãããã£ã¡ãã¨çµäºããã¾ãã \nã¤ã¾ãããã®ã©ã¤ããªã³ç ä¿®ã«ãããè¦è´å®äºãã¦ãããããã«å¯ä¸çãé«ãæ§æè¦ç´ ãå«ã¾ãã¦ããã®ã§ãã\n\nåè¬çã¸ãã¢ãªã³ã°ãè¡ãããªãè¦è´ãå®äºã§ããã®ããè¦ç´ åè§£ããã¨ä»¥ä¸ã®ï¼ã¤ãããã¾ããã\n\n1. **æéã®ç¢ºä¿**ï¼ãã¼ã ããã®çè§£ãããï¼\n2. **仲éã®åå¨**ï¼ã¢ããã¼ã·ã§ã³ã®ç¶æï¼\n3. **質çå¿ç**\n\n3 çªç®ã®è³ªçå¿çã«é¢ãã¦ã¯ããªã³ã©ã¤ã³é
ä¿¡ç³»ã®ãµã¼ãã¹ã§ã¯ Q\u0026A ãä½ã£ã¦å¯¾å¿ãã¦ãããã¨ãããã¾ãã \nããããããããã£ã¦ãçµäºçã¯ããã¾ã§é«ã¾ã£ã¦ããªããã¨ãèããã¨å¯ä¸çã¯ããã¾ã§é«ããªãããã§ãã\n\nã¤ã¾ãã**æéã®ç¢ºä¿**ã¨**仲é**ã®ï¼ã¤ãéµã§ãããã¨ãæ¨æ¸¬ã§ãã¾ãã \nããããåãæéã«å¦ã¶ã¨ããæéã確ä¿ããã°ãå¿
ç¶çã«åãã¿ã¤ãã³ã°ã§å¦ã¶ä»²éãçã¾ããã®ã§ããããã¯åæã«æºãããã¨ãã§ãã¾ãã\n\nããããè¦ãã¦ããæè²ã«å¿
è¦ãªæ§æè¦ç´ ã¨ãã¦é¢ç½ãã®ãããªã³ã©ã¤ã³æè²ã«ãã£ã¦å¾ããã¦ããã**ãã¤ã§ã**ãã¨ãããã¼ããå¤ãã®äººãæ¬å½ã¯æ±ãã¦ããªãã£ãã®ã§ãã\n\n## ãåãããã群ãã«å¯¾ããæè²ã¸\n\n### ãã£ã¨åãã¦ãã妿 ¡ã®æè²ã¯ç¾¤ã§ãã£ã\n\n\n\nãªã³ã©ã¤ã³æè²ã®å éã¯ã**ãã¤ã§ãã©ãã§ã**ãã¨ããè¦ç¹ä»¥å¤ã«ã**å人ã§å¦ã¶**ãã¨ãæãããã¨ãã§ãã¾ãã\n\næ¯ãè¿ã£ã¦ã¿ãã¨ãç§éã妿 ¡ã塾ã§åãã¦ããæè²ã¯å¸¸ã«éå£ãã¤ã¾ãã**群ã§å¦ã¶**ãããã«è¨è¨ããã¦ãã¾ããã \nãã®å¦ã³æ¹ãå¹³åçµäºçãé«ãã¨ããç¾ä»£ã®ãªã³ã©ã¤ã³æè²ã®å¤é·ããå°ããããã®ã§ã¯ãªãã¨æãã¾ãããåç¹å帰ãã¦ãã¾ãã \nãã ããæã¨ç°ãªãã®ã¯ã**ã©ãã§ã**ãã¨ããè¦ç´ ã«é¢ãã¦ã¯ã¡ãªããã大ããããªã³ã©ã¤ã³ã®æ©æµã¯å¤§ããããã¾ãã\n\n大å¦ãé«ããéãæã£ã¦ä¸äººæ®ãããããªãã¦ãéããããã«ãªãã¾ããããå°æ¹ã¨é½ä¼ã®æ
å ±æ ¼å·®ãæ¸ã£ã¦ãã¾ãã \nã¾ãå¬ããã£ã声ã¨ãã¦ã¯ããåãããããã£ãããå®¶åºã§ãèªå®
ããåè¬ã§ãããã¨ã§ãå¦ã³ã«æ¥ã¦ãããæ¹ãå¤ããªã£ããã¨ã§ãã\n\nããããã®æä»£ã®æè²ã¯ã**ãªã³ã©ã¤ã³ à 仲é**ãã¨ãã£ã**åæçãªè¦ç´ **ãå«ãã ãã®ã«ãªãã¨äºæ³ãã¦ãã¾ãã\n\n### 群ã«å¯¾ããæè²ã¯çµå¶ç®ç·ã®çµç¹è«ããã³ã\n\n\n\nããªã³ã©ã¤ã³ à 仲éãã¨ããã¨**ãªã³ã©ã¤ã³ãµãã³**ããã®æ¡ä»¶ãæºããã¦ãã¾ãã \næè²ã¨ããæèã§ã¯èªããããã¨ãå°ãªããªã³ã©ã¤ã³ãµãã³ã§ãããæè²ã¨ãããããã¨èãã¦ãã¾ãã \nç¾å¨ãç§ã主å¬ãã¦ããèµ·æ¥å®¶ã³ãã¥ãã㣠[**fwywdï¼ãã¥ã¼ãï¼**](https://apply.fwywd.com) ã**ãªã³ã©ã¤ã³ãµãã³**ã«è¿ããã¨è¨ãã¾ãã\n\nãã ããå¤ãã®ãªã³ã©ã¤ã³ãµãã³ã¨ç°ãªãç¹ãããã¾ãã \nç§ã®ç¥ãéãå¤ãã®ãªã³ã©ã¤ã³ãµãã³ã¯ä¼ç»ã®çºç«¯ã§ãããªã¼ãã¼æ ¼ã®äººããã¦ããã®äººã¨ã®ç¹ãããæ±ãã人ãéã¾ã**ã¶ãä¸ããå**ã§ãã \n**è¸è½äººã®ãã¡ã³ã¯ã©ã**ã¨ããã¨ããããããã§ããã\n\n[**fwywdï¼ãã¥ã¼ãï¼**](https://apply.fwywd.com) ã§ã¯ç§ã¨ã®ç¹ããã¨ããé¢ãããã¾ããããããããã³ãã¥ããã£éã®ä¼è©±ãä¸å¿ã¨ãã¦ãã¾ãã \nããã¯ç§ãããã¾ã§ä½ã£ã¦ããçµå¶ã®çµé¨ã«åºã¥ã**çµç¹è«**ããè¨è¨ãã¦ãã¾ãã\n\n### ã³ãã¥ãã±ã¼ã·ã§ã³ã«ã¯é©åãªãµã¤ãºè¨è¨ãå¿
è¦\n\n\n\nä»ã®æ®µéã§ã¯ä»¥ä¸ã®ãããªæ§é ãä½ã£ã¦ãã¾ãã\n\n1. ãã¼ã ï¼5~8 人ï¼â æãå¯ã«**åæ**çã«ã³ãã¥ãã±ã¼ã·ã§ã³ãåãéå£\n2. ãã³ãï¼30~40 人ï¼â **éåæ**ã§ã³ãã¥ãã±ã¼ã·ã§ã³ãåãéå£ï¼6 ãã¼ã ç¨åº¦ã®ã¾ã¨ã¾ãï¼\n3. ã³ãã¥ããã£ï¼å
¨å¡ï¼â ã¤ãã³ãçã§åºä¼ãéå£\n\n人æ°ãå¤ããªã£ã¦ããã¨ããã³ãããã大ããªåä½ãéæä½ã£ã¦ããã¾ãã \nãã®è¾ºãã¯ãã§ã«**çµå¶ã¨ãã¦ã®çµç¹è«**ã¨ãã¦é©åãªãµã¤ãºè¨è¨ãè°è«ããã¦ãããããå
人ã®ç¥æµããåãããã ãã§ãã \næè²ã®åé¡ã¯æè²ã«ãã´ãªã¼ã§è°è«ããã調æ»ããã¡ã§ãããçµå±ã¯**çµç¹ãä¸çªäººãæé·ããã¦ãããçµå¶ã®çµç¹è«ã§æè²ãè¦ãã¹ã**ã ã¨ç¾å¨ã§ã¯ç§ã¯èãã¦ãã¾ãã\n\nã³ãã¥ããã£ã¨ãã¦å
¨ã¦ãã¾ã¨ããªããã¨ã«ã¯ç§ã®**失æè«**ãããã¾ãã\n\n[**fwywdï¼ãã¥ã¼ãï¼**](https://apply.fwywd.com) ã®ï¼æã§ã¯åæ ¼ãã人ããé æ¬¡ Slack ã§ä½ã£ã¦ããã³ãã¥ããã£ã«åå ãã¦ãããã¾ããã \næåã¯çãä¸ãã£ãã®ã§ãããå¾ããå
¥ã£ã¦ãã人ãã³ãã¥ããã£ã®é©æ§ã®æç¡ãåãããã»ã¨ãã©ä¼è©±ã«åå ã§ããªãã£ãã®ã§ãã \nãããå½ç¶ã§ãä¼è©±ã«ã¯**æè** (**context**) ã®çè§£ãä¸å¯æ¬ ã§ãããããããªãç¶æ
ã ã£ãã¨è¨ãã¾ãã\n\nã©ãã ã大ããªã³ãã¥ããã£ã§ãã£ãã¨ãã¦ããä¼è©±ãã¦ããã®ã¯ããä¸é¨ã¨ããçµé¨ããªã
8ã§ããããã \nããã¯å¾ããåå ãã人ã®è½åãä½ãã®ã§ã¯ããã¾ããã \n**ä¼è©±ã«å¿
è¦ãªæ§æè¦ç´ ãæ¬ ãã¦ããçµæ**ãªã®ã§ãã\n\nãã®å¤±æè«ããæèãå
±æããããããã«ã**ç®çãæã£ãå°ããªåä½ã®ãã¼ã ã«åãã**ãã¨ã \nããã¦ã**ãã¼ã ã®å§ã¾ãã®ã¿ã¤ãã³ã°ã䏿ã«ã¹ã¿ã¼ãï¼åæï¼ãããã¨**ã«æ±ºãã¾ããã\n\nãã®çµæãç¾å¨ã® [**fwywdï¼ãã¥ã¼ãï¼**](https://apply.fwywd.com) ã¯ã³ãã¥ãã±ã¼ã·ã§ã³ã以åãããé¥ãã«å¤ããªãã¾ããã \nã¾ããã³ãã¥ããã£ãªã¼ãã¼ã®ç§ä¸å¼·ã®ã¶ãä¸ããåãããå¾ã
ã«è§£æ¾ããã¦ãããæã¾ããã³ãã¥ããã£ã®å½¢ã¸é·ç§»ãã¤ã¤ããã¾ãã\n\n### äºã®ä¸ã®èã人ã®å¯è½æ§ãéè±ããã\n\n\n\nããã§ããããæ¬é¡ã§ãã£ãã**äºã®ä¸ã®è**ãã§ãã\n\nã³ãã¥ããã£å
ã®ãã¼ã ã®ãµã¤ãºãå°ããè¨è¨ãããã¡ãªããã¯æ
å ±ã®æ£ããã確ä¿ãã«ãããªããã¨ã§ãã \nçããæããªãç´ äººå士ã®è°è«ã§ã¯ã«ãªã¹ã«ãªããã¨ãããã¾ãããã\n\nããã¸ã®å¯¾çãããã¾ãã \nãã¼ã ã§è§£æ±ºã§ããªããã¨ã¯ï¼é層ä¸ã®ãã³ãã«æãããã¦è§£æ±ºãã¦ããããããªæµããããã¾ãã \nã¾ãæçµçã«ã¯ç§ãè§£æ±ºã«æã貸ããã¨ãããã¾ãã\n\nãã¼ã å
ã§ã®è°è«ãã«ãªã¹ã«ãªããã¡ãªãããããã¾ãããæ¬å½ã¯ã¡ãªããã®æ¹ã大ããã¨æã£ã¦ãã¾ãã \n**ç´ äººå士ã§ãèªä¿¡ãæã£ã¦è°è«ãããã¨ã£ã¦å¤§åãããªãã§ãã**ã \n**å°éå®¶ã«è¦å¼µããã¦ããã¨ãæãã¦èªåã®æè¦ã£ã¦åºããªããªãã¾ãããï¼**\n\næ
å ±ã®æå¦ã¯å¥ã¨ãã¦ãèªä¿¡ãæã£ã¦è©±ãã§ãããã¨ã§ä¸»ä½æ§ãé«ã¾ããæ
å ±ã調ã¹ãæåº¦ãé«ã¾ããçµæçã«æ£ããæ
å ±ã«ãã©ãçãããããªãã¨äºæ³ãã¦ãã¾ãã \nãããã¾ãã«ã**äºã®ä¸ã®è**ãã§ãã \næåãã**æµ·çé¡ã°ããã®å¤§æµ·å**ã«æ¾ãããã¨æãã¦ä½ãã§ããªããªãã§ããã \nããã ã£ãããä¸éç¥ããããç¥ããªãã§ãããã¾ãã¯å®ãããäºæ¸ã®ä¸ã§æé·ã§ããæ¹ããã£ã½ã©è¯ãã¨æã£ã¦ãã¾ãã \næé·ãããæ¬¡ã®ããå°ãã ã大ããªäºæ¸ã«å
¥ãããããã¨ãç¹°ãè¿ãã°è¯ããããªãã§ããã \nã«ãã£ããããã£ã¦ä¸æ¦æµ·ã¨æ¦ããã¬ãã«ã«ãªã£ã¦ãããä»ãåçã¨æ¦ãã¾ã§ã«ãªãã¾ããã \næåã®å³¶ã«ããæµããåçã®ã«ã¤ãã¦ãããã°ãã ã ã£ãããã¯ã³ãã¼ã¹ã¯ããããã«çµãã£ã¦ããã¯ãã§ãã\n\n**æµ·çé¡ã°ããã®å¤§æµ·å**ã¨ã¯ã³ãã¼ã¹ã®ä¾ãã¾ããããç§éã®å¦æ ¡æè²ããããªã£ã¦ãã¾ããã \nç§ã¯è¶
ç°èã®å¦æ ¡ã«å
¥ã£ããé°ã§ãæç¸¾åªç§ã¨ããä½ç½®ã¥ããããããã¨ãã§ããã ããããåå¼·ãæ¥½ããã£ãè¨æ¶ãããã¾ãã \nã¾ãã«äºã®ä¸ã®èã§ãé«å°ã«å
¥ã£ããä¸ã«ã¯ä¸ããã¦ã京大ã«å
¥ã£ããããã«ä¸ã«ã¯ä¸ããã¦...ã \nããã§ãé çªã«ä¸ãã£ã¦ãããããããªãã¨ãä»ã«ç¹ãã£ã¦ãã¾ãã\n\nã**äºã®ä¸ã®è**ãã£ã¦ãå®ã¯ã©ããªãã¼ãã¼ã®ç©èªã«ãããã®ã§ã¯ãªããã¨æãã¾ãã\n\n## æµ·çé¡ã°ããã®å¤§æµ·åããã身ã®ä¸ã«ãã£ãäºæ¸ãã\n\n\n\nTwitter ã§ AI ãã½ããã¦ã§ã¢ã»ã¨ã³ã¸ãã¢ãªã³ã°ãèµ·æ¥ãªã©å°éåéã«ã¤ãã¦çºè¨ãããã®ã¯ç§ã§ãææã§ããããã¾ããã \nãããªç°å¢ã§ã¯**è¶
ä¸å¼·**ã ããè²ã¡ããã以å¤ã®äººã¯é¤ã«ãããªãã¨ããæãã¾ãã\n\n**ãã¨ãã¨ãªäººã®æè¦ã ããé£ã³äº¤ãä¸ç´ç¤¾ä¼ã¨åãã SNS**ã \nã¾ãã«ãæµ·çé¡ã°ããã®å¤§æµ·åã®ããã§ãã\n\nãã¤ã®æ¥ãããããª
8大海åã§ãæ´ãã¾ãããåå¨ã«ãªãããã«ãã¾ãã¯**å°ããªäºæ¸**ããå§ãã¦ã¿ã¾ãããã\n\n詳ãã㯠ââ ã§ãå¾
ã¡ãã¦ããã¾ãã\n\nâ¶ [**ãæ¬¡æåè¬çåéãèµ·æ¥å®¶ç²¾ç¥ à å¦ã³æ¹æ¹é© = fwywdï¼ãã¥ã¼ãï¼| ææ¦ããªããã¨ããªã¹ã¯ã«ãªãæä»£ã¸**](https://apply.fwywd.com/)\n\né·æãèªã¿ããã ããèª ã«ãããã¨ããããã¾ããã\n\næ ªå¼ä¼ç¤¾ãã«ã¬ã¯ 代表åç· å½¹ä¼é· \nåå´ äº®ä»\n"},{"id":"/blog/2022072704","data":{"title":"æ³åãã¦ãããããã¯ããç°¡åã«ç¤¾é·ã«ãªã£ã話","date":"2022-07-27T17:48:00.000+0900","img_path":"/img/pages/blog/2022072704/ogp.png","img_alt":"æ³åãã¦ãããããã¯ããç°¡åã«ç¤¾é·ã«ãªã£ã話","description":"ä»ã¾ã§ç¤¾é·ã¨ãåäººäºæ¥ä¸»ã¯èªåã«ã¯ç¸ã®ãªããã®ã¨æã£ã¦ãã¾ãããããããã人ã®ä¸è¨ããã£ããã§ç§ã¯ç¤¾é·ããã¥ã¼ãæããã¾ãã","tags":["åäººäºæ¥ä¸»","fwywd","èµ·æ¥"],"prev_title":"æ«æããããã°ãæªçµé¨ããã¨ã³ã¸ãã¢ã«ãªã£ãç§ã®ããã°ã©ãã³ã°ç¬å¦ãµã¤ã¯ã«","prev_link":"/blog/2022072703","next_title":"äºã®ä¸ã®èã人ã®åãå¼ãåºãã群ã«å¯¾ããæè²ã®è¨è¨è¡ ~ å°éå®¶ãæãã¦çºè¨ã§ããªãããããªä¸ã®ä¸ã« ~","next_link":"/blog/educational-design-for-groups","author":"takahashi"},"content":"\nããã«ã¡ã¯ï¼ fwywd éå¶ãã¼ã ã®é«æ©ã§ãï¼\n\nç§ã¯ï¼ï¼ï¼ï¼å¹´ã«åäººäºæ¥ä¸»ã¨ãã¦éæ¥ãã¾ããï¼ä»ã¾ã§ç¤¾é·ã¨ãåäººäºæ¥ä¸»ã¯èªåã«ã¯ç¸ã®ãªããã®ã¨æã£ã¦ãã¾ãããããããã人ã®ä¸è¨ããã£ããã§ç§ã¯ç¤¾é·ããã¥ã¼ãæããã¾ãã\n\nãã®ä¸è¨ã¨ã¯ã**鿥ããã°çµè²»ç³è«ã§ãããï¼éè²ç³åãªã¹ã¹ã¡ï¼**ãã§ãããç´ ç´ãªç§ã¯ã**ãªãã»ã©ï¼éæ¥ãããï¼**ãã¨æ©éè¡åã«ç§»ããã®ã§ããï¼å®éã®ã¨ããããã åã«éæ¥ããã ãã§ã¯éè²ç³åã§ãã¾ããï¼\n\n## Web ãµã¼ãã¹ãå©ç¨ãã¦éæ¥å±ãåºãã°ï¼ï¼åã§ããªãã社é·\n\n夢ã®çµè²»ç³è«ã«åãã¦ç§ã¯ã¤ã³ã¿ã¼ãããã§èª¿ã¹ã¾ãããæ¤ç´¢ã¯ã¼ãã¯ãåäººäºæ¥ä¸» 鿥ããã©ããã鿥ããã«ã¯é£ããæ¸é¡ã«é£ãããã¨ãæ¸ãã¦é£ããè¡æ¿æ©é¢ã«æåºããªãã¨ãããªãâ¦ããã§ã¯ããã¾ããã§ããã\n\n鿥ããããã®æå©ãããã¦ããã Web ãµã¼ãã¹ã§ã**ãã©ã¼ã ã«å¿
è¦äºé
ãå
¥åãåºæ¥ä¸ãã£ãæ¸é¡ãã³ã³ããã§å°å·ãéµé**ããã ãã§éæ¥ãã§ãã¦ãã¾ãã®ã§ãï¼ããªãã¯ããã«éµéãã¦ãï¼ã¨éä»å
使ã¾ã§æãã¦ããã¾ããã¹ã ã¼ãºï¼ç§ã¯ [freee 鿥](https://www.freee.co.jp/kaigyou/)ã¨ãã£ããµã¼ãã¹ãå©ç¨ãã¾ããã\n\nå
¥åã§å¯ä¸æ©ãã ã®ããä¼ç¤¾åãã§ããããã¯ãã²ååã«æ©ãã§ãã ãããçãã¯ããªãã®å¿ã®ãªãã«ã\n\nããã¦ç¡äºã«æ¸é¡ãéµéãã¦ç§ã¯æã£ãã®ã§ããããã£ï¼ããã§èªåã社é·ï¼ï¼ã\n\nç´ä¸é±éå¾ãç¡äºã«ç¨åç½²ãã鿥ãå®äºããã¨ã®æ¸é¡ãå±ãã¾ããã\n\n**ã¿ãªãããç°¡åã«ãªãã¾ããï¼ç¤¾é·ã«ï¼ï¼**\n\n## 鿥ãããã¨ã§å£²ä¸ãä¸ããææ®µãç°¿è¨ã«ã¤ãã¦èããæ©ä¼ã«ãªã£ã\n\nãã¦ãç¡äºéæ¥ãå®äºãã¦ç¤¾é·ã«ãªãã¾ããããã§ãããã§ãããã¨ã¯ããã¾ãããå½ããåã®ãã¨ã§ãã社é·ã«ãªã£ãããã¨ãã£ã¦åæã«å£²ä¸ãä¸ããããã§ã¯ãªãã®ã§ãã\n\n売ä¸ããªãã®ã«çµè²»ã°ã£ããç³è«ãã¦ããã¨è±ç¨ãçããã¾ãã**äºæ¥ãè¡ã£ã¦ãã宿
ããªãã¨è¨ããã¦ãã¾ã**ããã§ãããã©ããã£ããèªåã®æã£ã¦ããã¹ãã«ã§å£²ä¸ãä¸ãããããã ãããã©ããªã¹ãã«ã身ã«ã¤ããã°å£²ä¸ãä¸ãããããã ããã誰ããã®ã¹ãã«ãè²·ã£ã¦ããããã ãããã¨èãããã£ããã«ãªãã¾ããã\n\nã¾ãçµè²»ç³è«ãé å証ãããã£ã¦ããã° OK ! ãªãã¦ãã¨ã¯ããã¾ãããéè²ç³åããããã«ã¯**è¤å¼ç°¿è¨ã¨ããå½¢å¼ã§å¸³ç°¿ãæåºããå¿
è¦ãããã¾ã**ã確å®ç³åã® Web ãµã¼ãã¹ãªã©ã§ããç¨åº¦ç°¡åã«ã§ãã¾ãããããã§ãä¸å®ã®ç¥èãå¿
è¦ã«ãªãã¾ãã\n\nå®éã«éæ¥ãã¦ããªããã°ãã®ããããèãããã¨ããªãéããã¦ããã®ã§ãã¨ã¦ãããæ©ä¼ã«ãªãã¾ããã\n\n## 社é·ã«ãªã£ã¦ãããæ¬å½ã®ã¹ã¿ã¼ã\n\nå®éã«éæ¥å±ãåºãã¦ç¤¾é·ï¼åäººäºæ¥ä¸»ï¼ã«ãªãã®ã¯æ¬å½ã«ç°¡åã§ããã\n\nããã¨åæã«å£²ä¸ãä¸ããããã®ãã¼ãã«ã®é«ããæãã¾ããã**ï¼åã稼ããã¨ããé£ãã**ã®ã§ãã\n\n**人ã®èª²é¡ã解決ããããã®ã¹ãã«ãã¹ãã«ãå¿
è¦ã¨ãã¦ãã人ã«å±ããããã®ãã¼ã±ãã£ã³ã°ãçµçãè³éé¢ã®ãã¡ã¤ãã³ã¹ç¥èã**\n\nãããªãã¨ãããªããã¨ã¯è¨å¤§ã§ããããããã®ã¹ãã«ã身ã«ã¤ãããã¨ãã§ããã°ããããã®å³ããæä»£ãçãæãã¦ãããã¨ãã確信ãããã¾ããã\n\nfwywd ã¯ãããã®åã身ã«ã¤ãããã¨ãã§ããç°å¢ãããã¾ãï¼\n\n- **æè¡ï¼ã¹ãã«ï¼**\n- **売ãåï¼ãã¼ã±ãã£ã³ã°ï¼**\n- **æ¦ç¥ï¼ãã¡ã¤ãã³ã¹ï¼**\n\nãããã®åã身ã«çãã¦**èªç±ã«çããããã«ææ¦ãã¦ã¿ã¾ãããï¼**\n\nã¡ãã£ã¨èå³ããããªã¼ã¨ããæ¹ã以ä¸ã®ãªã³ã¯ãã詳ããè¦ã¦ã¿ã¦ãã ããï¼\n\n[ææ¦ããªããã¨ããªã¹ã¯ã«ãªãæä»£ã¸ãå¦ã³æ¹ã®é©å½ããfwywdï¼ãã¥ã¼ãï¼æ¬¡æåè¬çåéä¸ï¼](https://apply.fwywd.com/)\n"}],"popularPosts":[]},"__N_SSG":true},"page":"/tech/tags/[id]","query":{"id":"instant%20search"},"buildId":"8g7VE4IFZHCF7i2FMUki4","isFallback":false,"gsp":true,"scriptLoader":[]}</script>
8</body></html>
Line numbers count LF bytes from the start of the resource, as the search results do. Vendor segments are library code the classifier recognised; they are stored but not indexed. Bytes are shown as Latin1 characters, one per byte.