JavaScriptãã¿ãŒã³ãããã³ã°ã®åãæ¢æ±ããŸãããã®é¢æ°åããã°ã©ãã³ã°ã®æŠå¿µããswitchæãè¶ããããã«ã³ãŒããã¯ãªãŒã³ã§å®£èšçããã€å ç¢ã«ãããã解説ããŸãã
ãšã¬ã¬ã³ã¹ã®åïŒJavaScriptãã¿ãŒã³ãããã³ã°ã®æ·±æã
äœå幎ãã®éãJavaScriptéçºè
ã¯æ¡ä»¶åå²ããžãã¯ã®ããã«ãç±ç·ããif/elseã®é£éãå€å
žçãªswitchæãšãã£ããããªãã¿ã®ããŒã«ã»ããã«é Œã£ãŠããŸããããããã¯åå²ããžãã¯ã®äž»åã§ãããæ©èœçã§äºæž¬å¯èœã§ããããããã¢ããªã±ãŒã·ã§ã³ãè€éåãã颿°åããã°ã©ãã³ã°ã®ãããªãã©ãã€ã ãåãå
¥ããããã«ãªããšããããã®ããŒã«ã®éçããŸããŸãæããã«ãªã£ãŠããŸããé·ãif/elseã®é£éã¯èªã¿ã«ãããªããåçŽãªç䟡æ§ãã§ãã¯ãšãã©ãŒã«ã¹ã«ãŒã®çãããswitchæã¯ãè€éãªããŒã¿æ§é ãæ±ãéã«ãã°ãã°åäžè¶³ãšãªããŸãã
ããã§ç»å Žããã®ããã¿ãŒã³ãããã³ã°ã§ããããã¯åãªãã匷åçswitchæãã§ã¯ãããŸããããã©ãã€ã ã·ããã§ããHaskellãMLãRustã®ãããªé¢æ°åèšèªã«ç±æ¥ãããã¿ãŒã³ãããã³ã°ã¯ãäžé£ã®ãã¿ãŒã³ã«å¯ŸããŠå€ããã§ãã¯ããããã®ã¡ã«ããºã ã§ããããã«ãããè€éãªããŒã¿ãåè§£ãããã®åœ¢ç¶ã確èªãããã®æ§é ã«åºã¥ããŠã³ãŒããå®è¡ããããšãããã¹ãŠåäžã®è¡šçŸåè±ããªæ§æã§å¯èœã«ãªããŸããããã¯ãåœä»€çãªãã§ãã¯ïŒãã©ã®ããã«å€ããã§ãã¯ããããïŒããã宣èšçãªãããã³ã°ïŒãå€ãã©ã®ããã«èŠããããïŒãžã®ç§»è¡ã§ãã
ãã®èšäºã¯ã仿¥ã®JavaScriptã§ãã¿ãŒã³ãããã³ã°ãçè§£ãã䜿çšããããã®å æ¬çãªã¬ã€ãã§ãããã®ã³ã¢ã³ã³ã»ãããå®çšçãªå¿çšäŸããããŠãã®åŒ·åãªé¢æ°åãã¿ãŒã³ããã€ãã£ãã®èšèªæ©èœã«ãªããã£ãšåãããã©ã€ãã©ãªã掻çšããŠãããžã§ã¯ãã«å°å ¥ããæ¹æ³ãæ¢ããŸãã
ãã¿ãŒã³ãããã³ã°ãšã¯ïŒswitchæããã®é²å
ãã®æ žå¿ã«ãããŠããã¿ãŒã³ãããã³ã°ã¯ããŒã¿æ§é ãåè§£ããŠãç¹å®ã®ããã¿ãŒã³ãã圢ç¶ã«é©åãããã©ããã確èªããããã»ã¹ã§ããããããèŠã€ãããšãé¢é£ããã³ãŒããããã¯ãå®è¡ã§ããå€ãã®å ŽåããããããããŒã¿ã®äžéšããã®ãããã¯å ã§äœ¿çšããããã«ããŒã«ã«å€æ°ã«æçžããŸãã
ãããåŸæ¥ã®switchæãšæ¯èŒããŠã¿ãŸããããswitchã¯ãåäžã®å€ã«å¯Ÿããå³å¯ãªç䟡æ§ïŒ===ïŒãã§ãã¯ã«éå®ãããŸãã
function getHttpStatusMessage(status) {
switch (status) {
case 200:
return 'OK';
case 404:
return 'Not Found';
case 500:
return 'Internal Server Error';
default:
return 'Unknown Status';
}
}
ããã¯åçŽãªããªããã£ãå€ã«ã¯å®ç§ã«æ©èœããŸããããããAPIã¬ã¹ãã³ã¹ã®ãããªãããè€éãªãªããžã§ã¯ããæ±ãããå Žåã¯ã©ãã§ããããïŒ
const response = { status: 'success', data: { user: 'John Doe' } };
// or
const errorResponse = { status: 'error', error: { code: 'E401', message: 'Unauthorized' } };
switchæã§ã¯ããããšã¬ã¬ã³ãã«æ±ãããšã¯ã§ããŸãããããããã£ã®ååšãšãã®å€ã確èªããããã«ãåä»ãªäžé£ã®if/elseæã«é ŒããããåŸãªããªããŸããããã§ãã¿ãŒã³ãããã³ã°ãèŒããæŸã¡ãŸãããªããžã§ã¯ãå
šäœã®åœ¢ç¶ãæ€æ»ã§ããã®ã§ãã
ãã¿ãŒã³ãããã³ã°ã®ã¢ãããŒãã¯ãæŠå¿µçã«ã¯ãã®ããã«ãªããŸãïŒå°æ¥ã®ä»®å®ã®æ§æã䜿çšïŒïŒ
function handleResponse(response) {
return match (response) {
when { status: 'success', data: d }: `Success! Data received for ${d.user}`,
when { status: 'error', error: e }: `Error ${e.code}: ${e.message}`,
default: 'Invalid response format'
}
}
äž»ãªéãã«æ³šç®ããŠãã ããïŒ
- æ§é çãªãããã³ã°ïŒåäžã®å€ã ãã§ãªãããªããžã§ã¯ãã®åœ¢ç¶ã«å¯ŸããŠãããããŸãã
- ããŒã¿ãã€ã³ãã£ã³ã°ïŒãã¹ããããå€ïŒ
dãeãªã©ïŒããã¿ãŒã³å ã§çŽæ¥æœåºããŸãã - åŒæåïŒ
matchãããã¯å šäœãå€ãè¿ãåŒã§ãããããäžæå€æ°ãååå²ã§ã®returnæãäžèŠã«ãªããŸããããã¯é¢æ°åããã°ã©ãã³ã°ã®äžæ žãšãªãä¿¡æ¡ã§ãã
JavaScriptã«ããããã¿ãŒã³ãããã³ã°ã®çŸç¶
ã°ããŒãã«ãªéçºè ã³ãã¥ããã£ã«åããŠæç¢ºã«ããŠããã¹ãéèŠãªç¹ããããŸãïŒãã¿ãŒã³ãããã³ã°ã¯ãŸã JavaScriptã®æšæºçãªãã€ãã£ãæ©èœã§ã¯ãããŸããã
ãããECMAScriptæšæºã«è¿œå ããããã®æŽ»çºãªTC39ææ¡ãååšããŸããããããæ¬çš¿å·çæç¹ã§ã¯ã¹ããŒãž1ã«ãããããã¯åæã®æ¢æ±æ®µéã«ããããšãæå³ããŸãããã¹ãŠã®äž»èŠãªãã©ãŠã¶ãNode.jsç°å¢ã§ãã€ãã£ãã«å®è£ ããããŸã§ã«ã¯ãããããæ°å¹Žãããã§ãããã
ã§ã¯ã仿¥ã©ãããã°äœ¿ããã®ã§ããããïŒç§ãã¡ã¯æŽ»æ°ããJavaScriptãšã³ã·ã¹ãã ã«é Œãããšãã§ããŸããçŸä»£ã®JavaScriptãšTypeScriptã«ãã¿ãŒã³ãããã³ã°ã®åãããããããã«ãããã€ãã®åªããã©ã€ãã©ãªãéçºãããŠããŸããããã®èšäºã®äŸã§ã¯ãäž»ã«ts-patternã䜿çšããŸããããã¯äººæ°ããã匷åãªã©ã€ãã©ãªã§ãå®å
šã«åä»ããããéåžžã«è¡šçŸåè±ãã§ãTypeScriptãšãã¬ãŒã³ãªJavaScriptãããžã§ã¯ãã®äž¡æ¹ã§ã·ãŒã ã¬ã¹ã«åäœããŸãã
颿°åãã¿ãŒã³ãããã³ã°ã®ã³ã¢ã³ã³ã»ãã
ããããééããåºæ¬çãªãã¿ãŒã³ã詳ããèŠãŠãããŸããããã³ãŒãäŸã«ã¯ts-patternã䜿çšããŸããããããã®ã³ã³ã»ããã¯ã»ãšãã©ã®ãã¿ãŒã³ãããã³ã°å®è£
ã§å
±éã§ãã
ãªãã©ã«ãã¿ãŒã³ïŒæãã·ã³ãã«ãªããã
ããã¯æãåºæ¬çãªãããã³ã°åœ¢åŒã§ã`switch`ã®caseã«äŒŒãŠããŸããæååãæ°å€ãããŒãªã¢ã³å€ãnullãundefinedãªã©ã®ããªããã£ãå€ã«å¯ŸããŠãããããŸãã
import { match } from 'ts-pattern';
function getPaymentMethod(method) {
return match(method)
.with('credit_card', () => 'Processing with Credit Card Gateway')
.with('paypal', () => 'Redirecting to PayPal')
.with('crypto', () => 'Processing with Cryptocurrency Wallet')
.otherwise(() => 'Invalid Payment Method');
}
console.log(getPaymentMethod('paypal')); // "Redirecting to PayPal"
console.log(getPaymentMethod('bank_transfer')); // "Invalid Payment Method"
.with(pattern, handler)æ§æãäžå¿ãšãªããŸãã.otherwise()å¥ã¯`default`ã±ãŒã¹ã«çžåœããããããç¶²çŸ
çïŒãã¹ãŠã®å¯èœæ§ãåŠçããïŒã§ããããšãä¿èšŒããããã«ãã°ãã°å¿
èŠã§ãã
åå²ä»£å ¥ãã¿ãŒã³ïŒãªããžã§ã¯ããšé åã®å±é
ããããã¿ãŒã³ãããã³ã°ãçã«å·®å¥åãããç¹ã§ãããªããžã§ã¯ããé åã®åœ¢ç¶ãããããã£ã«å¯ŸããŠããããããããšãã§ããŸãã
ãªããžã§ã¯ãã®åå²ä»£å ¥ïŒ
ã¢ããªã±ãŒã·ã§ã³ã§ã€ãã³ããåŠçããŠãããšæ³åããŠãã ãããåã€ãã³ãã¯typeãšpayloadãæã€ãªããžã§ã¯ãã§ãã
import { match, P } from 'ts-pattern'; // P is the placeholder object
function handleEvent(event) {
return match(event)
.with({ type: 'USER_LOGIN', payload: { userId: P.select() } }, (userId) => {
console.log(`User ${userId} logged in.`);
// ... trigger login side effects
})
.with({ type: 'ADD_TO_CART', payload: { productId: P.select('id'), quantity: P.select('qty') } }, ({ id, qty }) => {
console.log(`Added ${qty} of product ${id} to the cart.`);
})
.with({ type: 'PAGE_VIEW' }, () => {
console.log('Page view tracked.');
})
.otherwise(() => {
console.log('Unknown event received.');
});
}
handleEvent({ type: 'USER_LOGIN', payload: { userId: 'u-123', timestamp: 1678886400 } });
handleEvent({ type: 'ADD_TO_CART', payload: { productId: 'prod-abc', quantity: 2 } });
ãã®äŸã§ã¯ãP.select()ã匷åãªããŒã«ã§ããããã¯ããã®äœçœ®ã«ããä»»æã®å€ã«ããããããããæçžããŠãã³ãã©é¢æ°ã§å©çšå¯èœã«ããã¯ã€ã«ãã«ãŒããšããŠæ©èœããŸããããèšè¿°çãªãã³ãã©ã®ã·ã°ããã£ã®ããã«ãéžæããå€ã«ååãä»ããããšããã§ããŸãã
é åã®åå²ä»£å ¥ïŒ
é åã®æ§é ã«å¯ŸããŠãããããããããšãã§ããããã¯ã³ãã³ãã©ã€ã³åŒæ°ã®è§£æãã¿ãã«ã®ãããªããŒã¿ãæ±ãã¿ã¹ã¯ã«éåžžã«äŸ¿å©ã§ãã
function parseCommand(args) {
return match(args)
.with(['install', P.select()], (pkg) => `Installing package: ${pkg}`)
.with(['delete', P.select(), '--force'], (file) => `Force deleting file: ${file}`)
.with(['list'], () => 'Listing all items...')
.with([], () => 'No command provided. Use --help for options.')
.otherwise((unrecognized) => `Error: Unrecognized command sequence: ${unrecognized.join(' ')}`);
}
console.log(parseCommand(['install', 'react'])); // "Installing package: react"
console.log(parseCommand(['delete', 'temp.log', '--force'])); // "Force deleting file: temp.log"
console.log(parseCommand([])); // "No command provided..."
ã¯ã€ã«ãã«ãŒããšãã¬ãŒã¹ãã«ããŒãã¿ãŒã³
æ¢ã«ãã€ã³ãã£ã³ã°ãã¬ãŒã¹ãã«ããŒã§ããP.select()ãèŠãŠããŸãããts-patternã¯ãäœçœ®ãããããããå¿
èŠãããããã®å€ã¯æ°ã«ããªãå Žåã®ããã®ãã·ã³ãã«ãªã¯ã€ã«ãã«ãŒãP._ãæäŸããŸãã
P._ïŒã¯ã€ã«ãã«ãŒãïŒïŒä»»æã®å€ã«ãããããŸããããããæçžããŸãããå€ãååšããå¿ èŠã¯ãããã䜿çšããªãå Žåã«äœ¿ããŸããP.select()ïŒãã¬ãŒã¹ãã«ããŒïŒïŒä»»æã®å€ã«ããããããã³ãã©ã§äœ¿çšããããã«ãããæçžããŸãã
match(data)
.with(['SUCCESS', P._, P.select()], (message) => `Success with message: ${message}`)
// Here, we ignore the second element but capture the third.
.otherwise(() => 'No success message');
ã¬ãŒãç¯ïŒ.when()ã«ããæ¡ä»¶ããžãã¯ã®è¿œå
æã«ã¯ã圢ç¶ãããããããã ãã§ã¯äžååãªããšããããŸãã远å ã®æ¡ä»¶ãå ããå¿
èŠããããããããŸãããããã§ã¬ãŒãç¯ãç»å ŽããŸããts-patternã§ã¯ãããã¯.when()ã¡ãœãããŸãã¯P.when()è¿°èªã§å®çŸãããŸãã
泚æãåŠçããŠãããšæ³åããŠãã ãããé«é¡ãªæ³šæã¯å¥ã®æ¹æ³ã§åŠçããããšããŸãã
function getOrderStatus(order) {
return match(order)
.with({ status: 'shipped', total: P.when(t => t > 1000) }, () => 'High-value order shipped.')
.with({ status: 'shipped' }, () => 'Standard order shipped.')
.with({ status: 'processing', items: P.when(items => items.length === 0) }, () => 'Warning: Processing empty order.')
.with({ status: 'processing' }, () => 'Order is being processed.')
.with({ status: 'cancelled' }, () => 'Order has been cancelled.')
.otherwise(() => 'Unknown order status.');
}
console.log(getOrderStatus({ status: 'shipped', total: 1500 })); // "High-value order shipped."
console.log(getOrderStatus({ status: 'shipped', total: 50 })); // "Standard order shipped."
console.log(getOrderStatus({ status: 'processing', items: [] })); // "Warning: Processing empty order."
ããå
·äœçãªãã¿ãŒã³ïŒ.when()ã¬ãŒãä»ãïŒããããäžè¬çãªãã¿ãŒã³ã®åã«æ¥ãªããã°ãªããªãããšã«æ³šæããŠãã ãããæåã«ããããæåãããã¿ãŒã³ãåªå
ãããŸãã
åãšè¿°èªãã¿ãŒã³
ããŒã¿åãã«ã¹ã¿ã ã®è¿°èªé¢æ°ã«å¯ŸããŠãããããããããšãã§ããããã«æè»æ§ãé«ãŸããŸãã
function describeValue(x) {
return match(x)
.with(P.string, () => 'This is a string.')
.with(P.number, () => 'This is a number.')
.with({ message: P.string }, () => 'This is an error object.')
.with(P.instanceOf(Date), (d) => `This is a Date object for ${d.getFullYear()}.`)
.otherwise(() => 'This is some other type of value.');
}
çŸä»£ã®Webéçºã«ãããå®çšçãªãŠãŒã¹ã±ãŒã¹
çè«ã¯çŽ æŽãããã§ããããã¿ãŒã³ãããã³ã°ãã°ããŒãã«ãªéçºè ã³ãã¥ããã£ã®çŸå®äžçã®åé¡ãã©ã®ããã«è§£æ±ºããããèŠãŠã¿ãŸãããã
è€éãªAPIã¬ã¹ãã³ã¹ã®åŠç
ããã¯å žåçãªãŠãŒã¹ã±ãŒã¹ã§ããAPIãåäžã®åºå®ããã圢ç¶ãè¿ãããšã¯çšã§ããæåãªããžã§ã¯ããæ§ã ãªãšã©ãŒãªããžã§ã¯ãããŸãã¯ããŒãã£ã³ã°ç¶æ ãè¿ããŸãããã¿ãŒã³ãããã³ã°ã¯ãããçŸããæŽçããŸãã
Error: The requested resource was not found. An unexpected error occurred: ${err.message}// Let's assume this is the state from a data fetching hook
const apiState = { status: 'error', error: { code: 403, message: 'Forbidden' } };
function renderUI(state) {
return match(state)
.with({ status: 'loading' }, () => '
.with({ status: 'success', data: P.select() }, (users) => `${users.map(u => `
`)
.with({ status: 'error', error: { code: 404 } }, () => '
.with({ status: 'error', error: P.select() }, (err) => `
.exhaustive(); // Ensures all cases of our state type are handled
}
// document.body.innerHTML = renderUI(apiState);
ããã¯ããã¹ããããif (state.status === 'success')ãã§ãã¯ãããã¯ããã«èªã¿ããããå
ç¢ã§ãã
颿°ã³ã³ããŒãã³ãã«ãããç¶æ 管çïŒäŸïŒReactïŒ
Reduxã®ãããªç¶æ
管çã©ã€ãã©ãªãReactã®useReducerããã¯ã䜿çšããå Žåãæ§ã
ãªã¢ã¯ã·ã§ã³ã¿ã€ããåŠçããreducer颿°ããã°ãã°ãããŸããaction.typeã«å¯Ÿããswitchã¯äžè¬çã§ãããactionãªããžã§ã¯ãå
šäœã«å¯Ÿãããã¿ãŒã³ãããã³ã°ã®æ¹ãåªããŠããŸãã
// Before: A typical reducer with a switch statement
function classicReducer(state, action) {
switch (action.type) {
case 'INCREMENT':
return { ...state, count: state.count + 1 };
case 'DECREMENT':
return { ...state, count: state.count - 1 };
case 'SET_VALUE':
return { ...state, count: action.payload };
default:
return state;
}
}
// After: A reducer using pattern matching
function patternMatchingReducer(state, action) {
return match(action)
.with({ type: 'INCREMENT' }, () => ({ ...state, count: state.count + 1 }))
.with({ type: 'DECREMENT' }, () => ({ ...state, count: state.count - 1 }))
.with({ type: 'SET_VALUE', payload: P.select() }, (value) => ({ ...state, count: value }))
.otherwise(() => state);
}
ãã¿ãŒã³ãããã³ã°çã¯ãã宣èšçã§ãããŸããç¹å®ã®ã¢ã¯ã·ã§ã³ã¿ã€ãã§action.payloadãååšããªãå¯èœæ§ãããå Žåã«ã¢ã¯ã»ã¹ããŠããŸããšãã£ããäžè¬çãªãã°ãé²ããŸãããã¿ãŒã³èªäœãã'SET_VALUE'ã±ãŒã¹ã§ã¯payloadãååšããªããã°ãªããªãããšã匷å¶ããŸãã
æéç¶æ ãã·ã³ïŒFSMïŒã®å®è£
æéç¶æ ãã·ã³ã¯ãæéåã®ç¶æ ã®ããããã«ããããšãã§ããèšç®ã¢ãã«ã§ãããã¿ãŒã³ãããã³ã°ã¯ããããã®ç¶æ éã®é·ç§»ãå®çŸ©ããããã®å®ç§ãªããŒã«ã§ãã
// States: { status: 'idle' } | { status: 'loading' } | { status: 'success', data: T } | { status: 'error', error: E }
// Events: { type: 'FETCH' } | { type: 'RESOLVE', data: T } | { type: 'REJECT', error: E }
function stateMachine(currentState, event) {
return match([currentState, event])
.with([{ status: 'idle' }, { type: 'FETCH' }], () => ({ status: 'loading' }))
.with([{ status: 'loading' }, { type: 'RESOLVE', data: P.select() }], (data) => ({ status: 'success', data }))
.with([{ status: 'loading' }, { type: 'REJECT', error: P.select() }], (error) => ({ status: 'error', error }))
.with([{ status: 'error' }, { type: 'FETCH' }], () => ({ status: 'loading' }))
.otherwise(() => currentState); // For all other combinations, stay in the current state
}
ãã®ã¢ãããŒãã«ãããæå¹ãªç¶æ é·ç§»ãæç¢ºã«ãªããæšè«ãããããªããŸãã
ã³ãŒãå質ãšä¿å®æ§ãžã®ã¡ãªãã
ãã¿ãŒã³ãããã³ã°ã®æ¡çšã¯ãåã«è³¢ãã³ãŒããæžãããšã ãã§ã¯ãããŸããããœãããŠã§ã¢éçºã©ã€ããµã€ã¯ã«å šäœã«å ·äœçãªã¡ãªããããããŸãã
- å¯èªæ§ãšå®£èšçãªã¹ã¿ã€ã«ïŒãã¿ãŒã³ãããã³ã°ã¯ãããŒã¿ãæ€æ»ããããã®åœä»€çãªæé ã§ã¯ãªããããŒã¿ãã©ã®ããã«èŠããããèšè¿°ããããšã匷å¶ããŸããããã«ãããæåçã»èšèªçèæ¯ã«é¢ããããä»ã®éçºè ã«ãšã£ãŠã³ãŒãã®æå³ãããæç¢ºã«ãªããŸãã
- äžå€æ§ãšçŽç²é¢æ°ïŒãã¿ãŒã³ãããã³ã°ã®åŒæåã®æ§è³ªã¯ã颿°åããã°ã©ãã³ã°ã®ååã«å®ç§ã«é©åããŸããç¶æ ãçŽæ¥å€æŽããã®ã§ã¯ãªããããŒã¿ãåãåããããã倿ããŠæ°ããå€ãè¿ãããšã奚å±ããŸããããã«ãããå¯äœçšãå°ãªããããäºæž¬å¯èœãªã³ãŒãã«ã€ãªãããŸãã
- ç¶²çŸ
æ§ãã§ãã¯ïŒããã¯ä¿¡é Œæ§ã«ãšã£ãŠç»æçãªæ©èœã§ããTypeScriptã䜿çšããå Žåã
ts-patternã®ãããªã©ã€ãã©ãªã¯ãå ±çšäœåã®ãã¹ãŠã®å¯èœãªããªã¢ã³ããåŠçããããšãã³ã³ãã€ã«æã«åŒ·å¶ã§ããŸããæ°ããç¶æ ãã¢ã¯ã·ã§ã³ã¿ã€ãã远å ãããšããããåŒã«å¯Ÿå¿ãããã³ãã©ã远å ãããŸã§ã³ã³ãã€ã©ããšã©ãŒãåºããŸãããã®ã·ã³ãã«ãªæ©èœã«ãããããçš®ã®ã©ã³ã¿ã€ã ãšã©ãŒãæ ¹çµ¶ã§ããŸãã - ãµã€ã¯ãããã£ãã¯è€é床ã®äœæžïŒæ·±ããã¹ãããã
if/elseæ§é ããåäžã§ç·åœ¢çã§èªã¿ããããããã¯ã«ãã©ããåããŸããè€é床ãäœãã³ãŒãã¯ããã¹ãããããã°ãä¿å®ã容æã«ãªããŸãã
仿¥ããå§ãããã¿ãŒã³ãããã³ã°
詊ããŠã¿ãæºåã¯ã§ããŸãããïŒã·ã³ãã«ã§å®è¡å¯èœãªãã©ã³ã¯ãã¡ãã§ãïŒ
- ããŒã«ã®éžæïŒå
ç¢ãªæ©èœã»ãããšåªããTypeScriptãµããŒãã®ããã
ts-patternã匷ããå§ãããŸããããã¯ä»æ¥ã®JavaScriptãšã³ã·ã¹ãã ã«ããããŽãŒã«ãã¹ã¿ã³ããŒãã§ãã - ã€ã³ã¹ããŒã«ïŒã奜ã¿ã®ããã±ãŒãžãããŒãžã£ã䜿çšããŠãããžã§ã¯ãã«è¿œå ããŸãã
npm install ts-pattern
ãŸãã¯yarn add ts-pattern - å°ããªã³ãŒãçã®ãªãã¡ã¯ã¿ãªã³ã°ïŒåŠã¶æè¯ã®æ¹æ³ã¯å®è·µããããšã§ããã³ãŒãããŒã¹ã«ããè€éãª
switchæãåä»ãªif/elseã®é£éãèŠã€ããŠãã ãããããã¯propsã«åºã¥ããŠç°ãªãUIãã¬ã³ããªã³ã°ããã³ã³ããŒãã³ããAPIããŒã¿ãè§£æãã颿°ããŸãã¯reducerãããããŸãããããããªãã¡ã¯ã¿ãªã³ã°ããŠã¿ãŠãã ããã
ããã©ãŒãã³ã¹ã«é¢ããæ³šæç¹
ãããã質åã¯ããã¿ãŒã³ãããã³ã°ã«ã©ã€ãã©ãªã䜿çšãããšããã©ãŒãã³ã¹ã®ããã«ãã£ãçºçãããã©ããã§ããçãã¯ã€ãšã¹ã§ãããããã¯ã»ãšãã©åžžã«ç¡èŠã§ããã¬ãã«ã§ãããããã®ã©ã€ãã©ãªã¯é«åºŠã«æé©åãããŠãããWebã¢ããªã±ãŒã·ã§ã³ã®å€§å€æ°ã«ãšã£ãŠãªãŒããŒãããã¯ãããããã§ããéçºè ã®çç£æ§ãã³ãŒãã®æçãããã°é²æ¢ã«ãããè«å€§ãªå©çã¯ããã€ã¯ãç§ã¬ãã«ã®ããã©ãŒãã³ã¹ã³ã¹ããã¯ããã«äžåããŸããæ©ãããæé©åã¯ãããæç¢ºã§ãæ£ãããä¿å®å¯èœãªã³ãŒããæžãããšãåªå ããŠãã ããã
æªæ¥ïŒECMAScriptã«ããããã€ãã£ãã®ãã¿ãŒã³ãããã³ã°
åè¿°ã®éããTC39å§å¡äŒã¯ãã¿ãŒã³ãããã³ã°ããã€ãã£ãæ©èœãšããŠè¿œå ããäœæ¥ãé²ããŠããŸããæ§æã¯ãŸã è°è«äžã§ããããããããã®ããã«ãªãã§ãããïŒ
// Potential future syntax!
let httpMessage = match (response) {
when { status: 200, body: b } -> `Success with body: ${b}`,
when { status: 404 } -> `Not Found`,
when { status: 5.. } -> `Server Error`,
else -> `Other HTTP response`
};
ts-patternã®ãããªã©ã€ãã©ãªã䜿ã£ãŠä»æ¥ãã®æŠå¿µãšãã¿ãŒã³ãåŠã¶ããšã§ãçŸåšã®ãããžã§ã¯ããæ¹åããã ãã§ãªããJavaScriptèšèªã®æªæ¥ã«åããããšã«ãªããŸããããã§æ§ç¯ããã¡ã³ã¿ã«ã¢ãã«ã¯ããããã®æ©èœããã€ãã£ãã«ãªã£ããšãã«çŽæ¥åœ¹ç«ã€ã§ãããã
çµè«ïŒJavaScriptã®æ¡ä»¶åå²ã«ããããã©ãã€ã ã·ãã
ãã¿ãŒã³ãããã³ã°ã¯ãswitchæã®åãªãç³è¡£æ§æãã¯ããã«è¶
ãããã®ã§ããããã¯ãJavaScriptã§æ¡ä»¶åå²ããžãã¯ãæ±ãããã®ããã宣èšçã§ãå
ç¢ã§ã颿°çãªã¹ã¿ã€ã«ãžã®æ ¹æ¬çãªè»¢æã衚ããŠããŸããããŒã¿ã®åœ¢ç¶ã«ã€ããŠèããããšã奚å±ããããã¯ãããšã¬ã¬ã³ãã§ããã ãã§ãªãããã°ã«å¯ŸããŠããå埩åããããé·æçã«ä¿å®ã容æãªã³ãŒãã«ã€ãªãããŸãã
äžçäžã®éçºããŒã ã«ãšã£ãŠããã¿ãŒã³ãããã³ã°ã®æ¡çšã¯ãããäžè²«æ§ããã衚çŸåè±ããªã³ãŒãããŒã¹ã«ã€ãªããå¯èœæ§ããããŸããåŸæ¥ã®ããŒã«ã®åçŽãªãã§ãã¯ãè¶ ããŠãè€éãªããŒã¿æ§é ãæ±ãããã®å ±éèšèªãæäŸããŸããæ¬¡ã®ãããžã§ã¯ãã§ãã²æ¢æ±ããŠã¿ãŠãã ãããå°ããå§ããŠãè€éãªé¢æ°ããªãã¡ã¯ã¿ãªã³ã°ãããããã³ãŒãã«ããããæçããšåãäœéšããŠãã ããã