é å»¶èªã¿èŸŒã¿ãã³ãŒãåå²ãåçã€ã³ããŒãã§Reactã¢ããªã±ãŒã·ã§ã³ã®ããã©ãŒãã³ã¹ãæé©åããæ¹æ³ãåŠã³ãŸããããåæèªã¿èŸŒã¿æéãæ¹åããã°ããŒãã«ãªãŠãŒã¶ãŒã®äœéšãåäžãããŸãã
Reactã®é å»¶èªã¿èŸŒã¿ïŒããã©ãŒãã³ã¹ãæé©åããã³ãŒãåå²ãšåçã€ã³ããŒã
仿¥ã®ããŒã¹ã®éãããžã¿ã«äžçã§ã¯ããŠã§ããµã€ãã®ããã©ãŒãã³ã¹ãæãéèŠã§ãããŠãŒã¶ãŒã¯ã»ãŒç¬æã®èªã¿èŸŒã¿æéãæåŸ ããŠãããèªã¿èŸŒã¿ãé ãã¢ããªã±ãŒã·ã§ã³ã¯äžæºãé¢è±ã«ã€ãªããå¯èœæ§ããããŸããReactã¯ããŠãŒã¶ãŒã€ã³ã¿ãŒãã§ãŒã¹ãæ§ç¯ããããã®äººæ°ã®JavaScriptã©ã€ãã©ãªã§ãããããã©ãŒãã³ã¹ãæé©åããããã®åŒ·åãªãã¯ããã¯ãæäŸããŠããŸãããã®äžã§ãé å»¶èªã¿èŸŒã¿ã¯éèŠãªããŒã«ã§ãããã®å æ¬çãªã¬ã€ãã§ã¯ãReactã§é å»¶èªã¿èŸŒã¿ãã³ãŒãåå²ãåçã€ã³ããŒããæŽ»çšããŠãã°ããŒãã«ãªãªãŒãã£ãšã³ã¹åãã«ãããé«éã§å¹ççãªã¢ããªã±ãŒã·ã§ã³ãäœæããæ¹æ³ãæ¢ããŸãã
åºæ¬ãçè§£ãã
é å»¶èªã¿èŸŒã¿ïŒLazy LoadingïŒãšã¯ïŒ
é å»¶èªã¿èŸŒã¿ã¯ããªãœãŒã¹ãå®éã«å¿ èŠã«ãªããŸã§ããã®åæåãèªã¿èŸŒã¿ãé å»¶ããããã¯ããã¯ã§ããReactã¢ããªã±ãŒã·ã§ã³ã®æèã§ã¯ãããã¯ã³ã³ããŒãã³ããã¢ãžã¥ãŒã«ããããã¯ã¢ããªã±ãŒã·ã§ã³ã®ã»ã¯ã·ã§ã³å šäœããŠãŒã¶ãŒã«è¡šç€ºãããçŽåãŸã§ããã®èªã¿èŸŒã¿ãé ãããããšãæå³ããŸããããã¯ãããã«ã¯å¿ èŠãã©ããã«ãããããããã¹ãŠã®ãªãœãŒã¹ãäºåã«èªã¿èŸŒãç©æ¥µçèªã¿èŸŒã¿ïŒeager loadingïŒãšã¯å¯Ÿç §çã§ãã
ã³ãŒãåå²ïŒCode SplittingïŒãšã¯ïŒ
ã³ãŒãåå²ã¯ãã¢ããªã±ãŒã·ã§ã³ã®ã³ãŒããããå°ããã管çãããããã³ãã«ã«åå²ããææ³ã§ããããã«ããããã©ãŠã¶ã¯çŸåšã®ãã¥ãŒãæ©èœã«å¿ èŠãªã³ãŒãã®ã¿ãããŠã³ããŒãã§ããããã«ãªããåæèªã¿èŸŒã¿æéãççž®ãããå šäœçãªããã©ãŒãã³ã¹ãåäžããŸããäžã€ã®å·šå€§ãªJavaScriptãã¡ã€ã«ãé ä¿¡ãã代ããã«ãã³ãŒãåå²ã«ãã£ãŠãããå°ãããã¿ãŒã²ãããçµã£ããã³ãã«ããªã³ããã³ãã§é ä¿¡ããããšãå¯èœã«ãªããŸãã
åçã€ã³ããŒãïŒDynamic ImportsïŒãšã¯ïŒ
åçã€ã³ããŒãã¯ãå®è¡æã«ã¢ãžã¥ãŒã«ãéåæã«èªã¿èŸŒãããšãã§ããJavaScriptã®æ©èœïŒESã¢ãžã¥ãŒã«æšæºã®äžéšïŒã§ãããã¡ã€ã«ã®å
é ã§å®£èšãããäºåã«èªã¿èŸŒãŸããéçã€ã³ããŒããšã¯ç°ãªããåçã€ã³ããŒãã¯import()颿°ã䜿çšããŠãªã³ããã³ãã§ã¢ãžã¥ãŒã«ãèªã¿èŸŒã¿ãŸããããã«ããããã€ãã©ã®ããã«ã¢ãžã¥ãŒã«ãèªã¿èŸŒãŸããããæ£ç¢ºã«å¶åŸ¡ã§ãããããé
å»¶èªã¿èŸŒã¿ãã³ãŒãåå²ã«ãšã£ãŠéåžžã«éèŠã§ãã
ãªãé å»¶èªã¿èŸŒã¿ã¯éèŠãªã®ãïŒ
é å»¶èªã¿èŸŒã¿ã®å©ç¹ã¯ãç¹ã«å€§èŠæš¡ã§è€éãªReactã¢ããªã±ãŒã·ã§ã³ã«ãããŠéåžžã«å€§ããã§ãã
- åæèªã¿èŸŒã¿æéã®æ¹åïŒéèŠã§ãªããªãœãŒã¹ã®èªã¿èŸŒã¿ãé ãããããšã§ãã¢ããªã±ãŒã·ã§ã³ãã€ã³ã¿ã©ã¯ãã£ãã«ãªããŸã§ã®æéãå€§å¹ ã«ççž®ã§ããŸããããã«ããã第äžå°è±¡ãè¯ããªããããé åçãªãŠãŒã¶ãŒãšã¯ã¹ããªãšã³ã¹ã«ã€ãªãããŸãã
- ãããã¯ãŒã¯åž¯åå¹ ã®æ¶è²»åæžïŒé å»¶èªã¿èŸŒã¿ã¯ãäºåã«ããŠã³ããŒãããå¿ èŠãããããŒã¿éãæå°éã«æããç¹ã«ã¢ãã€ã«ããã€ã¹ãã€ã³ã¿ãŒãããæ¥ç¶ãé ããŠãŒã¶ãŒã®åž¯åå¹ ãç¯çŽããŸããããã¯ããããã¯ãŒã¯é床ã倧ããç°ãªãã°ããŒãã«ãªãªãŒãã£ãšã³ã¹ãã¿ãŒã²ãããšããã¢ããªã±ãŒã·ã§ã³ã«ãšã£ãŠç¹ã«éèŠã§ãã
- ãŠãŒã¶ãŒãšã¯ã¹ããªãšã³ã¹ã®åäžïŒèªã¿èŸŒã¿æéãéãããšã¯ãããã¹ã ãŒãºã§å¿çæ§ã®é«ããŠãŒã¶ãŒãšã¯ã¹ããªãšã³ã¹ã«çŽçµããŸãããŠãŒã¶ãŒã¯ãçŽ æ©ãèªã¿èŸŒãŸããããã«ãã£ãŒãããã¯ãæäŸãããŠã§ããµã€ããã¢ããªã±ãŒã·ã§ã³ãé¢è±ããå¯èœæ§ãäœããªããŸãã
- ãªãœãŒã¹å©çšçã®åäžïŒé å»¶èªã¿èŸŒã¿ã«ããããªãœãŒã¹ã¯å¿ èŠãªãšãã«ã®ã¿èªã¿èŸŒãŸãããããã¡ã¢ãªãCPUã®äžå¿ èŠãªæ¶è²»ãé²ããŸãã
Reactã§ã®é å»¶èªã¿èŸŒã¿ã®å®è£
Reactã¯ãReact.lazyãšSuspenseã䜿çšããŠã³ã³ããŒãã³ããé
å»¶èªã¿èŸŒã¿ããããã®çµã¿èŸŒã¿ã¡ã«ããºã ãæäŸããŠããŸããããã«ãããReactã¢ããªã±ãŒã·ã§ã³ã§é
å»¶èªã¿èŸŒã¿ãæ¯èŒçç°¡åã«å®è£
ã§ããŸãã
React.lazyãšSuspenseã®äœ¿çš
React.lazyã¯ãåçã€ã³ããŒããéåžžã®ã³ã³ããŒãã³ããšããŠã¬ã³ããªã³ã°ã§ãã颿°ã§ããåçãªimport()ãåŒã³åºã颿°ãåŒæ°ã«åããŸãããã®import()åŒã³åºãã¯ãReactã³ã³ããŒãã³ãã«è§£æ±ºãããå¿
èŠããããŸããSuspenseã¯ãäœããã®æ¡ä»¶ãæºãããããŸã§ïŒãã®å Žåã¯é
å»¶èªã¿èŸŒã¿ãããã³ã³ããŒãã³ããèªã¿èŸŒãŸãããŸã§ïŒãã³ã³ããŒãã³ãããªãŒã®ã¬ã³ããªã³ã°ããäžæåæ¢ãã§ããReactã³ã³ããŒãã³ãã§ããã³ã³ããŒãã³ãã®èªã¿èŸŒã¿äžã«ãã©ãŒã«ããã¯UIã衚瀺ããŸãã
åºæ¬çãªäŸã以äžã«ç€ºããŸãã
import React, { Suspense } from 'react';
const MyComponent = React.lazy(() => import('./MyComponent'));
function MyPage() {
return (
<Suspense fallback={<div>Loading...</div>}>
<MyComponent />
</Suspense>
);
}
export default MyPage;
ãã®äŸã§ã¯ãMyComponentã¯MyPageã³ã³ããŒãã³ãå
ã§ã¬ã³ããªã³ã°ããããšãã«ã®ã¿èªã¿èŸŒãŸããŸããMyComponentã®èªã¿èŸŒã¿äžãSuspenseã³ã³ããŒãã³ãã®fallbackããããã£ïŒãã®å Žåã¯åçŽãªãLoading...ããšããã¡ãã»ãŒãžïŒã衚瀺ãããŸãããã¹./MyComponentã¯ãçŸåšã®ã¢ãžã¥ãŒã«ããã®çžå¯ŸçãªMyComponent.jsïŒãŸãã¯.jsxã.tsã.tsxïŒãã¡ã€ã«ã®ç©ççãªå Žæãžãšè§£æ±ºãããŸãã
é å»¶èªã¿èŸŒã¿ã§ã®ãšã©ãŒãã³ããªã³ã°
é
å»¶èªã¿èŸŒã¿ããã»ã¹äžã«çºçããå¯èœæ§ã®ãããšã©ãŒãåŠçããããšã¯éåžžã«éèŠã§ããäŸãã°ããããã¯ãŒã¯ãšã©ãŒããã¡ã€ã«ã®æ¬ èœã«ãããã¢ãžã¥ãŒã«ã®èªã¿èŸŒã¿ã«å€±æããå¯èœæ§ããããŸãããããã®ãšã©ãŒã¯ErrorBoundaryã³ã³ããŒãã³ãã䜿çšããŠåŠçã§ããŸããããã«ãããé
å»¶ã³ã³ããŒãã³ãã®èªã¿èŸŒã¿äžã«çºçãããšã©ãŒãé©åã«åŠçã§ããŸãã
import React, { Suspense, lazy } from 'react';
class ErrorBoundary extends React.Component {
constructor(props) {
super(props);
this.state = { hasError: false };
}
static getDerivedStateFromError(error) {
// Update state so the next render will show the fallback UI.
return { hasError: true };
}
componentDidCatch(error, errorInfo) {
// You can also log the error to an error reporting service
console.error(error, errorInfo);
}
render() {
if (this.state.hasError) {
// You can render any custom fallback UI
return <h1>Something went wrong.</h1>;
}
return this.props.children;
}
}
const MyComponent = lazy(() => import('./MyComponent'));
function MyPage() {
return (
<ErrorBoundary>
<Suspense fallback={<div>Loading...</div>}>
<MyComponent />
</Suspense>
</ErrorBoundary>
);
}
export default MyPage;
é«åºŠãªã³ãŒãåå²ãã¯ããã¯
React.lazyãšSuspenseã¯ã³ã³ããŒãã³ããé
å»¶èªã¿èŸŒã¿ããç°¡åãªæ¹æ³ãæäŸããŸãããããé«åºŠãªã³ãŒãåå²ãã¯ããã¯ãå®è£
ããããšã§ãã¢ããªã±ãŒã·ã§ã³ã®ããã©ãŒãã³ã¹ãããã«æé©åã§ããŸãã
ã«ãŒãããŒã¹ã®ã³ãŒãåå²
ã«ãŒãããŒã¹ã®ã³ãŒãåå²ã§ã¯ãã¢ããªã±ãŒã·ã§ã³å ã®ããŸããŸãªã«ãŒããããŒãžã«åºã¥ããŠã³ãŒããåå²ããŸããããã«ãããçŸåšã®ã«ãŒãã«å¿ èŠãªã³ãŒãã®ã¿ãèªã¿èŸŒãŸããããã«ãªããåæèªã¿èŸŒã¿æéãæå°éã«æããããããã²ãŒã·ã§ã³ã®ããã©ãŒãã³ã¹ãåäžããŸãã
ã«ãŒãããŒã¹ã®ã³ãŒãåå²ã¯ãreact-router-domã®ãããªã©ã€ãã©ãªãReact.lazyããã³Suspenseãšçµã¿åãããŠäœ¿çšããããšã§å®çŸã§ããŸãã
import React, { Suspense, lazy } from 'react';
import { BrowserRouter as Router, Route, Switch } from 'react-router-dom';
const Home = lazy(() => import('./Home'));
const About = lazy(() => import('./About'));
const Contact = lazy(() => import('./Contact'));
function App() {
return (
<Router>
<Suspense fallback={<div>Loading...</div>}>
<Switch>
<Route exact path="/" component={Home} />
<Route path="/about" component={About} />
<Route path="/contact" component={Contact} />
</Switch>
</Suspense>
</Router>
);
}
export default App;
ãã®äŸã§ã¯ãHomeãAboutãContactã³ã³ããŒãã³ããé
å»¶èªã¿èŸŒã¿ãããŸããåã«ãŒãã¯ããŠãŒã¶ãŒããã®ã«ãŒãã«ç§»åãããšãã«ã®ã¿ã察å¿ããã³ã³ããŒãã³ããèªã¿èŸŒã¿ãŸãã
ã³ã³ããŒãã³ãããŒã¹ã®ã³ãŒãåå²
ã³ã³ããŒãã³ãããŒã¹ã®ã³ãŒãåå²ã§ã¯ãåã ã®ã³ã³ããŒãã³ãã«åºã¥ããŠã¢ããªã±ãŒã·ã§ã³ã®ã³ãŒããåå²ããŸããããã«ãããçŸåšè¡šç€ºãããŠããããŸãã¯å¿ èŠãªã³ã³ããŒãã³ãã®ã¿ãèªã¿èŸŒãããšãã§ããããã©ãŒãã³ã¹ãããã«æé©åã§ããŸãããã®ãã¯ããã¯ã¯ã倧éã®ã³ãŒããå«ãå€§èŠæš¡ã§è€éãªã³ã³ããŒãã³ãã«ç¹ã«åœ¹ç«ã¡ãŸãã
ã³ã³ããŒãã³ãããŒã¹ã®ã³ãŒãåå²ã¯ãåã®äŸã§ç€ºããããã«React.lazyãšSuspenseã䜿çšããŠå®è£
ã§ããŸãã
ãã³ããŒåå²
ãã³ããŒåå²ã§ã¯ãã¢ããªã±ãŒã·ã§ã³ã®ãµãŒãããŒãã£äŸåé¢ä¿ïŒã©ã€ãã©ãªããã¬ãŒã ã¯ãŒã¯ãªã©ïŒãå¥ã®ãã³ãã«ã«åé¢ããŸããããã«ããããã©ãŠã¶ã¯ãããã®äŸåé¢ä¿ãã¢ããªã±ãŒã·ã§ã³ã®ã³ãŒããšã¯å¥ã«ãã£ãã·ã¥ã§ããŸãããµãŒãããŒãã£ã®äŸåé¢ä¿ã¯éåžžãã¢ããªã±ãŒã·ã§ã³ã®ã³ãŒããããæŽæ°é »åºŠãäœããããããã«ãããã£ãã·ã¥å¹çãå€§å¹ ã«åäžããå蚪åæã«ããŠã³ããŒãããå¿ èŠãããããŒã¿éãåæžã§ããŸãã
WebpackãParcelãRollupãªã©ã®ææ°ã®ãã³ãã©ãŒã®ã»ãšãã©ã¯ããã³ããŒåå²ãçµã¿èŸŒã¿ã§ãµããŒãããŠããŸããèšå®ã®è©³çްã¯éžæãããã³ãã©ãŒã«ãã£ãŠç°ãªããŸãããäžè¬çã«ã¯ããã³ããŒã¢ãžã¥ãŒã«ãèå¥ããã«ãŒã«ãå®çŸ©ãããã³ãã©ãŒã«ãããã®ããã®å¥ã ã®ãã³ãã«ãäœæããããæç€ºããããšãå«ãŸããŸãã
é å»¶èªã¿èŸŒã¿ã®ãã¹ããã©ã¯ãã£ã¹
Reactã¢ããªã±ãŒã·ã§ã³ã§é å»¶èªã¿èŸŒã¿ã广çã«å®è£ ããã«ã¯ã以äžã®ãã¹ããã©ã¯ãã£ã¹ãèæ ®ããŠãã ããã
- é å»¶èªã¿èŸŒã¿ã®åè£ãç¹å®ããïŒã¢ããªã±ãŒã·ã§ã³ã®ã³ãŒããåæããŠãé å»¶èªã¿èŸŒã¿ã«é©ããã³ã³ããŒãã³ããã¢ãžã¥ãŒã«ãç¹å®ããŸããåæèªã¿èŸŒã¿æã«ããã«ã¯è¡šç€ºãããªãããŸãã¯å¿ èŠãšãããªãã³ã³ããŒãã³ãã«çŠç¹ãåœãŠãŸãã
- æå³ã®ãããã©ãŒã«ããã¯ã䜿çšããïŒé å»¶èªã¿èŸŒã¿ãããã³ã³ããŒãã³ãã«å¯ŸããŠãæçã§èŠèŠçã«é åçãªãã©ãŒã«ããã¯ãæäŸããŸããããã«ãããã³ã³ããŒãã³ãã®èªã¿èŸŒã¿äžã®ãŠãŒã¶ãŒãšã¯ã¹ããªãšã³ã¹ãåäžããŸããäžè¬çãªããŒãã£ã³ã°ã¹ãããŒããã¬ãŒã¹ãã«ããŒã®äœ¿çšã¯é¿ããããæèã«æ²¿ã£ãããŒãã£ã³ã°ã€ã³ãžã±ãŒã¿ãŒãæäŸããããã«åªããŠãã ããã
- ãã³ãã«ãµã€ãºãæé©åããïŒã³ãŒãã®ãããã£ã±ãŒã·ã§ã³ãããªãŒã·ã§ã€ãã³ã°ãç»åæé©åãªã©ã®ãã¯ããã¯ã䜿çšããŠãã³ãŒããã³ãã«ã®ãµã€ãºãæå°éã«æããŸãããã³ãã«ãå°ããã»ã©èªã¿èŸŒã¿ãéããªããå šäœçãªããã©ãŒãã³ã¹ãåäžããŸãã
- ããã©ãŒãã³ã¹ãç£èŠããïŒã¢ããªã±ãŒã·ã§ã³ã®ããã©ãŒãã³ã¹ã宿çã«ç£èŠããŠãæœåšçãªããã«ããã¯ãæé©åã®äœå°ãããé åãç¹å®ããŸãããã©ãŠã¶ã®éçºè ããŒã«ãããã©ãŒãã³ã¹ç£èŠãµãŒãã¹ã䜿çšããŠãèªã¿èŸŒã¿æéãTime to Interactiveãã¡ã¢ãªäœ¿çšéãªã©ã®ã¡ããªã¯ã¹ã远跡ããŸãã
- 培åºçã«ãã¹ãããïŒé å»¶èªã¿èŸŒã¿ãããã³ã³ããŒãã³ãã培åºçã«ãã¹ãããŠãæ£ããèªã¿èŸŒãŸããæåŸ ã©ããã«æ©èœããããšã確èªããŸããç¹ã«ãšã©ãŒãã³ããªã³ã°ãšãã©ãŒã«ããã¯ã®åäœã«æ³šæãæã£ãŠãã ããã
ã³ãŒãåå²ã®ããã®ããŒã«ãšã©ã€ãã©ãª
ããã€ãã®ããŒã«ãã©ã€ãã©ãªããReactã¢ããªã±ãŒã·ã§ã³ã§ã®ã³ãŒãåå²ããã»ã¹ãç°¡çŽ åããã®ã«åœ¹ç«ã¡ãŸãã
- WebpackïŒåçã€ã³ããŒãããã³ããŒåå²ããã£ã³ã¯æé©åãªã©ãã³ãŒãåå²ãåºç¯å²ã«ãµããŒããã匷åãªã¢ãžã¥ãŒã«ãã³ãã©ãŒã§ããWebpackã¯é«åºŠã«èšå®å¯èœã§ãã¢ããªã±ãŒã·ã§ã³ã®ç¹å®ã®ããŒãºã«åãããŠã«ã¹ã¿ãã€ãºã§ããŸãã
- ParcelïŒèšå®äžèŠã§ã³ãŒãåå²ãç°¡åã«å§ãããããã³ãã©ãŒã§ããParcelã¯åçã€ã³ããŒããèªåçã«æ€åºããã³ãŒããããå°ããªãã³ãã«ã«åå²ããŸãã
- RollupïŒç¹ã«ã©ã€ãã©ãªããã¬ãŒã ã¯ãŒã¯ã®æ§ç¯ã«é©ããã¢ãžã¥ãŒã«ãã³ãã©ãŒã§ããRollupã¯ããªãŒã·ã§ã€ãã³ã°ã¢ã«ãŽãªãºã ã䜿çšããŠæªäœ¿çšã®ã³ãŒããåé€ããçµæãšããŠãã³ãã«ãµã€ãºãå°ãããªããŸãã
- React LoadableïŒïŒæ³šæïŒæŽå²çã«äººæ°ããããŸããããçŸåšã§ã¯React.lazyãšSuspenseã«ã»ãŒåã£ãŠä»£ããããŠããŸãïŒã³ã³ããŒãã³ãã®é å»¶èªã¿èŸŒã¿ããã»ã¹ãç°¡çŽ åããé«éã³ã³ããŒãã³ãã§ããReact Loadableã¯ãããªããŒãããšã©ãŒãã³ããªã³ã°ããµãŒããŒãµã€ãã¬ã³ããªã³ã°ã®ãµããŒããªã©ã®æ©èœãæäŸããŸãã
ããã©ãŒãã³ã¹æé©åã«ãããã°ããŒãã«ãªèæ ®äºé
ã°ããŒãã«ãªãªãŒãã£ãšã³ã¹åãã«Reactã¢ããªã±ãŒã·ã§ã³ãæé©åããéã«ã¯ããããã¯ãŒã¯ã®é å»¶ãå°ççãªå Žæãããã€ã¹ã®èœåãªã©ã®èŠå ãèæ ®ããããšãéèŠã§ãã
- ã³ã³ãã³ãããªããªãŒãããã¯ãŒã¯ïŒCDNïŒïŒCDNã䜿çšããŠãã¢ããªã±ãŒã·ã§ã³ã®ã¢ã»ãããäžçäžã«é 眮ãããè€æ°ã®ãµãŒããŒã«é ä¿¡ããŸããããã«ããããããã¯ãŒã¯ã®é å»¶ãæžå°ããç°ãªãå°ççå°åã®ãŠãŒã¶ãŒã®èªã¿èŸŒã¿æéãåäžããŸãã人æ°ã®CDNãããã€ããŒã«ã¯ãCloudflareãAmazon CloudFrontãAkamaiãªã©ããããŸãã
- ç»åæé©åïŒããŸããŸãªç»é¢ãµã€ãºãè§£å床ã«åãããŠç»åãæé©åããŸããã¬ã¹ãã³ã·ãç»åãç»åå§çž®æè¡ã䜿çšããŠãç»åãã¡ã€ã«ãµã€ãºãåæžããèªã¿èŸŒã¿æéãæ¹åããŸããImageOptimãTinyPNGã®ãããªããŒã«ãç»åã®æé©åã«åœ¹ç«ã¡ãŸãã
- ããŒã«ã©ã€ãŒãŒã·ã§ã³ïŒããŒã«ã©ã€ãŒãŒã·ã§ã³ãããã©ãŒãã³ã¹ã«äžãã圱é¿ãèæ ®ããŸããç°ãªãèšèªãªãœãŒã¹ãèªã¿èŸŒããšãåæèªã¿èŸŒã¿æéãå¢å ããå¯èœæ§ããããŸããããŒã«ã©ã€ãŒãŒã·ã§ã³ãã¡ã€ã«ã«é å»¶èªã¿èŸŒã¿ãå®è£ ããŠãããã©ãŒãã³ã¹ãžã®åœ±é¿ãæå°éã«æããŸãã
- ã¢ãã€ã«æé©åïŒã¢ããªã±ãŒã·ã§ã³ãã¢ãã€ã«ããã€ã¹åãã«æé©åããŸããããã«ã¯ãã¬ã¹ãã³ã·ããã¶ã€ã³æè¡ã®äœ¿çšãå°ããç»é¢åãã®ç»åã®æé©åãJavaScriptã®äœ¿çšãæå°éã«æããããšãªã©ãå«ãŸããŸãã
äžçäžã®äºäŸ
å€ãã®ã°ããŒãã«äŒæ¥ããReactã¢ããªã±ãŒã·ã§ã³ã®ããã©ãŒãã³ã¹ãåäžãããããã«ãé å»¶èªã¿èŸŒã¿ãšã³ãŒãåå²ã®ãã¯ããã¯ãæåè£ã«æ¡çšããŠããŸãã
- NetflixïŒNetflixã¯ã³ãŒãåå²ãå©çšããŠãçŸåšã®ãã¥ãŒã«å¿ èŠãªã³ãŒãã®ã¿ãé ä¿¡ããäžçäžã®ãŠãŒã¶ãŒã«å¯ŸããŠããéãèªã¿èŸŒã¿æéãšã¹ã ãŒãºãªã¹ããªãŒãã³ã°äœéšãå®çŸããŠããŸãã
- AirbnbïŒAirbnbã¯ãã€ã³ã¿ã©ã¯ãã£ããªå°å³ãè€éãªæ€çŽ¢ãã£ã«ã¿ãŒãªã©ãéèŠã§ãªãã³ã³ããŒãã³ãã®èªã¿èŸŒã¿ãé ãããããã«é å»¶èªã¿èŸŒã¿ãæ¡çšãããŠã§ããµã€ãã®åæèªã¿èŸŒã¿æéãæ¹åããŠããŸãã
- SpotifyïŒSpotifyã¯ã³ãŒãåå²ã䜿çšããŠãŠã§ããã¬ãŒã€ãŒã®ããã©ãŒãã³ã¹ãæé©åãããŠãŒã¶ãŒãããã«ãæ°ã«å ¥ãã®é³æ¥œãèŽãå§ããããããã«ããŠããŸãã
- AlibabaïŒäžçæå€§çŽã®Eã³ããŒã¹ãã©ãããã©ãŒã ãšããŠãAlibabaã¯ã³ãŒãåå²ãšé å»¶èªã¿èŸŒã¿ã«å€§ããäŸåããŠãäžçäžã®äœçŸäžäººãã®ãŠãŒã¶ãŒã«ã·ãŒã ã¬ã¹ãªã·ã§ããã³ã°äœéšãæäŸããŠããŸãã圌ãã¯ãããŸããŸãªå°åã«ããã倿§ãªãããã¯ãŒã¯é床ãšããã€ã¹èœåãèæ ®ããªããã°ãªããŸããã
çµè«
é å»¶èªã¿èªã¿ãã³ãŒãåå²ãåçã€ã³ããŒãã¯ãReactã¢ããªã±ãŒã·ã§ã³ã®ããã©ãŒãã³ã¹ãæé©åããããã®äžå¯æ¬ ãªãã¯ããã¯ã§ãããããã®ãã¯ããã¯ãå®è£ ããããšã§ãåæèªã¿èŸŒã¿æéãå€§å¹ ã«ççž®ãããŠãŒã¶ãŒãšã¯ã¹ããªãšã³ã¹ãåäžãããã°ããŒãã«ãªãªãŒãã£ãšã³ã¹åãã«ãããé«éã§å¹ççãªã¢ããªã±ãŒã·ã§ã³ãäœæã§ããŸãããŠã§ãã¢ããªã±ãŒã·ã§ã³ããŸããŸãè€éã«ãªãã«ã€ããŠããããã®æé©åæŠç¥ãç¿åŸããããšã¯ã倿§ãªããã€ã¹ããããã¯ãŒã¯æ¡ä»¶äžã§ã·ãŒã ã¬ã¹ã§é åçãªãŠãŒã¶ãŒãšã¯ã¹ããªãšã³ã¹ãæäŸããããã«éåžžã«éèŠã§ãã
ã¢ããªã±ãŒã·ã§ã³ã®ããã©ãŒãã³ã¹ãç¶ç¶çã«ç£èŠããå¿ èŠã«å¿ããŠæé©åæŠç¥ãé©å¿ãããããšãå¿ããªãã§ãã ããããŠã§ãéçºã®ç¶æ³ã¯åžžã«é²åããŠãããææ°ã®ãã¹ããã©ã¯ãã£ã¹ãåžžã«ææ¡ããŠããããšãã仿¥ã®ãŠãŒã¶ãŒã®èŠæ±ãæºãã髿§èœãªReactã¢ããªã±ãŒã·ã§ã³ãæ§ç¯ããéµãšãªããŸãã