Open17

Weekly Input

1/12

会社のコンポーネントに関するディレクトリ構成を見直すために、参考にした記事
SPA Componentの推しディレクトリ構成について語る
Atomic Designをやめてディレクトリ構造を見直した話

Webフロントエンドの開発効率を高く保つための考え方

2021 JavaScript Rising Stars
slidevすごかった一年
solidjs期待してる

「3種類」で管理するReactのState戦略
大事なことは、これからの状態管理の方法が目的によって変わってくること

  • 一覧や詳細はキャッシュ
  • ページを跨いでの状態はGlobal(有名どころだとReduxなどを使う)
  • UIに関する状態は、useStateなどを使用する(例:アコーディオンとかの状態など)

https://www.youtube.com/watch?v=u26b4YcgUeI

フロントエンドのデザインパターン
翻訳前のものを読もうとしていたので助かる

1/19

clean code JavaScript(日本語訳)

https://github.com/mitsuruog/clean-code-javascript

Reactを取り巻く状態管理の潮流を学ぼう。HooksやServer Componentsなどの登場で何が変わるか

https://eh-career.com/engineerhub/entry/2022/01/13/090000

useContextSelector()

知らなかった。
実験段階であるが、検討されているよう

https://github.com/facebook/react/pull/20646

https://www.jetbrains.com/ja-jp/lp/javascript-25/

https://medium.com/fullstack-academy/thunks-in-redux-the-basics-85e538a3fe60

https://www.typescriptlang.org/cheatsheets

1/26

https://2ality.com/2022/01/structured-clone.html

シンプルなフォームに対してのステートを保持させる理由はなんでだっけ
となりました

https://twitter.com/asidorenko_/status/1482679799374098433?s=20
記事
https://www.swyx.io/no-controlled-forms/

https://vitest.dev/guide/mocking.html#requests

仮想DBみたいなものが作れるもの
初めて知った。
ORM的な感じで扱える すげえ

https://github.com/mswjs/data
https://zenn.dev/takepepe/articles/msw-data-userflow-testing

https://qiita.com/Saku731/items/741fcf0f40dd989ee4f8

3/2

個人のリポジトリでE2Eを試したい

https://nextjs.org/docs/testing

最高
自分も住所フォーム作って、記事だそう

https://blog.kenall.jp/entry/address-form-best-practice

みます

https://www.freecodecamp.org/news/best-practices-for-react/

https://t.co/qDSJ0nkLz2

まずこれよね。
制御フローでの型の分析が賢くなった。
下の例だと、actionで条件式を書くことで条件によって型を絞り込むことができる。

type Action =
    | { kind: "NumberContents", payload: number }
    | { kind: "StringContents", payload: string };

function processAction(action: Action) {
    if (action.kind === "NumberContents") {
        // `action.payload` is a number here.
        let num = action.payload * 2
        // ...
    }
    else if (action.kind === "StringContents") {
        // `action.payload` is a string here.
        const str = action.payload.trim();
        // ...
    }
}

3/16

現在はuseSelectorでstoreにあるstateを持ってきっているが、
connect関数で、取得する手法だった

https://zenn.dev/tk4/articles/820b0baeb41ee3fdaddf

withRouter関数
孫コンポーネントでは、historyオブジェクトなどが使えなかったため、使える状態にするための関数

https://v5.reactrouter.com/core/api/withRouter

https://qiita.com/sand/items/4aec0201befbe1483dc5
withRouter(connect(mapStateToProps)(ComponentName));

となっていたのがあまり理由がわからなかったため調べた

2.6になりました

https://prettier.io/blog/2022/03/16/2.6.0.html

https://postd.cc/the-sorrows-of-young-developer/
ログインするとコメントできます