Slide 1
Slide 1 text
6TJOH'JSFCBTF3FBMUJNF%BUBCBTFCZ3FBDU/BUJWF
4"8"
/PSJIJLPຊܦࡁ৽ฉࣾσδλϧฤہ
3FBDU/BUJWFBOE'JSFCBTF
Slide 2
Slide 2 text
2
4"8"
/PSJIJLP
%FWFMPQBOE1MBO/JLLFJ0OMJOF
%KT3FBDU/BUJWF
"CPVUNF
Slide 3
Slide 3 text
'JSFCBTF3FBMUJNF%BUBCBTF
3
Slide 4
Slide 4 text
4
#BB4
σʔλߋ৽͕Ϋϥυʹอଘ͞ΕϦΞϧλΠϜͰಉظ
Ͱ͖Δ
'JSFCBTF3FBMUJNF%BUBCBTF
IUUQTZPVUVCF6BF.EW6Q"
Slide 5
Slide 5 text
3FBDU/BUJWF
5
Slide 6
Slide 6 text
6
+BWB4DSJQU &4
ͰJ04"OESPJEΞϓϦ͕ॻ͚Δ
3FBDU/BUJWF
IUUQTGBDFCPPLHJUIVCJPSFBDUOBUJWF
Slide 7
Slide 7 text
7
3FBDU/BUJWF4IPXDBTF
IUUQTGBDFCPPLHJUIVCJPSFBDUOBUJWFTIPXDBTFIUNM
Slide 8
Slide 8 text
-FU`TTUBSU
8
Slide 9
Slide 9 text
9
'PMMPXJOHUIJT1PTU
IUUQTpSFCBTFHPPHMFCMPHDPNUIFCFHJOOFSTHVJEFUPSFBDUOBUJWFBOE@IUNM
Slide 10
Slide 10 text
10
OQNͰ'JSFCBTFΛΠϯετʔϧ
'JSFCBTFTFUVQ
KTϑΝΠϧͰಡΈࠐΈ
const Firebase = require('firebase');
npm install firebase --save
Slide 11
Slide 11 text
11
%FDMBSF%BUB4PVSDF
1 constructor(props) {
2 super(props);
3 this.state = {
4 dataSource: new ListView.DataSource({
5 rowHasChanged: (row1, row2) => row1 !== row2,
6 })
7 };
8 this.itemsRef = new Firebase("/items");
9 }
Slide 12
Slide 12 text
12
*OJUJBMJ[FMJTUXIFOUIFDPNQPOFOUIBTpSTUCFFOSFOEFSFE
1 listenForItems(itemsRef) {
2 itemsRef.on('value', (snap) => {
3 // get children as an array
4 var items = [];
5 snap.forEach((child) => {
6 items.push({
7 title: child.val().title,
8 post_time: child.val().post_time,
9 userID: child.val().userID,
10 _key: child.key()
11 });
12 });
13 this.setState({
14 dataSource: this.state.dataSource.cloneWithRows(items)
15 });
16 });
17 }
18
19 componentDidMount() {
20 this.listenForItems(this.itemsRef);
21 }
Slide 13
Slide 13 text
13
DPNQPOFOUT
1 render() {
2 return (
3
4
8
9 );
10 }
Slide 14
Slide 14 text
14
"EE*UFN
1 this.itemsRef.push({
2 title: this.tmpText,
3 post_time: Firebase.ServerValue.TIMESTAMP,
4 userID: userID
5 });
Slide 15
Slide 15 text
15
3FNPWF*UFN
1 _renderItem(item) {
2 const onPress = () => {
3 AlertIOS.prompt(
4 'Delete',
5 null,
6 [
7 {text: 'Delete', onPress: (text) =>
this.itemsRef.child(item._key).remove()},
8 {text: 'Cancel', onPress: (text) => console.log('Cancel')}
9 ],
10 'default'
11 );
12 };
13 return (
14
15 );
16 }
Slide 16
Slide 16 text
$PODMVTJPO
16
Slide 17
Slide 17 text
17
3FBDU/BUJWFͰͷ'JSFCBTFͷه๏ʹετϨεͳ͍
ʢ·ͩʣ
3FBDUͷTUBUFཧͱɺ'JSFCBTFͷಉظ૬ੑ͕ྑͦ͞͏
$PODMVTJPO
“This is where React fits perfectly with Firebase.
Because the Firebase database synchronizes
application state across multiple devices, and
React efficiently re-renders application state
changes.”
Slide 18
Slide 18 text
18
OBUJWF4%,ΛΠϯετʔϧͯ͠ͳ͍
A4MPX"OJNBUJPOTAϞʔυͩͱ
8FC7JFX͕ݟΕΔ
͓ͦΒ͘+4Ͱಈ͍ͯΔ
)PXUPXPSL
Slide 19
Slide 19 text
IUUQTOJLLFJDPNTBJZP
+PJOVT%
19