Open5

わからんことを調べる(React, styled-jsx, Firebase, UI)

ピン留めされたアイテム

わからないこと・迷ってることを調べます

  1. React Contextについて
    (ステートの設計をちゃんとしないと破綻する)
  2. Reactのモーダル設計はどうすりゃいいのか
    (React Contextを使って管理 or その都度ステートで表示)
  3. styled-jsxはダメなのか
    (Next.jsでtailwind cssが流行っていることや、CSSの管理をどうすればよいかわからん)
  4. Styled-jsxが実質的にGlobalにしなければならない問題
    (Global以外に一時Globalなど代替方法があるらしい?)
  5. UI設計はどうすりゃいいのか
    (永遠のテーマ。)
  6. PCでのジェスチャー動作の導入はアリか
    (Framer motionを使ったジェスチャー動作が楽しいので導入したいが、本当に良い選択か)
  7. Firebase CloudFirestoreに依存するのはダメなのか
    (サーバーレスをこだわり続けたいがしんどさもある)

React Contextについて

Nuxt.jsと違い、結構簡単にグローバルなステート管理ができるらしい。とってもいい!

https://qiita.com/ryokkkke/items/dc25111fcf52ea579d58

上の階層でWrapすることで、その時点にpropへ入れた値を渡せるらしい。めっちゃいい

Function ComponentでもHooksのようにデータを取り出せるので、勉強も必要なく、素晴らしい機能です🎉

Reactのモーダル設計はどうすりゃいいのか

Reactでモーダルを表示する時、ページごとにuseStateでOn/Off管理するのは結構大変。
React Contextを利用する場合には、どのように記述するか見たい。

Next.js 10の発表会で公開された Next.js commerceではどうしているのか

https://zenn.dev/yasude/articles/5ac7cba33e1403

この記事の内容がとても丁寧に書かれていて参考になりました!

モーダルを管理する方法

  1. React Contextを利用し、全体のUIのステートを管理(components/ui/context.tsx)
  2. Contextのステートを読み取り、Layoutコンポーネント(common/Layout/Layout.tsx)でコンポーネントを表示/非表示

このように管理されていました。とてもわかりやすい🎉

実際に表示する方法

  1. (components/ui/context.tsx)にある useUI をimportする
  2. 使用したいコンポーネントに関係するaction.typeをconstで持ってくる
    const { openModal, setModalView } = useUI()
  3. Modalの場合:setModalViewを指定する
    setModalView('LOGIN_VIEW')
  4. openModalを実行する
    return openModal()

すごくわかりやすい手順で設計されています。開発しやすいしとってもいい👍

https://github.com/vercel/commerce/blob/master/components/wishlist/WishlistButton/WishlistButton.tsx

仕組み

UIContextに入っているinitialStateの中身を返している。
initialStateには、各コンポーネントの表示状態を管理できる変数が入っている。
useContextによって管理されているため、変更することによってuseReducerが発火し、UIProviderのUIContext.Providerのvalueが変更され、表示できる。

https://github.com/vercel/commerce/blob/bbcf63b892f60a51c836bd8edcdab33aabf31dc1/components/ui/context.tsx#L173

styled-jsxはダメなのか

Nuxt.jsでCSSゴリゴリ書いてた身からすれば、styled-jsxは最高です。
しかし、Next.jsのこれからを見た際に、styled-jsxはどうなのか、というのがずっと引っかかってます。

styled-jsxを気に入る理由

CSS Modulesの場合コンポーネント毎にCSSファイルが必要となるが、styled-jsxを利用すると1ファイルで完結するためCSS書くのがすっごい簡単になる。

CSSが好きな人は、styled-jsxが好きなのである

styled-jsxが気に入らない理由

パッケージのコンポーネントを混合させた場合に、className指定が効かなくなる。
結局global指定せざるおえないので、とっても辛い上、パフォーマンスに対しても悪影響。よくない。
(globalセレクタについては次で調べる)

結局どうしたらいいのか

https://zenn.dev/matamatanot/articles/e0e6371fe28b7479fb3f
https://nextjs.org/docs/basic-features/built-in-css-support

styled-jsxは総合的な観点からCSS Modulesへ推奨するといった文言に切り替えるべきとの意見もあるが、そもそもCSS Modules自体の将来性に疑問を持たれているらしい...
ワシはどうすりゃええんや...

とりあえず、
移行はめちゃめちゃ大変なので保留ということで...😩😩

styled-jsxが実質的にGlobalにしなければならない問題

ReactパッケージなどでclassNameが効かない場合が多くあるため、これまで <style jsx global></style> を利用していたが、これではグローバルにスタイルが適応されてしまうため、パフォーマンスやCSSの重複などが問題になる可能性がある。

One-off global selectors

SCSSのように、ネストしたclassNameを簡単に指定できる物があるらしい。

https://github.com/vercel/styled-jsx#one-off-global-selectors

https://inside.dmm.com/entry/2018/05/14/react-styled-jsx

コンポーネント毎に読み込まれるのか記載がないのでわからないが、globalを使うよりも圧倒的に良いはずなので、どんどん使っていきたい😎😎

ログインするとコメントできます