高野さん_Rails 5.2 + Vue.js 新サービスを爆速開発.pdf

Transcript

1. 3BJMT
   
   
   7VFKT ৽αʔϏεΛര଎։ൃ 2018.05.30
2. ࣗݾ঺հ • 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
3.  
   MatchLab 3
4. 
    • 3BJMT
   
   
   7VFKT
   Λ࢖ͬͯʮ.BUDI-BCʯΛ ̍ϲ݄ͰϑϧϦχϡʔΞϧͨ࣌͠ͷ͓࿩ • 3BJMT
   
   ৽ػೳͷ "DUJWF4UPSBHF Λ࢖Θͳ͔ͬͨ࿩ • 7VFY Λ࢖ͬͨ࣌ͷίϯϙʔωϯτ෼ׂͷ࿩ • 4FSWJDF8PSLFS Ͱϓογϡ௨஌ػೳΛ࣮૷ͨ͠࿩ 4
5. .&,4/FA • )1 -*3 <:?6 !4'"  ;@## • (13$3%(04+24>7 
   G9B>7   RailsCSRF=E5D H  •  
   8G6C I 5
6. 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<Q ◦ Facebook OAuth01GN TZ 8@SDKGraph API9I4  6
7. ActiveStorage
    7
8. • Rails 5.2 PRY • -!3&+46%=ERYUIQF[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> Disk
   S3
   GCP_N • ImageMagick @T OD5WHRYbmini-magick<Ec ;\  mini-magick  Rails 6 *-"3+JS  555 ActiveStoraged 8
9. 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 ࠷୹ߦͰΞοϓϩʔυػೳΛ࣮૷׬ྃ
10. • !$(" url_for '' &-URL
    1 • $   5)2,*#%URL
    ./  ActiveStorage +0354$  10
11. • 7GB9; • -/ ,IC@5.$!%@5Disk06
    >A@5S306
      2=8< • ActiveRecord  create / update )"#&1 params[:file]  E H  #(-/&  • ActiveStorage4?JavaScript*'*+D:#(-/&API 3 ActiveStorageF 11
12. ActiveStorageL;  • keyJD
    IFCS336+*"4$+2.1)+. #38 • url_for /3-60'), controller / view 7 9 • CloudFront P Q:
    ,0#5BA?EG  • URL<R TN. #3!$&% 
      5=SK>2(#4$+URL MO H@U 12
13. "& • '
    !  ( DBS3   • aws-sdk-s3 $ # % 13
14. Vuex 
         14
15. -/ 15 • *0+ ' -/  • store #&. prop #&$ 1 %" )!,(2
    
16. ServiceWorker  
     16
17. ServiceWorkerPWA 17 •     
     API
18. • \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 `LcY • @)32WJ 1+'7rfR \ XD  • <S2;4euqB  manifest.json M]G[  XV 18
19. 48 19 • 7/)!% %*  , .9'3 ☆&2+ ☆ https://app.match-lab.com • 609-:(;#"6$
    ☆ https://www.match-lab.com/cafecon/ • 15
      ☆