JavaScriptã¢ããªã±ãŒã·ã§ã³ã«ãããå¹ççãªæ¯ãèã管çããã¢ãžã¥ãŒã«ç¶æ ãã¿ãŒã³ã«é¢ããç¶²çŸ çãªã¬ã€ãã§è§£ãæŸã¡ãŸããããå ç¢ã§ã¹ã±ãŒã©ãã«ããã€ä¿å®æ§ã®é«ãã³ãŒããã°ããŒãã«ãªãŒãã£ãšã³ã¹åãã«æ§ç¯ããããã®å®çšçãªãã¯ããã¯ãæ¢ããŸãã
JavaScriptã¢ãžã¥ãŒã«ç¶æ ãã¿ãŒã³ïŒã°ããŒãã«ã¢ããªã±ãŒã·ã§ã³ã®æ¯ãèã管çãæ¥µãã
仿¥ã®çžäºæ¥ç¶ãããããžã¿ã«ç°å¢ã«ãããŠãå ç¢ã§ã¹ã±ãŒã©ãã«ãªJavaScriptã¢ããªã±ãŒã·ã§ã³ãæ§ç¯ããããšã¯æãéèŠã§ããå€åœç±äŒæ¥åãã®ãã€ã¯ããµãŒãã¹ããŒã¹ã®ããã¯ãšã³ããéçºããå Žåã§ããã°ããŒãã«ãªeã³ããŒã¹ãã©ãããã©ãŒã åãã®ãã€ãããã¯ãªããã³ããšã³ããéçºããå Žåã§ãã广çãªç¶æ 管çã¯æåããæ¯ãèã管çã®åºç€ãšãªããŸãããã®å æ¬çãªã¬ã€ãã§ã¯ãããŸããŸãªJavaScriptã¢ãžã¥ãŒã«ç¶æ ãã¿ãŒã³ãæãäžããäžçäžã®éçºè ãããæŽçãããä¿å®æ§ãé«ããäºæž¬å¯èœãªã³ãŒããäœæããã®ã«åœ¹ç«ã€æŽå¯ãšå®çšçãªäŸãæäŸããŸãã
JavaScriptã«ãããç¶æ ãšæ¯ãèããçè§£ãã
ç¹å®ã®ãã¿ãŒã³ã«å ¥ãåã«ãJavaScriptéçºã®æèã§ãç¶æ ããšãæ¯ãèãããäœãæå³ããã®ããå®çŸ©ããããšãéèŠã§ãã
ç¶æ ãšã¯ãã¢ããªã±ãŒã·ã§ã³ãç¹å®ã®ç¬éã«ä¿æããããŒã¿ãæããŸããããã«ã¯ããŠãŒã¶ãŒèšå®ãååŸããããŒã¿ãUIèŠçŽ ã®è¡šç€ºã倿®µéããã»ã¹ã«ãããçŸåšã®ã¹ããããªã©ããããããã®ãå«ãŸããŸããã¢ãžã¥ãŒã«åãããJavaScriptã§ã¯ãç¶æ ã¯å€ãã®å Žåã¢ãžã¥ãŒã«å ã«ååšãããããã®ã¢ãžã¥ãŒã«ãã©ã®ããã«åäœããçžäºäœçšãããã«åœ±é¿ãäžããŸãã
æ¯ãèããšã¯ãã¢ãžã¥ãŒã«ãŸãã¯ã¢ããªã±ãŒã·ã§ã³ã³ã³ããŒãã³ããããã®ç¶æ ã®å€åãŸãã¯å€éšã€ãã³ãã«å¿ããŠã©ã®ããã«åäœãããã瀺ããŸããé©åã«ç®¡çãããç¶æ ã¯ãäºæž¬å¯èœã§æç¢ºãªæ¯ãèãã«ã€ãªãããã¢ããªã±ãŒã·ã§ã³ã®çè§£ããããã°ãæ¡åŒµã容æã«ããŸãã
JavaScriptã¢ãžã¥ãŒã«ãšç¶æ ã®é²å
JavaScriptã®é²åã®éçšã§ãã¢ãžã¥ãŒã«ã®æ§é åæ¹æ³ãšããã®äžã§ã®ç¶æ ç®¡çæ¹æ³ã«å€§ããªé²æ©ãèŠãããŸãããæŽå²çã«ãã°ããŒãã«ã¹ã³ãŒãã®æ±æã¯å€§ããªèª²é¡ã§ãããäºæž¬äžèœãªå¯äœçšã«ã€ãªãã£ãŠããŸãããã¢ãžã¥ãŒã«ã·ã¹ãã ã®å°å ¥ã«ãããã³ãŒãã®ç·šæãšç¶æ ã®ã«ãã»ã«åãåçã«æ¹åãããŸããã
åæã®JavaScriptã¯ãã¢ãžã¥ãŒã«æ§ããã©ã€ããŒãã¹ã³ãŒãã®ãããªãã®ãå®çŸããããã«ãã°ããŒãã«å€æ°ãšIIFEïŒå³æå®è¡é¢æ°åŒïŒã«å€§ããäŸåããŠããŸãããIIFEã¯ãã©ã€ããŒãã¹ã³ãŒããäœæããæ¹æ³ãæäŸããŸããããè€æ°ã®IIFEéã§ç¶æ ã管çããããšã¯äŸç¶ãšããŠç ©éã§ãããCommonJSïŒäž»ã«Node.jsåãïŒãšããã®åŸã®ESã¢ãžã¥ãŒã«ïŒECMAScript ModulesïŒã®ç»å Žã¯ãJavaScriptã³ãŒãã®ç·šææ¹æ³ã驿°ããæç€ºçãªäŸåé¢ä¿ç®¡çãšããè¯ãç¶æ ã®åé¢ãå¯èœã«ããŸããã
äž»èŠãªJavaScriptã¢ãžã¥ãŒã«ç¶æ ãã¿ãŒã³
JavaScriptã¢ãžã¥ãŒã«å ã§ç¶æ ã广çã«ç®¡çããããã«ãããã€ãã®ãã¶ã€ã³ãã¿ãŒã³ãç»å ŽããŸããããããã®ãã¿ãŒã³ã¯ãã«ãã»ã«åãåå©çšæ§ããã¹ãå®¹ææ§ãä¿é²ããã°ããŒãã«ãªãŠãŒã¶ãŒããŒã¹ã«ãµãŒãã¹ãæäŸã§ããã¢ããªã±ãŒã·ã§ã³ãæ§ç¯ããããã«äžå¯æ¬ ã§ãã
1. Revealing Moduleãã¿ãŒã³
Revealing Moduleãã¿ãŒã³ã¯ãModuleãã¿ãŒã³ã®æ¡åŒµã§ãããã¢ãžã¥ãŒã«å ã§ãã©ã€ããŒããªããŒã¿ãšé¢æ°ãã«ãã»ã«åããäžè¬çãªæ¹æ³ã§ãããã®ãã¿ãŒã³ã¯ããããªãã¯ã¡ãœãããšããããã£ã®ã¿ãå«ããªããžã§ã¯ããªãã©ã«ãå ·äœçã«è¿ããå€éšã§ã®äœ¿çšãæå³ãããã®ã ãã广çã«ãå ¬éãããŸãã
ä»çµã¿ïŒ- ãã¡ã¯ããªé¢æ°ãŸãã¯IIFEããã©ã€ããŒãã¹ã³ãŒããäœæããŸãã
- ãã©ã€ããŒã倿°ãšé¢æ°ã¯ããã®ã¹ã³ãŒãå ã§å®£èšãããŸãã
- ãããªãã¯ã€ã³ã¿ãŒãã§ãŒã¹ãä¿æããããã®å¥ã®ãªããžã§ã¯ããã¹ã³ãŒãå ã«äœæãããŸãã
- ãã©ã€ããŒã颿°ã¯ããã®ãããªãã¯ãªããžã§ã¯ãã®ã¡ãœãããšããŠå²ãåœãŠãããŸãã
- ãããªãã¯ã€ã³ã¿ãŒãã§ãŒã¹ãå«ããªããžã§ã¯ããè¿ãããŸãã
// module.js
const stateManager = (function() {
let _privateCounter = 0;
const _privateMessage = "Internal data";
function _increment() {
_privateCounter++;
console.log(`Counter: ${_privateCounter}`);
}
function getMessage() {
return _privateMessage;
}
function incrementAndLog() {
_increment();
}
// Revealing the public interface
return {
getMessage: getMessage,
increment: incrementAndLog
};
})();
// Usage:
console.log(stateManager.getMessage()); // "Internal data"
stateManager.increment(); // Logs "Counter: 1"
stateManager.increment(); // Logs "Counter: 2"
// console.log(stateManager._privateCounter); // undefined (private)
- ã«ãã»ã«åïŒãããªãã¯APIãšå éšå®è£ ãæç¢ºã«åé¢ããç°ãªãå°åãã¢ãžã¥ãŒã«éã§ã®æå³ããªãå¯äœçšã®ãªã¹ã¯ã軜æžããŸãã
- ä¿å®æ§ïŒãããªãã¯APIãäžå®ã§ããéããå éšã®ç¶æ ãããžãã¯ã®å€æŽã¯å€éšã®å©çšè ã«åœ±é¿ãäžããŸããã
- å¯èªæ§ïŒã¢ãžã¥ãŒã«ã®ã©ã®éšåãã¢ã¯ã»ã¹å¯èœã§ããããæç€ºçã«å®çŸ©ããŸãã
2. ESã¢ãžã¥ãŒã«ïŒESMïŒãšã«ãã»ã«å
ESã¢ãžã¥ãŒã«ã¯ãJavaScriptã®ãã€ãã£ãã§æšæºçãªã¢ãžã¥ãŒã«ã·ã¹ãã ã§ãããããã¯ãæ©èœãã€ã³ããŒãããã³ãšã¯ã¹ããŒãããããã®å ç¢ãªæ¹æ³ãæäŸããã¹ã³ãŒãåãããã¢ãžã¥ãŒã«ãéããŠãæ¬è³ªçã«åªããç¶æ 管çãä¿é²ããŸãã
ä»çµã¿ïŒ- åãã¡ã€ã«ãã¢ãžã¥ãŒã«ã§ãã
- æç€ºçãª
export
ã¹ããŒãã¡ã³ãã¯ãã¢ãžã¥ãŒã«ãå©çšå¯èœã«ãããã®ãå®çŸ©ããŸãã - æç€ºçãª
import
ã¹ããŒãã¡ã³ãã¯ãäŸåé¢ä¿ã宣èšããŸãã - ã¢ãžã¥ãŒã«å
ã§å®£èšããã倿°ã颿°ãããã³ã¯ã©ã¹ã¯ãããã©ã«ãã§ãã©ã€ããŒãã§ããã
export
ãéããŠã®ã¿å ¬éãããŸãã
// counter.js
let count = 0;
export function increment() {
count++;
console.log(`Count is now: ${count}`);
}
export function getCount() {
return count;
}
// app.js
import { increment, getCount } from './counter.js';
console.log('Initial count:', getCount()); // Initial count: 0
increment(); // Count is now: 1
console.log('Updated count:', getCount()); // Updated count: 1
// import { increment } from './anotherModule.js'; // Explicit dependency
- æšæºåïŒææ°ã®JavaScriptç°å¢ïŒãã©ãŠã¶ãNode.jsïŒå šäœã§æ®éçã«æ¡çšãããŠããŸãã
- æç¢ºãªäŸåé¢ä¿ïŒæç€ºçãªã€ã³ããŒãã«ãããã¢ãžã¥ãŒã«éã®é¢ä¿ãçè§£ãããããªããè€éãªã°ããŒãã«ã·ã¹ãã ã«ãšã£ãŠäžå¯æ¬ ã§ãã
- ã¹ã³ãŒãåãããç¶æ ïŒããã¢ãžã¥ãŒã«å ã®ç¶æ ã¯ãæç€ºçã«ãšã¯ã¹ããŒããããªãéããä»ã®ã¢ãžã¥ãŒã«ã«æŒããããšããªãã忣ã·ã¹ãã ã§ã®è¡çªãé²ããŸãã
- éçè§£æïŒããŒã«ã¯äŸåé¢ä¿ãšã³ãŒãã®æµãããã广çã«åæã§ããŸãã
3. ç¶æ 管çã©ã€ãã©ãªïŒäŸïŒReduxãZustandãVuexïŒ
å€§èŠæš¡ã§è€éãªã¢ããªã±ãŒã·ã§ã³ãç¹ã«å€ãã®ã³ã³ããŒãã³ããã¢ãžã¥ãŒã«éã§å ±æããå¿ èŠãããè€éãªã°ããŒãã«ç¶æ ãæã€ã¢ããªã±ãŒã·ã§ã³ã§ã¯ãå°çšã®ç¶æ 管çã©ã€ãã©ãªãéåžžã«è²Žéã§ãããããã®ã©ã€ãã©ãªã¯ãç¶æ 管çãäžå åãããã¿ãŒã³ãããæ¡çšããŠããŸãã
ãã䜿çšãããäž»èŠãªæŠå¿µïŒ- åäžã®ç宿ºïŒSingle Source of TruthïŒïŒã¢ããªã±ãŒã·ã§ã³å šäœã®ç¶æ ã1ç®æïŒäžå€®ã¹ãã¢ïŒã«ä¿åãããŸãã
- ç¶æ ã¯èªã¿åãå°çšïŒç¶æ ã倿Žããå¯äžã®æ¹æ³ã¯ããã¢ã¯ã·ã§ã³ãããã£ã¹ãããããããšã§ããã¢ã¯ã·ã§ã³ã¯ãäœãèµ·ãã£ãããèšè¿°ããçŽç²ãªJavaScriptãªããžã§ã¯ãã§ãã
- 倿Žã¯çŽç²ãªé¢æ°ã§è¡ãããïŒã¬ãã¥ãŒãµãŒã¯åã®ç¶æ ãšã¢ã¯ã·ã§ã³ãåãåããæ¬¡ã®ç¶æ ãè¿ããŸãã
// store.js
let currentState = {
user: null,
settings: { theme: 'light', language: 'en' }
};
const listeners = [];
function getState() {
return currentState;
}
function subscribe(listener) {
listeners.push(listener);
return () => {
const index = listeners.indexOf(listener);
if (index > -1) {
listeners.splice(index, 1);
}
};
}
function dispatch(action) {
// In a real Redux store, a reducer function would handle this logic
switch (action.type) {
case 'SET_USER':
currentState = { ...currentState, user: action.payload };
break;
case 'UPDATE_SETTINGS':
currentState = { ...currentState, settings: { ...currentState.settings, ...action.payload } };
break;
default:
// Do nothing for unknown actions
}
listeners.forEach(listener => listener());
}
export const store = {
getState,
subscribe,
dispatch
};
// Component/Module that uses the store
// import { store } from './store';
// const unsubscribe = store.subscribe(() => {
// console.log('State changed:', store.getState());
// });
// store.dispatch({ type: 'SET_USER', payload: { name: 'Alice', id: '123' } });
// store.dispatch({ type: 'UPDATE_SETTINGS', payload: { language: 'fr' } });
// unsubscribe(); // Stop listening for changes
- äžå åãããç¶æ ïŒããŒã¿ã®äžè²«æ§ãéèŠãªã°ããŒãã«ãªãŠãŒã¶ãŒããŒã¹ãæã€ã¢ããªã±ãŒã·ã§ã³ã«ãšã£ãŠäžå¯æ¬ ã§ããäŸãã°ãå€åœç±äŒæ¥ã®ããã·ã¥ããŒãã«ã¯ãå°åããŒã¿ã®çµ±äžããããã¥ãŒãå¿ èŠã§ãã
- äºæž¬å¯èœãªç¶æ é·ç§»ïŒã¢ã¯ã·ã§ã³ãšã¬ãã¥ãŒãµãŒã«ãããç¶æ ã®å€åãééçãã€è¿œè·¡å¯èœã«ãªãã忣ããŒã ã§ã®ãããã°ãç°¡çŽ åãããŸãã
- ã¿ã€ã ãã©ãã«ãããã°ïŒå€ãã®ã©ã€ãã©ãªãã¢ã¯ã·ã§ã³ã®åçããµããŒãããŠãããç¹å®ã®æ¡ä»¶äžãç¹å®ã®å°ççæèã§ã®ã¿çŸããå¯èœæ§ã®ããåé¡ã蚺æããã®ã«éåžžã«åœ¹ç«ã¡ãŸãã
- 容æãªçµ±åïŒãããã®ãã¿ãŒã³ã¯ããçè§£ãããŠãããReactãVueãAngularãªã©ã®äžè¬çãªãã¬ãŒã ã¯ãŒã¯ãšã·ãŒã ã¬ã¹ã«çµ±åã§ããŸãã
4. ã¢ãžã¥ãŒã«ãšããŠã®ç¶æ ãªããžã§ã¯ã
æã«ã¯ãç¹å®ã®ç¶æ ã管çãããããšå¯Ÿè©±ããããã®ã¡ãœãããå ¬éããããšãå¯äžã®ç®çãšããã¢ãžã¥ãŒã«ãäœæããã®ãæãç°¡åãªã¢ãããŒãã§ããããã¯Moduleãã¿ãŒã³ã«äŒŒãŠããŸãããããã¯ãªãŒã³ãªäŸåé¢ä¿ç®¡çã®ããã«ESã¢ãžã¥ãŒã«ã䜿çšããŠå®è£ ã§ããŸãã
ä»çµã¿ïŒ- ã¢ãžã¥ãŒã«ã¯ç¶æ 倿°ãŸãã¯ãªããžã§ã¯ããã«ãã»ã«åããŸãã
- ãã®ç¶æ ã倿ŽãŸãã¯èªã¿åã颿°ããšã¯ã¹ããŒãããŸãã
- ä»ã®ã¢ãžã¥ãŒã«ã¯ããããã®é¢æ°ãã€ã³ããŒãããŠç¶æ ãšå¯Ÿè©±ããŸãã
// userProfile.js
let profileData = {
username: 'Guest',
preferences: { country: 'Unknown', language: 'en' }
};
export function setUsername(name) {
profileData.username = name;
}
export function updatePreferences(prefs) {
profileData.preferences = { ...profileData.preferences, ...prefs };
}
export function getProfile() {
return { ...profileData }; // Return a copy to prevent direct mutation
}
// anotherModule.js
import { setUsername, updatePreferences, getProfile } from './userProfile.js';
setUsername('GlobalUser');
updatePreferences({ country: 'Canada', language: 'fr' });
const currentUserProfile = getProfile();
console.log(currentUserProfile); // { username: 'GlobalUser', preferences: { country: 'Canada', language: 'fr' } }
- ã·ã³ãã«ãïŒæç¢ºã«å®çŸ©ãããç¶æ ã»ã°ã¡ã³ãã®ç®¡çã«ãããŠãçè§£ãããããå®è£ ã容æã§ãã
- ã¢ãžã¥ãŒã«æ§ïŒç¶æ ããžãã¯ãåé¢ããåã ã®ç¶æ ã«é¢ããæŽæ°ãšãã¹ãã容æã«ããŸãã
- çµå床ã®äœæžïŒã¢ãžã¥ãŒã«ã¯ãå ¬éãããç¶æ 管ç颿°ãšã®ã¿å¯Ÿè©±ããå éšç¶æ ãšã¯çŽæ¥å¯Ÿè©±ããŸããã
5. ã¢ãžã¥ãŒã«å ã®Observerãã¿ãŒã³ïŒPub/SubïŒ
Observerãã¿ãŒã³ïŒPublish-SubscribeãšãåŒã°ããïŒã¯ãäºãã«çŽæ¥çãªç¥èãªãã«ç¶æ ã®å€åã«åå¿ããå¿ èŠãããã³ã³ããŒãã³ããççµåã«ããã®ã«åªããŠããŸãã1ã€ã®ã¢ãžã¥ãŒã«ïŒãµããžã§ã¯ããŸãã¯ãããªãã·ã£ãŒïŒã¯ãäŸåãªããžã§ã¯ãïŒãªãã¶ãŒããŒïŒã®ãªã¹ããç¶æããç¶æ ã®å€åããã£ãå Žåã«ããããèªåçã«éç¥ããŸãã
ä»çµã¿ïŒ- äžå€®ã€ãã³ããã¹ãŸãã¯ç£èŠå¯èœãªãªããžã§ã¯ããäœæãããŸãã
- ã¢ãžã¥ãŒã«ã¯ç¹å®ã®ã€ãã³ãïŒç¶æ ã®å€åïŒãã賌èªãã§ããŸãã
- ä»ã®ã¢ãžã¥ãŒã«ã¯ã€ãã³ãããçºè¡ããããã¹ãŠã®è³Œèªè ã«éç¥ãããªã¬ãŒã§ããŸãã
// eventBus.js
const events = {};
function subscribe(event, callback) {
if (!events[event]) {
events[event] = [];
}
events[event].push(callback);
return () => {
// Unsubscribe
events[event] = events[event].filter(cb => cb !== callback);
};
}
function publish(event, data) {
if (events[event]) {
events[event].forEach(callback => callback(data));
}
}
export const eventBus = {
subscribe,
publish
};
// moduleA.js (Publisher)
// import { eventBus } from './eventBus';
// const user = { name: 'Global Dev', role: 'Engineer' };
// eventBus.publish('userLoggedIn', user);
// moduleB.js (Subscriber)
// import { eventBus } from './eventBus';
// eventBus.subscribe('userLoggedIn', (userData) => {
// console.log(`Welcome, ${userData.name}! Your role is ${userData.role}.`);
// });
// moduleC.js (Subscriber)
// import { eventBus } from './eventBus';
// eventBus.subscribe('userLoggedIn', (userData) => {
// document.getElementById('userInfo').innerText = `Logged in as: ${userData.name}`;
// });
- ççµåïŒã³ã³ããŒãã³ãã¯äºãã«ç¥ãå¿ èŠããããŸãããããå°åã§ã®ãŠãŒã¶ãŒãããã¡ã€ã«ã®æŽæ°ã¯ãçŽæ¥çãªã¢ãžã¥ãŒã«ééä¿¡ãªãã«ãå¥ã®å°åã§ã®UIæŽæ°ãããªã¬ãŒã§ããŸãã
- æè»æ§ïŒæ¢åã®ãããªãã·ã£ãŒã倿Žããããšãªããæ°ãããµãã¹ã¯ã©ã€ããŒã远å ã§ããŸããããã¯ãç°ãªãåžå Žã§ç¬ç«ããŠé²åããæ©èœã«ãšã£ãŠäžå¯æ¬ ã§ãã
- ã¹ã±ãŒã©ããªãã£ïŒåæ£ã·ã¹ãã ããã€ã¯ããµãŒãã¹å šäœã«ç¶æ 倿ŽããããŒããã£ã¹ãããããã«å®¹æã«æ¡åŒµå¯èœã§ãã
ã°ããŒãã«ãããžã§ã¯ãã«é©ãããã¿ãŒã³ã®éžæ
ç¶æ 管çãã¿ãŒã³ã®éžæã¯ãã¢ããªã±ãŒã·ã§ã³ã®ã¹ã³ãŒããè€éããããã³ç¹å®ã®èŠä»¶ã«å€§ããäŸåããŸãã
- ã·ã³ãã«ã§èªå·±å®çµåã®ã¢ãžã¥ãŒã«ã®å ŽåïŒRevealing Moduleãã¿ãŒã³ãŸãã¯åºæ¬çãªESã¢ãžã¥ãŒã«ã®ã«ãã»ã«åã§ååãããããŸããã
- å€ãã®ã³ã³ããŒãã³ãéã§å ±æãããè€éãªç¶æ ãæã€ã¢ããªã±ãŒã·ã§ã³ã®å ŽåïŒReduxãZustandãVuexã®ãããªã©ã€ãã©ãªã¯ãå ç¢ã§ã¹ã±ãŒã©ãã«ãªãœãªã¥ãŒã·ã§ã³ãæäŸããŸãã
- ã€ãã³ãã«åå¿ããççµåã®ã³ã³ããŒãã³ãã®å ŽåïŒã¢ãžã¥ãŒã«ãšçµ±åãããObserverãã¿ãŒã³ã¯åªããéžæè¢ã§ãã
- åå¥ã®ç¶æ ãç¬ç«ããŠç®¡çããå ŽåïŒã¢ãžã¥ãŒã«ãšããŠã®ç¶æ ãªããžã§ã¯ãã¯ãã¯ãªãŒã³ã§çŠç¹ãçµã£ãã¢ãããŒããæäŸããŸãã
ã°ããŒãã«ãªãªãŒãã£ãšã³ã¹åãã«æ§ç¯ããéã«ã¯ã以äžãèæ ®ããŠãã ããã
- ããŒã«ãªãŒãŒã·ã§ã³ãšåœéåïŒi18n/l10nïŒïŒãŠãŒã¶ãŒãã±ãŒã«ãé貚ãèšèªã«é¢é£ããç¶æ ã¯ãäœç³»çã«ç®¡çãããã¹ãã§ãããã®ç¶æ ã容æã«æŽæ°ããã³äŒæã§ãããã¿ãŒã³ãæçã§ãã
- ããã©ãŒãã³ã¹ïŒå€æ§ãªãããã¯ãŒã¯ç°å¢ã®ãŠãŒã¶ãŒã«ãµãŒãã¹ãæäŸããã¢ããªã±ãŒã·ã§ã³ã«ãšã£ãŠãå¹ççãªç¶æ æŽæ°ãšæå°éã®åã¬ã³ããªã³ã°ã¯éèŠã§ããæŽæ°ãæé©åããç¶æ 管çãœãªã¥ãŒã·ã§ã³ãéµãšãªããŸãã
- ããŒã ã³ã©ãã¬ãŒã·ã§ã³ïŒæçããæç€ºæ§ãäºæž¬å¯èœãªæ¯ãèããä¿é²ãããã¿ãŒã³ã¯ãå€§èŠæš¡ã§åæ£ããåœéçãªéçºããŒã ã«ãšã£ãŠäžå¯æ¬ ã§ããESã¢ãžã¥ãŒã«ã®ãããªæšæºåããããã¿ãŒã³ã¯ãå ±éã®çè§£ãè²ã¿ãŸãã
ã°ããŒãã«ç¶æ 管çã®ãã¹ããã©ã¯ãã£ã¹
éžæãããã¿ãŒã³ã«é¢ãããããã¹ããã©ã¯ãã£ã¹ãéµå®ããããšã§ãã¢ããªã±ãŒã·ã§ã³ã¯ã°ããŒãã«èŠæš¡ã§ç®¡çå¯èœãã€å ç¢ã«ä¿ãããŸãã
- ç¶æ ãæå°éã«æããããŒã«ã«ã«ä¿ã€ïŒå¿ èŠãªãã®ã ããä¿åããŸããç¶æ ãç¹å®ã®ã³ã³ããŒãã³ããŸãã¯ã¢ãžã¥ãŒã«ã«ã®ã¿é¢é£ããå Žåã¯ãããã«ä¿æããŸããã¢ããªã±ãŒã·ã§ã³å šäœã«äžèŠãªç¶æ ãäŒæãããªãã§ãã ããã
- äžå€æ§ïŒå¯èœãªéããç¶æ ãäžå€ãšããŠæ±ããŸããæ¢åã®ç¶æ ã倿Žããã®ã§ã¯ãªããå¿ èŠãªå€æŽãå ããæ°ããç¶æ ãªããžã§ã¯ããäœæããŸããããã«ãããäºæããªãå¯äœçšãé²ããç¹ã«äžŠè¡ç°å¢ã§ã®ãããã°ãã¯ããã«å®¹æã«ããŸããImmerã®ãããªã©ã€ãã©ãªã¯ãäžå€ãªæŽæ°ã®ç®¡çã«åœ¹ç«ã¡ãŸãã
- æç¢ºãªç¶æ é·ç§»ïŒç¶æ ã®å€åãäºæž¬å¯èœã§ãããå®çŸ©ããããããŒã«åŸã£ãŠããããšã確èªããŸããããã¯ãReduxã®ã¬ãã¥ãŒãµãŒã®ãããªãã¿ãŒã³ãåªããŠããç¹ã§ãã
- æç¢ºã«å®çŸ©ãããAPIïŒã¢ãžã¥ãŒã«ã¯ããã®ç¶æ ãšå¯Ÿè©±ããããã®æç¢ºã§ç°¡æœãªAPIãå ¬éããå¿ èŠããããŸããããã«ã¯ãã²ãã¿ãŒé¢æ°ãšãã¥ãŒããŒã·ã§ã³é¢æ°ãå«ãŸããŸãã
- å æ¬çãªãã¹ãïŒç¶æ 管çããžãã¯ã®åäœãã¹ããšçµåãã¹ããäœæããŸããããã¯ãããŸããŸãªãŠãŒã¶ãŒã·ããªãªãå°ççã³ã³ããã¹ãå šäœã§ã®æ£ç¢ºæ§ã確ä¿ããããã«äžå¯æ¬ ã§ãã
- ããã¥ã¡ã³ããŒã·ã§ã³ïŒåç¶æ 管çã¢ãžã¥ãŒã«ã®ç®çãšãã®APIãæç¢ºã«ææžåããŸããããã¯ã°ããŒãã«ããŒã ã«ãšã£ãŠéåžžã«è²Žéã§ãã
çµè«
JavaScriptã¢ãžã¥ãŒã«ç¶æ ãã¿ãŒã³ãç¿åŸããããšã¯ãã°ããŒãã«ãªãªãŒãã£ãšã³ã¹ã«å¹æçã«ãµãŒãã¹ãæäŸã§ããé«å質ã§ã¹ã±ãŒã©ãã«ãªã¢ããªã±ãŒã·ã§ã³ãæ§ç¯ããããã®åºæ¬ã§ããRevealing Moduleãã¿ãŒã³ãESã¢ãžã¥ãŒã«ãç¶æ 管çã©ã€ãã©ãªãObserverãã¿ãŒã³ãªã©ã®ãã¿ãŒã³ãçè§£ãé©çšããããšã§ãéçºè ã¯ããæŽçãããäºæž¬å¯èœã§ãä¿å®æ§ã®é«ãã³ãŒãããŒã¹ãäœæã§ããŸãã
åœéçãªãããžã§ã¯ãã§ã¯ãæç¢ºãªäŸåé¢ä¿ãæç€ºçãªç¶æ é·ç§»ãå ç¢ãªã«ãã»ã«åãžã®éç¹ãããã«éèŠã«ãªããŸãããããžã§ã¯ãã®è€éãã«æãé©ãããã¿ãŒã³ãéžæããäžå€æ§ãšäºæž¬å¯èœãªç¶æ 倿Žãåªå ããã³ãŒãå質ãšã³ã©ãã¬ãŒã·ã§ã³ã®ããã®ãã¹ããã©ã¯ãã£ã¹ãåžžã«éµå®ããŠãã ãããããããããšã§ããŠãŒã¶ãŒãã©ãã«ããŠãJavaScriptã¢ããªã±ãŒã·ã§ã³ã®æ¯ãèãã管çããããã®æºåãæŽããŸãã
å®è·µçãªæŽå¯ïŒ
- çŸåšã®ç¶æ 管çãç£æ»ããïŒç¶æ ãäžé©åã«ç®¡çãããŠããããŸãã¯äºæããªãæ¯ãèããåŒãèµ·ãããŠããé åãç¹å®ããŸãã
- ESã¢ãžã¥ãŒã«ãæ¡çšããïŒãŸã 䜿çšããŠããªãå Žåã¯ãESã¢ãžã¥ãŒã«ã«ç§»è¡ããããšã§ããããžã§ã¯ãã®æ§é ãå€§å¹ ã«æ¹åãããŸãã
- ç¶æ 管çã©ã€ãã©ãªãè©äŸ¡ããïŒè€éãªãããžã§ã¯ãã§ã¯ãå°çšã©ã€ãã©ãªã®èª¿æ»ãšçµ±åãæ€èšããŠãã ããã
- äžå€æ§ãå®è·µããïŒäžå€ãªç¶æ æŽæ°ãã¯ãŒã¯ãããŒã«çµ±åããŸãã
- ç¶æ ããžãã¯ããã¹ãããïŒåŸ¹åºçãªãã¹ããéããŠãç¶æ 管çãå¯èœãªéãä¿¡é Œã§ãããã®ã§ããããšã確èªããŸãã
å ç¢ãªç¶æ 管çãã¿ãŒã³ã«æè³ããããšã§ãæ©èœçã§ããã ãã§ãªããã°ããŒãã«ãªãŠãŒã¶ãŒããŒã¹ã®å€æ§ãªããŒãºã«é©å¿ã§ãããå埩åã®ããã¢ããªã±ãŒã·ã§ã³ã®ããã®åŒ·åºãªåºç€ãç¯ãããšãã§ããŸãã