Slide 1
Slide 1 text
3BJMT7VFKT
৽αʔϏεΛര։ൃ
2018.05.30
Slide 2
Slide 2 text
ࣗݾհ
● 1990( 5#1
'/
● 2014( *+4$%&!&6
● 2014( ,3- ."-2
● 2016( ) 3- WEB2
● 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
● 3BJMT7VFKTΛͬͯʮ.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=E5DH
● 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'21SR
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%=ERYUIQF[RY
● DB-!3LC=E)6.32]A
○ active_storage_attachments: GK1*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]
EH
#(-/&
● ActiveStorage4?JavaScript*'*+D:#(-/&API
3
ActiveStorageF
11
Slide 12
Slide 12 text
ActiveStorageL;
● keyJDIFCS336+*"4$+2.1)+. #38
● url_for /3-60'), controller / view 79
● CloudFront PQ:,0#5BA?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(#&-OKv
● /",!0 18ZidnyloQ
w1+'7rf firebase /",!0H m=Fg
x
● install activate Pj^CEbtNIU
● %6+'7_h> Network XHR `LcY
● @)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
☆