JavaScriptã®ãªãã·ã§ãã«ãã§ã€ãã³ã°ä»£å ¥æŒç®åïŒ?.=ïŒã䜿ããæªå®çŸ©ã®å¯èœæ§ããããªããžã§ã¯ãã«å®å šã«ããããã£ãèšå®ããæ¹æ³ãåŠã³ãŸããããäžè¬çãªãšã©ãŒãåé¿ããã³ãŒãã®å¯èªæ§ãé«ããŸãã
JavaScriptã®ãªãã·ã§ãã«ãã§ã€ãã³ã°ä»£å ¥æŒç®åïŒå®å šãªããããã£èšå®
JavaScriptã¯ãããã³ããšã³ããšããã¯ãšã³ãã®äž¡æ¹ã§Webéçºã«å¹ åºã䜿çšãããã匷åã§æ±çšæ§ã®é«ãèšèªã§ãããã®åŒ·ã¿ã®äžã€ã¯ãè€éãªããŒã¿æ§é ãæ±ããæ§ã ãªAPIãšé£æºã§ããèœåã«ãããŸããããããç¹ã«å€éšãœãŒã¹ããã®ããŒã¿ãæ±ãå Žåããã¹ãããããªããžã§ã¯ããããããã£ãæ±ãéã«ã¯ã泚æãæ ããšãšã©ãŒã«ã€ãªããããšããããŸããå¿ãŸããããCannot read properties of undefined (reading 'propertyName')ããšãããšã©ãŒã¯ãå€ãã®JavaScriptéçºè ã«ãšã£ãŠããªãã¿ã®æµã§ãã
幞ããªããšã«ãçŸä»£ã®JavaScriptã«ã¯ãããã®åé¡ã軜æžããããã®ããŒã«ãçšæãããŠããŸãããã®ããã°èšäºã§ã¯ããã®ããŒã«ã®äžã€ã§ãããªãã·ã§ãã«ãã§ã€ãã³ã°ä»£å
¥æŒç®åïŒ?.=ïŒã«ã€ããŠè©³ãã解説ããŸãããããäœã§ããããã©ã®ããã«æ©èœãããããããŠãããã³ãŒãã®å®å
šæ§ãšå¯èªæ§ãããã«å€§å¹
ã«åäžãããããæ¢ããŸãããã®æè¡ã¯äžçäžã®éçºè
ã«ãšã£ãŠæçã§ãããããå
ç¢ãªã¢ããªã±ãŒã·ã§ã³ãå¯èœã«ããŸãã
åé¡ã®çè§£ïŒãã¹ããããããããã£ã®å±éºæ§
äžè¬çãªã·ããªãªãèããŠã¿ãŸããããAPIããããŒã¿ãååŸããŠãããšããŸãããããããäœæã®ãããªãã¹ããããæ å ±ãæã€ãŠãŒã¶ãŒãããã¡ã€ã«ã§ããããŒã¿ã¯æ¬¡ã®ããã«ãªããããããŸããïŒ
const user = {
name: 'Alice',
address: {
street: '123 Main St',
city: 'Anytown',
country: 'USA'
}
};
ããŠããŠãŒã¶ãŒã®ã»ã«ã³ããªã¢ãã¬ã¹ãèšå®ããå¿ èŠããããšæ³åããŠãã ãããããããaddressãªããžã§ã¯ããåžžã«ååšãããšã¯éããŸãããæ éãªãã§ãã¯ãªãã«ãæªå®çŸ©ã®å¯èœæ§ããããªããžã§ã¯ãã«çŽæ¥ããããã£ãèšå®ããããšãããšããšã©ãŒãçºçããå¯èœæ§ããããŸãã以äžã«åé¡ã®ããäŸã瀺ããŸãïŒ
// This can throw an error if user.address is undefined.
user.address.secondaryAddress = {
street: '456 Oak Ave',
city: 'Othertown',
country: 'USA'
};
ããuser.addressãundefinedã®å Žåãååšããªããã®ïŒsecondaryAddressïŒã®ããããã£ã«ã¢ã¯ã»ã¹ããããšãããããã³ãŒãã¯ãCannot read properties of undefinedããšã©ãŒãã¹ããŒããŸããã°ããŒãã«ãªæèã§ã¯ãããã¯æ§ã
ãªå°åã§éçºãããAPIããããŒã¿ãåä¿¡ããéã«ããããåé¡ã§ããããã¯ããã«ãã©ã¹ãã¬ãŒã·ã§ã³ã®åå ãšãªãã现å¿ã®ãšã©ãŒãã³ããªã³ã°ãå¿
èŠã«ãªããŸãã
åŸæ¥ã®è§£æ±ºçãšãã®æ¬ ç¹
ãªãã·ã§ãã«ãã§ã€ãã³ã°ä»£å ¥æŒç®åãç»å Žããåãéçºè ã¯ãããã®ç¶æ³ãåŠçããããã«ããã€ãã®ãã¯ããã¯ã«é Œã£ãŠããŸããããããããããã®æ¹æ³ã¯ãã°ãã°ãããåé·ã§èªã¿ã«ããã³ãŒãã«ã€ãªãããŸããã
1. ãã¹ããããæ¡ä»¶ãã§ãã¯ïŒifæïŒ
äžã€ã®ã¢ãããŒãã¯ããã¹ããããifæãäžé
æŒç®åã䜿ã£ãŠãã¢ã¯ã»ã¹ã詊ã¿ãåã«åããããã£ã®ååšããã§ãã¯ããããšã§ããããã¯ãç¹ã«æ·±ããã¹ãããããªããžã§ã¯ãã®å Žåãéåžžã«é¢åã«ãªãããšããããŸãã
if (user && user.address) {
user.address.secondaryAddress = {
street: '456 Oak Ave',
city: 'Othertown',
country: 'USA'
};
}
ããã¯æ©èœããŸãããããªãã®å®åæã远å ãããã³ãŒãã®èªã¿æžããä¿å®ãé£ãããªãå¯èœæ§ããããŸãããŸããã¯ãªãŒã³ã§ç°¡æœãªã³ãŒããæžãããšãé£ãããªããŸãããã®ã¢ãããŒãã¯ãç¹ã«éçºè ã®çµéšã¬ãã«ãç°ãªãã°ããŒãã«ãããžã§ã¯ãã«ãããŠãããŒã å šäœã®çç£æ§ã®ããã«ããã¯ã«ãªãå¯èœæ§ããããŸãã
2. è«çANDïŒ&&ïŒæŒç®å
ããäžã€ã®ãã¯ããã¯ã¯ãè«çANDæŒç®åïŒ&&ïŒã䜿çšããŠãããããã£ãæªå®çŸ©ã®å Žåã«è©äŸ¡ãã·ã§ãŒããµãŒããããããããšã§ãã
user.address && (user.address.secondaryAddress = {
street: '456 Oak Ave',
city: 'Othertown',
country: 'USA'
});
ããã¯ãã¹ããããifæããã¯å°ãç°¡æœã§ããããŸã å¶éããããŸããã³ãŒãã®ãããã°ãé£ãããªãå¯èœæ§ãããã代å
¥ãããŸãæç¢ºã§ã¯ãããŸããã
3. ããã©ã«ãå€ãšNullåäœæŒç®åïŒ??ïŒ
代å
¥ã®åé¡ã«çŽæ¥å¯ŸåŠããããã§ã¯ãããŸããããNullåäœæŒç®åïŒ??ïŒã§ããã©ã«ãå€ã䜿çšãããšãæ¬ èœããŠããå¯èœæ§ã®ããããããã£ã«ãã©ãŒã«ããã¯å€ãæäŸããã®ã«åœ¹ç«ã¡ãŸããããã¯ãããã©ã«ãã®äœæãå²ãåœãŠãããåä¿¡ããŒã¿ã«åžžã«ååšãããšã¯éããªãããããã£ãèšå®ãããããã®ã«äŸ¿å©ã§ãã以äžã¯ãããã©ã«ãã®äœæãèšå®ããæ¹æ³ã§ãïŒ
const defaultAddress = {
street: 'Unknown Street',
city: 'Unknown City',
country: 'Unknown Country'
};
user.address = user.address ?? defaultAddress;
user.address.secondaryAddress = {
street: '456 Oak Ave',
city: 'Othertown',
country: 'USA'
}
ãã®ã¢ãããŒãã¯åœ¹ç«ã¡ãŸãããããã§ãããã©ã«ãã®å²ãåœãŠãæåã§åŠçããå¿ èŠãããã芪ãªããžã§ã¯ããååšããªãå Žåã«ããã«ããããã£ãå²ãåœãŠãããšã¯ã§ããŸããã
ãªãã·ã§ãã«ãã§ã€ãã³ã°ä»£å
¥æŒç®åïŒ?.=ïŒã®ç޹ä»
ãªãã·ã§ãã«ãã§ã€ãã³ã°ä»£å
¥æŒç®åïŒ?.=ïŒã¯ããããšã¬ã¬ã³ãã§ç°¡æœãªè§£æ±ºçãæäŸããŸããæè¿ã®ããŒãžã§ã³ã®JavaScriptã§å°å
¥ãããå
è¡ããããããã£ãååšããå Žåã«ã®ã¿ããªããžã§ã¯ãã«å®å
šã«ããããã£ãèšå®ã§ããŸããããã¯ããªãã·ã§ãã«ãã§ã€ãã³ã°ïŒ?.ïŒã®å®å
šæ§ãšä»£å
¥æŒç®åïŒ=ïŒãçµã¿åããããã®ã§ãã
æ§æã¯ç°¡åã§ãïŒobject.property?.= valueãããobjectãŸãã¯propertyã«è³ããŸã§ã®ããããã®ããããã£ãnullãŸãã¯undefinedã®å Žåã代å
¥ã¯ã¹ãããããããšã©ãŒã¯ã¹ããŒãããŸããããã¹ãŠã®ããããã£ãååšããå Žåãå€ã代å
¥ãããŸãã
åã®äŸããªãã·ã§ãã«ãã§ã€ãã³ã°ä»£å ¥æŒç®åã䜿ã£ãŠæžãçŽããŠã¿ãŸãããïŒ
user.address?.secondaryAddress = {
street: '456 Oak Ave',
city: 'Othertown',
country: 'USA'
};
ãã®äŸã§ã¯ãããuser.addressãundefinedã®å Žåã代å
¥ã¯ã¹ãããããããšã©ãŒã¯çºçããŸãããããuser.addressãååšããå ŽåãsecondaryAddressããããã£ãæäŸããããªããžã§ã¯ãã«èšå®ãããŸãã
?.=ã䜿çšããå©ç¹
- ç°¡æœã: ããããã£ãå®å šã«èšå®ããããã«å¿ èŠãªã³ãŒãã®éãåæžããŸãã
- å¯èªæ§: ã³ãŒããçè§£ãããããä¿å®ããããããŸãã
- å®å šæ§: ãCannot read properties of undefinedããšã©ãŒãé²ããŸãã
- å¹çæ§: ããããã£ãæ¬ èœããŠããå Žåã«äžèŠãªèšç®ãåé¿ããŸãã
- ãšã©ãŒãã³ããªã³ã°ã®æ¹å: ãšã©ãŒãã³ããªã³ã°ãç°¡çŽ åãããããã°ã容æã«ããŸãã
å®è·µçãªäŸãšã°ããŒãã«ãªå¿çš
ãªãã·ã§ãã«ãã§ã€ãã³ã°ä»£å ¥æŒç®åã¯ãããã€ãã®ã·ããªãªã§ç¹ã«åœ¹ç«ã¡ãŸãã以äžã«ãããã€ãã®å®è·µçãªäŸãšãããããã°ããŒãã«ãªã¢ããªã±ãŒã·ã§ã³ã«ã©ã®ããã«é¢é£ãããã瀺ããŸãã
1. APIã¬ã¹ãã³ã¹ã®åŠç
APIãæ±ãéãå®å
šã«å¶åŸ¡ã§ããªãããŒã¿æ§é ãæ±ãããšããããããŸãããªãã·ã§ãã«ãã§ã€ãã³ã°ä»£å
¥æŒç®åã¯ãAPIã¬ã¹ãã³ã¹ã«åºã¥ããŠããããã£ãå®å
šã«èšå®ããããã«éåžžã«äŸ¡å€ããããŸããäŸãã°ãæ¥æ¬ã®ãµãŒããŒãããŠãŒã¶ãŒã®å奜ã«é¢ããããŒã¿ãåãåãããšãããããã®ããŒã¿æ§é ãç°ãªããããããŸããã?.=ã䜿çšããããšã§ããšã©ãŒãçºçãããããšãªãããŒã¿æ§é ã®ããªãšãŒã·ã§ã³ãåŠçã§ããŸãã
// Assume the API response might not always include user.preferences.language.
const apiResponse = {
name: 'Example User',
preferences: { /*...*/ }
};
apiResponse.preferences?.language?.= 'en'; // Safe assignment.
2. ãŠãŒã¶ãŒå ¥åãšãã©ãŒã ããŒã¿
ãã©ãŒã ããã®ãŠãŒã¶ãŒå ¥åãåŠçããéããªãã·ã§ãã«ãªãã£ãŒã«ãããããããããŸããããªãã·ã§ãã«ãã§ã€ãã³ã°ä»£å ¥æŒç®åã䜿çšãããšããã£ãŒã«ããå ¥åãããŠãããã©ãããå¿é ããããšãªãããŠãŒã¶ãŒãæäŸããããŒã¿ã«åºã¥ããŠãªããžã§ã¯ãã«ããããã£ãèšå®ã§ããŸããããã¯ããã¹ãŠã®å°åã®ãŠãŒã¶ãŒããã®ããŒã¿ãåãå ¥ããã®ã«æé©ã§ãã
const userData = {}; // Start with an empty object.
const formInput = { /* ... */ };
userData.profile?.name?.= formInput.firstName + ' ' + formInput.lastName;
userData.address?.streetAddress?.= formInput.addressLine1; // The data from the user might not always exist.
3. èšå®ãªããžã§ã¯ã
èšå®ãªããžã§ã¯ããæ±ãéããªãã·ã§ãã«ãã§ã€ãã³ã°ä»£å ¥æŒç®åã¯ãç¹å®ã®ããããã£ãæ¬ èœããŠããå Žåã«ããã©ã«ãå€ãå®å šã«èšå®ããã®ã«åœ¹ç«ã¡ãŸããããã¯ããŠãŒã¶ãŒã®å Žæã«åºã¥ããŠç°ãªãèšå®ãé©çšããå¿ èŠãããåœéçãªéçºã«ãããŠéåžžã«äŸ¿å©ã§ãã
const config = {}; // Start with an empty config.
config.features?.useAnalytics?.= true; // Enable analytics by default.
config.theme?.color?.= 'light'; // Set the default theme color.
4. 倿§ãªãœãŒã¹ããã®ããŒã¿ã®åãæ±ã
ã°ããŒãã«ã«åæ£ããã·ã¹ãã ã§ã¯ãããŒã¿ã¯ãã°ãã°ããããç¬èªã®ã¹ããŒããæã€æ§ã ãªãœãŒã¹ããæ¥ãŸãããªãã·ã§ãã«ãã§ã€ãã³ã°ä»£å ¥æŒç®åã¯ããšã©ãŒãåŒãèµ·ããããšãªããããã®ã¹ããŒãã®éãã管çããã®ã«åœ¹ç«ã¡ãŸãã
const internationalData = {};
const sourceAData = { /* ... */ };
const sourceBData = { /* ... */ };
internationalData.sourceAInfo?.email?.= sourceAData.email;
internationalData.sourceBInfo?.phoneNumber?.= sourceBData.phone; // Data from different sources.
é«åºŠãªäœ¿çšæ³ãšèæ ®äºé
1. ä»ã®æŒç®åãšã®çµã¿åãã
ãªãã·ã§ãã«ãã§ã€ãã³ã°ä»£å
¥æŒç®åã¯ãããè€éãªã·ããªãªã®ããã«ä»ã®æŒç®åãšçµã¿åãããŠäœ¿çšã§ããŸããäŸãã°ãNullåäœæŒç®åïŒ??ïŒãšäœµçšããŠãããããã£ãååšããªãå Žåã«ããã©ã«ãå€ãæäŸããããšãã§ããŸãã
// If user.settings.theme is undefined, set it to 'default'.
user.settings?.theme?.= user.settings?.theme ?? 'default';
2. ããã©ãŒãã³ã¹ãžã®åœ±é¿
ãªãã·ã§ãã«ãã§ã€ãã³ã°ä»£å ¥ã®ããã©ãŒãã³ã¹ãžã®åœ±é¿ã¯ãã»ãšãã©ã®ã·ããªãªã§äžè¬çã«ç¡èŠã§ããçšåºŠã§ããJavaScriptãšã³ãžã³ã¯ãã®æ©èœã«æé©åãããŠããŸããããããéåžžã«ããã©ãŒãã³ã¹ãéèŠãªã¢ããªã±ãŒã·ã§ã³ã§ã¯ãã³ãŒãããããã¡ã€ãªã³ã°ããããšã¯äŸç¶ãšããŠè¯ãç¿æ £ã§ããã»ãšãã©ã®ç¶æ³ã§ã¯ãå¯èªæ§ãšå®å šæ§ã®åäžãšããå©ç¹ããããããªããã©ãŒãã³ã¹ã®æžå¿µãäžåããŸãã
3. ãã©ãŠã¶ã®äºææ§
ãªãã·ã§ãã«ãã§ã€ãã³ã°ä»£å ¥æŒç®åã¯æ¯èŒçæ°ããæ©èœã§ããã¿ãŒã²ãããšãããã©ãŠã¶ãç°å¢ãããããµããŒãããŠããããšã確èªããŠãã ãããå€ãã®å ŽåãBabelãTypeScriptã®ãããªããŒã«ã䜿çšããŠãå€ããã©ãŠã¶åãã«ã³ãŒããäºææ§ã®ããããŒãžã§ã³ã«ãã©ã³ã¹ãã€ã«ã§ããŸãã
4. ãšã©ãŒãã³ããªã³ã°ãšãããã°
?.=ã¯ç¹å®ã®ãšã©ãŒãé²ããŸãããããã§ããšã©ãŒãé©åã«åŠçããããšãéèŠã§ãããã®æŒç®åããšã©ãŒãã³ããªã³ã°ã¡ã«ããºã ãšçµã¿åãããŠäœ¿çšããæœåšçãªåé¡ããã£ããããŠå¯ŸåŠããããšãã§ããŸãããããã°ããã¹ãããã®ã³ã°ã®èšç»ãåžžã«æã£ãŠãããŸãããã
ãã¹ããã©ã¯ãã£ã¹ãšå®è·µçãªæŽå¯
ãªãã·ã§ãã«ãã§ã€ãã³ã°ä»£å ¥æŒç®åãæå€§éã«æŽ»çšããããã«ã以äžã®ãã¹ããã©ã¯ãã£ã¹ãèæ ®ããŠãã ããïŒ
- ã³ãŒãã®å¯èªæ§ãåªå
ãã:
?.=ã䜿çšããŠãã³ãŒããçè§£ããããããŸãã - ããŒã¿æ€èšŒãåãå
¥ãã:
?.=ã¯æªå®çŸ©ã®ããããã£ã«åœ¹ç«ã¡ãŸãããããã§ãããŒã¿ãæ€èšŒããããšãéèŠã§ãã - 培åºçã«ãã¹ããã: ãŠããããã¹ããšçµ±åãã¹ããäœæããã³ãŒãããã¹ãŠã®ã·ããªãªãæ£ããåŠçããããšã確èªããŸãã
- æç¢ºã«ææžåãã: ã³ãŒãã«ã³ã¡ã³ããä»ããŠããªãã·ã§ãã«ãã§ã€ãã³ã°ã®ç®çãšnullãŸãã¯undefinedå€ã®å¯èœæ§ã説æããŸããããã¯ãäžçäžã®éçºããŒã ãšäœæ¥ããéã«ç¹ã«éèŠã§ãã
- ãªã³ã¿ãŒãšã³ãŒããã©ãŒããã¿ãŒã䜿çšãã: ESLintãPrettierãªã©ã®ããŒã«ã¯ãäžè²«ããã³ãŒãã¹ã¿ã€ã«ã匷å¶ããæœåšçãªãšã©ãŒãé²ãããšãã§ããŸãã
- ææ°æ å ±ãä¿ã€: JavaScriptã¯åžžã«é²åããŠããŸããææ°ã®æ©èœãšãã¹ããã©ã¯ãã£ã¹ãåžžã«ææ¡ããŠãããŸãããã
çµè«
JavaScriptã®ãªãã·ã§ãã«ãã§ã€ãã³ã°ä»£å
¥æŒç®åïŒ?.=ïŒã¯ããã¹ãŠã®JavaScriptéçºè
ã«ãšã£ãŠäŸ¡å€ã®ããããŒã«ã§ããç¹ã«æªå®çŸ©ã®å¯èœæ§ãããããŒã¿ãæ±ãéã«ãã³ãŒããç°¡çŽ åããå¯èªæ§ãåäžãããã¢ããªã±ãŒã·ã§ã³ã®å®å
šæ§ã倧å¹
ã«é«ããŸãããã®æŒç®åãçè§£ãã广çã«äœ¿çšããããšã§ãããå
ç¢ã§ä¿å®ããããã³ãŒããèšè¿°ã§ããã©ã³ã¿ã€ã ãšã©ãŒã®å¯èœæ§ãæžãããå
šäœçãªãŠãŒã¶ãŒãšã¯ã¹ããªãšã³ã¹ãåäžãããããšãã§ããŸããããã¯ç¹ã«ã°ããŒãã«ããŒã ã«ãšã£ãŠæçšã§ãããã·ãŒã ã¬ã¹ãªã³ã©ãã¬ãŒã·ã§ã³ãšãèªã¿ãããä¿®æ£ããããã³ãŒããå¯èœã«ããŸãã
ãã®æè¡ã¯ãWebã¢ããªã±ãŒã·ã§ã³ãã¢ãã€ã«ã¢ããªã±ãŒã·ã§ã³ããµãŒããŒãµã€ãã¢ããªã±ãŒã·ã§ã³ãéçºããåœéçãªããŒã ã«åœ¹ç«ã¡ãŸããã³ãŒããããå ç¢ã«ããããšã§ããŠãŒã¶ãŒãã©ãã«äœãã§ããããšãå šäœçãªäœéšãåäžãããããšãã§ããŸãã
ãã®æ©èœã掻çšããã°ãããªãã®ã³ãŒãã¯ããå埩åããããæ±ãããããªãã§ããããããã«ãããããã°ããŒãã«ã§çç£çãªéçºç°å¢ãå¯èœã«ãªããŸãã