æ§é çåå²ä»£å ¥ãšã¬ãŒããçšããJavaScriptã®åŒ·åãªãã¿ãŒã³ãããã³ã°æ©èœãæ¢ããŸããå®çšçãªäŸãéããŠãããã¯ãªãŒã³ã§è¡šçŸåè±ããªã³ãŒããæžãæ¹æ³ãåŠã³ãŸãããã
JavaScriptã®ãã¿ãŒã³ãããã³ã°ïŒæ§é çåå²ä»£å ¥ãšã¬ãŒã
JavaScriptã¯ãäŒçµ±çã«ã¯é¢æ°åããã°ã©ãã³ã°èšèªãšã¯èŠãªãããŠããŸãããã颿°åã®æŠå¿µãã³ãŒãã«åãå ¥ããããã®åŒ·åãªããŒã«ããŸããŸãæäŸããŠããŸãããã®ãããªããŒã«ã®äžã€ããã¿ãŒã³ãããã³ã°ã§ããHaskellãErlangã®ãããªèšèªã«ããã第äžçŽã®æ©èœã§ã¯ãããŸããããæ§é çåå²ä»£å ¥ãšã¬ãŒããçµã¿åãããããšã§å¹æçã«ãšãã¥ã¬ãŒãã§ããŸãããã®ã¢ãããŒãã«ãããç¹ã«è€éãªæ¡ä»¶åå²ããžãã¯ãæ±ãéã«ãããç°¡æœã§ãèªã¿ããããä¿å®æ§ã®é«ãã³ãŒããæžãããšãå¯èœã«ãªããŸãã
ãã¿ãŒã³ãããã³ã°ãšã¯ïŒ
æ¬è³ªçã«ããã¿ãŒã³ãããã³ã°ã¯ãå€ãäºåå®çŸ©ããããã¿ãŒã³ã®ã»ãããšæ¯èŒããæè¡ã§ããäžèŽãèŠã€ãããšã察å¿ããã¢ã¯ã·ã§ã³ãå®è¡ãããŸããããã¯å€ãã®é¢æ°åèšèªã«ãããåºæ¬çãªæŠå¿µã§ãããå¹ åºãåé¡ã«å¯ŸããŠãšã¬ã¬ã³ãã§è¡šçŸåè±ããªè§£æ±ºçãå¯èœã«ããŸããJavaScriptã«ã¯ãããã®èšèªãšåããããªçµã¿èŸŒã¿ã®ãã¿ãŒã³ãããã³ã°ã¯ãããŸããããåå²ä»£å ¥ãšã¬ãŒããæŽ»çšããããšã§åæ§ã®çµæãåŸãããšãã§ããŸãã
æ§é çåå²ä»£å ¥ïŒå€ã®ã¢ã³ãããã³ã°
åå²ä»£å ¥ã¯ããªããžã§ã¯ããé åããå€ãæœåºããåå¥ã®å€æ°ã«ä»£å ¥ã§ããES6ïŒES2015ïŒã®æ©èœã§ããããã¯ãç§ãã¡ã®ãã¿ãŒã³ãããã³ã°ã¢ãããŒãã®åºç€ãšãªãèŠçŽ ã§ããæ§é å ã®ç¹å®ã®ããŒã¿ãã€ã³ãã«ã¢ã¯ã»ã¹ããããã®ç°¡æœã§èªã¿ãããæ¹æ³ãæäŸããŸãã
é åã®åå²ä»£å ¥
å°ç座æšã衚ãé åãèããŠã¿ãŸãããïŒ
const coordinate = [40.7128, -74.0060]; // New York City
const [latitude, longitude] = coordinate;
console.log(latitude); // Output: 40.7128
console.log(longitude); // Output: -74.0060
ããã§ã¯ã`coordinate`é åã`latitude`ãš`longitude`ãšãã倿°ã«åå²ä»£å ¥ããŸãããããã¯ãã€ã³ããã¯ã¹ããŒã¹ã®èšæ³ïŒäŸïŒ`coordinate[0]`ïŒã§èŠçŽ ã«ã¢ã¯ã»ã¹ããããããã£ãšã¯ãªãŒã³ã§ãã
ãŸããæ®äœæ§æïŒ`...`ïŒã䜿ã£ãŠé åã®æ®ãã®èŠçŽ ããã£ããã£ããããšãã§ããŸãïŒ
const colors = ['red', 'green', 'blue', 'yellow', 'purple'];
const [first, second, ...rest] = colors;
console.log(first); // Output: red
console.log(second); // Output: green
console.log(rest); // Output: ['blue', 'yellow', 'purple']
ããã¯ãæåã®ããã€ãã®èŠçŽ ã ããæœåºããæ®ããå¥ã®é åã«ãŸãšãããå Žåã«äŸ¿å©ã§ãã
ãªããžã§ã¯ãã®åå²ä»£å ¥
ãªããžã§ã¯ãã®åå²ä»£å ¥ãåæ§ã«åŒ·åã§ãããŠãŒã¶ãŒãããã¡ã€ã«ã衚ããªããžã§ã¯ããæ³åããŠã¿ãŠãã ããïŒ
const user = {
id: 123,
name: 'Alice Smith',
location: { city: 'London', country: 'UK' },
email: 'alice.smith@example.com'
};
const { name, location: { city, country }, email } = user;
console.log(name); // Output: Alice Smith
console.log(city); // Output: London
console.log(country); // Output: UK
console.log(email); // Output: alice.smith@example.com
ããã§ã¯ã`user`ãªããžã§ã¯ããåå²ä»£å ¥ããŠ`name`ã`city`ã`country`ã`email`ãæœåºããŸãããã³ãã³ïŒ`:`ïŒæ§æã䜿ã£ãŠãã¹ãããããªããžã§ã¯ããåå²ä»£å ¥ããåæã«å€æ°åã倿Žã§ããç¹ã«æ³šç®ããŠãã ãããããã¯ãæ·±ããã¹ããããããããã£ãæœåºããã®ã«éåžžã«äŸ¿å©ã§ãã
ããã©ã«ãå€
åå²ä»£å ¥ã§ã¯ãããããã£ãé åã®èŠçŽ ãååšããªãå Žåã«ããã©ã«ãå€ãæå®ããããšãã§ããŸãïŒ
const product = {
name: 'Laptop',
price: 1200
};
const { name, price, description = 'No description available' } = product;
console.log(name); // Output: Laptop
console.log(price); // Output: 1200
console.log(description); // Output: No description available
`product`ãªããžã§ã¯ãã«`description`ããããã£ãååšããªãå Žåã`description`倿°ã®ããã©ã«ãå€ã¯`'No description available'`ã«ãªããŸãã
ã¬ãŒãïŒæ¡ä»¶ã®è¿œå
åå²ä»£å ¥ã ãã§ã匷åã§ãããã¬ãŒããšçµã¿åãããããšã§ããã«åŒ·åã«ãªããŸããã¬ãŒãã¯ãç¹å®ã®åºæºã«åºã¥ããŠåå²ä»£å ¥ã®çµæããã£ã«ã¿ãªã³ã°ããæ¡ä»¶æã§ããããã«ãããåå²ä»£å ¥ããã倿°ã®å€ã«å¿ããŠç°ãªãã³ãŒããã¹ãå®è¡ã§ããŸãã
`if`æã®äœ¿çš
ã¬ãŒããå®è£ ããæãç°¡åãªæ¹æ³ã¯ãåå²ä»£å ¥ã®åŸã«`if`æã䜿çšããããšã§ãïŒ
function processOrder(order) {
const { customer, items, shippingAddress } = order;
if (!customer) {
return 'Error: Customer information is missing.';
}
if (!items || items.length === 0) {
return 'Error: No items in the order.';
}
// ... process the order
return 'Order processed successfully.';
}
ãã®äŸã§ã¯ã`order`ãªããžã§ã¯ããåå²ä»£å ¥ãããã®åŸ`if`æã䜿ã£ãŠ`customer`ãš`items`ããããã£ãååšããæå¹ã§ãããã確èªããŠããŸããããã¯ãã¿ãŒã³ãããã³ã°ã®åºæ¬çãªåœ¢åŒã§ããã€ãŸãã`order`ãªããžã§ã¯ãã®ç¹å®ã®ãã¿ãŒã³ããã§ãã¯ãããããã®ãã¿ãŒã³ã«åºã¥ããŠç°ãªãã³ãŒããã¹ãå®è¡ããŠããŸãã
`switch`æã®äœ¿çš
`switch`æã¯ãããè€éãªãã¿ãŒã³ãããã³ã°ã®ã·ããªãªãç¹ã«ç §åããå¯èœæ§ã®ãããã¿ãŒã³ãè€æ°ããå Žåã«äœ¿çšã§ããŸãããã ããéåžžã¯è€éãªæ§é çãã¿ãŒã³ã§ã¯ãªããåå¥ã®å€ã«å¯ŸããŠäœ¿çšãããŸãã
ã«ã¹ã¿ã ã¬ãŒã颿°ã®äœæ
ããæŽç·Žããããã¿ãŒã³ãããã³ã°ã®ããã«ã¯ãåå²ä»£å ¥ãããå€ã«å¯ŸããŠããè€éãªãã§ãã¯ãè¡ãã«ã¹ã¿ã ã¬ãŒã颿°ãäœæã§ããŸãïŒ
function isValidEmail(email) {
// Basic email validation (for demonstration purposes only)
return /^[\w-\.]+@([\w-]+\.)+[\w-]{2,4}$/.test(email);
}
function processUser(user) {
const { name, email } = user;
if (!name) {
return 'Error: Name is required.';
}
if (!email || !isValidEmail(email)) {
return 'Error: Invalid email address.';
}
// ... process the user
return 'User processed successfully.';
}
ããã§ã¯ãåºæ¬çãªã¡ãŒã«æ€èšŒãè¡ã`isValidEmail`颿°ãäœæããŸããããããŠããã®é¢æ°ãã¬ãŒããšããŠäœ¿çšãããŠãŒã¶ãŒãåŠçããåã«`email`ããããã£ãæå¹ã§ããããšã確èªããŠããŸãã
åå²ä»£å ¥ãšã¬ãŒããçšãããã¿ãŒã³ãããã³ã°ã®äŸ
APIã¬ã¹ãã³ã¹ã®åŠç
æåãŸãã¯ãšã©ãŒã®ããããã®ã¬ã¹ãã³ã¹ãè¿ãAPIãšã³ããã€ã³ããèããŠã¿ãŸãããïŒ
async function fetchData(url) {
try {
const response = await fetch(url);
const data = await response.json();
if (data.status === 'success') {
const { status, data: payload } = data;
console.log('Data:', payload); // Process the data
return payload;
} else if (data.status === 'error') {
const { status, error } = data;
console.error('Error:', error.message); // Handle the error
throw new Error(error.message);
} else {
console.error('Unexpected response format:', data);
throw new Error('Unexpected response format');
}
} catch (err) {
console.error('Fetch error:', err);
throw err;
}
}
// Example usage (replace with a real API endpoint)
//fetchData('https://api.example.com/data')
// .then(data => console.log('Received data:', data))
// .catch(err => console.error('Failed to fetch data:', err));
ãã®äŸã§ã¯ãã¬ã¹ãã³ã¹ããŒã¿ããã®`status`ããããã£ã«åºã¥ããŠåå²ä»£å ¥ããŠããŸããã¹ããŒã¿ã¹ã`'success'`ã®å Žåã¯ãã€ããŒããæœåºããã¹ããŒã¿ã¹ã`'error'`ã®å Žåã¯ãšã©ãŒã¡ãã»ãŒãžãæœåºããŸããããã«ãããç°ãªãã¬ã¹ãã³ã¹ã¿ã€ããæ§é åãããèªã¿ãããæ¹æ³ã§åŠçã§ããŸãã
ãŠãŒã¶ãŒå ¥åã®åŠç
ãã¿ãŒã³ãããã³ã°ã¯ããŠãŒã¶ãŒå ¥åãåŠçããéã«éåžžã«åœ¹ç«ã¡ãŸããç¹ã«ãç°ãªãå ¥åã¿ã€ãããã©ãŒããããæ±ãå Žåã«äŸ¿å©ã§ãããŠãŒã¶ãŒã³ãã³ããåŠçãã颿°ãæ³åããŠã¿ãŠãã ããïŒ
function processCommand(command) {
const [action, ...args] = command.split(' ');
switch (action) {
case 'CREATE':
const [type, name] = args;
console.log(`Creating ${type} with name ${name}`);
break;
case 'DELETE':
const [id] = args;
console.log(`Deleting item with ID ${id}`);
break;
case 'UPDATE':
const [id, property, value] = args;
console.log(`Updating item with ID ${id}, property ${property} to ${value}`);
break;
default:
console.log(`Unknown command: ${action}`);
}
}
processCommand('CREATE user John');
processCommand('DELETE 123');
processCommand('UPDATE 456 name Jane');
processCommand('INVALID_COMMAND');
ãã®äŸã§ã¯ãåå²ä»£å ¥ã䜿çšããŠã³ãã³ãã®ã¢ã¯ã·ã§ã³ãšåŒæ°ãæœåºããŠããŸãããã®åŸã`switch`æãç°ãªãã³ãã³ãã¿ã€ããåŠçããç¹å®ã®ã³ãã³ãã«åºã¥ããŠåŒæ°ãããã«åå²ä»£å ¥ããŸãããã®ã¢ãããŒãã«ãããã³ãŒããèªã¿ããããªããæ°ããã³ãã³ãã§æ¡åŒµããã®ã容æã«ãªããŸãã
èšå®ãªããžã§ã¯ãã®æäœ
èšå®ãªããžã§ã¯ãã«ã¯ããã°ãã°ãªãã·ã§ã³ã®ããããã£ããããŸããããã©ã«ãå€ä»ãã®åå²ä»£å ¥ã䜿çšããããšã§ããããã®ã·ããªãªããšã¬ã¬ã³ãã«åŠçã§ããŸãïŒ
function createServer(config) {
const { port = 8080, host = 'localhost', timeout = 30 } = config;
console.log(`Starting server on ${host}:${port} with timeout ${timeout} seconds.`);
// ... server creation logic
}
createServer({}); // Uses default values
createServer({ port: 9000 }); // Overrides port
createServer({ host: 'api.example.com', timeout: 60 }); // Overrides host and timeout
ãã®äŸã§ã¯ã`port`ã`host`ã`timeout`ããããã£ã«ããã©ã«ãå€ããããŸãããããã®ããããã£ã`config`ãªããžã§ã¯ãã§æäŸãããªãå Žåãããã©ã«ãå€ã䜿çšãããŸããããã«ããããµãŒããŒäœæããžãã¯ãç°¡çŽ åãããããå ç¢ã«ãªããŸãã
åå²ä»£å ¥ãšã¬ãŒããçšãããã¿ãŒã³ãããã³ã°ã®å©ç¹
- ã³ãŒãã®å¯èªæ§ã®åäžïŒ åå²ä»£å ¥ãšã¬ãŒãã¯ãã³ãŒããããç°¡æœã§çè§£ããããããŸããã³ãŒãã®æå³ãæç¢ºã«è¡šçŸãããã€ã©ãŒãã¬ãŒãã³ãŒãã®éãæžãããŸãã
- ãã€ã©ãŒãã¬ãŒãã®åæžïŒ å€ãçŽæ¥å€æ°ã«æœåºããããšã§ãå埩çãªã€ã³ããã¯ã¹ä»ããããããã£ã¢ã¯ã»ã¹ãåé¿ã§ããŸãã
- ã³ãŒãã®ä¿å®æ§ã®åäžïŒ ãã¿ãŒã³ãããã³ã°ã«ãããã³ãŒãã®å€æŽãšæ¡åŒµã容æã«ãªããŸããæ°ãããã¿ãŒã³ãå°å ¥ãããå Žåã`switch`æã«æ°ããã±ãŒã¹ã远å ããããã³ãŒãã«æ°ãã`if`æã远å ãããããã ãã§æžã¿ãŸãã
- ã³ãŒãã®å®å šæ§ã®åäžïŒ ã¬ãŒãã¯ãç¹å®ã®æ¡ä»¶ãæºããããå Žåã«ã®ã¿ã³ãŒããå®è¡ãããããã«ããããšã§ããšã©ãŒãé²ãã®ã«åœ¹ç«ã¡ãŸãã
å¶éäºé
åå²ä»£å ¥ãšã¬ãŒãã¯JavaScriptã§ãã¿ãŒã³ãããã³ã°ããšãã¥ã¬ãŒããã匷åãªæ¹æ³ãæäŸããŸããããã€ãã£ãã®ãã¿ãŒã³ãããã³ã°ãæã€èšèªãšæ¯èŒããŠããã€ãã®å¶éããããŸãïŒ
- ç¶²çŸ æ§ãã§ãã¯ã®æ¬ åŠïŒ JavaScriptã«ã¯çµã¿èŸŒã¿ã®ç¶²çŸ æ§ãã§ãã¯ããªãããããã¹ãŠã®å¯èœãªãã¿ãŒã³ãã«ããŒããŠããªãå Žåã«ã³ã³ãã€ã©ãèŠåãåºãããšã¯ãããŸããããã¹ãŠã®å¯èœãªã±ãŒã¹ãã³ãŒããåŠçããŠããããšãæåã§ç¢ºèªããå¿ èŠããããŸãã
- ãã¿ãŒã³ã®è€éæ§ã®å¶éïŒ è€éãªã¬ãŒã颿°ãäœæããããšã¯ã§ããŸãããç §åã§ãããã¿ãŒã³ã®è€éãã¯ãããé«åºŠãªãã¿ãŒã³ãããã³ã°ã·ã¹ãã ãšæ¯èŒããŠå¶éãããŸãã
- åé·æ§ïŒ `if`æã`switch`æã§ãã¿ãŒã³ãããã³ã°ããšãã¥ã¬ãŒããããšããã€ãã£ãã®ãã¿ãŒã³ãããã³ã°æ§æãããåé·ã«ãªãããšããããŸãã
ä»£æ¿æ¡ãšã©ã€ãã©ãª
ããã€ãã®ã©ã€ãã©ãªã¯ãJavaScriptã«ãããå æ¬çãªãã¿ãŒã³ãããã³ã°æ©èœãããããããšãç®æããŠããŸãããããã®ã©ã€ãã©ãªã¯ããã°ãã°ãã衚çŸåè±ããªæ§æãç¶²çŸ æ§ãã§ãã¯ã®ãããªæ©èœãæäŸããŸãã
- ts-pattern (TypeScript): TypeScriptçšã®äººæ°ã®ãã¿ãŒã³ãããã³ã°ã©ã€ãã©ãªã§ã匷åã§åå®å šãªãã¿ãŒã³ãããã³ã°ãæäŸããŸãã
- MatchaJS: ãã宣èšçãªãã¿ãŒã³ãããã³ã°æ§æãæäŸããJavaScriptã©ã€ãã©ãªã§ãã
ããé«åºŠãªãã¿ãŒã³ãããã³ã°æ©èœãå¿ èŠãªå Žåããå æ¬çãªãã¿ãŒã³ãããã³ã°ã®å©ç¹ãäŸåé¢ä¿ã远å ãããªãŒããŒããããäžåãå€§èŠæš¡ãªãããžã§ã¯ãã§äœæ¥ããŠããå Žåã¯ããããã®ã©ã€ãã©ãªã®äœ¿çšãæ€èšããŠãã ããã
çµè«
JavaScriptã«ã¯ãã€ãã£ãã®ãã¿ãŒã³ãããã³ã°ã¯ãããŸããããæ§é çåå²ä»£å ¥ãšã¬ãŒãã®çµã¿åããã¯ããã®æ©èœããšãã¥ã¬ãŒããã匷åãªæ¹æ³ãæäŸããŸãããããã®æ©èœã掻çšããããšã§ãç¹ã«è€éãªæ¡ä»¶åå²ããžãã¯ãæ±ãéã«ãããã¯ãªãŒã³ã§ãèªã¿ããããä¿å®æ§ã®é«ãã³ãŒããæžãããšãã§ããŸãããããã®ãã¯ããã¯ãåãå ¥ããŠãJavaScriptã®ã³ãŒãã£ã³ã°ã¹ã¿ã€ã«ãæ¹åããã³ãŒãããã衚çŸåè±ãã«ããŸããããJavaScriptãé²åãç¶ããã«ã€ããŠãå°æ¥çã«ã¯é¢æ°åããã°ã©ãã³ã°ãšãã¿ãŒã³ãããã³ã°ã®ããã®ããã«åŒ·åãªããŒã«ãç»å ŽããããšãæåŸ ã§ããŸãã