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
OSSで50の競合と戦うためにやったこと
yamadashy
3
930
Okta Identity Governanceで実現する最小権限の原則 / Implementing the Principle of Least Privilege with Okta Identity Governance
tatsumin39
0
160
SQLAlchemy の select(User).where(User.id =="123") を理解してみる/sqlalchemy deep dive
3l4l5
1
170
Sansan Engineering Unit 紹介資料
sansan33
PRO
1
3k
Introduction to Sansan for Engineers / エンジニア向け会社紹介
sansan33
PRO
5
43k
serverless team topology
_kensh
2
130
AIとともに歩んでいくデザイナーの役割の変化
lycorptech_jp
PRO
0
800
「魔法少女まどか☆マギカ Magia Exedra」の多様なバトルの開発を柔軟かつ効率的に実現するためのPure C#とUnityの分離について
gree_tech
PRO
0
240
アウトプットから始めるOSSコントリビューション 〜eslint-plugin-vueの場合〜 #vuefes
bengo4com
3
200
AIエージェント入門 〜基礎からMCP・A2Aまで〜
shukob
1
150
「最速」で Gemini CLI を使いこなそう! 〜Cloud Shell/Cloud Run の活用〜 / The Fastest Way to Master the Gemini CLI — with Cloud Shell and Cloud Run
aoto
PRO
0
150
AI時代の開発を加速する組織づくり - ブログでは書けなかったリアル
hiro8ma
1
240
Featured
See All Featured
実際に使うSQLの書き方 徹底解説 / pgcon21j-tutorial
soudai
PRO
190
55k
Easily Structure & Communicate Ideas using Wireframe
afnizarnur
194
16k
RailsConf 2023
tenderlove
30
1.3k
Faster Mobile Websites
deanohume
310
31k
The Invisible Side of Design
smashingmag
302
51k
YesSQL, Process and Tooling at Scale
rocio
173
15k
How STYLIGHT went responsive
nonsquared
100
5.8k
Site-Speed That Sticks
csswizardry
13
920
Why You Should Never Use an ORM
jnunemaker
PRO
59
9.6k
The Web Performance Landscape in 2024 [PerfNow 2024]
tammyeverts
10
880
Building Better People: How to give real-time feedback that sticks.
wjessup
369
20k
Navigating Team Friction
lara
190
15k
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-