質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

新規登録して質問してみよう
ただいま回答率
87.20%
Lodash

Lodashは、JavaScriptのユーティリティライブラリ。Underscoreの派生ライブラリで、配列・オブジェクトの操作に便利です。また、コードの可読性も高めることができます。

TypeScript

TypeScriptは、マイクロソフトによって開発された フリーでオープンソースのプログラミング言語です。 TypeScriptは、JavaScriptの構文の拡張であるので、既存の JavaScriptのコードにわずかな修正を加えれば動作します。

React.js

Reactは、アプリケーションのインターフェースを構築するためのオープンソースJavaScriptライブラリです。

解決済

lodashの関数通したオブジェクトをReact、typescript環境で使うには?

aerhaebrgeh
aerhaebrgeh

総合スコア6

Lodash

Lodashは、JavaScriptのユーティリティライブラリ。Underscoreの派生ライブラリで、配列・オブジェクトの操作に便利です。また、コードの可読性も高めることができます。

TypeScript

TypeScriptは、マイクロソフトによって開発された フリーでオープンソースのプログラミング言語です。 TypeScriptは、JavaScriptの構文の拡張であるので、既存の JavaScriptのコードにわずかな修正を加えれば動作します。

React.js

Reactは、アプリケーションのインターフェースを構築するためのオープンソースJavaScriptライブラリです。

1回答

0評価

0クリップ

196閲覧

投稿2022/06/19 15:48

lodashの関数通したオブジェクトをReact、typescript環境で使うには?

Reactの入門者です。
オブジェクト配列である変数productListを、lodashの.groupBy()を使用しキー"category"毎にグルーピングした配列を
テンプレートに表示させたいのですが、下記のコードではObject.entries().map()のところでエラーが発生します。

lodash関数が返す変数は標準の配列ではなくlodash特有のオブジェクトになるんでしょうか。
それが型付の世界でどういう取り扱いになるのかが理解できていません。

また、下記の疑問点はReact,JSXの知識になると思うのですが、

・やりたいこととしては、categoryでグルーピングしたリストをテンプレートに表示したいため
2重ループを書く必要が出てきますが、JSX(tsx)内ではどのように記述したら良いのでしょうか?

・ちなみに、ドキュメントを見るとlodashの関数にもmap()関数が存在するようですがJSX内で標準のmap()ではない、lodashのmap()も使えるのでしょうか?

lodash,react(jsx),typescriptと、登場人物が多く要因が複雑に絡み合ってそうで、
解決方法のご教示をお願いしたいです。よろしくお願いします。

javascript

type product = { category: string price: string stocked: boolean name: string } const productList: product[] = [ { category: "Sporting Goods", price: "$49.99", stocked: true, name: "Football" }, { category: "Sporting Goods", price: "$9.99", stocked: true, name: "Baseball" }, { category: "Sporting Goods", price: "$29.99", stocked: false, name: "Basketball" }, { category: "Electronics", price: "$99.99", stocked: true, name: "iPod Touch" }, { category: "Electronics", price: "$399.99", stocked: false, name: "iPhone 5" }, { category: "Electronics", price: "$199.99", stocked: true, name: "Nexus 7" } ]; const dict: any = _(productList).groupBy('category').value() return ( <table> <tbody> <tr> { Object.entries(dict).map(key: string) => { return ( <tr> <td>{key}</td> </tr> ) }) } </tr> </tbody> </table> )

良い質問の評価を上げる

以下のような質問は評価を上げましょう

  • 質問内容が明確
  • 自分も答えを知りたい
  • 質問者以外のユーザにも役立つ

評価が高い質問は、TOPページの「注目」タブのフィードに表示されやすくなります。

気になる質問をクリップする

クリップした質問は、後からいつでもマイページで確認できます。

またクリップした質問に回答があった際、通知やメールを受け取ることができます。

teratailでは下記のような質問を「具体的に困っていることがない質問」、「サイトポリシーに違反する質問」と定義し、推奨していません。

  • プログラミングに関係のない質問
  • やってほしいことだけを記載した丸投げの質問
  • 問題・課題が含まれていない質問
  • 意図的に内容が抹消された質問
  • 過去に投稿した質問と同じ内容の質問
  • 広告と受け取られるような投稿

評価を下げると、トップページの「アクティブ」「注目」タブのフィードに表示されにくくなります。

まだ回答がついていません

会員登録して回答してみよう

15分調べてもわからないことは
teratailで質問しよう!

ただいまの回答率
87.20%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

関連した質問

同じタグがついた質問を見る

Lodash

Lodashは、JavaScriptのユーティリティライブラリ。Underscoreの派生ライブラリで、配列・オブジェクトの操作に便利です。また、コードの可読性も高めることができます。

TypeScript

TypeScriptは、マイクロソフトによって開発された フリーでオープンソースのプログラミング言語です。 TypeScriptは、JavaScriptの構文の拡張であるので、既存の JavaScriptのコードにわずかな修正を加えれば動作します。

React.js

Reactは、アプリケーションのインターフェースを構築するためのオープンソースJavaScriptライブラリです。