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

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

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

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
   

   View Slide

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
   

   View Slide

3. A G E N D A
   ؆୯ʹ-PPQCBDLΛ঺հ
   
   
   3FBDUKTͱ-PPQCBDLΛܨ͙
   
   
   ·ͱΊ
   
   
   

   View Slide

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

   View Slide

5. ؆ ୯ ʹ - P P Q C B D L
   Loopback
   

   View Slide

6. 4USPOH-PPQࣾʢ*#.ʣͷ/PEFKT8FC'SBNFXPSL
   ؆ ୯ ʹ - P P Q C B D L
   $ npm i -g strongloop
   loopback.io
   ͪ͜Β͔Βೖख
   

   View Slide

7. 特徴
   ؆ ୯ ʹ - P P Q C B D L
   

   View Slide

8. ந৅ԽϞσϧ͔Β3&45"1*ΛࣗಈͰੜ੒
   ؆ ୯ ʹ - P P Q C B D L
   MPPQCBDLFYQMPSFS͕૊Έࠐ·Ε͍ͯΔͷͰ3&45"1*
   ͷ"1*υΩϡϝϯτͷੜ੒΋΍ͬͯ͘ΕΔɻ
   MODEL REST API
   POST
   GET
   PUT
   DELETE
   HEAD
   

   View Slide

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

   View Slide

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

    View Slide

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

    View Slide

12. loopback-explorer
    ؆ ୯ ʹ - P P Q C B D L
    モックデータくらいなら
    非エンジニアでも登録できる
    

    View Slide

13. $-*Ͱ࡞͍͚ͬͯΔͷͰׂͱ؆୯
    ؆ ୯ ʹ - P P Q C B D L
    $ slc loopback
    ΞϓϦέʔγϣϯΛͭ͘ΔίϚϯυ
    ଞͷίϚϯυ͸ίνϥ͔Β‎ https://docs.strongloop.com/x/eYk6
    

    View Slide

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

    View Slide

15. ؆ ୯ ʹ - P P Q C B D L
    ֎෦"1*ͳͲΛσʔλιʔεͱͯ͠໪࿦ѻ͑ΔͷͰʜ
    ϑϩϯτΤϯυαʔόతͳѻ͍͕Ͱ͖Δ
    

    View Slide

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/
    ࢖Θͳͯ͘΋શ͘໰୊ͳ͍ɻ
    

    View Slide

17. ؆ ୯ ʹ - P P Q C B D L
    ϓϩτλΠϓ։ൃʹ͸ϥΠτʹಋೖ
    Ͱ͖ͯྑ͍ҹ৅
    

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

21. ਖ਼௚ɺ3FEVYͱ͔
    ϓϩτλΠϐϯάʹ͸ॏ͍ʜ
    UIデザイナーの自分からすると、
    3 F B D U K T ͱ - P P Q C B D L Λ ܨ ͙
    勿論、ちゃんと開発するってなったらやるYo!
    

    View Slide

22. "1*ΛαΫͬͱੜ΍ͯ͠
    ࣮૷ʹΑΓ͍ۙΠϯλϥΫγϣϯΛ
    ϓϩτλΠϐϯάͰ࣮ݱ͍ͨ͠
    3 F B D U K T ͱ - P P Q C B D L Λ ܨ ͙
    

    View Slide

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

    View Slide

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

    View Slide

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 Λ ܨ ͙
    

    View Slide

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 Λ ܨ ͙
    

    View Slide

27. 3FBDU-PPQCBDL͸ʜ
    Inspired by Facebook's Relay.
    Relayにインスパイヤされている
    3 F B D U K T ͱ - P P Q C B D L Λ ܨ ͙
    

    View Slide

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

    View Slide

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 (
    
    {todos.map(todo => (
    todo.jsx
    

    View Slide

30. render() {
    const {todos} = this.props;
    return (
    
    {todos.map(todo => (
    
    
    {todo.description}
    
    ))}
    
    );
    }
    });
    todo.jsx
    

    View Slide

31. );
    }
    });
    Todos = createDataLoader(Todos, {
    queries: [{
    endpoint: 'todos',
    filter: {
    where: {archived: false}
    }
    }]
    });
    export default Todos;
    todo.jsx
    

    View Slide

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
    まとめて
    

    View Slide

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ぽさがある
    

    View Slide

34. · ͱ Ί
    
    

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

38. αΫͬͱ࡞ΔͳΒ
    3FBDU-PPQCBDL͍͍͔΋
    3 F B D U K T ͱ - P P Q C B D L Λ ܨ ͙
    

    View Slide