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

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

Transcript

1. ̏େϑϨʔϜϫʔΫʢAngular, React, Vue.jsʣൺֱʹΑΔ

   ΤϯλʔϓϥΠζ Web ΞϓϦέʔγϣϯ։ൃͷ࠷దԽ
   ࠤ઒ ෉ඒ༤
   Ξγϥεגࣜձࣾ

   ୅දऔక໾
   AD16
   

   View Slide

2. ࣗݾ঺հ
   ࠤ઒ɹ෉ඒ༤
   "TIJSBT JOD
   $IJFG&YFDVUJWF0⒏DFS8FC"QQMJDBUJPO&OHJOFFS
   .JDSPTPGU.PTU7BMVBCMF1SPGFTTJPOBM .71
   
   )5.-&YQFSUTKQ

   "OHVMBS+BQBO6TFS(SPVQ
   IUNMK
   !BMCBUSPTBSZ
   

   View Slide

3. ೥݄೔ʹઃཱͨ͠ਆށʹ͋Δ
   ϑϩϯτΤϯυઐ໳ͷձࣾ
   

   View Slide

4. ΞδΣϯμ
   Web Application

   A Comparison of JavaScript Framework

   Getting Started

   DevOps for Front-end
   

   View Slide

5. Web Application
   

   View Slide

6. Web αΠτͱҧ͏ʁ
   

   View Slide

7. Application
   Web Site
   

   View Slide

8. Web ΞϓϦέʔγϣϯͷ௒ʑجૅ
   

   View Slide

9. ࠷௿ݶඞཁͳ΋ͷ
   CSS
   PRESENTATION
   JS
   BEHAVIOR
   HTML
   STRUCTURE
   

   View Slide

10. ඞཁʁ
    

    View Slide

11. ҋ
    CSS
    

    View Slide

12. ޷͖ʁ
    

    View Slide

13. ϓϩάϥϜΛॻ͘ͱ͖ؾʹ͢Δ͜ͱ
    Մಡੑ
    ϦϑΝΫλϦϯά
    ࠶ར༻ੑ
    ςετ
    etc.
    

    View Slide

14. Piece
    

    View Slide

15. Component
    

    View Slide

16. Atomic Design
    

    View Slide

17. Atomic Design
    

    View Slide

18. σβΠφʔͷ࢓ࣄ
    

    View Slide

19. View Slide

20. View Slide

21. Web Components
    

    View Slide

22. Web Components
    Custom Elements

    HTML Templates

    HTML Imports

    Shadow DOM
    ϐʔεʹ໊લΛ෇͚Δ

    ϐʔεͷ໛༷

    ϐʔεΛύζϧʹ͸ΊΔ

    ϐʔεͰ͋Δ͜ͱΛओு
    

    View Slide

23. 
    HTML Imports
    HTML Templates
    Custom Elements
    Shadow DOM
    

    View Slide

24. Custom Elements
    ৽͍͠ཁૉΛొ࿥͢Δ
    var XFoo =
    document.registerElement('x-component');
    ΧελϜλάΛΠϯελϯεԽ
    
    

    View Slide

25. HTML Templates
    
    Template used
    hoge
    <br/>div {<br/>font-size: 20px;<br/>}<br/>
    <br/>console.log('x-component.html');<br/>
    
    

    View Slide

26. HTML Imports
    rel=“import"
    href=“components/x-component.html">
    

    View Slide

27. Shadow DOM
    
    <br/>var imports =<br/>document.querySelector('link[rel="import"]').import;<br/>var templates = imports.querySelector('template');<br/>var contents = templates.content;<br/>var xcomponents = document.querySelector('x-component');<br/>xcomponents.createShadowRoot().appendChild(<br/>contents.cloneNode(true)<br/>);<br/>
    

    View Slide

28. View Slide

29. OOCSS
    BEM

    SMACSS
    

    View Slide

30. OOCSS
    BEM

    SMACSS
    

    View Slide

31. Scoped CSS
    

    View Slide

32. JavaScript
    Framework
    

    View Slide

33. JavaScript
    Framework
    

    View Slide

34. Web Application
    Framework
    

    View Slide

35. A Comparison of JavaScript Framework
    

    View Slide

36. ͲͷϑϨʔϜϫʔΫΛ࢖͏͔ʁ
    ֶशίετ
    ཁһ֬อ
    ։ൃͷ༰қੑ
    ࣮ߦ଎౓
    ӡ༻ίετ
    

    View Slide

37. ͲͷϑϨʔϜϫʔΫΛ࢖͏͔ʁ
    ֶशίετ
    ཁһ֬อ
    ։ൃͷ༰қੑ
    ࣮ߦ଎౓
    ӡ༻ίετ
    

    View Slide

38. Getting Started
    

    View Slide

39. γϯϓϧʹ࢝ΊΔ
    - QuickStart
    

    View Slide

40. Angular
    $ npm install -g @angular/cli
    $ ng new hello-angular
    $ cd hello-angular
    $ ng serve
    

    View Slide

41. Angular
    $ npm install -g @angular/cli
    $ ng new hello-angular
    $ cd hello-angular
    $ ng serve
    

    View Slide

42. Angular
    

    View Slide

43. Vue.js
    $ npm install -g @vue/cli
    $ vue create hello-vue
    $ cd hello-vue
    $ yarn serve
    <br/>…<br/><script><br/>

    View Slide

44. Vue.js
    

    View Slide

45. React
    $ npm install -g create-react-app
    $ create-react-app hello-react
    $ cd hello-react
    $ yarn start
    $ yarn eject
    

    View Slide

46. config/webpack.config.dev.js
    loader: require.resolve('css-loader'),
    options: {
    importLoaders: 1,
    modules: true,
    localIdentName:
    ‘[name]__[local]___[hash:base64:5]’
    },
    

    View Slide

47. config/webpack.config.prod.js
    loader: require.resolve('css-loader'),
    options: {
    importLoaders: 1,
    modules: true,
    minimize: true,
    sourceMap: true
    },
    

    View Slide

48. App.js
    // import ‘./App.css’;
    import styles from ‘./App.css’;
    class App extends Component {
    render() {
    return (
    
    

    View Slide

49. App.css
    /* .App-logo { */
    .AppLogo {
    animation: App-logo-spin infinite 20s linear;
    height: 80px;
    }
    /* .App-header { */
    .AppHeader {
    ackground-color: #222;
    height: 150px;
    

    View Slide

50. App.js
    

    View Slide

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.
    

    View Slide

52. DevOps for Front-end
    

    View Slide

53. ͍ͭࠒ
    ݟΕ·͔͢ʁ
    

    View Slide

54. View Slide

55. Project Management
    

    View Slide

56. GitHub
    ϓϩδΣΫτ؅ཧʢਐḿɺλεΫɺ୲౰ʣ
    Ϟδϡʔϧ؅ཧ
    ίʔυϨϏϡʔ
    υΩϡϝϯτ؅ཧ
    

    View Slide

57. View Slide

58. Cloud
    

    View Slide

59. Microsoft Azure
    ϦϦʔεɾαʔό
    ϞοΫɾαʔό
    σϞɾαʔό
    ͦͷଞ
    

    View Slide

60. Custom Vision Service
    

    View Slide

61. Step 1
    

    View Slide

62. Step 2
    

    View Slide

63. Step 3
    

    View Slide

64. OpenAPI
    

    View Slide

65. Swagger
    

    View Slide

66. Swagger Codegen
    OpenAPI

    Document
    API

    Doc
    REST

    Client
    Module
    REST
    Server
    Module
    

    View Slide

67. View Slide

68. ·ͱΊ
    

    View Slide

69. WebΞϓϦέʔγϣϯ։ൃ͸ίϯϙʔωϯτࢦ޲
    ։ൃޮ཰ΛͲΕ্͚ͩ͛ΒΕΔ͔

    ϑϩϯτΤϯδχΞͦ͜ Azure ΛϚελʔͤΑ
    https://github.com/albatrosary/decode18/
    

    View Slide

70. Special Thanks
    גࣜձࣾࣛࣇౡ෋࢜௨ΠϯϑΥωοτ EMAT ϝϯόʔ
    

    View Slide

71. Ask the Speaker ͷ͝Ҋ಺
    ϒϨΠΫΞ΢τηογϣϯऴྃޙͷٳܜ࣌ؒʹɺ
    ొஃͨ͠εϐʔΧʔʹ௚઀࣭͝໰͍͚ͨͩΔ
    ίʔφʔΛ ʮAsk The Speakersʯ Room ʹ
    ༻ҙ͓ͯ͠Γ·͢ɻηογϣϯ಺༰ͷΑΓਂ͍
    ཧղͷͨΊɺͥͻ͓໾ཱ͍ͯͩ͘͞ɻ
    ■ ʮAsk The Speakersʯ Room
    

    View Slide

72. ηογϣϯΞϯέʔτʹ͝ڠྗ͍ͩ͘͞ɻ
    ެࣜΠϕϯτΞϓϦͰɺʮde:code 2018 ࢀՃऀΞϯέʔτʢඞਢʣʯ ͱ ʮ֤ηογϣϯ
    Ξϯέʔτʢ 4 ͭҎ্ʣʯɺ߹Θͤͯ 5 ͭҎ্ ͷΞϯέʔτʹ͝ճ౴͍ͩ͘͞ɻ΋Εͳ͘
    de:code 2018 ΦϦδφϧάοζΛଃఄ͍ͨ͠·͢ɻ
    Twitter ͷ͝Ҋ಺
    ຊηογϣϯʹؔ͢Δ࣭͝໰΍͝ײ૝͸ɺ#decode18 ͱ ηογϣϯ ID ͷ
    ϋογϡλάͰɺ͝౤ߘΛ͓ئ͍͠·͢ɻ
    #decode18 #AD16
    

    View Slide

73. © 2018 Microsoft Corporation. All rights reserved.
    ຊ৘ใͷ಺༰ʢఴ෇จॻɺϦϯΫઌͳͲΛؚΉʣ͸ɺ࡞੒೔࣌఺Ͱͷ΋ͷͰ͋Γɺ༧ࠂͳ͘มߋ͞ΕΔ৔߹͕͋Γ·͢ɻ
    

    View Slide