JavaScriptã¢ãžã¥ãŒã«ãã§ãã¬ãŒã·ã§ã³ã®äŸåé¢ä¿è§£æ±ºæŠç¥ãæ·±æããåç管çãšã¹ã±ãŒã©ãã«ãªãã€ã¯ãããã³ããšã³ãã¢ãŒããã¯ãã£ã®ãã¹ããã©ã¯ãã£ã¹ã解説ããŸãã
JavaScriptã¢ãžã¥ãŒã«ãã§ãã¬ãŒã·ã§ã³ã®äŸåé¢ä¿è§£æ±ºïŒåçãªäŸåé¢ä¿ç®¡ç
Webpack 5ã§å°å ¥ããã匷åãªæ©èœã§ããJavaScript Module Federationã¯ããã€ã¯ãããã³ããšã³ãã¢ãŒããã¯ãã£ã®æ§ç¯ãå¯èœã«ããŸããããã«ãããéçºè ã¯ç¬ç«ããŠãããã€å¯èœãªã¢ãžã¥ãŒã«ã®éåãšããŠã¢ããªã±ãŒã·ã§ã³ãæ§ç¯ã§ããã¹ã±ãŒã©ããªãã£ãšä¿å®æ§ãåäžãããããšãã§ããŸãããããããã§ãã¬ãŒã·ã§ã³ãããã¢ãžã¥ãŒã«éã§äŸåé¢ä¿ã管çããããšã¯è€éã«ãªãå ŽåããããŸãããã®èšäºã§ã¯ãã¢ãžã¥ãŒã«ãã§ãã¬ãŒã·ã§ã³ã®äŸåé¢ä¿è§£æ±ºã®è€éããæ·±ãæãäžããåçãªäŸåé¢ä¿ç®¡çãšãå ç¢ã§é©å¿æ§ã®é«ããã€ã¯ãããã³ããšã³ãã·ã¹ãã ãæ§ç¯ããããã®æŠç¥ã«çŠç¹ãåœãŠãŸãã
ã¢ãžã¥ãŒã«ãã§ãã¬ãŒã·ã§ã³ã®åºæ¬ãçè§£ãã
äŸåé¢ä¿è§£æ±ºã«é£ã³èŸŒãåã«ãã¢ãžã¥ãŒã«ãã§ãã¬ãŒã·ã§ã³ã®åºæ¬çãªæŠå¿µã埩ç¿ããŸãããã
- ãã¹ã: ãªã¢ãŒãã¢ãžã¥ãŒã«ãå©çšããã¢ããªã±ãŒã·ã§ã³ã
- ãªã¢ãŒã: å©çšãããã¢ãžã¥ãŒã«ãå ¬éããã¢ããªã±ãŒã·ã§ã³ã
- å ±æäŸåé¢ä¿: ãã¹ããšãªã¢ãŒãã¢ããªã±ãŒã·ã§ã³éã§å ±æãããã©ã€ãã©ãªãããã«ãããéè€ãé¿ããäžè²«ãããŠãŒã¶ãŒãšã¯ã¹ããªãšã³ã¹ãä¿èšŒããŸãã
- Webpackèšå®:
ModuleFederationPluginã¯ãã¢ãžã¥ãŒã«ãã©ã®ããã«å ¬éãããå©çšãããããèšå®ããŸãã
Webpackã®ModuleFederationPluginèšå®ã¯ããªã¢ãŒãã«ãã£ãŠã©ã®ã¢ãžã¥ãŒã«ãå
¬éããããããŸããã¹ããã©ã®ãªã¢ãŒãã¢ãžã¥ãŒã«ãå©çšã§ããããå®çŸ©ããŸãããŸããå
±æäŸåé¢ä¿ãæå®ããã¢ããªã±ãŒã·ã§ã³éã§å
±éã®ã©ã€ãã©ãªãåå©çšã§ããããã«ããŸãã
äŸåé¢ä¿è§£æ±ºã®èª²é¡
ã¢ãžã¥ãŒã«ãã§ãã¬ãŒã·ã§ã³ã«ãããäŸåé¢ä¿è§£æ±ºã®æ žå¿çãªèª²é¡ã¯ããã¹ãã¢ããªã±ãŒã·ã§ã³ãšãªã¢ãŒãã¢ãžã¥ãŒã«ãå ±æäŸåé¢ä¿ã®äºææ§ã®ããããŒãžã§ã³ã䜿çšããããã«ä¿èšŒããããšã§ããäžæŽåã¯ã©ã³ã¿ã€ã ãšã©ãŒãäºæãã¬åäœããããŠæççãªãŠãŒã¶ãŒãšã¯ã¹ããªãšã³ã¹ã«ã€ãªããå¯èœæ§ããããŸããäŸãæããŠèª¬æããŸãããïŒ
ãã¹ãã¢ããªã±ãŒã·ã§ã³ãReactããŒãžã§ã³17ã䜿çšãããªã¢ãŒãã¢ãžã¥ãŒã«ãReactããŒãžã§ã³18ã§éçºããããšæ³åããŠã¿ãŠãã ãããé©åãªäŸåé¢ä¿ç®¡çããªããã°ããã¹ãã¯ãªã¢ãŒãããã®React 18ã³ã³ããŒãã³ãã§èªèº«ã®React 17ã³ã³ããã¹ãã䜿çšããããšãããšã©ãŒã«ã€ãªããå¯èœæ§ããããŸãã
éµã¯ãModuleFederationPluginå
ã®sharedããããã£ãèšå®ããããšã«ãããŸããããã«ãããWebpackã¯ãã«ãæããã³å®è¡æã«å
±æäŸåé¢ä¿ãã©ã®ããã«æ±ãããæç€ºãããŸãã
éçäŸåé¢ä¿ç®¡ç vs. åçäŸåé¢ä¿ç®¡ç
ã¢ãžã¥ãŒã«ãã§ãã¬ãŒã·ã§ã³ã«ãããäŸåé¢ä¿ç®¡çã¯ãäž»ã«éçãšåçã®2ã€ã®æ¹æ³ã§ã¢ãããŒãã§ããŸãããã®éããçè§£ããããšã¯ãã¢ããªã±ãŒã·ã§ã³ã«é©ããæŠç¥ãéžæããäžã§éåžžã«éèŠã§ãã
éçäŸåé¢ä¿ç®¡ç
éçäŸåé¢ä¿ç®¡çã§ã¯ãå
±æäŸåé¢ä¿ãšãã®ããŒãžã§ã³ãModuleFederationPluginèšå®ã§æç€ºçã«å®£èšããŸãããã®ã¢ãããŒãã¯ããåªããå¶åŸ¡ãšäºæž¬å¯èœæ§ãæäŸããŸãããæè»æ§ã«æ¬ ããããšããããŸãã
äŸ:
// webpack.config.js (ãã¹ã)
const ModuleFederationPlugin = require('webpack/lib/container/ModuleFederationPlugin');
module.exports = {
// ... ä»ã®webpackèšå®
plugins: [
new ModuleFederationPlugin({
name: 'host',
remotes: {
'remoteApp': 'remoteApp@http://localhost:3001/remoteEntry.js',
},
shared: {
react: { // Reactãå
±æäŸåé¢ä¿ãšããŠæç€ºçã«å®£èš
singleton: true, // Reactã®åäžããŒãžã§ã³ã®ã¿ãããŒã
requiredVersion: '^17.0.0', // 蚱容ãããããŒãžã§ã³ç¯å²ãæå®
},
'react-dom': { // ReactDOMãå
±æäŸåé¢ä¿ãšããŠæç€ºçã«å®£èš
singleton: true,
requiredVersion: '^17.0.0',
},
},
}),
],
};
// webpack.config.js (ãªã¢ãŒã)
const ModuleFederationPlugin = require('webpack/lib/container/ModuleFederationPlugin');
module.exports = {
// ... ä»ã®webpackèšå®
plugins: [
new ModuleFederationPlugin({
name: 'remoteApp',
exposes: {
'./Widget': './src/Widget',
},
shared: {
react: { // Reactãå
±æäŸåé¢ä¿ãšããŠæç€ºçã«å®£èš
singleton: true, // Reactã®åäžããŒãžã§ã³ã®ã¿ãããŒã
requiredVersion: '^17.0.0', // 蚱容ãããããŒãžã§ã³ç¯å²ãæå®
},
'react-dom': { // ReactDOMãå
±æäŸåé¢ä¿ãšããŠæç€ºçã«å®£èš
singleton: true,
requiredVersion: '^17.0.0',
},
},
}),
],
};
ãã®äŸã§ã¯ããã¹ããšãªã¢ãŒãã®äž¡æ¹ãReactãšReactDOMãå
±æäŸåé¢ä¿ãšããŠæç€ºçã«å®çŸ©ããåäžã®ããŒãžã§ã³ã®ã¿ãããŒããããã¹ãã§ããããš(singleton: true)ãšã^17.0.0ã®ç¯å²å
ã®ããŒãžã§ã³ãå¿
èŠã§ããããšãæå®ããŠããŸããããã«ãããäž¡æ¹ã®ã¢ããªã±ãŒã·ã§ã³ãäºææ§ã®ããããŒãžã§ã³ã®Reactã䜿çšããããšãä¿èšŒãããŸãã
éçäŸåé¢ä¿ç®¡çã®å©ç¹:
- äºæž¬å¯èœæ§: äŸåé¢ä¿ãæç€ºçã«å®çŸ©ããããšã§ããããã€ã¡ã³ãéã§äžè²«ããåäœãä¿èšŒãããŸãã
- å¶åŸ¡æ§: éçºè ã¯å ±æäŸåé¢ä¿ã®ããŒãžã§ã³ã现ããå¶åŸ¡ã§ããŸãã
- æ©æã®ãšã©ãŒæ€åº: ãã«ãæã«ããŒãžã§ã³ã®äžäžèŽãæ€åºã§ããŸãã
éçäŸåé¢ä¿ç®¡çã®æ¬ ç¹:
- æè»æ§ã®äœã: å ±æäŸåé¢ä¿ã®ããŒãžã§ã³ã倿Žããããã³ã«èšå®ãæŽæ°ããå¿ èŠããããŸãã
- ç«¶åã®å¯èœæ§: ç°ãªããªã¢ãŒããåãäŸåé¢ä¿ã®äºææ§ã®ãªãããŒãžã§ã³ãèŠæ±ããå ŽåãããŒãžã§ã³ã®ç«¶åã«ã€ãªããå¯èœæ§ããããŸãã
- ã¡ã³ããã³ã¹ã®ãªãŒããŒããã: äŸåé¢ä¿ãæåã§ç®¡çããã®ã¯æéããããããšã©ãŒãçºçãããããªããŸãã
åçäŸåé¢ä¿ç®¡ç
åçäŸåé¢ä¿ç®¡çã¯ãå®è¡æã®è©äŸ¡ãšåçã€ã³ããŒããæŽ»çšããŠå ±æäŸåé¢ä¿ãåŠçããŸãããã®ã¢ãããŒãã¯ããé«ãæè»æ§ãæäŸããŸãããå®è¡æãšã©ãŒãé¿ããããã«ã¯æ éãªæ€èšãå¿ èŠã§ãã
äžè¬çãªææ³ã®1ã€ã¯ãå©çšå¯èœãªããŒãžã§ã³ã«åºã¥ããŠå®è¡æã«å ±æäŸåé¢ä¿ãããŒãããããã«åçã€ã³ããŒãã䜿çšããããšã§ããããã«ããããã¹ãã¢ããªã±ãŒã·ã§ã³ã¯äœ¿çšããäŸåé¢ä¿ã®ããŒãžã§ã³ãåçã«æ±ºå®ã§ããŸãã
äŸ:
// webpack.config.js (ãã¹ã)
const ModuleFederationPlugin = require('webpack/lib/container/ModuleFederationPlugin');
module.exports = {
// ... ä»ã®webpackèšå®
plugins: [
new ModuleFederationPlugin({
name: 'host',
remotes: {
'remoteApp': 'remoteApp@http://localhost:3001/remoteEntry.js',
},
shared: {
react: {
singleton: true,
// ããã§ã¯requiredVersionãæå®ããªã
},
'react-dom': {
singleton: true,
// ããã§ã¯requiredVersionãæå®ããªã
},
},
}),
],
};
// ãã¹ãã¢ããªã±ãŒã·ã§ã³ã®ã³ãŒãå
async function loadRemoteWidget() {
try {
const remoteWidget = await import('remoteApp/Widget');
// ãªã¢ãŒããŠã£ãžã§ããã䜿çš
} catch (error) {
console.error('Failed to load remote widget:', error);
}
}
loadRemoteWidget();
// webpack.config.js (ãªã¢ãŒã)
const ModuleFederationPlugin = require('webpack/lib/container/ModuleFederationPlugin');
module.exports = {
// ... ä»ã®webpackèšå®
plugins: [
new ModuleFederationPlugin({
name: 'remoteApp',
exposes: {
'./Widget': './src/Widget',
},
shared: {
react: {
singleton: true,
// ããã§ã¯requiredVersionãæå®ããªã
},
'react-dom': {
singleton: true,
// ããã§ã¯requiredVersionãæå®ããªã
},
},
}),
],
};
ãã®äŸã§ã¯ãrequiredVersionãå
±æäŸåé¢ä¿ã®èšå®ããåé€ãããŠããŸããããã«ããããã¹ãã¢ããªã±ãŒã·ã§ã³ã¯ãªã¢ãŒããæäŸããä»»æã®ããŒãžã§ã³ã®ReactãããŒãã§ããŸãããã¹ãã¢ããªã±ãŒã·ã§ã³ã¯åçã€ã³ããŒãã䜿çšããŠãªã¢ãŒããŠã£ãžã§ãããããŒãããå®è¡æã«äŸåé¢ä¿ã®è§£æ±ºãåŠçããŸããããã«ããæè»æ§ãåäžããŸããããªã¢ãŒãã¯ãã¹ããæã€å¯èœæ§ã®ãã以åã®ããŒãžã§ã³ã®Reactãšã®åŸæ¹äºææ§ãä¿ã€å¿
èŠããããŸãã
åçäŸåé¢ä¿ç®¡çã®å©ç¹:
- æè»æ§: å®è¡æã«å ±æäŸåé¢ä¿ã®ç°ãªãããŒãžã§ã³ã«é©å¿ããŸãã
- èšå®ã®åæž:
ModuleFederationPluginã®èšå®ãç°¡çŽ åããŸãã - ãããã€ã¡ã³ãã®æ¹å: ãã¹ãã®æŽæ°ãå¿ èŠãšããã«ãªã¢ãŒãã®ç¬ç«ãããããã€ã¡ã³ããå¯èœã«ããŸãã
åçäŸåé¢ä¿ç®¡çã®æ¬ ç¹:
- å®è¡æãšã©ãŒ: ãªã¢ãŒãã¢ãžã¥ãŒã«ããã¹ãã®äŸåé¢ä¿ãšäºææ§ããªãå ŽåãããŒãžã§ã³ã®äžäžèŽãå®è¡æãšã©ãŒã«ã€ãªããå¯èœæ§ããããŸãã
- è€éæ§ã®å¢å : åçã€ã³ããŒããšãšã©ãŒãã³ããªã³ã°ã®æ éãªåãæ±ããå¿ èŠã§ãã
- ããã©ãŒãã³ã¹ã®ãªãŒããŒããã: åçããŒãã¯ããããªããã©ãŒãã³ã¹ã®ãªãŒããŒããããåŒãèµ·ããå¯èœæ§ããããŸãã
广çãªäŸåé¢ä¿è§£æ±ºã®ããã®æŠç¥
éçãŸãã¯åçãªäŸåé¢ä¿ç®¡çã®ã©ã¡ããéžæãããã«ããããããããã€ãã®æŠç¥ãã¢ãžã¥ãŒã«ãã§ãã¬ãŒã·ã§ã³ã¢ãŒããã¯ãã£ã§å¹æçãªäŸåé¢ä¿è§£æ±ºãä¿èšŒããã®ã«åœ¹ç«ã¡ãŸãã
1. ã»ãã³ãã£ãã¯ããŒãžã§ãã³ã° (SemVer)
ã»ãã³ãã£ãã¯ããŒãžã§ãã³ã°ã«åŸãããšã¯ãäŸåé¢ä¿ã广çã«ç®¡çããããã«äžå¯æ¬ ã§ããSemVerã¯ãã©ã€ãã©ãªã®ç°ãªãããŒãžã§ã³ã®äºææ§ãç€ºãæšæºåãããæ¹æ³ãæäŸããŸããSemVerã«åŸãããšã§ãã©ã®ããŒãžã§ã³ã®å ±æäŸåé¢ä¿ããã¹ãããã³ãªã¢ãŒãã¢ãžã¥ãŒã«ãšäºææ§ããããã«ã€ããŠãæ å ±ã«åºã¥ããæ±ºå®ãäžãããšãã§ããŸãã
sharedèšå®ã®requiredVersionããããã£ã¯SemVerã®ç¯å²ããµããŒãããŸããäŸãã°ã^17.0.0ã¯ã17.0.0以äžã§18.0.0æªæºã®ä»»æã®ããŒãžã§ã³ã®Reactã蚱容ãããããšã瀺ããŸããSemVerã®ç¯å²ãçè§£ãæŽ»çšããããšã¯ãããŒãžã§ã³ã®ç«¶åãé²ããäºææ§ãä¿èšŒããã®ã«åœ¹ç«ã¡ãŸãã
2. äŸåé¢ä¿ã®ããŒãžã§ã³åºå®
SemVerã®ç¯å²ã¯æè»æ§ãæäŸããŸãããäŸåé¢ä¿ãç¹å®ã®ããŒãžã§ã³ã«åºå®ããããšã§ãå®å®æ§ãšäºæž¬å¯èœæ§ãåäžãããããšãã§ããŸããããã«ã¯ãç¯å²ã®ä»£ããã«æ£ç¢ºãªããŒãžã§ã³çªå·ãæå®ããããšãå«ãŸããŸãããã ãããã®ã¢ãããŒãã«äŒŽãã¡ã³ããã³ã¹ã®ãªãŒããŒãããã®å¢å ãšç«¶åã®å¯èœæ§ã«æ³šæããŠãã ããã
äŸ:
// webpack.config.js
shared: {
react: {
singleton: true,
requiredVersion: '17.0.2',
},
}
ãã®äŸã§ã¯ãReactã¯ããŒãžã§ã³17.0.2ã«åºå®ãããŠããŸããããã«ããããã¹ããšãªã¢ãŒãã¢ãžã¥ãŒã«ã®äž¡æ¹ããã®ç¹å®ã®ããŒãžã§ã³ã䜿çšããããšãä¿èšŒãããããŒãžã§ã³é¢é£ã®åé¡ã®å¯èœæ§ãæé€ãããŸãã
3. Shared Scope Plugin
Shared Scope Pluginã¯ãå®è¡æã«äŸåé¢ä¿ãå ±æããããã®ã¡ã«ããºã ãæäŸããŸããããã«ãããäŸåé¢ä¿ãç»é²ããã³è§£æ±ºã§ããå ±æã¹ã³ãŒããå®çŸ©ã§ããŸããããã¯ããã«ãæã«äžæãªäŸåé¢ä¿ã管çããã®ã«åœ¹ç«ã¡ãŸãã
Shared Scope Pluginã¯é«åºŠãªæ©èœãæäŸããŸããã远å ã®è€éãããããããŸããç¹å®ã®ãŠãŒã¹ã±ãŒã¹ã§ãããå¿ èŠãã©ãããæ éã«æ€èšããŠãã ããã
4. ããŒãžã§ã³äº€æž
ããŒãžã§ã³äº€æžã¯ãå®è¡æã«äœ¿çšããå ±æäŸåé¢ä¿ã®æé©ãªããŒãžã§ã³ãåçã«æ±ºå®ããããšãå«ã¿ãŸããããã¯ããã¹ããšãªã¢ãŒãã¢ãžã¥ãŒã«ã§å©çšå¯èœãªäŸåé¢ä¿ã®ããŒãžã§ã³ãæ¯èŒããæãäºææ§ã®ããããŒãžã§ã³ãéžæããã«ã¹ã¿ã ããžãã¯ãå®è£ ããããšã§å®çŸã§ããŸãã
ããŒãžã§ã³äº€æžã¯ãé¢é£ããäŸåé¢ä¿ã®æ·±ãçè§£ãå¿ èŠãšããå®è£ ãè€éã«ãªãå¯èœæ§ããããŸããããããããã¯é«åºŠãªæè»æ§ãšé©å¿æ§ãæäŸããããšãã§ããŸãã
5. ãã£ãŒãã£ãŒãã©ã°
ãã£ãŒãã£ãŒãã©ã°ã䜿çšããŠãå ±æäŸåé¢ä¿ã®ç¹å®ã®ããŒãžã§ã³ã«äŸåããæ©èœãæ¡ä»¶ä»ãã§æå¹ãŸãã¯ç¡å¹ã«ããããšãã§ããŸããããã«ãããæ°æ©èœã段éçã«å±éããäŸåé¢ä¿ã®ç°ãªãããŒãžã§ã³ãšã®äºææ§ã確ä¿ã§ããŸãã
ã©ã€ãã©ãªã®ç¹å®ã®ããŒãžã§ã³ã«äŸåããã³ãŒãããã£ãŒãã£ãŒãã©ã°ã§ã©ããããããšã§ããã®ã³ãŒãããã€å®è¡ãããããå¶åŸ¡ã§ããŸããããã¯ãå®è¡æãšã©ãŒãé²ããã¹ã ãŒãºãªãŠãŒã¶ãŒãšã¯ã¹ããªãšã³ã¹ãä¿èšŒããã®ã«åœ¹ç«ã¡ãŸãã
6. å æ¬çãªãã¹ã
培åºçãªãã¹ãã¯ãã¢ãžã¥ãŒã«ãã§ãã¬ãŒã·ã§ã³ã¢ãŒããã¯ãã£ãå ±æäŸåé¢ä¿ã®ç°ãªãããŒãžã§ã³ã§æ£ããåäœããããšãä¿èšŒããããã«äžå¯æ¬ ã§ããããã«ã¯ãåäœãã¹ããçµ±åãã¹ããããã³ãšã³ãããŒãšã³ããã¹ããå«ãŸããŸãã
äŸåé¢ä¿ã®è§£æ±ºãšããŒãžã§ã³ã®äºææ§ãå ·äœçã«å¯Ÿè±¡ãšãããã¹ããäœæããŠãã ããããããã®ãã¹ãã¯ããã¹ããšãªã¢ãŒãã¢ãžã¥ãŒã«ã§ç°ãªãããŒãžã§ã³ã®å ±æäŸåé¢ä¿ã䜿çšãããªã©ãããŸããŸãªã·ããªãªãã·ãã¥ã¬ãŒãããå¿ èŠããããŸãã
7. äžå åãããäŸåé¢ä¿ç®¡ç
ããå€§èŠæš¡ãªã¢ãžã¥ãŒã«ãã§ãã¬ãŒã·ã§ã³ã¢ãŒããã¯ãã£ã§ã¯ãäžå åãããäŸåé¢ä¿ç®¡çã·ã¹ãã ã®å®è£ ãæ€èšããŠãã ããããã®ã·ã¹ãã ã¯ãå ±æäŸåé¢ä¿ã®ããŒãžã§ã³ã远跡ããäºææ§ãä¿èšŒããäŸåé¢ä¿æ å ±ã®ããã®åäžã®ä¿¡é Œã§ããæ å ±æºãæäŸãã責任ãè² ãããšãã§ããŸãã
äžå åãããäŸåé¢ä¿ç®¡çã·ã¹ãã ã¯ãäŸåé¢ä¿ã®ç®¡çããã»ã¹ãç°¡çŽ åãããšã©ãŒã®ãªã¹ã¯ãäœæžããã®ã«åœ¹ç«ã¡ãŸãããŸããã¢ããªã±ãŒã·ã§ã³å ã®äŸåé¢ä¿ã«é¢ãã貎éãªæŽå¯ãæäŸããããšãã§ããŸãã
åçäŸåé¢ä¿ç®¡çã®ãã¹ããã©ã¯ãã£ã¹
åçäŸåé¢ä¿ç®¡çãå®è£ ããéã«ã¯ã次ã®ãã¹ããã©ã¯ãã£ã¹ãèæ ®ããŠãã ããïŒ
- åŸæ¹äºææ§ã®åªå : ãªã¢ãŒãã¢ãžã¥ãŒã«ãå ±æäŸåé¢ä¿ã®å€ãããŒãžã§ã³ãšåŸæ¹äºææ§ãããããã«èšèšããŸããããã«ãããå®è¡æãšã©ãŒã®ãªã¹ã¯ãäœæžãããããã¹ã ãŒãºãªã¢ããã°ã¬ãŒããå¯èœã«ãªããŸãã
- å ç¢ãªãšã©ãŒãã³ããªã³ã°ã®å®è£ : å®è¡æã«çºçããå¯èœæ§ã®ããããŒãžã§ã³é¢é£ã®åé¡ããã£ããããé©åã«åŠçããããã®å æ¬çãªãšã©ãŒãã³ããªã³ã°ãå®è£ ããŸããéçºè ãåé¡ã蚺æã解決ããã®ã«åœ¹ç«ã€æçãªãšã©ãŒã¡ãã»ãŒãžãæäŸããŸãã
- äŸåé¢ä¿ã®äœ¿çšç¶æ³ã®ç£èŠ: å ±æäŸåé¢ä¿ã®äœ¿çšç¶æ³ãç£èŠããŠãæœåšçãªåé¡ãç¹å®ããããã©ãŒãã³ã¹ãæé©åããŸããã©ã®ã¢ãžã¥ãŒã«ãã©ã®ããŒãžã§ã³ã®äŸåé¢ä¿ã䜿çšããŠãããã远跡ããäžäžèŽãç¹å®ããŸãã
- äŸåé¢ä¿æŽæ°ã®èªåå: å ±æäŸåé¢ä¿ã®æŽæ°ããã»ã¹ãèªååããŠãã¢ããªã±ãŒã·ã§ã³ãåžžã«ææ°ããŒãžã§ã³ã䜿çšããããã«ããŸããDependabotãRenovateãªã©ã®ããŒã«ã䜿çšããŠãäŸåé¢ä¿ã®æŽæ°ã®ããã®ãã«ãªã¯ãšã¹ããèªåçã«äœæããŸãã
- æç¢ºãªã³ãã¥ãã±ãŒã·ã§ã³ãã£ãã«ã®ç¢ºç«: ç°ãªãã¢ãžã¥ãŒã«ã§äœæ¥ããŠããããŒã éã§æç¢ºãªã³ãã¥ãã±ãŒã·ã§ã³ãã£ãã«ã確ç«ããå šå¡ãäŸåé¢ä¿é¢é£ã®å€æŽãèªèã§ããããã«ããŸããSlackãMicrosoft Teamsãªã©ã®ããŒã«ã䜿çšããŠãã³ãã¥ãã±ãŒã·ã§ã³ãšã³ã©ãã¬ãŒã·ã§ã³ãä¿é²ããŸãã
å®äžçã®äŸ
ã¢ãžã¥ãŒã«ãã§ãã¬ãŒã·ã§ã³ãšåçäŸåé¢ä¿ç®¡çãããŸããŸãªã³ã³ããã¹ãã§ã©ã®ããã«é©çšã§ããããããã€ãã®å®äžçã®äŸãèŠãŠã¿ãŸãããã
eã³ããŒã¹ãã©ãããã©ãŒã
eã³ããŒã¹ãã©ãããã©ãŒã ã¯ãã¢ãžã¥ãŒã«ãã§ãã¬ãŒã·ã§ã³ã䜿çšããŠãååãªã¹ããã·ã§ããã³ã°ã«ãŒãããã§ãã¯ã¢ãŠããªã©ããã©ãããã©ãŒã ã®ããŸããŸãªéšåãç°ãªãããŒã ãæ åœãããã€ã¯ãããã³ããšã³ãã¢ãŒããã¯ãã£ãäœæã§ããŸããåçäŸåé¢ä¿ç®¡çã䜿çšããŠããããã®ã¢ãžã¥ãŒã«ããã©ãããã©ãŒã ãå£ãããšãªãç¬ç«ããŠãããã€ããã³æŽæ°ã§ããããã«ããããšãã§ããŸãã
äŸãã°ãååãªã¹ãã¢ãžã¥ãŒã«ã¯ã·ã§ããã³ã°ã«ãŒãã¢ãžã¥ãŒã«ãšã¯ç°ãªãããŒãžã§ã³ã®UIã©ã€ãã©ãªã䜿çšãããããããŸãããåçäŸåé¢ä¿ç®¡çã«ããããã©ãããã©ãŒã ã¯åã¢ãžã¥ãŒã«ã«å¯ŸããŠæ£ããããŒãžã§ã³ã®ã©ã€ãã©ãªãåçã«ããŒãããããããæ£ãã飿ºããŠåäœããããšãä¿èšŒããŸãã
éèãµãŒãã¹ã¢ããªã±ãŒã·ã§ã³
éèãµãŒãã¹ã¢ããªã±ãŒã·ã§ã³ã¯ãã¢ãžã¥ãŒã«ãã§ãã¬ãŒã·ã§ã³ã䜿çšããŠãã¢ã«ãŠã³ã管çãååŒãæè³ã¢ããã€ã¹ãªã©ãããŸããŸãªéèãµãŒãã¹ãæäŸããã¢ãžã¥ãŒã«åŒã®ã¢ãŒããã¯ãã£ãäœæã§ããŸããåçäŸåé¢ä¿ç®¡çã䜿çšããŠããããã®ã¢ãžã¥ãŒã«ãã¢ããªã±ãŒã·ã§ã³ã®ã³ã¢æ©èœã«åœ±é¿ãäžããããšãªãã«ã¹ã¿ãã€ãºããã³æ¡åŒµã§ããããã«ããããšãã§ããŸãã
äŸãã°ããµãŒãããŒãã£ã®ãã³ããŒãå°éçãªæè³ã¢ããã€ã¹ãæäŸããã¢ãžã¥ãŒã«ãæäŸãããããããŸãããåçäŸåé¢ä¿ç®¡çã«ãããã¢ããªã±ãŒã·ã§ã³ã¯ã³ã¢ã¢ããªã±ãŒã·ã§ã³ã³ãŒãã®å€æŽãå¿ èŠãšããã«ããã®ã¢ãžã¥ãŒã«ãåçã«ããŒãããŠçµ±åããããšãã§ããŸãã
å»çã·ã¹ãã
å»çã·ã¹ãã ã¯ãã¢ãžã¥ãŒã«ãã§ãã¬ãŒã·ã§ã³ã䜿çšããŠãæ£è èšé²ãäºçŽã¹ã±ãžã¥ãŒã«ãé éå»çãªã©ãããŸããŸãªå»çãµãŒãã¹ãæäŸãã忣ã¢ãŒããã¯ãã£ãäœæã§ããŸããåçäŸåé¢ä¿ç®¡çã䜿çšããŠããããã®ã¢ãžã¥ãŒã«ãç°ãªãå Žæããå®å šã«ã¢ã¯ã»ã¹ããã³ç®¡çã§ããããã«ããããšãã§ããŸãã
äŸãã°ãé éå°ã®ã¯ãªããã¯ãäžå€®ããŒã¿ããŒã¹ã«ä¿åãããŠããæ£è èšé²ã«ã¢ã¯ã»ã¹ããå¿ èŠããããããããŸãããåçäŸåé¢ä¿ç®¡çã«ãããã¯ãªããã¯ã¯ããŒã¿ããŒã¹å šäœãäžæ£ã¢ã¯ã»ã¹ã«ãããããšãªãããããã®èšé²ã«å®å šã«ã¢ã¯ã»ã¹ã§ããŸãã
ã¢ãžã¥ãŒã«ãã§ãã¬ãŒã·ã§ã³ãšäŸåé¢ä¿ç®¡çã®æªæ¥
ã¢ãžã¥ãŒã«ãã§ãã¬ãŒã·ã§ã³ã¯æ¥éã«é²åããŠããæè¡ã§ãããæ°ããæ©èœãèœåãçµ¶ããéçºãããŠããŸããå°æ¥çã«ã¯ã次ã®ãããªãããã«æŽç·ŽãããäŸåé¢ä¿ç®¡çã®ã¢ãããŒããèŠããããšæåŸ ãããŸãïŒ
- äŸåé¢ä¿ã®ç«¶åã®èªå解決: äŸåé¢ä¿ã®ç«¶åãèªåçã«æ€åºããã³è§£æ±ºããæåã§ã®ä»å ¥ã®å¿ èŠæ§ãæžããããŒã«ã
- AIãæŽ»çšããäŸåé¢ä¿ç®¡ç: éå»ã®äŸåé¢ä¿ã®åé¡ããåŠç¿ããããããåçºããã®ãç©æ¥µçã«é²ãããšãã§ããAIæèŒã·ã¹ãã ã
- 忣åäŸåé¢ä¿ç®¡ç: äŸåé¢ä¿ã®ããŒãžã§ã³ãšé åžããã现ããå¶åŸ¡ã§ãã忣åã·ã¹ãã ã
ã¢ãžã¥ãŒã«ãã§ãã¬ãŒã·ã§ã³ãé²åãç¶ããã«ã€ããŠãããã¯ã¹ã±ãŒã©ãã«ã§ä¿å®å¯èœããã€é©å¿æ§ã®é«ããã€ã¯ãããã³ããšã³ãã¢ãŒããã¯ãã£ãæ§ç¯ããããã®ããã«åŒ·åãªããŒã«ã«ãªãã§ãããã
çµè«
JavaScriptã¢ãžã¥ãŒã«ãã§ãã¬ãŒã·ã§ã³ã¯ããã€ã¯ãããã³ããšã³ãã¢ãŒããã¯ãã£ãæ§ç¯ããããã®åŒ·åãªã¢ãããŒããæäŸããŸãã广çãªäŸåé¢ä¿è§£æ±ºã¯ããããã®ã·ã¹ãã ã®å®å®æ§ãšä¿å®æ§ã確ä¿ããããã«äžå¯æ¬ ã§ããéçããã³åçãªäŸåé¢ä¿ç®¡çã®éããçè§£ãããã®èšäºã§æŠèª¬ããæŠç¥ãå®è£ ããããšã§ãçµç¹ãšãŠãŒã¶ãŒã®ããŒãºãæºããå ç¢ã§é©å¿æ§ã®é«ãã¢ãžã¥ãŒã«ãã§ãã¬ãŒã·ã§ã³ã¢ããªã±ãŒã·ã§ã³ãæ§ç¯ã§ããŸãã
é©åãªäŸåé¢ä¿è§£æ±ºæŠç¥ãéžæãããã¯ãã¢ããªã±ãŒã·ã§ã³ã®ç¹å®ã®èŠä»¶ã«ãã£ãŠç°ãªããŸããéçäŸåé¢ä¿ç®¡çã¯ããåªããå¶åŸ¡ãšäºæž¬å¯èœæ§ãæäŸããŸãããæè»æ§ã«æ¬ ããããšããããŸããåçäŸåé¢ä¿ç®¡çã¯ããé«ãæè»æ§ãæäŸããŸãããå®è¡æãšã©ãŒãé¿ããããã«ã¯æ éãªæ€èšãå¿ èŠã§ããããŒãºãæ éã«è©äŸ¡ããé©åãªæŠç¥ãå®è£ ããããšã§ãã¹ã±ãŒã©ãã«ã§ä¿å®æ§ã®é«ãã¢ãžã¥ãŒã«ãã§ãã¬ãŒã·ã§ã³ã¢ãŒããã¯ãã£ãäœæã§ããŸãã
ã¢ãžã¥ãŒã«ãã§ãã¬ãŒã·ã§ã³ã¢ããªã±ãŒã·ã§ã³ã®é·æçãªæåã確å®ã«ããããã«ãåŸæ¹äºææ§ãåªå ããå ç¢ãªãšã©ãŒãã³ããªã³ã°ãå®è£ ããäŸåé¢ä¿ã®äœ¿çšç¶æ³ãç£èŠããããšãå¿ããªãã§ãã ãããæ éãªèšç»ãšå®è¡ã«ãããã¢ãžã¥ãŒã«ãã§ãã¬ãŒã·ã§ã³ã¯ãéçºããããã€ãä¿å®ã容æãªè€éãªWebã¢ããªã±ãŒã·ã§ã³ã®æ§ç¯ã«åœ¹ç«ã¡ãŸãã