Zenn
Open22

開発わからん

brainvaderbrainvader

inputが親要素にフィットしない

gridレイアウトで枠をdivで決めて子要素としてinputを配置したらはみ出した。

widthを100%設定にしたら一応解決した。

brainvaderbrainvader

Readonlyの違い

Readonly<string[]>
Readonly<string>[]

この違いが何となく分かるがうまく説明できない。

brainvaderbrainvader

useContextのエラー

'use client'

を付けないと以下のようなエラーが出る。

⨯ TypeError: (0 , react__WEBPACK_IMPORTED_MODULE_4__.useContext) is not a function
    at BasicInfo (./components/basic-info.tsx:18:80)
    at stringify (<anonymous>)
    at stringify (<anonymous>)
brainvaderbrainvader

Context APIによる状態管理

状態モデル

コンテクストの作成

Providerの作成

brainvaderbrainvader

XStateでcontextを更新する、又そのタイプ

contextを更新する

ペイロードがある場合は以下のようになる.

type BlockEvent =
    | { type: "DOUBLE_CLICK" }
    | { type: "CLICK" }
    | { type: "ESCAPE" }
    | { type: "CHANGE", content: string }

export const States = {
    RENDERING: "rendering",
    SELECTING: "selecting",
    EDITING: "editing",
    UPDATE: "update"
}

export const BlockMachine = setup({
    types: {
        context: {} as BlockContext,
        events: {} as BlockEvent
    }
}).createMachine({
    initial: States.RENDERING,
    context: { ...context },
    states: {
        // ...
        [States.EDITING]: {
            on: {
                ESCAPE: {
                    target: States.RENDERING
                },
                CHANGE: {
                    actions: assign({
                        content: ({ event }) => event.content
                    })
                }
            }
        },
    }
})

ユニオン型はエディタが補間してくれるので

const DOUBLE_CLICK = "DOUBLE_CLICK";

みたいなタイプミスを減らす努力が要らないのがいいですね。

brainvaderbrainvader

flexで画面を割合で分割

flex-basisを使うと初期サイズを指定できる。幅100%なのでgrowは考えずにこれだけ指定してもちゃんと動いた。

brainvaderbrainvader

ソースマップエラー: Error: request failed with status 404

何が原因が良く分から理ませんが, page.tsxにuse clientを付けたら消えました。どこかでサーバーへのリクエストが生じていたものと思います。

brainvaderbrainvader

Next.jsビルドが通らなかったオブジェクト

const data = {
    "ユリウス・カエサル": ""
}

のように中点を入れるとなぜかSSGで

Error: Failed to collect page data for....

のようなエラーが出た。開発ビルドだと通るので謎である。

brainvaderbrainvader

ユニークな要素だけからなる配列の型はどうするのか?

brainvaderbrainvader

WindowsでSSH

接続確認

ssh -T git@github.com

ed25519でキーペアの生成

ssh-keygen -t ed25519 -C "your_email@example.com"

~/.ssh/以下にid_25519とid_25519.pubのペアが生成されます。パスフレーズは設定しません。

ssh-keygen -p -f ~/.ssh/id_25519

でパスフレーズは変更できます。

Generating a new SSH key and adding it to the ssh-agent

SSH-agent

こんな感じで登録できる。

ssh-add ~/.ssh/id_ed25519

以下を参考に自動で起動するようにした。(設定してないが)パスフレーズを聞かれるのが少し面倒。

Working with SSH key passphrases

GitHubへの登録

Adding a new SSH key to your GitHub accountを参照する。

brainvaderbrainvader

Nxワークスペース下のtauriを起動する.

Rustツールチェインのインストール

Rust is installed now. Great!

To get started you may need to restart your current shell.
This would reload its PATH environment variable to include
Cargo's bin directory (%USERPROFILE%\.cargo\bin).

npx nx run gaku-note:dev
brainvaderbrainvader

Context APIを用いたHeadless UI?

コンポーネントを階層化した場合にchildrenにpropsを渡す場合はどうすればよいのか？React.cloneElementを使うというような話もあったが、よく考えたらContext APIがあるじゃないか。

Build your own headless UI components

useReducerと組み合わせるとなおよいのかもしれない。

Scaling Up with Reducer and Context

Actionはユニット型として指定しとくと良いかもしれない.

Building React Components Using Unions in TypeScript

brainvaderbrainvader

Providerの初期値

単純にProviderを含むコンポーネントのpropsで指定すればよい。

import { LevelContext } from './LevelContext.js';

export default function Section({ level, children }) {
  return (
    <section className="section">
      <LevelContext.Provider value={level}>
        {children}
      </LevelContext.Provider>
    </section>
  );
}

Step 3: Provide the context

brainvaderbrainvader

状態とディスパッチをコンテクストで渡す

const [state, dispatch] = userReducer(reducer, initialState);

これを

<MyContext.Provider value={state}>
    <MyDispatchContext.Provider value={dispatch}>
        {children}
    </MyDispatchContext.Provider>
</MyContext.Provider>
brainvaderbrainvader

Tailwindのgridがちゃんと動かない.

col-spanが1, 3, 4の場合は動くが, 2の場合が動かない。