Reactã®å®éšçããã¯`experimental_useOpaqueIdentifier`ãæ¢æ±ããŠããŒã¯IDãçæããã¢ããªã®ããã©ãŒãã³ã¹ãšã¢ã¯ã»ã·ããªãã£ãåäžãããç®çãå©ç¹ãå®çšäŸãåŠã³ãŸãã
Reactã®experimental_useOpaqueIdentifierïŒãŠããŒã¯IDçæã®è©³çŽ°è§£èª¬
é²åãç¶ããããã³ããšã³ãéçºã®äžçã«ãããŠãReactã¯éçºè ã«åçã§å¹ççãªãŠãŒã¶ãŒã€ã³ã¿ãŒãã§ãŒã¹ãæ§ç¯ããããã®åŒ·åãªããŒã«ãæäŸãç¶ããŠããŸãããã®ããŒã«ã®äžã€ãããŸã å®é𿮵éã§ã¯ãããŸããã`experimental_useOpaqueIdentifier`ã§ãããã®ããã¯ã¯ãã¢ã¯ã»ã·ããªãã£ã®åäžãç¶æ 管çãããã©ãŒãã³ã¹ã®åŒ·åãšãã£ãã¿ã¹ã¯ã«äžå¯æ¬ ãªãŠããŒã¯ãªèå¥åãçæããããã®æ°ããã¢ãããŒããæäŸããŸãããã®ã¬ã€ãã§ã¯ã`experimental_useOpaqueIdentifier`ã®è€éããæãäžãããã®æ©èœæ§ãå©ç¹ããããŠããŸããŸãªã°ããŒãã«ã³ã³ããã¹ãã§Reactãããžã§ã¯ãã«å¹æçã«å®è£ ããæ¹æ³ãæ¢ããŸãã
ãŠããŒã¯IDã®å¿ èŠæ§ãçè§£ãã
`experimental_useOpaqueIdentifier`ã®è©³çްã«å ¥ãåã«ãçŸä»£ã®Webéçºã«ãããŠãªããŠããŒã¯IDãéåžžã«éèŠãªã®ããçè§£ããããšãéèŠã§ãããŠããŒã¯IDã¯ããã€ãã®éèŠãªç®çãæãããŸãïŒ
- ã¢ã¯ã»ã·ããªãã£ïŒ IDã¯ãã©ãã«ããã©ãŒã ã³ã³ãããŒã«ã«ãªã³ã¯ãããããARIA屿§ãäœæããããã¹ã¯ãªãŒã³ãªãŒããŒã®ãããªæ¯æŽæè¡ãWebã³ã³ãã³ããæ£ç¢ºã«è§£éã衚瀺ã§ããããã«ããããã«äžå¯æ¬ ã§ããããã¯ç¹ã«é害ãæã€ãŠãŒã¶ãŒã«ãšã£ãŠéèŠã§ããããã¹ãŠã®äººã ã®å æ¬æ§ã確ä¿ããŸãã
- ç¶æ 管çïŒ ãŠããŒã¯IDã¯ãReactã¢ããªã±ãŒã·ã§ã³å ã®åã ã®ã³ã³ããŒãã³ããèŠçŽ ã®ç¶æ ãç¬èªã«èå¥ã管çããããã«äœ¿çšã§ããŸããããã¯ãè€éãªãŠãŒã¶ãŒã€ã³ã¿ãŒãã§ãŒã¹ãåçãªæŽæ°ãæ±ãå Žåã«ç¹ã«éèŠã§ãã
- ããã©ãŒãã³ã¹ïŒ ç¹å®ã®ã·ããªãªã§ã¯ããŠããŒã¯IDã¯Reactãã¬ã³ããªã³ã°ããã»ã¹ãæé©åããã®ã«åœ¹ç«ã¡ãŸããèŠçŽ ã«å®å®ããèå¥åãæäŸããããšã§ãReactã¯äžèŠãªåã¬ã³ããªã³ã°ãé¿ããç¹ã«å€§èŠæš¡ã§è€éãªã¢ããªã±ãŒã·ã§ã³ã«ãããŠããã©ãŒãã³ã¹ã®åäžã«ã€ãªãããŸãã
- çžäºéçšæ§ïŒ ãŠããŒã¯IDã¯ããµãŒãããŒãã£ã®ã©ã€ãã©ãªããã©ãŠã¶æ¡åŒµæ©èœããã®ä»ã®å€éšã³ã³ããŒãã³ããšã®ã·ãŒã ã¬ã¹ãªçµ±åãä¿é²ããŸãã
`experimental_useOpaqueIdentifier`ã®ç޹ä»
`experimental_useOpaqueIdentifier`ããã¯ã¯ããã®åã®éããçŸåšReactå ã®å®éšçãªæ©èœã§ããããã¯ãäžéæïŒopaqueïŒãã€ãŸãå éšæ§é ãéçºè ããé ãããŠãããŠããŒã¯ãªèå¥åã宣èšçã«çæããæ¹æ³ãæäŸããŸããããã«ãããReactã¯ãããã®IDãããã¯ã°ã©ãŠã³ãã§ç®¡çã»æé©åããããšãã§ããã¢ããªã±ãŒã·ã§ã³ã®ããã©ãŒãã³ã¹åäžãIDçæã®ç°¡çŽ åã«ã€ãªããå¯èœæ§ããããŸããããã¯å®éšçãªæ©èœã§ãããããå°æ¥ã®Reactã®ããŒãžã§ã³ã§ãã®åäœã倿Žãããå¯èœæ§ãããããšã«æ³šæããããšãéèŠã§ãã
以äžã«ããã®ããã¯ã®åºæ¬çãªäœ¿çšäŸã瀺ããŸãïŒ
import { experimental_useOpaqueIdentifier as useOpaqueIdentifier } from 'react';
function MyComponent() {
const uniqueId = useOpaqueIdentifier();
return (
<div>
<label htmlFor={uniqueId}>Enter your name:</label>
<input type="text" id={uniqueId} />
</div>
);
}
ãã®äŸã§ã¯ã`useOpaqueIdentifier()`ããŠããŒã¯ãªIDãçæãããããã©ãã«ãšå ¥åãã£ãŒã«ããé¢é£ä»ããããã«äœ¿çšãããŠããŸããããã¯Webã¢ã¯ã»ã·ããªãã£ã«ãããåºæ¬çãªå®è·µã§ãããã¹ã¯ãªãŒã³ãªãŒããŒããã®ä»ã®æ¯æŽæè¡ãã©ãã«ãšå¯Ÿå¿ãããã©ãŒã ã³ã³ãããŒã«ãæ£ç¢ºã«é¢é£ä»ããããããã«ããŸããããã¯ãããŸããŸãªåœãæåã®ãŠãŒã¶ãŒã«ãšã£ãŠæçã§ãã
`experimental_useOpaqueIdentifier`ã䜿çšããå©ç¹
`experimental_useOpaqueIdentifier`ããã¯ã¯ãåŸæ¥ã®IDçææ¹æ³ã«æ¯ã¹ãŠããã€ãã®å©ç¹ãæäŸããŸãïŒ
- 宣èšçã¢ãããŒãïŒ Reactã³ã³ããŒãã³ãå ã§ãŠããŒã¯IDãçæããããã®ãããã¯ãªãŒã³ã§å®£èšçãªæ¹æ³ãæäŸããŸããIDçæããžãã¯ãæåã§ç®¡çããå¿ èŠããªããªããã³ãŒãã®å¯èªæ§ãšä¿å®æ§ãåäžããŸãã
- ããã©ãŒãã³ã¹ã®æé©åïŒ Reactã¯ãããã®äžéæãªIDã®ç®¡çãæé©åããå¯èœæ§ããããã¬ã³ããªã³ã°ããã©ãŒãã³ã¹ã®åäžã«ã€ãªãããŸããããã¯ãeã³ããŒã¹ãã©ãããã©ãŒã ïŒäŸïŒç±³åœãäžåœããã©ãžã«ïŒããœãŒã·ã£ã«ã¡ãã£ã¢ã¢ããªã±ãŒã·ã§ã³ïŒäŸïŒã€ã³ããã€ã³ããã·ã¢ããã€ãžã§ãªã¢ïŒã«èŠããããããªå€§èŠæš¡ã§è€éãªã¢ããªã±ãŒã·ã§ã³ã§ç¹ã«åœ¹ç«ã¡ãŸãã
- ã¢ã¯ã»ã·ããªãã£æºæ ïŒ ARIA屿§ã®ããã®ãŠããŒã¯IDãç°¡åã«çæããã©ãã«ããã©ãŒã èŠçŽ ã«é¢é£ä»ããããšã§ããã®ããã¯ã¯ã¢ã¯ã»ã·ãã«ãªãŠãŒã¶ãŒã€ã³ã¿ãŒãã§ãŒã¹ã®æ§ç¯ã容æã«ããŸããããã¯ãå€ãã®åœã§é¢é£ããWCAGïŒWeb Content Accessibility GuidelinesïŒã®ãããªWebã¢ã¯ã»ã·ããªãã£åºæºã«æºæ ããããã«éèŠã§ãã
- ãã€ã©ãŒãã¬ãŒãã®åæžïŒ ãŠããŒã¯ãªIDæååãæåã§äœæã»ç®¡çããå¿ èŠããªããªããã³ãŒãã®éè€ããã€ã©ãŒãã¬ãŒããåæžããŸãã
å®çšçãªå¿çšãšã°ããŒãã«ãªäŸ
`experimental_useOpaqueIdentifier`ã®å®çšçãªå¿çšäŸããã°ããŒãã«ãªäŸãšãšãã«ããã€ãæ¢ã£ãŠã¿ãŸãããïŒ
1. ã¢ã¯ã»ã·ãã«ãªãã©ãŒã èŠçŽ
åºæ¬çãªäŸã§ç€ºããããã«ã`experimental_useOpaqueIdentifier`ã¯ã¢ã¯ã»ã·ãã«ãªãã©ãŒã èŠçŽ ãäœæããã®ã«æé©ã§ãã顧客ãã£ãŒãããã¯ãã©ãŒã ãªã©ãäžçäžã§äœ¿çšãããã¢ããªã±ãŒã·ã§ã³ãèããŠã¿ãŸããããããã¯å€ãã®åœã§åœ¹ç«ã¡ãŸãã
import { experimental_useOpaqueIdentifier as useOpaqueIdentifier } from 'react';
function FeedbackForm() {
const nameId = useOpaqueIdentifier();
const emailId = useOpaqueIdentifier();
const messageId = useOpaqueIdentifier();
return (
<form>
<label htmlFor={nameId}>Name:</label>
<input type="text" id={nameId} /
<br />
<label htmlFor={emailId}>Email:</label>
<input type="email" id={emailId} /
<br />
<label htmlFor={messageId}>Message:</label>
<textarea id={messageId} /
<br />
<button type="submit">Submit</button>
</form>
);
}
ãã®äŸã§ã¯ãåãã©ãŒã èŠçŽ ããŠããŒã¯ãªIDãååŸããã©ãã«ãšã®é©åãªé¢é£ä»ããä¿èšŒããã©ã®å°åïŒäŸïŒãã©ã³ã¹ãæ¥æ¬ããªãŒã¹ãã©ãªã¢ïŒã®é害ãæã€ãŠãŒã¶ãŒã§ããã©ãŒã ã«ã¢ã¯ã»ã¹ã§ããããã«ããŸãã
2. åçãªã³ã³ãã³ãã®ã¬ã³ããªã³ã°
APIããååŸããã¢ã€ãã ã®ãªã¹ããªã©ãåçã«ã³ã³ãã³ããã¬ã³ããªã³ã°ããã¢ããªã±ãŒã·ã§ã³ã§ã¯ã`experimental_useOpaqueIdentifier`ã¯ã¬ã³ããªã³ã°ãããåèŠçŽ ã«ãŠããŒã¯ãªIDãäœæããããã«éåžžã«åœ¹ç«ã¡ãŸãããã€ããã«ãããéåœãªã©ã®åœã®ãŠãŒã¶ãŒã«ååãªã¹ãã衚瀺ããeã³ããŒã¹ãµã€ããèããŠã¿ãŸããããåååãªã¹ãã«ã¯ãç¶æ 管çãšæœåšçãªã€ã³ã¿ã©ã¯ã·ã§ã³ã®ããã«ãŠããŒã¯ãªèå¥åãå¿ èŠã§ãã
import { experimental_useOpaqueIdentifier as useOpaqueIdentifier } from 'react';
function ProductList({ products }) {
return (
<ul>
{products.map(product => {
const productId = useOpaqueIdentifier();
return (
<li key={productId}>
<img src={product.imageUrl} alt={product.name} />
<h3>{product.name}</h3>
<p>{product.description}</p>
<button onClick={() => addToCart(product, productId)}>Add to Cart</button>
</li>
);
})}
</ul>
);
}
ããã§ã`useOpaqueIdentifier`ã«ãã£ãŠçæããã`productId`ã¯ãåååã¢ã€ãã ã«ãŠããŒã¯ãªããŒãæäŸãããŠãŒã¶ãŒã®å Žæãèšèªã«é¢ä¿ãªããå¹ççãªã¬ã³ããªã³ã°ãšç¶æ 管çãä¿é²ããŸãã
3. ã¢ã¯ã»ã·ããªãã£ã®ããã®ARIA屿§
`experimental_useOpaqueIdentifier`ãARIA屿§ãšå ±ã«äœ¿çšããããšã§ãããã¢ã¯ã»ã·ãã«ãªã³ã³ããŒãã³ããäœæã§ããŸããæ å ±ãµã€ãããã¬ããžããŒã¹ã§é »ç¹ã«äœ¿çšããããæãããã¿å¯èœãªããã«ãã¢ã³ãŒãã£ãªã³èŠçŽ ãèããŠã¿ãŸãããããããã¯è±åœãã¢ã«ãŒã³ãã³ãªã©ã§èŠãããããã«ãäžçäžã§å©çšãããŠããŸãã
import { experimental_useOpaqueIdentifier as useOpaqueIdentifier } from 'react';
import { useState } from 'react';
function CollapsiblePanel({ title, content }) {
const panelId = useOpaqueIdentifier();
const [isOpen, setIsOpen] = useState(false);
return (
<div>
<button
aria-controls={panelId}
aria-expanded={isOpen}
onClick={() => setIsOpen(!isOpen)}
>
{title}
</button>
<div id={panelId} hidden={!isOpen}>
{content}
</div>
</div>
);
}
ãã®ã³ãŒãäŸã¯ãã¢ã¯ã»ã·ãã«ãªæãããã¿ããã«ãäœæããŸãã`useOpaqueIdentifier`ã«ãã£ãŠçæããã`panelId`ã¯ããã¿ã³ã®`aria-controls`屿§ãšããã«ã³ã³ãã³ãã®`id`屿§ã®äž¡æ¹ã«äœ¿çšãããŸãã`aria-expanded`屿§ã¯ãããã«ã®è¡šç€ºç¶æ ããŠãŒã¶ãŒã«ç¥ãããŸããã¹ã¯ãªãŒã³ãªãŒããŒããã®ä»ã®æ¯æŽæè¡ã¯ããã®æ å ±ã䜿çšããŠããã«ã®ç¶æ ããŠãŒã¶ãŒã«å¹æçã«äŒãããã¹ãŠã®æåãå Žæã§ã®ã¢ã¯ã»ã·ããªãã£ã«ãšã£ãŠéèŠã§ãã
ãã¹ããã©ã¯ãã£ã¹ãšèæ ®äºé
`experimental_useOpaqueIdentifier`ã¯åŒ·åãªããŒã«ã§ããããã®å®è£ æã«ã¯ãã¹ããã©ã¯ãã£ã¹ãéµå®ããç¹å®ã®åŽé¢ãèæ ®ããããšãäžå¯æ¬ ã§ãïŒ
- å®éšçãªæ§è³ªïŒ ãã®ããã¯ãå®éšçã§ããããšãå¿ããªãã§ãã ããããã®APIãåäœã¯å°æ¥ã®ReactããŒãžã§ã³ã§å€æŽãããå¯èœæ§ããããŸããæŽæ°æ å ±ãç Žå£ç倿Žã«ã€ããŠã¯ãReactã®å ¬åŒããã¥ã¡ã³ãã確èªããŠãã ããã
- ã³ã³ããã¹ããéèŠïŒ `useOpaqueIdentifier`ãåŒã³åºãã³ã³ããã¹ãã¯äžå¯æ¬ ã§ãããã®ããã¯ãåŒã³åºãã³ã³ããŒãã³ããäžè²«æ§ãä¿ã€ããã«ããŠãã ããã
- é床ã®äœ¿çšãé¿ããïŒ è³¢æã«äœ¿çšããŠãã ããããã¹ãŠã®èŠçŽ ã«ãŠããŒã¯ãªIDãå¿ èŠãªããã§ã¯ãããŸãããIDãã¢ã¯ã»ã·ããªãã£ãç¶æ 管çããŸãã¯ããã©ãŒãã³ã¹ã®æé©åã«æ¬åœã«å¿ èŠãã©ãããæ€èšããŠãã ãããé床ã®äœ¿çšã¯äžå¿ èŠãªè€éããåŒãèµ·ããå¯èœæ§ããããŸãã
- ãã¹ãïŒ IDã¯äžè¬çã«æçšã§ãããç¹ã«æ¯æŽæè¡ãå®è£ ããéã«ã¯ãã¢ããªã±ãŒã·ã§ã³ã®ã¢ã¯ã»ã·ããªãã£ã培åºçã«ãã¹ãããŠãã ããããŠããŒã¯IDãæ¯æŽæè¡ãããŸãæ©èœããããã«é©åãªæ å ±ãæäŸããŠããããšã確èªããŠãã ããã
- ããã¥ã¡ã³ããŒã·ã§ã³ïŒ ç¹ã«å®éšçãªæ©èœã䜿çšããå Žåã¯ãåžžã«ã³ãŒããææžåããŠãã ãããããã¯ä»ã®éçºè ãå©ããã³ãŒãããŒã¹ãçè§£å¯èœã§ããããšãä¿èšŒããŸãã`experimental_useOpaqueIdentifier`ãã©ã®ããã«äœ¿çšããããææžåããŠãIDã®ç®çãæç¢ºã«ãªãããã«æ€èšããŠãã ããã
- ãµãŒããŒãµã€ãã¬ã³ããªã³ã°ïŒSSRïŒïŒ SSRãžã®åœ±é¿ã«æ³šæããŠãã ããããµãŒããŒãšã¯ã©ã€ã¢ã³ãã§ã¬ã³ããªã³ã°ããéã«ãIDã®ç«¶åããªãããšã確èªããŠãã ãããSSRãé¢äžããå Žåã¯ããŠããŒã¯IDãçæããæ¹æ³ãæ€èšããŠãã ããã
ä»ã®IDçææ¹æ³ãšã®æ¯èŒ
`experimental_useOpaqueIdentifier`ãä»ã®äžè¬çãªIDçææ¹æ³ãšç°¡åã«æ¯èŒããŠã¿ãŸãããïŒ
- UUIDã©ã€ãã©ãªïŒäŸïŒ`uuid`ïŒïŒ ãããã®ã©ã€ãã©ãªã¯ãæ±çšçã«äžæãªèå¥åïŒUUIDïŒãæäŸããŸããç°ãªãã»ãã·ã§ã³ãç°å¢ã«ããã£ãŠçã®ãŠããŒã¯ãã¹ãå¿ èŠãªç¶æ³ã«é©ããŠããŸãã`experimental_useOpaqueIdentifier`ã¯åäžã®Reactã¢ããªã±ãŒã·ã§ã³å ã§ã¯ååãªå Žåãå€ãã§ãããUUIDã¯ã°ããŒãã«ã«ãŠããŒã¯ãªIDãæäŸã§ããŸãã
- ã¿ã€ã ã¹ã¿ã³ãããŒã¹ã®IDïŒ ã¿ã€ã ã¹ã¿ã³ãã䜿çšããŠçæãããIDã¯æ©èœããŸãããè€æ°ã®èŠçŽ ãåæã«äœæãããå Žåã«ã¯å¶éããããŸãããããã¯`experimental_useOpaqueIdentifier`ã䜿çšãããããä¿¡é Œæ§ãäœãã§ãã
- æåã§ã®IDçæïŒ æåã§IDãäœæããã®ã¯é¢åã§ãšã©ãŒãçºçãããããªããŸããéçºè ã¯IDã®äžææ§ãæ éã«ç®¡çããå¿ èŠããããŸãã`experimental_useOpaqueIdentifier`ã¯ãã®ããã»ã¹ãç°¡çŽ åããããç°¡æœã§å®£èšçãªã¢ãããŒããæäŸããŸãã
ã°ããŒãã«ãªåœ±é¿ãšåœéåïŒi18nïŒã»å°ååïŒl10nïŒã«é¢ããèæ ®äºé
ã°ããŒãã«ãªãªãŒãã£ãšã³ã¹åãã«Webã¢ããªã±ãŒã·ã§ã³ãéçºããå ŽåãåœéåïŒi18nïŒãšå°ååïŒl10nïŒã¯éåžžã«éèŠã§ãã`experimental_useOpaqueIdentifier`ã¯ãã¢ã¯ã»ã·ããªãã£ãåäžãããããšã§éæ¥çã«i18n/l10nãæ¯æŽããã¢ããªã±ãŒã·ã§ã³ãäžçäžã®äººã ã«ãšã£ãŠãã䜿ããããããŸãã以äžã®ç¹ãèæ ®ããŠãã ããïŒ
- ã¢ã¯ã»ã·ããªãã£ãšç¿»èš³ïŒ é©åãªIDã§ã³ã³ããŒãã³ããã¢ã¯ã»ã·ãã«ã«ããããšã¯ã翻蚳ã«ãšã£ãŠããéèŠã§ããã©ãã«ãé¢é£ããèŠçŽ ãšæ£ããé¢é£ä»ããããŠããããšã確èªããŠãã ããã
- å³ããå·Šãžèšè¿°ããïŒRTLïŒèšèªïŒ UIãRTLèšèªã«å¯Ÿå¿ããããã«èšèšãããã¢ã¯ã»ã·ãã«ãªã³ãŒãããããã®ç¶æ³ã§ã广çã«æ©èœããããšã確èªããŠãã ãããARIA屿§ãšãŠããŒã¯IDã®é©åãªäœ¿çšã¯ãRTLãã¶ã€ã³ããµããŒãããŸãã
- æåãšã³ã³ãŒãã£ã³ã°ïŒ ã¢ããªã±ãŒã·ã§ã³ãç°ãªãæåã»ãããæ£ããåŠçããããšã確èªããŠãã ããã`experimental_useOpaqueIdentifier`ã«ãã£ãŠçæããããŠããŒã¯IDã¯ãéåžžãšã³ã³ãŒãã£ã³ã°ã®åé¡ã¯ãããŸããã
- æåçãªé æ ®ïŒ ãŠãŒã¶ãŒã€ã³ã¿ãŒãã§ãŒã¹ãèšèšããéã«ã¯ãæåçãªéããèæ ®ããŠãã ãããã¿ãŒã²ãããªãŒãã£ãšã³ã¹ã«é©ããèšèªãèšå·ããã¶ã€ã³ã䜿çšããŠãã ããã
çµè«
`experimental_useOpaqueIdentifier`ã¯ãReactã§ãŠããŒã¯ãªIDãçæããããã®äŸ¡å€ããã¢ãããŒããæäŸããç¹ã«ã¢ã¯ã»ã·ããªãã£ã®åäžãšããã©ãŒãã³ã¹ã®åäžã«åœ¹ç«ã¡ãŸãããã®å®éšçãªæ©èœãåãå ¥ããããšã§ãéçºè ã¯ããå ç¢ã§ãã¢ã¯ã»ã·ãã«ã§ãå¹ççãªReactã¢ããªã±ãŒã·ã§ã³ãæ§ç¯ã§ããŸãããã®ããã¯ã®å®éšçãªæ§è³ªãå¿ããã«ãåžžã«ã³ãŒããæ³šææ·±ããã¹ãããŠãã ãããReactãé²åããã«ã€ããŠãææ°ã®ã¢ããããŒãããã¹ããã©ã¯ãã£ã¹ã«ã€ããŠã®æ å ±ãåžžã«ææ¡ããŠãããŸããããããã«ãããã°ããŒãã«ãªéçºæŽ»åã«ãããŠ`experimental_useOpaqueIdentifier`ã®åã广çã«æŽ»çšããããšãã§ããŸãã
ãã®èšäºã§è°è«ãããæŠå¿µã¯ãå Žæãèæ¯ã«é¢ä¿ãªããäžçäžã®éçºè ã«é©çšå¯èœã§ããç®æšã¯ãå æ¬æ§ãè²ã¿ã誰ããã°ããŒãã«ãªãŠã§ãç°å¢ã«åå ã§ããããŒã«ãæäŸããããšã§ããããããŒã³ãŒãã£ã³ã°ïŒ