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

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

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

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

Q&A

解決済

2回答

543閲覧

既存のコードを読みやすい形に変更したい

ruuuu

総合スコア167

JavaScript

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

0グッド

0クリップ

投稿2022/09/10 11:33

前提

以下のデータをフォーマットする処理を書いたのですが、冗長になりすぎてしまい、少々読みにくいと感じた為、簡潔に書く方法があれば教えて欲しいです。

const planList = [ { id: '1', name: 'aaaa', plans: [ { id: '1', name: 'test1', score: '150', }, { id: '2', name: 'test2', score: '220', }, { id: '3', name: 'test3', score: '300', } ] }, { id: '2', name: 'bbbb', plans: [] }, { id: '3', name: 'cccc', plans: [ { id: '4', name: 'test5', score: '100', }, { id: '5', name: 'test6', score: '200', }, { id: '5', name: 'test7', score: '900', } ] }, ]

試したこと

自分が書いたコードは以下になります

const formatPlanList = planList.map(elem => { const filterPlans = elem.plans.filter( (element, index, self) => { const sortIndex = self.findIndex((e) => { if(e.id) { if(e.id === element.id) { return true } else { return false } } else { return false } }) if (sortIndex === index) { return true } else { return false } }) return filterPlans }) .filter(e => e.length > 0) .map(elem => { const plans = elem.map(plan => { return { id: plan.id, name: plan.name, img: plan.id, point: plan.score } }) return plans })

実装した内容としては、planList.plansのidが重複していた場合は重複している要素を削除し、空の配列を削除した後に、planList.plansを指定のプロパティに変更しているといった形です。

良い実装方法がありましたら、ご助言頂けましたら幸いです。

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

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

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

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

guest

回答2

0

重複した場合、あと側が有効になってしまうけど・・・

js

1const formatPlanList = planList 2 .map(plan => plan.plans) 3 .filter(plans => plans.length) 4 .map(plans => [...new Map(plans.map(plan => [plan.id, plan])).values()]) 5 .map(plans => plans.map(({id, name, score}) => ({id, name, img: id, point: score})));

投稿2022/09/10 12:45

編集2022/09/10 12:59
shiracamus

総合スコア5406

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

ruuuu

2022/09/10 13:21 編集

ご回答ありがとうございます。 そういえば重複の削除方法を調べていた際に、「new Map」こちらを使用する方法を見かけたことがありました。 「Map」はあまり使ったことがないですが、今後使っていけるように調べてみます
guest

0

ベストアンサー

これでどうでしょう?

javascript

1const formatPlanList = planList.map(elm => 2 elm.plans.filter( 3 (e1, i, ary) => ary.findIndex(e2 => e2.id === e1.id) === i 4 ).map(({ id, name, score }) => ({ id, name, img: id, point: score })) 5).filter(plans => plans.length);

実行例: https://codepen.io/su507/pen/jOxqoPQ?editors=0012

投稿2022/09/10 12:30

退会済みユーザー

退会済みユーザー

総合スコア0

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

ruuuu

2022/09/10 13:22 編集

ご回答ありがとうございます。 ご提示いただいたコードで、問題なくデータをフォーマットすることが出来ました ただ、実は一点疑問だった点が、「planList.plans」の「id」を参照する際に、空の配列を参照することで、デベロッパーツールのコンソールにエラーが出てしまったことがあり、それもあり実はより冗長な形となってしまっておりました。 ご提示いただいたコードではエラーは出なかったのですが、重ね重ね恐縮ですが、こちらの理由って何故でしょうかね...?
退会済みユーザー

退会済みユーザー

2022/09/10 13:22

コメントありがとうございます。 > ・・・空の配列を参照することで、デベロッパーツールのコンソールにエラーが出てしまった との件、興味深い問題ですね 🤔 可能でしたら、そのデベロッパーツールのコンソールにエラーが出ていたコードを掲載した新しい質問を投稿していただけますでしょうか? そちらのほうで拝読させて頂きたいと思います。
ruuuu

2022/09/10 13:32 編集

すみません。 ただ今、再度検証してみたのですが、自分の勘違いのようでした。 ですが、今回素朴な疑問と申しますか、planListのplansには空の配列の値が存在していますが、こちらから「id」プロパティを「findIndex」メソッドによって参照する際は、何故エラーとならないのか、といった点が少々疑問です。 度々のご質問で大変恐縮ですが、もしお願い出来ましたらこちら箇所につきまして、少々ご助言の程頂けましたら幸いです。
退会済みユーザー

退会済みユーザー

2022/09/10 13:43

findIndex メソッドの引数に与えるチェック関数を fn として、空の配列に対して findIndexメソッドを使って [].findIndex(fn) としても、関数 fn は一度も呼ばれないので fn の関数本体の中で配列要素 e の id プロパティを参照する e.id というコードが書かれていても、fn が呼ばれないのでエラーにならないです。
退会済みユーザー

退会済みユーザー

2022/09/10 13:49

補足 同様に、たとえば 空配列のmap メソッドを呼ぶと、やはり mapメソッドに渡した関数は一度も呼ばれず、 エラーになることなく結果として空配列が返されます。
ruuuu

2022/09/10 13:49

重ね重ねありがとうございます。 そういうことだったのですね。 大変勉強になりました。
guest

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

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

ただいまの回答率
85.50%

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

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

質問する

関連した質問