Tweet
Tweet

Slide 1

Slide 1 text

୭Ͱ΋Θ͔Δʂ Reactೖ໳ ʙReactͱ͍͏ΑΓ΋Ϟμϯϑϩϯτͷ࿩ͬΆ͘ͳͬͪΌͬͨʙ ͋ͣΒͨ (@azurata09_)

Slide 2

Slide 2 text

લఏ஌ࣝ • HTML͕ॻ͚Δ • JS΋ॻ͚Δͱͳ͓ྑ͠

Slide 3

Slide 3 text

Ϟμϯϑϩϯτ 
 ಋೖฤ

Slide 4

Slide 4 text

JSΛ࢖ͬͯHTMLΛॻ͖ସ͑ͯΈΔ

Hello, HTML!

const h1_element = document.getElementsByTagName("h1")[0] h1_element.innerHTML = "Hello, JS!"

Slide 5

Slide 5 text

DOM͔Βh1λάͷཁૉΛͱ͖ͬͯͯ

Hello, HTML!

const h1_element = document.getElementsByTagName("h1")[0] h1_element.innerHTML = "Hello, JS!"

Slide 6

Slide 6 text

த਎Λॻ͖ସ͑Δ

Hello, HTML!

const h1_element = document.getElementsByTagName("h1")[0] h1_element.innerHTML = "Hello, JS!"

Slide 7

Slide 7 text

·ͩΘ͔Δ

Slide 8

Slide 8 text

ͪΐͬͱ಺༰૿΍ͯ͠ΈΔ

const input = document.getElementsByTagName("input")[0] const p1 = document.getElementsByTagName("p")[0] const p2 = document.getElementsByTagName("p")[1] function inputHandler() { p1.innerHTML = input.value p2.innerHTML = input.value.toUpperCase() } input.addEventListener("input", inputHandler) inputHandler()

Slide 9

Slide 9 text

DOM͔ΒͦΕͧΕཁૉΛ͖࣋ͬͯͯ

const input = document.getElementsByTagName("input")[0] const p1 = document.getElementsByTagName("p")[0] const p2 = document.getElementsByTagName("p")[1] function inputHandler() { p1.innerHTML = input.value p2.innerHTML = input.value.toUpperCase() } input.addEventListener("input", inputHandler) inputHandler()

Slide 10

Slide 10 text

Πϕϯτϋϯυϥ࡞Δ

const input = document.getElementsByTagName("input")[0] const p1 = document.getElementsByTagName("p")[0] const p2 = document.getElementsByTagName("p")[1] function inputHandler() { p1.innerHTML = input.value p2.innerHTML = input.value.toUpperCase() } input.addEventListener("input", inputHandler) inputHandler()

Slide 11

Slide 11 text

ΪϦΘ͔Δ

Slide 12

Slide 12 text

Ͱ΋͜Ε͕Կඦߦʹ౉͍ͬͯΔͱ…

Slide 13

Slide 13 text

Vanilla JSͷ໰୊఺ • දࣔ(HTML)ͱϩδοΫ(JS)͕ผͷ৔ॴʹ͋Δ • ϩδοΫ໋͕ྩతͰHTMLͱ૬ޓʹඥ෇͔ͳ͍ • (HTMLΛ͔·͢ͱ)಺༰ͷ࠶ར༻͕؆୯ʹͰ͖ͳ͍

Slide 14

Slide 14 text

౰વੜ͡Δ͓ؾ࣋ͪ • HTMLڬΉͱ໘౗͔ͩΒJS͚ͩͰϑϩϯτ΍Γ͍ͨʂ

Slide 15

Slide 15 text

͍ͩͿલʹ஌Γ߹͍͕LTͯͨ͠

Slide 16

Slide 16 text

಺༰ཁ໿ • JS͚ͩͰWebαΠτ 
 ࡞Γ·ͨ͠ʂ

Slide 17

Slide 17 text

։͍ͯΈΔ • https://ryu1-1uyr.github.io/html_oasobi/ phase_6.html • https://github.com/ryu1-1uyr/html_oasobi/blob/ master/phase_6.html

Slide 18

Slide 18 text

ίʔυΛݟΔͱ… 100ߦҎ্ͷίʔυͰ 
 ࣮૷͞ΕͯΔ

Slide 19

Slide 19 text

Ͱ͸… • ͋ͳͨ͸͜ΕΛ࣮૷͍ͨ͠ͱࢥ͍·͔͢ʁ • ๻͸ݏͰ͢

Slide 20

Slide 20 text

HTMLͷ͍͍ͱ͜Ζ • ໦ߏ଄ͳͷͰߏ଄͕Θ͔Γ΍͍͢ • DOMͰݕࡧ • ίʔυ͚ͩͰݟͨ໨͕૝૾Ͱ͖Δ

Slide 21

Slide 21 text

ڪΒ͘։ൃऀ͸͜͏ߟ͑ͨ • Ͳ͏ʹ͔දࣔͱϩδοΫΛҰॹʹͰ͖ͳ͍ͩΖ͏͔ • ͋ΘΑ͘͹࠶ར༻Մೳʹ͍ͨ͠…

Slide 22

Slide 22 text

ڪΒ͘։ൃऀ͸͜͏ߟ͑ͨ • Ͳ͏ʹ͔දࣔͱϩδοΫΛҰॹʹͰ͖ͳ͍ͩΖ͏͔ • ͋ΘΑ͘͹࠶ར༻Մೳʹ͍ͨ͠… 㱺 ϝλϓϩάϥϛϯάͰղܾ͢Δ

Slide 23

Slide 23 text

ReactͰ։ൃऀ͕΍Δ͜ͱ • ίϯϙʔωϯτͱ͍͏୯ҐͰϓϩάϥϜΛॻ͘ • ίϯϙʔωϯτΛ૊Έ߹Θͤͯ΋ίϯϙʔωϯτ Λ࡞੒Ͱ͖Δ • ίϯϙʔωϯτΛ૊Έ߹ΘͤΔ͜ͱͰDOMಉ༷ͷ 
 "໦"Λ࡞੒͢Δ

Slide 24

Slide 24 text

React͕΍ͬͯ͘ΕΔ͜ͱ • ίϯϙʔωϯτΛಡΈࠐΜͰHTML+JSʹॻ͖ى͜͢ • ͭ·ΓʮϓϩάϥϜͰϓϩάϥϜΛੜ੒͢Δʯ • ͜Ε͕ϝλϓϩάϥϛϯά

Slide 25

Slide 25 text

͔ͩΒReactެࣜνϡʔτϦΞϧͰ 
 ͜Μͳίʔυ͕ग़Δ return React.createElement('div', {className: 'shopping-list'}, React.createElement('h1', /* ... h1 children ... */), React.createElement('ul', /* ... ul children ... */) );

Slide 26

Slide 26 text

Reactೖ໳ฤ

Slide 27

Slide 27 text

Reactͷجຊ • ؔ਺ΦϒδΣΫτͰίϯϙʔωϯτΛهड़͍ͯ͘͠ • ؔ਺ίϯϙʔωϯτͱ͍͏

Slide 28

Slide 28 text

جຊܗ import React from "react" function App() { return( <>

Hello, React!

> ) } export default App

Slide 29

Slide 29 text

Ξϩʔؔ਺Ͱఆٛͨ͠ํ͕ݎ࿚ (constʹ͢Δ͜ͱͰॻ͖׵͑ΒΕͳ͘ͳΔ) import React from "react" const App = () => { return( <>

Hello, React!

> ) } export default App

Slide 30

Slide 30 text

TSͳΒܕ΋໌ࣔ (͜Ε͸ͳͯ͘΋ಈ͔͘΋) import React from "react" const App = (): JSX.Element => { return( <>

Hello, React!

> ) } export default App

Slide 31

Slide 31 text

ଞͷίϯϙʔωϯτ΋࢖ͬͯΈΔ import React from "react" import { OtherComponent } from "./OtherComponent.jsx" const App = (): JSX.Element => { return( <>

Hello, React!

> ) } export default App

Slide 32

Slide 32 text

React Hooksͱ͸ʁ • ؔ਺ίϯϙʔωϯτ୯ମͩͱͰ͖Δ͜ͱ͕গͳ͍ • ࠷ॳ͸දࣔʹؔ͢Δ͜ͱ͔͠ॻ͚ͳ͔ͬͨ • ΫϥείϯϙʔωϯτͷػೳΛؔ਺ίϯϙʔωϯτ Ͱ΋هड़Ͱ͖ΔΑ͏ʹͨ͠ͷ͕React Hooks

Slide 33

Slide 33 text

Hooksͬͯ200छྨ ͋ΜͶΜ(ͳ͍) ͳΜ͔͍ͬͺ͍͋Δ ͳͷͰྲྀੴʹجຊͷ΍ͭͰ צห

Slide 34

Slide 34 text

useState • Reactͷؔ਺ίϯϙʔωϯτͰ͸ɺී௨ͷม਺ʹ஋Λ ୅ೖͯ͠΋࠶Ϩϯμʔ͞Εͳ͍ • ͦͷͨΊɺߋ৽+࠶ϨϯμʔΛ͢Δػߏ͕ඞཁ • ͦΕ͕useState

Slide 35

Slide 35 text

useStateͷྫ import React, { useState } from 'react'; function Example() { const [count, setCount] = useState(0); return (

You clicked {count} times

setCount(count + 1)}> {/* ΫϦοΫ͢Δ͝ͱʹ1૿͑Δ */} Click me
); }

Slide 36

Slide 36 text

useE ff ect • ෭࡞༻ϑοΫͱ΋ݺ͹ΕΔ • ୈ2Ҿ਺͸ґଘ͢Δ஋(͍͍ͨͯState)ͷ഑ྻΛ౉͢ • ୈ2Ҿ਺ͷதʹ͋Δ஋͕มߋ͞ΕΔ౓ʹ࣮ߦ͞ΕΔ • ۭ഑ྻΛ౉͢͜ͱͰ࠷ॳͷҰ౓ͷΈ࣮ߦ͢Δ͜ͱ͕Ͱ͖Δ • ٯʹԿ΋͚ͭͳ͍ͱશͯͷ஋͕ߋ৽͞ΕΔ౓ʹ࣮ߦ͞ΕΔ

Slide 37

Slide 37 text

useE ff ectͷྫ import React, { useState, useEffect } from 'react'; function Example() { const [count, setCount] = useState(0); useEffect(() => { document.title = `You clicked ${count} times`; // ࠶Ϩϯμʔ͞ΕΔ౓ʹݺ͹ΕΔ }); return (

You clicked {count} times

setCount(count + 1)}>Click me
); }

Slide 38

Slide 38 text

useE ff ectͷྫ import React, { useState, useEffect } from 'react'; function Example() { const [count, setCount] = useState(0); useEffect(() => { document.title = `You clicked ${count} times`; // Ұ౓͔͠ݺ͹Εͳ͍ }, []); return (

You clicked {count} times

setCount(count + 1)}>Click me
); }

Slide 39

Slide 39 text

useContext • ࢖ͬͨ͜ͱ͕ͳ͍ 🤯 • ωετ͞Εͨࢠίϯϙʔωϯτʹରͯ͠௚઀σʔλ ΛϒνࠐΊΔΒ͍͠ • όέπϦϨʔ͠ͳͯ͘Α͍ʂ • Α͘Θ͔Μͳ͍ͷͰྫ͸লུͤͯ͞΄͍͠

Slide 40

Slide 40 text

·ͱΊ • ϞμϯϑϩϯτͰJavaScriptϑϨʔϜϫʔΫ͕ 
 ࢖ΘΕΔཧ༝͸࠶ར༻ՄೳͳίʔυΛੜΈग़ͤΔ͔Β • ࠷ۙͷReactͰ͸ؔ਺ܕίϯϙʔωϯτͰίϯϙʔωϯτΛ 
 هड़͍͖ͯ͠ɺReactͷػೳΛReact HooksͰར༻͢Δ

Slide 41

Slide 41 text

ࢀߟจݙ • https://qiita.com/Yametaro/items/ 3c27305072464e1d6230 • https://speakerdeck.com/s17001/huremuwakufalseqi- chi-tininaritakatuta • https://github.com/ryu1-1uyr/html_oasobi • https://ja.reactjs.org/docs/hooks-overview.html