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
Goを使ってTDDを体験しよう!
chiroruxx
1
240
OCI Network Firewall 概要
oracle4engineer
PRO
1
7.7k
業務自動化プラットフォーム Google Agentspace に入門してみる #devio2025
maroon1st
0
170
"複雑なデータ処理 × 静的サイト" を両立させる、楽をするRails運用 / A low-effort Rails workflow that combines “Complex Data Processing × Static Sites”
hogelog
3
1.5k
フルカイテン株式会社 エンジニア向け採用資料
fullkaiten
0
9k
それでも私はContextに値を詰めたい | Go Conference 2025 / go conference 2025 fill context
budougumi0617
4
1k
Trust as Infrastructure
bcantrill
0
250
LLMアプリケーション開発におけるセキュリティリスクと対策 / LLM Application Security
flatt_security
7
1.6k
【新卒研修資料】LLM・生成AI研修 / Large Language Model・Generative AI
brainpadpr
21
15k
動画データのポテンシャルを引き出す! Databricks と AI活用への奮闘記(現在進行形)
databricksjapan
0
120
タスクって今どうなってるの?3.14の新機能 asyncio ps と pstree でasyncioのデバッグを (PyCon JP 2025)
jrfk
1
180
Go Conference 2025: GoのinterfaceとGenericsの内部構造と進化 / Go type system internals
ryokotmng
3
560
Featured
See All Featured
RailsConf & Balkan Ruby 2019: The Past, Present, and Future of Rails at GitHub
eileencodes
140
34k
Learning to Love Humans: Emotional Interface Design
aarron
274
40k
What's in a price? How to price your products and services
michaelherold
246
12k
Making the Leap to Tech Lead
cromwellryan
135
9.5k
Bootstrapping a Software Product
garrettdimon
PRO
307
110k
Gamification - CAS2011
davidbonilla
81
5.5k
Helping Users Find Their Own Way: Creating Modern Search Experiences
danielanewman
30
2.9k
Responsive Adventures: Dirty Tricks From The Dark Corners of Front-End
smashingmag
252
21k
The Pragmatic Product Professional
lauravandoore
36
6.9k
Building an army of robots
kneath
306
46k
Understanding Cognitive Biases in Performance Measurement
bluesmoon
29
2.6k
Reflections from 52 weeks, 52 projects
jeffersonlam
352
21k
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-