React SuspenseãšãªãœãŒã¹ã®äºåèªã¿èŸŒã¿ãäºæž¬çãªããŒã¿èªã¿èŸŒã¿ãå¯èœã«ããã°ããŒãã«ãªReactã¢ããªã±ãŒã·ã§ã³ã§ããã¹ã ãŒãºãã€é«éãªãŠãŒã¶ãŒãšã¯ã¹ããªãšã³ã¹ã«ã€ãªããæ¹æ³ã解説ããŸãã
React SuspenseãšãªãœãŒã¹ã®äºåèªã¿èŸŒã¿ïŒã·ãŒã ã¬ã¹ãªãŠãŒã¶ãŒãšã¯ã¹ããªãšã³ã¹ãå®çŸããäºæž¬çããŒã¿èªã¿èŸŒã¿
仿¥ã®ããŒã¹ã®éãããžã¿ã«ç°å¢ã«ãããŠããŠãŒã¶ãŒã¯å³æã®æºè¶³ãæåŸ ããŠããŸãããŠã§ããµã€ããã¢ããªã±ãŒã·ã§ã³ãè¿ éã«èªã¿èŸŒãŸããæµåçã§å¿çæ§ã®é«ãäœéšãæäŸããããšãæ±ããŠããã®ã§ããé ãèªã¿èŸŒã¿æéãããã¡ãªãé·ç§»ã¯ããã©ã¹ãã¬ãŒã·ã§ã³ãé¢è±ã«ã€ãªããå¯èœæ§ããããŸããReact Suspenseã¯ã广çãªãªãœãŒã¹äºåèªã¿èŸŒã¿æŠç¥ãšçµã¿åãããããšã§ããã®èª²é¡ã«å¯Ÿãã匷åãªãœãªã¥ãŒã·ã§ã³ãæäŸããäºæž¬çãªããŒã¿èªã¿èŸŒã¿ãå¯èœã«ãããŠãŒã¶ãŒã®å Žæãããã€ã¹ã«é¢ä¿ãªãããŠãŒã¶ãŒãšã¯ã¹ããªãšã³ã¹ãå€§å¹ ã«åäžãããŸãã
åé¡ã®çè§£ïŒããŒã¿èªã¿èŸŒã¿ã®ããã«ããã¯
åŸæ¥ã®Reactã¢ããªã±ãŒã·ã§ã³ã«ãããããŒã¿ãã§ããã³ã°ã¯ããã°ãã°ããŠã©ãŒã¿ãŒãã©ãŒã«ã广ãåŒãèµ·ãããŸããã³ã³ããŒãã³ããã¬ã³ããªã³ã°ããããã®åŸããŒã¿ããã§ããããããããã³ã³ãã³ãã衚瀺ããããŸã§ã«é å»¶ãçºçããŸããããã¯ãè€æ°ã®ããŒã¿ãœãŒã¹ãå¿ èŠãšããè€éãªã¢ããªã±ãŒã·ã§ã³ã§ç¹ã«é¡èã§ãããŠãŒã¶ãŒã¯ãããŒã¿ãå°çããã®ãåŸ ã¡ãªãããã¹ãããŒã空çœã®ç»é¢ãèŠã€ããããšã«ãªããŸãããã®ãåŸ æ©æéãã¯ããŠãŒã¶ãŒãšã³ã²ãŒãžã¡ã³ããšæºè¶³åºŠã«çŽæ¥åœ±é¿ããŸãã
ãããã¯ãŒã¯ç¶æ³ããµãŒããŒã®å Žæã倧ããç°ãªãã°ããŒãã«ã¢ããªã±ãŒã·ã§ã³ã§ã¯ããã®èª²é¡ã¯ããã«å¢å¹ ãããŸããã€ã³ã¿ãŒãããæ¥ç¶ãé ãå°åããå°çã®å察åŽã«ãããµãŒããŒã«ã¢ã¯ã»ã¹ããŠãããŠãŒã¶ãŒã¯ãèªã¿èŸŒã¿æéãå€§å¹ ã«é·ããªãå¯èœæ§ããããŸãããããã£ãŠãåœéçãªãªãŒãã£ãšã³ã¹ã®ããã«ã¯æé©åãäžå¯æ¬ ã§ãã
React Suspenseã®ç»å ŽïŒåŸ æ©æéãžã®è§£æ±ºç
React Suspenseã¯ãReactã«çµã¿èŸŒãŸããã¡ã«ããºã ã§ãã³ã³ããŒãã³ããããŒã¿ãã§ããã³ã°ãªã©ã®éåææäœãå®äºããã®ãåŸ ã€éãã¬ã³ããªã³ã°ããäžæãã§ããããã«ãããã®ã§ããã³ã³ããŒãã³ããäžæãããšãReactã¯ããŒã¿ãæºåã§ãããŸã§ãã©ãŒã«ããã¯UIïŒäŸïŒèªã¿èŸŒã¿ã¹ãããŒïŒã衚瀺ããŸããããŒã¿ãå©çšå¯èœã«ãªããšãReactã¯ãã©ãŒã«ããã¯ãå®éã®ã³ã³ãã³ãã«ã·ãŒã ã¬ã¹ã«çœ®ãæããã¹ã ãŒãºã§èŠèŠçã«é åçãªé·ç§»ãäœãåºããŸãã
Suspenseã¯ãReactãã¬ã³ããªã³ã°ã¿ã¹ã¯ãäžæãäžæåæ¢ãåéã§ããã³ã³ã«ã¬ã³ãã¢ãŒããšã·ãŒã ã¬ã¹ã«é£æºããããã«èšèšãããŠããŸããããã¯ãè€éãªããŒã¿èªã¿èŸŒã¿ã·ããªãªãæ±ãå Žåã§ããå¿çæ§ã®é«ããŠãŒã¶ãŒã€ã³ã¿ãŒãã§ãŒã¹ãå®çŸããããã«éåžžã«éèŠã§ããããã¯ããŠãŒã¶ãŒã®ãã±ãŒã«ã«ãã£ãŠç°ãªãèšèªãç°ãªãããŒã¿åœ¢åŒãç°ãªããµãŒããŒå¿çæéãåŠçããå¿ èŠãããåœéçãªã¢ããªã±ãŒã·ã§ã³ã®å Žåã«éåžžã«é¢é£æ§ããããŸãã
React Suspenseã®äž»ãªå©ç¹ïŒ
- ãŠãŒã¶ãŒãšã¯ã¹ããªãšã³ã¹ã®åäžïŒ ããŒã¿èªã¿èŸŒã¿äžã«ãã©ãŒã«ããã¯UIã衚瀺ããããšã§ãããã¹ã ãŒãºã§ããã¡ãªãã®å°ãªãäœéšãæäŸããŸãã
- ããŒã¿ãã§ããã³ã°ã®ç°¡çŽ åïŒ ããŒã¿ãã§ããã³ã°ã®ç®¡çã容æã«ããReactã®ã³ã³ããŒãã³ãã©ã€ããµã€ã¯ã«ãšçµ±åããŸãã
- ããã©ãŒãã³ã¹ã®åäžïŒ ã³ã³ã«ã¬ã³ãã¬ã³ããªã³ã°ãå¯èœã«ããããŒã¿èªã¿èŸŒã¿äžã§ãUIã®å¿çæ§ãç¶æããŸãã
- 宣èšçãªã¢ãããŒãïŒ éçºè ã宣èšçãªæ¹æ³ã§ã³ã³ããŒãã³ããèªã¿èŸŒã¿ç¶æ ãã©ã®ããã«åŠçãã¹ããã宣èšã§ããããã«ããŸãã
ãªãœãŒã¹ã®äºåèªã¿èŸŒã¿ïŒããã¢ã¯ãã£ããªããŒã¿ãã§ããã³ã°
SuspenseãããŒã¿èªã¿èŸŒã¿äžã®ã¬ã³ããªã³ã°ãåŠçããäžæ¹ã§ããªãœãŒã¹ã®äºåèªã¿èŸŒã¿ã¯ããã¢ã¯ãã£ããªã¢ãããŒããåããŸããããã¯ãã³ã³ããŒãã³ããããŒã¿ãå¿ èŠãšãã*å*ã«ããŒã¿ããã§ããããããã«ãã£ãŠäœæçãªèªã¿èŸŒã¿æéãççž®ããããšãå«ã¿ãŸããäºåèªã¿èŸŒã¿ã¯ã以äžã®ãããªæ§ã ãªãã¯ããã¯ãçšããŠé©çšã§ããŸãïŒ
- HTMLã®``ã¿ã°ïŒ ãã©ãŠã¶ã«ãªãœãŒã¹ïŒäŸïŒJavaScriptãã¡ã€ã«ãç»åãããŒã¿ïŒãã§ããã ãæ©ãããŠã³ããŒããå§ããããæç€ºããŸãã
- `useTransition`ããã³`useDeferredValue`ããã¯ïŒReactïŒïŒ èªã¿èŸŒã¿äžã®UIæŽæ°ã®ç®¡çãšåªå é äœä»ããæ¯æŽããŸãã
- äºåã«éå§ããããããã¯ãŒã¯ãªã¯ãšã¹ãïŒ ã³ã³ããŒãã³ããããŠã³ããããåã«ããŒã¿ãã§ããã³ã°ãéå§ããããã®ã«ã¹ã¿ã ããžãã¯ãããã¯ãŠãŒã¶ãŒã®ã€ã³ã¿ã©ã¯ã·ã§ã³ãä»ã®ã€ãã³ãã«ãã£ãŠããªã¬ãŒã§ããŸãã
- åç`import()`ã«ããã³ãŒãåå²ïŒ ã³ãŒãããã³ãã«ããå¿ èŠãªãšãã«ã®ã¿ãã§ããããŸãã
React SuspenseãšãªãœãŒã¹ã®äºåèªã¿èŸŒã¿ã®çµã¿åããã¯åŒ·åã§ããSuspenseã¯èªã¿èŸŒã¿ç¶æ ã®åŠçæ¹æ³ãå®çŸ©ãããªãœãŒã¹ã®äºåèªã¿èŸŒã¿ã¯ã³ã³ããŒãã³ããã¬ã³ããªã³ã°ããæºåãã§ãããšãã«ããŒã¿ã*æºå*ããŸããããŒã¿ããã€å¿ èŠã«ãªãããäºæž¬ããããã¢ã¯ãã£ãã«ãã§ããããããšã§ããŠãŒã¶ãŒãåŸ ã€æéãæå°éã«æããŸãã
å®è·µäŸïŒSuspenseãšäºåèªã¿èŸŒã¿ã®å®è£
äŸ1ïŒããŒã¿ãã§ããã³ã°ã³ã³ããŒãã³ãã§ã®åºæ¬çãªSuspense
ä»®ã®APIããããŒã¿ããã§ããããç°¡åãªäŸãäœæããŠã¿ãŸããããããã¯ååãå®èšŒããããã®åºæ¬çã§ããéèŠãªæ§æèŠçŽ ã§ãã補åã«é¢ããããŒã¿ãååŸããŠãããšä»®å®ããŸããããã¯ã°ããŒãã«ãªEã³ããŒã¹ãã©ãããã©ãŒã ã§ããããã·ããªãªã§ãã
// ProductComponent.js
import React, { Suspense, useState, useEffect } from 'react';
const fetchData = (productId) => {
// Simulate an API call
return new Promise((resolve) => {
setTimeout(() => {
resolve({ id: productId, name: `Product ${productId}`, description: 'A fantastic product.', price: 29.99 });
}, 1500); // Simulate a 1.5-second delay
});
};
const Product = React.lazy(() =>
import('./ProductDetails').then(module => ({
default: module.ProductDetails
}))
);
function ProductComponent({ productId }) {
const [product, setProduct] = useState(null);
const [error, setError] = useState(null);
useEffect(() => {
const loadProduct = async () => {
try {
const data = await fetchData(productId);
setProduct(data);
} catch (err) {
setError(err);
}
};
loadProduct();
}, [productId]);
if (error) {
return Error loading product: {error.message};
}
if (!product) {
return Loading...;
}
return ;
}
export default ProductComponent;
// ProductDetails.js
import React from 'react';
function ProductDetails({ product }) {
return (
{product.name}
{product.description}
Price: ${product.price}
);
}
export default ProductDetails;
ãã®äŸã§ã¯ã`ProductComponent`ã`fetchData`颿°ïŒAPIåŒã³åºããã·ãã¥ã¬ãŒãïŒã䜿çšããŠè£œåããŒã¿ããã§ããããŸãã`Suspense`ã³ã³ããŒãã³ããæã ã®ã³ã³ããŒãã³ããã©ããããŸããAPIåŒã³åºããäºæ³ä»¥äžã«æéããããå ŽåããLoading...ããšããã¡ãã»ãŒãžã衚瀺ãããŸãããã®èªã¿èŸŒã¿ã¡ãã»ãŒãžãæã ã®ãã©ãŒã«ããã¯ã§ãã
äŸ2ïŒã«ã¹ã¿ã ããã¯ãšReact.lazyã«ããäºåèªã¿èŸŒã¿
`React.lazy`ãš`useTransition`ãçµ±åããŠãäŸãããã«çºå±ãããŸããããããã«ãããã³ãŒããåå²ããUIã®äžéšããªã³ããã³ãã§èªã¿èŸŒãããšãã§ããŸããããã¯ãéåžžã«å€§èŠæš¡ãªåœéçã¢ããªã±ãŒã·ã§ã³ã«åãçµãéã«ç¹ã«äŸ¿å©ã§ããç¹å®ã®ã³ã³ããŒãã³ãããªã³ããã³ãã§èªã¿èŸŒãããšã§ãåæèªã¿èŸŒã¿æéãå€§å¹ ã«ççž®ããã¢ããªã±ãŒã·ã§ã³ã®å¿çæ§ãé«ããããšãã§ããŸãã
// useProductData.js (Custom Hook for Data Fetching and Preloading)
import { useState, useEffect, useTransition } from 'react';
const fetchData = (productId) => {
return new Promise((resolve) => {
setTimeout(() => {
resolve({ id: productId, name: `Preloaded Product ${productId}`, description: 'A proactively loaded product.', price: 39.99 });
}, 1000); // Simulate a 1-second delay
});
};
export function useProductData(productId) {
const [product, setProduct] = useState(null);
const [error, setError] = useState(null);
const [isPending, startTransition] = useTransition();
useEffect(() => {
const loadProduct = async () => {
try {
const data = await fetchData(productId);
startTransition(() => {
setProduct(data);
});
} catch (err) {
setError(err);
}
};
loadProduct();
}, [productId, startTransition]);
return { product, error, isPending };
}
// ProductComponent.js
import React, { Suspense, lazy } from 'react';
import { useProductData } from './useProductData';
const ProductDetails = lazy(() => import('./ProductDetails'));
function ProductComponent({ productId }) {
const { product, error, isPending } = useProductData(productId);
if (error) {
return Error loading product: {error.message};
}
return (
Loading Product Details... ãã®åŒ·åãããäŸã§ã¯ïŒ
- `useProductData`ããã¯ïŒ ãã®ã«ã¹ã¿ã ããã¯ã¯ãããŒã¿ãã§ããã³ã°ã®ããžãã¯ã管çãã`useTransition`ããã¯ãå«ã¿ãŸãããŸãã補åããŒã¿ãšãšã©ãŒãè¿ããŸãã
- `startTransition`ïŒ `useTransition`ããã¯ã§ã©ãããããŠãããæŽæ°ãUIããããã¯ããªãããã«ããããšãã§ããŸãã
- lazyä»ãã®`ProductDetails`ïŒ `ProductDetails`ã³ã³ããŒãã³ãã¯é å»¶èªã¿èŸŒã¿ãããããã«ãªãããã®ã³ãŒãã¯å®éã«å¿ èŠã«ãªããŸã§ããŠã³ããŒããããŸãããããã¯åæèªã¿èŸŒã¿æéãšã³ãŒãåå²ã«åœ¹ç«ã¡ãŸãããŠãŒã¶ãŒã¯éåžžã1åã®ã»ãã·ã§ã³ã§ã¢ããªã±ãŒã·ã§ã³ã®ãã¹ãŠã®éšåã蚪ããããã§ã¯ãªããããããã¯ã°ããŒãã«ã¢ããªã«ãšã£ãŠçŽ æŽãããããšã§ãã
- Suspenseã³ã³ããŒãã³ãïŒ `Suspense`ã³ã³ããŒãã³ãã¯ãé å»¶èªã¿èŸŒã¿ããã`ProductDetails`ã³ã³ããŒãã³ããã©ããããããã«äœ¿çšãããŸãã
ããã¯ãã°ããŒãã«ã¢ããªã±ãŒã·ã§ã³ã®ããã©ãŒãã³ã¹ãåäžãããããã®åªããã¢ãããŒãã§ãã
äŸ3ïŒ``ã«ãããªãœãŒã¹ã®äºåèªã¿èŸŒã¿
ãŠãŒã¶ãŒãç¹å®ã®ããŒãžãã³ã³ããŒãã³ãã«ããã²ãŒããã*å*ã«ã©ã®ãªãœãŒã¹ãå¿ èŠã«ãªããããããã£ãŠããã·ããªãªã§ã¯ãHTMLã®`
`ã«``ã¿ã°ã䜿çšã§ããŸããããã¯ãã©ãŠã¶ã«ãç¹å®ã®ãªãœãŒã¹ïŒäŸïŒJavaScriptãCSSãç»åïŒãã§ããã ãæ©ãããŠã³ããŒãããããã«æç€ºããŸãã
<head>
<title>My Global Application</title>
<link rel="preload" href="/assets/styles.css" as="style">
<link rel="preload" href="/assets/product-image.jpg" as="image">
</head>
ãã®äŸã§ã¯ããã©ãŠã¶ã«CSSãšç»åãã§ããã ãæ©ãããŠã³ããŒãããããã«æç€ºããŠããŸãããŠãŒã¶ãŒãããŒãžã«ããã²ãŒããããšããªãœãŒã¹ã¯ãã§ã«èªã¿èŸŒãŸããŠè¡šç€ºæºåãã§ããŠããŸãããã®ãã¯ããã¯ã¯ããŠãŒã¶ãŒã®ãã±ãŒã«ãå Žæã«å¿ããŠç°ãªãCSSã¹ã¿ã€ã«ãç»åãèªã¿èŸŒãå¿ èŠããããããããªãåœéåãããŒã«ãªãŒãŒã·ã§ã³ã«ãããŠç¹ã«éèŠã§ãã
ãã¹ããã©ã¯ãã£ã¹ãšæé©åãã¯ããã¯
1. ãã现ããSuspenseã®å¢ç
ã³ã³ããŒãã³ãããªãŒã®ããŸãã«é«ãäœçœ®ã«`Suspense`ã®å¢çã眮ãããšã¯é¿ããŠãã ãããããã«ãããåäžã®ãªãœãŒã¹ãèªã¿èŸŒãŸããã®ãåŸ ã€éãUIã®ã»ã¯ã·ã§ã³å šäœããããã¯ãããå¯èœæ§ããããŸãã代ããã«ãããŒã¿ã«äŸåããåã ã®ã³ã³ããŒãã³ããã»ã¯ã·ã§ã³ã®åšãã«ãããå°ãããããç²åºŠã®çްãã`Suspense`ã®å¢çãäœæããŸããããã«ãããç¹å®ã®ããŒã¿ãèªã¿èŸŒãŸããŠããéããUIã®ä»ã®éšåãã€ã³ã¿ã©ã¯ãã£ãã§å¿çæ§ãä¿ã€ããšãã§ããŸãã
2. ããŒã¿ãã§ããã³ã°æŠç¥
ã¢ããªã±ãŒã·ã§ã³ã«é©ããããŒã¿ãã§ããã³ã°æŠç¥ãéžæããŠãã ããã以äžã®èŠçŽ ãèæ ®ããŠãã ããïŒ
- ãµãŒããŒãµã€ãã¬ã³ããªã³ã°ïŒSSRïŒïŒ ãµãŒããŒäžã§åæHTMLãããŒã¿ãå«ããŠäºåã«ã¬ã³ããªã³ã°ããåæèªã¿èŸŒã¿æéãæå°éã«æããŸããããã¯ããŠãŒã¶ãŒãšã¯ã¹ããªãšã³ã¹ãšSEOã«ãšã£ãŠéèŠãªFirst Contentful PaintïŒFCPïŒããã³Largest Contentful PaintïŒLCPïŒã¡ããªã¯ã¹ãæ¹åããã®ã«ç¹ã«å¹æçã§ãã
- éçãµã€ãçæïŒSSGïŒïŒ ãã«ãæã«HTMLãçæããé »ç¹ã«å€æŽãããªãã³ã³ãã³ãã«æé©ã§ããããã«ãããéåžžã«é«éãªåæèªã¿èŸŒã¿ãæäŸãããŸãã
- ã¯ã©ã€ã¢ã³ããµã€ããã§ããã³ã°ïŒ ãã©ãŠã¶ã§ããŒã¿ããã§ããããŸãããããäºåèªã¿èŸŒã¿ãšSuspenseãšçµã¿åãããããšã§ãã·ã³ã°ã«ããŒãžã¢ããªã±ãŒã·ã§ã³ã§å¹ççãªèªã¿èŸŒã¿ãå®çŸããŸãã
3. ã³ãŒãåå²
åç`import()`ã䜿çšããŠã³ãŒãåå²ãè¡ããã¢ããªã±ãŒã·ã§ã³ã®JavaScriptãã³ãã«ãããå°ããªãã£ã³ã¯ã«åå²ããŸããããã«ãããåæããŠã³ããŒããµã€ãºãåæžããããã©ãŠã¶ã¯ããã«å¿ èŠãªã³ãŒãã®ã¿ãèªã¿èŸŒãããšãã§ããŸããReact.lazyã¯ãã®ç®çã«éåžžã«åªããŠããŸãã
4. ç»åèªã¿èŸŒã¿ã®æé©å
ç»åã¯ãã°ãã°ããŒãžãŠã§ã€ãã®æå€§ã®èŠå ã§ããç»åãå§çž®ããé©åãªãã©ãŒãããïŒäŸïŒWebPïŒã䜿çšããç°ãªãç»é¢ãµã€ãºã«é©å¿ããã¬ã¹ãã³ã·ãç»åãæäŸããããšã§ããŠã§ãçšã«ç»åãæé©åããŸããç»åã®é å»¶èªã¿èŸŒã¿ïŒäŸïŒ`loading="lazy"`屿§ãã©ã€ãã©ãªã䜿çšïŒã¯ãç¹ã«ã¢ãã€ã«ããã€ã¹ãã€ã³ã¿ãŒãããæ¥ç¶ãé ãå°åã§ã®ããã©ãŒãã³ã¹ãããã«åäžãããããšãã§ããŸãã
5. åæã³ã³ãã³ãã®ããã®ãµãŒããŒãµã€ãã¬ã³ããªã³ã°ïŒSSRïŒãæ€èšãã
éèŠãªã³ã³ãã³ãã«ã€ããŠã¯ããµãŒããŒãµã€ãã¬ã³ããªã³ã°ïŒSSRïŒãŸãã¯éçãµã€ãçæïŒSSGïŒã䜿çšããŠãããŒã¿ãšãšãã«äºåã«ã¬ã³ããªã³ã°ãããåæHTMLãé ä¿¡ããããšãæ€èšããŠãã ãããããã«ãããFirst Contentful PaintïŒFCPïŒãŸã§ã®æéãççž®ãããç¹ã«äœéãããã¯ãŒã¯ã§ã®äœæããã©ãŒãã³ã¹ãåäžããŸããSSRã¯å€èšèªãµã€ãã«ç¹ã«é¢é£ããããŸãã
6. ãã£ãã·ã¥
ããŸããŸãªã¬ãã«ïŒãã©ãŠã¶ãCDNããµãŒããŒãµã€ãïŒã§ãã£ãã·ã¥ã¡ã«ããºã ãå®è£ ããããŒã¿ãœãŒã¹ãžã®ãªã¯ãšã¹ãæ°ãæžãããŸããããã«ãããç¹ã«é »ç¹ã«ã¢ã¯ã»ã¹ãããããŒã¿ã®ååŸãå€§å¹ ã«é«éåãããŸãã
7. ã¢ãã¿ãªã³ã°ãšããã©ãŒãã³ã¹ãã¹ã
Google PageSpeed InsightsãWebPageTestãLighthouseãªã©ã®ããŒã«ã䜿çšããŠãã¢ããªã±ãŒã·ã§ã³ã®ããã©ãŒãã³ã¹ã宿çã«ç£èŠããŸãããããã®ããŒã«ã¯ãã¢ããªã±ãŒã·ã§ã³ã®èªã¿èŸŒã¿æéã«é¢ãã貎éãªæŽå¯ãæäŸããããã«ããã¯ãç¹å®ããæé©åæŠç¥ãææ¡ããŸããç¹ã«åœéçãªãŠãŒã¶ãŒã®ããã«ãããŸããŸãªãããã¯ãŒã¯æ¡ä»¶ãããã€ã¹ã¿ã€ãã§ã¢ããªã±ãŒã·ã§ã³ãç¶ç¶çã«ãã¹ãããäžè²«ãã髿§èœãªãŠãŒã¶ãŒãšã¯ã¹ããªãšã³ã¹ã確ä¿ããŸãã
åœéåãšããŒã«ãªãŒãŒã·ã§ã³ã«é¢ããèæ ®äºé
ã°ããŒãã«ã¢ããªã±ãŒã·ã§ã³ãéçºããéã«ã¯ãSuspenseãšäºåèªã¿èŸŒã¿ã«é¢é£ããŠä»¥äžã®èŠçŽ ãèæ ®ããŠãã ããïŒ
- èšèªåºæã®ãªãœãŒã¹ïŒ ã¢ããªã±ãŒã·ã§ã³ãè€æ°ã®èšèªããµããŒãããŠããå Žåã¯ããŠãŒã¶ãŒã®èšèªèšå®ã®äžéšãšããŠå¿ èŠãªèšèªãã¡ã€ã«ïŒäŸïŒç¿»èš³ãå«ãJSONãã¡ã€ã«ïŒãäºåèªã¿èŸŒã¿ããŸãã
- å°åããŒã¿ïŒ ãŠãŒã¶ãŒã®å°åã«é¢é£ããããŒã¿ïŒäŸïŒéè²šãæ¥æåœ¢åŒã枬å®åäœïŒãã圌ãã®å Žæãèšèªèšå®ã«åºã¥ããŠäºåèªã¿èŸŒã¿ããŸããããã¯ããŠãŒã¶ãŒã®çŸå°é貚ã§äŸ¡æ Œãé é詳现ã衚瀺ããEã³ããŒã¹ãµã€ãã«ãšã£ãŠéåžžã«éèŠã§ãã
- ãã©ãŒã«ããã¯UIã®ããŒã«ãªãŒãŒã·ã§ã³ïŒ ããŒã¿èªã¿èŸŒã¿äžã«è¡šç€ºããããã©ãŒã«ããã¯UIãããµããŒããããŠããåèšèªã«ããŒã«ã©ã€ãºãããŠããããšã確èªããŸããäŸãã°ããŠãŒã¶ãŒã®åªå èšèªã§èªã¿èŸŒã¿ã¡ãã»ãŒãžã衚瀺ããŸãã
- å³ããå·ŠïŒRTLïŒãžã®ãµããŒãïŒ ã¢ããªã±ãŒã·ã§ã³ãå³ããå·Šã«æžãããèšèªïŒäŸïŒã¢ã©ãã¢èªãããã©ã€èªïŒããµããŒãããŠããå Žåã¯ãCSSãšUIã¬ã€ã¢ãŠããRTLã¬ã³ããªã³ã°ãé©åã«åŠçã§ããããã«èšèšãããŠããããšã確èªããŸãã
- ã³ã³ãã³ãããªããªãŒãããã¯ãŒã¯ïŒCDNïŒïŒ CDNãæŽ»çšããŠãã¢ããªã±ãŒã·ã§ã³ã®ã¢ã»ããïŒJavaScriptãCSSãç»åãªã©ïŒããŠãŒã¶ãŒã«è¿ããµãŒããŒããé ä¿¡ããŸããããã«ãããç¹ã«å°ççã«é¢ããå Žæã«ãããŠãŒã¶ãŒã®é å»¶ãæžå°ããèªã¿èŸŒã¿æéãæ¹åãããŸãã
é«åºŠãªãã¯ããã¯ãšå°æ¥ã®ãã¬ã³ã
1. ãµãŒããŒã³ã³ããŒãã³ãã«ããã¹ããªãŒãã³ã°ïŒå®éšçïŒ
ReactãµãŒããŒã³ã³ããŒãã³ãïŒRSCïŒã¯ããµãŒããŒäžã§Reactã³ã³ããŒãã³ããã¬ã³ããªã³ã°ããããã®æ°ããã¢ãããŒãã§ããåæHTMLãšããŒã¿ãã¯ã©ã€ã¢ã³ãã«ã¹ããªãŒãã³ã°ã§ãããããåæã¬ã³ããªã³ã°ãé«éåãããäœæããã©ãŒãã³ã¹ãåäžããŸãããµãŒããŒã³ã³ããŒãã³ãã¯ãŸã å®éšçã§ãããããŒã¿èªã¿èŸŒã¿ãšãŠãŒã¶ãŒãšã¯ã¹ããªãšã³ã¹ãããã«æé©åããå¯èœæ§ã瀺ããŠããŸãã
2. ããã°ã¬ãã·ããã€ãã¬ãŒã·ã§ã³
ããã°ã¬ãã·ããã€ãã¬ãŒã·ã§ã³ã¯ãUIã®ç°ãªãéšåãéžæçã«ãã€ãã¬ãŒãããããšãå«ã¿ãŸããæãéèŠãªã³ã³ããŒãã³ããæåã«ãã€ãã¬ãŒãããããšãåªå ãããŠãŒã¶ãŒãã³ã¢æ©èœãšããæ©ã察話ã§ããããã«ããäžæ¹ã§ãéèŠåºŠã®äœãéšåã¯åŸã§ãã€ãã¬ãŒããããŸããããã¯ããã¹ãŠã®ãŠãŒã¶ãŒã«ãšã£ãŠåçã«éèŠãšã¯éããªãå€ãã®ç°ãªãã¿ã€ãã®ã³ã³ããŒãã³ããèªã¿èŸŒãåœéçãªã¢ããªã±ãŒã·ã§ã³ã§å¹æçã§ãã
3. ãŠã§ãã¯ãŒã«ãŒ
ãŠã§ãã¯ãŒã«ãŒãå©çšããŠãããŒã¿åŠçãç»åæäœãªã©ã®èšç®éçŽçãªã¿ã¹ã¯ãããã¯ã°ã©ãŠã³ãã§å®è¡ããŸããããã«ãããã¡ã€ã³ã¹ã¬ããã®ããããã³ã°ãé²ããç¹ã«åŠçèœåãéãããããã€ã¹ã§UIã®å¿çæ§ãç¶æããŸããäŸãã°ããªã¢ãŒããµãŒããŒãããã§ããããããŒã¿ã®è€éãªåŠçã衚瀺ããåã«ããŠã§ãã¯ãŒã«ãŒã䜿çšããŠåŠçããããšãã§ããŸãã
çµè«ïŒããéããããé åçãªäœéš
React SuspenseãšãªãœãŒã¹ã®äºåèªã¿èŸŒã¿ã¯ã髿§èœã§é åçãªReactã¢ããªã±ãŒã·ã§ã³ãäœæããããã®äžå¯æ¬ ãªããŒã«ã§ãããããã®ãã¯ããã¯ãåãå ¥ããããšã§ãéçºè ã¯èªã¿èŸŒã¿æéãå€§å¹ ã«ççž®ãããŠãŒã¶ãŒãšã¯ã¹ããªãšã³ã¹ãåäžããããŠãŒã¶ãŒã®å Žæãããã€ã¹ã«é¢ä¿ãªããé«éã§å¿çæ§ã®é«ãã¢ããªã±ãŒã·ã§ã³ãæ§ç¯ã§ããŸãããã®ã¢ãããŒãã®äºæž¬çãªæ§è³ªã¯ãã°ããŒãã«ã«å€æ§ãªç°å¢ã§ç¹ã«äŸ¡å€ããããŸãã
ãããã®ãã¯ããã¯ãçè§£ãå®è£ ããããšã§ãããéããããå¿çæ§ãé«ããããé åçãªãŠãŒã¶ãŒãšã¯ã¹ããªãšã³ã¹ãæ§ç¯ã§ããŸããç¶ç¶çãªæé©åã培åºçãªãã¹ãããããŠåœéåãšããŒã«ãªãŒãŒã·ã§ã³ãžã®æ³šæã¯ãã°ããŒãã«ã«æåããReactã¢ããªã±ãŒã·ã§ã³ãæ§ç¯ããããã«äžå¯æ¬ ã§ããäœããããŠãŒã¶ãŒãšã¯ã¹ããªãšã³ã¹ãèæ ®ããããšãå¿ããªãã§ãã ããããŠãŒã¶ãŒã«ãšã£ãŠäœããé ããšæããããã°ã圌ãã¯ããè¯ãäœéšãæ±ããŠä»ã®å Žæãæ¢ãå¯èœæ§ãé«ãã§ãããã