Submit Search
Upload
react勉強会 #4
•
0 likes
•
85 views
K
KentaIwadate
Follow
react勉強会 #4 の資料です。
Read less
Read more
Engineering
Report
Share
Report
Share
1 of 7
Download now
Download to read offline
Recommended
HTMLの要素の選び方
HTMLの要素の選び方
TENTO_slide
Metaprogramming Universe in C# - 実例に見るILからRoslynまでの活用例
Metaprogramming Universe in C# - 実例に見るILからRoslynまでの活用例
Yoshifumi Kawai
はじめてのPython
はじめてのPython
Katsumi Honda
Introduction for Browser Side MVC
Introduction for Browser Side MVC
Ryunosuke SATO
OSC2011 Androidハンズオン
OSC2011 Androidハンズオン
Katsumi Honda
Composable Callbacks & Listeners
Composable Callbacks & Listeners
Taisuke Oe
Geeklog2.1新機能紹介 20140723
Geeklog2.1新機能紹介 20140723
Tetsuko Komma
Jetpack Library 事始め
Jetpack Library 事始め
Tomohiro Kaizu
Recommended
HTMLの要素の選び方
HTMLの要素の選び方
TENTO_slide
Metaprogramming Universe in C# - 実例に見るILからRoslynまでの活用例
Metaprogramming Universe in C# - 実例に見るILからRoslynまでの活用例
Yoshifumi Kawai
はじめてのPython
はじめてのPython
Katsumi Honda
Introduction for Browser Side MVC
Introduction for Browser Side MVC
Ryunosuke SATO
OSC2011 Androidハンズオン
OSC2011 Androidハンズオン
Katsumi Honda
Composable Callbacks & Listeners
Composable Callbacks & Listeners
Taisuke Oe
Geeklog2.1新機能紹介 20140723
Geeklog2.1新機能紹介 20140723
Tetsuko Komma
Jetpack Library 事始め
Jetpack Library 事始め
Tomohiro Kaizu
Replace Output Iterator and Extend Range JP
Replace Output Iterator and Extend Range JP
Akira Takahashi
ApexトリガのBest Practiceを目指して
ApexトリガのBest Practiceを目指して
Takahiro Yonei
Lighting componentワークブック(経費精算アプリ)
Lighting componentワークブック(経費精算アプリ)
Akihiro Iwaya
CLRH_120414_WFTDD
CLRH_120414_WFTDD
Tomoyuki Obi
Aedlabo program 20150125
Aedlabo program 20150125
としゆき 高橋
PHP 2大 web フレームワークの徹底比較!
PHP 2大 web フレームワークの徹底比較!
Shohei Okada
What, Why, How Create OSS Libraries - 過去に制作した30のライブラリから見るC#コーディングテクニックと個人OSSの...
What, Why, How Create OSS Libraries - 過去に制作した30のライブラリから見るC#コーディングテクニックと個人OSSの...
Yoshifumi Kawai
pi-6. 繰り返し
pi-6. 繰り返し
kunihikokaneko1
C++0x concept
C++0x concept
Akira Takahashi
React.jsでクライアントサイドなWebアプリ入門
React.jsでクライアントサイドなWebアプリ入門
spring_raining
実験心理学者のためのPython
実験心理学者のためのPython
Masataka Miyoshi
【Unite Tokyo 2018 Training Day】C#JobSystem & ECSでCPUを極限まで使い倒そう ~C# JobSystem 編~
【Unite Tokyo 2018 Training Day】C#JobSystem & ECSでCPUを極限まで使い倒そう ~C# JobSystem 編~
Unity Technologies Japan K.K.
Jetpack Workshop
Jetpack Workshop
Hideaki Miyake
UniRxことはじめ
UniRxことはじめ
Shoichi Yasui
Flash Builder4 と FlashCatalyst を使ってみた
Flash Builder4 と FlashCatalyst を使ってみた
guest0ba46c3
GDG DevFest 2020 Android data linkage info
GDG DevFest 2020 Android data linkage info
tsutomuhayakawa
【18-C-4】Google App Engine - 無限の彼方へ
【18-C-4】Google App Engine - 無限の彼方へ
Developers Summit
Visualforce + jQuery
Visualforce + jQuery
Salesforce Developers Japan
Ajax 応用
Ajax 応用
Katsuyuki Seino
ReduxとSwiftの組み合わせ:改訂版
ReduxとSwiftの組み合わせ:改訂版
Fumiya Sakai
More Related Content
Similar to react勉強会 #4
Replace Output Iterator and Extend Range JP
Replace Output Iterator and Extend Range JP
Akira Takahashi
ApexトリガのBest Practiceを目指して
ApexトリガのBest Practiceを目指して
Takahiro Yonei
Lighting componentワークブック(経費精算アプリ)
Lighting componentワークブック(経費精算アプリ)
Akihiro Iwaya
CLRH_120414_WFTDD
CLRH_120414_WFTDD
Tomoyuki Obi
Aedlabo program 20150125
Aedlabo program 20150125
としゆき 高橋
PHP 2大 web フレームワークの徹底比較!
PHP 2大 web フレームワークの徹底比較!
Shohei Okada
What, Why, How Create OSS Libraries - 過去に制作した30のライブラリから見るC#コーディングテクニックと個人OSSの...
What, Why, How Create OSS Libraries - 過去に制作した30のライブラリから見るC#コーディングテクニックと個人OSSの...
Yoshifumi Kawai
pi-6. 繰り返し
pi-6. 繰り返し
kunihikokaneko1
C++0x concept
C++0x concept
Akira Takahashi
React.jsでクライアントサイドなWebアプリ入門
React.jsでクライアントサイドなWebアプリ入門
spring_raining
実験心理学者のためのPython
実験心理学者のためのPython
Masataka Miyoshi
【Unite Tokyo 2018 Training Day】C#JobSystem & ECSでCPUを極限まで使い倒そう ~C# JobSystem 編~
【Unite Tokyo 2018 Training Day】C#JobSystem & ECSでCPUを極限まで使い倒そう ~C# JobSystem 編~
Unity Technologies Japan K.K.
Jetpack Workshop
Jetpack Workshop
Hideaki Miyake
UniRxことはじめ
UniRxことはじめ
Shoichi Yasui
Flash Builder4 と FlashCatalyst を使ってみた
Flash Builder4 と FlashCatalyst を使ってみた
guest0ba46c3
GDG DevFest 2020 Android data linkage info
GDG DevFest 2020 Android data linkage info
tsutomuhayakawa
【18-C-4】Google App Engine - 無限の彼方へ
【18-C-4】Google App Engine - 無限の彼方へ
Developers Summit
Visualforce + jQuery
Visualforce + jQuery
Salesforce Developers Japan
Ajax 応用
Ajax 応用
Katsuyuki Seino
ReduxとSwiftの組み合わせ:改訂版
ReduxとSwiftの組み合わせ:改訂版
Fumiya Sakai
Similar to react勉強会 #4
(20)
Replace Output Iterator and Extend Range JP
Replace Output Iterator and Extend Range JP
ApexトリガのBest Practiceを目指して
ApexトリガのBest Practiceを目指して
Lighting componentワークブック(経費精算アプリ)
Lighting componentワークブック(経費精算アプリ)
CLRH_120414_WFTDD
CLRH_120414_WFTDD
Aedlabo program 20150125
Aedlabo program 20150125
PHP 2大 web フレームワークの徹底比較!
PHP 2大 web フレームワークの徹底比較!
What, Why, How Create OSS Libraries - 過去に制作した30のライブラリから見るC#コーディングテクニックと個人OSSの...
What, Why, How Create OSS Libraries - 過去に制作した30のライブラリから見るC#コーディングテクニックと個人OSSの...
pi-6. 繰り返し
pi-6. 繰り返し
C++0x concept
C++0x concept
React.jsでクライアントサイドなWebアプリ入門
React.jsでクライアントサイドなWebアプリ入門
実験心理学者のためのPython
実験心理学者のためのPython
【Unite Tokyo 2018 Training Day】C#JobSystem & ECSでCPUを極限まで使い倒そう ~C# JobSystem 編~
【Unite Tokyo 2018 Training Day】C#JobSystem & ECSでCPUを極限まで使い倒そう ~C# JobSystem 編~
Jetpack Workshop
Jetpack Workshop
UniRxことはじめ
UniRxことはじめ
Flash Builder4 と FlashCatalyst を使ってみた
Flash Builder4 と FlashCatalyst を使ってみた
GDG DevFest 2020 Android data linkage info
GDG DevFest 2020 Android data linkage info
【18-C-4】Google App Engine - 無限の彼方へ
【18-C-4】Google App Engine - 無限の彼方へ
Visualforce + jQuery
Visualforce + jQuery
Ajax 応用
Ajax 応用
ReduxとSwiftの組み合わせ:改訂版
ReduxとSwiftの組み合わせ:改訂版
react勉強会 #4
1.
react勉強会#4 本⽇のテーマ React Hooks を学ぼう 本⽇の達成⽬標 カウンター機能の完成 学習内容 React
Hooksとは? React Hooks は、React のさまざまな機能をクラスを書かずに使えるようになる機能 公式ページ: https://ja.reactjs.org/docs/hooks-intro.html React Hooksのメリット 参考: https://qiita.com/Mitsuzara/items/98d1bc4a83265a764084 簡単に⾔うとクラスよりも記述が簡潔になることがメリットです。 どれくらい簡潔になるかは次の⽐較をご覧ください。 ⽐較 同じ処理をする機能を、クラスとフックそれぞれ使って書くと... クラス
2.
import React from
'react' export default class App extends React.Component { constructor(props) { super(props) this.state = { count: 0 } } render() { return ( <> <p>You clicked {this.state.count} times</p> <button onClick={() => this.setState({ count: this.state.count + 1 })}> Click me </button> </> ) } } フック import React, { useState } from 'react' export default const App = () => { const [count, setCount] = useState(0) return ( <> <p>You clicked {count} times</p> <button onClick={() => setCount(count + 1)}> Click me </button> </> ) } 以上のようにフックで書いた⽅がコード量が少なくなっています。 では、フックがどこに登場してるかというと、上記フックコード 4 ⾏⽬にある useState がフックになりま す。 フックは、名前が use~~~ のように use から始まる関数のことを指します。 ※厳密には use を使わなくてもよいですが、React ではこの命名規則を推奨しています。 useState 以外にもフックはありますが、その中でも頻繁に使うフックについて後程⾒ていきます。 React Hooksのデメリット
3.
React の全ての機能が使えるようになるわけではないこと。 フックで書けない場合はクラスを使いましょう。 頻繁に使うHooks ここでは React
で開発する際に、頻繁に使うフック useState と useEffect を紹介します。 useState 先ほどの例で出てきた useState は、state (状態) を管理するためのフックです。 例えば、ボタンを押すと 1 ずつ増えていく数字のように、何かしらアクションを起こすと値が変化してい く変数を扱いたいときは、この useState を使います。 具体的に、次のコードを使って説明します。 import React, { useState } from 'react'; function Example() { const [count, setCount] = useState(0); return ( <div> <p>You clicked {count} times</p> <button onClick={() => setCount(count + 1)}> Click me </button> </div> ); } まず、1 ⾏⽬ import React, { useState } from 'react'; で useState を react パッケージから import します。 次に、関数の中⾝を⾒ると、 function Example() { const [count, setCount] = useState(0); ...... } useState が出てきます。 ここで、ポイントとなるのが「フックは関数コンポーネント内で使う」です。 以下のように関数の外で定義したり、 const [count, setCount] = useState(0); function Example() { ...... }
4.
以下のようにクラス内で定義しても使⽤できないので注意してください。 class Example extends
React.Component { const [count, setCount] = useState(0); ...... } 先ほどのコードに戻り、useState がある箇所を⾒ると、 const [count, setCount] = useState(0); となっています。 これを⼀般的に書くと次のようになります。 const [ 変数hoge, 変数hogeを操作する関数setHoge] = useState(hogeの初期値); つまり、先のコードは初期値を 0 とする変数 count とその count を操作する関数 setCount を⽤意したこ とになります。 次に、return されてる JSX ⽂を⾒てみましょう。 <div> <p>You clicked {count} times</p> <button onClick={() => setCount(count + 1)}> Click me </button> </div> まず、pタグ内 <p>You clicked {count} times</p> では、現在の count の値が表⽰されます。 button タグでは onClick 属性が指定されているので、ボタンを押すことで、 () => setCount(count + 1) というイベントが発⽣します。 ちなみに、() => ~~~ は、アロー関数 (https://developer.mozilla.org/ja/docs/Web/JavaScript/Reference/Functions/Arrow_functions) と いいます。 setCount(count + 1) で、現在の count の値に +1 されます。 実際に上記のコードを実⾏してみると、count が 0 から始まり、ボタンを押すごとに +1 されていくのが わかります。 演習問題 次の機能を useState を使って実装してみましょう。 1. ボタンを押すと、ある⽂字(例えば、「hoge」など)が表⽰されたり⾮表⽰になったりする。 2. ある変数に対して、ボタンを押すと +2 される。ただし、この変数はボタンを押した回数によって
5.
表⽰されたり、⾮表⽰される。奇数回ボタンを押すと⾮表⽰、偶数回ボタンを押すと表⽰される。 useEffect useEffect は、レンダリング(コードの内容が画⾯に反映されること)直後や、ある変数の値が変わった際 に呼ばれるフックです。 この2つのタイミングそれぞれで useEffect
の書き⽅が多少異なります。 レンダリング直後 まず、ブラウザのコンソールを開き、次のコードを実⾏してみましょう。 import React, { useEffect } from 'react' function Example() { useEffect(() => { console.log('Hello useEffect!') }) return ( <p>Hello, World!</p> ); } すると、ブラウザ画⾯には ”Hello World!” が表⽰され、コンソール上には ”Hello useEffect!” が表⽰され ると思います。 まず画⾯上に ”Hello World!” が表⽰(レンダリング)されてからコンソール上で ”Hello useEffect!” が出 ⼒されるといった動作の流れになっています。 コードを⾒ると、関数内には以下のように useEffect フックがあります。 useEffect(() => { console.log('Hello useEffect!') }) useEffect は第⼀引数に関数を⼊れることで、レンダリング直後にその関数が実⾏されます。 ある変数の値が変わったタイミング useEffect は第⼀引数だけでなく第⼆引数も指定できます。 具体的には、配列型の変数を指定し、その要素として関数コンポーネント内で使われている変数を⼊れるこ とで以下のような形になります。 useEffect( 関数, [hoge1, hoge2, ...]) ※ hoge1, hoge2 は関数コンポーネント内の変数 第⼆引数がある場合はその要素のいずれか(hoge1、hoge2のどれか)が変化した場合に第⼀引数の関数が 実⾏されます。 それでは、第⼆引数がある useEffect の例を⾒ていきましょう。
6.
import React, {
useState, useEffect } from 'react'; function Example() { const [count, setCount] = useState(0); useEffect(() => { console.log('現在のcountの値は' + count + 'です!'); }, [count]) return ( <div> <p>You clicked {count} times</p> <button onClick={() => setCount(count + 1)}> Click me </button> </div> ); } ここでは、useState で指定した変数 count が変化する毎に useEffect が呼ばれます。 このように、useState と useEffect を組み合わせて使うことはよくあります。 また、useEffect( 関数, []) のように配列の要素を空にした場合は、useEffect( 関数 ) のように第⼆引数を指 定しない場合と同じく、レンダリング直後に第⼀引数の関数が実⾏されます。 演習問題 次の機能を useState、useEffect を使って実装してみましょう。 1. ボタンを押すと 1 ずつ加算していく数字がある。この数字が、3 になった場合のみコンソール上 に適当な⽂字(例えば、「hoge」など)を表⽰する。 2. 1 つの int 型変数 (初期値0) と 1 つの Boolean 型変数 (初期値false) を⽤意する。前者はボタンを 押すごとに 1 ずつ加算されていき、後者は前者の数字の値が 3 になった場合に true に変わる。 Boolean 型変数が true に変わったら、コンソール上に適当な⽂字 ( 例えば、「hoge」など ) を表 ⽰する。 参考記事 useState や useEffect については、以下の記事もおすすめですので、是⾮あわせてご覧ください。 https://reffect.co.jp/react/react-hook-usestate-understand https://reffect.co.jp/react/react-useeffect-understanding フックのルールについては以下の公式ドキュメントをご覧ください。 https://ja.reactjs.org/docs/hooks-rules.html#explanation まとめ 今回は React Hooks ついて基本的なフック (useStateとuseEffect) を⽤いて学びました。他にも様々なフ ックがあるので、実際に活⽤できるよう引き続き学習をしていきましょう。 お知らせ
7.
チャットツール「discord」で勉強会の告知や、やりとりの場を設けております。 もしよろしければ下記 URL からご参加ください。 https://discordapp.com/invite/fr8CqPH
Download now