Tweet
Tweet

Slide 1

Slide 1 text

SFBDUSBJMTͰ41" 443Λ࣮ݱ͢Δ 3BJMT%FWFMPQFST.FFUVQ%BZ !UUBOJNJDIJ୩ಓ૑ 5TVLVSV5BOJNJDIJ

Slide 2

Slide 2 text

No content

Slide 3

Slide 3 text

IUUQTTQFBLFSEFDLDPNUUBOJNJDIJZBNBHPZB

Slide 4

Slide 4 text

$%/ͬΆ͍෦෼ʹ͍ͭͯ࿩ͨ͠

Slide 5

Slide 5 text

No content

Slide 6

Slide 6 text

wͳͷͰࠓ೔͸41"ͬΆ͍෦෼ʹ͍ͭͯ࿩͠·͢ wຊ౰͸4FSWJDF8PSLFSͬΆ͍෦෼ʹ͍ͭͯ΋ ࿩͔͚ͨͬͨ͠Ͳɺࠓ೔͸࿩࣌ؒ͢ͳͦ͞͏ w·ͨࠓ౓ɺผͷ৔Ͱൃද͠·͢

Slide 7

Slide 7 text

લఏ஌ࣝ   w 3FBDU 3FEVYͷ஌ࣝΛඞཁͱ͢Δղઆ͸ɺ Ͱ͖Δ͚ͩޙ൒ʹूΊ·ͨ͠ w લ൒͸ϑϩϯτͷ஌͕ࣝͳͯ͘΋ʢ͋Δఔ౓ʣ ෼͔Δ಺༰ͷ͸ͣ

Slide 8

Slide 8 text

ࣗݾ঺հ   w !UUBOJNJDIJ୩ಓ૑ 5TVLVSV5BOJNJDIJ  w ϑϦʔϥϯε w 3VCZPO3BJMT %FW0QT 'SPOUFOE w SFBDUSBJMTϝϯςφʔ

Slide 9

Slide 9 text

ཁ݅   w 3FBDU 3FEVYͰ41"Λ։ൃ͢Δ w αʔόʔαΠυ͸3BJMT w 443΋ඞਢ

Slide 10

Slide 10 text

࣮ݱ͍ͨ͜͠ͱ   w ΧδϡΞϧʹ41"Λ࡞ΕΔΑ͏ʹ͍ͨ͠ w গͳ͍ίʔυྔͰ࣮ݱ͍ͨ͠ w 3FBDUͱ3BJMTͷΑΓྑ͍ڞଘ w ϑϩϯτΤϯυΤϯδχΞ͸3BJMTΛ
 ʢ΄ͱΜͲʣҙࣝ͠ͳ͍͍ͯ͘ w αʔόʔΠϯϑϥΤϯδχΞʹͱͬͯ͸ɺ
 ;ͭ͏ͷ3BJMTΞϓϦέʔγϣϯ

Slide 11

Slide 11 text

;ͭ͏ͷ3BJMTΞϓϦέʔγϣϯ   w ϞϊϦγοΫͳ3BJMTΞϓϦέʔγϣϯ͕
 ͍ͪ͹Μӡ༻͠΍͍͢ w 3FBDUͱ3BJMT͕ૄ݁߹Ͱ͋Δ͜ͱͱɺ
 ΞϓϦέʔγϣϯͱͯ͠͸ϞϊϦγοΫͰ͋ Δ͜ͱΛཱ྆͢Δ w ίʔυϕʔεͷ݈શ͞ͱ։ൃ޻਺અ໿Λ
 ཱ͍྆ͨ͠

Slide 12

Slide 12 text

#''ʁ/FYUKTʁ   w େن໛ͳ৔߹͸#''ͱ͔/FYUKTྑͦ͞͏ w ͪΐͬͱͨ͠΢ΣϒΞϓϦέʔγϣϯʹ͸
 ͓͓͛͞ʹࢥ͑ͨ w ؂ࢹ͕ඞཁͳϓϩηεΛ૿΍ͨ͘͠ͳ͍ w ϞϊϦγοΫʹ࡞ͬͯ։ൃޮ཰Λ্͍͛ͨ

Slide 13

Slide 13 text

SFBDUSBJMT   w SFBDUKTSFBDUSBJMT w 3FBDUͱ3BJMTͷ*OUFHSBUJPOΛͯ͘͠Ε ΔHFN

Slide 14

Slide 14 text

SFBDUSBJMTͰ41"ʁ   w SFBDUSBJMTͰ41"ͬͯ࡞ΕΔͷʁ w 3&"%.&ʹ͸طଘͷ3BJMTΞϓϦέʔγϣϯ ͷ7JFXʹ$PNPQOFOUΛࠩ͠ࠐΉΑ͏ͳ࢖͍ ํ͕ओʹ঺հ͞Ε͍ͯΔ w ࢖͍ํ࣍ୈͰ͸41"ʹ͓͍ͯ443͢Δ͜ͱʹ ΋ར༻Ͱ͖Δ

Slide 15

Slide 15 text

<%= react_component('HelloMessage', name: 'John') %> render component: 'TodoList', props: { todos: @todos } $POUSPMMFS3FOEFSFS 7JFX)FMQFS 41"ʹ͓͍ͯ443͢Δʹ͸
 SFOEFSDPNQPOFOUΛ࢖͏ͱྑ͍ طଘͷ7JFXʹ3FBDU$PNQPOFUΛ
 ࠩ͠ࠐΉ৔߹͸7JFX)FMQFSΛ࢖͏

Slide 16

Slide 16 text

  w ౰࣌ɺ࢖͍͍ͨػೳ͕஍ຯʹόά͍ͬͯͨ w Կ౓͔13͍ͯ͠Δ͏ͪʹϝϯςφʔʹ༠ΘΕͨ w ͜ͷHFN͕ࢮ͵ͱ͓࢓ࣄͷ։ൃ͕٧ΉͷͰɺ
 ࣗ෼ͰϝϯςͰ͖Δͷ͸޷౎߹ͩͬͨ

Slide 17

Slide 17 text

SFBDUSBJMTWTSFBDU@PO@SBJMT   w ͲͪΒͷHFNͷ΄͏͕ྑ͍͔ w ݁࿦SFBDUSBJMTͷ΄͏͕ྑ͍Ͱ͢ w ˞ϙδγϣχϯάτʔΫͰ͢ w SFBDUSBJMT͸!SFBDUKTͷΦϑΟγϟϧͳHFN w ॳ୅ͷ։ൃऀ͕![QBP

Slide 18

Slide 18 text

SFBDUSBJMTWTSFBDU@PO@SBJMT   w SFBDU@PO@SBJMT͸3FEVY΍SFBDUSPVUFSΛ
 αϙʔτ͍ͯ͠Δ w ͜ͷϨΠϠʔͰ3FEVYΛҙࣝ͢Δͷ͸͓͔͍͠ w ͦ͏͍͏͜ͱΛͯ͠͠·͏ͱ3BJMTͱ3FBDUͷ ີ݁߹ΛੜΉ w SFBDUSPVUFS͸ے͕ѱ͍ʢޙड़ʣ

Slide 19

Slide 19 text

  another gem which can lead to unnecessary complexities react_on_rails ͸ෆඞཁͳෳࡶੑΛ΋ͨΒ͢ SFBDUSBJMTWTSFBDU@PO@SBJMT

Slide 20

Slide 20 text

w ݁࿦SFBDUSBJMTͷ΄͏͕ྑ͍Ͱ͢ w ˞ϙδγϣχϯάτʔΫͰ͢

Slide 21

Slide 21 text

ϧʔςΟϯάΛͲ͏͢Δ͔ʁ   w SFBDUSPVUFS͸ے͕ѱ͍ w ͦ΋ͦ΋3FBDU͸7JFX w ϧʔςΟϯάΛ͍͍࢘ͬͯϨΠϠʔͰ͸ͳ͍ w %0.͸TUBUFͷࣸ૾Ͱ͋Δͱ͍͏qVYͷ
 લఏ่͕ΕΔ w QBDLBHF໊͕4&0తʹڧͯ͘άάΔͱ
 SFBDUSPVUFS͕Ұ൪্ʹग़ͯ͠·͏

Slide 22

Slide 22 text

ϧʔςΟϯάΛͲ͏͢Δ͔ʁ   w ϧʔςΟϯά͸3BJMT͕஌͍ͬͯΔ w 3FBDUͰ΋3BJMTͷϧʔςΟϯά৘ใΛ
 ڞ௨Խͯ͠࢖͑͹͍͍

Slide 23

Slide 23 text

"QQMJDBUJPO$POUSPMMFSSPVUF@OBNF   w ໋໊نଇͰɺ͜ͷ"SUJDMFT4IPX͕DPNQPOFOU ໊ͱDPOUBJOFS໊ʹͳΔ w ·ͨɺ3BJMTଆͰ΋#VJME1SPQTʢޙड़ʣͷΫϥε໊ ʹ΋ͳΔ def route_name [controller_path, action_name].map(&:camelize).join end route_name #=> "ArticlesShow"

Slide 24

Slide 24 text

ॲཧͷϑϩʔ   w 3BJMT͸TUBUFΛ૊ΈཱͯΔ w ͦΕΛSFBDUSBJMT͕3FBDUʹ౉ͯ͠
 3FEVYͷTUPSFʹ֨ೲ͢Δ w ը໘ભҠ࣌͸"1*Λୟ͍ͯɺ3BJMT͕·ͨ
 ৽͍͠TUBUFΛ+40/Ͱు͍ͯɺ3FEVY͸ ͦΕΛऔΓࠐΉ w 3BJMTͱ͸3FBDUͷTUBUFCVJMEFSͰ͋Δ

Slide 25

Slide 25 text

"QQMJDBUJPO$POUSPMMFSSFOEFS@BQQ   w ͢΂ͯͷΤϯυϙΠϯτ͸SFOEFS@BQQ͢Δ w 41"ͳͷͰ443࣌͸ৗʹ"QQΛSFOEFS͢Δ def render_app # BuildProps::ArticlesShow.callʢHash Λ૊ΈཱͯΔʣ props = BuildProps.const_get(route_name).call if api? render json: props else # SSR render component: 'App', props: props, prerender: true end end

Slide 26

Slide 26 text

  function App(props) { const store = buildStore(props); return ( ); } w "QQίϯϙʔωϯτ͸ड͚औͬͨQSPQT͔Β
 3FEVYͷTUPSFΛ૊ΈཱͯΔ w 3BJMTͷSPVUF@OBNFΛ΋ͱʹΫϥΠΞϯταΠυͰ
 ϧʔςΟϯά͢Δ

Slide 27

Slide 27 text

  w "QQ QSPQT ͕3BJMTͱ3FBDUͷΠϯλʔϑΣʔε w 3BJMT͸"QQҎ֎ͷ$PNQPOFOUʹ͸
 ؔ஌͠ͳ͍ w ϑϩϯτΤϯυ͸ɺ"QQҎ֎ͷ$PNQPOFOU͸
 ;ͭ͏ͷ3FBDUΞϓϦέʔγϣϯ w 41"ͱͯ͠ը໘ભҠͨ͠৔߹΋443ͨ͠৔߹΋
 ಉ͡63-Ͱ͋Ε͹ಉ͡TUBUFʹͳΔ 3FBDUͱ3BJMTͷૄ݁߹

Slide 28

Slide 28 text

ࠓ೔࿩ͤͳ͔ͬͨ͜ͱ   w ͪΐͬͱൃද͕࣌ؒ଍Γͳ͔ͬͨ w ޙ೔΋ͬͱৄ͍͠ղઆΛ2JJUBʹॻ͖·͢ w )551ΤϥʔΛͲ͏ѻ͏͔ w LBNJOBSJͷϖʔδωʔγϣϯ৘ใΛ΋ͱʹ 3FBDUͷϖʔδωʔλʔΛ૊ΈཱͯΔ w ͳͲͳͲ

Slide 29

Slide 29 text

͝ਗ਼ௌ͋Γ͕ͱ͏͍͟͝·ͨ͠   w Ҋ݅ɺืूதͰ͢ w ೥݄ʙ w ॏࢹ͢Δ৚݅୯ՁɺՈ͔Β͍ۙ͜ͱ
 ʢେ࡚͔ΒӺҎ಺͔ࣗసंݍ಺͕๬·͍͠ʣ w ि೔ৗறͰ͖·͢ɻϦϞʔτෆՄ