JavaScriptã¢ãžã¥ãŒã«ã®é å»¶èªã¿èŸŒã¿ãšé å»¶åæåã«é¢ããç·åã¬ã€ãããã¹ããã©ã¯ãã£ã¹ãããã©ãŒãã³ã¹æé©åãå¹ççãªWebã¢ããªæ§ç¯ã®ããã®é«åºŠãªãã¯ããã¯ãç¶²çŸ ã
JavaScript ã¢ãžã¥ãŒã«é å»¶èªã¿èŸŒã¿: é å»¶åæåã®ç¿åŸ
çµ¶ããé²åãããŠã§ãéçºã®ç¶æ³ã«ãããŠãããã©ãŒãã³ã¹ã¯æãéèŠã§ãããŠãŒã¶ãŒã¯é«éã§å¿çæ§ã®é«ããŠã§ãã¢ããªã±ãŒã·ã§ã³ãæåŸ ããŠãããJavaScriptã®èªã¿èŸŒã¿ãæé©åããããšã¯ãã®ç®æšãéæããããã®éèŠãªäžæ©ã§ãã匷åãªãã¯ããã¯ã®äžã€ãã¢ãžã¥ãŒã«ã®é å»¶èªã¿èŸŒã¿ãç¹ã«é å»¶åæåã®æ¡çšã§ãããã®ã¢ãããŒãã¯ãã¢ãžã¥ãŒã«ã³ãŒãã®å®è¡ãå®éã«å¿ èŠã«ãªããŸã§é ãããåæããŒãžèªã¿èŸŒã¿æéãççž®ããããåçåããããŠãŒã¶ãŒãšã¯ã¹ããªãšã³ã¹ãå®çŸããŸãã
ã¢ãžã¥ãŒã«ã®é å»¶èªã¿èŸŒã¿ãçè§£ãã
åŸæ¥ã®JavaScriptã¢ãžã¥ãŒã«ã®èªã¿èŸŒã¿ã¯ãéåžžãããã«å¿ èŠãã©ããã«é¢ãããããã¹ãŠã®ã¢ãžã¥ãŒã«ã³ãŒããæåã«ãã§ããããŠå®è¡ããŸããããã¯ã倿°ã®äŸåé¢ä¿ãæã€è€éãªã¢ããªã±ãŒã·ã§ã³ã§ã¯ãããªãã®é å»¶ãåŒãèµ·ããå¯èœæ§ããããŸããã¢ãžã¥ãŒã«ã®é å»¶èªã¿èŸŒã¿ã¯ãã¢ãžã¥ãŒã«ãå¿ èŠãªãšãã«ã®ã¿èªã¿èŸŒãããšã§ãã®åé¡ã«å¯ŸåŠããåæãã€ããŒããåæžããŠäœæããã©ãŒãã³ã¹ãåäžãããŸãã
ãã®ããã«èããŠã¿ãŠãã ãããå€§èŠæš¡ãªåœéããã«ãæ³åããŠãã ãããæåãããã¹ãŠã®éšå±ãšèšåããã«çšŒåã§æºåããã®ã§ã¯ãªããæåã®äºçŽã«åºã¥ããŠç¹å®ã®æ°ã®éšå±ãšãµãŒãã¹ã®ã¿ãæºåããŸããããå€ãã®ã²ã¹ããå°çããç¹å®ã®èšåïŒãžã ãã¹ããç¹å®ã®äŒè°å®€ãªã©ïŒãå¿ èŠãšãããšãã«ããããã®ã¢ãžã¥ãŒã«ãã¢ã¯ãã£ãåãŸãã¯ãèªã¿èŸŒãŸãããã®ã§ãããã®å¹ççãªãªãœãŒã¹ã®å²ãåœãŠã«ãããäžèŠãªãªãŒããŒããããªãã§ã¹ã ãŒãºãªéçšãä¿èšŒãããŸãã
é å»¶åæåïŒé å»¶èªã¿èŸŒã¿ãããã«äžæ©é²ãã
é å»¶åæåã¯ãã¢ãžã¥ãŒã«ã®èªã¿èŸŒã¿ãé ãããã ãã§ãªãããã®å®è¡ã絶察ã«å¿ èŠãªæãŸã§å»¶æããããšã§ãé å»¶èªã¿èŸŒã¿ã匷åããŸããããã¯ãããŒã¿ããŒã¹ãžã®æ¥ç¶ãã€ãã³ããªã¹ããŒã®èšå®ãè€éãªèšç®ã®å®è¡ãªã©ãåæåããžãã¯ãå«ãã¢ãžã¥ãŒã«ã«ãšã£ãŠç¹ã«æçã§ããåæåãé å»¶ãããããšã§ãåæã®ã¯ãŒã¯ããŒããããã«åæžããå¿çæ§ãåäžãããããšãã§ããŸãã
æ±åã¢ãžã¢ããšãŒããããã¢ã¡ãªã«å€§éžãªã©ã®å°åã§ã©ã€ãã·ã§ã¢ãµãŒãã¹ã«åºã䜿çšãããŠãããããªãããã³ã°ã¢ããªã±ãŒã·ã§ã³ãèããŠã¿ãŸããããã³ã¢ãšãªããããæ©èœã¯è¿ éã«èªã¿èŸŒãå¿ èŠããããŸããããããéèŠãé«ããšãªã¢ã瀺ãããŒããããããªã¢ã«ã¿ã€ã 亀éåæãªã©ã®é«åºŠãªæ©èœã®ããã®ã¢ãžã¥ãŒã«ã¯ãé å»¶ãããããšãã§ããŸãããããã¯ãŠãŒã¶ãŒãæç€ºçã«èŠæ±ãããšãã«ã®ã¿åæåãããå¿ èŠããããåæã®èªã¿èŸŒã¿æéãç¶æããã¢ããªã±ãŒã·ã§ã³ã®å¿çæ§ãåäžãããŸãã
é å»¶åæåã«ããã¢ãžã¥ãŒã«é å»¶èªã¿èŸŒã¿ã®å©ç¹
- åæããŒãžèªã¿èŸŒã¿æéã®æ¹å: å¿ èŠãªã¢ãžã¥ãŒã«ã®ã¿ãæåã«èªã¿èŸŒã¿ãåæåããããšã§ãåæããŒãžèªã¿èŸŒã¿æéãå€§å¹ ã«ççž®ãããããé«éã§å¿çæ§ã®é«ããŠãŒã¶ãŒãšã¯ã¹ããªãšã³ã¹ã«ã€ãªãããŸãã
- ãããã¯ãŒã¯åž¯åå¹ æ¶è²»ã®åæž: æåã«èªã¿èŸŒãŸããã¢ãžã¥ãŒã«ãå°ãªããªãããããããã¯ãŒã¯åž¯åå¹ ã®æ¶è²»ãæããããç¹ã«äœéãŸãã¯å¶éãããã€ã³ã¿ãŒãããæ¥ç¶ã®ãŠãŒã¶ãŒã«ãšã£ãŠæçã§ãã
- ãŠãŒã¶ãŒãšã¯ã¹ããªãšã³ã¹ã®åäž: èªã¿èŸŒã¿æéã®ççž®ãšå¿çæ§ã®åäžã¯ãããæ¥œããé åçãªãŠãŒã¶ãŒãšã¯ã¹ããªãšã³ã¹ã«ã€ãªãããŸãã
- ãªãœãŒã¹å©çšã®æé©å: ã¢ãžã¥ãŒã«ã®åæåãé ãããããšã§ããªãœãŒã¹å©çšãæé©åããäžèŠãªãªãŒããŒããããåé¿ã§ããŸãã
- ã³ãŒã管çã®ç°¡çŽ å: ã¢ãžã¥ãŒã«é å»¶èªã¿èŸŒã¿ã¯ã¢ãžã¥ãŒã«æ§ãšã³ãŒãæŽçãä¿é²ããè€éãªã¢ããªã±ãŒã·ã§ã³ã®ç®¡çãšä¿å®ã容æã«ããŸãã
é å»¶åæåã«ããã¢ãžã¥ãŒã«é å»¶èªã¿èŸŒã¿ãå®è£ ããããã®ãã¯ããã¯
JavaScriptã§é å»¶åæåã䌎ãã¢ãžã¥ãŒã«é å»¶èªã¿èŸŒã¿ãå®è£ ããã«ã¯ãããã€ãã®ãã¯ããã¯ã䜿çšã§ããŸãã
1. ãã€ãããã¯ã€ã³ããŒã
ECMAScript 2020ã§å°å ¥ããããã€ãããã¯ã€ã³ããŒãã¯ãã¢ãžã¥ãŒã«ãéåæã§èªã¿èŸŒããã€ãã£ããªæ¹æ³ãæäŸããŸãããã®ã¢ãããŒãã«ãããã¢ãžã¥ãŒã«ãäºåã«ã§ã¯ãªãããªã³ããã³ãã§èªã¿èŸŒãããšãã§ããŸãã
äŸ:
async function loadAnalytics() {
const analyticsModule = await import('./analytics.js');
analyticsModule.initialize();
}
// Call loadAnalytics() when the user interacts with a specific feature
document.getElementById('myButton').addEventListener('click', loadAnalytics);
ãã®äŸã§ã¯ã`analytics.js`ã¢ãžã¥ãŒã«ã¯ããŠãŒã¶ãŒãIDã`myButton`ã®ãã¿ã³ãã¯ãªãã¯ãããšãã«ã®ã¿èªã¿èŸŒãŸããŸããã¢ãžã¥ãŒã«å ã®`initialize()`颿°ã¯ãå¿ èŠãªã»ããã¢ãããå®è¡ããããã«åŒã³åºãããŸãã
2. Intersection Observer API
Intersection Observer APIã䜿çšãããšãèŠçŽ ããã¥ãŒããŒãã«å ¥ã£ãããšãæ€åºã§ããŸããããã¯ãã¢ãžã¥ãŒã«ããŠãŒã¶ãŒã«è¡šç€ºããããšãã«ããã®èªã¿èŸŒã¿ãšåæåãããªã¬ãŒããããã«äœ¿çšã§ããŸãã
äŸ:
const observer = new IntersectionObserver(entries => {
entries.forEach(entry => {
if (entry.isIntersecting) {
import('./lazy-module.js').then(module => {
module.initialize();
});
observer.unobserve(entry.target);
}
});
});
const lazyElement = document.getElementById('lazy-module');
observer.observe(lazyElement);
ãã®ã³ãŒãã¯ãIDã`lazy-module`ã®èŠçŽ ãç£èŠããŸããèŠçŽ ããã¥ãŒããŒãã«å ¥ããšã`lazy-module.js`ã¢ãžã¥ãŒã«ãèªã¿èŸŒãŸããåæåãããŸãããã®åŸããªãã¶ãŒããŒã¯ãã以äžã®èªã¿èŸŒã¿ãé²ãããã«åæãããŸãã
3. æ¡ä»¶ä»ãã¢ãžã¥ãŒã«èªã¿èŸŒã¿
ãŠãŒã¶ãŒããŒã«ãããã€ã¹ã¿ã€ããæ©èœãã©ã°ãªã©ã®ç¹å®ã®æ¡ä»¶ã«åºã¥ããŠãã¢ãžã¥ãŒã«ãèªã¿èŸŒã¿ããã³åæåãããã©ãããæ±ºå®ããããã«ãæ¡ä»¶ä»ãããžãã¯ã䜿çšããããšãã§ããŸãã
äŸ:
if (userRole === 'admin') {
import('./admin-module.js').then(module => {
module.initialize();
});
}
ãã®äŸã§ã¯ã`admin-module.js`ã¢ãžã¥ãŒã«ã¯ããŠãŒã¶ãŒã®åœ¹å²ã'admin'ã®å Žåã«ã®ã¿èªã¿èŸŒãŸããåæåãããŸãã
é«åºŠãªãã¯ããã¯ãšèæ ®äºé
ã³ãŒãåå²
ã³ãŒãåå²ã¯ãã¢ããªã±ãŒã·ã§ã³ã³ãŒããç¬ç«ããŠèªã¿èŸŒããå°ããªãã³ãã«ã«åå²ãããã¯ããã¯ã§ããããã¯ã¢ãžã¥ãŒã«ã®é å»¶èªã¿èŸŒã¿ãšçµã¿åãããŠãããã©ãŒãã³ã¹ãããã«æé©åã§ããŸããWebpackãParcelãããã³ãã®ä»ã®ãã³ãã©ãŒã¯ãã³ãŒãåå²ãæšæºã§ãµããŒãããŠããŸãã
ããªãã§ãããšããªããŒã
ããªãã§ãããšããªããŒãã¯ãå°æ¥å¿ èŠã«ãªãå¯èœæ§ã®ãããªãœãŒã¹ããã©ãŠã¶ã«ãã³ããšããŠäŒãããã¯ããã¯ã§ããããã«ããããªãœãŒã¹ãå®éã«èŠæ±ãããåã«èªã¿èŸŒãããšã§ãã¢ããªã±ãŒã·ã§ã³ã®äœæããã©ãŒãã³ã¹ãåäžãããããšãã§ããŸããç©æ¥µçãªããªãã§ããã¯ãäœåž¯åå¹ æ¥ç¶ã§ã®ããã©ãŒãã³ã¹ã«æªåœ±é¿ãäžããå¯èœæ§ããããããæ³šæãå¿ èŠã§ãã
ããªãŒã·ã§ã€ãã³ã°
ããªãŒã·ã§ã€ãã³ã°ã¯ããã³ãã«ããæªäœ¿çšã®ã³ãŒããåé€ãããã¯ããã¯ã§ããããã«ããããã³ãã«ã®ãµã€ãºãçž®å°ããããã©ãŒãã³ã¹ãåäžãããããšãã§ããŸããã»ãšãã©ã®ææ°ã®ãã³ãã©ãŒã¯ããªãŒã·ã§ã€ãã³ã°ããµããŒãããŠããŸãã
äŸåæ§æ³šå ¥
äŸåæ§æ³šå ¥ã¯ãã¢ãžã¥ãŒã«ãççµåã«ãããã¹ãã容æã«ããããã«äœ¿çšã§ããŸãããŸããã¢ãžã¥ãŒã«ããã€åæåãããããå¶åŸ¡ããããã«ã䜿çšã§ããŸããAngularãNestJSãããã³åæ§ã®ããã¯ãšã³ããã¬ãŒã ã¯ãŒã¯ãªã©ã®ãµãŒãã¹ã¯ãäŸåæ§æ³šå ¥ç®¡çã®ããã®æŽç·Žãããã¡ã«ããºã ãæäŸããŸããJavaScriptã«ã¯ãã€ãã£ãã®DIã³ã³ããã¯ãããŸããããã©ã€ãã©ãªã䜿çšããŠãã®ãã¿ãŒã³ãå®è£ ã§ããŸãã
ãšã©ãŒåŠç
ã¢ãžã¥ãŒã«ã®é å»¶èªã¿èŸŒã¿ã䜿çšããå Žåããšã©ãŒãé©åã«åŠçããããšãéèŠã§ããããã«ã¯ãã¢ãžã¥ãŒã«ã®èªã¿èŸŒã¿ãŸãã¯åæåã倱æããå Žåã®åŠçãå«ãŸããŸããåçã€ã³ããŒãã®åšãã«`try...catch`ãããã¯ã䜿çšããŠããšã©ãŒããã£ãããããŠãŒã¶ãŒã«æçãªãã£ãŒãããã¯ãæäŸããŠãã ããã
ãµãŒããŒãµã€ãã¬ã³ããªã³ã° (SSR)
ãµãŒããŒãµã€ãã¬ã³ããªã³ã°ã䜿çšããå Žåãã¢ãžã¥ãŒã«ããµãŒããŒäžã§æ£ããèªã¿èŸŒãŸããåæåãããããšã確èªããå¿ èŠããããŸããããã«ã¯ããµãŒããŒãµã€ãç°å¢ãèæ ®ããŠé å»¶èªã¿èŸŒã¿æŠç¥ã調æŽããå¿ èŠããããããããŸãããNext.jsãNuxt.jsã®ãããªãã¬ãŒã ã¯ãŒã¯ã¯ããµãŒããŒãµã€ãã¬ã³ããªã³ã°ãšã¢ãžã¥ãŒã«ã®é å»¶èªã¿èŸŒã¿ãçµã¿èŸŒã¿ã§ãµããŒãããŠããŸãã
å®äžçã§ã®äŸ
å€ãã®äººæ°ãŠã§ããµã€ããã¢ããªã±ãŒã·ã§ã³ã¯ãããã©ãŒãã³ã¹åäžã®ããã«é å»¶åæåã䌎ãã¢ãžã¥ãŒã«é å»¶èªã¿èŸŒã¿ã䜿çšããŠããŸããããã€ãäŸãæããŸãã
- Eã³ããŒã¹ãŠã§ããµã€ã: ãŠãŒã¶ãŒãããã€ãã®ååãé²èЧãããŸã§ãååã¬ã³ã¡ã³ããŒã·ã§ã³ã¢ãžã¥ãŒã«ã®èªã¿èŸŒã¿ãé å»¶ãããŸãã
- ãœãŒã·ã£ã«ã¡ãã£ã¢ãã©ãããã©ãŒã : ãããªç·šéãã©ã€ãã¹ããªãŒãã³ã°ãªã©ã®é«åºŠãªæ©èœçšã®ã¢ãžã¥ãŒã«ã¯ããŠãŒã¶ãŒãæç€ºçã«èŠæ±ãããŸã§é å»¶èªã¿èŸŒã¿ããŸãã
- ãªã³ã©ã€ã³åŠç¿ãã©ãããã©ãŒã : ã€ã³ã¿ã©ã¯ãã£ããªæŒç¿ãã¯ã€ãºçšã®ã¢ãžã¥ãŒã«ã¯ããŠãŒã¶ãŒããããã«åãçµãæºåãã§ãããŸã§é å»¶èªã¿èŸŒã¿ããŸãã
- ãããã³ã°ã¢ããªã±ãŒã·ã§ã³: 亀éåæãçµè·¯æé©åãªã©ã®é«åºŠãªæ©èœçšã®ã¢ãžã¥ãŒã«ã¯ããŠãŒã¶ãŒãå¿ èŠãšãããŸã§é å»¶èªã¿èŸŒã¿ããŸãã
ã€ã³ã¿ãŒãããã€ã³ãã©ã倿§ãªå°åã§éå¶ãããŠããã°ããŒãã«ãªEã³ããŒã¹ãã©ãããã©ãŒã ãèããŠã¿ãŸããããé å»¶èªã¿èŸŒã¿ãå®è£ ããããšã§ãã¢ããªã«ã®äžéšãã¢ãžã¢ã®èŸ²æéšã®ãããªæ¥ç¶é床ãé ãå°åã®ãŠãŒã¶ãŒã§ãããµã€ãã®ã³ã¢æ©èœã«çŽ æ©ãã¢ã¯ã»ã¹ã§ããæ¥ç¶é床ãéããŠãŒã¶ãŒã¯åæèªã¿èŸŒã¿æã®é å»¶ãªãã«é«åºŠãªæ©èœã®æ©æµãåããããšãã§ããŸãã
ãã¹ããã©ã¯ãã£ã¹
- åæããŒãžèªã¿èŸŒã¿ã«äžå¯æ¬ ã§ã¯ãªãã¢ãžã¥ãŒã«ãç¹å®ããããããã¯é å»¶èªã¿èŸŒã¿ã«é©ããŠããŸãã
- ãã€ãããã¯ã€ã³ããŒãã䜿çšããŠã¢ãžã¥ãŒã«ãéåæã§èªã¿èŸŒãã
- Intersection Observer APIã䜿çšããŠãã¢ãžã¥ãŒã«ããŠãŒã¶ãŒã«è¡šç€ºããããšãã«èªã¿èŸŒãã
- ç¹å®ã®æ¡ä»¶ã«åºã¥ããŠã¢ãžã¥ãŒã«ãèªã¿èŸŒãããã«ãæ¡ä»¶ä»ãã¢ãžã¥ãŒã«èªã¿èŸŒã¿ã䜿çšããã
- ã¢ãžã¥ãŒã«ã®é å»¶èªã¿èŸŒã¿ãã³ãŒãåå²ãããªãã§ãããããªãŒã·ã§ã€ãã³ã°ãšçµã¿åãããŠãããã©ãŒãã³ã¹ãããã«æé©åããã
- ãšã©ãŒãé©åã«åŠçããã
- é å»¶èªã¿èŸŒã¿ã®å®è£ ã培åºçã«ãã¹ãããã
- ã¢ããªã±ãŒã·ã§ã³ã®ããã©ãŒãã³ã¹ãç£èŠããå¿ èŠã«å¿ããŠé å»¶èªã¿èŸŒã¿æŠç¥ã調æŽããã
ããŒã«ãšãªãœãŒã¹
- Webpack: ã³ãŒãåå²ãšé å»¶èªã¿èŸŒã¿ããµããŒããã人æ°ã®ã¢ãžã¥ãŒã«ãã³ãã©ãŒã
- Parcel: ã³ãŒãåå²ãšé å»¶èªã¿èŸŒã¿ããµããŒããããŒãã³ã³ãã£ã®ã¥ã¬ãŒã·ã§ã³ãã³ãã©ãŒã
- Google Lighthouse: ãŠã§ãã¢ããªã±ãŒã·ã§ã³ã®ããã©ãŒãã³ã¹ãç£æ»ããããã®ããŒã«ã
- WebPageTest: ãŠã§ãã¢ããªã±ãŒã·ã§ã³ã®ããã©ãŒãã³ã¹ããã¹ãããããã®ããäžã€ã®ããŒã«ã
- MDN Web Docs: ãŠã§ãéçºããã¥ã¡ã³ãã®å æ¬çãªãªãœãŒã¹ã
çµè«
é å»¶åæåã䌎ãã¢ãžã¥ãŒã«ã®é å»¶èªã¿èŸŒã¿ã¯ãJavaScriptãŠã§ãã¢ããªã±ãŒã·ã§ã³ã®ããã©ãŒãã³ã¹ãæé©åããããã®åŒ·åãªãã¯ããã¯ã§ããã¢ãžã¥ãŒã«ãå¿ èŠãªãšãã«ã®ã¿èªã¿èŸŒã¿ãåæåããããšã§ãåæããŒãžèªã¿èŸŒã¿æéãå€§å¹ ã«æ¹åãããããã¯ãŒã¯åž¯åå¹ ã®æ¶è²»ãåæžãããŠãŒã¶ãŒãšã¯ã¹ããªãšã³ã¹ãåäžãããããšãã§ããŸãããã®ã¬ã€ãã§æŠèª¬ãããŠããããŸããŸãªãã¯ããã¯ãšãã¹ããã©ã¯ãã£ã¹ãçè§£ããããšã§ããããžã§ã¯ãã«ã¢ãžã¥ãŒã«é å»¶èªã¿èŸŒã¿ã广çã«å®è£ ãã倿§ãªã€ã³ã¿ãŒãããã¢ã¯ã»ã¹é床ãšããŒããŠã§ã¢èœåãæã€ã°ããŒãã«ãªãªãŒãã£ãšã³ã¹ã«å¯Ÿå¿ãããããé«éã§å¿çæ§ã®é«ããŠã§ãã¢ããªã±ãŒã·ã§ã³ãæ§ç¯ã§ããŸãããããã®æŠç¥ãæ¡çšããŠãäžçäžã®ãŠãŒã¶ãŒã«ã·ãŒã ã¬ã¹ã§æ¥œããäœéšãæäŸããŸãããã