Tweet
Tweet

Slide 1

Slide 1 text

ېسɿReactjs֎ͰͷDOMૢ࡞ 2016.08.20 @rito https://github.com/chimame/20160820_lt

Slide 2

Slide 2 text

ࣗݾ঺հ

Slide 3

Slide 3 text

–Lezard VALETHɹϨβʔυɾϰΝϨε “ېسΛ൜ͯ͠΋չ͍͸ແ͍ɻ ͦΕ͚ͩͷ૝͍͕͔֬ʹ༗Δɻ য͕ΕΔ͜ͷڳͷࢥ͍ΛڰؾͱݺͿͳΒ͹ɺԺ΍ ͔ͳ࿀͔͠஌Β͵ݾͷෆጫΛ୰͕͍͍͘ʂ” ήʔϜɿϰΝϧΩϦʔϓϩϑΝΠϧΑΓ (c)2013 SQUARE ENIX CO., LTD.All Rights Reserved.

Slide 4

Slide 4 text

ྫ͑͹͜Μͳཁ๬Λ࣮૷͢Δ ېسΛ൜ͯ͠΋չ͍͸ແ͍ɻ
ͦΕ͚ͩͷ૝͍͕͔֬ʹ༗Δɻ
য͕ΕΔ͜ͷڳͷࢥ͍ΛڰؾͱݺͿͳΒ͹ɺԺ΍͔ͳ ࿀͔͠஌Β͵ݾͷෆጫΛ୰͕͍͍͘ʂ จࣈΛ্ԼʹࣗಈεΫϩʔϧ͍ͤͨ͞ɻແݶεΫϩʔϧͰද͍ࣔͤͨ͞ɻ ͨͩ͠ɺHTML5Ͱ͸ഇࢭ͕༧ఆ͞Ε͍ͯ·͢ʂ࢖༻͠ͳ͍Α͏ʹʂʂ marqueeλάʹ͸པΕͳ͍ͰͷjQueryͷ ϓϥάΠϯͰ͍͍ײ͡ͷΞχϝʔγϣϯͳ ͍͔ͳʁɹ㱺

Slide 5

Slide 5 text

͍͍ײ͡ͷϓϥάΠϯΛൃݟʂ ېسͱ͸஌Βͣʹ…

Slide 6

Slide 6 text

࣮૷ import React, { Component } from 'react' import $ from 'jquery' import 'jquery.marquee' export default class message extends Component { componentDidUpdate() { $("div.message-body").marquee({direction: 'up'}) $("div.message-body").marquee('resume') } render() { const { message } = this.props return (

{message}

Slide 7

Slide 7 text

ॳظදࣔ͸Ͱ͖ͨɻ ͨͩɺ࠶औಘͯ͠΋දࣔϝοηʔδ͕มΘͬͯ΋ը໘ ͕มΘΒͳ͍ɻ αʔόʢAPIʣ͔Βͷऔಘ͸͜Μͳײ͡

Slide 8

Slide 8 text

࣮ࡍʹग़ྗ͞Ε͍ͯΔHTMLιʔεΛݟͯΈΔͱ… ͋ΕʁͳΜ͔஌Βͳ͍λά͕෇͍͍ͯΔɻ jQuery.Marquee͕ΞχϝʔγϣϯͷͨΊʹ௥Ճ͍ͯ͠Δɻ

Slide 9

Slide 9 text

ݪҼ ReactjsͰ͸ग़ྗͨ࣌͠ͷDOMΛ͍֮͑ͯΔɻ ࠶ඳը͢Δ࣌΋ग़ྗͨ͠DOM͔Βมߋ෦෼͚ͩΛ࡟আͯ͠৽ͨʹDOMΛग़ྗ͢Δɻ ࠓճͷྫͰ͸ɺjQuery.Marquee͕DOMΛॻ͖׵͑ͯ͠·ͬͨͨΊʹൃੜɻ https://facebook.github.io/react/tips/use-react-with-other-libraries.html ରॲ Ҋ̍ɿ jQuery.Marqueeͷ࢖༻Λ΍Ίɺ࣮૷Λม͑Δɻ ɹˠjQueryΞχϝʔγϣϯͳΒOK Ҋ̎ɿ Reactjsͷ࠶ඳըΛࢭΊΔɻ ɹˠ͜ͷҊ͸࠶ඳը͕ߦ͑ͳ͘ͳΔɻ ཁ݅ͱͷ݉Ͷ߹͍͕ͩɺ”ͦͷ̎”Ͱ͍͍ͳΒ…

Slide 10

Slide 10 text

–FreyaɹϑϨΠ “ͤΊͯࢲͷखͰ͋ͳͨΛ຾Γʹ͔ͭͤͯ͋͛ΔΘɻ” ήʔϜɿϰΝϧΩϦʔϓϩϑΝΠϧΑΓ (c)2013 SQUARE ENIX CO., LTD.All Rights Reserved.

Slide 11

Slide 11 text

࣮૷ʢ࠶ඳըఀࢭ൛ʣ import React, { Component } from 'react' import $ from 'jquery' import 'jquery.marquee' export default class message extends Component { componentDidUpdate() { $("div.message-body").marquee({direction: 'up'}) $("div.message-body").marquee('resume') } shouldComponentUpdate() { return false } render() { const { message } = this.props return (
࠶ඳըΛͤ͞ͳ͍Α͏ʹ͢Δ͜ͱ͕Մೳ

Slide 12

Slide 12 text

·ͱΊ • Reactjs֎ͰDOMΛ৮Δͱ࠶ඳըͰ͖ͳ͍ͱߟ͑Δɻ • Reactjs֎ͰDOMΛ৮Δ৔߹ ͸ɺ”componentDidMount"౳ͷඳըޙͰ৮Δ͜ͱɻ • ࠶ඳըΛʮߦ͏ʯ͔ʮߦΘͳ͍͔ʯ൑ఆ͢Δ” shouldComponentUpdate”ͱ͍͏Lifecycle͕ଘࡏ͢ Δɻ ͳͷͰ຤୺ͷཁૉҎ֎Ͱ͸͠ͳ͍Α͏ʹʂʂ

Slide 13

Slide 13 text

͓·͚ Marquee͸͜Μͳײ͡Ͱ࡞ͬͯΈ·ͨ͠ɻʢڵຯ͋Ε͹ʣ https://gist.github.com/chimame/ 99acd1836992675169f2c705d1fe3209