Upgrade to Pro
— share decks privately, control downloads, hide ads and more …
Speaker Deck
Features
Speaker Deck
PRO
Sign in
Sign up for free
Search
Search
モダンフロントエンド技術概論
Search
makotunes
June 28, 2021
Technology
1
210
モダンフロントエンド技術概論
Webの歴史を振り返りながら
モダンなフロントエンド技術の網羅的に説明し、
その技術戦略上の意義を語りたい
makotunes
June 28, 2021
Tweet
Share
Other Decks in Technology
See All in Technology
Expertise as a Service via MCP
yodakeisuke
1
140
PHPでResult型やってみよう
higaki_program
0
190
CSPヘッダー導入で実現するWebサイトの多層防御:今すぐ試せる設定例と運用知見
llamakko
1
200
QuickBooks®️ Customer®️ USA Contact Numbers: Complete 2025 Support Guide
qbsupportinfo
0
110
(HackFes)米国国防総省のDevSecOpsライフサイクルをAWSのセキュリティサービスとOSSで実現
syoshie
5
660
メモ整理が苦手な者による頑張らないObsidian活用術
optim
0
120
From Live Coding to Vibe Coding with Firebase Studio
firebasethailand
1
110
AWS Well-Architected から考えるオブザーバビリティの勘所 / Considering the Essentials of Observability from AWS Well-Architected
sms_tech
1
850
データ駆動経営の道しるべ:プロダクト開発指標の戦略的活用法
ham0215
2
230
Bliki (ja), and the Cathedral, and the Bazaar
koic
8
1.3k
DATA+AI SummitとSnowflake Summit: ユーザから見た共通点と相違点 / DATA+AI Summit and Snowflake Summit
nttcom
0
220
エンジニアリングマネージャー“お悩み相談”パネルセッション
ar_tama
1
650
Featured
See All Featured
Exploring the Power of Turbo Streams & Action Cable | RailsConf2023
kevinliebholz
34
5.9k
Faster Mobile Websites
deanohume
308
31k
Optimizing for Happiness
mojombo
379
70k
10 Git Anti Patterns You Should be Aware of
lemiorhan
PRO
656
60k
Practical Orchestrator
shlominoach
189
11k
Code Review Best Practice
trishagee
69
19k
JavaScript: Past, Present, and Future - NDC Porto 2020
reverentgeek
50
5.5k
The Art of Programming - Codeland 2020
erikaheidi
54
13k
Improving Core Web Vitals using Speculation Rules API
sergeychernyshev
18
1k
Intergalactic Javascript Robots from Outer Space
tanoku
271
27k
Into the Great Unknown - MozCon
thekraken
40
1.9k
Evolution of real-time – Irina Nazarova, EuRuKo, 2024
irinanazarova
8
850
Transcript
ϞμϯϑϩϯτΤϯυٕज़֓ ΞϓϦ։ൃʹ͓͚ΔϞμϯϑϩϯτΤϯυٕज़ͷ༂ਐ Makotunes
ߏ • Webͷྺ࢙ΛৼΓฦΓͳ͕Β • ϞμϯͳϑϩϯτΤϯυٕज़ͷཏతʹઆ໌͠ɺ • ͦͷٕज़ઓ্ུͷҙٛΛޠΓ͍ͨ • ࣮ࡍͷ։ൃख๏Λମݧͯͨ͘͠Ί •
αϯϓϧͰ։ൃσϞΛͯ͠ΈΔ
ΞϓϦ։ൃͰϑϩϯτΤϯυٕज़ͷॏཁੑ͕૿͢ എܠ • ͜Ε·Ͱ γεςϜશମͰଟ͘ͷٕज़εΩϧΛཁٻ͢ΔɻαʔϏεΛ࡞ΔͨΊʹɺΠϯϑϥɺόοΫΤϯυɺϑϩ ϯτΤϯυɺϞόΠϧΞϓϦʹࢸΔ·Ͱ͍εΩϧ͕ඞཁ͕ͩͬͨɻ • ͍· AWSͳͲͷΫϥυαʔϏεͷొʹΑΓɺΠϯϑϥɾόοΫΤϯυ͕ϚωʔδυαʔϏεԽ͞Ε͖ͯ ͨɻ։ൃऀΞϓϦͷ࣮ʹूத͢Δ͜ͱ͕Ͱ͖ΔΑ͏ʹͳͬͨͨΊɺϑϩϯτΤϯυٕज़ͷॏཁੑ͕
૬ରతʹ૿ͨ͠ɻ JavaScriptΛத৺ͱ͢ΔϑϩϯτΤϯυٕज़͚ͩͰ༷ʑͳϓϥοτϑΥʔϜ্Ͱಈ࡞͢ΔΞϓϦΛ։ൃͰ ͖ΔΑ͏ʹͳ͖ͬͨɻ
WebͱϑϩϯτΤϯυͷྺ࢙ • WebϨΨγʔ࣌(1990-2006) • όοΫΤϯυϑϨʔϜϫʔΫ͕ओͷ࣌ • jQueryͷ࣌(2006-2010) • jQueryීٴޙͷੈք •
SPAͱϑϩϯτΤϯυΤϯδχΞͷొ • ϑϨʔϜϫʔΫઓࠃ࣌(2010-2013) • ϞμϯϑϩϯτΤϯυͷϑϨʔϜϫʔΫᴈ໌ظ • ݱ(2013-) • React,AltJSͷొ ొ͔Βීٴ·Ͱ̎͘Β͍λΠϜϥά͕͋ΔͷͰɺ࣮ײͱͯ࣌͠มԽ̎Ε
WebϨΨγʔ࣌(1990-2006) όοΫΤϯυϑϨʔϜϫʔΫ͕ओͷ࣌
1990 httpͷొ = ੩తαΠτ • URLʹରԠ͢Δϖʔδ͕ฦ͞ΕΔ͚ͩ • httpd, Apache /var/www/html/
| +-- index.html | +-- sub/ | +-- hoge.html
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>"); } $(*
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> $(*ɾςϯϓϨʔτΤϯδϯ
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ΑΓ
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 %>ࡀͰ͢ɻ
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
jQuery࣌(2006-2010) SPAͷນ։͚ ϑϩϯτΤϯυΤϯδχΞͷొ
2005 jQuery • ؆ܿͳهड़ͰDOMૢ࡞Ajax௨৴͕Ͱ͖Δ • ϦονͳUIΛ࣮ݱ͢Δଟ͘ͷϓϥάΠϯ͕ొͨ͠ • ϑϩϯτΤϯυͷ։ൃ͕૿େ͠ɺઐͷ৬छ͕ ཱ $.ajax({
url: "/api/getWeather", data: { zipcode: 97201 }, success: function( result ) { $( "#weather-temp" ).html( "<strong>" + result + "</strong> degrees" ); } }); ※jQueryΑΓ
ഇΕͨཧ༝ • ࣮͕ϒϥοΫϘοΫε • Ϣʔβ͕ϒϥβʹϓϥάΠϯΛ͍Εͯͳ͍ͱදࣔ͞Ε ͳ͍ɻ • ϒϥβͰจࣈྻݕࡧ͕Ͱ͖ͳ͔ͬͨΓɺݕࡧΤϯ δϯʹ·ͱʹΫϩʔϦϯάͯ͠Β͑ͳ͍ɻ •
ಈ࡞͕ॏ͍ɻ ഇΕͨRIA(Rich Internet Application)ٕज़ͨͪ • Flash • Silverlight • Java Applet ※WikipediaΑΓ
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ΑΓ
2010 ϨεϙϯγϒσβΠϯ • ͷը໘αΠζʹԠͯ͡ɺଈ࣌దͳϨΠΞτʹ มߋ͞ΕΔσβΠϯͷ͜ͱΛ͍͏ • ϞόΠϧͷٸ૿ʹΑΓɺχʔζߴ·Δ • CSS3jQueryͷϓϥάΠϯͳͲ͕ޙԡ͠ @media
screen and (max-width: 600px) { .flexbox { display: flex; } } ※WikipediaΑΓ
ϦονͳUIΛ࣮ݱ͢ΔͨΊʹ࣮͕ෳࡶԽ • Կͷடংͳ࣮͘͢Δͷ͕ਏ͘ͳ͖ͬͯͨ • Ϣʔβೖྗͷॲཧ • AjaxʹΑΔαʔόͱͷσʔλ௨৴ • UIͷঢ়ଶͷऔಘ •
DOMͷૢ࡞
ϑϩϯτΤϯυϑϨʔϜϫʔΫ ઓࠃ࣌(2010-2013) ϞμϯϑϩϯτΤϯυϑϨʔϜϫʔΫᴈ໌ظ
,OPDLPVU #BDLCPOFKT &NCFSKTW "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ΑΓ
2010ࠒ Node.jsͱपลπʔϧͷొʹΑΔ։ൃڥͷൃల • αʔόʔαΠυͷJavascriptϥϯλΠϜ Node.js • τϥϯεύΠϥʹΑΓAltJS͕෮چɹBabel • ϞδϡʔϧγεςϜΛݴޠ༷ͱͯ͠αϙʔτ CommonJS
• ϞδϡʔϧϋϯυϥɹWebpack • ύοέʔδϚωʔδϟɹNpm & Yarn var a = require('module') ※WikipediaΑΓ <script src="/module.min.js"></script>
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})`; } }
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
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;
2013ࠒ ϞμϯϑϩϯτΤϯυઓࠃ࣌ • ᴈ໌ظͷಛΛҾ͖ܧ͖ͭͭɺ։ൃڥ͕͖ͬͯͯɺ৽͍͠ͷ͕ٸʹੜ • 2-wayόΠϯσΟϯάΛ౿ऻ͢Δ • ϞσϧͱϏϡʔΛ࣋ͭΞʔΩςΫνϟʢMVCɺMVɺMVWʣΛ౿ऻ͢Δ ※StackOver fl
owΑΓ • Polymer • Vue.js v1 • Riot • Aurelia • Angular
͜ͷࠒͷϑϨʔϜϫʔΫͷ՝ • 2-wayόΠϯσΟϯάʹҎԼͷΑ͏ͳ͕͋ͬͨɻ • มߋΛwatch͢ΔΦϒδΣΫτ͕૿͑ͯɺੑೳ͕ѱ͘ͳΔɻ • ModelͱViewͱͷؒͷґଘσʔλͷྲྀΕ͕ෳࡶʹͳͬͯɺίʔ σΟϯάσόοά͕͘͠ͳΔɻ
ݱ(2013-) React,AltJSͷొ
2013 Reactͷొ • DOMͷԾԽʹΑΔࠩߋ৽γεςϜʹΑΓύϑΥʔϚϯεͷվળΛ࣮ݱ • HTMLϥΠΫͳJSॻ͚ΔJSXͷऔΓࠐΈ • ReactViewͷΈఏڙ͠ɺঢ়ଶཧผϑϨʔϜϫʔΫ͕ఏڙ͢Δ • ୯ํͷσʔλϑϩʔΞʔΩςΫνϟ͕ΘΕΔʮ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
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 ར༻
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'; }
αʔόʔαΠυͰϖʔδΛ࡞Δٕज़ɹSSR/SSG • ैདྷͷϑϩϯτΤϯυ݁ܕʢSPA(CSR)ʣϑϨʔϜϫʔΫͷܽ • αʔνΤϯδϯ͕༰Λݕग़͠ਏ͘SEO؍ʹ͕͋Δ • ॳճϩʔυʹ͕͔͔࣌ؒΔ • Next.js, Nuxt.js,
GatsbyJS • ϑϩϯτΤϯυٕज़ΛόοΫΤϯυϑϨʔϜϫʔΫʹͨ͠ͷ • SSR Server Side Rendering • ϦΫΤετʹԠͯ͡ɺαʔόʔαΠυͰϨϯμϦϯάͯ͠ฦ͢ • APIͱͷ௨৴ϒϥβ͔ΒߦΘΕΔ • SSG Server Side Generation • Ϗϧυ࣌ʹϨϯμϦϯάͯ͠ϖʔδΛ༻ҙ͓ͯ͘͠ • APIͱͷ௨৴Ϗϧυ࣌ͷΈ • CDNͷΈͰ࣮ݱՄೳ Ҿ༻ɿ͠·ͿΖ͙
ωΠςΟϒΞϓϦͷΑ͏ͳWebϖʔδΛࢦ͢ɹPWA(Progressive Web App) • ϒϥβͷServiceWorkerͱ͍͏ػೳΛ༻͢Δ • Ұ୴ಡΈࠐΊΦϑϥΠϯͰಈ࡞Ͱ͖Δ • ϞόΠϧΞϓϦͱͯ͠ΈࠐΊΔ->TWAʮTrusted Web
Activityʯ • ΞϓϦ෦Ͱϒϥβ࣮ߦ͢Δٕज़ • ϞόΠϧϒϥβ͚ͩͰͳ͘ɺσεΫτοϓϒϥβͰՄೳ • ΞϓϦΛΠϯετʔϧͤͣɺͱΓ͋͑ͣͬͯΒ͑Δ͜ͱͰ͖Δ • ॳճར༻ɺCVɺ࠶๚ͳͲ্͕ͨ͠ࣄྫ͕ଟ͍ Spotifyͷࣄྫ Ҿ༻ɿpantograph
ΫϩεϓϥοτϑΥʔϜΞϓϦ։ൃ • ҰͭͷίʔυͰෳͷϓϥοτϑΥʔϜʹରԠͤ͞Δٕज़ • Electron • σεΫτοϓΞϓϦΛWebٕज़Ͱ࣮ݱ͢Δ • جຊతʹReactͳͲͷSPAͱΈ߹Θͤͯ͏ •
Linux/Windows/Mac • Chromium+Node.jsͰಈ͘ΞϓϦͰ͋ΓɺωΟςΟϒΞϓ ϦͰͳ͍ • React Native • iOS, AndroidϞόΠϧωΠςΟϒΞϓϦ༻ • React Native for Windoes + macOS • Mac,Windows༻ωΠςΟϒΞϓϦ
ϒϥβͰػցޠΛ࣮ߦ͢Δٕज़ɹWebAssenbly • C/C++RustɺGolangɺTypeScriptͳͲ͔Βίϯ ύΠϧ͕Մೳ • ύϑΥʔϚϯε্͕͢Δ • ݱࡏͷͱ͜Ζ࣮༻ஈ֊ͱݴ͍͍͕কདྷ͕ ͞Ε͍ͯΔ Ҿ༻ɿܦXTECH
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" } }
ϑϩϯτΤϯυεΩϧͷ૬ରతॏཁੑΛࢧ͑ΔαʔόʔϨεΞʔΩςΫνϟ • ಛ • αʔόʔͷӡ༻͕ෆཁ • ॊೈͳεέʔϥϏϦςΟʢScalabilityʣ • Մ༻ੑʢAvailabilityʣɾճ෮ੑ ʢRecoverabilityʣͷ্
• ར༻͚ͨͩ͠ͷ՝ۚʢPay-as-you-goʣ Ҿ༻ɿaws AWSʹ͓͚Δઃܭྫ
όοΫΤϯυʹϩδοΫΛ࣋ͨͳ͍αʔόʔϨεΞʔΩςΫνϟ • REST APIΛલఏͱͨ͠APIGateway&Lambdaߏ ͰόοΫΤϯυʹίʔυ͕ඞཁ • GraphQLʹΑΓΫΤϦϑϩϯτΤϯυʹٵऩ͞ Εɺ݁ՌతʹόοΫΤϯυϩδοΫ͕ෆཁʹͳΔ Ҿ༻ɿhttps://qiita.com/yukitaka13-1110/items/e83256107afafaf7755b όοΫΤϯυϩδοΫͷͳ͍ઃܭྫ
ΫϥυͷϚωʔδυɾαʔϏεΛखܰʹར༻͢ΔAmplify • ΞϓϦ։ൃʹूத͢ΔͨΊͷΠϯϑϥɾόοΫΤ ϯυΛαʔϏεԽͯ͠ఏڙ • αʔόʔϨεͳόοΫΤϯυΛηοτΞοϓ͢ ΔͨΊͷ Amplify CLI •
ϑϩϯτΤϯυ͔ΒόοΫΤϯυʹଓ͢Δͨ Ίͷ Amplify Libraries • CI/CD ΣϒΞϓϦͷϗεςΟϯάʹ͚ ͨ Amplify Console • Ϣʔβʔཧ CMS తͳίϯςϯπཧΛҰ ݩԽ͢Δίϯιʔϧ Amplify Admin UI Ҿ༻ɿaws
݁ɺϞμϯϑϩϯτΤϯυٕज़ͱ • ݱͷΞϓϦ։ൃʹ͓͍ͯɺ • ࠷খͷྗͰ࠷େͷޮՌΛಘΔ͜ͱ͕Ͱ͖ΔʢߴϨόϨοδͳʣٕज़Ͱ͋ Γɺٕज़ઓ্ུɺ࠾༻͢Δҙٛେ͖͍ɻ • ԿނͳΒɺ • Ϋϥυͷ಄ʹΑΓɺόοΫΤϯυɺΠϯϑϥͷίʔυͷ࠷খԽ͞Εɺ
ϑϩϯτΤϯυٕज़͚ͩͰΞϓϦ։ൃ͕Ͱ͖ΔΑ͏ͳ͖͍ͬͯͯΔ͔Βɻ • ϑϨʔϜϫʔΫͷൃలʹΑΓɺϫϯίʔυͰ͋ΒΏΔϓϥοτϑΥʔϜʹ ΞϓϦల։Ͱ͖ΔΑ͏ʹͳ͖͍ͬͯͯΔ͔Βɻ
ϞμϯϑϩϯτΤϯυٕज़ +αʔόʔϨεΞʔΩςΫνϟ ߴϓϩτλΠϐϯάͰ αʔϏεΛΩοΫελʔτͤ͞ Δํ๏
ߏɹReact+Amplify+AppSync+TypeScript • React/TypeScriptͰ࣮ • GraphQLʹΑΔϦΞϧλΠϜͳσʔλಉظ • AmplifyͰ؆୯σϓϩΠ %ZOBNP%# "QQ4ZODɹ 3FBDU
(SBQI2-