JavaScriptã®åŒ·åãªæ©èœã§ãããã¿ãŒã³ãããã³ã°ã¬ãŒããåŠã³ãæ¡ä»¶ä»ãåå²ä»£å ¥ã§ãã衚çŸåè±ãã§èªã¿ãããã³ãŒããæžããŸããããå®çšçãªäŸã§è§£èª¬ããŸãã
JavaScriptã®ãã¿ãŒã³ãããã³ã°ã¬ãŒãïŒæ¡ä»¶ä»ãåå²ä»£å ¥ãè§£ãæŸã€
JavaScriptã®åå²ä»£å ¥ã¯ããªããžã§ã¯ããé åããå€ãæœåºããããã®ç°¡æœãªæ¹æ³ãæäŸããŸããããããæã«ã¯åå²ä»£å ¥ãçºçããã¿ã€ãã³ã°ããã现ããå¶åŸ¡ããå¿ èŠããããŸããããã§åœ¹ç«ã€ã®ããã¿ãŒã³ãããã³ã°ã¬ãŒãã§ããããã«ãããæ¡ä»¶ããžãã¯ãåå²ä»£å ¥ãã¿ãŒã³ã«çŽæ¥è¿œå ã§ããŸãããã®ããã°èšäºã§ã¯ããã®åŒ·åãªæ©èœãæ¢æ±ããã³ãŒãã®å¯èªæ§ãšä¿å®æ§ãåäžãããæ¹æ³ã«ã€ããŠãå®çšçãªäŸãšæŽå¯ãæäŸããŸãã
ãã¿ãŒã³ãããã³ã°ã¬ãŒããšã¯ïŒ
ãã¿ãŒã³ãããã³ã°ã¬ãŒãã¯ãåå²ä»£å ¥ã«è¿œå ã§ããæ¡ä»¶åŒã§ããããã«ãããç¹å®ã®æ¡ä»¶ãæºããããå Žåã«ã®ã¿åå²ä»£å ¥ãè¡ãããããã«æå®ã§ããŸããããã«ãããã³ãŒãã«ç²ŸåºŠãšå¶åŸ¡ã®å±€ãå ãããè€éãªããŒã¿æ§é ãã·ããªãªã®åŠçã容æã«ãªããŸããã¬ãŒãã¯ãåå²ä»£å ¥ããã»ã¹äžã«ããŒã¿ã广çã«ãã£ã«ã¿ãªã³ã°ãããšã©ãŒãé²ããããŸããŸãªããŒã¿åœ¢åŒãé©åã«åŠçã§ããããã«ããŸãã
ãªããã¿ãŒã³ãããã³ã°ã¬ãŒãã䜿çšããã®ãïŒ
- å¯èªæ§ã®åäžïŒ ã¬ãŒãã¯æ¡ä»¶ããžãã¯ãåå²ä»£å ¥å ã«çŽæ¥é 眮ããããšã§ãã³ãŒãããã衚çŸåè±ãã«ããŸããããã«ãããåå²ä»£å ¥æäœãå²ãåé·ãªif/elseæãäžèŠã«ãªããŸãã
- ããŒã¿æ€èšŒã®åŒ·åïŒ ã¬ãŒãã䜿çšããŠåå²ä»£å ¥ãããããŒã¿ãæ€èšŒããåŠçãé²ããåã«ç¹å®ã®åºæºãæºãããŠããããšã確èªã§ããŸããããã«ãããäºæãã¬ãšã©ãŒãé²ããã³ãŒãã®å ç¢æ§ãåäžãããããšãã§ããŸãã
- ã³ãŒãã®ç°¡æœåïŒ ã¬ãŒãã¯ãç¹ã«è€éãªããŒã¿æ§é ãè€æ°ã®æ¡ä»¶ãæ±ãå Žåã«ãèšè¿°ããå¿ èŠã®ããã³ãŒãéãå€§å¹ ã«åæžã§ããŸããæ¡ä»¶ããžãã¯ã¯åå²ä»£å ¥ã«çŽæ¥åã蟌ãŸããŸãã
- 颿°åããã°ã©ãã³ã°ã®ãã©ãã€ã ïŒ ãã¿ãŒã³ãããã³ã°ã¯ãäžå€æ§ïŒã€ãã¥ãŒã¿ããªãã£ïŒãšå®£èšçãªã³ãŒããä¿é²ããããšã«ããã颿°åããã°ã©ãã³ã°ã®ååãšããäžèŽããŸãã
æ§æãšå®è£
ãã¿ãŒã³ãããã³ã°ã¬ãŒãã®æ§æã¯ã䜿çšããŠããç¹å®ã®JavaScriptç°å¢ãã©ã€ãã©ãªã«ãã£ãŠè¥å¹²ç°ãªããŸããæãäžè¬çãªã¢ãããŒãã¯ãsweet.js
ïŒå€ããªãã·ã§ã³ã§ããïŒã®ãããªã©ã€ãã©ãªãã«ã¹ã¿ã ãã©ã³ã¹ãã€ã©ã䜿çšããããšã§ãããããããã¿ãŒã³ãããã³ã°æ©èœããã€ãã£ãJavaScriptã«è¿ã¥ããæ°ããææ¡ãæ©èœãç¶ç¶çã«å°å
¥ãããæ¡çšãããŠããŸãã
ãã€ãã£ãå®è£ ããªããŠããæ¡ä»¶ä»ãåå²ä»£å ¥ãšåå²ä»£å ¥äžã®ããŒã¿æ€èšŒãšãã*æŠå¿µ*ã¯éåžžã«äŸ¡å€ããããæšæºçãªJavaScriptã®ãã¯ããã¯ã䜿çšããŠå®çŸã§ããŸããããã«ã€ããŠã¯åŸã»ã©è©³ãã説æããŸãã
äŸ1ïŒæšæºJavaScriptã«ããæ¡ä»¶ä»ãåå²ä»£å ¥
ãŠãŒã¶ãŒãããã¡ã€ã«ã衚ããªããžã§ã¯ãããããverified
ããããã£ãtrueã®å Žåã«ã®ã¿email
ããããã£ãæœåºããããšããŸãã
const user = {
name: "Alice",
email: "alice@example.com",
verified: true
};
let email = null;
if (user.verified) {
({ email } = user);
}
console.log(email); // Output: alice@example.com
ããã¯å³å¯ã«ã¯ãã¿ãŒã³ãããã³ã°ã¬ãŒãã§ã¯ãããŸããããæšæºçãªJavaScriptã䜿çšããŠæ¡ä»¶ä»ãåå²ä»£å
¥ã®æ žãšãªãã¢ã€ãã¢ã瀺ããŠããŸããverified
ãã©ã°ãtrueã®å Žåã«ã®ã¿email
ããããã£ãåå²ä»£å
¥ããŠããŸãã
äŸ2ïŒæ¬ æããããã£ã®åŠç
åœã«ãã£ãŠäžéšã®ãã£ãŒã«ããæ¬ èœããŠããå¯èœæ§ã®ãããåœéçãªäœæããŒã¿ãæ±ã£ãŠãããšããŸããäŸãã°ãç±³åœã®äœæã«ã¯éåžžéµäŸ¿çªå·ïŒzip codeïŒããããŸãããä»ã®åœã®äžéšã®äœæã«ã¯ãªãå ŽåããããŸãã
const usAddress = {
street: "123 Main St",
city: "Anytown",
state: "CA",
zip: "91234",
country: "USA"
};
const ukAddress = {
street: "456 High St",
city: "London",
postcode: "SW1A 0AA",
country: "UK"
};
function processAddress(address) {
const { street, city, zip, postcode } = address;
if (zip) {
console.log(`US Address: ${street}, ${city}, ${zip}`);
} else if (postcode) {
console.log(`UK Address: ${street}, ${city}, ${postcode}`);
} else {
console.log(`Address: ${street}, ${city}`);
}
}
processAddress(usAddress); // Output: US Address: 123 Main St, Anytown, 91234
processAddress(ukAddress); // Output: UK Address: 456 High St, London, SW1A 0AA
ããã§ã¯ãzip
ãŸãã¯postcode
ã®ååšã䜿çšããŠãäœæã®åŠçæ¹æ³ã決å®ããŠããŸããããã¯ãã¢ã¯ã·ã§ã³ãå®è¡ããåã«ç¹å®ã®æ¡ä»¶ããã§ãã¯ãããšããã¬ãŒãã®èãæ¹ãåæ ããŠããŸãã
äŸ3ïŒæ¡ä»¶ä»ãããŒã¿æ€èšŒ
éèååŒãåŠçããŠããŠãåŠçãé²ããåã«amount
ãæ£ã®æ°ã§ããããšã確èªããããšããŸãã
const transaction1 = { id: 1, amount: 100, currency: "USD" };
const transaction2 = { id: 2, amount: -50, currency: "USD" };
function processTransaction(transaction) {
const { id, amount, currency } = transaction;
if (amount > 0) {
console.log(`Processing transaction ${id} for ${amount} ${currency}`);
} else {
console.log(`Invalid transaction ${id}: Amount must be positive`);
}
}
processTransaction(transaction1); // Output: Processing transaction 1 for 100 USD
processTransaction(transaction2); // Output: Invalid transaction 2: Amount must be positive
if (amount > 0)
ã¯ã¬ãŒããšããŠæ©èœããç¡å¹ãªãã©ã³ã¶ã¯ã·ã§ã³ã®åŠçãé²ããŸãã
æ¢åã®JavaScriptæ©èœã§ãã¿ãŒã³ãããã³ã°ã¬ãŒããã·ãã¥ã¬ãŒããã
ãã€ãã£ãã®ãã¿ãŒã³ãããã³ã°ã¬ãŒãã¯ãã¹ãŠã®JavaScriptç°å¢ã§æ®éçã«å©çšã§ããããã§ã¯ãããŸããããåå²ä»£å ¥ãæ¡ä»¶æã颿°ãçµã¿åãããããšã§ããã®åäœã广çã«ã·ãã¥ã¬ãŒãã§ããŸãã
ãã¬ãŒãããšããŠã®é¢æ°ã®äœ¿çš
ã¬ãŒããšããŠæ©èœãã颿°ãäœæããæ¡ä»¶ããžãã¯ãã«ãã»ã«åããŠãåå²ä»£å ¥ãç¶è¡ãã¹ããã©ããã瀺ãããŒã«å€ãè¿ãããšãã§ããŸãã
function isVerified(user) {
return user && user.verified === true;
}
const user1 = { name: "Bob", email: "bob@example.com", verified: true };
const user2 = { name: "Charlie", email: "charlie@example.com", verified: false };
let email1 = null;
if (isVerified(user1)) {
({ email1 } = user1);
}
let email2 = null;
if (isVerified(user2)) {
({ email2 } = user2);
}
console.log(email1); // Output: bob@example.com
console.log(email2); // Output: null
颿°å ã§ã®æ¡ä»¶ä»ãåå²ä»£å ¥
å¥ã®ã¢ãããŒãã¯ãåå²ä»£å ¥ãšæ¡ä»¶ããžãã¯ã颿°å ã«ã«ãã»ã«åããæ¡ä»¶ãæºããããªãå Žåã«ããã©ã«ãå€ãè¿ãããã«ããããšã§ãã
function getEmailIfVerified(user) {
if (user && user.verified === true) {
const { email } = user;
return email;
}
return null;
}
const user1 = { name: "Bob", email: "bob@example.com", verified: true };
const user2 = { name: "Charlie", email: "charlie@example.com", verified: false };
const email1 = getEmailIfVerified(user1);
const email2 = getEmailIfVerified(user2);
console.log(email1); // Output: bob@example.com
console.log(email2); // Output: null
é«åºŠãªäœ¿çšäŸ
æ¡ä»¶ä»ãã®ãã¹ããããåå²ä»£å ¥
åãååããã¹ããããåå²ä»£å ¥ã«ãé©çšã§ããŸããäŸãã°ããã¹ããããäœææ å ±ãæã€ãªããžã§ã¯ããããå Žåãç¹å®ã®ãã£ãŒã«ãã®ååšã«åºã¥ããŠæ¡ä»¶ä»ãã§ããããã£ãæœåºã§ããŸãã
const data1 = {
user: {
name: "David",
address: {
city: "Sydney",
country: "Australia"
}
}
};
const data2 = {
user: {
name: "Eve"
}
};
function processUserData(data) {
if (data?.user?.address) { // Using optional chaining
const { user: { name, address: { city, country } } } = data;
console.log(`${name} lives in ${city}, ${country}`);
} else {
const { user: { name } } = data;
console.log(`${name}'s address is not available`);
}
}
processUserData(data1); // Output: David lives in Sydney, Australia
processUserData(data2); // Output: Eve's address is not available
ãªãã·ã§ãã«ãã§ã€ãã³ã°ïŒ?.
ïŒã䜿çšãããšããã¹ããããããããã£ã«å®å
šã«ã¢ã¯ã»ã¹ã§ããããããã£ãæ¬ èœããŠããå Žåã®ãšã©ãŒãé²ãããšãã§ããŸãã
æ¡ä»¶ããžãã¯ã§ã®ããã©ã«ãå€ã®äœ¿çš
ããã©ã«ãå€ãšæ¡ä»¶ããžãã¯ãçµã¿åãããŠãåå²ä»£å ¥ã倱æããå Žåãç¹å®ã®æ¡ä»¶ãæºããããªãå Žåã«ãã©ãŒã«ããã¯å€ãæäŸã§ããŸãã
const config1 = { timeout: 5000 };
const config2 = {};
function processConfig(config) {
const timeout = config.timeout > 0 ? config.timeout : 10000; // Default timeout
console.log(`Timeout: ${timeout}`);
}
processConfig(config1); // Output: Timeout: 5000
processConfig(config2); // Output: Timeout: 10000
ãã¿ãŒã³ãããã³ã°ã©ã€ãã©ãª/ãã©ã³ã¹ãã€ã©ã䜿çšããå©ç¹ïŒå©çšå¯èœãªå ŽåïŒ
æšæºã®JavaScriptã§ãã¿ãŒã³ãããã³ã°ã¬ãŒããã·ãã¥ã¬ãŒãããæ¹æ³ãæ¢æ±ããŠããŸãããããã€ãã£ãã®ãã¿ãŒã³ãããã³ã°ããµããŒãããå°çšã®ã©ã€ãã©ãªããã©ã³ã¹ãã€ã©ã䜿çšãããšãããã€ãã®å©ç¹ããããŸãã
- ããç°¡æœãªæ§æïŒ ã©ã€ãã©ãªã¯ããã¿ãŒã³ãšã¬ãŒããå®çŸ©ããããã®ããããšã¬ã¬ã³ãã§èªã¿ãããæ§æãæäŸããããšããããããŸãã
- ããã©ãŒãã³ã¹ã®åäžïŒ æé©åããããã¿ãŒã³ãããã³ã°ãšã³ãžã³ã¯ãæåã®å®è£ ãšæ¯èŒããŠåªããããã©ãŒãã³ã¹ãæäŸã§ããŸãã
- 衚çŸåã®åŒ·åïŒ ãã¿ãŒã³ãããã³ã°ã©ã€ãã©ãªã¯ãè€éãªããŒã¿æ§é ãã«ã¹ã¿ã ã¬ãŒã颿°ã®ãµããŒããªã©ãããé«åºŠãªæ©èœãæäŸããå ŽåããããŸãã
ã°ããŒãã«ãªèæ ®äºé ãšãã¹ããã©ã¯ãã£ã¹
åœéçãªããŒã¿ãæ±ãéã«ã¯ãæåçãªéããããŒã¿åœ¢åŒã®ããªãšãŒã·ã§ã³ãèæ ®ããããšãéèŠã§ãã以äžã«ããã€ãã®ãã¹ããã©ã¯ãã£ã¹ã瀺ããŸãã
- æ¥ä»åœ¢åŒïŒ äžçäžã§äœ¿çšãããããŸããŸãªæ¥ä»åœ¢åŒïŒäŸïŒMM/DD/YYYY vs. DD/MM/YYYYïŒã«æ³šæããŠãã ãããæ¥ä»ã®è§£æãšãã©ãŒãããã«ã¯
Moment.js
ãdate-fns
ãªã©ã®ã©ã€ãã©ãªã䜿çšããŸãã - é貚èšå·ïŒ ããŸããŸãªé貚èšå·ãšåœ¢åŒãåŠçããããã«ãé貚ã©ã€ãã©ãªã䜿çšããŸãã
- äœæåœ¢åŒïŒ äœæã®åœ¢åŒã¯åœã«ãã£ãŠå€§ããç°ãªãããšã«æ³šæããŠãã ãããããŸããŸãªäœæåœ¢åŒãé©åã«åŠçããããã«ãå°çšã®äœæè§£æã©ã€ãã©ãªã®äœ¿çšãæ€èšããŠãã ããã
- èšèªã®ããŒã«ã©ã€ãºïŒ ããŒã«ã©ã€ãŒãŒã·ã§ã³ã©ã€ãã©ãªã䜿çšããŠç¿»èš³ãæäŸããã³ãŒããããŸããŸãªèšèªãæåã«é©å¿ãããŸãã
- ã¿ã€ã ãŸãŒã³ïŒ æ··ä¹±ãé¿ããæ£ç¢ºãªããŒã¿è¡šçŸã確ä¿ããããã«ãã¿ã€ã ãŸãŒã³ãæ£ããåŠçããŸããã¿ã€ã ãŸãŒã³ã®å€æã管çããããã«ãã¿ã€ã ãŸãŒã³ã©ã€ãã©ãªã䜿çšããŸãã
çµè«
JavaScriptã®ãã¿ãŒã³ãããã³ã°ã¬ãŒãããŸãã¯æ¡ä»¶ä»ãåå²ä»£å ¥ãšãã*æŠå¿µ*ã¯ããã衚çŸåè±ãã§ãèªã¿ããããä¿å®æ§ã®é«ãã³ãŒããæžãããã®åŒ·åãªæ¹æ³ãæäŸããŸãããã€ãã£ãå®è£ ã¯ãŸã åºãå©çšå¯èœã§ã¯ãªããããããŸããããåå²ä»£å ¥ãæ¡ä»¶æã颿°ãçµã¿åãããããšã§ããã®åäœã广çã«ã·ãã¥ã¬ãŒãã§ããŸãããããã®ãã¯ããã¯ãã³ãŒãã«åãå ¥ããããšã§ãç¹ã«äžçäžããã®è€éã§å€æ§ãªããŒã¿ãæ±ãéã«ãããŒã¿æ€èšŒãæ¹åããã³ãŒãã®è€éãã軜æžããããå ç¢ã§é©å¿æ§ã®é«ãã¢ããªã±ãŒã·ã§ã³ãäœæã§ããŸããåå²ä»£å ¥å ã®æ¡ä»¶ããžãã¯ã®åãæŽ»çšããŠãã³ãŒãã®æçæ§ãšå¹çæ§ã®æ°ããªã¬ãã«ãè§£ãæŸã¡ãŸãããã