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

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

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

A G E N D A ؆୯ʹ-PPQCBDLΛ঺հ 3FBDUKTͱ-PPQCBDLΛܨ͙
·ͱΊ

؆ ୯ ʹ - P P Q C B
D L Λ ঺ հ

؆ ୯ ʹ - P P Q C B D
L Loopback

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

特徴 ؆ ୯ ʹ - P P Q C B
D L

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

loopback-explorer ؆ ୯ ʹ - P P Q C B
D L

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

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

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

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

ͦͷ΄͔ɺ৭ʑ͋Δ༷ࢠ ؆ ୯ ʹ - 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/ ࢖Θͳͯ͘΋શ͘໰୊ͳ͍ɻ

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

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

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

ͨͩͷ"1*ͳͷͰ'FUDIͯ͠3FEVYͷͤΕ͹͑͑΍Μʜ 3 F B D U K T ͱ

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

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

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

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

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

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

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

αϯϓϧͷ5PEPKTYΛݟͯΈΔ 3 F B D U K T ͱ

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

render() { const {todos} = this.props; return ( <ul> {todos.map(todo
=> ( <li> <input type="checkbox" checked={todo.done} /> {todo.description} </li> ))} </ul> ); } }); todo.jsx

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

࢓૊Έ "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 まとめて

࢓૊Έ "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ぽさがある

· ͱ Ί

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

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

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

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

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

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

More Decks by Tsuyoshi Higuchi

Other Decks in Programming

Featured

Transcript