【React/typescript】連想配列の要素を持つ配列から、valueごとの配列を作りたい。

Question

プログラミングを始めたばかりの初学者です。
作りたいサービスに必要なReactの技術をCodesandboxにて試しているのですが、詰まってしまいました。
何卒お力添えいただけますと幸いです。

やりたいこと

index.tsxで作成した連想配列を要素として持つ配列"arrays"について、
App.tsxでpropsとして受け取り、valueごとの配列を作りたいです。

例：
const arrays = [
{id: 1, alphabet: "A", japanese: "あ"},
{id: 2, alphabet: "B", japanese: "い"},
{id: 3, alphabet: "C", japanese: "う"}
]

↓

const idArray = [1, 2, 3];
const alphabetArray = ["A", "B", "C"];
const japaneseArray = ["あ", "い", "う"];

やってみたこと

App.tsxにおいて、先に配列"idArray","alphabetArray","japaneseArray"を宣言し、
その後for文で元の配列"props.arrays"のvalueを1個づつ.pushしようと試みました。
しかし、for文の中でエラーが発生してしまい、うまくいきません。

//index.tsx

import { render } from "react-dom";
import App from "./App";

const arrays = [
  {id: 1, alphabet: "A", japanese: "あ"},
  {id: 2, alphabet: "B", japanese: "い"},
  {id: 3, alphabet: "C", japanese: "う"}
  ]

const rootElement = document.getElementById("root");
render(<App arrays={arrays}/>, rootElement);

//App.tsx

import "./styles.css";

export default function App(props) {
  const idArray = [];
  const alphabetArray = [];
  const japaneseArray = [];

// for文にて、下記エラーが発生。
// TypeError
// Cannot read properties of undefined (reading 'id')
  for (let i = 1; i <= props.arrays.length; i++) {
    idArray.push(props.arrays[i].id);
    alphabetArray.push(props.arrays[i].alphabet);
    japaneseArray.push(props.arrays[i].japanese);
  }

  return (
    <div className="App">
  
{/* 表示テスト */}

      <h1>{idArray[1]}</h1>
      <h1>{idArray[2]}</h1>
      <h1>{idArray[3]}</h1>

      <h1>{alphabetArray[1]}</h1>
      <h1>{alphabetArray[2]}</h1>
      <h1>{alphabetArray[3]}</h1>

      <h1>{japaneseArray[1]}</h1>
      <h1>{japaneseArray[2]}</h1>
      <h1>{japaneseArray[3]}</h1>
    </div>
  );
}

このほか、Object.valueを使用した方法も検討してみましたが、知識不足のため先行記事の応用がむずかしく、うまくいきませんでした。
良い方法ございましたら、ご教示いただけますと幸いです。

何卒宜しくお願い致します。

補足

下記がCodesandboxのURLとなります。
https://codesandbox.io/s/epic-edison-osrvl?file=/src/App.tsx:408-421

追記

App.tsxでのconsole.logの結果は下記となります。
console.log(props)
⇒{arrays: Array(3)}

console.log(props.arrays)
⇒(3) [Object, Object, Object]

Answer 1

修正点は以下です。

(1) App.tsx

1.1 arrays の要素の型を定義する。

export type Item = {
  id: number;
  alphabet: string;
  japanese: string;
};

1.2 App のpropsの型を定義する。

type Props = { arrays: Item[] };

const App: React.VFC<Props> = ({ arrays }) => {

1.3 forループの修正

• let i を 0始まりで arrays.length未満にする。
• forループ本体の始めに、以下のようなif文を追加する。

  for (let i = 0; i < arrays.length; i++) {
    /* ???? これは不要でした： if (!arrays[i]) continue; */

1.4 JSX内で各配列の要素を取得する際のインデクス修正

arrays のサンプルとして

 [
  { id: 1, alphabet: "A", japanese: "あ" },
  { id: 2, alphabet: "B", japanese: "い" },
  { id: 3, alphabet: "C", japanese: "う" }
]

を渡すとき、arrays および idList, alphabetList, japaneseList のインデクスは0以上2以下なので、returnで返すJSXを以下にする。

  return (
    <div className="App">
      <h1>{arrays[0].id}</h1>

      <h1>{idList[0]}</h1>
      <h1>{idList[1]}</h1>
      <h1>{idList[2]}</h1>

      <h1>{alphabetList[0]}</h1>
      <h1>{alphabetList[1]}</h1>
      <h1>{alphabetList[2]}</h1>

      <h1>{japaneseList[0]}</h1>
      <h1>{japaneseList[1]}</h1>
      <h1>{japaneseList[2]}</h1>
    </div>
  );

(2) index.tsx

2.1 arrays のサンプル配列を作るときに、Item型を使用する。

import App, { Item } from "./App";

const arrays: Item[] = [
  { id: 1, alphabet: "A", japanese: "あ" },
  { id: 2, alphabet: "B", japanese: "い" },
  { id: 3, alphabet: "C", japanese: "う" }
];

参考

• 上記の修正をしたもの ???? https://codesandbox.io/s/friendly-lewin-ux020

Comments

[panda33]

kilesa様

ご回答いただき、誠にありがとうございます！
修正箇所のご説明に加え、Codesandboxまで作成いただき非常にありがたいです。

Codesandboxを確認させていただき、私の想定通りの挙動となっていることを確認できました！
また、ご説明いただいたおかげで修正が必要な個所のロジックも理解できました。

重ねて御礼申し上げます！

[退会済みユーザー]

コメントありがとうございます。

もうひとつだけ補足させてください。

App の prop である arrays ですが、arraysという名前はあまり好ましくないです。というのも、arrays は array の複数形なので、arrays だとarrayが複数あるもの、つまり二次元配列だったりを想定してしまいます。なので、今回の回答で Item という型を追加したので、arrays を items というpropに修正するとよりよいかと思います。

[panda33]

そうだったんですね！ありがとうございます！
あまり考えずに”複数ある”というだけでつけてしまっていたので、次回からitemsという名称を使わせていただきます！

すみません、あと一点だけ理解できていないと気が付いた部分があり、ご質問させていただけませんでしょうか。"if (!arrays[i]) continue;"の部分が、これまで見たことがない形でして、少し調べて考えてみたのですが下記理解であっていますでしょうか。

if (!arrays[i]) => arrays[i]でないなら
continue => ループ処理を行わず、次のループへ進む

つまり、配列の中に要素が存在せず、nullなどが挟まっていた場合に、飛ばすということでしょうか。

この一行を加えるだけでもエラーが解消でき、驚きました。本件の一番の勘所かと思いますのでぜひ理解したく、大変恐縮ですが、もし可能であればお時間ございます際に、ご教示いただけますと非常にありがたいです。

[退会済みユーザー]

コメントありがとうございます。

> continue => ループ処理を行わず、次のループへ進む
> つまり、配列の中に要素が存在せず、nullなどが挟まっていた場合に、飛ばすということでしょうか。

はい、そうです。null 以外には何も入っていないことを表すundefined だったりするときも含まれます。
ただし、この

if (!arrays[i]) continue;

という一行の追加は、forのインデクスになる i の開始を 0にして、arrays.length未満として

for (let i = 0; i < arrays.length; i++) {

とする修正をしておけば不要でした。なので

https://codesandbox.io/s/friendly-lewin-ux020

のほうも

for (let i = 0; i < arrays.length; i++) {
idList.push(arrays[i].id);
alphabetList.push(arrays[i].alphabet);
japaneseList.push(arrays[i].japanese);
}

に修正しておきました。これでエラーなく動くのを確認できると思います。

回答のほうも

1.3 forループの修正

に、 if (!arrays[i]) continue; が不要だった旨、記載しました。

[退会済みユーザー]

つまり、

if (!arrays[i]) continue;

という一行によって、arrays[i]がnullだったりundefinedだったら後続の処理をスキップさせるのは、ご質問にある元のコードの

for (let i = 1; i <= props.arrays.length; i++) {

という、i を1以上props.arrays.length以下にしているままで、とり急ぎエラーを回避するための対処療法でした。

上記の説明で混乱することがあればまたコメントください。

[panda33]

kilesa様

またしても詳細なご説明をいただき、誠にありがとうございます！
for文の条件が問題の本質だったんですね。疑問が氷解いたしました。

これで次回から、同様の問題は自分で解決できそうです。
重ねて御礼申し上げます。

Answer 2

  for (let i = 1; i <= props.arrays.length; i++) {
    idArray.push(props.arrays[i]['id']);
    alphabetArray.push(props.arrays[i]['alphabet']);
    japaneseArray.push(props.arrays[i]['japanese']);
  }

で期待の動きにならないでしょうか？

エラー文的には、「props.arrays[i]にidというものがないよ」ということです上記でうまくいくかもしれません。

Comments

[panda33]

yosse95ai様
ご回答いただきありがとうございます。

いただいたコードをコピペさせていただいたのですが、
同様のエラーが発生してしまう状況です。

[yosse95ai]

一度`console.log(props)`と`console.log(props.arrays)`の値を出力していただいてもよろしいでしょうか？
中になにがはいってどうなっているか教えていただきたいです。
質問に追記していただけると幸いです。

[panda33]

ご検討いただき非常にありがとうございます！

質問下部にconsole.logの結果を追記させていただきました。
お時間ある際にご検討いただけますと幸いです。

[yosse95ai]

以下のようなinterfaceを追加してもダメでしょうか？
```
interface Info {
id: number;
alphabet: string;
japanese: string;
}

interface Props {
arrays: Info[];
}
export default function App(props: Props) {
const idList = [];
const alphabetList = [];
const japaneseList = [];

for (let i = 1; i <= props.arrays.length; i++) {
idList.push(props.arrays[i].id);
alphabetList.push(props.arrays[i].alphabet);
japaneseList.push(props.arrays[i].japanese);
}
// 以下略
```

[panda33]

追加のコードまでご記載いただき、誠にありがとうございます。

やはり、for文の中で同様のエラーが発生してしまいました。

[yosse95ai]

インターフェースなしの単純にこれで行けるかもしれません。
もしも`props`でエラーが出たら、再度インターフェースを定義してください。
何度も何度もすみませんでしたm(__)m
```
export default function App(props) {
const idList = [];
const alphabetList = [];
const japaneseList = [];
for (let i in props.arrays) {
idList.push(props.arrays[i].id);
alphabetList.push(props.arrays[i].alphabet);
japaneseList.push(props.arrays[i].japanese);
}
```

[panda33]

いえいえ、こちらこそ何度もご検討いただき誠にありがとうございました！非常に心強かったです。
こちらも試させていただきます！