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
0
140
モダンフロントエンド技術概論
Webの歴史を振り返りながら
モダンなフロントエンド技術の網羅的に説明し、
その技術戦略上の意義を語りたい
makotunes
June 28, 2021
Tweet
Share
Other Decks in Technology
See All in Technology
M5stackで使用できるpHセンサの開発
shinrinakamura
0
200
コードファーストの考え方。 Amplify Gen2から学ぶAWS次世代のWeb開発体験
yoshiitaka
2
380
How to Lead? Testimonial of a Lead Android Engineer
oleur
1
110
エンジニア候補者向け資料2024.04.24.pdf
macloud
0
3.4k
Tellus の衛星データを見てみよう #mf_fukuoka
kongmingstrap
0
280
コードや知識を組み込む / Incorporate Code and knowledge
ks91
PRO
0
150
Building Dashboards as a Hobby
egmc
0
380
自己改善からチームを動かす! 「セルフエンジニアリングマネージャー」のすゝめ
shoota
6
1k
リテール金融(キャッシュレス・ネット銀行・ネット証券)の競争環境と経済圏
8maki
0
1.6k
MLOpsの「壁」を乗り越える、LINEヤフーの Data Quality as Code
lycorptech_jp
PRO
8
630
Cracking the KubeCon CfP
inductor
2
270
Rustで「プリズモイダル法」を利用して「土量計算」をガチでやる
nokonoko1203
1
310
Featured
See All Featured
A designer walks into a library…
pauljervisheath
201
23k
Designing for humans not robots
tammielis
247
25k
Infographics Made Easy
chrislema
238
18k
CoffeeScript is Beautiful & I Never Want to Write Plain JavaScript Again
sstephenson
155
14k
Large-scale JavaScript Application Architecture
addyosmani
504
110k
Ruby is Unlike a Banana
tanoku
96
10k
Intergalactic Javascript Robots from Outer Space
tanoku
266
26k
Building a Scalable Design System with Sketch
lauravandoore
457
32k
BBQ
matthewcrist
80
8.8k
How to Create Impact in a Changing Tech Landscape [PerfNow 2023]
tammyeverts
20
1.6k
YesSQL, Process and Tooling at Scale
rocio
165
13k
Happy Clients
brianwarren
92
6.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-