Upgrade to Pro — share decks privately, control downloads, hide ads and more …

ReactとLoopbackことはじめ / React.js meets Loopback

ReactとLoopbackことはじめ / React.js meets Loopback

LoopbackのライトなREST API開発環境とReact.jsを使ってサクっとするにはというような内容です。

こちらは、React.js meet up #3のLTで発表したスライドです。
http://reactjs-meetup.connpass.com/event/26229/

332a3cac4844d33179de6389b9d5f186?s=128

Tsuyoshi Higuchi

February 23, 2016
Tweet

Transcript

  1. React.js R e a c t と L o o

    p b a c k こ と は じ め meets Loopback R e a c t と L o o p b a c k こ と は じ め / R e a c t . j s m e e t L o o p b a c k
  2. P R O F I L E 樋 口 剛

    T S U Y O S H I H I G U C H I S e r v i c e D e s i g n e r & U I D e v e l o p e r ࠃ಺6*σβΠϯϑΝʔϜ(PPEQBUDIɺχϡʔεαʔϏε(VOPTZΛܦͯϑϦʔϥϯεத ελʔτΞοϓ΍৽͍͠ϓϩμΫτͷ αʔϏεσβΠϯͱઃܭɾ࣮૷·Ͱߦ͍ͬͯ·͢ɻ @tyshgc
  3. A G E N D A ؆୯ʹ-PPQCBDLΛ঺հ   3FBDUKTͱ-PPQCBDLΛܨ͙

      ·ͱΊ  
  4.  ؆ ୯ ʹ - P P Q C B

    D L Λ ঺ հ 
  5. ؆ ୯ ʹ - P P Q C B D

    L Loopback
  6. 4USPOH-PPQࣾʢ*#.ʣͷ/PEFKT8FC'SBNFXPSL ؆ ୯ ʹ - P P Q C B

    D L $ npm i -g strongloop loopback.io ͪ͜Β͔Βೖख
  7. 特徴 ؆ ୯ ʹ - P P Q C B

    D L
  8. ந৅ԽϞσϧ͔Β3&45"1*ΛࣗಈͰੜ੒ ؆ ୯ ʹ - P P Q C B

    D L MPPQCBDLFYQMPSFS͕૊Έࠐ·Ε͍ͯΔͷͰ3&45"1* ͷ"1*υΩϡϝϯτͷੜ੒΋΍ͬͯ͘ΕΔɻ MODEL REST API POST GET PUT DELETE HEAD
  9. loopback-explorer ؆ ୯ ʹ - P P Q C B

    D L
  10. loopback-explorer ؆ ୯ ʹ - P P Q C B

    D L
  11. loopback-explorer ؆ ୯ ʹ - P P Q C B

    D L
  12. loopback-explorer ؆ ୯ ʹ - P P Q C B

    D L モックデータくらいなら 非エンジニアでも登録できる
  13. $-*Ͱ࡞͍͚ͬͯΔͷͰׂͱ؆୯ ؆ ୯ ʹ - P P Q C B

    D L $ slc loopback ΞϓϦέʔγϣϯΛͭ͘ΔίϚϯυ ଞͷίϚϯυ͸ίνϥ͔Β‎ https://docs.strongloop.com/x/eYk6
  14. σʔλιʔεͱϞσϧͷ࿈ܞΛ͍͍ײ͡ʹ ؆ ୯ ʹ - P P Q C B

    D L %#΍֎෦"1*ͳͲͷσʔλιʔεʹؔ͢ΔίωΫλʔ ΞυΦϯ͕͋Δ MODEL DATA SOURCE DATABASE REST API MongoDB MySQL PostgreSQL Redis
  15. ؆ ୯ ʹ - P P Q C B D

    L ֎෦"1*ͳͲΛσʔλιʔεͱͯ͠໪࿦ѻ͑ΔͷͰʜ ϑϩϯτΤϯυαʔόతͳѻ͍͕Ͱ͖Δ
  16. ͦͷ΄͔ɺ৭ʑ͋Δ༷ࢠ ؆ ୯ ʹ - P P Q C B

    D L  w"OESPJE4%,΍J044%,͕༻ҙ͞Εͯ͋Δ  w1VTI௨஌΍αʔυύʔςΟϩάΠϯͳͲ΋༻ҙ͞Ε͍ͯΔ "1*&YQMPSFS 0"VUI 1VTI/PUJpDBUJPOT 4UPSBHF 5IJSEQBSUZMPHJO 1BTTQPSU w4USPOH-PPQ"SDͱ͍͏(6*πʔϧ΋͋Δ https://strongloop.com/node-js/arc/ ࢖Θͳͯ͘΋શ͘໰୊ͳ͍ɻ
  17. ؆ ୯ ʹ - P P Q C B D

    L ϓϩτλΠϓ։ൃʹ͸ϥΠτʹಋೖ Ͱ͖ͯྑ͍ҹ৅
  18.  3 F B D U  K T ͱ

    - P P Q C B D L Λ ܨ ͙ 
  19. "1*͕-PPQCBDLͰαΫͬͱ༻ҙͰ͖ΔͷͰ ͋ͱ͸3FBDUKTͱ࿈ܞ͢Δ͚ͩ 3 F B D U  K T

    ͱ - P P Q C B D L Λ ܨ ͙
  20. ͨͩͷ"1*ͳͷͰ'FUDIͯ͠3FEVYͷͤΕ͹͑͑΍Μʜ 3 F B D U  K T ͱ

    - P P Q C B D L Λ ܨ ͙
  21. ਖ਼௚ɺ3FEVYͱ͔ ϓϩτλΠϐϯάʹ͸ॏ͍ʜ UIデザイナーの自分からすると、 3 F B D U  K

    T ͱ - P P Q C B D L Λ ܨ ͙ 勿論、ちゃんと開発するってなったらやるYo!
  22. "1*ΛαΫͬͱੜ΍ͯ͠ ࣮૷ʹΑΓ͍ۙΠϯλϥΫγϣϯΛ ϓϩτλΠϐϯάͰ࣮ݱ͍ͨ͠ 3 F B D U  K

    T ͱ - P P Q C B D L Λ ܨ ͙
  23. 3 F B D U  K T ͱ -

    P P Q C B D L Λ ܨ ͙ ͍͍ͷϞϊ͕͋ͬͨ
  24. 3 F B D U  K T ͱ -

    P P Q C B D L Λ ܨ ͙ React-Loopback
  25. $ npm i react-loopback github.com/diogodoreto/react-loopback ͪ͜Β͔Βೖख $ npm i es6-promise

    whatwg-fetch 3 F B D U  K T ͱ - P P Q C B D L Λ ܨ ͙
  26. 3FBDU-PPQCBDL͸ʜ A small library to connect React components to data

    in a LoopBack API without the need for Flux, Redux, etc. ReduxなどのFluxアーキテクチャを必要としない Loopbackの生やすREST APIに繋ぐライブラリ 3 F B D U  K T ͱ - P P Q C B D L Λ ܨ ͙
  27. 3FBDU-PPQCBDL͸ʜ Inspired by Facebook's Relay. Relayにインスパイヤされている 3 F B D

    U  K T ͱ - P P Q C B D L Λ ܨ ͙
  28. αϯϓϧͷ5PEPKTYΛݟͯΈΔ 3 F B D U  K T ͱ

    - P P Q C B D L Λ ܨ ͙
  29. import React, { PropTypes } from 'react'; import { createDataLoader

    } from 'react-loopback'; let Todos = React.createClass({ propTypes: { todos: PropTypes.array }, render() { const {todos} = this.props; return ( <ul> {todos.map(todo => ( todo.jsx
  30. render() { const {todos} = this.props; return ( <ul> {todos.map(todo

    => ( <li> <input type="checkbox" checked={todo.done} /> {todo.description} </li> ))} </ul> ); } }); todo.jsx
  31. ); } }); Todos = createDataLoader(Todos, { queries: [{ endpoint:

    'todos', filter: { where: {archived: false} } }] }); export default Todos; todo.jsx
  32. ࢓૊Έ "1*ͷ&OE1PJOUΛ ·ͱΊͯऔΓʹߦ͘ 'FUDI8SBQQFS$PNQPOFOU props 3 F B D U

     K T ͱ - P P Q C B D L Λ ܨ ͙ DataLoader EndPoint EndPoint Component Queries Request API まとめて
  33. ࢓૊Έ "1*ͷ&OE1PJOUΛ·ͱΊͯ औΓʹߦ͘ 'FUDI8SBQQFS$PNQPOFOU props 3 F B D U

     K T ͱ - P P Q C B D L Λ ܨ ͙ DataLoader EndPoint EndPoint Component Queries Request API まとめて 確かに Relayぽさがある
  34.  · ͱ Ί 

  35. · ͱ Ί SFBDUMPPQCBDLͷਓ΋ݴ͍ͬͯΔ௨Γ3FMBZతͳ Ξϓϩʔνɻ MPPQCBDLΛ͢Ͱʹ࠾༻͍ͯͨ͠Γࠓޙ࠾༻༧ఆ͕͋Δ ৔߹͸ྑ͍͔΋͠Εͳ͍ɻ !

  36. · ͱ Ί ΋ͪΖΜ3FBDU-PPQCBDLͰͳͯ͘΋ɺ3FEVY΍'MVY ͱͷڞଘ΋౰ͨΓલʹͰ͖Δɻ ϓϩτλΠϓʹ͸-PPQCBDL͸͔ͳΓ͍͍͔΋ײɻ !

  37. · ͱ Ί -PPQCBDLͰͷ։ൃ͸ϋοΧιϯ΍ϓϩτλΠϓͷ ։ൃʹ޲͍͍ͯΔͳͱࢥ͍·ͨ͠ɻ ॴײ

  38. αΫͬͱ࡞ΔͳΒ 3FBDU-PPQCBDL͍͍͔΋ 3 F B D U  K T

    ͱ - P P Q C B D L Λ ܨ ͙