Deleted articles cannot be recovered. Draft of this article would be also deleted. Are you sure you want to delete this article?
ããã«ã¡ã¯ããã§ããæ¥åã§cognitoãå©ç¨ãã¦ããã®ã§ããããªãèºããã®ã§å ±æãã¾ãã ã¤ã¾ã¥ããã¤ã³ãå¤ãã ã¾ãAWSãå©ç¨ãã¦ããæ¹ã§SPAã§èªè¨¼ãå®ç¾ãããã¨ãã¦ãããããããã¨ããããæ å ±ããããã¨ã«æ°ã¥ã cognitoã®å©ç¨ Amplify ã® auth ã®å©ç¨ ãããããã¨ãªããæ¬¡ã«Amplifyã調ã¹ã cliãããã cliã§ã³ãã³ãæã¦ã°GraphQLã¨ã使ããã Amplify Consoleããããéçãã¹ãã£ã³ã°ãèªååã§ããã ãï¼èªè¨¼ã ã使ãããã®ã«ãªãã§GraphQLãããã®ï¼ã¿ããã«ãªãã ã¨ãããããåãã¤ã¾ããããã¤ã³ããç¥è¦ãå ±æãããã¨æãã¾ãã åæ ãã§ã«create-react-appãªã©ã§ãä½ãããã®reactããã¸ã§ã¯ããä½ã£ã¦ããã AWSã§conigtoã使ãã ããªãamplifyã¯ãããªããã©ãamplifyã©ã¤ãã©ãªã¯ä¾¿å©ã
ãæ¨æ¶ åãã¾ãã¦ã ãã¼ãã£ã«Webã¨ã³ã¸ãã¢ãåä¹ã£ã¦ãã䏿³¢ã¨ã¿ã¨ç³ãã¾ãã æ®æ®µã¯TwitterãYouTubeã§æ´»åãã¦ããã¾ãã ä»åãåã®ã¢ããã³ãã«ã¬ã³ãã¼ã®åå ã«ãªãã¾ãã ãããããé¡ããã¾ãã ãã®è¨äºã¯microCMS Advent Calender 2021 5æ¥ç®ã®è¨äºã§ãã ä½ã£ããã® ä»åã¯èªåã®å®£ä¼ãããã¦ã䏿³¢ã¨ã¿ã®å ¬å¼ãµã¤ãã使ãã¦ã¿ã¾ããã æè¡æ§æ Next.js 11.1.2 TypeScript 4.4.4 CSS Modules @mui/material 5.0.4 microCMS Vercel ãªã(ãã®æè¡ã§)ä½ã£ãã®ã èªåã®ãµã¤ããããã¨ãªããã«ãã³ãã ãä»äºãæ¢ãæã«ä½¿ããã¼ããã©ãªãªä½åã®1ã¤ã¨ãã¦ æ®æ®µReactã¨TypeScriptã触ã£ã¦ããã®ã§Next.jsã使ã£ã¦è¦ããã£ã SSGã«ãèå³ããã£ãã®ã§èª¿ã¹ã¦ããã¨
ããã«ã¡ã¯ãPR TIMES ã®éçºæ¬é¨ã§ããã³ãã¨ã³ãã¨ã³ã¸ãã¢ããã¦ããé´æ¨é大(@szkyudi)ã§ãã 2021å¹´10æã«2020å¹´æ°åã®åã¨2021å¹´æ°åã®2人ã®è¨3人ã§ä¼æ¥ãã¼ã¸ã®ããã³ãã¨ã³ããã¬ã¬ã·ã¼ãªã³ã¼ããã React.js ã«ãªãã¬ã¤ã¹ãããã®ããªãªã¼ã¹ããã®ã§ããã®ã話ããããã¨æãã¾ãã 伿¥ãã¼ã¸ãã©ããã£ããã¼ã¸ãã«ã¤ãã¦ã¯ä¸è¨ã® PR TIMES MAGAZINE ã®è¨äºãã覧ãã ããã ãªãã¬ã¤ã¹ã«è³ã£ãèæ¯ ãªãã¬ã¤ã¹åã®ä¼æ¥ãã¼ã¸ã®ããã³ãã¨ã³ãã®æè¡ã¹ã¿ãã¯ã¯ä»¥ä¸ã®ããã«ãªã£ã¦ãã¾ããã jQueryJavaScript (ES5以å)JavaScript (ES6以é)Vue.jsSCSS ãã®ããã«ã²ã¨ã¤ã®ãã¼ã¸ã®ä¸ã§ãè¤æ°ã®æè¡ãæ··å¨ãã¦ãã¾ãããã¾ãããã£ã¬ã¯ããªæ§é ãè¨è¿°ã«ã¼ã«ãæ´åããã¦ãã¾ããã§ããã ãã®ããã«ãã³ã¼ãã®ãã£ããã¢ã
Cognitoã¦ã¼ã¶ã¼ãã¼ã«ã使ç¨ãã¦ãReactã¢ããªã«ãµã¤ã³ã¤ã³æ©è½ãå®è£ ãã¾ãã ä»åã¯Amplifyã使ç¨ãããã¨ã§ãèªè¨¼ã»èªå¯ã«é¢ããæ§ã ãªããã¼ã®å®è£ ãçç¥ãã¾ãã Cognitoã§èªè¨¼èªå¯ãå®è£ ããæ¹æ³ã®æ´ç Cognitoã使ç¨ãã¦èªè¨¼èªå¯ãããã³ãã¨ã³ãã§å®è£ ããæ¹æ³ã¯ããã¤ãããã¾ãã èªåã¯Cognitoã使ç¨ãããªã以ä¸ã®3ã¤ãæãã¤ãã¾ãã Amplifyã®Authã¢ã¸ã¥ã¼ã«ã®å©ç¨ãã¦èªè¨¼ç»é¢ãèªä½ ããã³ãã¨ã³ããã¬ã¼ã ã¯ã¼ã¯ç¨ã®ã³ã³ãã¼ãã³ãã使ç¨ãã Cognitoã¦ã¼ã¶ã¼ãã¼ã«ã®HostedUIãå©ç¨ ä¸ã®æ¹ãä½ã¬ãã«ã®APIãå©ç¨ã§ããã«ã¹ã¿ãã¤ãºãªã©ã¯ããããã§ãã ãã ãç¹å¥ãªããã¼ãä¸è¦ã§ãã£ããããã¶ã¤ã³ã«é¢ãã¦ç´°ããè¦æ±ããªãå ´åã¯ä¸ã®ãã®ã使ãã®ã楽ã ã¨æãã¾ãã å©ç¨ã§ããã³ã³ãã¼ãã³ãã¨ãã¦ã¯ReactãAngularãVueãããã¾ãã
å æ¥éå¬ãããã¸ã£ã ã¸ã£ã Jamstackã§ç»å£ããã¦ããã ããæã®è¨äºã«ãªãã¾ãã ç°¡ææ§æã®ãªãã¸ããªã使ãã¾ããã®ã§ãåèã«ãªãã°ã¨æãã¾ãã çµç·¯ ã¡ãã£ã¢ãµã¤ãã使ãããã¨ã«ãªã£ã ãã¶ã¤ãã¼ã³ã¼ãã¼ Ã1 ããã³ãã¨ã³ãã¨ã³ã¸ã㢠Ã1ï¼ã¯ã¤ï¼ Next.jsã¨microCMSã§SSGãã¦vercelã«ããã㤠ç§çãJamstackçéæ§æã§ãã ãã¶ã¤ãã¼ã³ã¼ãã¼ãããJsããããã§ãããæµææããã¾ãã SSGãããçºã®pages/é ä¸ã®ãã¡ã¤ã«ã«ã¯ããããªå¦çãè¨è¼ããã¾ãã getStaticPropsãgetStaticPathsã¨ã ãã¼ã¸ãã¼ã·ã§ã³ã¨ããã³ã¯ãºã¨ãä½ãçºã®å¦çãè²ã è¨è¿°ããã¾ãã ãã®è¾ºãªãããã®æ¹æ³ã§ã»ããæãã«ã»åé¢ã§ãããã»ããã§ãã^^ ãã¶ã¤ãã¼ã³ã¼ãã¼ã触ãViewã®é¨å ããã³ãã¨ã³ãã触ããã¸ãã¯ã®é¨å ãããç®æãã¦ããã¾ã
ããã«ã¡ã¯ã ãã®è¨äºã§ã¯GraphQLã®ã¯ã©ã¤ã¢ã³ãã§ããApollo Clientã®å ¥éãReactããä¾ã«æ¸ãã¾ããæ¥æ¬ã§ã¯Vueãä¸çªäººå£å¤ãããããªããã¨ããæ°ããã¦ããã®ã§ãããVueã人æ°éãã¦Reactãçãä¸ããã°ï¼ã¨ããè¬ã®ä½¿å½æãæãã¦ããã®ã§Reactã§æ¸ããã¨ã«ãã¾ããã ãã ãApollo Clientã¯ä»ã®UIã©ã¤ãã©ãªã§ãå©ç¨å¯è½ã§ãã¾ãèãæ¹ã¨ãã¯ä¸ç·ãªã®ã§React使ããªãã¨ããæ¹ããã²èªãã§ãã£ã¦ãã ããã 話ããªãã㨠ãå ¥éãã¨ã¤ãã¦ãã®ã§ã¡ããã¨GraphQLã¨ã¯ãªããããApollo Clientã¨ã¯ãªãããã¨ããç¹ã«å¯¾ãã¦è¨åãã¹ããªã®ã§ãããããã«ã¤ãã¦ã¯ä»ã®è¨äºã§æ¸ããã®ã§ãã¡ããã覧ãã ããã ä¸ã®ããã³ãã¨ã³ãã¨ã³ã¸ãã¢éã«Apollo Clientã叿ããã ãã¼ã¸ã§ã³æ å ± æ¬è¨äºå ã§ä½¿ããã¦ãã主è¦ãªããã±ã¼ã¸ã®ãã¼ã¸ã§ã³ãè¨è¼
Apollo Client ã¨ã¯Apollo ããã±ã¼ã¸ã¯ãGraphQL ã使ã£ãã¯ã©ã¤ã¢ã³ãã¢ããªããµã¼ãã¼ã使ããããã®ã©ã¤ãã©ãªç¾¤ã§ãã ã¯ã©ã¤ã¢ã³ãã¢ããªãä½ãããã®ã©ã¤ãã©ãªã¯ãApollo Client ã¨ã㦠@apollo/client ã¨ãã NPM ããã±ã¼ã¸ã«ã¾ã¨ãããã¦ãã¾ãã Web ã¢ããªã®ã³ã³ãã¼ãã³ãã使ããã¨ã㯠React ããã使ããã¾ãããApollo 㯠GraphQL ãæ±ãããããã React ã³ã³ãã¼ãã³ãï¼ApolloProviderãQueryãMutationãSubscriptionï¼ã React Hook æ¡å¼µï¼useQuery) ãªã©ãæä¾ãã¦ãã¾ãã ããã§ã¯ãApollo Client ããã±ã¼ã¸ã使ç¨ãã¦ã Node.js ã¢ããªï¼ã³ãã³ãã©ã¤ã³ã¢ããªã® JSï¼ãã GraphQL API ã®å®è¡React ã¢ããª
æè¿ç¤¾å ã¬ãã¥ã¼ä¼ã§ React ã¬ãã¥ã¼ãå¤ããªãããã«ã¹ã¿ã ããã¯ä½¿ã£ããã¹ãããªã§ãã¾ããã¨ããè¨èãããèãããã«ãªãã¾ããã ç§ãåãã¦ãããè³ã«ããã¨ãã¯ããªã«ããç¾å³ããã®ï¼ãã¿ãããªæãã§ããããåå¿è ã«ã¯ãã³ã¨ããªãæ¦å¿µããªã¼ã¨æãã¾ããã®ã§ãä»åã®ãã¼ãã«ãããã¨æãã¾ãã 1. ã«ã¹ã¿ã ããã¯ã¨ã¯ ã«ã¹ã¿ã ããã¯ã¯èªåãã«ã¹ã¿ã ãã¦ä½ãããã¯ã§ãã React å ¬å¼ãµã¤ãã§ã¯ã«ã¹ã¿ã ããã¯ããã説æãã¦ã¾ãã ã«ã¹ã¿ã ããã¯ã¨ã¯ãååã âuseâ ã§å§ã¾ããã»ãã®ããã¯ãå¼ã³åºãã JavaScript ã®é¢æ°ã®ãã¨ã§ãã ã§ãããã ãè¦ãã絶対ããããªãã¨æãã®ã§ãµã³ãã«ã³ã¼ããä¸ç·ã«è¦ã¦ã¿ã¾ãããã 2. ãã£ããã¢ããªã®ä¾ ãµã³ãã«ã³ã¼ãã React å ¬å¼ãµã¤ãã«ãããã®ãæã£ã¦ãã¾ããã ãã£ããã¢ããªã§åéããªã³ã©ã¤ã³ããªãã©ã¤ã³ãã示ãã¡ãã»ã¼ã¸ãè¿ã
VTeacherã¯ãã¼ã åã§ãï¼ä»£è¡¨: m-suzukiï¼ã VTeacher AI school.vteacher.biz ã大å¦å ±éãã¹ãæ å ±â 対çã®ããã°ã©ãã³ã°å¯¾çã1æ¥1åã®ç·´ç¿åé¡ãâ»æ å ±ã®æ°é®®ããéè¦ãã¦ãã¾ããæç¨¿è¨äºã¯å®æçã«åé¤ãã¦ãã¾ãã
Next.jsã¯ãVercelã¨ãããã¹ãã£ã³ã°ãµã¼ãã¹ãªã©ãå±éãã伿¥ãéçºãã¦ãã JavaScriptãã¬ã¼ã ã¯ã¼ã¯ã§ãã Reactã¨ãã JavaScriptã©ã¤ãã©ãªã¼ããã¼ã¹ã«éçºããã¦ãã¦ãå¤§è¦æ¨¡ãªãµã¤ãå¶ä½ãã¦ã§ããã¼ã¹ã®ããã°ã©ã éçºãªã©ãå¯è½ãªãã¬ã¼ã ã¯ã¼ã¯ã¨ãã¦éçºããã¦ãã¾ãã ãã®è¬åº§ã§ã¯ãã¾ã㯠Next.jsã®ã»ããã¢ããæ¹æ³ããç°¡åãªãã¼ã¸ã®å¶ä½ãå ¬éã¾ã§ã®æµããç´¹ä»ãã¦ããã¾ãããã ãã¬ã¼ã ã¯ã¼ã¯ã¨ã¯ ãã¬ã¼ã ã¯ã¼ã¯ï¼Frameworkï¼ã¨ã¯ããè¶³å ´ãã¨ãã£ãæå³ã®è±åèªã§ããReactã¯ãã©ã¤ãã©ãªã¼ãã¨å¼ã°ãããã®å ´åã¯åãã¼ã¸ãã Reactãå¼ã³åºãã¦å©ç¨ããå½¢ã«ãªãã¾ããããã¬ã¼ã ã¯ã¼ã¯ã®å ´åã¯ãµã¤ããã·ã¹ãã å ¨ä½ã®ãã¼ã¹ã¨ãã¦ããã®ä¸ã§ããã°ã©ã ãæ§ç¯ãã¦ãããã¨ã§ãå ¨ä½ãçµ±ä¸ãããããã¿ã§æ§ç¯ã§ãããã¼ã éçºãå¤§è¦æ¨¡ãªã·ã¹ãã éçºã«å¨å
Next.js ã§ä½æãã Web ã¢ããªã next-pwa ã使ã£ã¦ PWA 対å¿ãã¦ã¿ã¾ãããè¤éãªãã£ãã·ã¥æ¦ç¥ãå¿ è¦ã§ãªããã°ã»ã¨ãã©ããã©ã«ãè¨å®ã®ã¾ã¾ã§ãåé¡ãªãããã§ãã çµç·¯ è¶£å³ãæè¸ï¼ãã·ã³ï¼ã®å¦»ããããæ¥çªç¶ãslack ã§ãããªç»åãéä¿¡ããã¦ãã¾ããã ç¹ã«é£ãããã®ã§ã¯ãªãã£ãã®ã§ãééæéã§ãµãã¨ä½ã£ã¦ Cloudflare Pages ã«ãããã¤ãã¾ããã Cloth Price Calculator è¨ç®ãããã°ãæ®ããã»ããããããããªããããã®ãã°ããåè¨ãã ãããã§ããã»ããããã®ã§ã¯ãªãããªã©è²ã ã¨ææ¡ãã¦ã¿ãã®ã§ããããããããã·ã³ãã«ãªã»ãã使ãåæãããã¨ã®ãã¨ã ã£ãã®ã§å¸æéãã«å®è£ ãã¾ããã çµæããããã®åé¿ãããããã£ãããªã®ã§ãªãã©ã¤ã³ã§ãåä½ããããã« PWA 対å¿ããã¦ã¿ã¾ããã Next.js ã§ PWA å¯¾å¿ https:
以åãmicroCMS 㨠Next.js ã§ããã°ãä½ãã¨ããããã°ãæ¸ããã®ã§ãããmicroCMS ããå ¬å¼ã® SDK ãæä¾ããã¦ããã®ã§æ¸ãæãã¦ã¿ã¾ããã ååã¨æ¯ã¹ã大ããç°ãªãç¹ã¯ä»¥ä¸ã® 2 ç¹ã«ãªãã¾ãã microCMS JavaScript SDKã使ããããaspidaã¯æªä½¿ç¨ Next.js ã®ãã¼ã¸ã§ã³ã 10 ãã 11 ã«ã¢ãããã¼ã ããã§ã¯ããã夿´ç¹ã«ã¤ãã¦ã®ã¿æ±ãã¾ããããã»ã©å¤ãããªãç¹ã«ã¤ãã¦ã¯ãååã®è¨äºããåç §ãã ãããmicroCMS ã® API ã¯ã¾ã£ããåããã®ã使ç¨ãã¦ãã¾ãã 宿ããã³ã¼ãã®ãªãã¸ããªã¯ä¸è¨ã«ãªãã¾ãã https://github.com/hbsnow-sandbox/nextjs-micro-cms-sdk-example ã¤ã³ã¹ãã¼ã« ã¾ã㯠Next.js ãã¤ã³ã¹ãã¼ã«ãã¾ããããTypeScript ã¯
Jamstackãæ¢åã®ã·ã¹ãã ã«å°å ¥ããããæ¤è¨ããæ©ä¼ããã£ãã ç´ä½æ²æãããã®ã®ãæªã ã«æ«å®çãªçµè«ããåºã¦ããªãã ã¨ã¯ãããããã¨é å¼µã£ãã ä»å㯠Jamstackã¨ã¯ãªãããï¼ Jamstackã®ç¹å¾´ Jamstackã®æè¡ å¼±ã¿ã解決ããç å®éã«æ¤è¨ãã話 ãéã«ç´¹ä»ãããã å人çãªã¡ã¢ãªã®ã§ãééã£ã¦ããã¨ãããããã®ãèæ ®é¡ãããã Jamstackã¨ã¯ï¼ Jamstackã®Jamã¯ä»¥ä¸ã®é æåãã¨ã£ã¦ããã JavaScript APIs Markup ã¾ããããã³ãã¨ã³ããæããªãAPI群ããããAPIã¯ãã©ã¦ã¶ã®JavaScriptããå©ããããããããªãããå¾è¿°ãããããªSSG =ãStatic Site Generatorãã®ãã¬ã¼ã ã¯ã¼ã¯ãå©ãããç¥ããªããã©ã¡ãã«ããã¦ã¼ã¶ã¼ã«é ä¿¡ãããã®ã¯SSGãåºåãããMarkupãã¤ã¾ãããªã¬ã³ããªã³ã°ããã
React ã§ã¯ãã³ã³ãã¼ãã³ãéã®ç¶æ 㯠props ã¨ãã¦è¦ªã³ã³ãã¼ãã³ãããåã³ã³ãã¼ãã³ãã¸æ¸¡ãå¿ è¦ãããã¾ãããè¤æ°ã®è¦ªåé¢ä¿ã«ããªãã³ã³ãã¼ãã³ããè·¨ãã§å ±éã§å©ç¨ãããå¤ãä¾ãã°ãã±ã¼ã«ã®æ å ±ã UI ã®ãã¼ãããã°ã¤ã³ç¶æ ãªã©ããããå ´åãContext ã使ããã¨ã§é¢åãªãã±ããªã¬ã¼ããããã¨ãªãã°ãã¼ãã«ãªå¤ã¨ãã¦ã³ã³ãã¼ãã³ãéã§æ å ±ãå ±æã§ãã¾ãã Context ã®ä½¿ãæ¹ Context ãå©ç¨ããã¨ã㯠Context Provider ã§å¤ãåãåãããã®é ä¸ã®ã³ã³ãã¼ãã³ãå ã§å¤æ´ãè³¼èªãããã¨ãã§ããããã«ãªãã¾ãã React ã«ã¯ useContext ã¨ãã ããã¯ãç¨æããã¦ãããContext Provider é ä¸ã®ã³ã³ãã¼ãã³ãããuseContext(<ã³ã³ããã¹ãå>)ã§ã³ã³ããã¹ãã®å¤ãè³¼èªãããã¨ãã§ãã¾ãã import React
What is Docusaurus ? Build optimized websites quickly, focus on your content - Docusaurus Keytar Docusaurus ã¨ã¯ "æé©åãããã¦ã§ããµã¤ããè¿ éã«æ§ç¯ãï¼æ¬è³ªã«éä¸ããã" ã¨ããã¹ãã¼ã¬ã³ã®ã㨠Facebook åä¸ã®ãã¼ã ãéçºãã¦ãã éçãµã¤ãã¸ã§ãã¬ã¼ã¿ã§ãï¼ç¹å¾´ã¨ãã¦ï¼æ¬¡ã®äºã¤ãæãããã¦ãã¾ãï¼ Powered by Markdown => MDX Built Using React Content Search Ready for Translations Document Versioning â»ãã ãï¼ã¾ã ã¾ã ã¢ã«ãã¡ãªã®ã§ï¼ï¼ï¼ã«ã¤ãã¦ã¯å·¥äºãé²è¡ä¸ 追è¨ï¼2021 å¹´ 5 æ 12 æ¥ã« β çããªãªã¼ã¹ããï¼2022/02/23 ç¾å¨ã§ã¯ beta.15
Next.js ã§ Google Analytics ã使ã£ã¦ããã®ã§ããããã¼ã¸ãã¥ã¼ã¤ãã³ããéè¤ãã¦è¨æ¸¬ããã¦ãããã¨ãå¤ãã£ãã®ã§èª¿ã¹ã¦ã¿ã¾ããã åæã¨ãã¦ãNext.js å ¬å¼ã® examples/with-google-analytics ã®éãã«å®è£ ãã¦ããå ´åãä»åã®äºè±¡ãçºçãã¾ããï¼2021/3/19 æç¹ï¼ ä¸å ·åã¨ãã訳ã§ã¯ãªãã®ã§å ¬å¼ã® example ãééã£ã¦ããã¨ãã訳ã§ã¯ããã¾ããããå²ã¨çºçãã¦å°ã人ãããããªã®ã§ãå人çãªå¯¾å¦æ¹æ³ãã¡ã¢ãã¦ããã¾ãã èµ·ãã£ãåé¡ ã¯ã¨ãªã¹ããªã³ã°(URLãã©ã¡ã¼ã¿)ä»ãURLã§éççæãã¼ã¸ã«ã¢ã¯ã»ã¹ããã¨ã Google Analytics ã«ãã¼ã¸ãã¥ã¼ã¤ãã³ããäºéã§éä¿¡ããã¦ãã¾ãããçºçããã®ã¯éççæããããã¼ã¸ã§ãSSRã®ãã¼ã¸ã§ã¯çºçãã¾ããã (è£è¶³ï¼ ããããéççæãã¼ã¸ã«ãªãURLãã©ã¡ã¼ã¿
ã¡ã³ããã³ã¹
ã©ã³ãã³ã°
ãç¥ãã
ãªãªã¼ã¹ãé害æ å ±ãªã©ã®ãµã¼ãã¹ã®ãç¥ãã
ææ°ã®äººæ°ã¨ã³ããªã¼ã®é ä¿¡
å¦çãå®è¡ä¸ã§ã
j次ã®ããã¯ãã¼ã¯
kåã®ããã¯ãã¼ã¯
lãã¨ã§èªã
eã³ã¡ã³ãä¸è¦§ãéã
oãã¼ã¸ãéã
{{#tags}}- {{label}}
{{/tags}}