ãã€ãã©ã€ã³æŒç®åã§JavaScriptã®é«åºŠãªéåæåæãè§£ãæŸã¡ãŸããããã°ããŒãã«éçºåãã«ãèªã¿ãããä¿å®ããããéåæé¢æ°ãã§ãŒã³ãæ§ç¯ããæ¹æ³ãåŠã³ãŸãã
éåæé¢æ°ãã§ãŒã³ããã¹ã¿ãŒããïŒéåæåæã®ããã®JavaScriptãã€ãã©ã€ã³æŒç®å
çŸä»£ã®ãœãããŠã§ã¢éçºã®åºå€§ã§åžžã«é²åãç¶ããç¶æ³ã«ãããŠãJavaScriptã¯ã€ã³ã¿ã©ã¯ãã£ããªWebã¢ããªã±ãŒã·ã§ã³ããå ç¢ãªãµãŒããŒãµã€ãã·ã¹ãã ãçµã¿èŸŒã¿ããã€ã¹ã«è³ããŸã§ããããããã®ãåããæ¥µããŠéèŠãªèšèªã§ããç¶ããŠããŸããç¹ã«å€éšãµãŒãã¹ãè€éãªèšç®ãšå¯Ÿè©±ãããå埩åããã髿§èœãªJavaScriptã¢ããªã±ãŒã·ã§ã³ãæ§ç¯ããäžã§ã®äž»èŠãªèª²é¡ã¯ãéåææäœã®ç®¡çã«ãããŸãããããã®æäœãæ§æããæ¹æ³ã¯ãã³ãŒãããŒã¹ã®å¯èªæ§ãä¿å®æ§ãããã³å šäœçãªå質ã«åçãªåœ±é¿ãäžããå¯èœæ§ããããŸãã
é·å¹Žã«ããããéçºè
ã¯éåæã³ãŒãã®è€éããæãªãããããã®æŽç·Žããã解決çãæš¡çŽ¢ããŠããŸãããã³ãŒã«ããã¯ããPromiseããããŠé©æ°çãªasync/awaitæ§æã«è³ããŸã§ãJavaScriptã¯ãŸããŸãæŽç·ŽãããããŒã«ãæäŸããŠããŸãããçŸåšããã€ãã©ã€ã³æŒç®å (|>)ã®TC39ææ¡ãå¢ããå¢ããŠããäžã颿°åæã®æ°ãããã©ãã€ã ãéè¿ã«è¿«ã£ãŠããŸããasync/awaitã®åãšçµã¿åãããããšã§ããã€ãã©ã€ã³æŒç®åã¯éåæé¢æ°ãã§ãŒã³ã®æ§ç¯æ¹æ³ãå€é©ãããã宣èšçã§ãæµãããããªãçŽæçãªã³ãŒãã«ã€ãªããããšãæåŸ
ãããŸãã
ãã®å æ¬çãªã¬ã€ãã§ã¯ãJavaScriptã«ãããéåæåæã®äžçãæ·±ãæãäžããåŸæ¥ã®ã¡ãœãããããã€ãã©ã€ã³æŒç®åã®æå 端ã®å¯èœæ§ãŸã§ã®éã®ããæ¢ããŸãããã®ä»çµã¿ãè§£ãæãããéåæã³ã³ããã¹ãã§ã®ãã®é©çšã瀺ããã°ããŒãã«éçºããŒã ã«ãšã£ãŠã®ãã®æ·±ãå©ç¹ã匷調ãããã®å¹æçãªæ¡çšã«å¿ èŠãªèæ ®äºé ã«å¯ŸåŠããŸããéåæJavaScriptåæã¹ãã«ãæ°ããªé«ã¿ãžãšåŒãäžããæºåãããŠãã ããã
éåæJavaScriptã®æ ¹åŒ·ã課é¡
JavaScriptã®ã·ã³ã°ã«ã¹ã¬ããã§ã€ãã³ãé§ååã®æ§è³ªã¯ã匷ã¿ã§ãããšåæã«è€éãã®æºã§ããããŸãããã³ããããã³ã°I/Oæäœãå¯èœã«ããå¿çæ§ã®é«ããŠãŒã¶ãŒãšã¯ã¹ããªãšã³ã¹ãšå¹ççãªãµãŒããŒãµã€ãåŠçãä¿èšŒããäžæ¹ã§ãå³åº§ã«å®äºããªãæäœã®æ³šææ·±ã管çãå¿ èŠãšããŸãããããã¯ãŒã¯ãªã¯ãšã¹ãããã¡ã€ã«ã·ã¹ãã ã¢ã¯ã»ã¹ãããŒã¿ããŒã¹ã¯ãšãªãèšç®éã®å€ãã¿ã¹ã¯ã¯ãã¹ãŠããã®éåæã«ããŽãªã«åé¡ãããŸãã
ã³ãŒã«ããã¯å°çããå¶åŸ¡ãããã«ãªã¹ãž
JavaScriptã«ãããåæã®éåæãã¿ãŒã³ã¯ãã³ãŒã«ããã¯ã«å€§ããäŸåããŠããŸãããã³ãŒã«ããã¯ãšã¯ãèŠªé¢æ°ãã¿ã¹ã¯ãå®äºããåŸã«å®è¡ããããå¥ã®é¢æ°ã«åŒæ°ãšããŠæž¡ãããåçŽãªé¢æ°ã§ããåäžã®æäœã§ã¯åçŽã§ãããè€æ°ã®äŸåããéåæã¿ã¹ã¯ããã§ãŒã³ãããšãããã«æªåé«ã"Callback Hell"ãŸãã¯"Pyramid of Doom"ã«ã€ãªãããŸããã
function fetchData(url, callback) {
// Simulate async data fetch
setTimeout(() => {
const data = `Fetched data from ${url}`;
callback(null, data);
}, 1000);
}
function processData(data, callback) {
// Simulate async data processing
setTimeout(() => {
const processed = `Processed: ${data}`;
callback(null, processed);
}, 800);
}
function saveData(processedData, callback) {
// Simulate async data saving
setTimeout(() => {
const saved = `Saved: ${processedData}`;
callback(null, saved);
}, 600);
}
// Callback Hell in action:
fetchData('https://api.example.com/users', (error, data) => {
if (error) { console.error(error); return; }
processData(data, (error, processed) => {
if (error) { console.error(error); return; }
saveData(processed, (error, saved) => {
if (error) { console.error(error); return; }
console.log(saved);
});
});
});
ãã®æ·±ããã¹ããããæ§é ã¯ããšã©ãŒåŠçãç ©éã«ããããžãã¯ã远跡ãã«ãããããªãã¡ã¯ã¿ãªã³ã°ãå±éºãªã¿ã¹ã¯ã«ããŸãããã®ãããªã³ãŒãã§å ±åäœæ¥ãè¡ãã°ããŒãã«ããŒã ã¯ãæ°ããæ©èœã®å®è£ ããããããŒãè§£èªããããšã«æéãè²»ããããšãå€ããçç£æ§ã®äœäžãšæè¡çè² åµã®å¢å ã«ã€ãªãã£ãŠããŸããã
PromiseïŒæ§é åãããã¢ãããŒã
Promiseã¯ãéåææäœãåŠçããããã®ããæ§é åãããæ¹æ³ãæäŸããããšã§ã倧ããªæ¹åãšããŠç»å ŽããŸãããPromiseã¯ãéåææäœã®æçµçãªå®äºïŒãŸãã¯å€±æïŒãšãã®çµæã®å€ã衚ããŸãããããã¯ã.then()ã䜿çšããæäœã®é£éãšã.catch()ã䜿çšããå
ç¢ãªãšã©ãŒåŠçãå¯èœã«ããŸãã
function fetchDataPromise(url) {
return new Promise((resolve, reject) => {
setTimeout(() => {
const data = `Fetched data from ${url}`;
resolve(data);
}, 1000);
});
}
function processDataPromise(data) {
return new Promise((resolve, reject) => {
setTimeout(() => {
const processed = `Processed: ${data}`;
resolve(processed);
}, 800);
});
}
function saveDataPromise(processedData) {
return new Promise((resolve, reject) => {
setTimeout(() => {
const saved = `Saved: ${processedData}`;
resolve(saved);
}, 600);
});
}
// Promise chain:
fetchDataPromise('https://api.example.com/products')
.then(data => processDataPromise(data))
.then(processed => saveDataPromise(processed))
.then(saved => console.log(saved))
.catch(error => console.error('An error occurred:', error));
Promiseã¯ã³ãŒã«ããã¯ã®ãã©ããããå¹³åŠåããæäœã®ã·ãŒã±ã³ã¹ãããæç¢ºã«ããŸããããããããããã¯ãŸã æç€ºçãªãã§ãŒãã³ã°æ§æïŒ.then()ïŒã䌎ããããã¯æ©èœçã§ã¯ãããã®ã®ãããŒã¿ã®çŽæ¥çãªæµããšããããããPromiseãªããžã§ã¯ãèªäœã«å¯Ÿããäžé£ã®é¢æ°åŒã³åºãã®ããã«æããããããšããããŸããã
Async/AwaitïŒåæçãªèŠãç®ã®éåæã³ãŒã
ES2017ã§ã®async/awaitã®å°å
¥ã¯ãç»æçãªé²æ©ãéããŸãããPromiseã®äžã«æ§ç¯ãããasync/awaitã¯ãéçºè
ãåæã³ãŒããšãã䌌ãèŠãç®ãšåäœãããéåæã³ãŒããæžãããšãå¯èœã«ããå¯èªæ§ã倧å¹
ã«åäžãããèªç¥è² è·ã軜æžããŸãã
async function performComplexOperation() {
try {
const data = await fetchDataPromise('https://api.example.com/reports');
const processed = await processDataPromise(data);
const saved = await saveDataPromise(processed);
console.log(saved);
} catch (error) {
console.error('An error occurred:', error);
}
}
performComplexOperation();
async/awaitã¯ãç¹ã«ç·åœ¢éåæã¯ãŒã¯ãããŒã«ãããŠãåè¶ããæçãããããããŸããåawaitããŒã¯ãŒãã¯ãPromiseã解決ããããŸã§async颿°ã®å®è¡ãäžæåæ¢ãããããŒã¿ãããŒãéåžžã«æç€ºçã«ããŸãããã®æ§æã¯äžçäžã®éçºè
ã«åºãæ¡çšãããã»ãšãã©ã®ã¢ãã³ãªJavaScriptãããžã§ã¯ãã§éåææäœãåŠçããäºå®äžã®æšæºãšãªã£ãŠããŸãã
JavaScriptãã€ãã©ã€ã³æŒç®å (|>) ã®å°å
¥
async/awaitã¯éåæã³ãŒããåæã³ãŒãã®ããã«èŠããããšã«åªããŠããŸãããJavaScriptã³ãã¥ããã£ã¯é¢æ°ãæ§æããããã®ãã衚çŸåè±ãã§ç°¡æœãªæ¹æ³ãåžžã«æš¡çŽ¢ããŠããŸããããã§ãã€ãã©ã€ã³æŒç®å (|>) ãç»å ŽããŸããçŸåšãStage 2 TC39ææ¡ã§ãããã®æ©èœã¯ãããæµæ¢ã§èªã¿ããã颿°åæãå¯èœã«ããç¹ã«å€ãäžé£ã®å€æãééããå¿
èŠãããå Žåã«åœ¹ç«ã¡ãŸãã
ãã€ãã©ã€ã³æŒç®åãšã¯ïŒ
ãã®æ žãšãªãã®ã¯ãå·ŠåŽã®åŒã®è©äŸ¡çµæãå³åŽã®é¢æ°åŒã³åºãã®åŒæ°ãšããŠæž¡ãæ§æã§ããããã¯F#ãElixirã®ãããªé¢æ°åããã°ã©ãã³ã°èšèªããã³ãã³ãã©ã€ã³ã·ã§ã«ïŒäŸïŒgrep | sort | uniqïŒã§èŠããããã€ãæŒç®åã«äŒŒãŠããŸãã
ãã€ãã©ã€ã³æŒç®åã«ã¯ç°ãªãææ¡ïŒäŸïŒF#ã¹ã¿ã€ã«ãHackã¹ã¿ã€ã«ïŒããããŸãããTC39å§å¡äŒãçŸåšäž»ã«çŠç¹ãåœãŠãŠããã®ã¯Hackã¹ã¿ã€ã«ã®ææ¡ã§ãããããã¯ãã€ãã©ã€ã³å
ã§awaitãçŽæ¥äœ¿çšããããå¿
èŠã«å¿ããŠthisã䜿çšãããããèœåãå«ããããå€ãã®æè»æ§ãæäŸããŸããéåæåæã®ç®çã®ããã«ãHackã¹ã¿ã€ã«ã®ææ¡ã¯ç¹ã«éèŠã§ãã
ãã€ãã©ã€ã³æŒç®åã䜿çšããªããåçŽãªåæå€æãã§ãŒã³ãèããŠã¿ãŸãããã
const value = 10;
const addFive = (num) => num + 5;
const multiplyByTwo = (num) => num * 2;
const subtractThree = (num) => num - 3;
// Traditional composition (reads inside-out):
const resultTraditional = subtractThree(multiplyByTwo(addFive(value)));
console.log(resultTraditional); // (10 + 5) * 2 - 3 = 27
ãã®ãå åŽããå€åŽãžããšããèªã¿æ¹ã¯ãç¹ã«å€ãã®é¢æ°ãããå Žåã«è§£æãå°é£ã«ãªãããšããããŸãããã€ãã©ã€ã³æŒç®åã¯ãã®åé¡ãé転ãããå·Šããå³ãžã®ããŒã¿ãããŒæåã®èªã¿æ¹ãå¯èœã«ããŸãã
const value = 10;
const addFive = (num) => num + 5;
const multiplyByTwo = (num) => num * 2;
const subtractThree = (num) => num - 3;
// Pipeline operator composition (reads left-to-right):
const resultPipeline = value
|> addFive
|> multiplyByTwo
|> subtractThree;
console.log(resultPipeline); // 27
ããã§ãvalueã¯addFiveã«æž¡ãããŸããaddFive(value)ã®çµæã¯æ¬¡ã«multiplyByTwoã«æž¡ãããŸããæåŸã«ãmultiplyByTwo(...)ã®çµæãsubtractThreeã«æž¡ãããŸããããã«ãããããŒã¿ã®å€æãæç¢ºã§ç·åœ¢çãªæµãã§è¡šçŸãããå¯èªæ§ãšç解床ã«ãããŠéåžžã«åŒ·åã§ãã
亀差ç¹ïŒãã€ãã©ã€ã³æŒç®åãšéåæåæ
ãã€ãã©ã€ã³æŒç®åã¯æ¬è³ªçã«é¢æ°åæã«é¢ãããã®ã§ãããéåææäœãšçµã¿åããããšãã«ãéçºè
äœéšãåäžããããã®çã®å¯èœæ§ãèŒããæŸã¡ãŸããAPIåŒã³åºããããŒã¿è§£æãæ€èšŒã®äžé£ã®åŠçãæ³åããŠã¿ãŠãã ããããããã¯ããããéåæã¹ãããã§ãããã€ãã©ã€ã³æŒç®åã¯ãasync/awaitãšé£æºããŠãããããéåžžã«èªã¿ãããä¿å®å¯èœãªãã§ãŒã³ã«å€æããããšãã§ããŸãã
|>ãasync/awaitãè£å®ããæ¹æ³
Hackã¹ã¿ã€ã«ã®ãã€ãã©ã€ã³ææ¡ã®å©ç¹ã¯ããã€ãã©ã€ã³å
ã§çŽæ¥awaitã§ããç¹ã§ããããã¯ãå€ãasync颿°ã«ãã€ããããã€ãã©ã€ã³ããã®é¢æ°ã®Promiseã解決ããã®ãèªåçã«åŸ
ã£ãŠããã解決ãããå€ã次ã®ã¹ãããã«æž¡ãããšãæå³ããŸããããã«ãããåæã³ãŒãã®ããã«èŠããéåæã³ãŒããšãæç€ºçãªé¢æ°åæãšã®éã®ã®ã£ãããåãŸããŸãã
ãŠãŒã¶ãŒããŒã¿ãååŸããæ¬¡ã«ãŠãŒã¶ãŒIDã䜿çšããŠãã®æ³šæãååŸããæåŸã«è¡šç€ºã®ããã«å šäœã®å¿çããã©ãŒãããããã·ããªãªãèããŠã¿ãŸããããåã¹ãããã¯éåæã§ãã
éåæé¢æ°ãã§ãŒã³ã®èšèš
éåæãã€ãã©ã€ã³ãèšèšããéã«ã¯ãåã¹ããŒãžãå ¥åãåãåãåºåãçæããçŽç²ãªé¢æ°ïŒãŸãã¯Promiseãè¿ãasync颿°ïŒãšããŠèããŠãã ãããããã¹ããŒãžã®åºåã¯æ¬¡ã®ã¹ããŒãžã®å ¥åã«ãªããŸãããã®é¢æ°åãã©ãã€ã ã¯ãã¢ãžã¥ãŒã«æ§ãšãã®ãã¹ãå¯èœæ§ãèªç¶ã«ä¿é²ããŸãã
éåæãã€ãã©ã€ã³ãã§ãŒã³ãèšèšããããã®äž»èŠãªååïŒ
- ã¢ãžã¥ãŒã«æ§ïŒãã€ãã©ã€ã³å ã®å颿°ã¯ãçæ³çã«ã¯åäžã®æç¢ºã«å®çŸ©ããã責任ãæã€ã¹ãã§ãã
- å ¥åºåã®äžè²«æ§ïŒãã颿°ã®åºååã¯ã次ã®é¢æ°ã§æåŸ ãããå ¥ååãšäžèŽããã¹ãã§ãã
- éåææ§ïŒéåæãã€ãã©ã€ã³å
ã®é¢æ°ã¯ãå€ãã®å ŽåPromiseãè¿ãã
awaitãæé»çãŸãã¯æç€ºçã«åŠçããŸãã - ãšã©ãŒåŠçïŒéåæãããŒå ã§ãšã©ãŒãã©ã®ããã«äŒæããã©ã®ããã«ææãããããèšç»ããŸãã
éåæãã€ãã©ã€ã³åæã®å®è·µäŸ
|>ã«ããéåæåæã®åã瀺ããå
·äœçãªã°ããŒãã«æåã®äŸã§èª¬æããŸãããã
äŸ1ïŒããŒã¿å€æãã€ãã©ã€ã³ïŒãã§ãã -> æ€èšŒ -> åŠçïŒ
éèååŒããŒã¿ãååŸãããã®æ§é ãæ€èšŒããç¹å®ã®ã¬ããŒãïŒå€æ§ãªåœéå°ååãã§ããå¯èœæ§ããããŸãïŒã®ããã«åŠçããã¢ããªã±ãŒã·ã§ã³ãæ³åããŠã¿ãŠãã ããã
// Assume these are async utility functions returning Promises
const fetchTransactionData = async (url) => {
console.log(`Fetching data from ${url}...`);
const response = await new Promise(resolve => setTimeout(() => resolve({ id: 'TRX123', amount: 12500, currency: 'USD', status: 'pending' }), 500));
console.log('Data fetched.');
return response;
};
const validateTransactionSchema = async (data) => {
console.log('Validating transaction schema...');
// Simulate schema validation, e.g., checking for required fields
if (!data || !data.id || !data.amount) {
throw new Error('Invalid transaction data schema.');
}
const validatedData = { ...data, validatedAt: new Date().toISOString() };
console.log('Schema validated.');
return validatedData;
};
const enrichTransactionData = async (data) => {
console.log('Enriching transaction data...');
// Simulate fetching currency conversion rates or user details
const exchangeRate = await new Promise(resolve => setTimeout(() => resolve(0.85), 300)); // USD to EUR conversion
const enrichedData = { ...data, amountEUR: data.amount * exchangeRate, region: 'Europe' };
console.log('Data enriched.');
return enrichedData;
};
const storeProcessedTransaction = async (data) => {
console.log('Storing processed transaction...');
// Simulate saving to a database or sending to another service
const storedRecord = { ...data, stored: true, storageId: Math.random().toString(36).substring(7) };
console.log('Transaction stored.');
return storedRecord;
};
async function executeTransactionPipeline(transactionUrl) {
try {
const finalResult = await (transactionUrl
|> await fetchTransactionData
|> await validateTransactionSchema
|> await enrichTransactionData
|> await storeProcessedTransaction);
console.log('\nFinal Transaction Result:', finalResult);
return finalResult;
} catch (error) {
console.error('\nTransaction pipeline failed:', error.message);
// Global error reporting or fallback mechanism
return { success: false, error: error.message };
}
}
// Run the pipeline
executeTransactionPipeline('https://api.finance.com/transactions/latest');
// Example with invalid data to trigger error
// executeTransactionPipeline('https://api.finance.com/transactions/invalid');
ãã€ãã©ã€ã³å
ã®å颿°ã®åã«awaitã䜿çšãããŠããããšã«æ³šç®ããŠãã ãããããã¯Hackã¹ã¿ã€ã«ã®ææ¡ã®éèŠãªåŽé¢ã§ããããã€ãã©ã€ã³ãäžæåæ¢ããåasync颿°ã«ãã£ãŠè¿ãããPromiseã解決ããŠããããã®å€ã次ã®ã¹ãããã«æž¡ãããšãå¯èœã«ããŸãããããŒã¯éåžžã«æç¢ºã§ãããURLããéå§ããæ¬¡ã«ããŒã¿ã®ååŸãåŸ
æ©ããæ¬¡ã«æ€èšŒãåŸ
æ©ããæ¬¡ã«ãšã³ãªãããåŸ
æ©ããæ¬¡ã«ä¿åãåŸ
æ©ããããšããæµãã§ãã
äŸ2ïŒãŠãŒã¶ãŒèªèšŒãšèªå¯ãããŒ
ããŒã¯ã³æ€èšŒããŠãŒã¶ãŒããŒã«ã®ååŸãã»ãã·ã§ã³äœæãå«ããã°ããŒãã«ãšã³ã¿ãŒãã©ã€ãºã¢ããªã±ãŒã·ã§ã³ã®å€æ®µéèªèšŒããã»ã¹ãèããŠã¿ãŸãããã
const validateAuthToken = async (token) => {
console.log('Validating authentication token...');
if (!token || token !== 'valid-jwt-token-123') {
throw new Error('Invalid or expired authentication token.');
}
// Simulate async validation against an auth service
const userId = await new Promise(resolve => setTimeout(() => resolve('user_007'), 400));
return { userId, token };
};
const fetchUserRoles = async ({ userId, token }) => {
console.log(`Fetching roles for user ${userId}...`);
// Simulate async database query or API call for roles
const roles = await new Promise(resolve => setTimeout(() => resolve(['admin', 'editor']), 300));
return { userId, token, roles };
};
const createSession = async ({ userId, token, roles }) => {
console.log(`Creating session for user ${userId} with roles ${roles.join(', ')}...`);
// Simulate async session creation in a session store
const sessionId = await new Promise(resolve => setTimeout(() => resolve(`sess_${Math.random().toString(36).substring(7)}`), 200));
return { userId, roles, sessionId, status: 'active' };
};
async function authenticateUser(authToken) {
try {
const userSession = await (authToken
|> await validateAuthToken
|> await fetchUserRoles
|> await createSession);
console.log('\nUser session established:', userSession);
return userSession;
} catch (error) {
console.error('\nAuthentication failed:', error.message);
return { success: false, error: error.message };
}
}
// Run the authentication flow
authenticateUser('valid-jwt-token-123');
// Example with an invalid token
// authenticateUser('invalid-token');
ãã®äŸã¯ãè€éã§äŸåé¢ä¿ã®ããéåæã¹ãããããããã«ããŠåäžã®éåžžã«èªã¿ããããããŒã«åæã§ããããæç¢ºã«ç€ºããŠããŸããåã¹ããŒãžã¯åã®ã¹ããŒãžã®åºåãåãåãããã€ãã©ã€ã³ãé²ãã«ã€ããŠäžè²«ããããŒã¿åœ¢ç¶ãä¿èšŒããŸãã
éåæãã€ãã©ã€ã³åæã®å©ç¹
éåæé¢æ°ãã§ãŒã³ã«ãã€ãã©ã€ã³æŒç®åãæ¡çšããããšã¯ãç¹ã«å€§èŠæš¡ã§ã°ããŒãã«ã«åæ£ããéçºäœæ¥ã«ãšã£ãŠãããã€ãã®èª¬åŸåã®ããå©ç¹ããããããŸãã
å¯èªæ§ãšä¿å®æ§ã®åäž
æãçŽæ¥çãã€æ·±é ãªå©ç¹ã¯ãã³ãŒãã®å¯èªæ§ãåçã«åäžããããšã§ããããŒã¿ãå·Šããå³ã«æµãããšã§ããã€ãã©ã€ã³æŒç®åã¯èªç¶èšèªåŠçããç§ãã¡ãé£ç¶ããæäœã粟ç¥çã«ã¢ãã«åããæ¹æ³ãæš¡å£ããŸãããã¹ããããåŒã³åºããåé·ãªPromiseãã§ãŒã³ã®ä»£ããã«ãããŒã¿å€æã®ã¯ãªãŒã³ã§ç·åœ¢çãªè¡šçŸãåŸãããŸããããã¯ä»¥äžã®ç¹ã§éåžžã«è²Žéã§ãã
- æ°èŠéçºè ã®ãªã³ããŒãã£ã³ã°ïŒæ°ããããŒã ã¡ã³ããŒã¯ã以åã®èšèªçµéšã«é¢ä¿ãªããéåæããã»ã¹ã®æå³ãšæµããçŽ æ©ãçè§£ã§ããŸãã
- ã³ãŒãã¬ãã¥ãŒïŒã¬ãã¥ãŒæ åœè ã¯ããŒã¿ã®æµãã容æã«è¿œè·¡ã§ããæœåšçãªåé¡ãç¹å®ããããããå¹ççã«æé©åãææ¡ãããã§ããŸãã
- é·æçãªä¿å®ïŒã¢ããªã±ãŒã·ã§ã³ãé²åããã«ã€ããŠãæ¢åã®ã³ãŒããçè§£ããããšãæéèŠã«ãªããŸãããã€ãã©ã€ã³åãããéåæãã§ãŒã³ã¯ãäœå¹Žçµã£ãŠãå確èªãä¿®æ£ã容æã§ãã
ããŒã¿ãããŒã®èŠèŠåã®åäž
ãã€ãã©ã€ã³æŒç®åã¯ãäžé£ã®å€æãéããŠããŒã¿ãæµããæ§åãèŠèŠçã«è¡šçŸããŸããå|>ã¯æç¢ºãªåºåããšããŠæ©èœãããã®åã«ããå€ããã®åŸã®é¢æ°ã«æž¡ãããŠããããšã瀺ããŸãããã®èŠèŠçãªæçãã¯ãã·ã¹ãã ã®ã¢ãŒããã¯ãã£ãæŠå¿µåããã¯ãŒã¯ãããŒå
ã§ç°ãªãã¢ãžã¥ãŒã«ãã©ã®ããã«çžäºäœçšããããçè§£ããã®ã«åœ¹ç«ã¡ãŸãã
ãããã°ã®å®¹æå
è€éãªéåææäœã§ãšã©ãŒãçºçããå Žåãåé¡ãçºçããæ£ç¢ºãªã¹ããŒãžãç¹å®ããã®ã¯å°é£ãªå ŽåããããŸãããã€ãã©ã€ã³åæã§ã¯ãåã¹ããŒãžãåå¥ã®é¢æ°ã§ãããããåé¡ããã广çã«åé¢ã§ããããšããããããŸããæšæºã®ãããã°ããŒã«ã¯ã³ãŒã«ã¹ã¿ãã¯ã衚瀺ããã©ã®ãã€ãããã颿°ãäŸå€ãã¹ããŒããããç°¡åã«ç¢ºèªã§ããŸããããã«ãåãã€ãããã颿°å
ã«æŠç¥çã«é
眮ãããconsole.logãŸãã¯ãããã¬ãŒã¹ããŒãã¡ã³ãã¯ãåã¹ããŒãžã®å
¥åãšåºåãæç¢ºã«å®çŸ©ãããŠããããããã广çã§ãã
颿°åããã°ã©ãã³ã°ãã©ãã€ã ã®åŒ·å
ãã€ãã©ã€ã³æŒç®åã¯ãå ¥åãåãåããå¯äœçšãªãåºåãè¿ãçŽç²ãªé¢æ°ã«ãã£ãŠããŒã¿å€æãå®è¡ãããã颿°åããã°ã©ãã³ã°ã¹ã¿ã€ã«ãåŒ·ãæšå¥šããŸãããã®ãã©ãã€ã ã«ã¯å€ãã®å©ç¹ããããŸãã
- ãã¹ãå®¹ææ§ïŒçŽç²ãªé¢æ°ã¯ããã®åºåãå ¥åã®ã¿ã«äŸåãããããæ¬è³ªçã«ãã¹ãã容æã§ãã
- äºæž¬å¯èœæ§ïŒå¯äœçšããªãããšã§ãã³ãŒãã¯ããäºæž¬å¯èœã«ãªãã埮åŠãªãã°ãçºçããå¯èœæ§ãæžå°ããŸãã
- æ§æå¯èœæ§ïŒãã€ãã©ã€ã³çšã«èšèšããã颿°ã¯ãèªç¶ã«åæå¯èœã§ãããã¢ããªã±ãŒã·ã§ã³ã®ç°ãªãéšåãç°ãªããããžã§ã¯ãéã§åå©çšå¯èœã«ãªããŸãã
äžé倿°ã®åæž
åŸæ¥ã®async/awaitãã§ãŒã³ã§ã¯ãåéåæã¹ãããã®çµæãä¿æããããã«äžé倿°ã宣èšãããããšããããããŸãã
const data = await fetchData();
const processedData = await processData(data);
const finalResult = await saveData(processedData);
ããã¯æç¢ºã§ã¯ãããŸãããäžåºŠãã䜿çšãããªãå¯èœæ§ã®ããäžæå€æ°ã倧éã«çºçããå¯èœæ§ããããŸãããã€ãã©ã€ã³æŒç®åã¯ãããã®äžé倿°ã®å¿ èŠæ§ãæé€ããããŒã¿ãããŒãããç°¡æœãã€çŽæ¥çã«è¡šçŸããŸãã
const finalResult = await (initialValue
|> await fetchData
|> await processData
|> await saveData);
ãã®ç°¡æœãã¯ãããã¯ãªãŒã³ãªã³ãŒãã«è²¢ç®ããèŠèŠçãªä¹±éããæžãããŸããããã¯ç¹ã«è€éãªã¯ãŒã¯ãããŒã«ãããŠæçã§ãã
æœåšçãªèª²é¡ãšèæ ®äºé
ãã€ãã©ã€ã³æŒç®åã¯å€§ããªå©ç¹ããããããŸãããç¹ã«éåæåæã«ããããã®æ¡çšã«ã¯ãç¬èªã®èæ ®äºé ã䌎ããŸãããããã®èª²é¡ãèªèããããšã¯ãã°ããŒãã«ããŒã ã«ããå®è£ ãæåãããããã«äžå¯æ¬ ã§ãã
ãã©ãŠã¶/ã©ã³ã¿ã€ã ãµããŒããšãã©ã³ã¹ãã€ã«
ãã€ãã©ã€ã³æŒç®åã¯ãŸã Stage 2ã®ææ¡ã§ããããããã©ã³ã¹ãã€ã«ãªãã§ã¯çŸåšã®ãã¹ãŠã®JavaScriptãšã³ãžã³ïŒãã©ãŠã¶ãNode.jsãªã©ïŒã§ãã€ãã£ãã«ãµããŒããããŠããŸãããããã¯ãéçºè ãã³ãŒããäºææ§ã®ããJavaScriptã«å€æããããã«Babelã®ãããªããŒã«ã䜿çšããå¿ èŠãããããšãæå³ããŸããããã«ããããã«ãã¹ããããšæ§æã®ãªãŒããŒããããå¢å ããããŒã ã¯ãããèæ ®ã«å ¥ããå¿ èŠããããŸããéçºç°å¢å šäœã§ãã«ãããŒã«ãã§ãŒã³ãææ°ãã€äžè²«ããç¶æ ã«ä¿ã€ããšã¯ãã·ãŒã ã¬ã¹ãªçµ±åã®ããã«äžå¯æ¬ ã§ãã
ãã€ãã©ã€ã³åãããéåæãã§ãŒã³ã§ã®ãšã©ãŒåŠç
async/awaitã®try...catchãããã¯ã¯ã·ãŒã±ã³ã·ã£ã«ãªæäœã«ããããšã©ãŒããšã¬ã¬ã³ãã«åŠçããŸããããã€ãã©ã€ã³å
ã®ãšã©ãŒåŠçã«ã¯æ
éãªèæ
®ãå¿
èŠã§ãããã€ãã©ã€ã³å
ã®ããããã®é¢æ°ããšã©ãŒãã¹ããŒããããæåŠãããPromiseãè¿ãããããå Žåããã€ãã©ã€ã³å
šäœã®å®è¡ã¯åæ¢ãããšã©ãŒã¯ãã§ãŒã³ãäŒæããŸããå€åŽã®awaitåŒã¯äŸå€ãã¹ããŒããå²ãtry...catchãããã¯ããããææã§ããŸããããã¯ç§ãã¡ã®äŸã§ç€ºãããŠããŸãã
ãã€ãã©ã€ã³ã®ç¹å®ã®ã¹ããŒãžå
ã§ãã詳现ãªãšã©ãŒåŠçãå埩ãè¡ãã«ã¯ãåã
ã®ãã€ãããã颿°ãç¬èªã®try...catchã§ã©ãããããããã€ããããåã«Promiseã®.catch()ã¡ãœããã颿°èªäœã«çµã¿èŸŒãã ãããå¿
èŠãããå ŽåããããŸããããã¯ãç¹ã«å埩å¯èœãªãšã©ãŒãšå埩äžèœãªãšã©ãŒãåºå¥ããå Žåãææ
®æ·±ã管çããªããšè€éããå¢ãããšããããŸãã
è€éãªãã§ãŒã³ã®ãããã°
ã¢ãžã¥ãŒã«æ§ã«ãããããã°ã¯å®¹æã«ãªãå¯èœæ§ããããŸãããå€ãã®ã¹ããŒãžãè€éãªããžãã¯ãå®è¡ãã颿°ãæã€è€éãªãã€ãã©ã€ã³ã¯ãäŸç¶ãšããŠèª²é¡ãæèµ·ããå¯èœæ§ããããŸããåãã€ãã®æ¥åéšã§ã®ããŒã¿ã®æ£ç¢ºãªç¶æ ãçè§£ããã«ã¯ãåªããã¡ã³ã¿ã«ã¢ãã«ãŸãã¯ãããã¬ãŒã®èªç±ãªäœ¿çšãå¿ èŠã§ããææ°ã®IDEãšãã©ãŠã¶éçºããŒã«ã¯åžžã«æ¹åãããŠããŸãããéçºè ã¯ãã€ãã©ã€ã³ãæ éã«ã¹ãããå®è¡ããæºåãããŠããã¹ãã§ãã
éå°ãªäœ¿çšãšå¯èªæ§ã®ãã¬ãŒããªã
ã©ããªåŒ·åãªæ©èœãããã§ããããã€ãã©ã€ã³æŒç®åãé床ã«äœ¿çšãããå¯èœæ§ããããŸããéåžžã«åçŽãªå€æã®å ŽåãçŽæ¥é¢æ°ãåŒã³åºãæ¹ãèªã¿ãããããšããããŸããåã®ã¹ãããããç°¡åã«å°ãåºããªãè€æ°ã®åŒæ°ãæã€é¢æ°ã®å Žåããã€ãã©ã€ã³æŒç®åã¯å®éã«ã¯ã³ãŒããäžæçã«ããæç€ºçãªã©ã ã颿°ãéšåé©çšãå¿ èŠãšããå¯èœæ§ããããŸããç°¡æœããšæçãã®é©åãªãã©ã³ã¹ãåãããšãéèŠã§ããããŒã ã¯ãäžè²«æ§ã®ããé©åãªäœ¿çšã確ä¿ããããã«ã³ãŒãã£ã³ã°ã¬ã€ãã©ã€ã³ã確ç«ãã¹ãã§ãã
åæ vs. åå²ããžãã¯
ãã€ãã©ã€ã³æŒç®åã¯ãã·ãŒã±ã³ã·ã£ã«ã§ç·åœ¢çãªããŒã¿ãããŒã®ããã«èšèšãããŠããŸããããã¹ãããã®åºåãåžžã«æ¬¡ã®ã¹ãããã«çŽæ¥äŸçµŠããã倿ã«ã¯åªããŠããŸããããããæ¡ä»¶åå²ããžãã¯ïŒäŸïŒãããXãªãã°Aãå®è¡ããããã§ãªããã°Bãå®è¡ãããïŒã«ã¯ããŸãé©ããŠããŸããããã®ãããªã·ããªãªã§ã¯ãåŸæ¥ã®if/elseæãswitchæããŸãã¯Eitherã¢ããïŒé¢æ°åã©ã€ãã©ãªãšçµ±åããå ŽåïŒã®ãããªããé«åºŠãªãã¯ããã¯ãããã€ãã©ã€ã³ã®åãŸãã¯åŸããããã¯ãã€ãã©ã€ã³èªäœã®åäžã¹ããŒãžå
ã§ãããé©åã§ãããã
é«åºŠãªãã¿ãŒã³ãšå°æ¥ã®å¯èœæ§
åºæ¬çãªéåæåæãè¶ ããŠããã€ãã©ã€ã³æŒç®åã¯ããé«åºŠãªé¢æ°åããã°ã©ãã³ã°ãã¿ãŒã³ãšçµ±åãžã®æãéããŸãã
ãã€ãã©ã€ã³ã«ããã«ãªãŒåãšéšåé©çš
ã«ãªãŒåããã颿°ãéšåé©çšããã颿°ã¯ããã€ãã©ã€ã³æŒç®åã«èªç¶ã«é©åããŸããã«ãªãŒåã¯ãè€æ°ã®åŒæ°ãåãåã颿°ãããããããåäžã®åŒæ°ãåãåãäžé£ã®é¢æ°ã«å€æããŸããéšåé©çšã¯ã颿°ã®1ã€ãŸãã¯è€æ°ã®åŒæ°ãåºå®ããããå°ãªãåŒæ°ãæã€æ°ãã颿°ãè¿ããŸãã
// Example of a curried function
const greet = (greeting) => (name) => `${greeting}, ${name}!`;
const greetHello = greet('Hello');
const greetHi = greet('Hi');
const userName = 'Alice';
const message1 = userName
|> greetHello; // 'Hello, Alice!'
const message2 = 'Bob'
|> greetHi; // 'Hi, Bob!'
console.log(message1, message2);
ãã®ãã¿ãŒã³ã¯ãéåæé¢æ°ãšçµã¿åããããšããã«åŒ·åã«ãªããŸããéåæé¢æ°ã§ã¯ãããŒã¿ããã€ãããåã«éåææäœãæ§æãããå ŽåããããŸããããšãã°ãããŒã¹URLãåãåããæ¬¡ã«ç¹å®ã®ãšã³ããã€ã³ããåãåã`asyncFetch`颿°ãªã©ã§ãã
å ç¢æ§ã®ããã®ã¢ããïŒäŸïŒMaybe, EitherïŒãšã®çµ±å
ã¢ããïŒäŸïŒnull/undefinedå€ãåŠçããããã®Maybeã¢ãããæå/倱æã®ç¶æ ãåŠçããããã®Eitherã¢ããïŒã®ãããªé¢æ°åããã°ã©ãã³ã°ã®æ§æèŠçŽ ã¯ãåæãšãšã©ãŒäŒæã®ããã«èšèšãããŠããŸããJavaScriptã«ã¯çµã¿èŸŒã¿ã®ã¢ããã¯ãããŸããããRamdaãSanctuaryã®ãããªã©ã€ãã©ãªãããããæäŸããŠããŸãããã€ãã©ã€ã³æŒç®åã¯ãã¢ããæäœãé£çµããããã®æ§æãåçåããäºæããªãå€ããšã©ãŒã«å¯ŸããŠãããŒãããã«æç€ºçãã€å ç¢ã«ããå¯èœæ§ããããŸãã
äŸãã°ãéåæãã€ãã©ã€ã³ã¯Maybeã¢ããã䜿çšããŠãªãã·ã§ã³ã®ãŠãŒã¶ãŒããŒã¿ãåŠçããæå¹ãªå€ãååšããå Žåã«ã®ã¿åŸç¶ã®ã¹ããããå®è¡ãããããã«ããããšãã§ããŸãã
ãã€ãã©ã€ã³ã«ãããé«é颿°
é«é颿°ïŒä»ã®é¢æ°ãåŒæ°ãšããŠåãåãããŸãã¯é¢æ°ãè¿ã颿°ïŒã¯ã颿°åããã°ã©ãã³ã°ã®åºç€ã§ãããã€ãã©ã€ã³æŒç®åã¯ããããšèªç¶ã«çµ±åã§ããŸããããã¹ããŒãžãé«é颿°ã§ãããæ¬¡ã®ã¹ããŒãžã«ãã®ã³ã°ãŸãã¯ãã£ãã·ã¥ã¡ã«ããºã ãé©çšãããã€ãã©ã€ã³ãæ³åããŠã¿ãŠãã ããã
const withLogging = (fn) => async (...args) => {
console.log(`Executing ${fn.name || 'anonymous'} with args:`, args);
const result = await fn(...args);
console.log(`Finished ${fn.name || 'anonymous'}, result:`, result);
return result;
};
async function getData(id) {
return new Promise(resolve => setTimeout(() => resolve(`Data for ${id}`), 200));
}
async function parseData(raw) {
return new Promise(resolve => setTimeout(() => resolve(`Parsed: ${raw}`), 150));
}
async function processItem(itemId) {
const finalOutput = await (itemId
|> await withLogging(getData)
|> await withLogging(parseData));
console.log('Final item processing output:', finalOutput);
return finalOutput;
}
processItem('item-XYZ');
ããã§ãwithLoggingã¯ç§ãã¡ã®async颿°ãè£
食ããé«é颿°ã§ããããã®ã³ã¢ããžãã¯ã倿Žããããšãªããã®ã³ã°ã®åŽé¢ã远å ããŸããããã¯åŒ·åãªæ¡åŒµæ§ã瀺ããŠããŸãã
ä»ã®åæææ³ïŒRxJSãRamdaïŒãšã®æ¯èŒ
ãã€ãã©ã€ã³æŒç®åãJavaScriptã§é¢æ°åæãéæãã*å¯äžã®*æ¹æ³ã§ã¯ãªãããšããŸãæ¢åã®åŒ·åãªã©ã€ãã©ãªã眮ãæãããã®ã§ã¯ãªãããšã«æ³šæããããšãéèŠã§ããRxJSã®ãããªã©ã€ãã©ãªã¯ãªã¢ã¯ãã£ãããã°ã©ãã³ã°æ©èœãæäŸããéåæã€ãã³ãã®ã¹ããªãŒã ã®åŠçã«åªããŠããŸããRamdaã¯ãåæããŒã¿ãããŒã§åäœããããéåææäœã®ããã«æç€ºçãªãªããã£ã³ã°ãå¿
èŠãšããç¬èªã®pipeããã³compose颿°ãå«ããè±å¯ãªé¢æ°åãŠãŒãã£ãªãã£ã»ãããæäŸããŸãã
JavaScriptãã€ãã©ã€ã³æŒç®åã¯ãæšæºæ©èœãšãªã£ãå Žåãåæãšéåæã®äž¡æ¹ã§*åäžå€*倿ãåæããããã®ããã€ãã£ãã§æ§æçã«è»œéãªä»£æ¿ææ®µãæäŸããã§ããããããã¯ãã€ãã³ãã¹ããªãŒã ãããæ·±ã颿°çãªããŒã¿æäœã®ãããªããè€éãªã·ããªãªãæ±ãã©ã€ãã©ãªã眮ãæããã®ã§ã¯ãªããè£å®ãããã®ã§ããå€ãã®äžè¬çãªéåæãã§ãŒã³ãã¿ãŒã³ã§ã¯ããã€ãã£ãã®ãã€ãã©ã€ã³æŒç®åãããçŽæ¥çã§æèŠã®å°ãªããœãªã¥ãŒã·ã§ã³ãæäŸããå¯èœæ§ããããŸãã
ãã€ãã©ã€ã³æŒç®åãæ¡çšããã°ããŒãã«ããŒã ã®ããã®ãã¹ããã©ã¯ãã£ã¹
åœéçãªéçºããŒã ã«ãšã£ãŠããã€ãã©ã€ã³æŒç®åã®ãããªæ°ããèšèªæ©èœã®æ¡çšã¯ã倿§ãªãããžã§ã¯ããå°åå šäœã§ã®äžè²«æ§ã確ä¿ããæçåãé²ãããã«ãæ éãªèšç»ãšã³ãã¥ãã±ãŒã·ã§ã³ãå¿ èŠãšããŸãã
äžè²«ããã³ãŒãã£ã³ã°æšæº
ãã€ãã©ã€ã³æŒç®åããã€ãã©ã®ããã«äœ¿çšãããã«ã€ããŠãæç¢ºãªã³ãŒãã£ã³ã°æšæºã確ç«ããŸãããã€ãã©ã€ã³å ã®é¢æ°ã®æžåŒèšå®ãã€ã³ãã³ããããã³è€éãã«é¢ããã«ãŒã«ãå®çŸ©ããŸãããããã®æšæºãææžåããããªã³ãã£ã³ã°ããŒã«ïŒäŸïŒESLintïŒãCI/CDãã€ãã©ã€ã³ã§ã®èªåãã§ãã¯ãéããŠåŒ·å¶ãããããã«ããŸãããã®äžè²«æ§ã¯ã誰ãã³ãŒãã«åãçµãã§ããããã©ãã«ãããã«é¢ä¿ãªããã³ãŒãã®å¯èªæ§ãç¶æããã®ã«åœ¹ç«ã¡ãŸãã
å æ¬çãªããã¥ã¡ã³ããŒã·ã§ã³
ãã€ãã©ã€ã³ã§äœ¿çšãããå颿°ã®ç®çãšæåŸ ãããå ¥åºåãææžåããŸããè€éãªéåæãã§ãŒã³ã®å Žåãæäœã®ã·ãŒã±ã³ã¹ã瀺ãã¢ãŒããã¯ãã£ã®æŠèŠãŸãã¯ãããŒãã£ãŒããæäŸããŸããããã¯ããªã¢ã«ã¿ã€ã ã§ã®çŽæ¥çãªã³ãã¥ãã±ãŒã·ã§ã³ãå°é£ãªç°ãªãã¿ã€ã ãŸãŒã³ã«åæ£ããããŒã ã«ãšã£ãŠç¹ã«éèŠã§ããåªããããã¥ã¡ã³ããŒã·ã§ã³ã¯ææ§ããæžãããçè§£ãä¿é²ããŸãã
ã³ãŒãã¬ãã¥ãŒãšç¥èå ±æ
宿çãªã³ãŒãã¬ãã¥ãŒã¯äžå¯æ¬ ã§ãããããã¯å質ä¿èšŒã®ããã®ã¡ã«ããºã ãšããŠããããŠæ±ºå®çã«ãç¥è移転ã®ããã«æ©èœããŸãããã€ãã©ã€ã³ã®äœ¿çšãã¿ãŒã³ãæœåšçãªæ¹åã代æ¿ã¢ãããŒãã«é¢ããè°è«ã奚å±ããŸããããŒã ã¡ã³ããŒã«ãã€ãã©ã€ã³æŒç®åã«ã€ããŠæè²ããããã®ã¯ãŒã¯ã·ã§ããã瀟å ãã¬ãŒã³ããŒã·ã§ã³ãéå¬ãããã®å©ç¹ãšãã¹ããã©ã¯ãã£ã¹ã宿ŒããŸããç¶ç¶çãªåŠç¿ãšå ±æã®æåãè²ãããšã¯ããã¹ãŠã®ããŒã ã¡ã³ããŒãæ°ããèšèªæ©èœã«æ £ããçç·ŽããŠããããšãä¿èšŒããŸãã
段éçãªæ¡çšãšãã¬ãŒãã³ã°
ãããã°ãã³ãæ¹åŒã®æ¡çšã¯é¿ããŠãã ãããæ°ãããããå°ããªæ©èœãã¢ãžã¥ãŒã«ã§ãã€ãã©ã€ã³æŒç®åãå°å ¥ããããšããå§ããããŒã ãæ®µéçã«çµéšãç©ãããšãèš±å¯ããŸããéçºè åãã®ã¿ãŒã²ãããçµã£ããã¬ãŒãã³ã°ã»ãã·ã§ã³ãæäŸããå®è·µçãªäŸãšäžè¬çãªèœãšã穎ã«çŠç¹ãåœãŠãŸããããŒã ããã©ã³ã¹ãã€ã«èŠä»¶ãšããã®æ°ããæ§æã䜿çšããã³ãŒãããããã°ããæ¹æ³ãçè§£ããŠããããšã確èªããŸããæ®µéçãªå±éã¯æ··ä¹±ãæå°éã«æãããã¹ããã©ã¯ãã£ã¹ã®ãã£ãŒãããã¯ãšæŽç·Žãå¯èœã«ããŸãã
ããŒã«ãšç°å¢èšå®
éçºç°å¢ããã«ãã·ã¹ãã ïŒäŸïŒWebpackãRollupïŒãããã³IDEããBabelãŸãã¯ä»ã®ãã©ã³ã¹ãã€ã©ãéããŠãã€ãã©ã€ã³æŒç®åããµããŒãããããã«æ£ããæ§æãããŠããããšã確èªããŸããæ°ãããããžã§ã¯ããèšå®ããããæ¢åã®ãããžã§ã¯ããæŽæ°ãããããããã®æç¢ºãªæé ãæäŸããŸããã¹ã ãŒãºãªããŒã«ãšã¯ã¹ããªãšã³ã¹ã¯æ©æŠãæžãããéçºè ãèšå®ã«èŠåŽãã代ããã«ã³ãŒãã®èšè¿°ã«éäžã§ããããã«ããŸãã
çµè«ïŒéåæJavaScriptã®æªæ¥ãåãå ¥ãã
JavaScriptã®éåæã®ç¶æ³ãå·¡ãæ
ã¯ãããèªã¿ããããä¿å®ããããã衚çŸåè±ããªã³ãŒãã远æ±ããã³ãã¥ããã£ã®çµ¶ãéãªãåªåã«ãã£ãŠæšé²ããããç¶ç¶çãªé©æ°ã®é£ç¶ã§ãããåæã®ã³ãŒã«ããã¯ããPromiseã®åªé
ãããããŠasync/awaitã®æçãã«è³ããŸã§ãããããã®é²æ©ã¯éçºè
ãããæŽç·Žãããä¿¡é Œæ§ã®é«ãã¢ããªã±ãŒã·ã§ã³ãæ§ç¯ããããšãå¯èœã«ããŠããŸããã
ææ¡ãããŠããJavaScriptãã€ãã©ã€ã³æŒç®å (|>) ã¯ãç¹ã«éåæåæã®ããã«async/awaitã®åãšçµã¿åãããå Žåãæ¬¡ã®éèŠãªé£èºã衚ããŸããããã¯éåææäœãé£éãããããã®ç¬èªã«çŽæçãªæ¹æ³ãæäŸããè€éãªã¯ãŒã¯ãããŒãæç¢ºã§ç·åœ¢çãªããŒã¿ãããŒã«å€æããŸããããã¯å³æã®å¯èªæ§ãé«ããã ãã§ãªããé·æçãªä¿å®æ§ããã¹ãå®¹ææ§ãããã³å
šäœçãªéçºè
äœéšãåçã«åäžãããŸãã
倿§ãªãããžã§ã¯ãã«åãçµãã°ããŒãã«éçºããŒã ã«ãšã£ãŠããã€ãã©ã€ã³æŒç®åã¯éåæã®è€éãã管çããããã®çµ±äžãããéåžžã«è¡šçŸåè±ããªæ§æãçŽæããŸãããã®åŒ·åãªæ©èœãåãå ¥ãããã®ãã¥ã¢ã³ã¹ãçè§£ããå ç¢ãªãã¹ããã©ã¯ãã£ã¹ãæ¡çšããããšã§ãããŒã ã¯æéã®è©Šç·Žãšé²åããèŠä»¶ã«èãããããå埩åããããã¹ã±ãŒã©ãã«ã§ãçè§£ããããJavaScriptã¢ããªã±ãŒã·ã§ã³ãæ§ç¯ã§ããŸããéåæJavaScriptåæã®æªæ¥ã¯æããããã€ãã©ã€ã³æŒç®åã¯ãã®æªæ¥ã®ç€ãšãªãæºåãã§ããŠããŸãã
ãŸã ææ¡æ®µéã§ãããã³ãã¥ããã£ã«ãã£ãŠç€ºãããŠããç±æãšæçšæ§ã¯ããã€ãã©ã€ã³æŒç®åãéããªããã¹ãŠã®JavaScriptéçºè ã®ããŒã«ãããã«äžå¯æ¬ ãªããŒã«ã«ãªãããšã瀺åããŠããŸãã仿¥ãããã®å¯èœæ§ãæ¢ãããã©ã³ã¹ãã€ã«ã詊ããŠãéåæé¢æ°ãã§ãŒã³ãæ°ããã¬ãã«ã®æçããšå¹çæ§ãžãšé«ããæºåãããŠãã ããã
ããã«åœ¹ç«ã€ãªãœãŒã¹ãšåŠç¿
- TC39ãã€ãã©ã€ã³æŒç®åææ¡ïŒãã®ææ¡ã®å ¬åŒGitHubãªããžããªã§ãã
- ãã€ãã©ã€ã³æŒç®åçšBabelãã©ã°ã€ã³ïŒãã©ã³ã¹ãã€ã«ã®ããã«Babelã§æŒç®åã䜿çšããæ¹æ³ã«é¢ããæ å ±ã§ãã
- MDN Web Docs: async functionïŒ
async/awaitã®åŸ¹åºè§£èª¬ã§ãã - MDN Web Docs: PromiseïŒPromiseã®å æ¬çãªã¬ã€ãã§ãã
- JavaScriptã«ããã颿°åããã°ã©ãã³ã°ã¬ã€ãïŒæ ¹åºã«ãããã©ãã€ã ãæ¢æ±ããŸãã