常連

注目の的

社会貢献

質問力

回答者

ベストアンサー

拍手喝采

自己紹介

### 実現したいこと
Mapboxでポリゴンを作成したら、v-ifでボタンを表示・非表示させたい。
エラーが一定の条件下のようなのでエラーを解消したい

### 発生している問題・分からないこと

MapboxでMapbox-gl-drawをimportして利用してます。
このdrawを利用して、クリックしてポリゴンを作成できるようにしています。

その際にMapboxにあるaddLayerやaddSourceなどMapboxのメソッドで追加するのですが、通常は問題なく利用できます。

ただtemplete内にボタンがあり、表示・非表示などをするために「v-if」などの処理を追加して、ポリゴンを追加しようとすると「そんなメソッドはありません」といったエラーがでます。

ソースコードにテスト用にトグルボタンを追加して試してみました。

### エラーメッセージ
```error
mapObj.value.addSource is not a function
    at checkPolygon (NavigationMap.vue:214:30)
    at chunk-ESTIRR4N.js?v=09147ab3:10265:60
    at callWithErrorHandling (chunk-ESTIRR4N.js?v=09147ab3:1650:18)
    at callWithAsyncErrorHandling (chunk-ESTIRR4N.js?v=09147ab3:1658:17)
    at callWithAsyncErrorHandling (chunk-ESTIRR4N.js?v=09147ab3:1668:17)
    at HTMLButtonElement.invoker (chunk-ESTIRR4N.js?v=09147ab3:10247:5)
checkPolygon @ NavigationMap.vue:214
（匿名） @ chunk-ESTIRR4N.js?v=09147ab3:10265
callWithErrorHandling @ chunk-ESTIRR4N.js?v=09147ab3:1650
callWithAsyncErrorHandling @ chunk-ESTIRR4N.js?v=09147ab3:1658
callWithAsyncErrorHandling @ chunk-ESTIRR4N.js?v=09147ab3:1668
invoker @ chunk-ESTIRR4N.js?v=09147ab3:10247

```

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

```JavaScript
<script setup>
import { onMounted, ref} from 'vue';
import mapboxgl from 'mapbox-gl'
import 'mapbox-gl/dist/mapbox-gl.css'
import MapboxDraw from "@mapbox/mapbox-gl-draw";

let mapObj = ref(null);
let fillColor = ref('green');
let draw = null;

const isShowDeleteBtn = ref(true)

onMounted(() => {
    initialMapBox();
});

const initialMapBox = () => {
    mapObj.value = new mapboxgl.Map({
        container: 'map_wrapper',
        style: 'mapbox://styles/mapbox/streets-v12',
        center: [139.714590, 35.678184],
        zoom: 9,
        preserveDrawingBuffer: true
    });

    mapObj.value.on("load", () => {
        // 拡大・縮小コントロールを作成し、マップに追加する
        const navControl = new mapboxgl.NavigationControl();
        draw = new MapboxDraw({
            displayControlsDefault: false,
            controls: {
                trash: true
            }
        });

        mapObj.value.addControl(navControl, 'top-right')
        mapObj.value.addControl(draw);

        mapObj.value.on("draw.create", createDrawData);
      
    });


}

const toggleTest = () => {
    isShowDeleteBtn.value = !isShowDeleteBtn.value
}

const changeFillColor = (color) => {
    fillColor.value = color;
    draw.changeMode('draw_polygon');
}


const createDrawData = (e) => {
    if (mapObj.value) {
        const features = e.features;
        features.forEach(function (feature) {

            const id = feature.id;
            const geometry = feature.geometry;

            feature.properties = {
                type: fillColor.value
            };
            // ポリゴンを追加するレイヤーを地図のスタイルに追加する
            mapObj.value.addLayer({
                id: id,
                type: 'fill',
                source: {
                    type: 'geojson',
                    data: {
                        type: 'Feature',
                        geometry: geometry,
                        properties: feature.properties // カスタムプロパティをセット
                    }
                },
                paint: {
                    'fill-color': fillColor.value,
                    'fill-opacity': 0.4,
                    'line-width': 1
                }
            });

        });
    }
}
</script>
```

```html
<template>
<v-row>
            <v-col cols="12">
                <div ref="mapObj" id="map_wrapper"></div>
                <div class="btn_wrapper">
                    <v-btn @click="changeFillColor('red')" color="red">赤のポリゴン</v-btn>
                    <v-btn @click="changeFillColor('green')" color="green">緑のポリゴン</v-btn>
                </div>
                <div v-if="isShowDeleteBtn">
                    <p>これはテスト</p>
                </div>
                <button @click="toggleTest">v-ifテスト</button>
            </v-col>
</v-row>
</template>
```

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

##### 上記の詳細・結果
template側にv-ifで表示・非表示のトグルボタンを追加して試してみました。
エラーがでる状況は以下のようです。

- トグルボタンをクリックしないで、ポリゴンを作成すると問題なく作成される。
- トグルボタンをクリックして1度でもv-ifなどの処理を実行した後にポリゴンを作成するとエラーがでる。

そのため、mapObjをconsole.logで確認しました。
エラーが出ない場合はMapオブジェクトが確認できました。

```txt
boxZoom
: 
xS {_map: Map, _el: div.mapboxgl-canvas-container.mapboxgl-interactive.mapboxgl-touch-zoom-rotate.mapboxgl-touch-drag-p…, _container: div#map_wrapper.mapboxgl-map.mode-draw_polygon.mouse-none, _clickTolerance: 3, _enabled: false, …}
doubleClickZoom
: 
GS {_clickZoom: qS, _tapZoom: TS}
dragPan
: 
$S {_el: div.mapboxgl-canvas-container.mapboxgl-interactive.m
```

ただトグルボタンでv-ifを実行すると以下のようにhtmlの要素になってました。
```html
<div data-v-cebdade8="" id="map_wrapper" class="mapboxgl-map mode-draw_polygon mouse-add"><div class="mapboxgl-canary" style="visibility: hidden;"></div><div class="mapboxgl-canvas-container mapboxgl-interactive mapboxgl-touch-zoom-rotate mapboxgl-touch-drag-pan"><canvas class="mapboxgl-canvas" tabindex="0" aria-label="Map" role="region" width="1736" height="900" style="width: 868px; height: 450px;"></canvas></div><div class="mapboxgl-control-container"><div class="mapboxgl-ctrl-top-left"></div><div class="mapboxgl-ctrl-top-right"><div class="mapboxgl-ctrl mapboxgl-ctrl-group"><button class="mapboxgl-ctrl-zoom-in" type="button" aria-label="Zoom in" aria-disabled="false"><span class="mapboxgl-ctrl-icon" aria-hidden="true" title="Zoom in"></span></button><button class="mapboxgl-ctrl-zoom-out" type="button" aria-label="Zoom out" aria-disabled="false"><span class="mapboxgl-ctrl-icon" aria-hidden="true" title="Zoom out"></span></button><button class="mapboxgl-ctrl-compass" type="button" aria-label="Reset bearing to north"><span class="mapboxgl-ctrl-icon" aria-hidden="true" title="Reset bearing to north" style="transform: rotate(0deg);"></span></button></div><div class="mapboxgl-ctrl-group mapboxgl-ctrl"><button class="mapbox-gl-draw_ctrl-draw-btn mapbox-gl-draw_trash" title="Delete"></button></div></div><div class="mapboxgl-ctrl-bottom-left"><div class="mapboxgl-ctrl" style="display: block;"><a class="mapboxgl-ctrl-logo" target="_blank" rel="noopener nofollow" href="https://www.mapbox.com/" aria-label="Mapbox logo"></a></div></div><div class="mapboxgl-ctrl-bottom-right"><div class="mapboxgl-ctrl mapboxgl-ctrl-attrib"><button class="mapboxgl-ctrl-attrib-button" type="button"><span class="mapboxgl-ctrl-icon" aria-hidden="true" title="Toggle attribution"></span></button><div class="mapboxgl-ctrl-attrib-inner"><a href="https://www.mapbox.com/about/maps/" target="_blank" title="Mapbox" aria-label="Mapbox">© Mapbox</a> <a href="https://www.openstreetmap.org/about/" target="_blank" title="OpenStreetMap" aria-label="OpenStreetMap">© OpenStreetMap</a> <a class="mapbox-improve-map" href="https://apps.mapbox.com/feedback/?owner=mapbox&amp;id=streets-v12&amp;access_token=p" target="_blank" aria-label="Improve this map" rel="noopener nofollow">Improve this map</a></div></div></div></div></div>
```

### 補足
Vue3 コンポジットAPIで　script setupの書き方で処理しています。

MapboxでaddSource is not a functionと表示される

### 概要
iron-sessionというものを用いてsession管理を行いたいのですが、
session開始後にAPI側でリダイレクトさせると、sessionが開始されず、
リダイレクトの処理を除去すると、sessionが正常に開始されます。
何か解決方法はないでしょうか？

### 環境
"next": "13.4.12",
"react": "18.2.0",
"iron-session": "6.3.1"

### ソースコード
app/api/auth/loginに以下のPOSTメソッドを定義しました。

ログイン情報が合った場合は、sessionを開始して、
「localhost:3000/user」ページにリダイレクトさせるというものです。
```typescript
/**
 * POST
 *
 * @param req
 * @returns
 */
export async function POST(req: NextRequest) {
  const res = new Response();
  const inputUserInfo = await req.json();
  const session = await getIronSession(req, res, sessionOptions);

  const userData = await checkUser(Number(inputUserInfo?.id), inputUserInfo?.password);
  if (userData !== undefined) {
    session.user = userData;
    await session.save();
    return NextResponse.redirect(new URL('/'user, req.url));
  }
  return res;
}
```

### 備考
reqをNextApiRequest型で受け取ると、うまくいくのですが
そうすると、req.bodyでクライアントからの値を取得できずでして(req.json()はNextApiRequestにはない)
reqの型をNextApiRequest型にしてフロントからの値が渡せたら、そちらの解決策でも問題ないと思っています。

next-authは試しましたが、今回はGoogle認証やgithub認証は使わない方向でID,PWだけでの認証をしたく
色々不具合が起きたのでiron-sessionを利用しています。


Next.jsのAPI側でリダイレクト

クライアントコンポーネントから非同期のリクエストを送るには 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 する方法について

### 実現したいこと
エラーを理解し、テストの第一歩としてレンダリングを成功させたい。


### 前提

React学習のためのアプリの制作が終わり、勉強を兼ねてテスト作成に取り組んでいます。
簡単なコンポーネントに対してのテストは書けたものの、少し複雑なPropsを渡す必要のあるコンポーネントに対してテストを行おうとしたところ、エラーが発生。

テスト時は私の認識不足でいつもエラーが発生はするのですが、調べたり試行錯誤することで解消出来ていたのですが、今回、解消が出来なかったため質問させていただきました。

おそらくですが、ReactHookFromのRegisterをmock化する方法が間違えているのだと思うのですが何をテストに対しても知識が浅いため、どのようにmock化すればエラーが解消できるのかがわかりませんでした。

### 発生している問題・エラーメッセージ
以下、テストの結果を貼り付けます。
```
 FAIL  src/__Test__/molecules/OkaimonoDetail.test.tsx
  OkaimonoDetail
    ✕ テスト中 (91 ms)

  ● OkaimonoDetail › テスト中

    TypeError: Cannot destructure property 'ref' of 'register(...)' as it is undefined.

      90 |       {fields.map((field, index) => {
      91 |         const {
    > 92 |           ref,
         |           ^
      93 |           onChange: registerOnChange,
      94 |           ...rest
      95 |         } = register(`listForm.${index}.purchaseName`, {
```


### 該当のソースコード
```
■コンポーネントのコード
import { SmallAddIcon } from "@chakra-ui/icons";
import {
  Box,
  ComponentWithAs,
  Divider,
  FormLabel,
  Heading,
  HStack,
  Icon,
  IconProps,
  Input,
  InputGroup,
  InputRightElement,
  Text,
  VStack,
} from "@chakra-ui/react";
import { ListFormParams, MergeParams } from "interfaces";
import React, { Dispatch, memo, SetStateAction, VFC } from "react";
import {
  FieldArrayWithId,
  FieldErrors,
  FieldValues,
  UseFieldArrayRemove,
  UseFormGetValues,
  UseFormRegister,
  UseFormSetValue,
  UseFormWatch,
} from "react-hook-form";

type Props = {
  fields: FieldArrayWithId<MergeParams, "listForm", "key">[];
  // eslint-disable-next-line no-unused-vars
  insertInputForm: (index: number) => void;
  SmallCloseIcon: ComponentWithAs<"svg", IconProps>;
  remove: UseFieldArrayRemove;
  register: UseFormRegister<MergeParams>;
  errors: FieldErrors<MergeParams>;
  validationNumber: RegExp;
  readOnly?: boolean;
  getValues?: UseFormGetValues<MergeParams>;
  deleteIds?: string[];
  setDeleteIds?: Dispatch<SetStateAction<string[]>>;
  watch: UseFormWatch<FieldValues>;
  expiryDate?: boolean;
  // eslint-disable-next-line no-unused-vars
  onListChange?: (event: React.ChangeEvent<HTMLInputElement>, index: number, newValue: string) => void;
  purchaseNameSuggestions?: ListFormParams[];
  setValue?: UseFormSetValue<MergeParams>;
  setPurchaseNameSuggestions?: React.Dispatch<React.SetStateAction<ListFormParams[]>>;
  purchaseNameIndex?: number;
};

export const OkaimonoDetail: VFC<Props> = memo((props) => {
  const {
    fields,
    insertInputForm,
    SmallCloseIcon,
    remove,
    register,
    errors,
    validationNumber,
    readOnly = false,
    getValues,
    setDeleteIds,
    watch,
    expiryDate,
    onListChange,
    purchaseNameSuggestions,
    setValue,
    setPurchaseNameSuggestions,
    purchaseNameIndex,
  } = props;

  const onClickSuggests = (
    event: React.MouseEvent<HTMLParagraphElement, MouseEvent>,
    purchaseName: string,
    index: number
  ) => {
    event.preventDefault();
    if (setValue && setPurchaseNameSuggestions && purchaseName) {
      setValue(`listForm.${index}.purchaseName`, purchaseName);
      setPurchaseNameSuggestions([]);
    }
  };
  return (
    <Box>
      <Heading as="h3" size="sm" textAlign="center" pt={1} pb={3}>
        お買い物リスト
      </Heading>
      {fields.map((field, index) => {
        const {
          ref,
          onChange: registerOnChange,
          ...rest
        } = register(`listForm.${index}.purchaseName`, {
          required: { value: true, message: "商品名が入力されていません" },
          maxLength: { value: 35, message: "最大文字数は35文字までです。" },
        });

        const customOnChange = (event: React.ChangeEvent<HTMLInputElement>) => {
          // 親コンポーネントから渡された onChange ハンドラを実行
          if (onListChange) {
            onListChange(event, index, event.target.value);
          }

          // 入力が空の場合、候補リストをクリアする
          if (setPurchaseNameSuggestions && event.target.value === "") {
            setPurchaseNameSuggestions([]);
          }

          // React Hook Form の onChange ハンドラを実行
          if (registerOnChange) {
            registerOnChange(event);
          }
        };

        const startDate = watch(`listForm.${index}.expiryDateStart`);
        return (
          <HStack key={field.key} px={2} py={3} w="100%" bg="white" rounded="xl" mb="2">
            <VStack spacing={1} w="5%">
              <Box display={fields.length < 20 || readOnly ? "block" : "none"}>
                <SmallAddIcon
                  bg="teal.500"
                  rounded="full"
                  color="white"
                  onClick={(event) => {
                    if (readOnly) {
                      event.preventDefault();
                      // eslint-disable-next-line no-alert
                      alert("確認画面では使用できません。");
                      return;
                    }
                    insertInputForm(index);
                  }}
                />
              </Box>

```
■ユニットテストのコード
```ここに言語名を入力
import { SmallCloseIcon } from "@chakra-ui/icons";
import { render, RenderResult } from "@testing-library/react";
import { OkaimonoDetail } from "components/molecules/OkaimonoDetail";

describe("OkaimonoDetail", () => {
  const getValuesMock = jest.fn().mockReturnValue(99); //getValuesを再現するために記述。


  const testPurchaseObjs = [
    {
      userId: "test1",
      shopId: "shopId",
      id: "1",
      asc: "0",
      purchaseName: "testPurchase1",
      price: "999",
      shoppingDetailMemo: "testMemo",
      amount: "amount",
      shoppingDate: "2023-07-27",
      expiryDateStart: "2023-07-28",
      expiryDateEnd: "2023-07-29",
      listId: "99",
      isBought: true,
      isFinish: true,
      differentDay: 1,
      isDelete: false,
      memosCount: 3,
      totalBudget: 9999,
    },
    {
      userId: "test2",
      shopId: "shopId",
      id: "2",
      asc: "1",
      purchaseName: "testPurchase2",
      price: "999",
      shoppingDetailMemo: "testMemo",
      amount: "amount",
      shoppingDate: "2023-07-27",
      expiryDateStart: "2023-07-28",
      expiryDateEnd: "2023-07-29",
      listId: "99",
      isBought: true,
      isFinish: true,
      differentDay: 1,
      isDelete: false,
      memosCount: 3,
      totalBudget: 9999,
    },
  ];

  const FieldMocks = [
    {
      amount: "",
      asc: "",
      expiryDateEnd: "",
      expiryDateStart: "",
      id: "",
      key: "43ea4b2c-54a6-465b-9ae8-25e68eb94dc9",
      price: "",
      purchaseName: "",
      shoppingDetailMemo: ""
    }
  ];

  const mockFunctions = {
    fields: FieldMocks,
    insertInputForm: jest.fn(),
    SmallCloseIcon,
    remove: jest.fn(),
    register: jest.fn().mockReturnValue({
      ref: jest.fn(),
      onChange: jest.fn(),
      name: 'listForm',
    }),
    errors: {},
    validationNumber: /^[0-9]+$/,
    readOnly: false,
    getValues: getValuesMock,
    setDeleteIds: jest.fn(),
    watch: jest.fn(),
    expiryDate: false,
    onListChange: jest.fn(),
    purchaseNameSuggestions: testPurchaseObjs,
    setValue: jest.fn(),
    setPurchaseNameSuggestions: jest.fn(),
    purchaseNameIndex: 0,
  };

  let utils: RenderResult;

  beforeEach(() => {
    utils = render(<OkaimonoDetail {...mockFunctions} />);
  });

  test("テスト中", () => {
    console.log(mockFunctions.register.mock.calls);
  });

});

```

### 試したこと

上記のテストコードの通り、console.logを記載し、エラーの特定を行いました。
しかし、以下のような結果が返されてしまいます。
>   console.error
    The above error occurred in one of your React components:
    
        at /Users/apple/Github/myportfolio03/frontend/src/components/molecules/OkaimonoDetail.tsx:55:5
    
    Consider adding an error boundary to your tree to customize error handling behavior.
    Visit https://reactjs.org/link/error-boundaries to learn more about error boundaries.

55行目はコンポーネントのconst内の一番上のfieldsに該当するため、テストコード内のFieldMocksを見直してみたのですが、誤りらしい部分を見つけられませんでした。

どうか、エラーの原因特定にお力をお貸しいただけないでしょうか。

### 補足情報（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のユニットテスト時に「Cannot destructure property 'ref' of 'register(...)' as it is undefined.」

### 実現したいこと
React+TypeScriptでMarkdownを表示させたいです。
以下、正しく表示されないのは何故でしょうか。

### 不具合
@next/mdxを利用していますが、表示されません。
また、react-router-domのLinkも表示されません。

### 該当のソースコード
```index.tsx
import React from "react";
import ReactDOM from "react-dom/client";
import App from "./App";
import reportWebVitals from "./reportWebVitals";

const root = ReactDOM.createRoot(
  document.getElementById("root") as HTMLElement
);
root.render(
  <React.StrictMode>
    <App />
  </React.StrictMode>
);
reportWebVitals();
```

```App.tsx
import React from "react";
import { Link } from 'react-router-dom'

const App: React.FunctionComponent = () => {
  return (
    <>
      <Link to="/hello">Hello</Link>
    </>
  );
}

export default App;
```

```pages/hello.mdx
# Hello, World!
```

```next.config.js
const withMDX = require('@next/mdx')({
    extension: /\.mdx?$/,
})

/** @type {import('next').NextConfig} */
const nextConfig = {
    pageExtensions: ['ts', 'tsx', 'mdx'],
    reactStrictMode: true,
}
module.exports = withMDX(nextConfig)
```

```package.json
{
  "name": "hoge",
  "version": "0.1.0",
  "private": true,
  "dependencies": {
    "@mdx-js/loader": "^2.3.0",
    "@next/mdx": "^13.4.6",
    "@testing-library/jest-dom": "^5.16.5",
    "@testing-library/react": "^13.4.0",
    "@testing-library/user-event": "^13.5.0",
    "@types/jest": "^27.5.2",
    "@types/node": "^16.18.25",
    "@types/react": "^18.2.0",
    "@types/react-dom": "^18.2.1",
    "react": "^18.2.0",
    "react-dom": "^18.2.0",
    "react-router-dom": "^6.13.0",
    "react-scripts": "^5.0.1",
    "web-vitals": "^2.1.4"
  },
  "scripts": {
    "start": "react-scripts start",
    "build": "react-scripts build",
    "test": "react-scripts test",
    "eject": "react-scripts eject"
  },
  "eslintConfig": {
    "extends": [
      "react-app",
      "react-app/jest"
    ]
  },
  "browserslist": {
    "production": [
      ">0.2%",
      "not dead",
      "not op_mini all"
    ],
    "development": [
      "last 1 chrome version",
      "last 1 firefox version",
      "last 1 safari version"
    ]
  },
  "devDependencies": {
    "@typescript-eslint/eslint-plugin": "^5.59.1",
    "eslint": "^8.39.0",
    "eslint-config-prettier": "^8.8.0",
    "eslint-config-standard-with-typescript": "^34.0.1",
    "eslint-plugin-import": "^2.27.5",
    "eslint-plugin-n": "^15.7.0",
    "eslint-plugin-promise": "^6.1.1",
    "eslint-plugin-react": "^7.32.2",
    "prettier": "^2.8.8"
  }
}
```

```tsconfig.json
{
  "compilerOptions": {
    "target": "es5",
    "lib": ["dom", "dom.iterable", "esnext"],
    "allowJs": true,
    "skipLibCheck": true,
    "esModuleInterop": true,
    "allowSyntheticDefaultImports": true,
    "strict": true,
    "forceConsistentCasingInFileNames": true,
    "noFallthroughCasesInSwitch": true,
    "module": "esnext",
    "moduleResolution": "node",
    "resolveJsonModule": true,
    "isolatedModules": true,
    "noEmit": true,
    "jsx": "react-jsx",
  },
  "include": ["src"],
  "baseUrl": "types",
  "typeRoots": ["types"]
}
```

### その他
http://localhost:3000/ はブランクです。
http://localhost:3000/hello はブランクです。
文字タグ単体では表示されます。



Reactでページが正しく表示されない

現在Vuetifyを使いデータテーブルを作成しているのですがCSSが効きません。
どなたか分かられる方いらっしゃいますでしょうか？
ちなみに、以下のサイトを参考にいたしました。
https://qiita.com/uucchhiiee/items/1b48ab1ba54c089fc78a
```vue
<template>
  <div>
    <h1>UserItem</h1>
    <router-link :to="{ name: 'masa' }">Top</router-link>
    <v-data-table :headers="headers" :items="items">
      <template #item.="{ item }">
        <v-btn @click="onClickShow(item)">表示</v-btn>
      </template>
    </v-data-table>
  </div>
</template>
<script>
export default {
  data: () => ({
    dialog: false,
    dialogDelete: false,
    headers: [
      { text: "テスト", value: "test_cd" },
      { text: "テスト", value: "test_nm" },
    ],
    items: [],
  }),
};
</script>

<style>
.v-data-table {
  white-space: nowrap !important;
}
</style>
```

Vuetifyでcssが効かない

[こちら](https://v3.ja.vuejs.org/guide/typescript-support.html#composition-api-%E3%81%A8%E3%81%A8%E3%82%82%E3%81%AB%E4%BD%BF%E7%94%A8%E3%81%99%E3%82%8B)に書いてある通りCompositonAPIでpropsの型を定義していてもsetupの引数にpropsを指定する際には型を記述する必要がない様です。

```TS
export type HogePros = {
  huga: number
  piyo: string
}
--------------

 props: {
    huga: {
      type: Number,
      required: true,
      default: '',
    },
    piyo: {
      type: String
      default: null,
    },
}

setup(props: HogePros) {
```
上記の様に型を指定してもエラーにはなりませんがこれをすると逆に型推論されない様でした。（setup内でprops.まで入力した際にhugaやpiyoの選択肢が出て来ない）
propsとなるオブジェクトにはそもそも型を上記の様に指定しないのが正しい設計なのでしょうか？
とはいえpropsに入る値を制限したい場合propsに型を指定したい事もあるかと思いますがそのような場合はどうするのが良いのでしょうか？

Vue3 CompositonAPIのPropsと型推論について

laravelアプリケーションの開発で、TCPDFとFPDIを利用してPHPでPDFを出力するということをやっています。

ソースに設定したパス（PDFを表示するパス）をブラウザで表示しようとしたところ、
「This PDF document probably uses a compression technique which is not supported by the free parser shipped with FPDI. (See https://www.setasign.com/fpdi-pdf-parser for more details)」とエラーが表示されてしまいました。

エラーの内容を調べてみると、テンプレートのPDFが圧縮されているとフリーのパーサでサポートされていないというようなエラーとのことで、もしわかる方がいれば、テンプレートのPDFを圧縮してない形式に変換する方法があれば、教えて頂きたいです。

併せて、このエラーに関して、別の対処方法がもしわかる方がいれば、ヒントだけでもいただければ嬉しく思います。

よろしくお願いします。

圧縮したPDFの解凍方法を教えてください。

### 前提・実現したいこと

メインの検索画面があり、その検索画面の入力欄に入力するための入力内容検索画面をモーダルで表示しようと思っています。

メインの検索画面と入力内容検索画面はそれぞれ別のモデル、フィルター、モデルになります。

２つあるFilterViewのclassを１つのテンプレートで使用したいのですがDjangoで実現できるのでしょうか？

作成したい内容としては一般的にある内容だと思うのですが、方法がわかりません。
教えて頂けますでしょうか。

### 発生している問題・エラーメッセージ
私の理解としては、urls.pyで指定したviews.pyで指定したclassの内容をテンプレートにレンダリングするなので、
Djangoの前提としては複数のクラスを１つのテンプレートで使用したいというのはDjangoのルールから外れている気もします。。。

モーダルではなく、別のウインドウでの表示であればルールが守られるので出来る気もするのですが。。

### 該当のソースコード

```views
class Filter1(FilterView):
    model = Model1
    filterset_class = Filter1
    template_name = 'filter.html'    
  
class Filter2(FilterView):
    model = Model2
    filterset_class = Filter2
    template_name = 'filter.html'    <-　こちらのクラスはモーダルで表示させたいのでこちらは不要？
    
```

```templates
<form action="" method="get">
        
        <div class="row">
           {{filter.form|crispy}}    <-メインの検索画面(Class Filter1を割り当てたい)
        </div>

<div id="myModal" class="modal fade" tabindex="-1" role="dialog">
・・・
{{filter.form|crispy}}    <- 入力内容の検索画面(Class Filter2を割り当てたい)
</div>


```

Django １つのテンプレートに複数のクラスを使用する

postfix 3.5.8にて新規サーバを構築。(Oracle Linux 8)

aliasesファイルに以下記載し、メール受信時hogehoge.plを起動するように設定。

```
hogehoge: "|/usr/local/hoghoge/hogehoge.pl"
```

上記でメールを送信したところhogehoge.plは起動するのですが、
hogehoge.pl内のファイル出力処理にてread-onlyエラーになりファイルが書き込めない事象が発生。

調査のためhogehoge.pl内に、mountコマンド結果をsyslog出力するように設定したところ、次の通りだった。
```
/dev/mapper/ol-root on /usr type xfs (ro,relatime,attr2,inode64,logbufs=8,logbsize=32k,noquota)
```

/usr　がro(read-only)になっている模様。

そもそもOS上で/usrパーティションを切っておりません。

原因調査に苦慮しています。
有用な情報があればご教示いただけますと幸いです。

## 追記(mountコマンド出力結果)
- コンソールログインでのmountコマンド結果
```
sysfs on /sys type sysfs (rw,nosuid,nodev,noexec,relatime)
proc on /proc type proc (rw,nosuid,nodev,noexec,relatime)
devtmpfs on /dev type devtmpfs (rw,nosuid,size=1993212k,nr_inodes=498303,mode=755)
securityfs on /sys/kernel/security type securityfs (rw,nosuid,nodev,noexec,relatime)
tmpfs on /dev/shm type tmpfs (rw,nosuid,nodev)
devpts on /dev/pts type devpts (rw,nosuid,noexec,relatime,gid=5,mode=620,ptmxmode=000)
tmpfs on /run type tmpfs (rw,nosuid,nodev,mode=755)
tmpfs on /sys/fs/cgroup type tmpfs (ro,nosuid,nodev,noexec,mode=755)
cgroup on /sys/fs/cgroup/systemd type cgroup (rw,nosuid,nodev,noexec,relatime,xattr,release_agent=/usr/lib/systemd/systemd-cgroups-agent,name=systemd)
pstore on /sys/fs/pstore type pstore (rw,nosuid,nodev,noexec,relatime)
efivarfs on /sys/firmware/efi/efivars type efivarfs (rw,nosuid,nodev,noexec,relatime)
bpf on /sys/fs/bpf type bpf (rw,nosuid,nodev,noexec,relatime,mode=700)
cgroup on /sys/fs/cgroup/cpu,cpuacct type cgroup (rw,nosuid,nodev,noexec,relatime,cpu,cpuacct)
cgroup on /sys/fs/cgroup/cpuset type cgroup (rw,nosuid,nodev,noexec,relatime,cpuset)
cgroup on /sys/fs/cgroup/net_cls,net_prio type cgroup (rw,nosuid,nodev,noexec,relatime,net_cls,net_prio)
cgroup on /sys/fs/cgroup/perf_event type cgroup (rw,nosuid,nodev,noexec,relatime,perf_event)
cgroup on /sys/fs/cgroup/devices type cgroup (rw,nosuid,nodev,noexec,relatime,devices)
cgroup on /sys/fs/cgroup/pids type cgroup (rw,nosuid,nodev,noexec,relatime,pids)
cgroup on /sys/fs/cgroup/hugetlb type cgroup (rw,nosuid,nodev,noexec,relatime,hugetlb)
cgroup on /sys/fs/cgroup/memory type cgroup (rw,nosuid,nodev,noexec,relatime,memory)
cgroup on /sys/fs/cgroup/freezer type cgroup (rw,nosuid,nodev,noexec,relatime,freezer)
cgroup on /sys/fs/cgroup/blkio type cgroup (rw,nosuid,nodev,noexec,relatime,blkio)
cgroup on /sys/fs/cgroup/rdma type cgroup (rw,nosuid,nodev,noexec,relatime,rdma)
configfs on /sys/kernel/config type configfs (rw,relatime)
/dev/mapper/ol-root on / type xfs (rw,relatime,attr2,inode64,logbufs=8,logbsize=32k,noquota)
systemd-1 on /proc/sys/fs/binfmt_misc type autofs (rw,relatime,fd=44,pgrp=1,timeout=0,minproto=5,maxproto=5,direct,pipe_ino=15002)
debugfs on /sys/kernel/debug type debugfs (rw,relatime)
hugetlbfs on /dev/hugepages type hugetlbfs (rw,relatime,pagesize=2M)
mqueue on /dev/mqueue type mqueue (rw,relatime)
fusectl on /sys/fs/fuse/connections type fusectl (rw,relatime)
/dev/sda2 on /boot type xfs (rw,relatime,attr2,inode64,logbufs=8,logbsize=32k,noquota)
/dev/sda1 on /boot/efi type vfat (rw,relatime,fmask=0077,dmask=0077,codepage=437,iocharset=ascii,shortname=winnt,errors=remount-ro)
tmpfs on /run/user/500 type tmpfs (rw,nosuid,nodev,relatime,size=402216k,mode=700,uid=500,gid=500)
binfmt_misc on /proc/sys/fs/binfmt_misc type binfmt_misc (rw,relatime)
```
- hogehoge.plでのmountコマンド結果
```
/dev/mapper/ol-root on / type xfs (rw,relatime,attr2,inode64,logbufs=8,logbsize=32k,noquota)
sysfs on /sys type sysfs (rw,nosuid,nodev,noexec,relatime)
securityfs on /sys/kernel/security type securityfs (rw,nosuid,nodev,noexec,relatime)
tmpfs on /sys/fs/cgroup type tmpfs (ro,nosuid,nodev,noexec,mode=755)
cgroup on /sys/fs/cgroup/systemd type cgroup (rw,nosuid,nodev,noexec,relatime,xattr,release_agent=/usr/lib/systemd/systemd-cgroups-agent,name=systemd)
cgroup on /sys/fs/cgroup/cpu,cpuacct type cgroup (rw,nosuid,nodev,noexec,relatime,cpu,cpuacct)
cgroup on /sys/fs/cgroup/cpuset type cgroup (rw,nosuid,nodev,noexec,relatime,cpuset)
cgroup on /sys/fs/cgroup/net_cls,net_prio type cgroup (rw,nosuid,nodev,noexec,relatime,net_cls,net_prio)
cgroup on /sys/fs/cgroup/perf_event type cgroup (rw,nosuid,nodev,noexec,relatime,perf_event)
cgroup on /sys/fs/cgroup/devices type cgroup (rw,nosuid,nodev,noexec,relatime,devices)
cgroup on /sys/fs/cgroup/pids type cgroup (rw,nosuid,nodev,noexec,relatime,pids)
cgroup on /sys/fs/cgroup/hugetlb type cgroup (rw,nosuid,nodev,noexec,relatime,hugetlb)
cgroup on /sys/fs/cgroup/memory type cgroup (rw,nosuid,nodev,noexec,relatime,memory)
cgroup on /sys/fs/cgroup/freezer type cgroup (rw,nosuid,nodev,noexec,relatime,freezer)
cgroup on /sys/fs/cgroup/blkio type cgroup (rw,nosuid,nodev,noexec,relatime,blkio)
cgroup on /sys/fs/cgroup/rdma type cgroup (rw,nosuid,nodev,noexec,relatime,rdma)
pstore on /sys/fs/pstore type pstore (rw,nosuid,nodev,noexec,relatime)
efivarfs on /sys/firmware/efi/efivars type efivarfs (rw,nosuid,nodev,noexec,relatime)
bpf on /sys/fs/bpf type bpf (rw,nosuid,nodev,noexec,relatime,mode=700)
configfs on /sys/kernel/config type configfs (rw,relatime)
debugfs on /sys/kernel/debug type debugfs (rw,relatime)
fusectl on /sys/fs/fuse/connections type fusectl (rw,relatime)
tmpfs on /run type tmpfs (rw,nosuid,nodev,mode=755)
tmpfs on /run/user/500 type tmpfs (rw,nosuid,nodev,relatime,size=402216k,mode=700,uid=500,gid=500)
proc on /proc type proc (rw,nosuid,nodev,noexec,relatime)
systemd-1 on /proc/sys/fs/binfmt_misc type autofs (rw,relatime,fd=44,pgrp=1,timeout=0,minproto=5,maxproto=5,direct,pipe_ino=15002)
/dev/sda2 on /boot type xfs (ro,relatime,attr2,inode64,logbufs=8,logbsize=32k,noquota)
/dev/sda1 on /boot/efi type vfat (ro,relatime,fmask=0077,dmask=0077,codepage=437,iocharset=ascii,shortname=winnt,errors=remount-ro)
tmpfs on /dev type tmpfs (ro,nosuid,noexec,mode=755)
devpts on /dev/pts type devpts (rw,nosuid,noexec,relatime,gid=5,mode=620,ptmxmode=000)
tmpfs on /dev/shm type tmpfs (rw,nosuid,nodev)
mqueue on /dev/mqueue type mqueue (rw,relatime)
hugetlbfs on /dev/hugepages type hugetlbfs (rw,relatime,pagesize=2M)
/dev/mapper/ol-root on /tmp type xfs (rw,relatime,attr2,inode64,logbufs=8,logbsize=32k,noquota)
/dev/mapper/ol-root on /usr type xfs (ro,relatime,attr2,inode64,logbufs=8,logbsize=32k,noquota)
/dev/mapper/ol-root on /var/tmp type xfs (rw,relatime,attr2,inode64,logbufs=8,logbsize=32k,noquota)
binfmt_misc on /proc/sys/fs/binfmt_misc type binfmt_misc (rw,relatime)
tmpfs on /run/user/0 type tmpfs (rw,nosuid,nodev,relatime,size=402216k,mode=700)
```

postfix 3系 aliasesからのスクリプト実行について

vue create ●●　でvueをインストールすると、main.tsがエントリーポイントとなるようですが、
このエントリーポイントはどのファイルで指定されているのでしょうか？

vue create ●●でインストールしたファイルのエントリポイントってどこで指定されているのですか？

いつも大変お世話になっております。

投稿してから１週間くらい経ちますが、誰からもコメントがないようです。
こちらのエラー内容はあまりないものなのでしょうか？？

□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□

表題について質問です。

WordpressとNextの組み合わせでブログサイトを作成しています。
その中で現在ページネーション機能を作成しているのですが、
どうしてもエラーが発生してしまい、上手く改善することができません。

エラー箇所は `pages/entry/page/[id].js` の `getStaticPaths()` です。

ページネーションのURLは以下を形を想定しています。

```
http://localhost:3000/entry/page/1
http://localhost:3000/entry/page/2
http://localhost:3000/entry/page/3
…
```

`paths` に渡す値で何かしら問題が発生していると思いますが、
`pages/entry/[id].js` の `getStaticPaths()` では問題はなく、
`pages/entry/page/[id].js` のみでエラーが発生しています。

`pages/entry/[id].js` の `getStaticPaths()` で渡している値は、

```
[
  {params: {id: '3410'}},
  {params: {id: '3405'}},
  ...
]
```

`pages/entry/page/[id].js` の `getStaticPaths()` で渡している値は、

```
[
  {params: {id: '1'}},
  {params: {id: '2'}}
  ...
]
```

です。
比較してみると、`id` の数値が異なるのみで、それ以外は全く同じになります。
なぜこのような感じになってしまうのでしょうか、、？
どなたか詳しい方がいらっしゃればご教授いただけますと幸いです。


もし不足している情報等あればお気軽にお申し付けください。
それではどうぞ宜しくお願い致します。

# エラー内容
```
Server Error
Error: Error serializing `.postsCount` returned from `getStaticProps` in "/entry/page/[id]".
Reason: `object` ("[object Promise]") cannot be serialized as JSON. Please only return JSON serializable data types.
```

# ソースコード

## ディレクトリ構造
```

# 利用しているファイルのみ記述しています。

.
├── components
│   ├── Layout.js
│   ├── Pagination.js
│   └── Post.js
├── lib
│   └── posts.js
└── pages
     ├── entry
     │   ├── [id].js
     │   └── page
     │       └── [id].js
     └── index.js
```

## lib/posts.js
```
import axios from "axios";
import {PER_PAGE} from "../components/Pagination";


// １ページあたりの取得ページ数
export const PER_PAGE_NUM = PER_PAGE;

// すべての記事取得
export const getAllPosts = async () => {
  const res = await axios.get(`${process.env.NEXT_PUBLIC_RESTAPI_URL}/custom/posts`);
  return res.data;
}

// 記事総数
export const getAllPostsCount = async () => {
  const res = await axios.get(`${process.env.NEXT_PUBLIC_RESTAPI_URL}/custom/posts_count`);
  return res.data;
}

// すべての記事ID取得
export const getAllPostIds = async () => {

  const res = await axios.get(`${process.env.NEXT_PUBLIC_RESTAPI_URL}/custom/posts`);

  // id を 配列(オブジェクト,オブジェクト,...) で格納
  return res.data.map((post) => {
    return {
      params: {
        id: String(post.id)
      }
    }
  });
}

// トップページの記事一覧を取得
export const getTopPagePosts = async (pageNum) => {
  const res = await axios.get(`${process.env.NEXT_PUBLIC_RESTAPI_URL}/posts?per_page=${pageNum}&page=1`);
  return res.data;
}

// １つ記事取得
export const getPost = async (id) => {
  const res = await axios.get(`${process.env.NEXT_PUBLIC_RESTAPI_URL}/posts/${id}`);
  return res.data;
}

// ページネーション -  １ページあたりの記事を取得
// pageNum : 何ページ目か
export const getPostPerPagination = async (pageNum) => {
  const res = await axios.get(`${process.env.NEXT_PUBLIC_RESTAPI_URL}/posts?per_page=${PER_PAGE_NUM}&page=${pageNum}`);
  return res.data;
}
```

## page/entry/page/[id].js
```
// lib
import {getAllPostsCount, getPostPerPagination} from "../../../lib/posts";

// components
import Layout from "../../../components/Layout";
import Post from "../../../components/Post";
import Pagination, {PER_PAGE, range} from "../../../components/Pagination";


export default function PaginationPerPage({posts, postsCount}) {
  return (
    <Layout>

      <ul>
        {posts && posts.map((post) => <Post key={post.id} post={post}/>)}
      </ul>

      <Pagination postsCount={postsCount}/>

    </Layout>
  )
}

export const getStaticPaths = async () => {

  const postsCount = await getAllPostsCount();
  const pageCount = range(1, Math.ceil(postsCount / PER_PAGE));

  const paths = pageCount.map((pageNum) => {
    return {
      params: {
        id: String(pageNum)
      }
    }
  })

  return {paths, fallback: false};
}

export const getStaticProps = async ({params}) => {

  const posts = await getPostPerPagination(params.id)
  const postsCount = getAllPostsCount();

  return {
    props     : {posts, postsCount},
    revalidate: 3,
  };
}

```

## pages/entry/[id].js
```
import Link from "next/link";
import {useRouter} from "next/router";

// lib
import {getPost, getAllPostIds} from "../../lib/posts";

// components
import Layout from "../../components/Layout";


const Post = ({post}) => {

  const router = useRouter();

  if (router.isFallback || !post) {
    return <div>Loading...</div>
  }

  return (
    <Layout title={post.title.rendered}>

      <h1>{post.title.rendered}</h1>

      <article>{post.content.rendered}</article>

      <Link href="/">
        <a>記事一覧へ戻る</a>
      </Link>

    </Layout>
  )
}

export default Post;

export const getStaticPaths = async () => {

  const paths = await getAllPostIds();

  return {paths, fallback: true};
}


export const getStaticProps = async ({params}) => {

  const post = await getPost(params.id);

  return {
    props     : {post},
    revalidate: 3,
  };
}
```

[Nextjs] getStaticPaths() の paths に値が渡せない？

### 前提・実現したいこと

Laravel+Vue.jsでSNS風Webサービスを作成してCircleCIでCI実装に取り組んでいます。
Vueコンポーネントのパスを正しく指定できていないことが原因だと予想しているのですが、上手く解決できませんでした。


### 発生している問題・エラーメッセージ

CircleCI上でnpm run devを実行すると以下のエラーが出る。
```
> dev
> npm run development


> development
> cross-env NODE_ENV=development node_modules/webpack/bin/webpack.js --progress --hide-modules --config=node_modules/laravel-mix/setup/webpack.config.js

This relative module was not found:

* ./components/ArticleLike in ./resources/js/app.js
100%       Asset      Size   Chunks             Chunk Names
/css/app.css   0 bytes  /js/app  [emitted]  /js/app
  /js/app.js  1.01 MiB  /js/app  [emitted]  /js/app

ERROR in ./resources/js/app.js
Module not found: Error: Can't resolve './components/ArticleLike' in '/home/circleci/project/resources/js'
 @ ./resources/js/app.js 3:0-51 9:17-28
 @ multi ./resources/js/app.js ./resources/sass/app.scss

Exited with code exit status 2

```

### 該当のソースコード

config.yml
```
version: 2.1
jobs:
  build:
    docker:
      - image: circleci/php:7.4-node-browsers
    steps:
      - checkout
      - run: sudo composer self-update --1
      - run: composer install -n --prefer-dist
      - run: npm ci
      - run: ls -la
      - run: pwd
      - run: npm run dev
      - run:
          name: php test
          command: vendor/bin/phpunit

```
package.json
```
{
    "private": true,
    "scripts": {
        "dev": "npm run development",
        "development": "cross-env NODE_ENV=development node_modules/webpack/bin/webpack.js --progress --hide-modules --config=node_modules/laravel-mix/setup/webpack.config.js",
        "watch": "npm run development -- --watch",
        "watch-poll": "npm run watch -- --watch-poll",
        "hot": "cross-env NODE_ENV=development node_modules/webpack-dev-server/bin/webpack-dev-server.js --inline --hot --disable-host-check --config=node_modules/laravel-mix/setup/webpack.config.js",
        "prod": "npm run production",
        "production": "cross-env NODE_ENV=production node_modules/webpack/bin/webpack.js --no-progress --config=node_modules/laravel-mix/setup/webpack.config.js"
    },
    "devDependencies": {
        "@johmun/vue-tags-input": "^2.1.0",
        "axios": "^0.19",
        "cross-env": "^7.0.3",
        "laravel-mix": "^5.0.1",
        "lodash": "^4.17.19",
        "resolve-url-loader": "^3.1.0",
        "sass": "^1.15.2",
        "sass-loader": "^8.0.0",
        "vue": "^2.6.14",
        "vue-template-compiler": "^2.6.14"
    }
}

```

### 試したこと

```
$ rm -rf node_modules
$ rm package-lock.json
$ npm install
$ npm run dev
```
どなたか解決法がわかる方がわかる方がいましたら教えていただきたいです。。。

CircleCIでnpm run devを実行するとエラーが出る

```ここに言語を入力
const [movies, setMovies] = useState([])
<Link href="/movies/[id]" as={`/movies/${movie.imdbID}`}>
    <a>{movie.Title}</a>
</Link>
```
このような形で、
```ここに言語を入力
page/movies/[id].tsx
```
にmovieを渡したいのですが、通常のコンポーネントですと
```ここに言語を入力
<Component movie={movie}/>
```
という形で渡せると思うのですが、Linkの場合こうはいかず、どのように渡せば良いかわかりません。

[id].tsxで

```ここに言語を入力
<p>{ movie.title }</p>
```

のような形でreturn内で使い、タイトルを表示させたいです。

よろしくお願いいたします。

Next.js <Link>でpropsを[id].tsxに渡したい React.js

### 発生している問題・エラーメッセージ
以下のようなテーブルとレコードがあリ、iD1と2のレコードにのみ行ロックをかけたいのですが、
SELECT FOR UPDATEのカラム指定によってはテーブルロックとなる場合があります。

**Userテーブル**
|カラム|型|index|その他|
|:--|:--:|--:|--:|
|id|int(11)|primary key|auto_increment|
|name|varchar(255)||
|email|varchar(255)|index|

**レコード**
|id|name|email|
|:--|:--:|--:|
|1|太郎|test1@example.com|
|2|二郎|test2@example.com|
|3|花子|test3@example.com|
|4|洋子|test4@example.com|



### 試したこと
抽出カラムをアスタリスクにすると、想定通りID=1,2のみ行ロックをとることができます。
```sql
SELECT * FROM user WHERE id IN (1, 2) FOR UPDATE; => 行ロック
```
しかし、抽出カラムをIDのみにすると、テーブルロックとなってしまい、ID3,4の更新も出来なくなってしまいます。
```sql
SELECT id FROM user WHERE id IN (1, 2) FOR UPDATE; => テーブルロック
```
なぜID指定のみだとテーブルロックになってしまうのかが疑問なのですが、どなたかご教示いただけますでしょうか。

mysql 5.7 SELECT FOR UPDATEでテーブルロックになってしまう理由

phpにてヘッドレスchromeを使っています。
問題点は、バックグラウンドでchrome.exeが少しずつ溜まっていっており、4時間ほどでメモリ50Gほど使ってしまっています。
およそ4時間の実行で60個位chrome.exeが並んでいたと思います。
処理内で $browser->close();は行っています。

現在は4時間ごとに、「TASKKILL /F /IM chrome.exe」のbatファイルを走らせてとりあえず対策はしています。
バックグラウンドのchrome.exeを消すとメモリは回復します。

並列でPHPを走らせており、1時間に2000回程はヘッドレスchromeの呼出しを繰り返しており、4時間ごとにすべての並列処理を停止し、インターバルを20分程取りbatファイルの実行が不便である事。
メモリ消費量が多く、操作が出来なくなる事や画面表示がおかしくなったりします。

例えば、開いてから指定時間で開いたヘッドレスchromeを落とすなどが出来れば解決しそうにも思います。

なにか解決策などありませんでしょうか？

------------------
追加です。
環境は　WIN-SERVER 2016 PHPは7.2 APACHE chromeは最新バージョンになります。

```ここに言語を入力
$browserFactory = new BrowserFactory();
$agent = "Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/62.0.3202.94 Safari/537.36";

// headless chromeの開始
$browser = $browserFactory->createBrowser([
    'windowSize'      => [1920, 1000],
    'enableImages'    => false,
    'startupTimeout'  => 360,
    'keepAlive'       => true,
]
);


$page = $browser->createPage();
$page->setUserAgent($agent);

   
if(!empty($url_ary)){
　　　foreach($url_ary as $key=>$url){
　　　　　　$navigation = $page->navigate($url);
　　　　　　$navigation->waitForNavigation(@HeadlessChromium\Page::NETWORK_IDLE);
            $evaluation = $page->evaluate('document.documentElement.innerHTML');
            $value = $evaluation->getReturnValue();
            $source=str_replace(array("\r\n","\r","\n","\t"), '', $value);//改行削除
                
            $source_ary[$key]=$source;
                        

      　}
}
$browser->close();
```

$url_aryにURLの配列を入れてLOOPしています。

PHPにてヘッドレスchromeを使っていますが、メモリ消費が増え続けます

### 前提・実現したいこと

mysql 5.7の環境です

|staff_id|datetime|status|
|:--:|:--:|--:|
|101|2021-01-01 10:00:00 |1|
|101|2021-01-01 11:00:00 |1|
|101|2021-01-01 12:00:00 |0|
|101|2021-01-01 13:00:00 |1|
|101|2021-01-01 14:00:00 |0|
|101|2021-01-01 15:00:00 |1|
|101|2021-01-01 16:00:00 |1|
|201|2021-01-01 10:00:00 |0|
|201|2021-01-01 11:00:00 |0|
|201|2021-01-01 12:00:00 |1|
|201|2021-01-01 13:00:00 |1|
|201|2021-01-01 14:00:00 |1|
|201|2021-01-01 15:00:00 |0|
|201|2021-01-01 16:00:00 |0|

上記のようなシフトデータが存在した場合、
staff_id毎に、statusが1の『最小となる時間』と『1時間毎に連続する数』を取得するにはどのようにしたら良いでしょうか？



### 結果イメージ

最終的には以下のような結果を取得したいです
|staff_id|min_datetime|count|
|:--:|:--:|--:|
|101|2021-01-01 10:00:00 |2|
|101|2021-01-01 13:00:00 |1|
|101|2021-01-01 15:00:00 |2|
|201|2021-01-01 12:00:00 |3|

row_numberやoverを使えれば実現出来そうだったのですが
mysql8の環境にすることは叶わない為、5.7系で代替となるSQLを書く事が出来ずに困っております
お力添え頂けますと幸いです

連続するシフトデータをカウントしたい

reactコンポーネントの最適化のためにReact.memoを利用して再レンダリングを抑制したいのですが、コンポーネントが以下のようにfunctionキーワードで定義された関数コンポーネントの場合もメモ化することは出来るのでしょうか？（調べた限りだとアロー関数(FC型)の例しかなくて、、）
※ なぜReact.FCを使えないかというと、コンポーネントに渡すpropsの型を一部ジェネリクス型にしているためです。


```typescript


// Child
interface OwnProps<T> {
  isVisible: boolean;
  data: T[];
  onClick: () => void;
}


export function Child<T>(props: OwnProps<T>) { // ?? react.memo ??
  return (
    <>
      <button onClick={props.onClick}> 
        {isVisible && props.data};
      </button>
    </>
  );
};

// Parent
export default function App() {

  const [isVisble, setIsVisible] = useState(false);
  const data = ["hoge", "fuga", "piyo"];
  const handleClick = useCallback(() => {
      setIsVisible((prev) => !prev);
    },[isVisible]
);
  
  return (
    <> 
      <Child data={data} onClick={handleClick} isVisible={isVisible}/>
    </>
  );
};

```

react アロー関数ではない普通の関数もメモ化したい

### 前提・実現したいこと

これまでローカル環境で開発していたCakePHP4によるシステムを、サーバーにアップロードしたいと考えています。
その際、ソースコードは全て非公開領域に入れ、webroot配下のみを公開領域に入れたいんですが、
普通にwebroot/index.phpの中のrequiredを非公開領域に向けさせただけではうまくいきませんでした。

CakePHPのドキュメントを読んで、src/config/app.phpの設定をいじれば良いのでは？というところまでは分かったのですが
色々と設定をいじってみても、うまく読み込みが行われません。

#### 環境
- CakePHP4.2.8
- PHP7.4.13
- 利用サーバー：エックスサーバー

#### 実現したいディレクトリ構成
[ドメイン名]
 ー cake                   ←ここにwebroot以外を全て格納したい
 ー public_html
 ーー system
 ーーー sys1             ←ここにwebroot配下のファイルを格納したい
 ーーーー webroot             ←ここにwebroot配下のファイルを格納したい
 ーーーーー css
 ーーーーー font
 ーーーーー img
 ーーーーー js
 ーーーーー _.htaccess       ←app.php内のfullBaseUrlを設定するために、一旦削除
 ーーーーー favicon.ico
 ーーーーー index.php

※ドメイン直下には、WordPressがインストール済

### 発生している問題・エラーメッセージ

```
Missing Controller
Cake\Http\Exception\MissingControllerException

SystemController could not be found.
```

### 該当のソースコード

```PHP
// src/config/app.php
    'App' => [
        'namespace' => 'App',
        'encoding' => env('APP_ENCODING', 'UTF-8'),
        'defaultLocale' => env('APP_DEFAULT_LOCALE', 'ja_JP'),
        'defaultTimezone' => env('APP_DEFAULT_TIMEZONE', 'Asia/Tokyo'),
//        'base' => false,
        'base' => '/home/[サーバーID]/[ドメイン名]/cake',
        'dir' => 'src',
        'webroot' => 'webroot',
        'wwwRoot' => '/home/[サーバーID]/[ドメイン名]/public_html/system/sys1/',
        'baseUrl' => env('SCRIPT_NAME'),
        'fullBaseUrl' => '/home/[サーバーID]/[ドメイン名]/cake',
        'imageBaseUrl' => 'img/',
        'cssBaseUrl' => 'css/',
        'jsBaseUrl' => 'js/',
        'paths' => [
            'plugins' => [ROOT . DS . 'plugins' . DS],
            'templates' => [ROOT . DS . 'templates' . DS],
            'locales' => [RESOURCES . 'locales' . DS],
        ],
    ],
```
```PHP
// src/bin/cake.php
// Check platform requirements
require dirname(__DIR__) . '/config/requirements.php';
require dirname(__DIR__) . '/vendor/autoload.php';

use App\Application;
use Cake\Console\CommandRunner;

// Build the runner with an application and root executable name.
//$runner = new CommandRunner(new Application(dirname(__DIR__) . '/config'), 'cake');
$runner = new CommandRunner(new Application('/home/[サーバーID]/[ドメイン名]/cake/config'), 'cake');
exit($runner->run($argv));

```

### 試したこと

- baseを、ソースコードのあるフルパスまでに変更
- baseUrlのコメントアウトを外し、webroot直下の.htaccessを削除（リネーム）
- wwwRootをwebrootまでのフルパスに変更
- fullBaseUrlをソースコードのあるフルパスまでに変更

---

3日ほどこの問題で右往左往しており、全く作業が進まずかなり困っています。
何かヒントのようなものでも良いので、ご教授いただけるとありがたいです。
よろしくお願いします。


### 追記
ご指摘いただきありがとうございます、不足情報について追加させていただきます。

#### ローカル環境時のディレクトリ構成
localhost/cakephp/配下
 ー bin
 ー config
 ー logs
 ー plugins
 ー resources
 ー src
 ー templates
 ー tests
 ー tmp
 ー vendor
 ー webroot             ←webroot配下のファイルのみを公開領域に出したい
 ーー css
 ーー font
 ーー img
 ーー js
 ーー .htaccess
 ーー favicon.ico
 ーー index.php

ローカル環境では、CakePHP4をインストールした直後とディレクトリ構成は変わっておりません。
ローカル環境でのアクセスも、http://localhost/cakephp/でアクセスできておりました。

#### ローカル環境時のapp.php設定内容
```PHP
//　src/config/app.php
    'App' => [
        'namespace' => 'App',
        'encoding' => env('APP_ENCODING', 'UTF-8'),
        'defaultLocale' => env('APP_DEFAULT_LOCALE', 'ja_JP'),
        'defaultTimezone' => env('APP_DEFAULT_TIMEZONE', 'Asia/Tokyo'),
        'base' => false,
        'dir' => 'src',
        'webroot' => 'webroot',
        'wwwRoot' => WWW_ROOT,
        //'baseUrl' => env('SCRIPT_NAME'),
        'fullBaseUrl' => false,
        'imageBaseUrl' => 'img/',
        'cssBaseUrl' => 'css/',
        'jsBaseUrl' => 'js/',
        'paths' => [
            'plugins' => [ROOT . DS . 'plugins' . DS],
            'templates' => [ROOT . DS . 'templates' . DS],
            'locales' => [RESOURCES . 'locales' . DS],
        ],
    ],
```

#### routes.php設定内容
```PHP
//　src/config/routes.php
<?php
use Cake\Routing\Route\DashedRoute;
use Cake\Routing\RouteBuilder;
use Cake\Http\Middleware\BodyParserMiddleware;

$routes->setRouteClass(DashedRoute::class);

$routes->scope('/', function (RouteBuilder $builder) {
    $builder->connect('/', ['controller' => 'Pages', 'action' => 'display', 'home']);

    $builder->connect('/pages/*', 'Pages::display');

    // API機能提供用
    $builder->setExtensions(['json']);
    $builder->resources('Api');


    $builder->fallbacks();
});
```
routes.phpに関しては、現時点でローカル環境、本番環境共に違いはありません。

CakePHP4をサーバーにアップロードするとき、ソースコードを非公開領域に入れたい

pear fileライブラリをphp7.2へ対応中なのですが、`function next()` 内の`do-while`がphp5.4ではループしているのに、php7.2では一度しか動作せずに悩んでいます。

~~`do{...} while (!$error);`は全ての処理後`false`になって終了なので問題ないのですが、~~
2週目の`do{...} while (!$error);`内のどこかで、php7.2場合の処理の仕方が違うようなので検証いたします。

`do{...} while (($goodFile && $this->push()) || !$goodFile);`がphp5.4では`true(ファイル名)`>`true(ディレクトリ名)`>`do{...} while (!$error);`の`false`と正常に動作するのに対し、
php7.2では`true(ファイル名)`>`do{...} while (!$error);`の`false`とディレクトリ名の処理が抜け落ちてしまいます。

調べた限りでは見当たらないのですが、php7.2でwhileの動作や条件式が変わったのでしょうか。
ご存知の方がおられましたら、ご回答よろしくお願いいたします。 


```php
    function push()
    {        
        $filename  = $this->source->getFilename();
        if (substr($filename, -1) == '/') { //it's a directory
            return false;
        } 

        if ($this->uncompressionLevel >= 0 &&
            $this->baseDirCompressionLevel !== null &&
            count($this->readers) >= $this->uncompressionLevel
           ) {
           return false;
        }

        $extensions = explode('.', strtolower($filename));
        $reader =& $this->source;
        $nbUncompressions = 0;

        while (($extension = array_pop($extensions)) !== null) {
            $nbUncompressions++;
            unset($next);
            $next = File_Archive::readArchive($extension, $reader, $nbUncompressions == 1);
            if ($next === false) {
                $extensions = array();
            } else {
                unset($reader);
                $reader =& $next;
            }
        }
        if ($nbUncompressions == 1) {
            return false;
        } else {
            $this->readers[count($this->readers)] =& $this->source;
            unset($this->source);
            $this->source = new File_Archive_Reader_ChangeName_AddDirectory(
                $filename, $reader
            );
            return true;
        }
    }

    function next()
    {
        //debug_print_backtrace();
        if ($this->currentFileNotDisplayed) {
            $this->currentFileNotDisplayed = false;
            return true;
        }
        do {
            do {
                $selection = substr($this->baseDir, 0, $this->baseDirProgression);
                if ($selection === false) {
                    $selection = '';
                }

                $error = $this->source->select($selection, false);
                if (PEAR::isError($error)) {
                    return $error;
                }
                if (!$error) {
                    if (empty($this->readers)) {
                        return false;
                    }
                    $this->source->close();
                    unset($this->source);
                    $this->source =& $this->readers[count($this->readers)-1];
                    unset($this->readers[count($this->readers)-1]);
                }
            } while (!$error);
            
            $filename = $this->source->getFilename();
　　　//問題の箇所
            if (strlen($filename) < strlen($this->baseDir)) {
                $goodFile = (strncmp($filename, $this->baseDir, strlen($filename)) == 0 &&
                             $this->baseDir{strlen($filename)} == '/');
                if ($goodFile) {
                    if (strlen($filename) + 2 < strlen($this->baseDirProgression)) {
                        $this->baseDirProgression = strpos($this->baseDir, '/', strlen($filename)+2);
                        if ($this->baseDirProgression === false) {
                            $this->baseDirProgression = strlen($this->baseDir);
                        }
                    } else {
                        $this->baseDirProgression = strlen($this->baseDir);
                    }
                }                
            } else {
                $goodFile = (strncmp($filename, $this->baseDir, strlen($this->baseDir)) == 0);
                if ($goodFile) {                    
                    $this->baseDirProgression = strlen($this->baseDir);
                }
            }
        } while (($goodFile && $this->push()) || !$goodFile);

        return true;
    }

```