Open26

Weekly Input

yutoyuto

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

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

yutoyuto

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

yutoyuto

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

yutoyuto

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();
        // ...
    }
}
yutoyuto

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/

yutoyuto

10/30
Vue Fes 参加した

ウェブアクセシビリティについてと、Nuxtで画面遷移におけるアクセシビリティどういう点に考慮し、実装すべきかを、コード、実際の動きを用いて説明
https://yamanoku.net/vuefes-japan-2023/ja/

改正障害者差別解消法と環境の整備について
ウェブサイトをアクセシブルにすることが義務化されたのではなく、
ウェブサイトをアクセシブルにすることは、「合理的配慮」が求められる個別事案発生の事前的改善措置である「環境の整備」にあてはまる。
https://accessible-usable.net/2023/07/entry_230719.html

https://zenn.dev/nakaakist/articles/86457bf2908379