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
Tech-Verse 2025 Global CTO Session
lycorptech_jp
PRO
0
780
生成AI時代の開発組織・技術・プロセス 〜 ログラスの挑戦と考察 〜
itohiro73
1
330
あなたの声を届けよう! 女性エンジニア登壇の意義とアウトプット実践ガイド #wttjp / Call for Your Voice
kondoyuko
4
480
生成AI活用の組織格差を解消する 〜ビジネス職のCursor導入が開発効率に与えた好循環〜 / Closing the Organizational Gap in AI Adoption
upamune
5
4.2k
Oracle Audit Vault and Database Firewall 20 概要
oracle4engineer
PRO
3
1.7k
rubygem開発で鍛える設計力
joker1007
2
220
米国国防総省のDevSecOpsライフサイクルをAWSのセキュリティサービスとOSSで実現
syoshie
2
1.2k
Tech-Verse 2025 Keynote
lycorptech_jp
PRO
0
910
Understanding_Thread_Tuning_for_Inference_Servers_of_Deep_Models.pdf
lycorptech_jp
PRO
0
140
Node-REDのFunctionノードでMCPサーバーの実装を試してみた / Node-RED × MCP 勉強会 vol.1
you
PRO
0
120
TechLION vol.41~MySQLユーザ会のほうから来ました / techlion41_mysql
sakaik
0
190
より良いプロダクトの開発を目指して - 情報を中心としたプロダクト開発 #phpcon #phpcon2025
bengo4com
1
3.1k
Featured
See All Featured
ReactJS: Keep Simple. Everything can be a component!
pedronauck
667
120k
How STYLIGHT went responsive
nonsquared
100
5.6k
Scaling GitHub
holman
459
140k
GitHub's CSS Performance
jonrohan
1031
460k
Rails Girls Zürich Keynote
gr2m
94
14k
VelocityConf: Rendering Performance Case Studies
addyosmani
331
24k
How to Ace a Technical Interview
jacobian
277
23k
Optimising Largest Contentful Paint
csswizardry
37
3.3k
Side Projects
sachag
455
42k
The Cost Of JavaScript in 2023
addyosmani
51
8.5k
Making the Leap to Tech Lead
cromwellryan
134
9.4k
Adopting Sorbet at Scale
ufuk
77
9.4k
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-