バケツリレーをやめる男のはなし

＜ある昼下がり＞

なになに..

Fugaボタンをクリックすると、Fugaが1増える。
Mogeは常にFugaよりも1大きくて、
Mugaは常にMogaの3倍である。

なるほどなぁ..

やとすれば、
Fugaボタンを一定回数クリックしたときの、MogeとMugaを一瞬にして求められたらうれしいなぁ...

Reactの勉強も兼ねてそうゆうのだれか作ってくれへんかなぁ...

こんなやつ...

...

...あぁ、自分でやったらええんか。
その方が勉強になるし...

＜つぎの日＞

できた！

src
├── components
│   ├── App.js
│   ├── Fuga.js
│   ├── Hoge.js
│   ├── Moge.js
│   └── Muga.js
└── index.js

componentsディレクトリがこんな風になってて...

App.js

import React,{useState} from 'react'
import Fuga from './Fuga'
import Hoge from './Hoge'

const App = () => {
  const [count, setCount] = useState(0)
  const moge = count + 1
  const muga = moge * 3
  return (
    <>
      <Fuga count={count} handleClick={() => setCount(count + 1)}/>
      <Hoge moge={moge} muga={muga} />
    </>
  )
}

export default App

最上位のコンポーネントApp.jsがでFugaコンポーネントとHogeコンポーネントを使ってて...

Fuga.js

import React from 'react'

const Fuga = ({count,handleClick}) => {
  return (
    <section>
      <h1>Fugaについて</h1>
      <p>ボタンを押すと、Fugaが1大きくなる。</p>
      <button onClick={handleClick}>Fuga</button> Fuga : {count}
    </section>
  )
}

export default Fuga

Appコンポーネントの子コンポーネントであるFugaコンポーネントに、FugaボタンとFugaの値を表示させて...

Hoge.js

import React from 'react'
import Moge from './Moge'
import Muga from './Muga'

const Hoge = ({moge,muga}) => {
  return (
    <section>
      <h1>MogeとMugaについて</h1>
      <p>MogeはFugaより1大きく、MugaはMogaの3倍である。</p>
      <Moge count={moge} />
      <Muga count={muga} />
    </section>
  )
}

export default Hoge

HogeコンポーネントにMogeとMugaのコンポーネントを置く...

Muga.js

import React from 'react'

const Moge = ({count}) => {
  return (
    <p> Moge : {count} </p>
  )
}

export default Moge

Mugaコンポーネントでmugaを受け取り、Mugaの値を表示する...

Moge.js

import React from 'react'

const Muga = ({count}) => {
  return (
    <p> Muga : {count} </p>
  )
}

export default Muga

Mogeコンポーネントでmogeを受け取り、Mogeの値を表示させる...

...

...できた。

...

...でも

...なんか、このHogeコンポーネントのここ...

Hoge.js

const Hoge = ({moge,muga}) => {
  return (
    <section>
      <h1>MogeとMugaについて</h1>
      <p>MogeはFugaより1大きく、MugaはMogaの3倍である。</p>
      <Moge count={moge} />
      <Muga count={muga} />
    </section>
  )
}

Hogeコンポーネントではmogeもmugaも使わへんのに、ただ受け取って、次のMogeとMugaのコンポーネントに渡してるだけやな...

今回は別にまあええけど、このFugaプロジェクトが波に乗ってもっと大きくなったら、このままやと大変になるな...

今のうちになんかええ方法考えとこ...

＜その日の晩＞

「konbanwa...」

はっ！！！
だれや！？

「createContextcreateContextcreateContextcreateContextcreateContextcreateContextcreateContextcreateContextcreateContextcreateContextcreateContextcreateContextcreateContextcreateContextcreateContextcreateContextcreateContextcreateContextcreateContextcreateContextcreateContextcreateContextcreateContextcreateContextcreateContextcreateContextcreateContextcreateContextcreateContextcreateContext...」

やめろっ！！！

「ProviderConsumerProviderConsumerProviderConsumerProviderConsumerProviderConsumerProviderConsumerProviderConsumerProviderConsumerProviderConsumerProviderConsumerProviderConsumerProviderConsumerProviderConsumerProviderConsumerProviderConsumerProviderConsumerProviderConsumerProviderConsumerProviderConsumer...」

やめてっっっ！！
そこだけはっ！！！！
うわ〜〜〜〜〜〜〜〜っ！！！！！！！

＜つぎの日の朝＞

ん...?
あぁ...なんや...夢か...
なんやったっけ...?

あぁ...せやせや、コンテキストがどうたらこうたらで...

...ってことは...
contextsディレクトリ作って、そこにAppContext.js作って...

src
├── components
│   ├── App.js
│   ├── Fuga.js
│   ├── Hoge.js
│   ├── Moge.js
│   └── Muga.js
├── contexts
│   └── AppContext.js
└── index.js

そしたらこんな感じか...

なんかProviderやらConsumerやらが云々カンヌン言っとったな...

AppContext.js

import {createContext} from 'react'

const AppContext = createContext()

export default AppContext

contextsディレクトリに置いたAppContext.jsをこう書いといて...

App.js

import AppContext from '../contexts/AppContext'

AppコンポーネントでAppContext.js読み込んで...

App.js

return (
  <>
    <AppContext.Provider value={{count,moge,muga}}>
      <Fuga count={count} handleClick={() => setCount(count + 1)}/>
      <Hoge moge={moge} muga={muga} />
    </AppContext.Provider>
  </>
)

returnの直下のDOMをProviderでラップして...
そのProviderにvalueとしてcountとmogeとmugaを渡す...

それから...

Moge.js

import React from 'react'
import AppContext from '../contexts/AppContext'

const Moge = () => {
  return (
    <p>
      Moge :
      <AppContext.Consumer>
        {value => <> {value.moge}</>}
      </AppContext.Consumer>
    </p>
  )
}

export default Moge

MogeコンポーネントでもAppContextを読み込んで...
こっちはConsumerを使う...
そしたら、Consumer中ではvalueのmogeが受け取れる...

Muga.js

import React from 'react'
import AppContext from '../contexts/AppContext'

const Muga = () => {
  return (
    <p>
      Muga :
      <AppContext.Consumer>
        { value => <> {value.muga}</> }
      </AppContext.Consumer>
     </p>
  )
}

export default Muga

Mugaコンポーネントもおんなじようにして...

Hoge.js

import React from 'react'
import Moge from './Moge'
import Muga from './Muga'

const Hoge = () => {
  return (
    <section>
      <h1>MogeとMugaについて</h1>
      <p>MogeはFugaより1大きく、MugaはMogaの3倍である。</p>
      <Moge />
      <Muga />
    </section>
  )
}

export default Hoge

これでHogeコンポーネントは無駄にmogeやらmugaやら受け取らんでもええようになったな...
できたな...

...

... でもなー

なんかなー...

Moge.js

<AppContext.Consumer>
  {value => <> {value.moge}</>}
</AppContext.Consumer>

この部分なんかスッキリせえへんねんな...

他になんかないんかな...

また時間あるとき考えとこ...

＜その日の晩＞

「maido...」

ん...?
またか？
だからだれやねん...

「useContextuseContextuseContextuseContextuseContextuseContextuseContextuseContextuseContextuseContextuseContextuseContextuseContextuseContextuseContextuseContextuseContextuseContextuseContextuseContextuseContextuseContextuseContextuseContext」

うゎぁぁぁぁぁーーーーーーー!!!!!!!!

＜次の日の朝＞

また変な夢やったな...

今回もなんか言っとったな...
えーと... なんやっけ...
useContextがなんちゃらかんちゃらやったかな...

Moge.js

import React, {useContext} from 'react'
import AppContext from '../contexts/AppContext'

const Moge = () => {
  const value = useContext(AppContext)
  return <p>Moge : {value.moge}</p>
}

export default Moge

reactからuseContextを読み込んで...
useContextの引数にappContextを渡してvalueを受け取る...
これでよし...

Muga.js

import React, {useContext} from 'react'
import AppContext from '../contexts/AppContext'

const Muga = () => {
  const value = useContext(AppContext)
  return <p> Muga : {value.muga} </p>
}

export default Muga

ほんでから、Mugaコンポーネントもおんなじように書く...
うん、こっちのほうが簡単で見やすいわ...

アイツええヤツやったな...

＜おわり＞

...そもそもFugaボタンってなんやねん！！！

バケツリレーをやめる男のはなし

＜ ある昼下がり ＞

＜ つぎの日 ＞

＜ その日の晩 ＞

＜ つぎの日の朝 ＞

＜ その日の晩 ＞

＜ 次の日の朝 ＞

参考

＜ある昼下がり＞

＜つぎの日＞

＜その日の晩＞

＜つぎの日の朝＞

＜その日の晩＞

＜次の日の朝＞