Reactã®createElementã®å æ¬çãªã¬ã€ããåçãªUIãæ§ç¯ããããã®äœ¿çšæ³ãå©ç¹ãé«åºŠãªæ§æãã¯ããã¯ã解説ããŸãã
React createElement: ããã°ã©ããã£ãã¯ãªèŠçŽ ã®äœæãšæ§æ
ãŠãŒã¶ãŒã€ã³ã¿ãŒãã§ãŒã¹ãæ§ç¯ããããã®åŒ·åãªJavaScriptã©ã€ãã©ãªã§ããReactã¯ãUIèŠçŽ ãäœæããã³ç®¡çããããã®ããã€ãã®æ¹æ³ãæäŸããŸããJSX (JavaScript XML) ã¯Reactã³ã³ããŒãã³ããå®çŸ©ããããã«æãäžè¬çã«äœ¿çšãããæ§æã§ãããReact.createElementãçè§£ããããšã¯ãReactãå
éšã§ã©ã®ããã«æ©èœããããææ¡ããããã®åºæ¬ã§ãããã®èšäºã§ã¯React.createElementãæãäžãããã®ç®çãäœ¿çšæ³ãããã³èŠçŽ æ§æã®é«åºŠãªãã¯ããã¯ãæ¢ããŸããåçã§è€éãªUIãæ§ç¯ããäžã§ã®ãã®å€æ§æ§ã説æããããã«ãå®è·µçãªäŸãåãäžããŸãã
React.createElementãšã¯ïŒ
React.createElementã¯ãReactã©ã€ãã©ãªå
ã§ReactèŠçŽ ãäœæããããã«äœ¿çšããã颿°ã§ãããããã®èŠçŽ ã¯ãç»é¢ã«è¡šç€ºãããã¹ããã®ã軜éãã€äžå€ã«èšè¿°ãããã®ã§ããReactãå®éã®DOMïŒDocument Object ModelïŒãæ§ç¯ããã³æŽæ°ããããã«äœ¿çšããèšèšå³ãšèããŠãã ãããJSXã¯ã³ã³ããŒãã³ãå®çŸ©ãããèªã¿ãããããããã®ã·ã³ã¿ãã¯ã¹ã·ã¥ã¬ãŒã§ããããã«ãããã»ã¹äžã«æçµçã«ã¯React.createElementã®åŒã³åºãã«å€æãããŸãã
åºæ¬çã«ãReact.createElementã¯3ã€ã®äž»èŠãªåŒæ°ãåããŸãïŒ
- Type: HTMLã¿ã°åïŒäŸïŒ'div', 'p', 'button'ïŒã衚ãæååããŸãã¯Reactã³ã³ããŒãã³ãã
- Props: èŠçŽ ãŸãã¯ã³ã³ããŒãã³ãã«æž¡ãããããããã£ïŒå±æ§ïŒãå«ããªããžã§ã¯ãïŒäŸïŒ
{ className: 'my-class', onClick: handleClick }ïŒã - Children: èŠçŽ å ã«ã¬ã³ããªã³ã°ããã1ã€ä»¥äžã®åèŠçŽ ãŸãã¯ããã¹ãããŒããåäžã®èŠçŽ ãæååããŸãã¯èŠçŽ ã®é åãæå®ã§ããŸãã
ãã®é¢æ°ã¯ReactèŠçŽ ãè¿ããŸããããã¯èŠçŽ ã®åãããããã£ãåã«é¢ããæ å ±ãæã€ãã¬ãŒã³ãªJavaScriptãªããžã§ã¯ãã§ãããã®ãªããžã§ã¯ãã¯ãReactã®å調æŽã¢ã«ãŽãªãºã ã«ãã£ãŠDOMãå¹ççã«æŽæ°ããããã«äœ¿çšãããŸãã
ãªãReact.createElementãçŽæ¥äœ¿çšããã®ãïŒ
JSXã¯ãã®å¯èªæ§ã®é«ãããReactã³ã³ããŒãã³ããå®çŸ©ããéã«å¥œãŸããæ¹æ³ã§ãããReact.createElementãçŽæ¥äœ¿çšããããšãæçãªã·ããªãªãååšããŸãïŒ
- åçãªèŠçŽ äœæïŒ å®è¡æã®æ¡ä»¶ãããŒã¿ã«åºã¥ããŠèŠçŽ ãäœæããå¿
èŠãããå Žåã
React.createElementã¯ããã°ã©ã ã§èŠçŽ ãæ§ç¯ããããã®æè»ãªæ¹æ³ãæäŸããŸããããã¯ãèšå®ããŒã¿ããŠãŒã¶ãŒå ¥åã«åºã¥ããŠUIèŠçŽ ãçæããå Žåã«ç¹ã«åœ¹ç«ã¡ãŸãã - éJSXç°å¢ã§ã®äœæ¥ïŒ äžéšã®ã¬ã¬ã·ãŒãããžã§ã¯ããç¹å®ã®ãã«ãèšå®ã§ã¯ãJSXãããã«å©çšã§ããªãå ŽåããããŸãã
React.createElementã䜿çšãããšãJSXãã©ã³ã¹ãã€ã©ã«äŸåããã«Reactã³ã³ããŒãã³ããæ§ç¯ã§ããŸãã - Reactã®å
éšçè§£ïŒ
React.createElementãçŽæ¥æ±ãããšã§ãReactãèŠçŽ ã®äœæãšæ§æãã©ã®ããã«åŠçãããã«ã€ããŠããæ·±ãçè§£ãåŸãããŸããããã«ãããJSXãšåºç€ãšãªãReact APIãšã®é¢ä¿ãæç¢ºã«ãªããŸãã - ã«ã¹ã¿ã æœè±¡åã®æ§ç¯ïŒ è€éãªUIãã¿ãŒã³ãæœè±¡åããã«ã¹ã¿ã ãã«ããŒé¢æ°ãã©ã€ãã©ãªãäœæããããšããããŸãã
React.createElementã䜿çšãããšããããã®æœè±¡åãããã°ã©ã ã§æ§ç¯ã§ããŸãã
React.createElementã®åºæ¬çãªäœ¿çšæ³
ç°¡åãªäŸããå§ããŸãããïŒ
const element = React.createElement(
'h1',
{ className: 'greeting' },
'Hello, world!'
);
// ããã¯ä»¥äžãšåçã§ãïŒ
// Hello, world!
ãã®äŸã§ã¯ãã¯ã©ã¹åããgreetingãã§ããã¹ãã³ã³ãã³ãããHello, world!ãã®<h1>èŠçŽ ãäœæããŠããŸããçµæãšããŠåŸãããelement倿°ã¯ãReactãDOMã«ã¬ã³ããªã³ã°ã§ããReactèŠçŽ ãªããžã§ã¯ããä¿æããŸãã
次ã«ãã¹ããããèŠçŽ ã®äŸã瀺ããŸãïŒ
const element = React.createElement(
'div',
{ className: 'container' },
React.createElement(
'p',
null,
'This is a paragraph inside a div.'
)
);
// ããã¯ä»¥äžãšåçã§ãïŒ
// This is a paragraph inside a div.
ãã®ã±ãŒã¹ã§ã¯ã<p>èŠçŽ ãå«ã<div>èŠçŽ ãäœæããŠããŸãã2çªç®ã®React.createElementåŒã³åºããæåã®åŒã³åºãã®åãšããŠæž¡ããããã¹ããããæ§é ãäœæãããŸãã
Propsã䜿çšããèŠçŽ ã®äœæ
Propsã¯ãReactèŠçŽ ãã³ã³ããŒãã³ãã«ããŒã¿ãèšå®ãªãã·ã§ã³ãæž¡ãããã«äœ¿çšãããŸããReact.createElementã®2çªç®ã®åŒæ°ã¯ãpropsãå«ããªããžã§ã¯ãã§ãã
const button = React.createElement(
'button',
{ onClick: () => alert('Button clicked!'), className: 'primary-button' },
'Click Me'
);
// ããã¯ä»¥äžãšåçã§ãïŒ
//
ãã®äŸã§ã¯ãonClickã€ãã³ããã³ãã©ãšclassNameãæã€<button>èŠçŽ ãäœæããŠããŸãããã¿ã³ãã¯ãªãã¯ããããšãalert颿°ãå®è¡ãããŸãã
è€æ°ã®åãæã€èŠçŽ ã®äœæ
React.createElementã®3çªç®ã®åŒæ°ã«ã¯ãåäžã®åãæååããŸãã¯åã®é
åãæå®ã§ããŸããããã«ãããè€æ°ã®åèŠçŽ ãæã€è€éãªèŠçŽ æ§é ãäœæã§ããŸãã
const list = React.createElement(
'ul',
null,
React.createElement('li', null, 'Item 1'),
React.createElement('li', null, 'Item 2'),
React.createElement('li', null, 'Item 3')
);
// ããã¯ä»¥äžãšåçã§ãïŒ
//
// - Item 1
// - Item 2
// - Item 3
//
// ãŸãã¯ãã¢ã€ãã æ°ãå€ãå Žåã«å¯èªæ§ãé«ããããã«é
åã䜿çš
const listItems = ['Item 1', 'Item 2', 'Item 3'].map(item => React.createElement('li', null, item));
const listFromArray = React.createElement('ul', null, listItems);
ããã§ã¯ã3ã€ã®<li>åèŠçŽ ãæã€<ul>èŠçŽ ãäœæããŠããŸãã<li>èŠçŽ ã«å¯ŸããåReact.createElementåŒã³åºãã¯ã<ul>èŠçŽ ã«å¯ŸããReact.createElementåŒã³åºãã«å¥ã
ã®åŒæ°ãšããŠæž¡ãããŸãã2çªç®ã®äŸã¯ã.map()颿°ã䜿çšããŠãã¢ã€ãã æ°ãå€ãå Žåã«å¯èªæ§ãé«ããããã«èŠçŽ ã®é
åãäœæããæ¹æ³ã瀺ããŠããŸãã
ã³ã³ããŒãã³ãã§ã®React.createElementã®äœ¿çš
React.createElementã¯ãã«ã¹ã¿ã Reactã³ã³ããŒãã³ãã®ã€ã³ã¹ã¿ã³ã¹ãäœæããããã«ã䜿çšã§ããŸããReact.createElementã®æåã®åŒæ°ã¯ãã³ã³ããŒãã³ãã®ã¯ã©ã¹ãŸãã¯é¢æ°ã§ãã
function MyComponent(props) {
return React.createElement(
'div',
{ className: 'my-component' },
`Hello, ${props.name}!`
);
}
const element = React.createElement(
MyComponent,
{ name: 'World' }
);
// ããã¯ä»¥äžãšåçã§ãïŒ
//
ãã®äŸã§ã¯ãnameããããã£ãåãå
¥ããMyComponentãšããåçŽãªé¢æ°ã³ã³ããŒãã³ããå®çŸ©ããŠããŸããæ¬¡ã«ãReact.createElementã䜿çšããŠMyComponentã®ã€ã³ã¹ã¿ã³ã¹ãäœæããnameããããã£ãæž¡ããŸããReactããã®èŠçŽ ãã¬ã³ããªã³ã°ãããšãMyComponent颿°ãåŒã³åºããããã®çµæã衚瀺ãããŸãã
é«åºŠãªæ§æãã¯ããã¯
React.createElementã¯é«åºŠãªæ§æãã¯ããã¯ãå¯èœã«ããåå©çšå¯èœã§æè»ãªUIæ§é ãäœæããããšãã§ããŸãã
æ¡ä»¶ä»ãã¬ã³ããªã³ã°
æ¡ä»¶æã䜿çšããŠãç¹å®ã®æ¡ä»¶ã«åºã¥ããŠç°ãªãèŠçŽ ãã¬ã³ããªã³ã°ã§ããŸãã
function Message(props) {
const { isLoggedIn } = props;
return React.createElement(
'div',
null,
isLoggedIn
? React.createElement('p', null, 'Welcome back!')
: React.createElement('p', null, 'Please log in.')
);
}
const element = React.createElement(
Message,
{ isLoggedIn: true }
);
ãã®äŸã§ã¯ãMessageã³ã³ããŒãã³ãã¯isLoggedInããããã£ã«åºã¥ããŠç°ãªãã¡ãã»ãŒãžãã¬ã³ããªã³ã°ããŸããisLoggedInãtrueã®å ŽåããWelcome back!ããšè¡šç€ºãããããã§ãªãå Žåã¯ãPlease log in.ããšè¡šç€ºãããŸãã
ãªã¹ãã®ã¬ã³ããªã³ã°
é
åã®ãããã³ã°ãšReact.createElementã䜿çšããŠãèŠçŽ ã®ãªã¹ããåçã«ã¬ã³ããªã³ã°ã§ããŸãã
function ItemList(props) {
const { items } = props;
const listItems = items.map((item) =>
React.createElement('li', { key: item.id }, item.name)
);
return React.createElement('ul', null, listItems);
}
const items = [
{ id: 1, name: 'Item A' },
{ id: 2, name: 'Item B' },
{ id: 3, name: 'Item C' },
];
const element = React.createElement(
ItemList,
{ items: items }
);
ãã®äŸã§ã¯ãItemListã³ã³ããŒãã³ãã¯itemsããããã£ã«åºã¥ããŠã¢ã€ãã ã®ãªã¹ããã¬ã³ããªã³ã°ããŸããmap颿°ã䜿çšããŠ<li>èŠçŽ ã®é
åãäœæããããããã«äžæã®ããŒãšã¢ã€ãã åãèšå®ããŸãã
é«éã³ã³ããŒãã³ã
é«éã³ã³ããŒãã³ãïŒHOCïŒã¯ãã³ã³ããŒãã³ããåŒæ°ãšããŠåãåããæ°ãã匷åãããã³ã³ããŒãã³ããè¿ã颿°ã§ããReact.createElementã䜿çšããŠãã³ã³ããŒãã³ãã®åäœãã¬ã³ããªã³ã°ã倿ŽããHOCãäœæã§ããŸãã
function withLogging(WrappedComponent) {
return function(props) {
console.log('Rendering:', WrappedComponent.name);
return React.createElement(
WrappedComponent,
props
);
};
}
function MyComponent(props) {
return React.createElement(
'div',
null,
`Hello, ${props.name}!`
);
}
const EnhancedComponent = withLogging(MyComponent);
const element = React.createElement(
EnhancedComponent,
{ name: 'World' }
);
ãã®äŸã§ã¯ãwithLogging HOCãMyComponentã³ã³ããŒãã³ããã©ããããã¬ã³ããªã³ã°ããåã«ã³ã³ãœãŒã«ã«ã¡ãã»ãŒãžãèšé²ããŸããããã«ãããå
ã®ã³ãŒãã倿Žããããšãªããã³ã³ããŒãã³ãã«ãã®ã³ã°ããã®ä»ã®æ©èœã远å ã§ããŸãã
å®è·µçãªäŸãšãŠãŒã¹ã±ãŒã¹
React.createElementãç¹ã«åœ¹ç«ã€ããã€ãã®å®è·µçãªäŸãèããŠã¿ãŸãããã
åçãªãã©ãŒã çæ
ãã©ãŒã ãã£ãŒã«ãããã®åãããã³æ€èšŒã«ãŒã«ãå®çŸ©ããèšå®ãªããžã§ã¯ãã«åºã¥ããŠãã©ãŒã ãçæããå¿
èŠããããšæ³åããŠãã ãããReact.createElementã䜿çšããŠããã©ãŒã èŠçŽ ãåçã«äœæã§ããŸãã
const formConfig = [
{ type: 'text', name: 'firstName', label: 'First Name' },
{ type: 'email', name: 'email', label: 'Email' },
{ type: 'password', name: 'password', label: 'Password' },
];
function DynamicForm() {
const formElements = formConfig.map((field) =>
React.createElement(
'div',
{ key: field.name, className: 'form-group' },
React.createElement('label', { htmlFor: field.name }, field.label),
React.createElement('input', {
type: field.type,
name: field.name,
id: field.name,
className: 'form-control',
})
)
);
return React.createElement(
'form',
null,
formElements,
React.createElement(
'button',
{ type: 'submit', className: 'btn btn-primary' },
'Submit'
)
);
}
const element = React.createElement(DynamicForm);
ãã®äŸã§ã¯ãDynamicFormã³ã³ããŒãã³ãã¯formConfigé
åã«åºã¥ããŠãã©ãŒã ãã£ãŒã«ããçæããŸããé
åãå埩åŠçããåãã£ãŒã«ãã«å¯ŸããŠ<div>ã<label>ãããã³<input>èŠçŽ ãäœæããŸãããã®ã¢ãããŒãã«ããããã©ãŒã èŠçŽ ãããŒãã³ãŒãã£ã³ã°ããããšãªããããŸããŸãªããŒã¿æ§é ã«é©å¿ãããã©ãŒã ãäœæã§ããŸãã
CMSããã®ã³ã³ãã³ãã®ã¬ã³ããªã³ã°
å€ãã®ã³ã³ãã³ã管çã·ã¹ãã ïŒCMSïŒã¯ãã³ã³ãã³ããHTMLã§ã¯ãªãæ§é åããŒã¿åœ¢åŒïŒäŸïŒJSONïŒã§è¿ããŸããReact.createElementã䜿çšããŠããã®ã³ã³ãã³ããReactã³ã³ããŒãã³ãã«ã¬ã³ããªã³ã°ã§ããŸãã
const content = {
type: 'div',
props: { className: 'article' },
children: [
{
type: 'h2',
props: null,
children: 'Article Title',
},
{
type: 'p',
props: null,
children: 'This is the article content.',
},
{
type: 'ul',
props: null,
children: [
{
type: 'li',
props: null,
children: 'List Item 1',
},
{
type: 'li',
props: null,
children: 'List Item 2',
},
],
},
],
};
function renderContent(data) {
if (typeof data === 'string') {
return data;
}
const { type, props, children } = data;
if (Array.isArray(children)) {
return React.createElement(
type,
props,
children.map(renderContent)
);
} else {
return React.createElement(type, props, renderContent(children));
}
}
const element = renderContent(content);
ãã®äŸã§ã¯ãrenderContent颿°ãcontentãªããžã§ã¯ããååž°çã«èµ°æ»ããtypeãpropsãããã³childrenããããã£ã«åºã¥ããŠReactèŠçŽ ãäœæããŸããããã«ãããCMSãä»ã®ããŒã¿ãœãŒã¹ããã®åçãªã³ã³ãã³ããã¬ã³ããªã³ã°ã§ããŸãã
UIã©ã€ãã©ãªã®æ§ç¯
UIã©ã€ãã©ãªãã³ã³ããŒãã³ããã¬ãŒã ã¯ãŒã¯ãéçºããéãéçºè
ãèšå®ãªããžã§ã¯ãã䜿çšããŠã³ã³ããŒãã³ããå®çŸ©ããæ¹æ³ãæäŸãããå ŽåããããŸããReact.createElementã䜿çšããŠããã®èšå®ã«åºã¥ããŠã³ã³ããŒãã³ããäœæã§ããŸãã
const componentConfig = {
name: 'MyButton',
props: {
className: 'my-button',
onClick: () => alert('Button clicked!'),
},
children: 'Click Me',
};
function createComponent(config) {
return function() {
return React.createElement(
'button',
config.props,
config.children
);
};
}
const MyButton = createComponent(componentConfig);
const element = React.createElement(MyButton);
ãã®äŸã§ã¯ãcreateComponent颿°ã¯èšå®ãªããžã§ã¯ããåãåãããã®èšå®ã«åºã¥ããŠ<button>èŠçŽ ãã¬ã³ããªã³ã°ããReactã³ã³ããŒãã³ããè¿ããŸããããã«ããã宣èšçãªèšå®ãã©ãŒãããã䜿çšããŠã³ã³ããŒãã³ããå®çŸ©ã§ããŸãã
React.createElementã䜿çšããããã®ãã¹ããã©ã¯ãã£ã¹
- å¯èœãªå Žåã¯JSXã䜿çšããïŒ JSXã¯ãReactã³ã³ããŒãã³ããå®çŸ©ããããã®ããèªã¿ããããä¿å®ããããæ§æãæäŸããŸãã
React.createElementã¯ãåçã«èŠçŽ ãäœæããå¿ èŠãããå ŽåããéJSXç°å¢ã§äœæ¥ããå Žåã«ã®ã¿äœ¿çšããŠãã ããã - ã³ã³ããŒãã³ããå°ãããçŠç¹ãçµããããã®ã«ä¿ã€ïŒ è€éãªUIããããå°ããåå©çšå¯èœãªã³ã³ããŒãã³ãã«åå²ããŸããããã«ãããã³ãŒãã®çè§£ããã¹ããä¿å®ã容æã«ãªããŸãã
- èšè¿°çãªããããã£åã䜿çšããïŒ ããããã£ã®ç®çãšæåŸ ãããå€ãæç¢ºã«ç€ºãããããã£åãéžæããŸããããã«ãããã³ã³ããŒãã³ããèªå·±ææžåããããããªããŸãã
- ããããã£ã®æ€èšŒã«PropTypesã䜿çšããïŒ PropTypesã䜿çšãããšãã³ã³ããŒãã³ãã®ããããã£ã«æåŸ ãããããŒã¿åãæå®ã§ããŸããããã«ããããšã©ãŒãæ©æã«çºèŠããã³ã³ããŒãã³ãã®ä¿¡é Œæ§ãåäžãããããšãã§ããŸãã
- ãªã¹ãã¢ã€ãã ã«ã¯ããŒã䜿çšããïŒ èŠçŽ ã®ãªã¹ããã¬ã³ããªã³ã°ããéã«ã¯ãåã¢ã€ãã ã«äžæã®
keyããããã£ãæäŸããŸããããã«ããããªã¹ãã倿Žããããšãã«Reactãå¹ççã«DOMãæŽæ°ã§ããŸãã - é床ãªãã¹ããé¿ããïŒ æ·±ããã¹ããããèŠçŽ æ§é ã¯ãã³ãŒãã®èªã¿åãããããã°ãå°é£ã«ããå¯èœæ§ããããŸããã³ã³ããŒãã³ãéå±€ãã§ããã ããã©ããã«ããããã«åªããŠãã ããã
- ã³ã³ããŒãã³ããææžåããïŒ ã³ã³ããŒãã³ãã®ç®çãããããã£ãäœ¿çšæ³ãªã©ã®èª¬æãå«ããæç¢ºã§ç°¡æœãªããã¥ã¡ã³ããæäŸããŠãã ããã
çµè«
React.createElementã¯Reactã©ã€ãã©ãªã®åºæ¬çãªéšåã§ãããUIèŠçŽ ãããã°ã©ã ã§äœæããã³æ§æããæ¹æ³ãæäŸããŸããReactã³ã³ããŒãã³ããå®çŸ©ããéã«ã¯JSXã奜ãŸããæ§æã§ãããReact.createElementãçè§£ããããšã¯ãReactãå
éšã§ã©ã®ããã«æ©èœããããææ¡ããåçã§è€éãªUIãæ§ç¯ããããã«äžå¯æ¬ ã§ããReact.createElementãç¿åŸããããšã§ãé«åºŠãªæ§æãã¯ããã¯ãè§£æŸããåå©çšå¯èœã§æè»ããã€ä¿å®ããããReactã¢ããªã±ãŒã·ã§ã³ãäœæã§ããŸããåçãªãã©ãŒã çæããCMSã®ã³ã³ãã³ãã¬ã³ããªã³ã°ãŸã§ãReact.createElementã¯å¹
åºãUIãœãªã¥ãŒã·ã§ã³ãæ§ç¯ããããã®åŒ·åãªããŒã«ãæäŸããŸãããã®å€æ©èœãªé¢æ°ã§å¯èœæ§ãæ¢æ±ããReactéçºã¹ãã«ãåäžãããŸãããã