Slide 1

Slide 1 text

20200125 ৽ਓΤϯδχΞ͕ຊԻΛޠΔձ (@kpinput)

Slide 2

Slide 2 text

ࣗݾ঺հ • ໊લ: kappaz(Twitter: @kpinput) • גࣜձࣾϥάβΠΞॴଐ • डୗ։ൃͷΤϯδχΞ • Ruby/Ruby on Rails, JavaScript/React • ͜ͷ1೥΍ͬͨ͜ͱ
 Rubyͷࢿ֨ͱͬͨΓɺٕज़ॻయʹຊग़ͨ͠ΓɺΞϓϦ࡞ͬͨΓ…

Slide 3

Slide 3 text

લ৬Ͱ͸ɻɻɻ • ωοτϫʔΫػثΛ࡞ͬͯ·ͨ͠ • ࢓༷࡞ͬͯԼ੥͚ʹ౤͛Δܥͷ͓࢓ࣄ

Slide 4

Slide 4 text

લ৬ΛࣙΊͨཧ༝

Slide 5

Slide 5 text

ࠓ೔࿩͢ࣄ

Slide 6

Slide 6 text

ωλ͕͞͠

Slide 7

Slide 7 text

1݅΋དྷͳ͔ͬͨ(স)

Slide 8

Slide 8 text

͜ΕͰ͍͜͏!

Slide 9

Slide 9 text

ࠓ೔࿩͢ࣄ ɾձࣾ୳͠Ͱେ੾ʹͨ͠ࣄ ɾ1೥ؒੜ͖ԆͼΔίπ ɾ࣮຿Ͱ͋ͬͨͭΒΈ

Slide 10

Slide 10 text

ࠓ೔࿩͢ࣄ ɾձࣾ୳͠Ͱେ੾ʹͨ͠ࣄ ɾ1೥ؒੜ͖ԆͼΔίπ ɾ࣮຿Ͱ͋ͬͨͭΒΈ

Slide 11

Slide 11 text

ಈػͷ۷ΓԼ͛ ʹʮͳΜͰWebΤϯδχΞʹͳΓ͍ͨͷʁʯ

Slide 12

Slide 12 text

໎ͬͨ࣌ͷಓ͠Δ΂ʹͳΔ • స৬׆ಈத͸໎͏͜ͱ͕෗Δ΄Ͳ͋Δ • ʮ৴པͰ͖ΔಈػʯΛ࣋ͯ͹ɺ໎ΘͣےΛ௨ܾͨ͠அͰ͖Δ

Slide 13

Slide 13 text

ʮ৴པͰ͖ΔಈػʯΛ࡞Δ • ʮಈػʯͷछʹࣗ෼ͰποίϛΛೖΕ·͘Δʂ ࣗ෼ͰαʔϏ εΛ૑Γ͍ͨ ࠓ·ͰͲΜͳαʔϏε࡞͖ͬͯͨʁ ͳΜͰब৬ͳͷʁىۀ͠ͳ͍ͷʁ 8FCΤϯδχΞ͡Όͳ͍ͱμϝͳͷʁ ࣗ༝ͳಇ͖ํ Λ࣮ݱ͍ͨ͠ ʮࣗ༝ͳಇ͖ํʯͬͯ۩ମతʹԿʁ ͦͷࣗ༝Λ࣮ݱͰ͖Δձ͕ࣾ͋Δʁ 8FCΤϯδχΞ͡Όͳ͍ͱμϝͳͷʁ ɾɾɾ ৴པͰ͖Δ ಈػ ɾɾɾ

Slide 14

Slide 14 text

ࢲͷಈػ • ʮ࢓ࣄͱϓϥΠϕʔτͷ྆ํͰɺ
 ಉ͡෼໺ͷࣄΛͨΊΒ͍ͳֶ͘Ϳঢ়ଶΛ࡞Γ͍ͨʯ • ࣗ෼͕৺ͷఈ͔Β৴͡ΒΕΕ͹ԿͰ΋OKʂ

Slide 15

Slide 15 text

۩ମతʹͲ͏໾ʹཱ͔ͬͨʁ • స৬׆ಈͷ࠷ऴ൫
 - 5ࣾड͚ͯ…
 - ࿅शͷͭ΋ΓͰड͚ͨࣗࣾαʔϏε × 4ࣾ -> ॻྨམͪ
 - ྑ͍͔΋? ͱࢥͬͯड͚ͨडୗ(ࠓͷձࣾ) -> ಺ఆʂ
 - ͔ࣗࣾ͠͠αʔϏεͷاۀΛ໨ࢦ͍ͨ͠ؾ࣋ͪ΋ɻɻɻ


Slide 16

Slide 16 text

ʮࣗࣾαʔϏεʯʹ͸શવܨ͕Βͳ͍ʀ ྑͦ͞͏ͳձࣾͳΒʮडୗʯͷاۀ͸ΞϦɻ ಈػ͕໌֬ͩͬͨͷͰૉૣܾ͘அͰ͖ͨ ۩ମతʹͲ͏໾ʹཱ͔ͬͨʁ ಺ఆΛ΋Βͬͨձࣾʹߦ͜͏ʂ

Slide 17

Slide 17 text

ʮձࣾ୳͠Ͱେ੾ʹͨ͠ࣄʯͷ͓·͚ • ͨͩɻɻɻʮಈػʯ͚ͩͩͱओ؍త͗͢Δ • ΋͏গ͠ʮ٬؍తͳج४ʯ΋ཉ͍͠

Slide 18

Slide 18 text

https://www.slideshare.net/cuzic/ss-172060603 ΤϯδχΞస৬ͷϊ΢ϋ΢ ಇ͘΂͖ձࣾͷ νΣοΫϦετ
 (OsakaRubyKaigi02ΑΓ)

Slide 19

Slide 19 text

ͪͳΈʹ… ࢲͷॴଐ͢Δ גࣜձࣾϥάβΠΞ (͍͍ͩͨ) 9ݸத7ݸ ຬ͓ͨͯ͠Γ·͢ chatwork MacBookPro

Slide 20

Slide 20 text

No content

Slide 21

Slide 21 text

ࠓ೔࿩͢ࣄ ɾձࣾ୳͠Ͱେ੾ʹͨ͠ࣄ ɾ1೥ؒੜ͖ԆͼΔίπ ɾ࣮຿Ͱ͋ͬͨͭΒΈ

Slide 22

Slide 22 text

ʮੜ͖ԆͼΔʯͱ͍͏දݱ͸େ͛͞Ͱ͸ͳ͍ (ؾ͕͢Δ) ͜͜ʹ֘౰͢Δਓ͸ผʀ

Slide 23

Slide 23 text

ྑ޷ͳରਓؔ܎

Slide 24

Slide 24 text

ʮੜ͖ԆͼΔʯࣄΛࠔ೉ʹ͢Δো֐͸Կʁ ͋Δఔ౓ࣗྗͰ࢓ࣄ͕Ͱ͖ΔϥΠϯ ࣗ෼ͷೳྗ ࣌ؒ ೖࣾ 1೥ޙ͘Β͍

Slide 25

Slide 25 text

ʮੜ͖ԆͼΔʯࣄΛࠔ೉ʹ͢Δো֐͸Կʁ ͋Δఔ౓ࣗྗͰ࢓ࣄ͕Ͱ͖ΔϥΠϯ ࣗ෼ͷೳྗ ࣌ؒ ೖࣾ 1೥ޙ͘Β͍ ͜ͷΪϟοϓ͕ ʮੜ͖ԆͼΔʯ্Ͱͷো֐Ͱ͸ʁ

Slide 26

Slide 26 text

μϝʔδେ μϝʔδ (΍΍)খ Ϊϟοϓʹର͢Δपғͷ൓Ԡ࣍ୈͰɺ
 ϝϯλϧʹड͚Δμϝʔδ͸େ͖͘มΘΔ

Slide 27

Slide 27 text

গ͠Ͱ΋ʮμϝʔδ(΍΍খ)ʯʹدͤͯ࣌ؒΛՔ͙ μϝʔδେ μϝʔδ (΍΍)খ

Slide 28

Slide 28 text

(վΊͯ) ྑ޷ͳରਓؔ܎

Slide 29

Slide 29 text

͜͏͍͏͜ͱʁʁʁ

Slide 30

Slide 30 text

͍΍ɺͲ͔ͬͪͱ͍͏ͱ͜͏

Slide 31

Slide 31 text

ձࣾͷՁ஋؍Λߠఆ͍ͯ͘͠ • ࣗ෼͕બΜͩձࣾΛϦεϖΫτ͠Α͏ʂ
 - ͦͷձ͕ࣾେ੾ʹ͍ͯ͠Δ΋ͷΛେ੾ʹ͢Δ
 - पΓͷਓͱಉ͜͡ͱ΍ͬͯΈΔ
 - ʮ஥ྑ͍͖͍ͯͨ͘͠Ͱ͢Αʔʯ
 ͱ͍͏࢟੎Λ(΍Γա͗ͳ͍ఔ౓ʹ)Ξϐʔϧ͢Δ • ຊ৺͸ࣗ༝ʂ(ॏཁ)

Slide 32

Slide 32 text

ࢲ͕࣮ࡍʹ΍ͬͨ͜ͱ • ಺ఆޙձࣾͷΠϕϯτʹ༠ΘΕࢀՃɻ
 શһͷ໊લΛϝϞˍೖࣾ·Ͱʹ֮͑ͨ(20໊ऑ) • ձ͕ࣾਪ঑͢Δࢿ֨(RubySilver)Λೖࣾޙ1ϲ݄Ͱऔಘ
 - ͋ͱ1໊ͦͷࢿ֨Λऔಘ͢Ε͹ɺ
 ձࣾͱͯ͠RubyͷೝఆΛऔಘͰ͖ΔλΠϛϯά • ৼΒΕͨࡶ༻(ి࿩ɾΰϛࣺͯɾװࣄ)Λ͖ͬͪΓ͜ͳͨ͠(ී௨)

Slide 33

Slide 33 text

৺͕ંΕͣʹܧଓͰ͖Ε͹৐Γ੾ΕΔ ͋Δఔ౓ࣗྗͰ࢓ࣄ͕Ͱ͖ΔϥΠϯ ࣗ෼ͷೳྗ ࣌ؒ ೖࣾ 1೥ޙ͘Β͍ ͦͦ͜͜ਅ໘໨ʹ࢓ࣄ͍ͯ͠Ε͹ ͍͔ͭඞͣ৐Γ੾ΕΔ

Slide 34

Slide 34 text

ࠓ೔࿩͢ࣄ ɾձࣾ୳͠Ͱେ੾ʹͨ͠ࣄ ɾ1೥ؒੜ͖ԆͼΔίπ ɾ࣮຿Ͱ͋ͬͨͭΒΈ(αΫοͱ)

Slide 35

Slide 35 text

ਖ਼௚࣮຿໘(ಛʹೖࣾॳظ)Ͱ ۃ୺ͳͭΒΈ͸ͳ͔ͬͨ ͳͥͳΒɻɻɻ

Slide 36

Slide 36 text

αʔΫϧΞϥ΢ϯυͷ τϨʔχϯάΛ ͜ͳ͍ͯͨ͠ͷͰ

Slide 37

Slide 37 text

Ͱ΋ͭΒΈ0Ͱ͸ͳ͔ͬͨͷͰɺ
 3ͭ΄Ͳɻɻɻ

Slide 38

Slide 38 text

• ʮ͜ͷ࣮૷ͲΕ͘Β͍ͰऴΘΓͦ͏ʁʯ
 ͱ͍͏࣭໰ʹ౴͑Δͷ͕࠷ॳ͸ͱͯ΋ਏ͔ͬͨɻɻɻ • ͜Ε͸܁Γฦ͠΍Δ͔͠ͳ͍
 -> ͦͷ͏ͪײ֮Ͱݟੵ΋ΕΔΑ͏ʹͳΔ 1. ݟੵ΋Γ

Slide 39

Slide 39 text

• ࠷ॳʹೖͬͨPJͰϞσϧ͕150ݸ͘Β͍͋ͬͨʂʂʂ
 -> Ͱ΋΍ͬͯΈΔͱԿͱ͔ͳΔ
 -> ݁ہҰ౓ʹؔΘΔϞσϧ͸ଟͯ͘΋10ݸະຬͳͷͰ 2. σʔλߏ଄͕Ϡό͗ͨ͢

Slide 40

Slide 40 text

• ৭ʑෳࡶͳࣄ৘͔Βɺ
 ࣮૷ࣗ෼1ਓͰɺະܦݧͷ(ˍपΓʹৄ͍͠ਓ͕͍ͳ͍)
 ReactͷPJʹೖΔ͜ͱʹ(͔ͳʔΓಛघͳέʔε)
 -> ·͊Կͱ͔ͨ͠ɻ
 ެࣜυΩϡϝϯτͱˠͷຊͷ͓͔͛ɻ
 -> ʮԿͱ͔͢Δྗʯ͸ɺ
 ΤϯδχΞతʹॏཁ͔΋͠Εͳ͍ 3. ΘΓͱҰਓͰReact΍Δ͜ͱʹ

Slide 41

Slide 41 text

͍͞͝ʹ • ೖࣾલ͸ಈػʹ໨Λ޲͚ͯΈΔͱ͍͍͔΋ • ೖࣾޙ͸ٕज़͚ͩ͡Όͳͯ͘ਓؒؔ܎΋ • ͭΒΈ͸ͳΜ΍͔Μ΍͢Δ

Slide 42

Slide 42 text

Ҏ্Ͱ͢ɻ ͝੩ௌ͋Γ͕ͱ͏͍͟͝·ͨ͠ɻ

Slide 43

Slide 43 text

෇࿥1:ʮ৴པͰ͖Δಈػʯ࡞Γͷ஫ҙ఺
 (ຊ౰ʹ΍Δਓ͕͍ͨΒ) • ʮWebΤϯδχΞʹͳΓ͍ͨʂʯͱ͍͏௚ײ͸ਖ਼͍͠ɻ
 (ͷͰٙΘͳ͍) • ࠷ޙ͸ײ৘ʹண஍͢Δɺͱ͍͏͔ಀ͛Δɻ
 (○○͕޷͖͔ͩΒ౳) • आΓ෺ͷݴ༿ͦͷ··͸ආ͚Δ

Slide 44

Slide 44 text

෇࿥2ɿ࣮ࡍೖͬͯײͨ͡डୗͷಛ௃ • ϝϦοτ
 - ίʔυΛॻ͘͜ͱʹूதͰ͖Δ
 - ٕज़໘ʹର͢Δҙࣝ͸ߴ͍ؾ͕͢Δ(ձࣾͷڧΈʹٕज़ ͳͷͰ) • σϝϦοτ
 - ྑ͘΋ѱ͘΋ʮΫϥΠΞϯτ࣍ୈʯ
 - αʔϏεΛҭͯΔܦݧ͸΄΅ظ଴Ͱ͖ͳ͍