３大フレームワーク（Angular, React, Vue.js）比較によるエンタープライズ Web アプリケーション開発の最適化

現在の JavaScript フレームワークはコンポーネント指向と言われています。コンポーネント指向の起源である Web 標準の Web Components を知ることで、コンポーネントとは何かを理解し、理解した事項を念頭に３大フレームワーク（Angular, React, Vue.js） の比較を行います。具体的な事例として、コンポーネント化のメリットを活かし、更に TypeScript や Azure などを利用することで最適化されたイマドキのエンタープライズ Web アプリケーション開発の「現場」をご紹介します。

Transcript

1. ̏େϑϨʔϜϫʔΫʢAngular, React, Vue.jsʣൺֱʹΑΔ
 ΤϯλʔϓϥΠζ Web ΞϓϦέʔγϣϯ։ൃͷ࠷దԽ ࠤ઒ ෉ඒ༤ Ξγϥεגࣜձࣾ
 ୅දऔక໾ AD16
2. ࣗݾ঺հ ࠤ઒ɹ෉ඒ༤
   "TIJSBT
   JOD
   
   $IJFG
   &YFDVUJWF
   0⒏DFS
   
   8FC
   "QQMJDBUJPO
   &OHJOFFS
   .JDSPTPGU
   .PTU
   7BMVBCMF
   1SPGFTTJPOBM
   .71
   )5.-
   &YQFSUTKQ
 "OHVMBS
   +BQBO
   6TFS
   (SPVQ
   IUNMK !BMCBUSPTBSZ
3. ೥݄೔ʹઃཱͨ͠ਆށʹ͋Δ
   ϑϩϯτΤϯυઐ໳ͷձࣾ
4. ΞδΣϯμ Web Application
 A Comparison of JavaScript Framework
 Getting Started
 DevOps for Front-end
5. Web Application
6. Web αΠτͱҧ͏ʁ
7. Application Web Site
8. Web ΞϓϦέʔγϣϯͷ௒ʑجૅ
9. ࠷௿ݶඞཁͳ΋ͷ CSS PRESENTATION JS BEHAVIOR HTML STRUCTURE
10. ඞཁʁ
11. ҋ CSS
12. ޷͖ʁ
13. ϓϩάϥϜΛॻ͘ͱ͖ؾʹ͢Δ͜ͱ Մಡੑ ϦϑΝΫλϦϯά ࠶ར༻ੑ ςετ etc.
14. Piece
15. Component
16. Atomic Design
17. Atomic Design
18. σβΠφʔͷ࢓ࣄ
21. Web Components
22. Web Components Custom Elements
 HTML Templates
 HTML Imports
 Shadow DOM ϐʔεʹ໊લΛ෇͚Δ
 ϐʔεͷ໛༷
 ϐʔεΛύζϧʹ͸ΊΔ
 ϐʔεͰ͋Δ͜ͱΛओு
23. <x-foo> HTML Imports HTML Templates Custom Elements Shadow DOM
24. Custom Elements ৽͍͠ཁૉΛొ࿥͢Δ var XFoo = document.registerElement('x-component'); ΧελϜλάΛΠϯελϯεԽ <x-component></x-component>
25. HTML Templates <template> <div>Template used</div> <div>hoge</div> <style> div { font-size: 20px; } </style> <script> console.log('x-component.html'); </script> </template>
26. HTML Imports <link rel=“import" href=“components/x-component.html">
27. Shadow DOM <!-- ΞΫςΟϕʔτ --> <script> var imports = document.querySelector('link[rel="import"]').import; var templates = imports.querySelector('template'); var contents = templates.content; var xcomponents = document.querySelector('x-component'); xcomponents.createShadowRoot().appendChild( contents.cloneNode(true) ); </script>
29. OOCSS BEM
 SMACSS
30. OOCSS BEM
 SMACSS
31. Scoped CSS
32. JavaScript Framework
33. JavaScript Framework
34. Web Application Framework
35. A Comparison of JavaScript Framework
36. ͲͷϑϨʔϜϫʔΫΛ࢖͏͔ʁ ֶशίετ ཁһ֬อ ։ൃͷ༰қੑ ࣮ߦ଎౓ ӡ༻ίετ
37. ͲͷϑϨʔϜϫʔΫΛ࢖͏͔ʁ ֶशίετ ཁһ֬อ ։ൃͷ༰қੑ ࣮ߦ଎౓ ӡ༻ίετ
38. Getting Started
39. γϯϓϧʹ࢝ΊΔ - QuickStart
40. Angular $ npm install -g @angular/cli $ ng new hello-angular $ cd hello-angular $ ng serve
41. Angular $ npm install -g @angular/cli $ ng new hello-angular $ cd hello-angular $ ng serve
42. Angular
43. Vue.js $ npm install -g @vue/cli $ vue create hello-vue $ cd hello-vue $ yarn serve <script scoped> … <script>
44. Vue.js
45. React $ npm install -g create-react-app $ create-react-app hello-react $ cd hello-react $ yarn start $ yarn eject
46. config/webpack.config.dev.js loader: require.resolve('css-loader'), options: { importLoaders: 1, modules: true, localIdentName: ‘[name]__[local]___[hash:base64:5]’ },
47. config/webpack.config.prod.js loader: require.resolve('css-loader'), options: { importLoaders: 1, modules: true, minimize: true, sourceMap: true },
48. App.js // import ‘./App.css’; import styles from ‘./App.css’; class App extends Component { render() { return ( <div className={styles.App}> <img src={logo} className={styles.AppLogo}
49. App.css /* .App-logo { */ .AppLogo { animation: App-logo-spin infinite 20s linear; height: 80px; } /* .App-header { */ .AppHeader { ackground-color: #222; height: 150px;
50. App.js
51. Angular CLI add Add support for a library to your project. new Creates a new directory and a new Angular app. generate Generates and/or modifies files based on a schematic. update Updates your application and its dependencies. build Builds your app and places it into the output path (dist/ by default). serve Builds and serves your app, rebuilding on file changes. test Run unit tests in existing project. e2e Run e2e tests in existing project. lint Lints code in existing project. xi18n Extracts i18n messages from source code. run Runs Architect targets. eject Temporarily disabled. Ejects your app and output the proper webpack configuration and scripts. config Get/set configuration values. help Help. version Outputs Angular CLI version. doc Opens the official Angular API documentation for a given keyword.
52. DevOps for Front-end
53. ͍ͭࠒ ݟΕ·͔͢ʁ
55. Project Management
56. GitHub ϓϩδΣΫτ؅ཧʢਐḿɺλεΫɺ୲౰ʣ Ϟδϡʔϧ؅ཧ ίʔυϨϏϡʔ υΩϡϝϯτ؅ཧ
58. Cloud
59. Microsoft Azure ϦϦʔεɾαʔό ϞοΫɾαʔό σϞɾαʔό ͦͷଞ
60. Custom Vision Service
61. Step 1
62. Step 2
63. Step 3
64. OpenAPI
65. Swagger
66. Swagger Codegen OpenAPI
 Document API
 Doc REST
 Client Module REST Server Module
68. ·ͱΊ
69. WebΞϓϦέʔγϣϯ։ൃ͸ίϯϙʔωϯτࢦ޲ ։ൃޮ཰ΛͲΕ্͚ͩ͛ΒΕΔ͔
 ϑϩϯτΤϯδχΞͦ͜ Azure ΛϚελʔͤΑ https://github.com/albatrosary/decode18/
70. Special Thanks גࣜձࣾࣛࣇౡ෋࢜௨ΠϯϑΥωοτ EMAT ϝϯόʔ
71. Ask the Speaker ͷ͝Ҋ಺ ϒϨΠΫΞ΢τηογϣϯऴྃޙͷٳܜ࣌ؒʹɺ ొஃͨ͠εϐʔΧʔʹ௚઀࣭͝໰͍͚ͨͩΔ ίʔφʔΛ ʮAsk The Speakersʯ Room ʹ ༻ҙ͓ͯ͠Γ·͢ɻηογϣϯ಺༰ͷΑΓਂ͍ ཧղͷͨΊɺͥͻ͓໾ཱ͍ͯͩ͘͞ɻ ▪ ʮAsk The Speakersʯ Room
72. ηογϣϯΞϯέʔτʹ͝ڠྗ͍ͩ͘͞ɻ ެࣜΠϕϯτΞϓϦͰɺʮde:code 2018 ࢀՃऀΞϯέʔτʢඞਢʣʯ ͱ ʮ֤ηογϣϯ Ξϯέʔτʢ 4 ͭҎ্ʣʯɺ߹Θͤͯ 5 ͭҎ্ ͷΞϯέʔτʹ͝ճ౴͍ͩ͘͞ɻ΋Εͳ͘ de:code 2018 ΦϦδφϧάοζΛଃఄ͍ͨ͠·͢ɻ Twitter ͷ͝Ҋ಺ ຊηογϣϯʹؔ͢Δ࣭͝໰΍͝ײ૝͸ɺ#decode18 ͱ ηογϣϯ ID ͷ ϋογϡλάͰɺ͝౤ߘΛ͓ئ͍͠·͢ɻ #decode18 #AD16
73. © 2018 Microsoft Corporation. All rights reserved. ຊ৘ใͷ಺༰ʢఴ෇จॻɺϦϯΫઌͳͲΛؚΉʣ͸ɺ࡞੒೔࣌఺Ͱͷ΋ͷͰ͋Γɺ༧ࠂͳ͘มߋ͞ΕΔ৔߹͕͋Γ·͢ɻ