JavaScriptã¢ãžã¥ãŒã«ã«ããããªãã¶ãŒããŒãã¿ãŒã³ãæãäžããå ç¢ãªã€ãã³ãéç¥ãå®è£ ããæ¹æ³ãåŠã³ãŸãããããããªãã·ã¥/ãµãã¹ã¯ã©ã€ããã«ã¹ã¿ã ã€ãã³ããéåææäœã®ãã¹ããã©ã¯ãã£ã¹ã解説ããŸãã
JavaScriptã¢ãžã¥ãŒã«ã«ããããªãã¶ãŒããŒãã¿ãŒã³ïŒã¢ãã³ã¢ããªã±ãŒã·ã§ã³ã®ããã®ã€ãã³ãéç¥
ã¢ãžã¥ãŒã«åã¢ãŒããã¯ãã£å ã§ã®ã¢ãã³ãªJavaScriptéçºã«ãããŠãã¢ããªã±ãŒã·ã§ã³ã®ç°ãªãéšåéã§ã®å¹ççãªéä¿¡ã¯æãéèŠã§ãããªãã¶ãŒããŒãã¿ãŒã³ïŒãããªãã·ã¥ã»ãµãã¹ã¯ã©ã€ããšãåŒã°ããïŒã¯ããã®èª²é¡ã«å¯Ÿãã匷åã§æŽç·Žããããœãªã¥ãŒã·ã§ã³ãæäŸããŸãããã®ãã¿ãŒã³ã«ãããã¢ãžã¥ãŒã«ã¯ä»ã®ã¢ãžã¥ãŒã«ãçºããã€ãã³ãã賌èªã§ããççµåãå¯èœã«ããä¿å®æ§ãšæ¡åŒµæ§ãä¿é²ããŸãããã®ã¬ã€ãã§ã¯ãJavaScriptã¢ãžã¥ãŒã«ã«ããããªãã¶ãŒããŒãã¿ãŒã³ã®æ žãšãªãæŠå¿µãå®è£ æŠç¥ãããã³å®çšçãªã¢ããªã±ãŒã·ã§ã³ãæ¢æ±ããŸãã
ãªãã¶ãŒããŒãã¿ãŒã³ãçè§£ãã
ãªãã¶ãŒããŒãã¿ãŒã³ã¯ããªããžã§ã¯ãéã«äžå¯Ÿå€ã®äŸåé¢ä¿ãå®çŸ©ããæ¯ãèããã¶ã€ã³ãã¿ãŒã³ã§ãããããªããžã§ã¯ãïŒãµããžã§ã¯ãïŒã®ç¶æ ãå€åãããšãããã«äŸåãããã¹ãŠã®ãªããžã§ã¯ãïŒãªãã¶ãŒããŒïŒã«èªåçã«éç¥ãããæŽæ°ãããŸãããã®ãã¿ãŒã³ã¯ããµããžã§ã¯ããšãªãã¶ãŒããŒãåé¢ãããããããç¬ç«ããŠå€åã§ããããã«ããŸããJavaScriptã¢ãžã¥ãŒã«ã®ã³ã³ããã¹ãã§ã¯ãããã¯ã¢ãžã¥ãŒã«ãäºãã®å ·äœçãªå®è£ ãç¥ãããšãªãéä¿¡ã§ããããšãæå³ããŸãã
äž»èŠã³ã³ããŒãã³ã
- ãµããžã§ã¯ãïŒãããªãã·ã£ãŒïŒïŒãªãã¶ãŒããŒã®ãªã¹ãã管çããç¶æ ã®å€åãéç¥ãããªããžã§ã¯ãã§ããã¢ãžã¥ãŒã«ã®ã³ã³ããã¹ãã§ã¯ãã«ã¹ã¿ã ã€ãã³ããçºãããã賌èªè ã«ã¡ãã»ãŒãžãå ¬éãããããã¢ãžã¥ãŒã«ãããã«è©²åœããŸãã
- ãªãã¶ãŒããŒïŒãµãã¹ã¯ã©ã€ããŒïŒïŒãµããžã§ã¯ãã賌èªãããµããžã§ã¯ãã®ç¶æ ãå€åãããšãã«éç¥ãåãåããªããžã§ã¯ãã§ããã¢ãžã¥ãŒã«ã§ã¯ãä»ã®ã¢ãžã¥ãŒã«ã®ã€ãã³ããããŒã¿å€æŽã«åå¿ããå¿ èŠãããã¢ãžã¥ãŒã«ãããã«è©²åœããããšããããããŸãã
- ã€ãã³ãïŒéç¥ãããªã¬ãŒããç¹å®ã®åºæ¥äºã§ããããã¯ããŒã¿ã®æŽæ°ãããŠãŒã¶ãŒã®æäœãŸã§ããããããã®ã«ãªãåŸãŸãã
JavaScriptã¢ãžã¥ãŒã«ã§ã®ãªãã¶ãŒããŒãã¿ãŒã³ã®å®è£
JavaScriptã¢ãžã¥ãŒã«ã§ãªãã¶ãŒããŒãã¿ãŒã³ãå®è£ ããã«ã¯ããã€ãã®æ¹æ³ããããŸããããã§ã¯äžè¬çãªã¢ãããŒããããã€ã玹ä»ããŸãã
1. ã«ã¹ã¿ã ã€ãã³ãã«ããåºæ¬å®è£
ãã®ã¢ãããŒãã§ã¯ã賌èªã管çãã€ãã³ãããã£ã¹ãããããã·ã³ãã«ãªã€ãã³ããšããã¿ã¯ã©ã¹ãäœæããŸããããã¯ç¹å®ã®ã¢ãžã¥ãŒã«ã®ããŒãºã«åãããŠèª¿æŽã§ããåºæ¬çãªã¢ãããŒãã§ãã
// Event Emitter Class
class EventEmitter {
constructor() {
this.listeners = {};
}
on(event, listener) {
if (!this.listeners[event]) {
this.listeners[event] = [];
}
this.listeners[event].push(listener);
}
emit(event, data) {
if (this.listeners[event]) {
this.listeners[event].forEach(listener => listener(data));
}
}
off(event, listenerToRemove) {
if (!this.listeners[event]) {
return;
}
const filterListeners = (listener) => listener !== listenerToRemove;
this.listeners[event] = this.listeners[event].filter(filterListeners);
}
}
// Example Module (Subject)
const myModule = new EventEmitter();
// Example Module (Observer)
const observer = (data) => {
console.log('Event received with data:', data);
};
// Subscribe to an event
myModule.on('dataUpdated', observer);
// Emit an event
myModule.emit('dataUpdated', { message: 'Data has been updated!' });
// Unsubscribe from an event
myModule.off('dataUpdated', observer);
myModule.emit('dataUpdated', { message: 'Data has been updated after unsubscribe!' }); //Will not be caught by the observer
解説ïŒ
EventEmitterã¯ã©ã¹ã¯ãç°ãªãã€ãã³ãã®ãªã¹ããŒãªã¹ãã管çããŸããonã¡ãœããã¯ããªã¹ããŒé¢æ°ãæäŸããããšã§ãã¢ãžã¥ãŒã«ãã€ãã³ãã賌èªããããšãå¯èœã«ããŸããemitã¡ãœããã¯ã€ãã³ããããªã¬ãŒããæäŸãããããŒã¿ã§ç»é²ãããŠãããã¹ãŠã®ãªã¹ããŒãåŒã³åºããŸããoffã¡ãœããã¯ãã¢ãžã¥ãŒã«ãã€ãã³ãã®è³Œèªãè§£é€ããããšãå¯èœã«ããŸãã
2. äžå åãããã€ãã³ããã¹ã®äœ¿çš
ããè€éãªã¢ããªã±ãŒã·ã§ã³ã§ã¯ãäžå åãããã€ãã³ããã¹ãã€ãã³ããšè³Œèªã管çããããã®ããæ§é åãããæ¹æ³ãæäŸã§ããŸãããã®ã¢ãããŒãã¯ãã¢ãžã¥ãŒã«ãã¢ããªã±ãŒã·ã§ã³ã®ç°ãªãéšåéã§éä¿¡ããå¿ èŠãããå Žåã«ç¹ã«åœ¹ç«ã¡ãŸãã
// Event Bus (Singleton)
const eventBus = {
listeners: {},
on(event, listener) {
if (!this.listeners[event]) {
this.listeners[event] = [];
}
this.listeners[event].push(listener);
},
emit(event, data) {
if (this.listeners[event]) {
this.listeners[event].forEach(listener => listener(data));
}
},
off(event, listenerToRemove) {
if (!this.listeners[event]) {
return;
}
const filterListeners = (listener) => listener !== listenerToRemove;
this.listeners[event] = this.listeners[event].filter(filterListeners);
}
};
// Module A (Publisher)
const moduleA = {
publishData(data) {
eventBus.emit('dataPublished', data);
}
};
// Module B (Subscriber)
const moduleB = {
subscribeToData() {
eventBus.on('dataPublished', (data) => {
console.log('Module B received data:', data);
});
}
};
// Module C (Subscriber)
const moduleC = {
subscribeToData() {
eventBus.on('dataPublished', (data) => {
console.log('Module C received data:', data);
});
}
};
// Usage
moduleB.subscribeToData();
moduleC.subscribeToData();
moduleA.publishData({ message: 'Hello from Module A!' });
解説ïŒ
eventBusãªããžã§ã¯ãã¯ããã¹ãŠã®ã€ãã³ãã®äžå¿ãããšããŠæ©èœããŸãã- ã¢ãžã¥ãŒã«ã¯
eventBus.onã䜿çšããŠã€ãã³ãã賌èªããeventBus.emitã䜿çšããŠã€ãã³ããå ¬éã§ããŸãã - ãã®ã¢ãããŒãã¯ãã¢ãžã¥ãŒã«éã®éä¿¡ãç°¡çŽ åããäŸåé¢ä¿ãæžãããŸãã
3. ã©ã€ãã©ãªãšãã¬ãŒã ã¯ãŒã¯ã®æŽ»çš
å€ãã®JavaScriptã©ã€ãã©ãªããã¬ãŒã ã¯ãŒã¯ã¯ããªãã¶ãŒããŒãã¿ãŒã³ãŸãã¯é¡äŒŒã®ã€ãã³ã管çã¡ã«ããºã ãçµã¿èŸŒã¿ã§ãµããŒãããŠããŸããäŸãã°ïŒ
- React: ã³ã³ããŒãã³ãéã®éä¿¡ã«propsãšã³ãŒã«ããã¯ã䜿çšããŸãããããã¯ãªãã¶ãŒããŒãã¿ãŒã³ã®äžåœ¢æ ãšèŠãªããŸãã
- Vue.js: ã³ã³ããŒãã³ãéä¿¡ã®ããã«çµã¿èŸŒã¿ã®ã€ãã³ããã¹ïŒ
$emit,$on,$offïŒãæäŸããŸãã - Angular: éåæããŒã¿ã¹ããªãŒã ãšã€ãã³ãã®åŠçã«RxJS Observablesã䜿çšããŸãã
ãããã®ã©ã€ãã©ãªã䜿çšãããšãå®è£ ãç°¡çŽ åãããšã©ãŒåŠçããã£ã«ã¿ãªã³ã°ã倿ãªã©ã®ããé«åºŠãªæ©èœãæäŸã§ããŸãã
4. å¿çšïŒRxJS Observablesã®äœ¿çš
RxJSïŒReactive Extensions for JavaScriptïŒã¯ãObservablesã䜿çšããŠéåæããŒã¿ã¹ããªãŒã ãšã€ãã³ãã管çããããã®åŒ·åãªæ¹æ³ãæäŸããŸããObservablesã¯ãªãã¶ãŒããŒãã¿ãŒã³ã®äžè¬åã§ãããã€ãã³ãã®å€æããã£ã«ã¿ãªã³ã°ãçµåã®ããã®è±å¯ãªãªãã¬ãŒã¿ã»ãããæäŸããŸãã
import { Subject } from 'rxjs';
import { filter, map } from 'rxjs/operators';
// Create a Subject (Publisher)
const dataStream = new Subject();
// Subscriber 1
dataStream.pipe(
filter(data => data.type === 'user'),
map(data => data.payload)
).subscribe(data => {
console.log('User data received:', data);
});
// Subscriber 2
dataStream.pipe(
filter(data => data.type === 'product'),
map(data => data.payload)
).subscribe(data => {
console.log('Product data received:', data);
});
// Publishing events
dataStream.next({ type: 'user', payload: { name: 'John', age: 30 } });
dataStream.next({ type: 'product', payload: { id: 123, name: 'Laptop' } });
dataStream.next({ type: 'user', payload: { name: 'Jane', age: 25 } });
解説ïŒ
Subjectã¯ãæåã§å€ãæŸåºã§ããObservableã®äžçš®ã§ããpipeã¯ãfilterãmapã®ãããªãªãã¬ãŒã¿ãé£çµããŠããŒã¿ã¹ããªãŒã ã倿ããããã«äœ¿çšãããŸããsubscribeã¯ãåŠçãããããŒã¿ãåãåããªã¹ããŒãç»é²ããããã«äœ¿çšãããŸãã- RxJSã¯ãããè€éãªã€ãã³ãåŠçã·ããªãªã®ããã«ãããã«å€ãã®ãªãã¬ãŒã¿ãæäŸããŸãã
ãªãã¶ãŒããŒãã¿ãŒã³ã䜿çšããããã®ãã¹ããã©ã¯ãã£ã¹
JavaScriptã¢ãžã¥ãŒã«ã§ãªãã¶ãŒããŒãã¿ãŒã³ã广çã«äœ¿çšããã«ã¯ã以äžã®ãã¹ããã©ã¯ãã£ã¹ãèæ ®ããŠãã ããã
1. ççµå
ãµããžã§ã¯ããšãªãã¶ãŒããŒãççµåã§ããããšã確èªããŠãã ããããµããžã§ã¯ãã¯ãªãã¶ãŒããŒã®å ·äœçãªå®è£ 詳现ãç¥ãå¿ èŠã¯ãããŸãããããã«ãããã¢ãžã¥ãŒã«æ§ ãšä¿å®æ§ãåäžããŸããäŸãã°ãã°ããŒãã«ãªãªãŒãã£ãšã³ã¹ã«å¯Ÿå¿ãããŠã§ããµã€ããäœæããå Žåãççµåã«ãã£ãŠãã³ã¢ã³ã³ãã³ãé ä¿¡ïŒãµããžã§ã¯ãïŒã倿Žããããšãªããèšèªèšå®ïŒãªãã¶ãŒããŒïŒãæŽæ°ã§ããŸãã
2. ãšã©ãŒãã³ããªã³ã°
é©å ãªãšã©ãŒãã³ããªã³ã°ãå®è£ ãããããªãã¶ãŒããŒã®ãšã©ãŒãä»ã®ãªãã¶ãŒããŒããµããžã§ã¯ãã«åœ±é¿ãäžããªãããã«ããŠãã ãããtry-catchãããã¯ããšã©ãŒå¢çã³ã³ããŒãã³ãã䜿çšããŠãäŸå€ãé©åã«ææãåŠçããŸãã
3. ã¡ã¢ãªç®¡ç
ç¹ã«é·æéåç¶ãã賌èªãæ±ãå Žåã¯ãã¡ã¢ãªãªãŒã¯ã«æ³šæããŠãã ããããªãã¶ãŒããŒãäžèŠã«ãªã£ãå Žåã¯ãå¿ ãã€ãã³ãã®è³Œèªãè§£é€ããŠãã ãããã»ãšãã©ã®ã€ãã³ãçºè¡ã©ã€ãã©ãªã¯ã賌èªè§£é€ã¡ã«ããºã ãæäŸããŠããŸãã
4. ã€ãã³ãåœåèŠå
ã³ãŒãã®å¯èªæ§ãšä¿å®æ§ãåäžãããããã«ãã€ãã³ãã®æç¢ºã§äžè²«æ§ã®ããåœåèŠåã確ç«ããŠãã ãããäŸãã°ãdataUpdatedãuserLoggedInããŸãã¯orderCreatedã®ãããªèšè¿°çãªååã䜿çšããŸããã€ãã³ããçºè¡ããã¢ãžã¥ãŒã«ãŸãã¯ã³ã³ããŒãã³ãã瀺ããã¬ãã£ãã¯ã¹ïŒäŸïŒuserModule:loggedInïŒã䜿çšããããšãæ€èšããŠãã ãããåœéåãããã¢ããªã±ãŒã·ã§ã³ã§ã¯ãèšèªã«äŸåããªããã¬ãã£ãã¯ã¹ãŸãã¯åå空éã䜿çšããŸãã
5. éåææäœ
éåææäœãæ±ãå ŽåãPromisesãasync/awaitãªã©ã®ãã¯ããã¯ã䜿çšããŠãã€ãã³ããšéç¥ãé©åã«åŠçããŸããRxJS Observablesã¯ãè€éãªéåæã€ãã³ãã¹ããªãŒã ã®ç®¡çã«ç¹ã«é©ããŠããŸããç°ãªãã¿ã€ã ãŸãŒã³ããã®ããŒã¿ãæ±ãå Žåãé©åãªæ¥æã©ã€ãã©ãªãšå€æã䜿çšããŠãæéäŸåã®ã€ãã³ããæ£ããåŠçãããããšã確èªããŠãã ããã
6. ã»ãã¥ãªãã£ã«é¢ããèæ ®äºé
ã€ãã³ãã·ã¹ãã ãæ©å¯ããŒã¿ã«äœ¿çšãããå Žåãç¹å®ã®ã€ãã³ãã®çºè¡ããã³è³Œèªãžã®ã¢ã¯ã»ã¹æš©ãæã€è ã«æ³šæããŠãã ãããé©åãªèªèšŒããã³èªå¯å¯Ÿçã䜿çšããŠãã ããã
7. é床ãªéç¥ã®åé¿
ãµããžã§ã¯ãã¯ãé¢é£ããç¶æ å€åãçºçããå Žåã«ã®ã¿ãªãã¶ãŒããŒã«éç¥ããããã«ããŠãã ãããé床ãªéç¥ã¯ããã©ãŒãã³ã¹ã®åé¡ãäžèŠãªåŠçã«ã€ãªããå¯èœæ§ããããŸããéç¥ãå¿ èŠãªå Žåã«ã®ã¿éä¿¡ãããããã«ãã§ãã¯ãå®è£ ããŠãã ããã
å®è·µçãªäŸãšãŠãŒã¹ã±ãŒã¹
ãªãã¶ãŒããŒãã¿ãŒã³ã¯ãJavaScriptéçºã«ãããå¹ åºãã·ããªãªã§é©çšå¯èœã§ããããã€ãã®äŸãæããŸãã
1. UIã®æŽæ°
ã·ã³ã°ã«ããŒãžã¢ããªã±ãŒã·ã§ã³ïŒSPAïŒã§ã¯ãããŒã¿ã倿Žããããšãã«UIã³ã³ããŒãã³ããæŽæ°ããããã«ãªãã¶ãŒããŒãã¿ãŒã³ã䜿çšã§ããŸããäŸãã°ãããŒã¿ãµãŒãã¹ã¢ãžã¥ãŒã«ã¯ãAPIããæ°ããããŒã¿ããã§ããããããšãã«ã€ãã³ããçºè¡ããUIã³ã³ããŒãã³ãã¯ãã®ã€ãã³ãã賌èªããŠè¡šç€ºãæŽæ°ã§ããŸããæ°ããããŒã¿ãå©çšå¯èœã«ãªããã³ã«ãã£ãŒããããŒãã«ããµããªãŒã¡ããªã¯ã¹ãæŽæ°ããå¿ èŠãããããã·ã¥ããŒãã¢ããªã±ãŒã·ã§ã³ãèããŠã¿ãŠãã ããããªãã¶ãŒããŒãã¿ãŒã³ã¯ããã¹ãŠã®é¢é£ã³ã³ããŒãã³ããå¹ççã«éç¥ãããæŽæ°ãããããšãä¿èšŒããŸãã
2. ã³ã³ããŒãã³ãéã®éä¿¡
ReactãVue.jsãAngularã®ãããªã³ã³ããŒãã³ãããŒã¹ã®ãã¬ãŒã ã¯ãŒã¯ã§ã¯ããªãã¶ãŒããŒãã¿ãŒã³ã¯çŽæ¥é¢é£ããªãã³ã³ããŒãã³ãéã®éä¿¡ãä¿é²ã§ããŸããäžå€®ã€ãã³ããã¹ã䜿çšããŠãã¢ããªã±ãŒã·ã§ã³å šäœã§ã€ãã³ããçºè¡ããã³è³Œèªã§ããŸããäŸãã°ãèšèªéžæã³ã³ããŒãã³ãã¯èšèªã倿Žããããšãã«ã€ãã³ããçºè¡ããä»ã®ã³ã³ããŒãã³ãã¯ãã®ã€ãã³ãã賌èªããŠããã«å¿ããŠããã¹ãã³ã³ãã³ããæŽæ°ã§ããŸããããã¯ãç°ãªãã³ã³ããŒãã³ãããã±ãŒã«ã®å€æŽã«åå¿ããå¿ èŠãããå€èšèªã¢ããªã±ãŒã·ã§ã³ã§ç¹ã«åœ¹ç«ã¡ãŸãã
3. ãã®ã³ã°ãšç£æ»
ãªãã¶ãŒããŒãã¿ãŒã³ã¯ãã€ãã³ãããã°ã«èšé²ãããŠãŒã¶ãŒã¢ã¯ã·ã§ã³ãç£æ»ããããã«äœ¿çšã§ããŸããã¢ãžã¥ãŒã«ã¯userLoggedInãorderCreatedã®ãããªã€ãã³ãã賌èªããé¢é£æ
å ±ãããŒã¿ããŒã¹ããã¡ã€ã«ã«èšé²ã§ããŸããããã¯ã»ãã¥ãªãã£ç£èŠãšã³ã³ãã©ã€ã¢ã³ã¹ã®ç®çã§åœ¹ç«ã¡ãŸããäŸãã°ãéèã¢ããªã±ãŒã·ã§ã³ã§ã¯ãèŠå¶èŠä»¶ãžã®æºæ ã確ä¿ããããã«ããã¹ãŠã®ååŒããã°ã«èšé²ãããå¯èœæ§ããããŸãã
4. ãªã¢ã«ã¿ã€ã æŽæ°
ãã£ããã¢ããªã±ãŒã·ã§ã³ãã©ã€ãããã·ã¥ããŒãã®ãããªãªã¢ã«ã¿ã€ã ã¢ããªã±ãŒã·ã§ã³ã§ã¯ããªãã¶ãŒããŒãã¿ãŒã³ã䜿çšããŠããµãŒããŒäžã§çºçããæŽæ°ãããã«ã¯ã©ã€ã¢ã³ãã«ããã·ã¥ã§ããŸããWebSocketãServer-Sent EventsïŒSSEïŒã䜿çšããŠããµãŒããŒããã¯ã©ã€ã¢ã³ãã«ã€ãã³ããéä¿¡ã§ããã¯ã©ã€ã¢ã³ãåŽã®ã³ãŒãã¯ãªãã¶ãŒããŒãã¿ãŒã³ã䜿çšããŠUIã³ã³ããŒãã³ãã«æŽæ°ãéç¥ã§ããŸãã
5. éåæã¿ã¹ã¯ç®¡ç
éåæã¿ã¹ã¯ã管çããå Žåããªãã¶ãŒããŒãã¿ãŒã³ã䜿çšããŠãã¿ã¹ã¯ãå®äºãŸãã¯å€±æãããšãã«ã¢ãžã¥ãŒã«ã«éç¥ã§ããŸããäŸãã°ããã¡ã€ã«åŠçã¢ãžã¥ãŒã«ã¯ããã¡ã€ã«ãæ£åžžã«åŠçããããšãã«ã€ãã³ããçºè¡ããä»ã®ã¢ãžã¥ãŒã«ã¯ãã®ã€ãã³ãã賌èªããŠãã©ããŒã¢ããã¢ã¯ã·ã§ã³ãå®è¡ã§ããŸããããã¯ãé害ãé©åã«åŠçã§ããå ç¢ã§åŒŸåæ§ã®ããã¢ããªã±ãŒã·ã§ã³ãæ§ç¯ããã®ã«åœ¹ç«ã¡ãŸãã
ã°ããŒãã«ãªèæ ®äºé
ã°ããŒãã«ãªãŒãã£ãšã³ã¹åãã«èšèšãããã¢ããªã±ãŒã·ã§ã³ã§ãªãã¶ãŒããŒãã¿ãŒã³ãå®è£ ããéã«ã¯ã以äžã®ç¹ãèæ ®ããŠãã ããã
1. ããŒã«ã©ã€ãŒãŒã·ã§ã³
ã€ãã³ããšéç¥ãé©åã«ããŒã«ã©ã€ãºãããŠããããšã確èªããŠãã ãããåœéåïŒi18nïŒã©ã€ãã©ãªã䜿çšããŠãã€ãã³ãã¡ãã»ãŒãžãšããŒã¿ãç°ãªãèšèªã«ç¿»èš³ããŸããäŸãã°ãorderCreatedã®ãããªã€ãã³ãã¯ããã€ãèªã§BestellungErstelltãšç¿»èš³ã§ããŸãã
2. ã¿ã€ã ãŸãŒã³
æéäŸåã®ã€ãã³ããæ±ãéã¯ãã¿ã€ã ãŸãŒã³ã«æ³šæããŠãã ãããé©åãªæ¥æã©ã€ãã©ãªã䜿çšããŠãæéããŠãŒã¶ãŒã®çŸå°ã¿ã€ã ãŸãŒã³ã«å€æããŸããäŸãã°ãUTCã®åå10æã«çºçããã€ãã³ãã¯ããã¥ãŒãšãŒã¯ã®ãŠãŒã¶ãŒã«ã¯ESTã®åå6æãšããŠè¡šç€ºãããã¹ãã§ããMoment.jsãLuxonã®ãããªã©ã€ãã©ãªã䜿çšããŠã¿ã€ã ãŸãŒã³å€æã广çã«åŠçããããšãæ€èšããŠãã ããã
3. é貚
ã¢ããªã±ãŒã·ã§ã³ãéèååŒãæ±ãå Žåãé貚å€ããŠãŒã¶ãŒã®çŸå°é貚ã§è¡šç€ºãããããšã確èªããŠãã ãããé貚æžåŒèšå®ã©ã€ãã©ãªã䜿çšããŠãæ£ããèšå·ãšå°æ°åºåãã§éé¡ã衚瀺ããŸããäŸãã°ã$100.00 USDã®éé¡ã¯ããšãŒãããã®ãŠãŒã¶ãŒã«ã¯â¬90.00 EURãšããŠè¡šç€ºãããã¹ãã§ããInternationalization API (Intl)ã®ãããªAPIã䜿çšããŠããŠãŒã¶ãŒã®ãã±ãŒã«ã«åºã¥ããŠé貚ããã©ãŒãããããŸãã
4. æåçãªé æ ®
ã€ãã³ããéç¥ãèšèšããéã«ã¯ãæåçãªéãã«æ³šæããŠãã ãããç¹å®ã®æåã«ãããŠäžå¿«ãŸãã¯äžé©åãšãªãããç»åãã¡ãã»ãŒãžã®äœ¿çšã¯é¿ããŠãã ãããäŸãã°ãç¹å®ã®è²åœ©ãèšå·ã¯ãç°ãªãæåã§ã¯ç°ãªãæå³ãæã€ããšããããŸããã¢ããªã±ãŒã·ã§ã³ãæåçã«é æ ®ãããå æ¬çã§ããããšã確èªããããã«ã培åºçãªèª¿æ»ã宿œããŠãã ããã
5. ã¢ã¯ã»ã·ããªãã£
ã€ãã³ããšéç¥ããé害ãæã€ãŠãŒã¶ãŒã«ãšã£ãŠã¢ã¯ã»ã¹å¯èœã§ããããšã確èªããŠãã ãããARIA屿§ã䜿çšããŠãæ¯æŽæè¡ã«ã»ãã³ãã£ãã¯æ
å ±ãæäŸããŸããäŸãã°ãaria-liveã䜿çšããŠã¹ã¯ãªãŒã³ãªãŒããŒã«æŽæ°ãã¢ããŠã³ã¹ããŸããç»åã«ã¯ä»£æ¿ããã¹ããæäŸããéç¥ã§ã¯æç¢ºã§ç°¡æœãªèšèªã䜿çšããŠãã ããã
çµè«
ãªãã¶ãŒããŒãã¿ãŒã³ã¯ãã¢ãžã¥ãŒã«æ§ãä¿å®æ§ãæ¡åŒµæ§ã®é«ãJavaScriptã¢ããªã±ãŒã·ã§ã³ãæ§ç¯ããããã®è²ŽéãªããŒã«ã§ããæ žãšãªãæŠå¿µãšãã¹ããã©ã¯ãã£ã¹ãçè§£ããããšã§ãéçºè ã¯ãã®ãã¿ãŒã³ã广çã«äœ¿çšããŠãã¢ãžã¥ãŒã«éã®éä¿¡ãä¿é²ããéåææäœã管çããåçã§ã¬ã¹ãã³ã·ããªãŠãŒã¶ãŒã€ã³ã¿ãŒãã§ãŒã¹ãäœæã§ããŸããã°ããŒãã«ãªãŒãã£ãšã³ã¹åãã«ã¢ããªã±ãŒã·ã§ã³ãèšèšããéã«ã¯ããŠãŒã¶ãŒã®å Žæãèæ¯ã«é¢ä¿ãªãããã¹ãŠã®ãŠãŒã¶ãŒã«ãšã£ãŠå æ¬çã§äœ¿ããããã¢ããªã±ãŒã·ã§ã³ã§ããããšãä¿èšŒããããã«ãããŒã«ã©ã€ãŒãŒã·ã§ã³ãã¿ã€ã ãŸãŒã³ãé貚ãæåçãªé æ ®ãããã³ã¢ã¯ã»ã·ããªãã£ãèæ ®ããããšãäžå¯æ¬ ã§ãããªãã¶ãŒããŒãã¿ãŒã³ãç¿åŸããããšã¯ãçŸä»£ã®ãŠã§ãéçºã®èŠæ±ãæºãããããå ç¢ã§é©å¿æ§ã®é«ãJavaScriptã¢ããªã±ãŒã·ã§ã³ãäœæããåãééããªãäžããã§ãããã