React Live Conference 2020 に参加した話

# はじめに

9月11日に開催された、React Live Conference Online 2020に参加してきました！

![https://user-images.githubusercontent.com/10850034/93012807-16115180-f5de-11ea-8353-daa35b6df2b9.png](https://user-images.githubusercontent.com/10850034/93012807-16115180-f5de-11ea-8353-daa35b6df2b9.png)

今回はそのイベントに参加したレポートになります。

なかなか英語が聞き取れなかったものもあるため、内容の正確性については保証できかねますが、ご了承ください🙏

また、個人の興味範囲によっては記事の濃さに偏りがありますためその点もご留意お願いいたします🙏

（割となぐり書きになってるところは許されたい！）

<blockquote class="twitter-tweet" data-theme="dark"><p lang="und" dir="ltr"><a href="https://twitter.com/hashtag/ReactLive?src=hash&amp;ref_src=twsrc%5Etfw">#ReactLive</a> <a href="https://t.co/d0lOfVdCi6">pic.twitter.com/d0lOfVdCi6</a></p>&mdash; nita-san (@nitaking_) <a href="https://twitter.com/nitaking_/status/1304450099368488962?ref_src=twsrc%5Etfw">September 11, 2020</a></blockquote> <script async src="https://platform.twitter.com/widgets.js" charset="utf-8"></script> 

# トーク

## The Phsycological effects of UseEffects

Speaker:  [Sara Vieira](https://twitter.com/nikkitaftw)

<img src="https://user-images.githubusercontent.com/10850034/93012961-6210c600-f5df-11ea-8e5f-cc94140010ea.png" width="300"> 

<blockquote class="twitter-tweet"><p lang="en" dir="ltr">Our first talk by the brilliant Sara Vieira (<a href="https://twitter.com/NikkitaFTW?ref_src=twsrc%5Etfw">@NikkitaFTW</a>) is ON!⚛️<br><br>After last year&#39;s stint as an MC we&#39;re honored to welcome her as a speaker &amp; hear her speak on the Psychological Effects of <a href="https://twitter.com/hashtag/UseEffects?src=hash&amp;ref_src=twsrc%5Etfw">#UseEffects</a>! 😱 <br><br>Intrigued? Get to our youtube channel: <a href="https://t.co/LvuoxtYR0U">https://t.co/LvuoxtYR0U</a> NOW! <a href="https://t.co/TC4BuEBV6p">pic.twitter.com/TC4BuEBV6p</a></p>&mdash; React Live Conference (@reactlivenl) <a href="https://twitter.com/reactlivenl/status/1304391326130155521?ref_src=twsrc%5Etfw">September 11, 2020</a></blockquote> <script async src="https://platform.twitter.com/widgets.js" charset="utf-8"></script>


序盤から最後まで、codesandboxを使って、useEffectとはどのような副作用が起きて、どういうシーンに使用できるかを丁寧に説明した内容でした。

- useEffectは次のClass Componentのライフサイクルを扱えるよ
    - componentDidMount
    - componentDidUpdate
    - componentWillUnmount
    - (4つめあったかな？)
- useEffectはdependenciesに不変のstringを与えても二度と変更されないよ
- useEffectでUnMountのtrigger
    - useEffectでUnMountのtrigger

        パターン1

        ```tsx
        ...

        const [showText, setShowText] = useState(true);
        const isMounted = useRef();

        useEffect(() => {
        	if(isMounted.current) {
        		console.log(showText)
          }
        })

        ...

        return(
        	<button ref={isMounted} / > 
        )
        ```

        パターン2

        ```tsx
        ...

        const [showText, setShowText] = useState(true);
        const isMounted = useRef();

        useEffect(() => {
        	return () => console.log('un mounted');
        })

        ...

        return(
        	<button ref={isMounted} / > 
        )
        ```

- 例えば、次のようなコードはエンドレスにrenderingされる

    ```tsx
    ...

    const [showText, setShowText] = useState(true);
    const isMounted = useRef();

    useEffect(() => {
      // エンドレスrendering
    	setNumber(timeClicked => timesClicked + 1)
    	
    	return () => {
    		// renderingストップ
    		setShowText((s) => !s)
    	}
    }, [showText])

    ```

👇このツイートに載ってるYoutubeにこのプレゼンがアップロードされてるので気になる方は見てみてください！

<blockquote class="twitter-tweet"><p lang="en" dir="ltr">Sara Vieira (<a href="https://twitter.com/NikkitaFTW?ref_src=twsrc%5Etfw">@NikkitaFTW</a>) is on 🔥 in her talk on The Psychological effects of <a href="https://twitter.com/hashtag/UseEffects?src=hash&amp;ref_src=twsrc%5Etfw">#UseEffects</a> - happening NOW on <a href="https://twitter.com/hashtag/ReactLive?src=hash&amp;ref_src=twsrc%5Etfw">#ReactLive</a> 2020! ⚛️<br><br>Trust us, you shouldn&#39;t miss this one! Tune in on youtube: <a href="https://t.co/LvuoxtYR0U">https://t.co/LvuoxtYR0U</a> NOW! <a href="https://t.co/rjlowTHcyN">pic.twitter.com/rjlowTHcyN</a></p>&mdash; React Live Conference (@reactlivenl) <a href="https://twitter.com/reactlivenl/status/1304394379851948034?ref_src=twsrc%5Etfw">September 11, 2020</a></blockquote> <script async src="https://platform.twitter.com/widgets.js" charset="utf-8"></script>

## Building a Markdown Editor from a design perspective

Speaker:  [Elizabet Oliveira](https://twitter.com/miuki_miu)

<img src="https://user-images.githubusercontent.com/10850034/93013258-b87f0400-f5e1-11ea-9185-5ba8c3f634b5.png" width="300"> 

<blockquote class="twitter-tweet"><p lang="en" dir="ltr">Please welcome the next speaker on our <a href="https://twitter.com/hashtag/ReactLive?src=hash&amp;ref_src=twsrc%5Etfw">#ReactLive</a> 2020 virtual stage, it&#39;s Elizabet Oliveira (<a href="https://twitter.com/miuki_miu?ref_src=twsrc%5Etfw">@miuki_miu</a>)!⚛️ <br><br>A product designer at <a href="https://twitter.com/elastic?ref_src=twsrc%5Etfw">@elastic</a>, after showing how to animate a SVG Cat last year, she will talk about Building a Markdown Editor from a design perspective!🤩 <a href="https://t.co/ox7ohB6GVh">pic.twitter.com/ox7ohB6GVh</a></p>&mdash; React Live Conference (@reactlivenl) <a href="https://twitter.com/reactlivenl/status/1304397591547912192?ref_src=twsrc%5Etfw">September 11, 2020</a></blockquote> <script async src="https://platform.twitter.com/widgets.js" charset="utf-8"></script>


- EUIのMarkdownEditorをつくりましたという話でした。
- EUIは、`Elastic UI`というUIライブラリです。

    ![https://user-images.githubusercontent.com/10850034/93013297-2fb49800-f5e2-11ea-9e9d-1b65408c3341.png](https://user-images.githubusercontent.com/10850034/93013297-2fb49800-f5e2-11ea-9e9d-1b65408c3341.png)

[](https://elastic.github.io/eui/#/editors-syntax/markdown-format)

- この `New` , `Beta` の表示の機能がこの作成した機能のようです。

![https://user-images.githubusercontent.com/10850034/93013282-ef551a00-f5e1-11ea-9561-953c921d33fe.png](https://user-images.githubusercontent.com/10850034/93013282-ef551a00-f5e1-11ea-9561-953c921d33fe.png)

- EuiMarkdown Editor
- EuiMarkdown Format
- EuiMarkdown Plugins
- このひとはDesignerで、Figmaのデザイン話が話の中心でした。（Reactの話どこ？）

## React Superpowers with GraphQL and TypeScript

Speaker:  [Roy Derks](https://twitter.com/gethackteam)

<img src="https://user-images.githubusercontent.com/10850034/93013602-d39f4300-f5e4-11ea-9e95-c166069f0ea3.png" width="300"> 

<blockquote class="twitter-tweet"><p lang="en" dir="ltr">Next up we have Hackteam founder Roy Derks (<a href="https://twitter.com/gethackteam?ref_src=twsrc%5Etfw">@gethackteam</a>) joining us here at the <a href="https://twitter.com/hashtag/ReactLive?src=hash&amp;ref_src=twsrc%5Etfw">#ReactLive</a> 2020 online conference! ⚛️ <br><br>His talk on <a href="https://twitter.com/hashtag/React?src=hash&amp;ref_src=twsrc%5Etfw">#React</a> Superpowers with <a href="https://twitter.com/hashtag/GraphQL?src=hash&amp;ref_src=twsrc%5Etfw">#GraphQL</a> and <a href="https://twitter.com/hashtag/TypeScript?src=hash&amp;ref_src=twsrc%5Etfw">#TypeScript</a> is definitely not the one to be missed! 😉 <br><br>Are you ready for it? <a href="https://t.co/sgweCgLcRG">pic.twitter.com/sgweCgLcRG</a></p>&mdash; React Live Conference (@reactlivenl) <a href="https://twitter.com/reactlivenl/status/1304404508450136064?ref_src=twsrc%5Etfw">September 11, 2020</a></blockquote> <script async src="https://platform.twitter.com/widgets.js" charset="utf-8"></script>


![https://user-images.githubusercontent.com/10850034/93013587-bff3dc80-f5e4-11ea-8a0a-446b41d069f9.png](https://user-images.githubusercontent.com/10850034/93013587-bff3dc80-f5e4-11ea-8a0a-446b41d069f9.png)

TypeScriptとGraphQLを使ったらめっちゃいいぜ！という話です。

具体的にどうやったらCode GenerateできるかのDemoがメインでした。

- TypeGraphQL

[TypeGraphQL · Modern framework for GraphQL API in Node.js](https://typegraphql.com/)

- GraphQL Code Generator

[GraphQL Code Generator | GraphQL Code Generator](https://graphql-code-generator.com/)

<blockquote class="twitter-tweet"><p lang="en" dir="ltr">Roy Derks (<a href="https://twitter.com/gethackteam?ref_src=twsrc%5Etfw">@gethackteam</a>) is owning the virtual stage at <a href="https://twitter.com/hashtag/ReactLive?src=hash&amp;ref_src=twsrc%5Etfw">#ReactLive</a> 2020 right now with his sensational talk on React Superpowers with <a href="https://twitter.com/hashtag/GraphQL?src=hash&amp;ref_src=twsrc%5Etfw">#GraphQL</a> and <a href="https://twitter.com/hashtag/TypeScript?src=hash&amp;ref_src=twsrc%5Etfw">#TypeScript</a>! ⚛️ <br><br>Take a look for yourself and subscribe to our youtube channel: <a href="https://t.co/WCxohVuZhm">https://t.co/WCxohVuZhm</a> for more Video Releases <a href="https://t.co/hNo61VPU11">pic.twitter.com/hNo61VPU11</a></p>&mdash; React Live Conference (@reactlivenl) <a href="https://twitter.com/reactlivenl/status/1304410282308100096?ref_src=twsrc%5Etfw">September 11, 2020</a></blockquote> <script async src="https://platform.twitter.com/widgets.js" charset="utf-8"></script>

## Design Systems & React in Small Team.

Speaker:  [Sid Kshetrapal](https://twitter.com/siddharthkp)
<img src="https://user-images.githubusercontent.com/10850034/93013765-786e5000-f5e6-11ea-980e-2798206d5092.png" width="300"> 

この回は出落ちでしたｗ

イントロのMovieがエンドレスに再生される、Liveならではのハプニングが💥

<blockquote class="twitter-tweet" data-lang="ja" data-theme="dark"><p lang="en" dir="ltr">We are honored to pass the mic to Sid Kshetrapal (<a href="https://twitter.com/siddharthkp?ref_src=twsrc%5Etfw">@siddharthkp</a>), a Developer and React UI Builder at <a href="https://twitter.com/codesandbox?ref_src=twsrc%5Etfw">@codesandbox</a>! 🎤 <br><br>He is about to share his expertise with everyone at <a href="https://twitter.com/hashtag/ReactLive?src=hash&amp;ref_src=twsrc%5Etfw">#ReactLive</a> 2020 with a talk on Design Systems &amp; React in Small Teams 🤯 <br><br>Are you as excited as we are? <a href="https://t.co/91LoKiitHy">pic.twitter.com/91LoKiitHy</a></p>&mdash; React Live Conference (@reactlivenl) <a href="https://twitter.com/reactlivenl/status/1304418049198567424?ref_src=twsrc%5Etfw">2020年9月11日</a></blockquote> <script async src="https://platform.twitter.com/widgets.js" charset="utf-8"></script>

（このイントロが5回は流れました。ギュイーンを聞くだけでニヤッとしてしまう）


![https://user-images.githubusercontent.com/10850034/93013815-cd11cb00-f5e6-11ea-9fd5-bfd387fc8e3f.png](https://user-images.githubusercontent.com/10850034/93013815-cd11cb00-f5e6-11ea-9fd5-bfd387fc8e3f.png)

コメント欄が面白くって、「It's userEffect with no dep」やら「useEffect(() ⇒ {playVideo()})」やら「white(true) playVideo()」やら、エッジの効いたコメントが秀逸でめっちゃ笑いました。

---

さて、本題はDesign Systemを使うことで、パワフルで効率のよいスタイリングができるぜ！って話。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/103475/236f992e-5aa2-be15-d8bb-5d5822be2992.png)

この方もFigma使ってましたね。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/103475/a67ad75d-9572-ae41-a303-474eaa38c915.png)

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/103475/27acac4f-f2c0-621f-0073-5ba1f74e6b6c.png)

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/103475/60fba54b-2f8e-86b2-b9fd-a9d783dfc070.png)

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/103475/e021cf07-5c21-4102-2fe3-e9e958baac5a.png)

marginの取り方も`gap`として定数化してしまうのは、Atomic Designを実装ベースで行う場合に参考になりそうですね。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/103475/e7e1a573-852e-a6b8-0241-0465309cd08b.png)

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/103475/efd48233-3c3a-9340-a786-eddb5e2fdbaa.png)

chromaticを使ってDesignシステムを運用しているようです！使ってみたい。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/103475/dda36422-ed26-0e35-a7a3-0314cddd564c.png)

https://www.chromatic.com/

## State management & Middleware for React Applications

Speaker: [Jemima Abu](https://twitter.com/jemimaabu)


<img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/103475/331f475f-3998-cc63-7fa0-6309b5479896.png" width="300"> 

<blockquote class="twitter-tweet"><p lang="en" dir="ltr">Hope you’re not getting tired because Jemima Abu (<a href="https://twitter.com/Jemimaabu?ref_src=twsrc%5Etfw">@Jemimaabu</a>) is here on <a href="https://twitter.com/hashtag/ReactLive?src=hash&amp;ref_src=twsrc%5Etfw">#ReactLive</a> 2020 ⚛️ <br><br>An experienced front-end developer at <a href="https://twitter.com/TeleSoftas?ref_src=twsrc%5Etfw">@TeleSoftas</a>, she will talk to you about <a href="https://twitter.com/hashtag/StateManagement?src=hash&amp;ref_src=twsrc%5Etfw">#StateManagement</a> &amp; <a href="https://twitter.com/hashtag/Middleware?src=hash&amp;ref_src=twsrc%5Etfw">#Middleware</a> for <a href="https://twitter.com/hashtag/React?src=hash&amp;ref_src=twsrc%5Etfw">#React</a> Applications! 🤩 <br><br>Will you be joining us? <a href="https://t.co/c4n96NKFto">pic.twitter.com/c4n96NKFto</a></p>&mdash; React Live Conference (@reactlivenl) <a href="https://twitter.com/reactlivenl/status/1304426637119942658?ref_src=twsrc%5Etfw">September 11, 2020</a></blockquote> <script async src="https://platform.twitter.com/widgets.js" charset="utf-8"></script>

class stateからuseStateに変わってコード的にどうなるかをゆっくり丁寧に触れていました。
State Managementについては実質Contextの説明とライブラリにちょっと触れただけでした。
入門者向けな発表だったのでしょうか？

- 導入はreduxディスから
- state管理はいろんな選択肢あるよ

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/103475/1678c96a-84c5-b1ef-d523-ed8011a7b179.png)

- class stateとの違い
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/103475/b4f6e60f-e345-95fb-b7c3-3fb6f03a9e69.png)

- Custom Hooksについて
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/103475/9ca2a8ad-dec7-d78f-de9a-162463020322.png)

- バケツリレーについて
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/103475/688020b7-0587-0b52-c282-12c29a419871.png)

- State Managementライブラリの紹介
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/103475/eb7f2f73-4957-838b-5a65-e3379f414c1b.png)

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/103475/e3b17845-8bb6-9a0d-5889-6bf01f30ad82.png)

- reducer
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/103475/63b9cd9c-8a58-545b-8e78-c23ec57b49c7.png)

- Redux Middleware
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/103475/9a688ab2-c897-e9b3-2379-098e19555ddd.png)


- createContext
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/103475/2b6ec9b8-a1e8-5feb-5eb4-89fa29de932a.png)

- Provider
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/103475/12e8d3c3-50c8-0a3b-c0c3-d32b9e269bbb.png)

## NextJS on AWS

Speaker: [Nader Dabit](https://twitter.com/dabit3)

<img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/103475/c42fff95-41ec-723b-4f22-6cab25763e1f.png" width="300"> 

<blockquote class="twitter-tweet"><p lang="en" dir="ltr">Tune in for an exclusive premier at 17:30 CEST on our Youtube Channel and learn from Nader Dabit <a href="https://twitter.com/dabit3?ref_src=twsrc%5Etfw">@dabit3</a> at <a href="https://t.co/ojPdfNaFvF">https://t.co/ojPdfNaFvF</a> <br>Want access to more amazing talks? Make sure to Subscribe! <a href="https://twitter.com/hashtag/reactlive?src=hash&amp;ref_src=twsrc%5Etfw">#reactlive</a> ⚛️ <a href="https://t.co/x2lfy7zmqo">pic.twitter.com/x2lfy7zmqo</a></p>&mdash; React Live Conference (@reactlivenl) <a href="https://twitter.com/reactlivenl/status/1304434811856195589?ref_src=twsrc%5Etfw">September 11, 2020</a></blockquote> <script async src="https://platform.twitter.com/widgets.js" charset="utf-8"></script>


Naderは最高のスピーカーでした！

Nextjsにおける、SSG, SSR, CSRの話です。

- Deploying + APIS / SSR
- Nextjsとは
    - CSR
    - SSR
    pre-rendering
    - SSG
    pre-rendering
- pre renderingメリット
    1. Speed
    2. SEO
    3. scalability
- static site
- Server rendered
    - on demand
    - requires runtime execution
- Which one?

- SSR | SSG
    - Default - SSG
    - getStaticProps - SSG
    - getStaticPaths - SSG
    - getServerSideProps - SSR
    - API Routes - SSR

    ```bash
    "scriptes": {
    	"dev": "next dev",
    	"build": "next build",
    	"start": "next start",
    	"export": "next export",
    }

    # export - static site generation only
    ```

    ![https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/103475/c31c5d4d-a946-2405-fca2-f21a8b8e9f0a.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/103475/c31c5d4d-a946-2405-fca2-f21a8b8e9f0a.png)

    ページごとにSSGとSSRを選択できる！？

- Deploy
    - SSG
    - SSR
- AWS Amplify

    ```bash
    "scriptes": {
    	"dev": "next dev",
    	"build": "next build && next export",
    	"start": "next start"
    }

    ```

- Serverles Framework
`nextJsAWSApp` がある

    ![https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/103475/0429e37f-e964-be03-f104-dfbb7c3ec19b.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/103475/0429e37f-e964-be03-f104-dfbb7c3ec19b.png)

- API
    - SSR config
    - AUTH + DATA
    - SSR DATA

        ![https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/103475/ae8c7bc7-9aa2-df6f-d2a0-ee24a225e28d.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/103475/ae8c7bc7-9aa2-df6f-d2a0-ee24a225e28d.png)

    - Auth - CSR

        ![https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/103475/b558ce94-2cda-3c0d-a9e2-4de5e8abc6f2.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/103475/b558ce94-2cda-3c0d-a9e2-4de5e8abc6f2.png)

    - SSR Auth

        ![https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/103475/b0f165c9-27a3-57fb-ee59-627bc25210b7.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/103475/b0f165c9-27a3-57fb-ee59-627bc25210b7.png)

        ![https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/103475/28e8f230-cf01-6caa-97b5-617b1e43ac1e.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/103475/28e8f230-cf01-6caa-97b5-617b1e43ac1e.png)

<blockquote class="twitter-tweet"><p lang="en" dir="ltr">We are halfway through Nader Dabit&#39;s (<a href="https://twitter.com/dabit3?ref_src=twsrc%5Etfw">@dabit3</a>) talk 🤓 He is sharing knowledge on how to take advantage of everything <a href="https://twitter.com/hashtag/NextJS?src=hash&amp;ref_src=twsrc%5Etfw">#NextJS</a> has to offer combined with the scalability of Serverless AWS as an all-in-one cloud solution for <a href="https://twitter.com/hashtag/frontend?src=hash&amp;ref_src=twsrc%5Etfw">#frontend</a> developers. Follow <a href="https://twitter.com/hashtag/reactlive?src=hash&amp;ref_src=twsrc%5Etfw">#reactlive</a> for more! ⚛️ <a href="https://t.co/FGrHoZWt7N">pic.twitter.com/FGrHoZWt7N</a></p>&mdash; React Live Conference (@reactlivenl) <a href="https://twitter.com/reactlivenl/status/1304445093529686018?ref_src=twsrc%5Etfw">September 11, 2020</a></blockquote> <script async src="https://platform.twitter.com/widgets.js" charset="utf-8"></script>


## The heck is CSR, SSR, & SSG in Next.js

Speaker: [Ahmad Ahwais](https://twitter.com/MrAhmadAwais)


<img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/103475/10cd463f-ca66-7e0c-9a3b-4f6ae45cd83e.png" width="300"> 


続いてもNextjsの話です。

実際にCSR, SSR, SSGで実装されたサンプルサイトを使って話しています。

CSR、SSR、SGRの違いをhtmlのレスポンスベースで解説してくれました！

このサンプルサイトが非常に良くできており、このサイトに

- メリット
- デメリット
- ユースケース
- リスク

などなどが記載されています！

あと少しブラッシュアップすれば公開するよ！と言っていたので、期待して待っていましょう！

![https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/103475/8ce5e6f1-0e50-b623-a813-57c47b99f0fd.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/103475/8ce5e6f1-0e50-b623-a813-57c47b99f0fd.png)

![https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/103475/e64e78ae-af7a-137c-9ca5-1dc8dbc174d0.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/103475/e64e78ae-af7a-137c-9ca5-1dc8dbc174d0.png)


## Building React UIs visually

Speaker: [Yang Zhang](https://twitter.com/yaaang)


<img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/103475/b82c4e23-e560-e3a8-a00a-2cb872e09a58.png" width="300"> 

<blockquote class="twitter-tweet"><p lang="en" dir="ltr">Yang Zhan (<a href="https://twitter.com/yaaang?ref_src=twsrc%5Etfw">@yaaang</a>) is in the house 🏘 Yang went from big companies like <a href="https://twitter.com/Google?ref_src=twsrc%5Etfw">@Google</a> and <a href="https://twitter.com/Microsoft?ref_src=twsrc%5Etfw">@Microsoft</a> to building <a href="https://twitter.com/plasmicapp?ref_src=twsrc%5Etfw">@plasmicapp</a> 🛠. His talk starts in a few minutes. Get ready to learn all the secrets on building <a href="https://twitter.com/hashtag/React?src=hash&amp;ref_src=twsrc%5Etfw">#React</a> UIs visually <a href="https://twitter.com/hashtag/reactlive?src=hash&amp;ref_src=twsrc%5Etfw">#reactlive</a> ⚛️ <br><br>Are you joining us? <a href="https://t.co/lBXsuQrjKI">pic.twitter.com/lBXsuQrjKI</a></p>&mdash; React Live Conference (@reactlivenl) <a href="https://twitter.com/reactlivenl/status/1304458974243233792?ref_src=twsrc%5Etfw">September 11, 2020</a></blockquote> <script async src="https://platform.twitter.com/widgets.js" charset="utf-8"></script>

![https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/103475/a3afb98f-4a89-0aed-8af1-977e941b100a.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/103475/a3afb98f-4a89-0aed-8af1-977e941b100a.png)

すごい世界がすぐそこかも？

Figmaでデザインしたコードが、stateの設定やTouchableの設定も込で、codesandboxで自動デプロイされるPlasticのご紹介！

![https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/103475/bed756d5-9ebd-4386-9077-de0d933e58cb.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/103475/bed756d5-9ebd-4386-9077-de0d933e58cb.png)

![https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/103475/8e513e92-e68b-41d7-402f-5ebf4c0d7694.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/103475/8e513e92-e68b-41d7-402f-5ebf4c0d7694.png)

- FigmaからReactコードが自動生成される
- codesandboxへのdeployがされる

    ![https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/103475/43f9605e-44fc-6862-f2e7-c9d38f2cc3e4.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/103475/43f9605e-44fc-6862-f2e7-c9d38f2cc3e4.png)

- local のソースとsyncすることも可能

    ![https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/103475/65eb2ece-8656-60a9-3edc-bbd610f4125c.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/103475/65eb2ece-8656-60a9-3edc-bbd610f4125c.png)

- **懸念**
    - codegenのメンテナンスは大丈夫？
    - 一応、container componentとpresentational componentが別れてるからロジックの注入は可能だけど、codegenしたコードをて修正してしまった瞬間破綻しそう。どうやってプロテクトするんだろう
    - ツールの学習コストや運用コストが掛かる可能性。デザイナーにstate設定とかを強いるの？？
- これからのチャレンジ
    - シンプルなレイアウト
        - 自動生成によって、難解なスタイルが生成されてしまう

            ![https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/103475/9c5a0c67-c3a2-2d82-0039-1e0c38cbfdc2.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/103475/9c5a0c67-c3a2-2d82-0039-1e0c38cbfdc2.png)

まだまだ懸念も多いようで、実験段階のようにも見えますが、今後はこういったgenerate codeのツールを使い倒していく開発フローが一般化していくのかもしれませんね。

今後にも期待です！

## How to Build Your Portfolio with React

Speaker: [Kapehe](https://twitter.com/kapehe_ok)

<img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/103475/1c693506-64b7-825a-0b12-dd7d59a70e89.png" width="300"> 

<blockquote class="twitter-tweet"><p lang="en" dir="ltr">Right after the break, the mic goes to Kapehe (<a href="https://twitter.com/kapehe_ok?ref_src=twsrc%5Etfw">@kapehe_ok</a>). The developer relations at <a href="https://twitter.com/sanity_io?ref_src=twsrc%5Etfw">@sanity_io</a> will walk us through the build of a portfolio. She will discuss what is most effective in a portfolio, what people are looking for, and how to catch the viewer&#39;s eye! <a href="https://twitter.com/hashtag/reactlive?src=hash&amp;ref_src=twsrc%5Etfw">#reactlive</a> ⚛️ <a href="https://t.co/b0lcItytTe">pic.twitter.com/b0lcItytTe</a></p>&mdash; React Live Conference (@reactlivenl) <a href="https://twitter.com/reactlivenl/status/1304473230724431873?ref_src=twsrc%5Etfw">September 11, 2020</a></blockquote> <script async src="https://platform.twitter.com/widgets.js" charset="utf-8"></script>

ポートフォリオはだれのために、なんのためにつくるのか？

![https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/103475/14395470-d163-cc94-4810-d30b99859429.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/103475/14395470-d163-cc94-4810-d30b99859429.png)

ちゃんとしたポートフォリオサイトのメンテナンスをしたくなりました！

[Kapehe](https://kapehe.io/)

## From Context API to Recoil JS

Speaker: [Eric Bishard](https://twitter.com/httpJunkie)

<img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/103475/31eb6144-4add-187f-c387-991c3f31afb1.png" width="300"> 

<blockquote class="twitter-tweet"><p lang="en" dir="ltr">Last keynote of the day! 🔥 Eric Bishard (<a href="https://twitter.com/httpJunkie?ref_src=twsrc%5Etfw">@httpJunkie</a>) - a Developer Advocate for the <a href="https://twitter.com/hashtag/JavaScript?src=hash&amp;ref_src=twsrc%5Etfw">#JavaScript</a> and <a href="https://twitter.com/hashtag/Nodejs?src=hash&amp;ref_src=twsrc%5Etfw">#Nodejs</a> community at <a href="https://twitter.com/couchbase?ref_src=twsrc%5Etfw">@couchbase</a> will will walk you through the many Recoil JS Hooks API&#39;s that make it easy to make the transition from Context API. <a href="https://twitter.com/hashtag/reactlive?src=hash&amp;ref_src=twsrc%5Etfw">#reactlive</a>⚛️ <a href="https://t.co/d9r2Ye23sX">pic.twitter.com/d9r2Ye23sX</a></p>&mdash; React Live Conference (@reactlivenl) <a href="https://twitter.com/reactlivenl/status/1304484453503381504?ref_src=twsrc%5Etfw">September 11, 2020</a></blockquote> <script async src="https://platform.twitter.com/widgets.js" charset="utf-8"></script>

最後はRecoilです！

![https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/103475/f8478e21-031f-5612-d185-8431a0764ca0.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/103475/f8478e21-031f-5612-d185-8431a0764ca0.png)

既存のContextのデータフローからRecoilに置き換えるとどんなコードになるのか、Liveコーディングで置き換え作業をやってくれました。

今までなんとなくRecoilの概要を知っていたのですが、具体的なコードとして見ることで「あー、シンプルになって良さそうだな・・・」を肌感で感じました。

![https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/103475/c7d4b38f-fcf4-baa2-6009-1c6af2ea4bd8.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/103475/c7d4b38f-fcf4-baa2-6009-1c6af2ea4bd8.png)

```tsx
// AppAtom.js
import { atom, selector } from 'recoil'

export const navOpenRecoil = atom({
  key: 'navOpenRecoil',
  default: false
})
export const themeRecoil = atom({
  key: 'themeRecoil',
  default: ''
})

export const themeTextRecoil = selector({
  key: 'themeTextRecoil',
  get: ({get}) => `The theme is ${get(themeRecoil)}`
})
```

```tsx
// useThemeInitializer.js
import { useEffect } from 'react'
import { useRecoilState } from 'recoil'
import { useMediaPredicate } from 'react-media-hook'

import { themeRecoil } from './AppAtoms'

export const useThemeInitializer = () => {
  const [ theme, setTheme] = useRecoilState(themeRecoil)
  const preferredTheme = useMediaPredicate('(prefers-color-scheme: dark)') 
   ? 'dark'
   : 'light'

  useEffect(() => {
    setTheme(preferredTheme || localStorage.getItem('recoilApp_theme'))
  }, [preferredTheme, setTheme])

  useEffect(() => {
    localStorage.setItem('recoilApp_theme', theme)
  }, [theme])

  return { theme }
}
```

`themeTextRecoil` で使っているgetは、値のフォーマットに便利そうですね。

一つ一つが小さくまとまっているのでシンプルで可読性も高いです。

atomFamilyとuseRecoilStateを使ったコードは参考になりそうですね！

```tsx
...
import { atomFamily, useRecoilState } from 'recoil'

export const favoriteById = atomFamily({
  key: 'favorite',
  default: {
    name: '',
    vacancy: '',
    booked: false,
  }
})

const Favorite = ({ id }) => {
  const [{ name, vacancy, booked }, setFavorite] = useRecoilState(favoriteById(id))
...
```

このプレゼンテーションで使ったコードはGithubに公開されています！

[httpJunkie/react-context-to-recoil-js](https://github.com/httpJunkie/react-context-to-recoil-js/)

# 個人的な気づき・良かった点
- Plasticなどの新しいサービス情報のインプット
- Recoilの実践的コードのインプット
- リアルタイムだからこそのイベントも楽しめる
- コメント欄が地味に面白いし、登壇者に質問もできる
- 人によって聞き取りやすい発音のひとと、聞き取れねぇｗってひとがいた。

# 個人的な改善点
- 前半と後半のレベル感の統一。前半のuseEffectとstateの話をそれぞれ30分聞いたときはマジで寝そうだった。ターゲット層が入門者としてももう少しレベル感高くていいのでは。このconfに参加している層は中級者以上だと思うんだけどな🤔

# 個人的な反省点
- 海外confで字幕なしのリスニングするの本当にきつい。
特にスライド終了後の質疑応答を追いかけるのはきつかった・・・何もわかってなかった・・・。

# 所感
長丁場でしたが、結果として得るものが多くありました。いろんなライブコーディングが見れるのはいいですね！
途中、「あれ、これReactのイベントだよね・・・」と考えてしまったプレゼンもありましたが、それも含めて様々な種類の発表がありました。

海外カンファレンスって何もわからないかなーと身構えてましたが、意外となんとかなりました。一方で、英語のリスニング力がないとキャッチアップできない内容や深い理解ができないと思われますので、次回までには鍛えておこうと思いました・・・。

<blockquote class="twitter-tweet" data-theme="dark"><p lang="ja" dir="ltr"><a href="https://twitter.com/hashtag/ReactLive?src=hash&amp;ref_src=twsrc%5Etfw">#ReactLive</a> 見てて、スライドがあるときは伝わるしコードは読めるからいいんだけど、スライドがない質疑応答タイムがマジで聞き取れなくって、本当に英語が分かるようになりたい。（と決意した）</p>&mdash; nita-san (@nitaking_) <a href="https://twitter.com/nitaking_/status/1304472939908087809?ref_src=twsrc%5Etfw">September 11, 2020</a></blockquote> <script async src="https://platform.twitter.com/widgets.js" charset="utf-8"></script> 


現場からは以上です！