Reactãšã©ãŒããŠã³ããªãŒå ã§ã³ã³ããŒãã³ãã®èªååèµ·åãå®è£ ããã¢ããªã±ãŒã·ã§ã³ã®å埩åãé«ããã·ãŒã ã¬ã¹ãªãŠãŒã¶ãŒãšã¯ã¹ããªãšã³ã¹ãå®çŸããæ¹æ³ãåŠã³ãŸãããã¹ããã©ã¯ãã£ã¹ãã³ãŒãäŸãé«åºŠãªãã¯ããã¯ãæ¢ããŸãã
Reactãšã©ãŒããŠã³ããªãŒãªã«ããªãŒïŒãŠãŒã¶ãŒãšã¯ã¹ããªãšã³ã¹åäžã®ããã®ã³ã³ããŒãã³ãèªååèµ·å
çŸä»£ã®ãŠã§ãéçºã«ãããŠãå ç¢ã§å埩åã®ããã¢ããªã±ãŒã·ã§ã³ãæ§ç¯ããããšã¯æãéèŠã§ãããŠãŒã¶ãŒã¯ãäºæãã¬ãšã©ãŒãçºçããå Žåã§ããã·ãŒã ã¬ã¹ãªäœéšãæåŸ ããŸãããŠãŒã¶ãŒã€ã³ã¿ãŒãã§ãŒã¹ãæ§ç¯ããããã®äººæ°ã®JavaScriptã©ã€ãã©ãªã§ããReactã¯ããšã©ãŒãé©åã«åŠçããããã®åŒ·åãªã¡ã«ããºã ããšã©ãŒããŠã³ããªãŒãæäŸããŠããŸãããã®èšäºã§ã¯ãåã«ãã©ãŒã«ããã¯UIã衚瀺ããã ãã§ãªãããšã©ãŒããŠã³ããªãŒãæ¡åŒµãããŠãŒã¶ãŒãšã¯ã¹ããªãšã³ã¹ãšã¢ããªã±ãŒã·ã§ã³ã®å®å®æ§ãåäžãããããã®ã³ã³ããŒãã³ãã®èªååèµ·åã«çŠç¹ãåœãŠãŠè©³ãã解説ããŸãã
Reactãšã©ãŒããŠã³ããªãŒãçè§£ãã
Reactãšã©ãŒããŠã³ããªãŒã¯ãåã³ã³ããŒãã³ãããªãŒå ã®ã©ããã§çºçããJavaScriptãšã©ãŒããã£ãããããããã®ãšã©ãŒããã°ã«èšé²ããã¢ããªã±ãŒã·ã§ã³å šäœãã¯ã©ãã·ã¥ããã代ããã«ãã©ãŒã«ããã¯UIã衚瀺ããReactã³ã³ããŒãã³ãã§ããReact 16ã§å°å ¥ããããšã©ãŒããŠã³ããªãŒã¯ãã¬ã³ããªã³ã°äžãã©ã€ããµã€ã¯ã«ã¡ãœããå ãããã³ãã以äžã®ããªãŒå šäœã®ã³ã³ã¹ãã©ã¯ã¿ã§çºçãããšã©ãŒã宣èšçã«åŠçããæ¹æ³ãæäŸããŸãã
ãšã©ãŒããŠã³ããªãŒã䜿çšããçç±
- ãŠãŒã¶ãŒãšã¯ã¹ããªãšã³ã¹ã®åäžïŒ ã¢ããªã±ãŒã·ã§ã³ã®ã¯ã©ãã·ã¥ãé²ããæçãªãã©ãŒã«ããã¯UIãæäŸããããšã§ããŠãŒã¶ãŒã®äžæºãæå°éã«æããŸãã
- ã¢ããªã±ãŒã·ã§ã³ã®å®å®æ§åäžïŒ ç¹å®ã®ã³ã³ããŒãã³ãå ã§ãšã©ãŒãåé¢ãããšã©ãŒãäŒæããŠã¢ããªã±ãŒã·ã§ã³å šäœã«åœ±é¿ãäžããã®ãé²ããŸãã
- ãããã°ã®ç°¡çŽ åïŒ ãšã©ãŒã®ãã°èšé²ãšå ±åãäžå åããåé¡ã®ç¹å®ãšä¿®æ£ã容æã«ããŸãã
- 宣èšçãªãšã©ãŒãã³ããªã³ã°ïŒ Reactã³ã³ããŒãã³ãã§ãšã©ãŒã管çãããšã©ãŒãã³ããªã³ã°ãã³ã³ããŒãã³ãã¢ãŒããã¯ãã£ã«ã·ãŒã ã¬ã¹ã«çµ±åããŸãã
åºæ¬çãªãšã©ãŒããŠã³ããªãŒã®å®è£
以äžã¯ããšã©ãŒããŠã³ããªãŒã³ã³ããŒãã³ãã®åºæ¬çãªäŸã§ãïŒ
class ErrorBoundary extends React.Component {
constructor(props) {
super(props);
this.state = { hasError: false };
}
static getDerivedStateFromError(error) {
// 次ã®ã¬ã³ããŒã§ãã©ãŒã«ããã¯UIã衚瀺ãããããã«stateãæŽæ°ããŸãã
return { hasError: true };
}
componentDidCatch(error, errorInfo) {
// ãšã©ãŒå ±åãµãŒãã¹ã«ãšã©ãŒããã°ãšããŠèšé²ããããšãã§ããŸã
console.error(error, errorInfo);
}
render() {
if (this.state.hasError) {
// ä»»æã®ã«ã¹ã¿ã ãã©ãŒã«ããã¯UIãã¬ã³ããªã³ã°ã§ããŸã
return åé¡ãçºçããŸããã
;
}
return this.props.children;
}
}
ãšã©ãŒããŠã³ããªãŒã䜿çšããã«ã¯ããšã©ãŒãã¹ããŒããå¯èœæ§ã®ããã³ã³ããŒãã³ããã©ããããã ãã§ãïŒ
ã³ã³ããŒãã³ãã®èªååèµ·åïŒãã©ãŒã«ããã¯UIã®å ãž
ãã©ãŒã«ããã¯UIã衚瀺ããããšã¯ãã¢ããªã±ãŒã·ã§ã³ã®å®å šãªã¯ã©ãã·ã¥ã«æ¯ã¹ãŠå€§ããªæ¹åã§ããããšã©ãŒããèªåçã«å埩ã詊ã¿ãããšãæãŸããå ŽåããããããŸããããã¯ããšã©ãŒããŠã³ããªãŒå ã§ã³ã³ããŒãã³ããåèµ·åããã¡ã«ããºã ãå®è£ ããããšã§å®çŸã§ããŸãã
ã³ã³ããŒãã³ãåèµ·åã®èª²é¡
ãšã©ãŒåŸã«ã³ã³ããŒãã³ããåèµ·åããã«ã¯ãæ éãªæ€èšãå¿ èŠã§ããåã«ã³ã³ããŒãã³ããåã¬ã³ããªã³ã°ããã ãã§ã¯ãåããšã©ãŒãåã³çºçããå¯èœæ§ããããŸããã³ã³ããŒãã³ãã®ç¶æ ããªã»ããããé å»¶ãä¿®æ£ãããã¢ãããŒãã§ãšã©ãŒãåŒãèµ·ãããæäœãå詊è¡ããããšãéèŠã§ãã
Stateãšå詊è¡ã¡ã«ããºã ã«ããèªååèµ·åã®å®è£
以äžã¯ãèªååèµ·åæ©èœãå«ããæŽç·Žããããšã©ãŒããŠã³ããªãŒã³ã³ããŒãã³ãã§ãïŒ
class ErrorBoundary extends React.Component {
constructor(props) {
super(props);
this.state = {
hasError: false,
error: null,
errorInfo: null,
attempt: 0,
restarting: false
};
}
static getDerivedStateFromError(error) {
return { hasError: true };
}
componentDidCatch(error, errorInfo) {
console.error(error, errorInfo);
this.setState({ error, errorInfo });
// é
å»¶åŸã«ã³ã³ããŒãã³ãã®åèµ·åã詊ã¿ãŸã
this.restartComponent();
}
restartComponent = () => {
this.setState({ restarting: true, attempt: this.state.attempt + 1 });
const delay = this.props.retryDelay || 2000; // ããã©ã«ãã®å詊è¡é
å»¶ã¯2ç§
setTimeout(() => {
this.setState({
hasError: false,
error: null,
errorInfo: null,
restarting: false
});
}, delay);
};
render() {
if (this.state.hasError) {
return (
åé¡ãçºçããŸããã
ãšã©ãŒ: {this.state.error && this.state.error.toString()}
ã³ã³ããŒãã³ãã¹ã¿ãã¯ãšã©ãŒè©³çް: {this.state.errorInfo && this.state.errorInfo.componentStack}
{this.state.restarting ? (
ã³ã³ããŒãã³ããåèµ·åããããšããŠããŸã ({this.state.attempt})...
) : (
)}
);
}
return this.props.children;
}
}
ãã®ããŒãžã§ã³ã®äž»ãªæ¹åç¹ïŒ
- ãšã©ãŒè©³çްã®ããã®StateïŒ ãšã©ãŒããŠã³ããªãŒã¯ `error` ãš `errorInfo` ãstateã«ä¿åããããã«ãªãããŠãŒã¶ãŒã«ããè©³çŽ°ãªæ å ±ã衚瀺ãããããªã¢ãŒããµãŒãã¹ã«ãã°ãèšé²ãããã§ããããã«ãªããŸããã
- `restartComponent` ã¡ãœããïŒ ãã®ã¡ãœããã¯stateã« `restarting` ãã©ã°ãèšå®ãã`setTimeout` ã䜿çšããŠåèµ·åãé å»¶ãããŸãããã®é å»¶ã¯ãæè»æ§ã確ä¿ããããã« `ErrorBoundary` ã® `retryDelay` ããããã£ãä»ããŠèšå®ã§ããŸãã
- åèµ·åã€ã³ãžã±ãŒã¿ãŒïŒ ã³ã³ããŒãã³ããåèµ·åã詊ã¿ãŠããããšã瀺ãã¡ãã»ãŒãžã衚瀺ãããŸãã
- æåå詊è¡ãã¿ã³ïŒ èªååèµ·åã倱æããå Žåã«ããŠãŒã¶ãŒãæåã§åèµ·åãããªã¬ãŒãããªãã·ã§ã³ãæäŸããŸãã
䜿çšäŸïŒ
é«åºŠãªãã¯ããã¯ãšèæ ®äºé
1. ææ°é¢æ°çããã¯ãªã
ãšã©ãŒãæç¶ããå¯èœæ§ãé«ãç¶æ³ã§ã¯ãææ°é¢æ°çããã¯ãªãæŠç¥ã®å®è£ ãæ€èšããŠãã ãããããã¯ãåèµ·å詊è¡éã®é å»¶ãå¢å ããããã®ã§ããããã«ãããç¹°ãè¿ããã倱æè©Šè¡ã§ã·ã¹ãã ã«éè² è·ããããã®ãé²ãããšãã§ããŸãã
restartComponent = () => {
this.setState({ restarting: true, attempt: this.state.attempt + 1 });
const baseDelay = this.props.retryDelay || 2000;
const delay = baseDelay * Math.pow(2, this.state.attempt); // ææ°é¢æ°çããã¯ãªã
const maxDelay = this.props.maxRetryDelay || 30000; // æå€§é
å»¶30ç§
const actualDelay = Math.min(delay, maxDelay);
setTimeout(() => {
this.setState({
hasError: false,
error: null,
errorInfo: null,
restarting: false
});
}, actualDelay);
};
2. ãµãŒããããã¬ãŒã«ãŒãã¿ãŒã³
ãµãŒããããã¬ãŒã«ãŒãã¿ãŒã³ã¯ã倱æããå¯èœæ§ãé«ãæäœãã¢ããªã±ãŒã·ã§ã³ãç¹°ãè¿ãå®è¡ããããšããã®ãé²ãããšãã§ããŸãããšã©ãŒããŠã³ããªãŒã¯ãæè¿ã®å€±æåæ°ã远跡ãã倱æçãç¹å®ã®ãããå€ãè¶ ããå Žåã«ãããªãåèµ·åã®è©Šã¿ãé²ããåçŽãªãµãŒããããã¬ãŒã«ãŒãšããŠæ©èœã§ããŸãã
class ErrorBoundary extends React.Component {
// ... (以åã®ã³ãŒã)
constructor(props) {
super(props);
this.state = {
hasError: false,
error: null,
errorInfo: null,
attempt: 0,
restarting: false,
failureCount: 0,
};
this.maxFailures = props.maxFailures || 3; // 諊ãããŸã§ã®æå€§å€±æåæ°
}
componentDidCatch(error, errorInfo) {
console.error(error, errorInfo);
this.setState({
error,
errorInfo,
failureCount: this.state.failureCount + 1,
});
if (this.state.failureCount < this.maxFailures) {
this.restartComponent();
} else {
console.warn("ã³ã³ããŒãã³ãã®å€±æåæ°ãå€ãããŸãã諊ããŸãã");
// ãªãã·ã§ã³ã§ãããæ°žç¶çãªãšã©ãŒã¡ãã»ãŒãžã衚瀺
}
}
restartComponent = () => {
// ... (以åã®ã³ãŒã)
};
render() {
if (this.state.hasError) {
if (this.state.failureCount >= this.maxFailures) {
return (
ã³ã³ããŒãã³ããæä¹
çã«å€±æããŸããã
ãµããŒãã«ãåãåãããã ããã
);
}
return (
åé¡ãçºçããŸããã
ãšã©ãŒ: {this.state.error && this.state.error.toString()}
ã³ã³ããŒãã³ãã¹ã¿ãã¯ãšã©ãŒè©³çް: {this.state.errorInfo && this.state.errorInfo.componentStack}
{this.state.restarting ? (
ã³ã³ããŒãã³ããåèµ·åããããšããŠããŸã ({this.state.attempt})...
) : (
)}
);
}
return this.props.children;
}
}
䜿çšäŸïŒ
3. ã³ã³ããŒãã³ãã®Stateããªã»ãããã
ã³ã³ããŒãã³ããåèµ·åããåã«ããã®stateãæ¢ç¥ã®æ£åžžãªç¶æ ã«ãªã»ããããããšãéèŠã§ããããã«ã¯ããã£ãã·ã¥ãããããŒã¿ã®ã¯ãªã¢ãã«ãŠã³ã¿ãŒã®ãªã»ãããAPIããã®ããŒã¿ã®åååŸãªã©ãå«ãŸããŸãããããã©ã®ããã«è¡ããã¯ãã³ã³ããŒãã³ãã«ãã£ãŠç°ãªããŸãã
äžè¬çãªã¢ãããŒãã®1ã€ã¯ãã©ãããããã³ã³ããŒãã³ãã«keyããããã£ã䜿çšããããšã§ããkeyã倿ŽãããšãReactã¯ã³ã³ããŒãã³ããåããŠã³ããã广çã«ãã®stateããªã»ããããŸãã
class ErrorBoundary extends React.Component {
// ... (以åã®ã³ãŒã)
constructor(props) {
super(props);
this.state = {
hasError: false,
error: null,
errorInfo: null,
attempt: 0,
restarting: false,
key: 0, // åããŠã³ãã匷å¶ããããã®ããŒ
};
}
restartComponent = () => {
this.setState({
restarting: true,
attempt: this.state.attempt + 1,
key: this.state.key + 1, // ããŒãã€ã³ã¯ãªã¡ã³ãããŠåããŠã³ãã匷å¶
});
const delay = this.props.retryDelay || 2000;
setTimeout(() => {
this.setState({
hasError: false,
error: null,
errorInfo: null,
restarting: false,
});
}, delay);
};
render() {
if (this.state.hasError) {
return (
åé¡ãçºçããŸããã
ãšã©ãŒ: {this.state.error && this.state.error.toString()}
ã³ã³ããŒãã³ãã¹ã¿ãã¯ãšã©ãŒè©³çް: {this.state.errorInfo && this.state.errorInfo.componentStack}
{this.state.restarting ? (
ã³ã³ããŒãã³ããåèµ·åããããšããŠããŸã ({this.state.attempt})...
) : (
)}
);
}
return React.cloneElement(this.props.children, { key: this.state.key }); // åã«ããŒãæž¡ã
}
}
äœ¿çšæ³ïŒ
4. ã¿ãŒã²ãããçµã£ããšã©ãŒããŠã³ããªãŒ
ã¢ããªã±ãŒã·ã§ã³ã®å€§éšåãåäžã®ãšã©ãŒããŠã³ããªãŒã§ã©ããããããšã¯é¿ããŠãã ããã代ããã«ããšã©ãŒãçºçããããç¹å®ã®ã³ã³ããŒãã³ããã¢ããªã±ãŒã·ã§ã³ã®ã»ã¯ã·ã§ã³ã®åšãã«æŠç¥çã«ãšã©ãŒããŠã³ããªãŒãé 眮ããŸããããã«ããããšã©ãŒã®åœ±é¿ãéå®ãããã¢ããªã±ãŒã·ã§ã³ã®ä»ã®éšåãæ£åžžã«æ©èœãç¶ããããšãã§ããŸãã
è€éãªEã³ããŒã¹ã¢ããªã±ãŒã·ã§ã³ãèããŠã¿ãŸããããååãªã¹ãå šäœãåäžã®ErrorBoundaryã§ã©ãããã代ããã«ãåååã«ãŒãã®åšãã«åå¥ã®ErrorBoundaryãé 眮ããããšãã§ããŸããããã«ãããããååã«ãŒããããŒã¿ã®åé¡ã§ã¬ã³ããªã³ã°ã«å€±æããŠããä»ã®ååã«ãŒãã®ã¬ã³ããªã³ã°ã«åœ±é¿ãäžããŸããã
5. ãã°èšé²ãšç£èŠ
ãšã©ãŒããŠã³ããªãŒã§ãã£ããããããšã©ãŒããSentryãRollbarãBugsnagãªã©ã®ãªã¢ãŒããšã©ãŒè¿œè·¡ãµãŒãã¹ã«ãã°ãšããŠèšé²ããããšãäžå¯æ¬ ã§ããããã«ãããã¢ããªã±ãŒã·ã§ã³ã®å¥å šæ§ãç£èŠããç¹°ãè¿ãçºçããåé¡ãç¹å®ãããšã©ãŒãã³ããªã³ã°æŠç¥ã®æå¹æ§ã远跡ããããšãã§ããŸãã
`componentDidCatch` ã¡ãœããã§ãéžæãããšã©ãŒè¿œè·¡ãµãŒãã¹ã«ãšã©ãŒãšãšã©ãŒæ å ±ãéä¿¡ããŸãïŒ
componentDidCatch(error, errorInfo) {
console.error(error, errorInfo);
Sentry.captureException(error, { extra: errorInfo }); // Sentryã䜿çšããäŸ
this.setState({ error, errorInfo });
this.restartComponent();
}
6. æ§ã ãªãšã©ãŒã¿ã€ãã®åŠç
ãã¹ãŠã®ãšã©ãŒãåãããã«äœãããŠããããã§ã¯ãããŸãããäžéšã®ãšã©ãŒã¯äžæçã§å埩å¯èœïŒäŸïŒäžæçãªãããã¯ãŒã¯é害ïŒã§ããäžæ¹ãä»ã®ãšã©ãŒã¯ããæ·±å»ãªæ ¹æ¬çãªåé¡ïŒäŸïŒã³ãŒãã®ãã°ïŒã瀺ããŠããå ŽåããããŸãããšã©ãŒæ å ±ã䜿çšããŠããšã©ãŒã®åŠçæ¹æ³ã«ã€ããŠæ±ºå®ãäžãããšãã§ããŸãã
äŸãã°ãæç¶çãªãšã©ãŒãããäžæçãªãšã©ãŒãããç©æ¥µçã«å詊è¡ããããšãã§ããŸãããŸãããšã©ãŒã®çš®é¡ã«åºã¥ããŠç°ãªããã©ãŒã«ããã¯UIããšã©ãŒã¡ãã»ãŒãžãæäŸããããšãã§ããŸãã
7. ãµãŒããŒãµã€ãã¬ã³ããªã³ã°ïŒSSRïŒã®èæ ®äºé
ãšã©ãŒããŠã³ããªãŒã¯ããµãŒããŒãµã€ãã¬ã³ããªã³ã°ïŒSSRïŒç°å¢ã§ã䜿çšã§ããŸãããã ããSSRã«ããããšã©ãŒããŠã³ããªãŒã®å¶éã«æ³šæããããšãéèŠã§ãããšã©ãŒããŠã³ããªãŒã¯ããµãŒããŒã§ã®åæã¬ã³ããªã³ã°äžã«çºçãããšã©ãŒã®ã¿ããã£ããããŸããã€ãã³ãåŠçäžãã¯ã©ã€ã¢ã³ãã§ã®åŸç¶ã®æŽæ°äžã«çºçãããšã©ãŒã¯ããµãŒããŒã®ãšã©ãŒããŠã³ããªãŒã§ã¯ãã£ãããããŸããã
SSRã§ã¯ãéåžžãéçãªãšã©ãŒããŒãžãã¬ã³ããªã³ã°ãããããŠãŒã¶ãŒããšã©ãŒã«ãŒãã«ãªãã€ã¬ã¯ãããããšã§ãšã©ãŒãåŠçããŸããã¬ã³ããªã³ã°ã³ãŒãã®åšãã«try-catchãããã¯ã䜿çšããŠãšã©ãŒããã£ããããé©åã«åŠçããããšãã§ããŸãã
ã°ããŒãã«ãªèŠç¹ãšäŸ
ãšã©ãŒãã³ããªã³ã°ãšå埩åã®æŠå¿µã¯ãç°ãªãæåãåœã ã§æ®éçãªãã®ã§ãããããã䜿çšãããå ·äœçãªæŠç¥ãããŒã«ã¯ãåå°åã§æ®åããŠããéçºæ £è¡ãæè¡ã¹ã¿ãã¯ã«ãã£ãŠç°ãªãå ŽåããããŸãã
- ã¢ãžã¢ïŒ æ¥æ¬ãéåœãªã©ããŠãŒã¶ãŒãšã¯ã¹ããªãšã³ã¹ãéåžžã«éèŠãããåœã§ã¯ãå ç¢ãªãšã©ãŒãã³ããªã³ã°ãšã°ã¬ãŒã¹ãã«ãã°ã©ããŒã·ã§ã³ïŒæ®µéçæ©èœäœäžïŒããè¯å¥œãªãã©ã³ãã€ã¡ãŒãžãç¶æããããã«äžå¯æ¬ ãšèŠãªãããŠããŸãã
- ãšãŒãããïŒ GDPRãªã©ã®æ¬§å·é£åã®èŠå¶ã¯ãããŒã¿ãã©ã€ãã·ãŒãšã»ãã¥ãªãã£ãéèŠããŠãããããŒã¿æŒæŽ©ãã»ãã¥ãªãã£äŸµå®³ãé²ãããã«æ éãªãšã©ãŒãã³ããªã³ã°ãå¿ èŠã§ãã
- åç±³ïŒ ã·ãªã³ã³ãã¬ãŒã®äŒæ¥ã¯ãè¿ éãªéçºãšãããã€ãåªå ããããšãå€ãããã®çµæã培åºãããšã©ãŒãã³ããªã³ã°ã軜èŠãããããšããããŸããããããã¢ããªã±ãŒã·ã§ã³ã®å®å®æ§ãšãŠãŒã¶ãŒæºè¶³åºŠãžã®æ³šç®ãé«ãŸãã«ã€ããŠããšã©ãŒããŠã³ããªãŒããã®ä»ã®ãšã©ãŒãã³ããªã³ã°æè¡ã®æ¡çšãé²ãã§ããŸãã
- åç±³ïŒ ã€ã³ã¿ãŒãããã€ã³ãã©ã®ä¿¡é Œæ§ãäœãå°åã§ã¯ããããã¯ãŒã¯ã®åæ¢ãæç¶çãªæ¥ç¶ãèæ ®ãããšã©ãŒãã³ããªã³ã°æŠç¥ãç¹ã«éèŠã§ãã
å°ççãªå Žæã«é¢ãããããšã©ãŒãã³ããªã³ã°ã®åºæ¬ååã¯åãã§ãïŒã¢ããªã±ãŒã·ã§ã³ã®ã¯ã©ãã·ã¥ãé²ãããŠãŒã¶ãŒã«æçãªãã£ãŒãããã¯ãæäŸãããããã°ãšç£èŠã®ããã«ãšã©ãŒããã°ã«èšé²ããããšã§ãã
ã³ã³ããŒãã³ãèªååèµ·åã®ã¡ãªãã
- ãŠãŒã¶ãŒã®äžæºã軜æžïŒ ãŠãŒã¶ãŒãå®å šã«å£ããã¢ããªã±ãŒã·ã§ã³ã«ééããå¯èœæ§ãäœããªããããããžãã£ããªäœéšã«ã€ãªãããŸãã
- ã¢ããªã±ãŒã·ã§ã³ã®å¯çšæ§åäžïŒ èªåå埩ã«ããããŠã³ã¿ã€ã ãæå°éã«æãããããšã©ãŒãçºçããŠãã¢ããªã±ãŒã·ã§ã³ãæ©èœãç¶ããããšãä¿èšŒãããŸãã
- å埩æéã®ççž®ïŒ ã³ã³ããŒãã³ãã¯ãŠãŒã¶ãŒã®ä»å ¥ãªãã«ãšã©ãŒããèªåçã«å埩ã§ãããããå埩æéãççž®ãããŸãã
- ã¡ã³ããã³ã¹ã®ç°¡çŽ åïŒ èªååèµ·åã¯äžæçãªãšã©ãŒãé èœã§ããããã峿ã®ä»å ¥ã®å¿ èŠæ§ãæžããéçºè ã¯ããéèŠãªåé¡ã«éäžã§ããŸãã
æœåšçãªæ¬ ç¹ãšèæ ®äºé
- ç¡éã«ãŒãã®å¯èœæ§ïŒ ãšã©ãŒãäžæçãªãã®ã§ãªãå Žåãã³ã³ããŒãã³ããç¹°ãè¿ã倱æããŠåèµ·åããç¡éã«ãŒãã«é¥ãå¯èœæ§ããããŸãããµãŒããããã¬ãŒã«ãŒãã¿ãŒã³ãå®è£ ããããšã§ããã®åé¡ã軜æžã§ããŸãã
- è€éæ§ã®å¢å ïŒ èªååèµ·åæ©èœã远å ãããšããšã©ãŒããŠã³ããªãŒã³ã³ããŒãã³ãã®è€éæ§ãå¢ããŸãã
- ããã©ãŒãã³ã¹ã®ãªãŒããŒãããïŒ ã³ã³ããŒãã³ããåèµ·åãããšãããããªããã©ãŒãã³ã¹ã®ãªãŒããŒããããçºçããå¯èœæ§ããããŸãããããããã®ãªãŒããŒãããã¯éåžžãã¢ããªã±ãŒã·ã§ã³å šäœã®ã¯ã©ãã·ã¥ã®ã³ã¹ãã«æ¯ã¹ãã°ãããããã§ãã
- äºæãã¬å¯äœçšïŒ ã³ã³ããŒãã³ããåæåãã¬ã³ããªã³ã°äžã«å¯äœçšïŒäŸïŒAPIåŒã³åºãïŒãå®è¡ããå Žåãã³ã³ããŒãã³ããåèµ·åãããšäºæãã¬å¯äœçšãçºçããå¯èœæ§ããããŸããã³ã³ããŒãã³ããåèµ·åãé©åã«åŠçã§ããããã«èšèšããŠãã ããã
çµè«
Reactãšã©ãŒããŠã³ããªãŒã¯ãReactã¢ããªã±ãŒã·ã§ã³ã§ãšã©ãŒãåŠçããããã®åŒ·åã§å®£èšçãªæ¹æ³ãæäŸããŸãããšã©ãŒããŠã³ããªãŒãã³ã³ããŒãã³ãã®èªååèµ·åæ©èœã§æ¡åŒµããããšã«ããããŠãŒã¶ãŒãšã¯ã¹ããªãšã³ã¹ãå€§å¹ ã«åäžãããã¢ããªã±ãŒã·ã§ã³ã®å®å®æ§ãæ¹åããã¡ã³ããã³ã¹ãç°¡çŽ åã§ããŸããæœåšçãªæ¬ ç¹ãæ éã«èæ ®ããé©åãªä¿è·çãå®è£ ããããšã§ãã³ã³ããŒãã³ãã®èªååèµ·åãæŽ»çšããŠãããå埩åãããããŠãŒã¶ãŒãã¬ã³ããªãŒãªãŠã§ãã¢ããªã±ãŒã·ã§ã³ãäœæã§ããŸãã
ãããã®æè¡ãåãå ¥ããããšã§ãã¢ããªã±ãŒã·ã§ã³ã¯äºæãã¬ãšã©ãŒãžã®å¯Ÿå¿èœåãåäžããäžçäžã®ãŠãŒã¶ãŒã«ããã¹ã ãŒãºã§ä¿¡é Œæ§ã®é«ãäœéšãæäŸã§ããããã«ãªããŸãããããã®æŠç¥ãç¹å®ã®ã¢ããªã±ãŒã·ã§ã³èŠä»¶ã«åãããŠèª¿æŽãããšã©ãŒãã³ããªã³ã°ã¡ã«ããºã ã®æå¹æ§ã確ä¿ããããã«ãåžžã«åŸ¹åºçãªãã¹ããåªå ããããšãå¿ããªãã§ãã ããã