LoginSignup
67
44

More than 3 years have passed since last update.

@nitaking(Satoshi Nitawaki)in株式会社エアークローゼット（airCloset）

React Live Conference 2020 に参加した話

Last updated at Posted at 2020-09-13

はじめに

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

https://user-images.githubusercontent.com/10850034/93012807-16115180-f5de-11ea-8353-daa35b6df2b9.png

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

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

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

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

トーク

The Phsycological effects of UseEffects

Speaker: Sara Vieira

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

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

  • useEffectでUnMountのtrigger

    • useEffectでUnMountのtrigger

      パターン1

      ...

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

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

...

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

      パターン2

      ...

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

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

...

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

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

    ...

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

useEffect(() => {
  // エンドレスrendering
    setNumber(timeClicked => timesClicked + 1)

    return () => {
        // renderingストップ
        setShowText((s) => !s)
    }
}, [showText])

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

Building a Markdown Editor from a design perspective

Speaker: Elizabet Oliveira

  • EUIのMarkdownEditorをつくりましたという話でした。

  • EUIは、Elastic UIというUIライブラリです。

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

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

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://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

  • GraphQL Code Generator

GraphQL Code Generator | GraphQL Code Generator

Design Systems & React in Small Team.

Speaker: Sid Kshetrapal

この回は出落ちでしたｗ

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

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

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

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

image.png

image.png

image.png

image.png

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

image.png

image.png

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

image.png

State management & Middleware for React Applications

Speaker: Jemima Abu

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

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

image.png

  • class stateとの違い
    image.png

  • Custom Hooksについて
    image.png

  • バケツリレーについて
    image.png

  • State Managementライブラリの紹介
    image.png

image.png

  • reducer
    image.png

  • Redux Middleware
    image.png

  • createContext
    image.png

  • Provider
    image.png

NextJS on AWS

Speaker: Nader Dabit

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
    "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

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

  • Deploy

    • SSG
    • SSR

  • AWS Amplify

    "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

  • 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

    • Auth - CSR

      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/28e8f230-cf01-6caa-97b5-617b1e43ac1e.png

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

Speaker: Ahmad Ahwais

続いても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/e64e78ae-af7a-137c-9ca5-1dc8dbc174d0.png

Building React UIs visually

Speaker: Yang Zhang

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/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

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

    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

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

今後にも期待です！

How to Build Your Portfolio with React

Speaker: Kapehe

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

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

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

Kapehe

From Context API to Recoil JS

Speaker: Eric Bishard

最後はRecoilです！

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

// 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)}`
})

// 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を使ったコードは参考になりそうですね！

...
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

個人的な気づき・良かった点

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

個人的な改善点

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

個人的な反省点

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

所感

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

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

現場からは以上です！

67
44
1

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
Sign upLogin
67
44