Slide 1
Slide 1 text
3BJMT 7VFKT
৽αʔϏεΛര։ൃ
2018.05.30
Slide 2
Slide 2 text
ࣗݾհ
● 1990( 5#1
'/
● 2014( *+4$%&!&6
● 2014( ,3 - ."- 2
● 2016( ) 3 - WEB 2
● Ruby on Rails
● Vue.js / Angular / React
● SpringBoot (Java)
● -
70
2
Twitter: @midwhite
Qiita: @takano-h
Slide 3
Slide 3 text
MatchLab
3
Slide 4
Slide 4 text
● 3BJMT 7VFKTΛͬͯʮ.BUDI-BCʯΛ
̍ϲ݄ͰϑϧϦχϡʔΞϧͨ࣌͠ͷ͓
● 3BJMT৽ػೳͷ "DUJWF4UPSBHF ΛΘͳ͔ͬͨ
● 7VFY Λͬͨ࣌ͷίϯϙʔωϯτׂͷ
● 4FSWJDF8PSLFS Ͱϓογϡ௨ػೳΛ࣮ͨ͠
4
Slide 5
Slide 5 text
.&,4 /FA
● )1 -*3 <:?6 !4'"
;@ # #
● (13$ 3%(04+24 >7 G9B>7
RailsCSRF=E5D H
● 8G6C
I
5
Slide 6
Slide 6 text
CPV;
● 2)2 (\Rails 5.2 (API Mode)
○ Rails 5.1 >7
webpacker 5
Vue CLI5
○ CSRF=K=A Y6 protect_from_forgery O:Bearer'2 1SR
EI
● ,01' 1(\Vue.js + Vuex + VueRouter
○ Vue.js: React H;M
.#%(-0*&3LDF BU
Angular (TypeScript) HWJ"+2(X?[
○ Vuex: React Redux HX?!1-/Store*$21
Slide 7
Slide 7 text
ActiveStorage
7
Slide 8
Slide 8 text
● Rails 5.2 PRY
● - !3&+46%=ERY UIQF[ RY
● DB- !3LC =E )6.32]A
○ active_storage_attachments: GK 1*354$6,LC- !3LC /216-
(#`^9
4$6, =E )6.3
○ active_storage_blobs: - !3Z:0'LC =E )6.3
○ 7X ActiveRecord VM
1*3
81*3`^9
-> N+1BaG? eager_loading GK
● - !3=E> DiskS3GCP _N
● ImageMagick @T
OD5WHRYbmini-magick
Slide 9
Slide 9 text
ActiveStorage%*/10 &(
1. rails active_storage:install %)/1)0
2. storage.yml+$/4)0
3. aws-sdk-s3
/1)0
4. application.rb / environments !' +$/1)0
5. model .- has_one_attached / has_many_attached ,"/1)0
6.
#attach(file) # /1)0
9
࠷ߦͰΞοϓϩʔυػೳΛ࣮ྃ
Slide 10
Slide 10 text
● !$ (" url_for ''
& -URL1
● $
5)2,*#% URL./
ActiveStorage
+0354 $
10
Slide 11
Slide 11 text
● 7GB9;
● -/ ,IC@5.$!%@5Disk06>A@5S306
2=8<
● ActiveRecord create / update )"#&1 params[:file]
E H
#(-/&
● ActiveStorage4?JavaScript* '*+D: #(-/&API
3
ActiveStorageF
11
Slide 12
Slide 12 text
ActiveStorageL;
● key JDIFCS336+*"4$+2.1)+. #38
● url_for /3-60'), controller / view 7 9
● CloudFront P Q:,0#5B A?EG
● URL2(#4$+URL
MO
H@U
12
Slide 13
Slide 13 text
"&
● '! ( DBS3
● aws-sdk-s3 $
# %
13
Slide 14
Slide 14 text
Vuex
14
Slide 15
Slide 15 text
-/
15
● *0+ '
-/
● store #&.
prop #&$
1 %" ) !,(2
Slide 16
Slide 16 text
ServiceWorker
16
Slide 17
Slide 17 text
ServiceWorkerPWA
17
●
API
Slide 18
Slide 18 text
● \saTXV
● k?.%75:-Q
● self %;9;. ServiceWorkerGlobalScope p$0(#&
- &*) Service Worker API Ad
● window location document
$0(#&-OK v
● /",!0 18ZidnyloQ
w1+'7rf firebase /",!0H m=Fg
x
● install activate Pj^CE btNIU
● %6+'7_h > Network XHR `L cY
● @)32WJ
1+'7rfR
\
XD
●
Slide 19
Slide 19 text
48
19
● 7/)!% %*
,
.9'3 ☆&2+ ☆
https://app.match-lab.com
● 609-:(;# "6 $☆
https://www.match-lab.com/cafecon/
● 15
☆