常連

自己紹介

### 実現したいこと
掲載の件につきまして、実装初期から躓いてしまいました。
解決策について教えて頂きたいです。
また、Next.jsで単純なルーティングぐらいしかしたことがなく、threeのモジュール等(CSRで実装しないとエラーになってしまう？)の扱いにあまり詳しくないので意識するポイントなど教えていただけれと思います。
(CSRやSSRなどの特徴は分かりますが、正直ほぼ制作で意識したことがありませんので、ブラウザのAPIなど使用する際はCSRでないといけないなども本件で「言われてみれば確かにそうだよね」となりました。)


### 発生している問題・分からないこと
＝＝フォルダ構成＝＝
src直下に
「Componentsフォルダ」/「page.js」→以降ComponentsPageと略します。
「appフォルダ」/page.js→以降appPageと略します
があります。

npm run dev で下記のエラーが出ます。
hook.js:608 TypeError: Cannot read properties of undefined (reading 'ReactCurrentOwner')

Canvasタグをコメントアウトし再度サーバーを立てるとエラーは出なくなります。
Canvasを使用しているコンポーネントでは"use client"を記載していますので問題ないと思ったのですが...何か他にやらないといけないことがあるのでしょうか？


Next.jsの知識が浅く申し訳ありませんが、詳しい方教えてくれますと助かります。





### 該当のソースコード

```ComponentsPage
"use client";
import React from 'react'
import { Canvas } from '@react-three/fiber'
// import dynamic from 'next/dynamic';


const Header = () => {
  return (
    <div className="mt-16">
      <h1>テスト</h1>
      <Canvas></Canvas>
    </div>
  )
}

export default Header
```

```appPage
import Header from "@/CommonComponents/header";
import Link from "next/link";

export default function Home() {
  return (
    <div>
      <Header />
      <h1>テスト</h1>
    {/* <Link href="/pagechange">ページ遷移はこちら</Link> */}
    </div>
  );
}
```

```package.json
 "dependencies": {
    "@react-three/drei": "^9.120.4",
    "@react-three/fiber": "^8.17.10",
    "next": "15.0.4",
    "react": "^19.0.0",
    "react-dom": "^19.0.0",
    "three": "^0.171.0"
  },
  "devDependencies": {
    "eslint": "^8",
    "eslint-config-next": "15.0.4",
    "postcss": "^8",
    "tailwindcss": "^3.4.1"
  }
```

### 試したこと・調べたこと
- [x] teratailやGoogle等で検索した
- [x] ソースコードを自分なりに変更した
- [ ] 知人に聞いた
- [x] その他

##### 上記の詳細・結果
解決に至りませんでした。

### 補足
特になし

Next.jsでthree.jsを実装する方法について

### 実現したいこと

ここに実現したいことを箇条書きで書いてください。
- Reactとchakra-UIで作成したinputのテストを成功させたい。

### 前提

Reactで作成したコンポーネントに対してユニットテストを作成しています。
現在、作成したinputコンポーネントに対して「readOnlyがTrueのとき、backgroundcolorが灰色であること」のテストを記述しています。

しかし、試行錯誤してみたものの、なかなかテストが通らず、今回の質問に至りました。
※灰色であることを試す前に、readOnlyがfalseであるとき、backgroundcolorがwhiteであることのテストは無事通っています。
※もちろん、テストサーバー上でのreadOnly: false／readOnly: trueの動作も確認しましたが、問題ありませんでした。

### 発生している問題・エラーメッセージ
■テストの結果
```
 FAIL  src/__Test__/atoms/InputAmount.test.tsx
  InputAmount
    readOnlyがfalseのとき
      ✓ placeholderが表示されること (11 ms)
      ✓ backgroundcolorがwhiteであること (88 ms)
    readOnlyがtrueのとき
      ✓ placeholderが表示されないこと (3 ms)
      ✕ backgroundcolorが灰色であること (5 ms)

  ● InputAmount › readOnlyがtrueのとき › backgroundcolorが灰色であること

    expect(element).not.toHaveStyle()

    Compared values have no visual difference.

      62 |       const { debug } = utils;
      63 |       debug();
    > 64 |       expect(input).not.toHaveStyle("background-color: white");
         |                         ^
      65 |     });
      66 |   });
      67 | });

      at Object.<anonymous> (src/__Test__/atoms/InputAmount.test.tsx:64:25)
```
■debugの結果
```
    <body>
      <div
        id="chakra-toast-portal"
      >
        <ul
          id="chakra-toast-manager-top"
          style="position: fixed; z-index: 5500; pointer-events: none; display: flex; flex-direction: column; margin: 0px auto;"
        />
        <ul
          id="chakra-toast-manager-top-left"
          style="position: fixed; z-index: 5500; pointer-events: none; display: flex; flex-direction: column;"
        />
        <ul
          id="chakra-toast-manager-top-right"
          style="position: fixed; z-index: 5500; pointer-events: none; display: flex; flex-direction: column;"
        />
        <ul
          id="chakra-toast-manager-bottom-left"
          style="position: fixed; z-index: 5500; pointer-events: none; display: flex; flex-direction: column;"
        />
        <ul
          id="chakra-toast-manager-bottom"
          style="position: fixed; z-index: 5500; pointer-events: none; display: flex; flex-direction: column; margin: 0px auto;"
        />
        <ul
          id="chakra-toast-manager-bottom-right"
          style="position: fixed; z-index: 5500; pointer-events: none; display: flex; flex-direction: column;"
        />
      </div>
      <div>
        <input
          aria-readonly="true"
          class="chakra-input css-vnwqtb"
          data-testid="inputAmount"
          placeholder=""
          readonly=""
          type="number"
        />
      </div>
    </body>
```
### 該当のソースコード
■記述したテストコード

```React
import { render, RenderResult } from "@testing-library/react";
import { InputAmount } from "components/atoms/InputAmount";
import { ChakraProvider } from "@chakra-ui/react";

describe("InputAmount", () => {
  let utils: RenderResult;

  describe("readOnlyがfalseのとき", () => {
    beforeEach(() => {
      const mockFunctions = {
        readOnly: false,
        register: jest.fn(),
        index: 0,
        validationNumber: /^[0-9]+$/,
    };
      utils = render(<InputAmount {...mockFunctions} />);
    });

    test("placeholderが表示されること", () => {
      const placeholder = utils.getByPlaceholderText("個数");
      expect(placeholder).toBeInTheDocument();
    });

    test("backgroundcolorがwhiteであること", async () => {
      const input = await utils.getByTestId("inputAmount");
      expect(input).toHaveStyle("background-color: white");
    });
  });

  describe("readOnlyがtrueのとき", () => {
    beforeEach(async () => {
      const mockFunctions = {
          readOnly: true,
          register: jest.fn(),
          index: 0,
          validationNumber: /^[0-9]+$/,
      };
      utils = await render(<InputAmount {...mockFunctions} />);
    });

    test("placeholderが表示されないこと", () => {
      const placeholder = utils.queryByPlaceholderText("個数");
      expect(placeholder).not.toBeInTheDocument();
    });

    test("backgroundcolorが灰色であること", async () => {
      const input = await utils.getByTestId("inputAmount");
      const { debug } = utils;
      debug();
      expect(input).not.toHaveStyle("background-color: white");
    });
  });
});

```
■テストしているコンポーネント
```React
import { Input } from "@chakra-ui/react";
import { MergeParams } from "interfaces";
import { memo, VFC } from "react";
import { UseFormRegister } from "react-hook-form";

type Props = {
  readOnly: boolean;
  register: UseFormRegister<MergeParams>;
  index: number;
  validationNumber: RegExp;
};

export const InputAmount: VFC<Props> = memo((props) => {
  const { readOnly, register, index, validationNumber } = props;
  return (
    <Input
      data-testid="inputAmount"
      isReadOnly={readOnly}
      bg={readOnly ? "blackAlpha.200" : "white"}
      placeholder={!readOnly ? "個数" : ""}
      fontSize={{ base: "sm", md: "md" }}
      size="md"
      w="100%"
      type="number"
      {...register(`listForm.${index}.amount`, {
        max: { value: 99, message: "上限は99までです。" },
        pattern: { value: validationNumber, message: "半角整数で入力してください。" },
      })}
    />
  );
});

```

### 試したこと

■ケアレスミス
確認しましたが、誤っている記述はありませんでした。

■toHaveStyle()の記述
以前：expect(input).toHaveStyle("background-color: rgba(0, 0, 0, 0.08")
現在：expect(input).not.toHaveStyle("background-color: white")

上記のように変更しましたが、やはりテストが通ることはありませんでした。
rgbaについては開発者ツールで確認し、"blackAlpha.200"が変換された値であることは確認しています。
ただし、ケアレスミスや勘違いの可能性があるため、not.toHaveStyle("background-color: white")に変更しています。

■readOnly: falseの場合にbackground-color: whiteを持っているかのテスト
上述の通り、以下のように記述しましたが、テストは無事通ります。
```
    test("backgroundcolorがwhiteであること", async () => {
      const input = await utils.getByTestId("inputAmount");
      expect(input).toHaveStyle("background-color: white");
    });
```

### 補足情報（FW/ツールのバージョンなど）
"react-hook-form": "^7.43.9",
"react": "^17.0.2",
"@chakra-ui/react": "^1.0.4",
"@testing-library/jest-dom": "^5.16.5",
"@testing-library/react": "^12.0.0",
"@testing-library/user-event": "^13.5.0",
"@types/jest": "^27.5.2",


Reactで作成したコンポーネントのが失敗してしまう

クライアントコンポーネントから非同期のリクエストを送るには use hook と cache を用いることで可能かと思います。

```ts
"use client";

const getHoge = cache(async (): Promise<Hoge[]> => {
  const response = await fetch("http://localhost:3000/api/hoge");
  return await response.json();
});

const Input: FC = () => {
  const hogeList: Hoge[] = use(getHoge());

```
しかし use hook は自作のメソッドの中からは呼べないはずです。
そこで以下のような Hoge データを post するための関数をボタンのクリックイベントで呼び、戻り値を上記 hogeList に push したい場合どうすれば良いでしょうか？
一つの解決策として const hogeList: Hoge[] = use(getHoge()); を sever component 内で行い、ボタンのクリックイベントで router.refresh(); をするという方法があります。しかしコンポーネントを分けたくない場合などあり、それ以外で良い方法はありますでしょうか？

```ts
const postHoge = async (request: Omit<Hoge, "id">): Promise<Hoge> => {
    const response = await fetch("http://localhost:3000/api/hoge", {
      method: "POST",
      headers: {
        "Content-Type": "application/json",
      },
      body: JSON.stringify(request),
    });
    return await response.json();
  };
```



もしご存知の方いましたらご教示いただけますと幸いです。

Next.js 13 で client component でデータを post する方法について

### 実現したいこと
Chrome, SmartphoneとSafariでも見えるようにfaviconを設定したいです。


### 前提

Next.js 13 で簡単なWebサイトを作成しておりVercelにuploadしています.


### 発生している問題・エラーメッセージ
Chrome, Smartphone用にfaviconが出ない状況です。



### 該当のソースコード

```TypeScript
import { Inter } from "next/font/google";
import { Providers } from "./providers";
import Head from "next/head";

const inter = Inter({ subsets: ["latin"] });

export const metadata = {
  title: "Tokyo Bouldering Club",
  description:
    "東京ボルダリングクラブとは都内近郊でボルダリングを一緒に登るために定期的に集うコミュニテイです。",
  icons: [
    {
      rel: "icon",
      type: "image/png",
      sizes: "32x32",
      url: "/favicons/favicon-32x32.png",
    },
    {
      rel: "icon",
      type: "image/png",
      sizes: "16x16",
      url: "/favicons/favicon-16x16.png",
    },
    {
      rel: "apple-touch-icon",
      sizes: "180x180",
      url: "/favicons/apple-touch-icon.png",
    },
  ],
};

export default function RootLayout({
  children,
}: {
  children: React.ReactNode;
}) {
  return (
    <html lang="en">
      <Head>
        <link rel="shortcut icon" href="/favicons/favicon.ico" />
        <link
          rel="apple-touch-icon"
          sizes="180x180"
          href="/favicons/apple-touch-icon.png"
        />
        <link
          rel="icon"
          type="image/png"
          sizes="32x32"
          href="/favicons/favicon-32x32.png"
        />
        <link
          rel="icon"
          type="image/png"
          sizes="16x16"
          href="/favicons/favicon-16x16.png"
        />
      </Head>
      <body className={inter.className}>
        {" "}
        <Providers>{children}</Providers>
      </body>
    </html>
  );
}
```

### 試したこと

以下のサイトのように `app.` ディレクトリに`favicon`, `icon`, `apple-icon` を配置したり、`layout.js` のheadタグにコードを足したりしています
- https://stackoverflow.com/questions/75674866/adding-favicon-to-nextjs-13-beta-no-pages-folder
- https://nextjs.org/docs/app/api-reference/file-conventions/metadata/app-icons

### 補足情報（FW/ツールのバージョンなど）

ここにより詳細な情報を記載してください。


Next13 でのsmartphoneとsafari用のfaviconを追加

## テーマ、知りたいこと

Next13 の Sever Component と Cilent Component を分けなければいけないのってもちろんバンドルサイズが減るだとか良いこともあるのはわかるのですが、正直 api を呼ぶ部分をコンポーネントで分けなければならないのは面倒ではないでしょうか？　それとも children として SC を CC から呼ぶ以外の方法で、useState などを使うコンポーネントから api 呼び出しを行う方法はあるのでしょうか？そもそも Next.js にもそんなに詳しくないので（ 普段は Vue とか Nuxt の方を使うことが多いため ）的外れな事を聞いていたら申し訳ありませんがこの辺り詳しい方ご意見伺わせて頂けますと助かります。




Next13 の Sever Component についてです。

### 実現したいこと
- [ ] Redux Thunkを使用してFirestoreのデータを取得したい

### 前提
React×Reduxを使用して、「TOP/記事一覧/記事詳細」のような簡単なブログのようなものを作成しています。
記事一覧のデータをFirestoreに保存しました。
このFirestoreに保存したデータをRedux Thunkを使って取得し、「記事一覧」ページに表示させたいです。


### 該当のソースコード
src
---top.jsx(略)
---post.jsx(略)
---firebase.jsx(略)

Posts.jsx
```
import postsStyle from "./posts.module.css"
import { useState, useEffect } from 'react';
import { NavLink } from "react-router-dom";
import db from "../../../firebase";
import { collection, getDocs } from "firebase/firestore"; 


const Posts =() => {

    const [posts, setPosts] = useState([]);
        useEffect(()=> {
        const postData = collection( db, "posts" );
        getDocs(postData).then((snapShot) => {
        setPosts(snapShot.docs.map((doc) => ({ ...doc.data() })));
        });
    }, []); 


    return (
        <div className={postsStyle.container}>
            <h2>記事一覧</h2>
            <div className={postsStyle.posts}>
                {posts.map((post) => (
                    <div className={postsStyle.post} key={post.postId}>
                        <NavLink to={`/posts/${post.postId}`}>{post.postName}</NavLink>
                        <p className={postsStyle.post_text} key={post.postId}>{post.postDetail}</p>
                    </div>
                ))}
            </div>
        </div>
    )
}

export default Posts
```

### 試したこと

現在getメソッドを使用してコレクション全体を取得し、記事一覧に表示することはできました。（↑上記コード）
これを「Redux Thunk」を使用してデータを取得し、表示させるやり方が分かりません。

### 補足情報（FW/ツールのバージョンなど）

React初心者です。ご教授いただければ幸いです！


Redux Thunkを使用してFirestoreのデータを取得したい

とあるtypescript(javascript)のライブラリを読んでいて疑問に思う点がありました。

index.d.tsにおけるアンビエント宣言では　
```js
function sample
```
と定義されているのに、この実装と思われる関数はruntime.jsに
```js
function $$sample
```
と定義されていました。


コンパイラはこれらをどう紐づけているのでしょうか？


※package.jsonは次のような記載でした。
```json

  "main": "dist/index.js",
  "module": "dist/index.mjs",
  "types": "dist/index.d.ts",
  "exports": {
    ".": {
      "import": "./dist/index.mjs",
      "require": "./dist/index.js"
    },
    "./dist/*": "./dist/*",
    "./runtime": {
      "import": "./dist/runtime.mjs",
      "require": "./dist/runtime.js"
    }
  },
```

typescript　OSSの読み解き方について（アンビエント宣言と関数定義の紐づき）

TypeScriptも5が出ましたが、最近以前ほど元気ないように見えるJavaScript応援用のお題を考えてみました。

```JavaScript
> 's' === String(new String('s'))
true
> 's' === new String(new String('s'))
false
> 's' == String(new String('s'))
true
> 's' == new String(new String('s'))
true
> 0 == String(new String(''))
true
> 0 === String(new String(''))
false
>
```
#### お題その1:
こんな結果になる文字列と比較演算子の挙動を説明してください。

#### お題その2:
あなたが望ましいと思う変数sと's'の等号比較を記述してください。

#### お題その3:
Stringと同じような挙動をするFuncを記述してください
※Funcの前にnewがある場合Funcオブジェクトが返り、それ以外はStringと同じ

---
※最初の全問正解にはGood評価
※私の勘違いや間違いを指摘した人もGood評価
※ウンチクが面白かった人もGood評価
※私が考えた問題なので私の用意した答えもあります。やりたくなければご自由に。
※ご意見もご自由にお書きください

JavaScriptの等号演算子と文字列について

## テーマ、知りたいこと

今はreact系とvue系がメインストリームだと思いますが、remixやbitなどのマイクロフロントエンド系のフレームワークも出てきており、次は何がくると思いますか？

できればなぜそのフレームワークが来そうかの理由も書いてもらえると嬉しいです。

react,vueの次にきそうなJSフレームワークはなんだと思いますか？

### 前提

ここに質問の内容を詳しく書いてください。
（例）
TypeScriptでポートフォリオを作成しております。
Prismaの型を分割代入する関数を作成時にschema.prismaではnullが入っています。
```
type PUser = {
    id: string;
    name: string;
    email: string;
    password: string;
    gender: GenderType | null;
    age: number | null;
    location: LocationType | null;
}
```
上記のように型をつけているのですが、上記を分割代入しようと下記のように記載するとage,gendere,locationから
nullが消えてしまいます。
```
  const { id, gender, location, age, ...omitPUser } = pUser;
```
こちらの型を
```
gender: "MEN" | "WOMEN" | "OTHERS" | null
```
このようにしたいです。

### 試したこと

prismaのバージョン変更
schema.prismaの変更

### 補足情報（FW/ツールのバージョンなど）

    "@prisma/client": "^3.7.0",
    "prisma": "3.12.0",
    "prisma-merge": "^0.2.0",



Prismaでの分割代入でnullがなくなる

### 前提

ReactをTypeScriptで書いていたのですが、lazyを使ったHOCについて、元のPropsの型を限定しようとしたら型エラーで回らなくなってしまいました。

### 実現したいこと

`any`でごまかす以外にエラーを出さずに書く方法はないか

### 発生している問題・エラーメッセージ

```
# testの<LazyComponent>行にて
Type 'P' is not assignable to type 'IntrinsicAttributes & ((PropsWithoutRef<P> & RefAttributes<Component<P, any, any>>) | PropsWithRef<P>)'.
  Type '{ show?: boolean | undefined; }' is not assignable to type 'IntrinsicAttributes & ((PropsWithoutRef<P> & RefAttributes<Component<P, any, any>>) | PropsWithRef<P>)'.
    Type 'P' is not assignable to type 'IntrinsicAttributes & PropsWithRef<P>'.
      Type '{ show?: boolean | undefined; }' is not assignable to type 'IntrinsicAttributes & PropsWithRef<P>'.
        Type '{ show?: boolean | undefined; }' is not assignable to type 'PropsWithRef<P>'.
          Type 'P' is not assignable to type 'PropsWithRef<P>'.
            Type '{ show?: boolean | undefined; }' is not assignable to type 'PropsWithRef<P>'.

# test2の<LazyComponent>行にて
Type 'P' is not assignable to type 'IntrinsicAttributes & (T extends MemoExoticComponent<infer U extends ComponentType<any>> | LazyExoticComponent<infer U extends ComponentType<...>> ? ReactManagedAttributes<...> : ReactManagedAttributes<...>)'.
  Type '{ show?: boolean | undefined; }' is not assignable to type 'IntrinsicAttributes & (T extends MemoExoticComponent<infer U extends ComponentType<any>> | LazyExoticComponent<infer U extends ComponentType<...>> ? ReactManagedAttributes<...> : ReactManagedAttributes<...>)'.
    Type '{ show?: boolean | undefined; }' is not assignable to type 'T extends MemoExoticComponent<infer U extends ComponentType<any>> | LazyExoticComponent<infer U extends ComponentType<any>> ? ReactManagedAttributes<...> : ReactManagedAttributes<...>'.
      Type 'P' is not assignable to type 'T extends MemoExoticComponent<infer U extends ComponentType<any>> | LazyExoticComponent<infer U extends ComponentType<any>> ? ReactManagedAttributes<...> : ReactManagedAttributes<...>'.
        Type '{ show?: boolean | undefined; }' is not assignable to type 'T extends MemoExoticComponent<infer U extends ComponentType<any>> | LazyExoticComponent<infer U extends ComponentType<any>> ? ReactManagedAttributes<...> : ReactManagedAttributes<...>'.
```

### 該当のソースコード

```ts
import React, { ComponentProps, ComponentType, lazy } from 'react';

const test = <P extends {show?: boolean}>(
  promiseFunc: () => Promise<{default: ComponentType<P>}>
) => {
  const LazyComponent = lazy(promiseFunc);
  const newComponent = (props: P) => {
    return (
        <LazyComponent {...props} />
    );
  };
  return newComponent;
};

const test2 = <P extends {show?: boolean}, T extends ComponentType<P>>(
  promiseFunc: () => Promise<{default: T}>
) => {
  const LazyComponent = lazy(promiseFunc);
  const newComponent = (props: ComponentProps<T>) => {
    return (
        <LazyComponent {...props} />
    );
  };
  return newComponent;
};
```

[TypeScript Playground](https://www.typescriptlang.org/play?#code/JYWwDg9gTgLgBAJQKYEMDGMA0cDecDCE4EAdkiTAApQRgDO2hxZFAKgJ5hLYA2KAXuzgBfOADMaIOAHIoqDNIDcAKGVpSdeDCSa4AXjgAeSnCQAPbSQAmdXHQAWEAO4B+AFxwARhAg9UJYQA+AAplODgwSWA6JAAxAFcSNA9ggEp9QLhqImikQxwrJDEUeJ4YDyZIFhgOLmNAoOV0vUycMLh1El0AGQF2StJyeAM+QWDInJiEpNSVcM7dMicB6v04cZp6D0pm1vbwuRh4qBJ1-fCLw17BFaHcADpHifpRAHpA89n24Tm4Q+PTktbhQVD9VAstDoYAAmNbGUwWcg2OyOVweby+fzCbCsBGWZHAmqcPKUQIhdoTEC5abJda7LJRGL5QrFUrlOCsRr0trzDTwa79IhVO4jPobSZxRJoL68rrwIFCwYUNbirYERXVbL0QysQLc87-E5nC4mowCwkPJ6bOhvD4mmUiX6GwFIZYaoagxRAA)

### 試したこと

* もともとはPropsの型を限定しないコードで、`test2`でジェネリクスが`<T extends ComponentType<any>>`だけのコードを書いていて、それは問題なく回っていました。
* `props`の型を`P`や`ComponentProps<T>`、`ComponentProps<typeof LazyComponent>`のように切り替えてみましたが、エラーは改善しません。

### 補足情報（FW/ツールのバージョンなど）

* React 17、18（どちらの型定義でも同様の問題に）
* TypeScript 4.9.4


[React+TypeScript] lazyを使ったHOCで、Propsの型を限定したい

Nest.js で SSR を行っています。
getServerSideProps から fetch してデータを取得しますが、ページ遷移時（二回目以降）も毎回 fetch してデータを取得してきてしまいます。

確か、僕の記憶だと Nuxt.js の場合は props に保存して、二回目以降はそれを参照する感じで、キャッシュされるので速かったのですが、Next.js は違うみたいです。
Next.js で二回目以降のページ遷移のスピードを速くしたいのですが、ベストはありますか？

client side でデータを取ってきて、store を使用する方法もあるのですが、ベストを知りたいです。

nextjs の getServerSideProps について

プログラミングを勉強しておりますが、
テキスト等で基礎文法を覚えて、テキストのサンプルプログラムを動かしたりしております。
そして、自分なりに、プログラムを拡張したり作りたいアプリがある場合に、色々なサイト
で、似たような機能を実現しようとしているソースを探し、ソースを理解しようとしておりますが、
Web上に公開されている方のソースや、GitHub等のサンプルソースが理解できない状況です。

開発に携わられている方や、プログラミングが趣味・得意・好きという方は、
他の方が書いたプログラムを、最初にどの様に読んで理解しているのでしょうか？


私の場合、例えば、以下のようなソースで
 print("Usage: {} modName symName HOSTNAME".format(sys.argv[0]))は、sys.argv[0]は、何かリストに格納しているなぁ。
でも、sys.argv[0]は、どういう情報なんだろう？？・・・訳が分からない・・・終了。といった状態です。

特に、リストや辞書等のデーターを格納している箇所については、どういうデーター形式かを事前にしっていないとsys.argv[0]とか
sys.argv[2]とかってわからないと思います。


他の人が書いたプログラムの読み方や理解の仕方等のコツ等をアドバイスいただければと思います。


```python
# snmpget.py
from pysnmp.hlapi import *
import sys
 
if len(sys.argv) != 4:
    print("Usage: {} modName symName HOSTNAME".format(sys.argv[0]))
    sys.exit(1)
 
modName = sys.argv[1]
if "." in sys.argv[2]:
    symName, value = sys.argv[2].split('.')
else:
    symName = sys.argv[2]
    value = 0
router_ip = sys.argv[3]
 
errorIndication, errorStatus, errorIndex, varBinds = next(
    getCmd(SnmpEngine(),
    CommunityData('public'),
    UdpTransportTarget((router_ip, 161)),
    ContextData(),
    ObjectType(ObjectIdentity(modName, symName, value)))
)
 
if errorIndication:
    print(errorIndication)
elif errorStatus:
    print('%s at %s' % (errorStatus.prettyPrint(),
                        errorIndex and varBinds[int(errorIndex) - 1][0] or '?'))
else:
    for varBind in varBinds:
        print(' = '.join([x.prettyPrint() for x in varBind]))
```



他の人が書いたプログラムの読み方・理解の仕方について

### 前提

React, TypeScriptでfirestoreからデータを取得したいのですが、以下のようなエラーが発生しました。

### 実現したいこと

- [ ] firestoreからpostsデータを取得し、map関数でpostを展開

### 発生している問題・エラーメッセージ

```
エラーメッセージ
(parameter) querySnapshot: QuerySnapshot<DocumentData>
----------------------------------------------------------------------------
型 'DocumentData[]' の引数を型 'SetStateAction<Posts>' のパラメーターに割り当てることはできません。
  型 'DocumentData[]' を型 'Posts' に割り当てることはできません。
    型 'DocumentData' には 型 '{ displayName: string; userName: string; text: string; image: string; }' からの次のプロパティがありません: displayName, userName, text, image
```

### 該当のソースコード

```TypeScript
import { Box, Heading } from "@chakra-ui/react";
import Post from "./PostOne";
import TweetBox from "./TweetBox";
import { collection, getDocs } from "firebase/firestore";
import db from "../../firebase";
import { useState } from "react";

type Posts = {
  displayName: string;
  userName: string;
  text: string;
  image: string;
}[];

const TimeLine = () => {
  const [posts, setPosts] = useState<Posts>([]);
  const postsColRef = collection(db, "posts");
  getDocs(postsColRef).then((querySnapshot) => {
    setPosts(querySnapshot.docs.map((doc) => doc.data()));
  });

  return (
    <Box
      overflowY="scroll"
      flex="0.45"
      borderRight="1px solid #efeff2"
      css={{ "&::-webkit-scrollbar": { display: "none" } }}
    >
      <Box
        background="white"
        border="1px solid #efeff2"
        p="15px 20px"
        top="0"
        textAlign="left"
        position="sticky"
      >
        <Heading fontSize="20px" as="h2" fontWeight="bold">
          ホーム
        </Heading>
      </Box>
      <TweetBox />

      {posts.map((post) => (
        <Post
          displayName={post.displayName}
          userName={post.userName}
          text={post.text}
          image={post.image}
        />
      ))}
    </Box>
  );
};

export default TimeLine;
```



React, TypeScriptでfirestoreからデータを取得したいが型まわりでエラーが出る

SSRでは、サーバー側でレンダリングした結果のHTMLデータをクライアント側に返すそうですね。
「レンダリング」とは、JSを実行・解釈してDOMに反映させることだと認識しており、DOMに反映されたHTMLデータをまるごとクライアントに返すのがSSRだと認識しています。

Nuxtの初期設定時、サーバーをexpressにしていると、確かnuxtのプロジェクト内にサーバーのソースが置かれると思うのですが、そのケースであれば、上記で記述したSSRの原理は納得できます。

フロントもバックも同じjsであり、同一のプロジェクト内なら、サーバーサイド側もnuxtのソースを共有していると思うので、express側でnuxtのpagesやcomponentsのｊｓを解釈してクライアントに返すことが可能だと思います。

しかし、サーバーサイドがPHPのときはどういう動作になるのですか？
nginx+Laravel+Nuxtそれぞれ３つのコンテナでdocker環境で構築されたSSRのシステムの開発に携わってるんですが、このケースではどういう原理でサーバーサイドレンダリングが実現されているのでしょうか？
そもそも前提知識が間違っていたりとかしたらご指摘ください。
