äžäŒ.com ã¬ã¹ãã©ã³ã¯ä»å¹Žã® 7 æ 18 æ¥ãã¹ããŒããã©ã³åãæ€çŽ¢ããŒãžã®ãªãã¥ãŒã¢ã«ãè¡ããŸããããã®ãšã³ããªãŒã§ã¯ããã®äžèº«ã«ã€ããŠå°ã玹ä»ãããŠããã ããŸãã æ€çŽ¢ããŒãžã®èª²é¡ äžäŒ.com ã¬ã¹ãã©ã³ã§ã¯ã¹ããŒããã©ã³åãæ€çŽ¢ããŒãžã«å¯ŸããŠãé
ãããšããèª²é¡æèããããŸãããããã¯æè¡é¢ã§å°ããã¬ã€ã¯ããŠã³ãããš; ããŒãœãã©ã€ãºããå«ãè€éãªåŠçãè¡ã£ãŠããããããµãŒããŒãµã€ãåŠçãéãã UI äžç¡é§ãªé
å»¶åŠçãè¡ã£ãŠãããããã¯ã©ã€ã¢ã³ããµã€ãã®æç»ãé
ãã ãšãããµãŒããŒåŽãšã¯ã©ã€ã¢ã³ãåŽäž¡æ¹ã®èª²é¡ããããŸãããã¯ã©ã€ã¢ã³ããµã€ãã®ãç¡é§ãªé
å»¶åŠçããšããã®ã¯; æ€çŽ¢çµæååŸã REST API åãããŠããã«ãé¢ãããåæ€çŽ¢ã®åºŠã«ããŒãžãªããŒããè¡ãããµãŒããŒãµã€ãã®æç»ããããçŽããŠããã ãšããå®è£
ã«åé¡ããããŸãããäžå³ããªãã¥ãŒã¢ã«åã®ããŒãžæç»ã®æ§åã§ã: ç»é¢æç»åŸã«åçãªæ€çŽ¢çµæãé
å»¶æç»ãããŠããå³ ç€Ÿå
ã§ã¯ UI äžã®ãã®åé¡ç¹ã«å¯ŸããŠèª²é¡æèã倧ãã; ãæ€çŽ¢ãšåæ€çŽ¢ã®åéæ§ãæ¹åãããã ãšããèŠæ±ã匷ããªã£ãŠããŸããã Web ããã³ããšã³ãã®ã³ã³ããŒãã³ãå 話ã¯å€ãããäžäŒ.com ã¬ã¹ãã©ã³ã¯å€ãæè¡ã»ããã®äžã«æ§ç¯ãããŠããŸããMicrosoft ã® Classic ASP ãš VBScript ãäž»äœãšããã¢ããªã±ãŒã·ã§ã³ã§æ°žããéå¶ãããŠããŸããããã®äžæ¹ã§ãŠãŒã¶ãŒåã web ããŒãžã®è¡šçŸåãåäžãããŠè¡ããããšããèŠæ±ãããVue.js ã«ããããã³ããšã³ãå®è£
ãåŸã
ã«å§ãŸã£ãŠããŸããã Vue.js 㯠SPA ã®ãããªé«ã衚çŸåãç°¡åãªèšè¿°ã§å®çŸã§ããã®ãé
åã§ããåŸæ¥ã® web éçºã§ã¯; HTML CSS JavaScript ãšãã ãã¡ã€ã«ã¿ã€ãã«ãã瞊å²ãéçº ãäž»æµã§ãããããã; BEM ã ECSS ã®ãããªCSS ãã¬ãŒã ã¯ãŒã¯ã®æå±ããææ³ã Vue.js ã®ãã㪠JavaScript ãã¬ãŒã ã¯ãŒã¯ã®ã¡ã«ããºã ã Web Components ã«ããæšæºåã®æµã ããæãããªããã«ãUI æ¹åã«ãã㊠ã³ã³ããŒãã³ããäžå¿ã«äž²åºãèšèšããäºã®éèŠæ§ ãèªç¥ãããŠããŠããŸãã äžäŒ.com ã¬ã¹ãã©ã³ã§ã¯ãããããããã³ããšã³ãå®è£
ã Vue.js ã«ç§»è¡ããäºã§ Smart UI ãã¿ãŒã³ã®ãããªéçºåœ¢æ
ãããã³ã³ããŒãã³ãåããã web ã¢ããªã±ãŒã·ã§ã³ãžç§»è¡ããäºãæè¡çãªç®æšãšããŠããŸãã å®çŸããã°ã³ã³ããŒãã³ãæåã®æã€ãŠãŒã¶ãŒã¡ãªããã享åã§ããããã«ãªããäžäŒã®æ²ããããŠãŒã¶ãŒãã¡ãŒã¹ãããåŸæŒãããéçºäœå¶ãå®çŸã§ãããšèããŠããŸãã SEO ãšãµãŒããŒãµã€ãã¬ã³ããªã³ã° ãããããã§åé¡ããããŸãããSEO ã®èæ
®ã§ããäžäŒ.com ã¬ã¹ãã©ã³ã®é«ãé客å㯠SEO ã«çæ¯ã«åãçµãã§ããçµæã§ããããŸãã ãã® SEO ã®èгç¹ãã; ããŒãžäžã®ããããéèŠãªã³ã³ãã³ãã¯ããµãŒããŒãµã€ãã¬ã³ããªã³ã°ãããŠããªããã°ãªããªãã ãšããèŠæ±ããããŸãããããã¯ãã¯ã©ã€ã¢ã³ããµã€ãã¬ã³ããªã³ã°ãåºæ¬ãšãã Vue.js ã§ã³ã³ããŒãã³ãåããã web ã¢ããªã±ãŒã·ã§ã³ãžç§»è¡ããç®è«èŠãšè¡çªããŸããã ã³ã³ããŒãã³ãæåéçºãå®çŸããäºã éèŠãªã³ã³ãã³ãã¯ãµãŒããŒãµã€ãã¬ã³ããªã³ã°ãããäºã ãã® 2 ã€ãããŠãŒã¶ãŒãã¡ãŒã¹ãããç®æãäžã§å¿
èŠãªæè¡èŠä»¶ã§ããã å°ãä»å¹Žã® Google I/O 2018 ã® Google Webmasters ããã®ã¢ããŠã³ã¹ã§ç¶æ³ã¯å€ããã€ã€ãããŸããããªãã¥ãŒã¢ã«ã®æææ±ºå®ããéçºã®æ®µéã§ã¯ãã¯ã©ã€ã¢ã³ããµã€ãã¬ã³ããªã³ã°ã§è¯ããšèšããç¶æ³ã§ã¯ãããŸããã§ããã æ¥å課é¡ãšæè¡èª²é¡ã®åèŽ ãã®ãããªèæ¯ãããã³ã³ããŒãã³ãæåãšãµãŒããŒãµã€ãã¬ã³ããªã³ã°ãšãã 2 ã€ ã®æè¡èª²é¡ã®è§£æ±ºææ®µãšããŠããµãŒããŒãµã€ã JavaScript ã®å°å
¥ãçŸå®å³ã垯ã³ãŠããŸãããVue.js ã«ãããŠã¯ãŠãããŒãµã« JavaScript ãå®çŸãããã¬ãŒã ã¯ãŒã¯ Nuxt.js ãååšããŠãããããã«ãããããã¿ã€ãã瀟å
ã§é²ããããã«ãªããŸãã çµæãšããŠãäžäŒ.com ã¬ã¹ãã©ã³ã®æè¡ã¹ã¿ãã¯ã®çæ³åã¯äžå³ã®ããã«ãªã£ãŠè¡ããŸãã: ããã³ããšã³ãæ§æã®ãŽã£ãžã§ã³ ãããªãæ¥å課é¡ã§ããæ€çŽ¢ããŒãžã® UI æ¹åãšãæè¡èª²é¡ã解決ã§ããŸããæçµçã«ãäžäŒ.com ã¬ã¹ãã©ã³ã®æ€çŽ¢ããŒãžãªãã¥ãŒã¢ã«ã§ãNuxt.js ã®å°å
¥ã決æããŸããã æ¬¡ã®é
ã§ã¯ Nuxt.js ã§å®è£
ãéå§ãããæ€çŽ¢ããŒãžã®èšèšã玹ä»ããŸãã ã³ã³ããŒãã³ãæåèšèš æ€çŽ¢ããŒãžãªãã¥ãŒã¢ã«ã§ã¯ãå
šé¢çã«ã³ã³ããŒãã³ãæåèšèšãå°å
¥ããŸããã ã³ã³ããŒãã³ãã®å®çŸ© äžäŒ.com ã¬ã¹ãã©ã³ã® web ããã³ããšã³ãã§ã¯ãã³ã³ããŒãã³ããäžå³ã®ããã«æãå®çŸ©ããŸãã: ã³ã³ããŒãã³ãã®å®çŸ© ããŒã¿ããã³ãã¬ãŒããããžãã¯ãã¹ã¿ã€ã«ãããããé¢é£æ§ãæ·±ããã®å士ãã¢ãžã¥ãŒã«å ãã¡ã€ã«ã¿ã€ãã«ãã瞊å²ãã§ã¯ãªããé¢é£æ§ã«ãããã¡ã€ã«ã¿ã€ã暪æã®äž²åºãã§ã°ã«ãŒãå ããã³ããšã³ãå®è£
ã®ããããã¢ã»ãããã³ã³ããŒãã³ããšæããŠç®¡ç äžèšãåºæ¬ãšããCSSãJavaScriptãç»åãVue åäžãã¡ã€ã«ã³ã³ããŒãã³ããªã©å
šãŠã®åå²ç²åºŠãšããŠãå
±éã®ã³ã³ããŒãã³ããšããæŠå¿µãåæãšããŸããã ITCSS ã«ããã¬ã€ã€ãŒãã¢ãŒããã¯ã㣠ãããã³ã³ããŒãã³ããå
±éã®ã¬ã€ã€ãŒãã¢ãŒããã¯ãã£ã§ç®¡çãããããäžäŒ.com ã¬ã¹ãã©ã³ã§ã¯ CSS ã¢ãŒããã¯ãã£ã® 1 ã€ã§ãã ITCSS ãæ¡çšããŸããã ITCSS ã¬ã€ã€ãŒãã¢ãŒããã¯ã㣠ITCSS èªäœã¯ CSS ãšã³ãžãã¢ã§ãã Harry Roberts æ° ãæå±ãã CSS ã®è©³çŽ°åºŠã管çããããã®ã¬ã€ã€ãŒãã¢ãŒããã¯ãã£ã§ãã CSS ã§ã³ã³ããŒãã³ãæåèšèšãå®è·µããäºãåæã«ããã¢ãŒããã¯ãã£ã§ããç¹ã æœè±¡åºŠã管çããã¬ã€ã€ãŒãã¢ãŒããã¯ãã£ãšããŠæè»ã§ããç¹ã ãããã®ç¹ãã web ããã³ããšã³ãã®ã³ã³ããŒãã³ãæœè±¡åºŠåã¬ã€ã€ãŒãšããŠèªç¶ã«æãçŽãäºãã§ããŸãããã®ã¢ãŒããã¯ãã£ãå©çšãã以äžã®ããã«ã¬ã€ã€ãŒããšã®è²¬åãå®çŸ©ããŸãã: ã¬ã€ã€ãŒ å®çŸ© Settings CSS 倿°ãã宿°ãªã©ã®ããŒã¿ãæ±ãã Tools CSS ããã¯ã¹ã€ã³ããã£ã«ã¿ãŒããŸãã¯ããªã¥ãŒãªããžã§ã¯ããDTO ã®ãããªã¢ããªã±ãŒã·ã§ã³äžã®åãšãªãå®çŸ©ãæ±ãã Generic CSS èŠçŽ åã»ã¬ã¯ã¿ãŒã«ããã°ããŒãã«ã¹ã¿ã€ã«å®çŸ©ãã¢ããªã±ãŒã·ã§ã³å
šäœã§å
±éåãããåŠçãã°ããŒãã«ãªå¯äœçšãæã€ããžãã¹ããžãã¯ãæ±ãã Elements Atoms ã®ãããªããªããã£ãŽãªã³ã³ããŒãã³ããæ±ãããã以äžã®ã¬ã€ã€ãŒã§ Vue.js SFC ãæ±ãã Objects Molecules ã®ãããªã¢ããªã±ãŒã·ã§ã³äžã®ã³ã³ããã¹ããå«ãã³ã³ããŒãã³ããæ±ãã Components Organisms ã®ãããªã¢ããªã±ãŒã·ã§ã³äžæå³ã®ããæ©èœåäœã®ã³ã³ããŒãã³ããæ±ãã äžå³ã®ããã« Elements ã¬ã€ã€ãŒãã Atomic Design ã®ã¬ã€ã€ãŒæŠå¿µãåãå
¥ããŠããŸãããããããšããŠãäžå³ã®ãã㪠Atomic Design ã«ããã¬ã€ã€ãŒãã¢ãŒããã¯ãã£ãæ€èšããŸããã Atomic Design ã¬ã€ã€ãŒãã¢ãŒããã¯ã㣠ããã; Atomic Design ã«ããã Atoms ã¬ã€ã€ãŒã¯ã°ããŒãã«ãªããŒã¿ãããžãã¹ããžãã¯ãªã©ã衚çŸããã¬ã€ã€ãŒãšããŠã¯ã¹ã³ãŒããåºããªãéããã äžæ¹ã§ãããã®è¡šçŸã«åããŠããããªã¯ãªãŒã³ã¢ãŒããã¯ãã£ã§ã¯ãUI ã³ã³ããŒãã³ãã®æœè±¡åã衚çŸããã«ã¯è¡šçŸåãäœãã ITCSS ã¯ãã®ç¹ã§ãã°ããŒãã«ãªããŒã¿ãããžãã¹ããžãã¯ã衚çŸããã¬ã€ã€ãŒãš UI ã³ã³ããŒãã³ãã衚çŸããã¬ã€ã€ãŒãæåããå®çŸ©ãããŠãããã©ã³ã¹ãè¯ãã ãšèã ITCSS ãæ¡çšããŸããã ããã©ãŒãã³ã¹ã®èŠ³ç¹ ITCSS 㯠CSS 詳现床ã管çããã¢ãŒããã¯ãã£ã§ãã CSS ã®ã¯ã©ã€ã¢ã³ãããã©ãŒãã³ã¹ãæå€§åããç®çããããŸãããŸã web ããã³ããšã³ãã¯ã³ã³ãã€ã©ããå®è£
è
ã«ããã©ãŒãã³ã¹æé©åã®è²¬åããããšèããŸãã ãã®èгç¹ãã Tools ãš Generic ã¬ã€ã€ãŒã§ããŒã¿å®çŸ©ãšããžãã¹ããžãã¯ãæ±ãã¬ã€ã€ãŒãåããäºãããªããžã§ã¯ãã«ã¡ãœãããçãããŠããžãã¹ããžãã¯ãå®è£
ããã®ãé¿ããäºã«ã€ãªãããwebpack ã® tree-shaking ã«ããæé©åã享åããããå®è£
ãå°åºããã¡ã«ããºã ã«ãªããšèããŠããŸãã ã³ã³ããŒãã³ãæåã®çœ®ãæãå¯èœãšããç¹æ§ããããã©ãŒãã³ã¹ã®èгç¹ãæã£ãã¬ã€ã€ãŒãã¢ãŒããã¯ãã£ã§ç®¡çããäºã§ DRY ãå®è·µãããããçµæãšããŠãã€ããã©ãŒãã³ã¹ãªããã³ããšã³ããå®çŸå¯èœãªã¡ã«ããºã ãšãªãäºãæåŸ
ããŠããŸãã ã€ã¥ã㊠Nuxt.js ã«ãã BFF å®è£
ãé²ããŠããäžã§é£ããã£ãç¹ãããã€ã玹ä»ããŸãã ãŠãããŒãµã« JavaScript ãŸã Nuxt.js ã®æå€§ã®ç¹åŸŽã¯ãVue.js ã«ããå®è£
ã§ããµãŒããŒãµã€ããã¯ã©ã€ã¢ã³ããµã€ããééçã«èšè¿°ã§ããäºã§ããããããã«ããã³ã³ããŒãã³ãæåèšèšã«ãããŠããµãŒããŒãšã¯ã©ã€ã¢ã³ããšããåäœç°å¢ã®éããããã¡ã€ã«ã·ã¹ãã ã®éãåæ§ãäž²åºãã«ã³ã³ããŒãã³ããšããŠã«ãã»ã«åã§ããããã«ãªããŸããããã Nuxt.js ã®å€§ããªã¡ãªããã§ãã ãµãŒããŒãµã€ããšã¯ã©ã€ã¢ã³ããµã€ã API ã®éã ãããåã JavaScript ãšã¯èšããNode.js ãš web ãã©ãŠã¶ã® API ã«ã¯éãããããŸããNuxt.js ãçšæããŠããªãã€ã³ã¿ãŒãã§ãŒã¹ã§ããµãŒããŒ/ã¯ã©ã€ã¢ã³ããééçã«æ±ãããã£ãã®ã次㮠2 ã€ã§ã: ãµãŒããŒ/ã¯ã©ã€ã¢ã³ãã§ã® Cookie ã€ã³ã¿ãŒãã§ãŒã¹ã®éããåžåãã ãã°ã¬ããŒã Bugsnag ã®ãµãŒããŒ/ã¯ã©ã€ã¢ã³ããµã€ãã®ã¯ã©ã€ã¢ã³ããééçã«æ±ã ãããã®å®çŸã«ãNuxt.js ã® modules ãš plugins æ©èœãçšããŸããã ãŠãããŒãµã« Cookie Nuxt.js ã§ Cookie ãééçã«æ±ãã«ããã£ãŠ UniversalCookie ã³ã³ããŒãã³ããäœæãããµãŒããŒ/ã¯ã©ã€ã¢ã³ããµã€ãã§ã® CRUD åŠçãééçã«èšè¿°ã§ããã€ã³ã¿ãŒãã§ãŒã¹ãçšæããŸããããããŠããã Nuxt.js ã® plugins ãšããŠç»é²ããŸããã plugins/cookie.ts : import * as http from 'http' ; import { createUniversalCookie } from '@/components/generic/UniversalCookie' ; export default function ( { req , res } : { req: http.IncomingMessage , res: http.ServerResponse } , inject ) : void { const cookie = createUniversalCookie ( req , res ); inject ( 'cookie' , cookie ); } äžèšã®ãã㪠plugin ãç»é²ããäºã§ãNuxt.js ã®ã³ã³ããã¹ãäžã§ã¯ app.$cookie.set(key, value) ã this.$cookie.get(key) ãšèšã£ãèšè¿°ã§ããµãŒããŒ/ã¯ã©ã€ã³ãé¢ä¿ãªã cookie ã®èªã¿æžããã§ããããã«ãªããŸããã ãŠãããŒãµã« Bugsnag äžäŒ.com ã¬ã¹ãã©ã³ã§ã¯ã¯ã©ã€ã¢ã³ããµã€ãã®ãã°æ€ç¥ã« Bugsnag ãå©çšããŠããããŠãããŒãµã« JavaScript åã«åœãã£ãŠããµãŒããŒãµã€ãã® JavaScript åŠçãšã©ãŒã Bugsnag ãžã¬ããŒãããã€ã³ã¿ãŒãã§ãŒã¹ãçšæããŸããã modules/bugsnag/index.js : const path = require( 'path' ); const bugsnag = require( 'bugsnag' ); module.exports = function BugsnagModule(moduleOptions) { bugsnag.register(moduleOptions.SERVER_API_KEY, { appVersion: (process.env.VERSION_SHA1).slice(0, 7), autoCaptureSessions: false , autoNotify: process.env.NODE_ENV !== 'development' , releaseStage: process.env.NODE_ENV || 'development' , } ); this .nuxt.hook( 'render:setupMiddleware' , app => app.use(bugsnag.requestHandler)); this .nuxt.hook( 'render:errorMiddleware' , app => app.use(bugsnag.errorHandler)); this .addPlugin( { src: path.resolve(__dirname, 'plugin.js' ), options: moduleOptions, } ); } ; modules/bugsnag/plugin.js : import Vue from 'vue' ; export default function (context, inject) { const VERSION = (process.env.VERSION_SHA1).slice(0, 7); // ãµãŒããŒãµã€ã Bugsnag if (process.server) { const bugsnag = require( 'bugsnag' ); bugsnag.register( '<%= options.SERVER_API_KEY %>' , { appVersion: VERSION, autoCaptureSessions: false , autoNotify: process.env.NODE_ENV !== 'development' , releaseStage: process.env.NODE_ENV, } ); inject( 'bugsnag' , bugsnag); } // ã¯ã©ã€ã¢ã³ããµã€ã Bugsnag if (process.client) { const bugsnagJs = require( 'bugsnag-js' ); const bugsnagVue = require( 'bugsnag-vue' ); const client = bugsnagJs( { apiKey: '<%= options.CLIENT_API_KEY %>' , appVersion: VERSION, autoCaptureSessions: false , autoNotify: process.env.NODE_ENV !== 'development' , releaseStage: process.env.NODE_ENV, } ); client.use(bugsnagVue(Vue)); inject( 'bugsnag' , client); } } äžèšã®ãã㪠module ãç»é²ããäºã§ã app.$bugsnag.notify(new Error('...')) ãªãã this.$bugsnag.notify(new Error('...')) ã§ãã³ããªã³ã°ããããšã©ãŒåŠçã®ã¬ããŒããééçã«èšè¿°ã§ããããã«ãªããäŸå€ããµãŒããŒ/ã¯ã©ã€ã¢ã³ããµã€ãäž¡æ¹ãæ€ç¥ã§ããããã«ããŸããã ãã ãããã㯠Nuxt.js ã®ã³ã³ããã¹ããéããŠã€ã³ã¿ãŒãã§ãŒã¹ãåæåããå¿
èŠãããããã this.$cookie ã this.$bugsnag ãžã®åç
§ãæã€ã³ã³ããŒãã³ã㯠Nuxt.js å®è£
ã«å¯çµåãšãªããŸãããªã®ã§ããã plugins ãžã®ã¢ã¯ã»ã¹ã¯ layouts/pages ãéããŠã®ã¿è¡ãã«ãŒã«ãšããã³ã³ããŒãã³ãã®è²¬åãã³ã³ãããŒã«ããŠããŸãã å¯äœçšã®èæ
® ã¯ã©ã€ã¢ã³ã JavaScript ããŠãããŒãµã« JavaScript ã«å¯Ÿå¿ããéçšã«ã泚æããäºããããŸãããã°ããŒãã«ãªåæåŠçã«ããå¯äœçšã§ãã äŸãã°éœåºŠåç
§ã§ã¯ã³ã¹ãã倧ãã window.innerWidth ã®ãããªã°ããŒãã«ããããã£å€ããã£ãã·ã¥ããæ¬¡ã®ãããªã¢ãžã¥ãŒã«ããããŸãã windowsize.js : let windowWidth; let windowHeight; function resize() { windowWidth = window .innerWidth; windowHeight = window .innerHeight; } window .addEventListener( 'resize' , resize, false ); window .addEventListener( 'orientationchange' , resize, false ); resize(); export { windowWidth, windowHeight, } ; ãã®ãããªã¢ãžã¥ãŒã«ã Nuxt.js ã® pages ã³ã³ããŒãã³ãã§ import ããããšãµãŒããŒãšã©ãŒãšãªãããŠãŒã¶ãŒã«ã¯ 500 ãšã©ãŒãè¿ãäºã«ãªããŸãããããã¯ã©ã€ã¢ã³ããµã€ãã«éã£ã JavaScript å®è£
ã§ããã°ããããã¡ãªå®è£
ã§ãããã°ããŒãã«ãªå¯äœçšã屿åããææ®µãšããŠãåççã§ããããã window ãªããžã§ã¯ãã®ããã«ã¯ã©ã€ã¢ã³ã JavaScript ã«ããååšããªã API ã®æé»çãªåç
§ãçºçããäžèšã®ãããªã¢ãžã¥ãŒã«ããã£ãã Nuxt.js ã§ import ããã°ã¢ããªã±ãŒã·ã§ã³ãèµ·åããªããªããŸãããããã£ãç¹ã¯ãŠãããŒãµã« JavaScript ã«ãããŠç
©ããããæããç¹ã§ããããå¯äœçšã®åœ±é¿ãèããäžã§é¢çœãç¹ã§ããããšæããŸãã ããã解決ããæ¹æ³ãšããŠã¯ãããããã°ããŒãã«ãªåŠçã Nuxt.js (Vue.js) ã®ã©ã€ããµã€ã¯ã«ã«èŒãããšããæ¹æ³ãåããŸãããäžèšã® windowsize.js ã¯æ¬¡ã®ããã«å€æŽããŸããã windowsize.js : import Vue from 'vue' ; export const WindowSize = Vue.extend( { data() { return { height: undefined , width: undefined , } ; } , created() { if ( this .$isServer) { return ; } window .addEventListener( 'resize' , this .resize, false ); window .addEventListener( 'orientationchange' , this .resize, false ); this .resize(); } , beforeDestroy() { window .removeEventListener( 'resize' , this .resize); window .removeEventListener( 'orientationchange' , this .resize); } , methods: { resize(): void { this .height = window .innerHeight; this .width = window .innerWidth; } , } , } ); export const windowSize = new WindowSize(); ããããäºã§ã¯ã©ã€ã¢ã³ããµã€ãã® API ã«äŸåããã°ããŒãã«ãªåŠçãèšè¿°ãããã¢ãžã¥ãŒã«ã§ãééçã« import ã§ããããã«ãªããŸããã ã¯ã©ã€ã¢ã³ããµã€ãã®ã¿ãŸãã¯ãµãŒããŒãµã€ãã®ã¿ã®å®è£
ãšã¯éããããã€ãèæ
®ããã¹ãäºã¯ãããŸãããçµæçã«ããå
ç¢ãªå®è£
ãæ±ããããç¹ããŠãããŒãµã« JavaScript ã®é¢çœãã§ããããšæããŸãã ãªãã¥ãŒã¢ã«ã®ææ ãªãªãŒã¹ãããæ€çŽ¢ããŒãžã§ã¯äžå³ã®ããã«äžèŠãªãªããŒããå¿
èŠãšããªã SPA ã«ãªãã¥ãŒã¢ã«ãããŸãããããã«ãã£ãŠã¹ããŒããã©ã³ã§ã®åæ€çŽ¢ã®ã¹ãã¬ã¹ã軜æžããããšèããŠããŸãã SPA åã«ããäžèŠãªãªããŒãã®ç¡ããªã£ãæ€çŽ¢ããŒãž ãŸãã¯ã©ã€ã¢ã³ããµã€ãã®ããã©ãŒãã³ã¹ææšã§ãã Speed Index ã® RUM å€ãããªãªãŒã¹ãå¢ã«æ¹åããäºãã§ããŸããã RUM-SpeedIndex ãã©ããã³ã°å€ã®å€å ãã®ãªãã¥ãŒã¢ã«ã奿©ã« Classic ASP ã«ããå¯çµåãªã¢ããªã±ãŒã·ã§ã³å®è£
ãããPython ãããã¯ãšã³ããAPI ãšããBFF ãš Nuxt.js ãããã³ããšã³ããšããççµåãªéçºäœå¶ã確ç«ããŸãããä»åŸã¯ãã®éçºäœå¶ã®ã¡ãªãããæå€§åããŠãŒã¶ãŒäœéšã®åäžãžãšç¹ããŠããã®ããæ°ããã³ããšã³ãã®èª²é¡ã§ãã ã¢ãã³ã»ããã³ããšã³ãã§æäŸãã䟡å€ãšã¯ å€åã®æ¿ãã web ããã³ããšã³ãã§ãããæšå¹Žã¯ PWA ã®æšé²ã AMP ã®ç»å Žãããã©ãŒãã³ã¹ææšã®å®éåãªã©ãããŸãããã幎ã ã£ãããã«æããŸããäžäŒ.com ã¬ã¹ãã©ã³ã® web ãµã€ãã¯ããããæè¡ãæå€§é掻çšãããŠãŒã¶ãŒã«ãšã£ãŠããè¯ã web ãµãŒãã¹ãæäŸããŠãããããšèããŠããŸãã ä»åŸã® web ããã³ããšã³ãã®åãçµã¿ãšããŠã¯; ç¶ç¶çãªããã©ãŒãã³ã¹æ¹å PWA åã«ãã web äœéšã®ãšã³ãã³ã¹ã¡ã³ã ãŠãŒã¶ãŒäœéšã®åäžã«ã€ãªãããã©ã¹ãã£ãã¯ãª UI æ¹å ãªã©ãèããŠããŸãã ãããªããã§ äžäŒ.com ã¬ã¹ãã©ã³ã§ã¯ããŠãããŒãµã« JavaScript ãåŸæãªãã«ã¹ã¿ãã¯ãšã³ãžãã¢ãBFF èšèšã GraphQL ãåŸæãšããã Node.js ãšã³ãžãã¢ãã³ã³ããŒãã³ãæåãå®è·µã§ã Web Components ã®ãããªæšæºä»æ§ã«ãææãª web ããã³ããšã³ããšã³ãžãã¢ããã¶ã€ã³ã·ã¹ãã ã Brad Frost æ°ã®æå±ãã Atomic Design ãžé«ãé¢å¿ããæã¡ã®ãã¶ã€ããŒãªã©ããããã§ãã·ã§ããªãºã ã«ããµããã¡ã³ããŒãåéããŠããŸããã©ã°ãžã¥ã¢ãªãŒãªãµãŒãã¹ãæé«ã®ã¯ã©ãããã³ã·ããã§æ¯ããŠãããæ¹ããã®ãå¿åãåŸ
ã¡ããŠãããŸã! www.ikyu.co.jp www.wantedly.com 以äžãCTO 宀ã¬ã¹ãã©ã³æ
åœãšã³ãžãã¢ã®çš²å°Ÿ id:supercalifragilisticexpiali ããäŒãããŸããã