React é«éã³ã³ããŒãã³ãïŒHOCïŒã®åãæŽ»çšããŠãèªèšŒããã®ã³ã°ãããŒã¿ååŸãªã©ã®ã¯ãã¹ã»ã«ããã£ã³ã°ã»ã³ã³ãµãŒã³ããšã¬ã¬ã³ãã«ç®¡çããŸããå®è·µçãªäŸãšãã¹ããã©ã¯ãã£ã¹ã§åŠã³ãŸãããã
React é«éã³ã³ããŒãã³ã: ã¯ãã¹ã»ã«ããã£ã³ã°ã»ã³ã³ãµãŒã³ããã¹ã¿ãŒãã
React ã¯ããŠãŒã¶ãŒã€ã³ã¿ãŒãã§ãŒã¹ãæ§ç¯ããããã®åŒ·å㪠JavaScript ã©ã€ãã©ãªã§ãããã³ãŒãã®åå©çšãšã³ã³ããŒãã³ãã®åæã®ããã®ããŸããŸãªãã¿ãŒã³ãæäŸããŸãããã®äžã§ããé«éã³ã³ããŒãã³ãïŒHOCïŒã¯ãã¯ãã¹ã»ã«ããã£ã³ã°ã»ã³ã³ãµãŒã³ã«å¯ŸåŠããããã®è²Žéãªãã¯ããã¯ãšããŠéç«ã£ãŠããŸãããã®èšäºã§ã¯ãHOC ã®äžçãæãäžãããã®ç®çãå®è£ ãããã³ãã¹ããã©ã¯ãã£ã¹ã«ã€ããŠèª¬æããŸãã
ã¯ãã¹ã»ã«ããã£ã³ã°ã»ã³ã³ãµãŒã³ãšã¯ïŒ
ã¯ãã¹ã»ã«ããã£ã³ã°ã»ã³ã³ãµãŒã³ãšã¯ãããã°ã©ã ã®è€æ°ã®ã¢ãžã¥ãŒã«ãŸãã¯ã³ã³ããŒãã³ãã«åœ±é¿ãäžããåŽé¢ã®ããšã§ãããããã®ã³ã³ãµãŒã³ã¯ãã³ã¢ããžãã¹ããžãã¯ãšã¯é¢ä¿ã®ãªãããšãå€ãã§ãããã¢ããªã±ãŒã·ã§ã³ãæ£ããæ©èœããããã«ã¯äžå¯æ¬ ã§ããäžè¬çãªäŸãšããŠã¯ã次ã®ãã®ããããŸãã
- èªèšŒ: ãŠãŒã¶ãŒã®èº«å ã確èªãããªãœãŒã¹ãžã®ã¢ã¯ã»ã¹ãèš±å¯ããŸãã
- èªå¯: ãŠãŒã¶ãŒãå®è¡ã§ããã¢ã¯ã·ã§ã³ã決å®ããŸãã
- ãã®ã³ã°: ãããã°ãšç£èŠã®ããã«ã¢ããªã±ãŒã·ã§ã³ã€ãã³ããèšé²ããŸãã
- ããŒã¿ååŸ: å€éšãœãŒã¹ããããŒã¿ãååŸããŸãã
- ãšã©ãŒåŠç: å®è¡äžã«çºçãããšã©ãŒã管çããã³å ±åããŸãã
- ããã©ãŒãã³ã¹ç£èŠ: ããã©ãŒãã³ã¹ã¡ããªã¯ã¹ã远跡ããŠãããã«ããã¯ãç¹å®ããŸãã
- ç¶æ 管ç: è€æ°ã®ã³ã³ããŒãã³ãã«ãããã¢ããªã±ãŒã·ã§ã³ã®ç¶æ ã管çããŸãã
- åœéåïŒi18nïŒãšããŒã«ãªãŒãŒã·ã§ã³ïŒl10nïŒïŒ ã¢ããªã±ãŒã·ã§ã³ãç°ãªãèšèªãšå°åã«é©å¿ãããŸãã
é©åãªã¢ãããŒãããªããšããããã®ã³ã³ãµãŒã³ã¯ã³ã¢ããžãã¹ããžãã¯ãšå¯æ¥ã«çµåããã³ãŒãã®éè€ãè€éãã®å¢å€§ãããã³ä¿å®æ§ã®äœäžã«ã€ãªããå¯èœæ§ããããŸããHOC ã¯ããããã®ã³ã³ãµãŒã³ãã³ã¢ã³ã³ããŒãã³ãããåé¢ããããã¯ãªãŒã³ã§ã¢ãžã¥ãŒã«åãããã³ãŒãããŒã¹ãä¿é²ããã¡ã«ããºã ãæäŸããŸãã
é«éã³ã³ããŒãã³ãïŒHOCïŒãšã¯ïŒ
React ã§ã¯ãé«éã³ã³ããŒãã³ãïŒHOCïŒã¯ãã³ã³ããŒãã³ããåŒæ°ãšããŠåãåããæ°ããæ¡åŒµã³ã³ããŒãã³ããè¿ã颿°ã§ããåºæ¬çã«ãã³ã³ããŒãã³ããã¡ã¯ããªã§ããHOC ã¯ãã³ã³ããŒãã³ãããžãã¯ãåå©çšããããã®åŒ·åãªãã¿ãŒã³ã§ããHOC ã¯å ã®ã³ã³ããŒãã³ããçŽæ¥å€æŽããã®ã§ã¯ãªãã远å ã®æ©èœãæäŸããã³ã³ããã³ã³ããŒãã³ãã§ã©ããããŸãã
ã®ãããå ãããšãèããŠã¿ãŠãã ãããã®ããèªäœã倿Žããã®ã§ã¯ãªããã©ããã³ã°ããŒããŒãšãªãã³ã远å ããŠãããé åçãŸãã¯æ©èœçã«ããŠããŸãã
HOC ã®èåŸã«ããã³ã¢ååã¯æ¬¡ã®ãšããã§ãã
- ã³ã³ããŒãã³ãåæ: ããåçŽãªã³ã³ããŒãã³ããçµã¿åãããããšã§ãè€éãªã³ã³ããŒãã³ããæ§ç¯ããŸãã
- ã³ãŒãã®åå©çš: è€æ°ã®ã³ã³ããŒãã³ãéã§å ±éã®ããžãã¯ãå ±æããŸãã
- é¢å¿ã®åé¢: ã¯ãã¹ã»ã«ããã£ã³ã°ã»ã³ã³ãµãŒã³ãã³ã¢ããžãã¹ããžãã¯ããåé¢ããŸãã
é«éã³ã³ããŒãã³ãã®å®è£
èªèšŒã®ããã®ç°¡å㪠HOC ã®äœææ¹æ³ã説æããŸããããã¢ã¯ã»ã¹ããåã«ãŠãŒã¶ãŒèªèšŒãå¿ èŠãªã³ã³ããŒãã³ããããã€ããããšããŸãã
ãŠãŒã¶ãŒãããã¡ã€ã«æ å ±ã衚瀺ããåºæ¬çãªã³ã³ããŒãã³ããæ¬¡ã«ç€ºããŸãïŒèªèšŒãå¿ èŠã§ãïŒã
function UserProfile(props) {
return (
<div>
<h2>User Profile</h2>
<p>Name: {props.user.name}</p>
<p>Email: {props.user.email}</p>
</div>
);
}
次ã«ããŠãŒã¶ãŒãèªèšŒãããŠãããã©ããã確èªãã HOC ãäœæããŸããããããã§ãªãå Žåã¯ããã°ã€ã³ããŒãžã«ãªãã€ã¬ã¯ãããŸãããã®äŸã§ã¯ãåçŽãªããŒã«ãã©ã°ã§èªèšŒãã·ãã¥ã¬ãŒãããŸãã
import React from 'react';
function withAuthentication(WrappedComponent) {
return class extends React.Component {
constructor(props) {
super(props);
this.state = {
isAuthenticated: false // Simulate authentication status
};
}
componentDidMount() {
// Simulate authentication check (e.g., using a token from localStorage)
const token = localStorage.getItem('authToken');
if (token) {
this.setState({ isAuthenticated: true });
} else {
// Redirect to login page (replace with your actual routing logic)
window.location.href = '/login';
}
}
render() {
if (this.state.isAuthenticated) {
return <WrappedComponent {...this.props} />;
} else {
return <p>Redirecting to login...</p>;
}
}
};
}
export default withAuthentication;
HOC ã䜿çšããã«ã¯ã`UserProfile` ã³ã³ããŒãã³ããã©ããããã ãã§ãã
import withAuthentication from './withAuthentication';
const AuthenticatedUserProfile = withAuthentication(UserProfile);
// Use AuthenticatedUserProfile in your application
ãã®äŸã§ã¯ã`withAuthentication` ã HOC ã§ãã`UserProfile` ãå ¥åãšããŠåãåããèªèšŒããžãã¯ãå«ãæ°ããã³ã³ããŒãã³ãïŒ`AuthenticatedUserProfile`ïŒãè¿ããŸãããŠãŒã¶ãŒãèªèšŒãããŠããå Žåã`WrappedComponent`ïŒUserProfileïŒã¯å ã® props ã§ã¬ã³ããªã³ã°ãããŸããããã§ãªãå Žåã¯ãã¡ãã»ãŒãžã衚瀺ããããŠãŒã¶ãŒã¯ãã°ã€ã³ããŒãžã«ãªãã€ã¬ã¯ããããŸãã
HOC ã䜿çšããå©ç¹
HOC ã䜿çšãããšãããã€ãã®å©ç¹ããããŸãã
- ã³ãŒãã®åå©çšæ§ã®åäž: HOC ã䜿çšãããšãã³ãŒããè€è£œããã«è€æ°ã®ã³ã³ããŒãã³ãéã§ããžãã¯ãåå©çšã§ããŸããäžèšã®èªèšŒã®äŸã¯è¯ããã¢ã³ã¹ãã¬ãŒã·ã§ã³ã§ããèªèšŒãå¿ èŠãªãã¹ãŠã®ã³ã³ããŒãã³ãã§åæ§ã®ãã§ãã¯ãèšè¿°ãã代ããã«ãåäžã® HOC ã䜿çšã§ããŸãã
- ã³ãŒãã®çµç¹åã®åŒ·å: ã¯ãã¹ã»ã«ããã£ã³ã°ã»ã³ã³ãµãŒã³ã HOC ã«åé¢ããããšã§ãã³ã¢ã³ã³ããŒãã³ããäž»èŠãªè²¬ä»»ã«éäžãããããã¯ãªãŒã³ã§ä¿å®ããããã³ãŒããå®çŸã§ããŸãã
- ã³ã³ããŒãã³ãã®æ§æå¯èœæ§ã®åäž: HOC ã¯ã³ã³ããŒãã³ãã®åæãä¿é²ããããåçŽãªã³ã³ããŒãã³ããçµã¿åãããããšã§è€éãªã³ã³ããŒãã³ããæ§ç¯ã§ããŸããè€æ°ã® HOC ããã§ãŒã³ããŠãã³ã³ããŒãã³ãã«ããŸããŸãªæ©èœã远å ã§ããŸãã
- ãã€ã©ãŒãã¬ãŒãã³ãŒãã®åæž: HOC ã¯äžè¬çãªãã¿ãŒã³ãã«ãã»ã«åã§ãããããåã³ã³ããŒãã³ãã§èšè¿°ããå¿ èŠããããã€ã©ãŒãã¬ãŒãã³ãŒãã®éãåæžã§ããŸãã
- ãã¹ãã®å®¹æå: ããžãã¯ã HOC å ã«ã«ãã»ã«åãããŠãããããHOC ã¯ã©ããããã³ã³ããŒãã³ããšã¯ç¬ç«ããŠãã¹ãã§ããŸãã
HOC ã®äžè¬çãªãŠãŒã¹ã±ãŒã¹
èªèšŒä»¥å€ã«ããHOC ã¯ããŸããŸãªã·ããªãªã§äœ¿çšã§ããŸãã
1. ãã®ã³ã°
HOC ãäœæããŠãã³ã³ããŒãã³ãã®ã©ã€ããµã€ã¯ã«ã€ãã³ããŸãã¯ãŠãŒã¶ãŒã€ã³ã¿ã©ã¯ã·ã§ã³ããã°ã«èšé²ã§ããŸããããã¯ããããã°ãšããã©ãŒãã³ã¹ç£èŠã«åœ¹ç«ã¡ãŸãã
function withLogging(WrappedComponent) {
return class extends React.Component {
componentDidMount() {
console.log(`Component ${WrappedComponent.name} mounted.`);
}
componentWillUnmount() {
console.log(`Component ${WrappedComponent.name} unmounted.`);
}
render() {
return <WrappedComponent {...this.props} />;
}
};
}
2. ããŒã¿ååŸ
HOC ã䜿çšã㊠API ããããŒã¿ãååŸããã©ãããããã³ã³ããŒãã³ãã« props ãšããŠæž¡ãããšãã§ããŸããããã«ãããããŒã¿ç®¡çãç°¡çŽ åãããã³ãŒãã®éè€ãåæžãããŸãã
function withData(url) {
return function(WrappedComponent) {
return class extends React.Component {
constructor(props) {
super(props);
this.state = {
data: null,
loading: true,
error: null
};
}
async componentDidMount() {
try {
const response = await fetch(url);
const data = await response.json();
this.setState({ data, loading: false });
} catch (error) {
this.setState({ error, loading: false });
}
}
render() {
if (this.state.loading) {
return <p>Loading...</p>;
}
if (this.state.error) {
return <p>Error: {this.state.error.message}</p>;
}
return <WrappedComponent {...this.props} data={this.state.data} />;
}
};
};
}
3. åœéåïŒi18nïŒãšããŒã«ãªãŒãŒã·ã§ã³ïŒl10nïŒ
HOC ã䜿çšããŠç¿»èš³ã管çããã¢ããªã±ãŒã·ã§ã³ãããŸããŸãªèšèªãšå°åã«é©å¿ãããããšãã§ããŸããäžè¬çãªã¢ãããŒããšããŠã¯ãç¿»èš³é¢æ°ãŸã㯠i18n ã³ã³ããã¹ããã©ãããããã³ã³ããŒãã³ãã«æž¡ãããšãæããããŸãã
import React, { createContext, useContext } from 'react';
// Create a context for translations
const TranslationContext = createContext();
// HOC to provide translations
function withTranslations(WrappedComponent, translations) {
return function WithTranslations(props) {
return (
<TranslationContext.Provider value={translations}>
<WrappedComponent {...props} />
</TranslationContext.Provider>
);
};
}
// Hook to consume translations
function useTranslation() {
return useContext(TranslationContext);
}
// Example usage
function MyComponent() {
const translations = useTranslation();
return (
<div>
<h1>{translations.greeting}</h1>
<p>{translations.description}</p>
</div>
);
}
// Example translations
const englishTranslations = {
greeting: 'Hello!',
description: 'Welcome to my website.'
};
const frenchTranslations = {
greeting: 'Bonjour !',
description: 'Bienvenue sur mon site web.'
};
// Wrap the component with translations
const MyComponentWithEnglish = withTranslations(MyComponent, englishTranslations);
const MyComponentWithFrench = withTranslations(MyComponent, frenchTranslations);
ãã®äŸã§ã¯ãHOC ãåãã³ã³ããŒãã³ãã«ç°ãªã翻蚳ã»ãããæäŸããã¢ããªã±ãŒã·ã§ã³ã®ã³ã³ãã³ãã广çã«ããŒã«ã©ã€ãºããæ¹æ³ã瀺ããŠããŸãã
4. èªå¯
èªèšŒãšåæ§ã«ãHOC ã¯èªå¯ããžãã¯ãåŠçãããŠãŒã¶ãŒãç¹å®ã®ã³ã³ããŒãã³ããŸãã¯æ©èœã«ã¢ã¯ã»ã¹ããããã«å¿ èŠãªæš©éãæã£ãŠãããã©ããã倿ã§ããŸãã
HOC ã䜿çšããããã®ãã¹ããã©ã¯ãã£ã¹
HOC ã¯åŒ·åãªããŒã«ã§ãããæœåšçãªèœãšã穎ãé¿ããããã«ãè³¢æã«äœ¿çšããããšãéèŠã§ãã
- ååã®è¡çªãé¿ãã: ã©ãããããã³ã³ããŒãã³ãã« props ãæž¡ãå Žåã¯ãã³ã³ããŒãã³ããæ¢ã«æ³å®ããŠãã props ãšååãè¡çªããªãããã«æ³šæããŠãã ãããäžè²«ããåœåèŠåãŸãã¯ãã¬ãã£ãã¯ã¹ã䜿çšããŠãç«¶åãåé¿ããŸãã
- ãã¹ãŠã® Props ãæž¡ã: ã¹ãã¬ããæŒç®å (`{...this.props}`) ã䜿çšããŠãHOC ãã©ãããããã³ã³ããŒãã³ãã«ãã¹ãŠã®é¢é£ãã props ãæž¡ãããã«ããŸããããã«ãããäºæããªãåäœãåé¿ãããã³ã³ããŒãã³ããæ£ããæ©èœããããšãä¿èšŒãããŸãã
- 衚瀺åãä¿æãã: ãããã°ã®ç®çã§ãã©ãããããã³ã³ããŒãã³ãã®è¡šç€ºåãä¿æãããšåœ¹ç«ã¡ãŸããHOC ã® `displayName` ããããã£ãèšå®ããããšã§ããããè¡ãããšãã§ããŸãã
- ç¶æ¿ãããã³ã³ããžã·ã§ã³ã䜿çšãã: HOC ã¯ã³ã³ããžã·ã§ã³ã®åœ¢åŒã§ãããReact ã§ã¯äžè¬çã«ç¶æ¿ãããåªå ãããŸããã³ã³ããžã·ã§ã³ã¯ããé«ãæè»æ§ãæäŸããç¶æ¿ã«é¢é£ããç·å¯ãªçµåãåé¿ããŸãã
- ä»£æ¿æ¡ãæ€èšãã: HOC ã䜿çšããåã«ãç¹å®ã®ãŠãŒã¹ã±ãŒã¹ã«ããé©ãã代æ¿ãã¿ãŒã³ããããã©ãããæ€èšããŠãã ãããã¬ã³ããŒãããããšããã¯ã¯ãå€ãã®å Žåãå®è¡å¯èœãªä»£æ¿ææ®µã§ãã
HOC ã®ä»£æ¿æ¡: ã¬ã³ããŒãããããšããã¯
HOC ã¯è²Žéãªãã¯ããã¯ã§ãããReact ã¯ã³ã³ããŒãã³ãéã§ããžãã¯ãå ±æããããã®ä»ã®ãã¿ãŒã³ãæäŸããŸãã
1. ã¬ã³ããŒãããã
ã¬ã³ããŒããããã¯ãã³ã³ããŒãã³ããäœããã¬ã³ããªã³ã°ããããã«äœ¿çšãã颿°ããããã§ããã³ã³ããŒãã³ããã©ãããã代ããã«ãç®çã®ã³ã³ãã³ããã¬ã³ããªã³ã°ãã颿°ããããããšããŠæž¡ããŸããã¬ã³ããŒããããã䜿çšãããšãã¬ã³ããªã³ã°ããžãã¯ãçŽæ¥å¶åŸ¡ã§ãããããHOC ãããæè»æ§ãé«ãŸããŸãã
äŸïŒ
function DataProvider(props) {
// Fetch data and pass it to the render prop
const data = fetchData();
return props.render(data);
}
// Usage:
<DataProvider render={data => (
<MyComponent data={data} />
)} />
2. ããã¯
ããã¯ã¯ã颿°ã³ã³ããŒãã³ããã React ã®ç¶æ ããã³ã©ã€ããµã€ã¯ã«æ©èœã«ãããã¯ãããããšãã§ãã颿°ã§ããReact 16.8 ã§å°å ¥ãããHOC ãŸãã¯ã¬ã³ããŒãããããããçŽæ¥çã§ç°¡æœãªæ¹æ³ã§ããžãã¯ãå ±æã§ããŸãã
äŸïŒ
import { useState, useEffect } from 'react';
function useData(url) {
const [data, setData] = useState(null);
const [loading, setLoading] = useState(true);
const [error, setError] = useState(null);
useEffect(() => {
async function fetchData() {
try {
const response = await fetch(url);
const data = await response.json();
setData(data);
setLoading(false);
} catch (error) {
setError(error);
setLoading(false);
}
}
fetchData();
}, [url]);
return { data, loading, error };
}
// Usage:
function MyComponent() {
const { data, loading, error } = useData('/api/data');
if (loading) {
return <p>Loading...</p>;
}
if (error) {
return <p>Error: {error.message}</p>;
}
return <div>{/* Render data here */}</div>;
}
ããã¯ã¯ãäžè¬ã«ãææ°ã® React éçºã§ã¯ HOC ãããåªå ãããŸããããã¯ãããžãã¯ãå ±æããããã®ããèªã¿ããããä¿å®ããããæ¹æ³ãæäŸããããã§ãããŸããHOC ã§çºçããå¯èœæ§ã®ããååã®è¡çªãããããã®åãæž¡ãã«é¢ããæœåšçãªåé¡ãåé¿ã§ããŸãã
çµè«
React é«éã³ã³ããŒãã³ãã¯ãã¯ãã¹ã»ã«ããã£ã³ã°ã»ã³ã³ãµãŒã³ã管çããã³ãŒãã®åå©çšãä¿é²ããããã®åŒ·åãªãã¿ãŒã³ã§ããHOC ã䜿çšãããšãããžãã¯ãã³ã¢ã³ã³ããŒãã³ãããåé¢ã§ãããããããã¯ãªãŒã³ã§ä¿å®ããããã³ãŒãã«ãªããŸãããã ããHOC ãè³¢æã«äœ¿çšããæœåšçãªæ¬ ç¹ã«æ³šæããããšãéèŠã§ããç¹ã«ææ°ã® React éçºã§ã¯ãã¬ã³ããŒãããããããã¯ãªã©ã®ä»£æ¿ææ®µãæ€èšããŠãã ãããåãã¿ãŒã³ã®é·æãšçæãçè§£ããããšã§ãç¹å®ã®ãŠãŒã¹ã±ãŒã¹ã«æé©ãªã¢ãããŒããéžæããã°ããŒãã«ãªèŠèŽè åãã®å ç¢ã§ã¹ã±ãŒã©ãã«ãª React ã¢ããªã±ãŒã·ã§ã³ãæ§ç¯ã§ããŸãã
HOC ããã®ä»ã®ã³ã³ããŒãã³ãåæãã¯ããã¯ãç¿åŸããããšã§ããã广ç㪠React éçºè ã«ãªããè€éã§ä¿å®å¯èœãªãŠãŒã¶ãŒã€ã³ã¿ãŒãã§ãŒã¹ãæ§ç¯ã§ããŸãã