モダンフロントエンド技術概論

Webの歴史を振り返りながら
モダンなフロントエンド技術の網羅的に説明し、
その技術戦略上の意義を語りたい

Transcript

1. ϞμϯϑϩϯτΤϯυٕज़֓࿦ ΞϓϦ։ൃʹ͓͚ΔϞμϯϑϩϯτΤϯυٕज़ͷ༂ਐ Makotunes
2. ߏ੒ • Webͷྺ࢙ΛৼΓฦΓͳ͕Β • ϞμϯͳϑϩϯτΤϯυٕज़ͷ໢ཏతʹઆ໌͠ɺ • ͦͷٕज़ઓ্ུͷҙٛΛޠΓ͍ͨ • ࣮ࡍͷ։ൃख๏Λମݧͯ͠௖ͨ͘Ί • αϯϓϧͰ։ൃσϞΛͯ͠ΈΔ
3. ΞϓϦ։ൃͰϑϩϯτΤϯυٕज़ͷॏཁੑ͕૿͢ എܠ • ͜Ε·Ͱ γεςϜશମͰଟ͘ͷٕज़εΩϧΛཁٻ͢ΔɻαʔϏεΛ࡞ΔͨΊʹɺΠϯϑϥɺόοΫΤϯυɺϑϩ ϯτΤϯυɺϞόΠϧΞϓϦʹࢸΔ·Ͱ޿͍εΩϧ͕ඞཁ͕ͩͬͨɻ • ͍· AWSͳͲͷΫϥ΢υαʔϏεͷొ৔ʹΑΓɺΠϯϑϥɾόοΫΤϯυ͕ϚωʔδυαʔϏεԽ͞Ε͖ͯ ͨɻ։ൃऀ͸ΞϓϦͷ࣮૷ʹूத͢Δ͜ͱ͕Ͱ͖ΔΑ͏ʹͳͬͨͨΊɺϑϩϯτΤϯυٕज़ͷॏཁੑ͕ ૬ରతʹ૿ͨ͠ɻ JavaScriptΛத৺ͱ͢ΔϑϩϯτΤϯυٕज़͚ͩͰ༷ʑͳϓϥοτϑΥʔϜ্Ͱಈ࡞͢ΔΞϓϦΛ։ൃͰ ͖ΔΑ͏ʹͳ͖ͬͨɻ
4. WebͱϑϩϯτΤϯυͷྺ࢙ • WebϨΨγʔ࣌୅(1990-2006) • όοΫΤϯυϑϨʔϜϫʔΫ͕ओ໾ͷ࣌୅ • jQueryͷ࣌୅(2006-2010) • jQueryීٴޙͷੈք • SPAͱϑϩϯτΤϯυΤϯδχΞͷొ৔ • ϑϨʔϜϫʔΫઓࠃ࣌୅(2010-2013) • ϞμϯϑϩϯτΤϯυͷϑϨʔϜϫʔΫᴈ໌ظ • ݱ୅(2013-) • React,AltJSͷొ৔ ొ৔͔Βීٴ·Ͱ̎೥͘Β͍͸λΠϜϥά͕͋ΔͷͰɺ࣮ײͱͯ͠͸࣌୅มԽ͸໿̎೥஗Ε
5. WebϨΨγʔ࣌୅(1990-2006) όοΫΤϯυϑϨʔϜϫʔΫ͕ओ໾ͷ࣌୅
6. 1990 httpͷొ৔ = ੩తαΠτ • URLʹରԠ͢Δϖʔδ͕ฦ͞ΕΔ͚ͩ • httpd, Apache /var/www/html/ | +-- index.html | +-- sub/ | +-- hoge.html
7. 1997ࠒ ಈతαΠτͷນ։͚ɹCGI • ϓϩάϥϜͰ௚઀HTMLΛฦ͢ • PerlʹΑΔCGI, Java Servlet public void doGet( HttpServletRequest request, HttpServletResponse response ) throws IOException, ServletException { response.setContentType("text/html;"); PrintWriter out = response.getWriter(); out.println("<html>"); out.println(" <head>"); out.println(" <title>Hoge</title>"); out.println(" </head>"); out.println(" <body>"); out.println(new java.util.Date()); out.println(" </body>"); out.println("</html>"); } $(*
8. 1999ࠒɹςϯϓϨʔτΤϯδϯͷొ৔ • HTMLʹϓϩάϥϜΛຒΊࠐΉ • Java JSP(1999), PHP <%@ page contentType="text/html %> <html> <head> <title>Hoge</title> </head> <body> <% out.println(new java.util.Date()); %> </body> </html> $(*ɾςϯϓϨʔτΤϯδϯ
9. 1998 DHTMLϑϩϯτΤϯυͰͷಈతαΠτ • JavaScriptͷDOM API(1998)Λ࢖༻ͯ͠ HTMLΛૢ࡞Ͱ͖Δϒϥ΢β͕ొ৔ͨ͠ <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http:// www.w3.org/TR/html4/loose.dtd"> <html> <head> </head> <body> <div id="hogehoge"></div> <script type="text/javascript"> // id͕hogehogeͷཁૉͷࢠཁૉͱͯ͠ʮ<p>HOGEEEEEEE</p>ʯΛ௥Ճɻ document.getElementById("hogehoge").innerHTML = "<p>HOGEEEEEEE</p>" </script> </body> </html> ※WikipediaΑΓ
10. 2005 MVCΞʔΫςΫΩϟͷొ৔ • Model, View, Controller͔ΒͳΔΞʔΩςΫνϟΛಛ௃ͱ͢Δ • ࣮૷ͱͯ͠Ruby on Rails, CakePHP, DjangoͳͲ class UsersController < ApplicationController def index status = {name: 'ʹΌ͔ʹ͠', age: 28} @user = User.new @user.call_template(status) end end class User < ApplicationRecord require 'erb' def call_template(status) @name = status[:name] @age = status[:age] file = File.read('app/models/users/template.html.erb') erb = ERB.new(file).result(binding) puts erb end end ※WikipediaΑΓ ࢲ͸<%= @name %>Ͱ͢ɻ ೥ྸ͸<%= @age %>ࡀͰ͢ɻ
11. 2005 Ajax • ϖʔδϦϩʔυͤͣɺJavascriptͷ࣮ߦͷΈ Ͱαʔόʔͱ௨৴Ͱ͖Δ • ωΟςΟϒΞϓϦʹ͍ۙUX͕࣮ݱ͢Δ • ϖʔδભҠΛ൐Θͳ͍WebΞϓϦΛSPAͱ ݺͿ (Single Page Application) var xhr = new XMLHttpRequest(); xhr.open('GET', 'https://httpbin.org/get', true); xhr.onreadystatechange = function() { if (xhr.readyState === 4 && xhr.status === 200) { console.log(xhr.responseText); } }; xhr.send(null); Ҿ༻ɿ೔ܦXTECH
12. jQuery࣌୅(2006-2010) SPAͷນ։͚ ϑϩϯτΤϯυΤϯδχΞͷొ৔
13. 2005 jQuery • ؆ܿͳهड़ͰDOMૢ࡞΍Ajax௨৴͕Ͱ͖Δ • ϦονͳUIΛ࣮ݱ͢Δଟ͘ͷϓϥάΠϯ͕ొ৔ͨ͠ • ϑϩϯτΤϯυͷ։ൃ͕૿େ͠ɺઐ໳ͷ৬छ͕੒ ཱ $.ajax({ url: "/api/getWeather", data: { zipcode: 97201 }, success: function( result ) { $( "#weather-temp" ).html( "<strong>" + result + "</strong> degrees" ); } }); ※jQueryΑΓ
14. ഇΕͨཧ༝ • ࣮૷͕ϒϥοΫϘοΫε • Ϣʔβ͕ϒϥ΢βʹϓϥάΠϯΛ͍Εͯͳ͍ͱදࣔ͞Ε ͳ͍ɻ • ϒϥ΢β಺Ͱจࣈྻݕࡧ͕Ͱ͖ͳ͔ͬͨΓɺݕࡧΤϯ δϯʹ·ͱ΋ʹΫϩʔϦϯάͯ͠΋Β͑ͳ͍ɻ • ಈ࡞͕ॏ͍ɻ ഇΕͨRIA(Rich Internet Application)ٕज़ͨͪ • Flash • Silverlight • Java Applet ※WikipediaΑΓ
15. 2008 HTML 5ͱCSS 3ͱECMAScript 5 • 15೥ͿΓͷ࢓༷ͷඪ४Խ • ͋Δఔ౓ϦονͳWebUIΛ։ൃͰ͖ΔΑ͏ʹͳͬͨ //ϚϧνϝσΟΞରԠ <video width="640" height="360" preload="auto" poster="hoge.png" controls autoplay> <source src="hoge.webm" type='video/webm; codecs="vp8, vorbis"'> </video> //ϩʔΧϧετϨʔδ <script> localStorage.setItem('myCat', 'Tom'); var cat = localStorage.getItem("myCat"); localStorage.removeItem("myCat"); </script> //ϑΥʔϜͷόϦσʔγϣϯ <input name="email" type="email"> ※pngitem.comΑΓ
16. 2010 ϨεϙϯγϒσβΠϯ • ୺຤ͷը໘αΠζʹԠͯ͡ɺଈ࣌ద੾ͳϨΠΞ΢τʹ มߋ͞ΕΔσβΠϯͷ͜ͱΛ͍͏ • ϞόΠϧ୺຤ͷٸ૿ʹΑΓɺχʔζߴ·Δ • CSS3΍jQueryͷϓϥάΠϯͳͲ͕ޙԡ͠ @media screen and (max-width: 600px) { .flexbox { display: flex; } } ※WikipediaΑΓ
17. ϦονͳUIΛ࣮ݱ͢ΔͨΊʹ࣮૷͕ෳࡶԽ • Կͷடং΋ͳ࣮͘૷͢Δͷ͕ਏ͘ͳ͖ͬͯͨ • Ϣʔβೖྗͷॲཧ • AjaxʹΑΔαʔόͱͷσʔλ௨৴ • UIͷঢ়ଶͷऔಘ • DOMͷૢ࡞
18. ϑϩϯτΤϯυϑϨʔϜϫʔΫ ઓࠃ࣌୅(2010-2013) ϞμϯϑϩϯτΤϯυϑϨʔϜϫʔΫᴈ໌ظ
19. ,OPDLPVU
    #BDLCPOFKT
    &NCFSKT
    W
    "OHVMBS+4 2010 ϞμϯϑϩϯτΤϯυϑϨʔϜϫʔΫᴈ໌ظ • MVCϞσϧ౳ͷ໌֬ͳσβΠϯύλʔϯΛ࣋ͭ • View૚ʢςϯϓϨʔτΤϯδϯʣɹએݴܕϓϩάϥϛϯά • ૒ํ޲σʔλόΠϯσΟϯά • AjaxϢʔςΟϦςΟ • URLϧʔςΟϯά <!doctype html> <html> <head> <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.4/ angular.min.js"></script> <script> var app = angular.module('myApp', []); app.controller('myController', function($scope) { $scope.message = 'Hello world!'; }); </script> </head> <body> ※WikipediaΑΓ
20. 2010ࠒ Node.jsͱपลπʔϧͷొ৔ʹΑΔ։ൃ؀ڥͷൃల • αʔόʔαΠυͷJavascriptϥϯλΠϜ Node.js • τϥϯεύΠϥʹΑΓAltJS͕෮چɹBabel • ϞδϡʔϧγεςϜΛݴޠ࢓༷ͱͯ͠αϙʔτ CommonJS • ϞδϡʔϧϋϯυϥɹWebpack • ύοέʔδϚωʔδϟɹNpm & Yarn var a = require('module') ※WikipediaΑΓ <script src="/module.min.js"></script>
21. 2010ࠒ AltJSɹτϥϯεύΠϧʹΑΓJavascriptʹม׵Ͱ͖Δϓϩάϥϛϯάݴޠ • CoffeeScript • ݩ૆AltJSɻΫϥεɺΞϩʔؔ਺ɺΠϯσϯτͳͲ࢖༻Մɻۙ೥͸ഇΕ͖ͯͨɻ • TypeScript • ੩తܕ෇͚ɾΫϥεɾΠϯλʔϑΣΠεɾδΣωϦΫε౳ɻۙ೥ओྲྀɻ • Dart • ϒϥ΢βͰ͸ഇΕ͕ͨɺϞόΠϧΞϓϦͷੈքͰੜ͖࢒ͬͨ(FlutterͳͲ)ɻ ※WikipediaΑΓ interface IUser { name: string; getName: (keisho: string) => string; } class User implements IUser { name: string; getName (keisho: string) { return `${this.name} (${keisho})`; } }
22. 2015 Javascriptඪ४࢓༷(ECMAScript)ͷϞμϯԽ • ECMAScript 2015(ES2015/ES6) • ߏจ͕࡮৽͞ΕͯҰؾʹϞμϯͳݴޠʹͳͬͨʢӈهʣ • Ұൠతʹ͸͔͜͜ΒϞμϯͱݟͳ͢ • ECMA࢓༷͕ൃද͞Ε͔ͯΒɺϒϥ΢βJS͕ରԠ͞ΕΔ·ͰλΠϜϥά͕͋Δʢhttps://kangax.github.io/compat- table/es6/ʣ • ຖ೥ߋ৽͞Εͯɺ͢ͰʹES2022(ES12)·Ͱൃද͞Ε͍ͯΔ • BabelͷΑ͏ͳτϥϯεύΠϧπʔϧ͕ීٴͨͨ͠Ίɺ࠷৽࢓༷ͷεΫϦϓτͰ࣮૷͢Δ͜ͱ͕Մೳʹͳͬͨ • ʢϑϨʔϜϫʔΫΛ࢖Θͳ͍ɺAltJSͰ͸ͳ͍ͱ͍͏จ຺Ͱʣඪ४ͷJSͷ͜ͱΛVanillaJSͱݺͿɻ if (true) { var a = 1; let b = 2; const c = 3; b = 20; } console.log(a); // => 1 console.log(b); // => undefined console.log(c); // => undefined const fn = (a, b) => { return a + b; }; ES2015(ES6 ) • let/constએݴ • classߏจ • Promis e • Ξϩʔؔ਺ • importͱexportʹΑΔϞδϡʔϧߏจ • ςϯϓϨʔτจࣈྻ • ؔ਺ͷՄม௕Ҿ਺ • ؔ਺ͷσϑΥϧτҾ਺ • ෼ׂ୅ೖ • ഑ྻల։ • for o f • Map/Set/WeakMap/WeakSe t • Symbo l • ܕ෇͖഑ྻ ES2016(ES7 ) • Array.include s • Exponentiation operator ES2017(ES8 ) • Object.values/Object.entrie s • String.padStart/String.padEn d • Object.getOwnPropertyDescriptor s • ຤ඌΧϯϚڐ༰ • Async/Awai t • Shared memory and atomic s
23. Sassͷಛ௃ • ωετʢೖΕࢠʣ͕࢖͑ͯߏ଄͕೺Ѳ͠΍͍͢ • ࢛ଇԋࢉ͕Ͱ͖Δ • ม਺͕࢖͑Δ • ϑΝΠϧΛ෼ׂͰ͖Δ • MixinʢϛοΫεΠϯʣͰίʔυΛҾ༻Ͱ͖Δ • ίʔυΛܧঝͰ࢖͍ճͤΔ • JavaScriptͷΑ͏ʹؔ਺͕࢖͑Δ 2006 AltCSS ϓϩάϥϛϯάݴޠʹ͍ۙ࢓༷ͷ࣮ݱ • ϓϦϓϩηοαͱ΋ݺ͹ΕΔ • Less • ݩ૆CSSϓϦϓϩηοαɹۙ೥ഇΕΔɻ • Sass • ϓϦϓϩηοαݱࡏओྲྀ • PostCSS • ΧελϚΠζੑͱ࠷దԽπʔϧΛఏڙ͢Δ ※WikipediaΑΓ $blue: #3bbfce; $margin: 16px; .content-navigation { border-color: $blue; color: darken($blue, 10%); } .border { padding: $margin / 2; margin: $margin / 2; border-color: $blue;
24. 2013ࠒ ϞμϯϑϩϯτΤϯυઓࠃ࣌୅ • ᴈ໌ظͷಛ௃ΛҾ͖ܧ͖ͭͭɺ։ൃ؀ڥ͕੔͖ͬͯͯɺ৽͍͠΋ͷ͕ٸ଎ʹ஀ੜ • 2-wayόΠϯσΟϯάΛ౿ऻ͢Δ • ϞσϧͱϏϡʔΛ࣋ͭΞʔΩςΫνϟʢMVCɺMVɺMVW౳ʣΛ౿ऻ͢Δ ※StackOver fl owΑΓ • Polymer • Vue.js v1 • Riot • Aurelia • Angular
25. ͜ͷࠒͷϑϨʔϜϫʔΫͷ՝୊ • 2-wayόΠϯσΟϯάʹ͸ҎԼͷΑ͏ͳ໰୊͕͋ͬͨɻ • มߋΛwatch͢ΔΦϒδΣΫτ͕૿͑ͯɺੑೳ͕ѱ͘ͳΔɻ • ModelͱViewͱͷؒͷґଘ΍σʔλͷྲྀΕ͕ෳࡶʹͳͬͯɺίʔ σΟϯά΍σόοά͕೉͘͠ͳΔɻ
26. ݱ୅(2013-) React,AltJSͷొ৔
27. 2013 Reactͷొ৔ • DOMͷԾ૝ԽʹΑΔࠩ෼ߋ৽γεςϜʹΑΓύϑΥʔϚϯεͷվળΛ࣮ݱ • HTMLϥΠΫͳJSॻ͚ΔJSXͷऔΓࠐΈ • React͸ViewͷΈఏڙ͠ɺঢ়ଶ؅ཧ͸ผϑϨʔϜϫʔΫ͕ఏڙ͢Δ • ୯ํ޲ͷσʔλϑϩʔΞʔΩςΫνϟ͕࢖ΘΕΔʮFlux, Reduxʯ import React from "react"; import ReactDOM from "react-dom"; class Layout extends React.Component { render() { return ( <h1>Welcome!</h1> ); } } const app = document.getElementById('app'); ReactDOM.render(<Layout/>, app); Flux Redux Ҿ༻ɿClarion Technologies, Qiita
28. 2015 ReactͷӨڹΛड͚ͨϑϨʔϜϫʔΫ͕૿Ճ • Grommet • Ember.js v2 • Vue.js v2 • Svelte • Hyperapp • Dojo <div id="app"> {{ message }} </div> <script> var app = new Vue({ el: '#app', data: { message: 'Hello Vue!' } }) </script> Ҿ༻ɿPublickey ར༻཰
29. 2020 ۙ೥ͷReactͷਐԽ • ؔ਺ܕίϯϙʔωϯτ • Ϋϥεܕίϯϙʔωϯτʹ୅ΘΓpropsΛड͚औΓReactΤϨϝϯτΛฦؔ͢਺Λ ࢖༻ͨ͠σβΠϯύλʔϯΛ௥Ճ • ϑοΫ • ؔ਺ܕίϯϙʔωϯτͷͨΊͷstateͷ؅ཧํ๏ import React, { useState, useEffect } from 'react'; function FriendStatus(props) { const [isOnline, setIsOnline] = useState(null); function handleStatusChange(status) { setIsOnline(status.isOnline); } useEffect(() => { ChatAPI.subscribeToFriendStatus(props.friend.id, handleStatusChange); return () => { ChatAPI.unsubscribeFromFriendStatus(props.friend.id, handleStatusChange); }; }); if (isOnline === null) { return 'Loading...'; } return isOnline ? 'Online' : 'Offline'; }
30. αʔόʔαΠυͰϖʔδΛ࡞Δٕज़ɹSSR/SSG • ैདྷͷϑϩϯτΤϯυ׬݁ܕʢSPA(CSR)ʣϑϨʔϜϫʔΫͷܽ఺ • αʔνΤϯδϯ͕಺༰Λݕग़͠ਏ͘SEO؍఺ʹ໰୊͕͋Δ • ॳճϩʔυʹ͕͔͔࣌ؒΔ • Next.js, Nuxt.js, GatsbyJS • ϑϩϯτΤϯυٕज़ΛόοΫΤϯυϑϨʔϜϫʔΫʹͨ͠΋ͷ • SSR Server Side Rendering • ϦΫΤετʹԠͯ͡ɺαʔόʔαΠυͰϨϯμϦϯάͯ͠ฦ͢ • APIͱͷ௨৴͸ϒϥ΢β͔Β΋౎౓ߦΘΕΔ • SSG Server Side Generation • Ϗϧυ࣌ʹϨϯμϦϯάͯ͠ϖʔδΛ༻ҙ͓ͯ͘͠ • APIͱͷ௨৴͸Ϗϧυ࣌ͷΈ • CDNͷΈͰ΋࣮ݱՄೳ Ҿ༻ɿ͠·ͿΖ͙
31. ωΠςΟϒΞϓϦͷΑ͏ͳWebϖʔδΛ໨ࢦ͢ɹPWA(Progressive Web App) • ϒϥ΢βͷServiceWorkerͱ͍͏ػೳΛ࢖༻͢Δ • Ұ୴ಡΈࠐΊ͹ΦϑϥΠϯͰಈ࡞Ͱ͖Δ • ϞόΠϧΞϓϦͱͯ͠΋૊ΈࠐΊΔ->TWAʮTrusted Web Activityʯ • ΞϓϦ಺෦Ͱϒϥ΢β࣮ߦ͢Δٕज़ • ϞόΠϧϒϥ΢β͚ͩͰͳ͘ɺσεΫτοϓϒϥ΢βͰ΋Մೳ • ΞϓϦΛΠϯετʔϧͤͣɺͱΓ͋͑ͣ࢖ͬͯ΋Β͑Δ͜ͱͰ͖Δ • ॳճར༻཰ɺCVɺ࠶๚໰཰ͳͲ͕޲্ͨ͠ࣄྫ͕ଟ͍ Spotifyͷࣄྫ Ҿ༻ɿpantograph
32. ΫϩεϓϥοτϑΥʔϜΞϓϦ։ൃ • ҰͭͷίʔυͰෳ਺ͷϓϥοτϑΥʔϜʹରԠͤ͞Δٕज़ • Electron • σεΫτοϓΞϓϦΛWebٕज़Ͱ࣮ݱ͢Δ • جຊతʹReactͳͲͷSPAͱ૊Έ߹Θͤͯ࢖͏ • Linux/Windows/Mac • Chromium+Node.jsͰಈ͘ΞϓϦͰ͋ΓɺωΟςΟϒΞϓ ϦͰ͸ͳ͍ • React Native • iOS, AndroidϞόΠϧωΠςΟϒΞϓϦ༻ • React Native for Windoes + macOS • Mac,Windows༻ωΠςΟϒΞϓϦ
33. ϒϥ΢βͰػցޠΛ࣮ߦ͢Δٕज़ɹWebAssenbly • C/C++΍RustɺGolangɺTypeScriptͳͲ͔Βίϯ ύΠϧ͕Մೳ • ύϑΥʔϚϯε͕޲্͢Δ • ݱࡏͷͱ͜Ζ࣮༻ஈ֊ͱ͸ݴ͍೉͍͕কདྷ͕஫໨ ͞Ε͍ͯΔ Ҿ༻ɿ೔ܦXTECH
34. GraphQL΁ͷظ଴ • ඞཁͱ͢ΔΫΤϦͷෳࡶੑʹର͢ΔରԠ͢ΔιϦϡʔγϣϯ • ϦονϑϩϯτΤϯυԽͰAPI͕ෳࡶԽ͢Δ • UI͸ৗʹϢʔβʔͷχʔζʹै͍ɺ଎΍͔ʹมԽ͢Δ • ϚϧνϓϥοτϑΥʔϜԽͰݸผΞϓϦ͕ҟͳΔΫΤϦΛཁٻ͢Δ • ϦΞϧλΠϜͰͷσʔλಉظ • ෳ਺ͷϚΠΫϩαʔϏε͕ଘࡏ͢Δ Ҿ༻ɿwebprofessional.jp // Schema type Project { name: String tagline: String contributors: [User] } // Ask for what you want { project(name: "GraphQL") { tagline } } // Get predictable results { "project": { "tagline": "A query language for APIs" } }
35. ϑϩϯτΤϯυεΩϧͷ૬ରతॏཁੑΛࢧ͑ΔαʔόʔϨεΞʔΩςΫνϟ • ಛ௃ • αʔόʔͷӡ༻͕ෆཁ • ॊೈͳεέʔϥϏϦςΟʢScalabilityʣ • Մ༻ੑʢAvailabilityʣɾճ෮ੑ ʢRecoverabilityʣͷ޲্ • ར༻ͨ͠෼͚ͩͷ՝ۚʢPay-as-you-goʣ Ҿ༻ɿaws AWSʹ͓͚Δઃܭྫ
36. όοΫΤϯυʹϩδοΫΛ࣋ͨͳ͍αʔόʔϨεΞʔΩςΫνϟ • REST APIΛલఏͱͨ͠APIGateway&Lambdaߏ੒ Ͱ͸όοΫΤϯυʹίʔυ͕ඞཁ • GraphQLʹΑΓΫΤϦ͸ϑϩϯτΤϯυʹٵऩ͞ Εɺ݁ՌతʹόοΫΤϯυϩδοΫ͕ෆཁʹͳΔ Ҿ༻ɿhttps://qiita.com/yukitaka13-1110/items/e83256107afafaf7755b όοΫΤϯυϩδοΫͷͳ͍ઃܭྫ
37. Ϋϥ΢υͷϚωʔδυɾαʔϏεΛखܰʹར༻͢ΔAmplify • ΞϓϦ։ൃʹूத͢ΔͨΊͷΠϯϑϥɾόοΫΤ ϯυΛαʔϏεԽͯ͠ఏڙ • αʔόʔϨεͳόοΫΤϯυΛηοτΞοϓ͢ ΔͨΊͷ Amplify CLI • ϑϩϯτΤϯυ͔ΒόοΫΤϯυʹ઀ଓ͢Δͨ Ίͷ Amplify Libraries • CI/CD ΍΢ΣϒΞϓϦͷϗεςΟϯάʹ޲͚ ͨ Amplify Console • Ϣʔβʔ؅ཧ΍ CMS తͳίϯςϯπ؅ཧΛҰ ݩԽ͢Δίϯιʔϧ Amplify Admin UI Ҿ༻ɿaws
38. ݁࿦ɺϞμϯϑϩϯτΤϯυٕज़ͱ͸ • ݱ୅ͷΞϓϦ։ൃʹ͓͍ͯɺ • ࠷খͷ౒ྗͰ࠷େͷޮՌΛಘΔ͜ͱ͕Ͱ͖ΔʢߴϨόϨοδͳʣٕज़Ͱ͋ Γɺٕज़ઓ্ུɺ࠾༻͢Δҙٛ͸େ͖͍ɻ • ԿނͳΒ͹ɺ • Ϋϥ΢υͷ୆಄ʹΑΓɺόοΫΤϯυɺΠϯϑϥͷίʔυͷ࠷খԽ͞Εɺ ϑϩϯτΤϯυٕज़͚ͩͰΞϓϦ։ൃ͕Ͱ͖ΔΑ͏ͳ͖͍ͬͯͯΔ͔Βɻ • ϑϨʔϜϫʔΫͷൃలʹΑΓɺϫϯίʔυͰ͋ΒΏΔϓϥοτϑΥʔϜʹ ΞϓϦల։Ͱ͖ΔΑ͏ʹͳ͖͍ͬͯͯΔ͔Βɻ
39. ϞμϯϑϩϯτΤϯυٕज़ +αʔόʔϨεΞʔΩςΫνϟ ߴ଎ϓϩτλΠϐϯάͰ αʔϏεΛΩοΫελʔτͤ͞ Δํ๏
40. ߏ੒ɹReact+Amplify+AppSync+TypeScript • React/TypeScriptͰ࣮૷ • GraphQLʹΑΔϦΞϧλΠϜͳσʔλಉظ • AmplifyͰ؆୯σϓϩΠ %ZOBNP%# "QQ4ZODɹ
    3FBDU (SBQI2-