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

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

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

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

Q&A

解決済

4回答

366閲覧

JavaScriptの分割代入について

maskmelon

総合スコア63

JavaScript

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

0グッド

1クリップ

投稿2020/11/06 02:31

編集2020/11/06 06:26

APIから取得したデータを整形して返すコードなのですが、繰り返しが多くて冗長な感じがします。
一度に変数bookの中に必要なデータを入れることはできないでしょうか?

※コード修正しました

js

1 export const fetchBookByIsbn = async isbnInput => { 2 const url = `https://app.rakuten.co.jp/services/api/BooksBook/Search/20170404?applicationId=${rakutenAppId}&isbn=${isbnInput}`; 3 4 const response = await fetch(url); 5 const data = await response.json(); 6 const bookData = data.Items.map(val => val.Item)[0]; 7 const { 8 isbn, 9 title, 10 author, 11 publisherName, 12 largeImageUrl: coverImageUrl, 13 } = bookData; 14 const book = { isbn, title, author, publisherName, coverImageUrl }; 15 return book; 16}; 17

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

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

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

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

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

m.ts10806

2020/11/06 02:34

何が「必要なデータ」なのでしょうか。 どういうAPIかにもよりますし、現在の質問内容とコードだけではやりたいことが今一つ見えてきません。(それにこのコードだけではなんでそこでreturnしてるのか分からない)
miyabi_takatsuk

2020/11/06 03:16 編集

回答しといてなんですが、 上行で、 largeImageUrl という変数名で宣言してますが、 下行で、 coverImageUrl という変数を使っていますが、 どちらが正解でしょうか? すみません、私が分割代入のことをかん違いしてたので、回答修正しますね。
think49

2020/11/06 03:58 編集

> 繰り返しが多くて冗長な感じがします。 繰り返し処理があるように見えませんが、どこのことでしょう?
maskmelon

2020/11/06 06:27

コードの一部だけ切り取ってしまったので分かりにくくなってしまったようです。申し訳ありません。修正済みのものを載せました。 質問の趣旨としては、isbn, title, author, publisherName, largeImageUrl, coverImageUrlなどを二回書かずに済む方法はないか、というものです。
guest

回答4

0

追記された内容から感じたことがありましたので、回答します。

APIから取得したデータを整形して返すコードなのですが、繰り返しが多くて冗長な感じがします

「1度しか利用されない変数(定数)を無くすことを考えてみる」というのが 人力minify のセオリーになります。
とはいえ、url はソースコード上で桁数を要する文字列データなのでそのまま残すという選択をしました。

  1. fetch() はメソッドチェーンできます。
  2. dataItemsプロパティにある配列は、結果として最初の配列要素しか利用しないなら map() の走査コストを抑制できます。

javascript

1export const fetchBookByIsbn = async isbnInput => { 2 const 3 // endpoint は passive と active とで分けてみました。 4 url = 'https://app.rakuten.co.jp/services/api/BooksBook/Search/20170404' 5 + `?applicationId=${rakutenAppId}&isbn=${isbnInput}`, 6 data = await fetch(url).then(resp=>resp.json()) 7 ; 8 9 return ({ 10 isbn, 11 title, 12 author, 13 publisherName, 14 largeImageUrl: coverImageUrl, 15 } = data.Items[0].Item); 16 17};

一度に変数bookの中に必要なデータを入れることはできないでしょうか?

上記のように、人力minifyを考えると 変数 book は不要です。(訂正:booksになっていた)

ご質問に示されているAPIは試していないため、実データを知らないままでの回答となっています。
確認不足で申し訳ありません(追記)。


訂正)book は必要

javascript

1var data_Items = [ 2 { 3 Item: { 4 isbn : "A", 5 title : "a", 6 author : "authA", 7 publisherName : "pubA", 8 largeImageUrl : "urlA" 9 }, 10 }, 11 { 12 Item: { 13 isbn : "B", 14 title : "b", 15 author : "authB", 16 publisherName : "pubB", 17 largeImageUrl : "urlB" 18 }, 19 } 20]; 21 22console.log( { isbn, 23 title, 24 author, 25 publisherName, 26 largeImageUrl: coverImageUrl 27} = data_Items[0].Item ); // 追記前の回答&ご指摘の内容 28 29// 分割代入では何かしらのテンポラリ変数に代入するなどの措置が必要でした。 30var oj = { isbn, 31 title, 32 author, 33 publisherName, 34 largeImageUrl: coverImageUrl 35} = data_Items[0].Item; 36console.log( oj ); // ご質問者様の意図した結果。 37return oj;

投稿2020/11/06 06:53

編集2020/11/10 02:38
AkitoshiManabe

総合スコア5432

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

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

maskmelon

2020/11/06 11:25

回答くださりありがとうございます。確かにおっしゃる通り変数`book`は不要ですね。色々と無駄が多い書き方だったようです。参考になりました。
AkitoshiManabe

2020/11/06 11:32

プログラムは確実に動作することが求められるので、最初は無駄があっても愚直に書いてゆけばいいと思います。そこから、「人力minify」を考えて整形すればスマートな形になると思います。 JavaScriptに慣ていても、初めて使うAPI(ライブラリ含む)を利用する時は愚直に書くようにしています。
pandanoir

2020/11/10 01:14

return data.Items[0].Item という意味になっており、コードが変わっていますよ
AkitoshiManabe

2020/11/10 02:40

pandanoir さんご指摘ありがとうございます。 回答の誤りと、正答の違いが比較できるコードを追記し、訂正いたします。
guest

0

ベストアンサー

分割代入

繰り返しが多くて冗長な感じがします。

繰り返し処理はありませんが、あえていうなら分割代入が不要です。

new Map

エレガントに書きたいなら、

  1. オブジェクト初期化子を new Map の複製classに変更
  2. Array.prototype.filter を複製classに移植

Re: __stsh さん

投稿2020/11/06 04:01

think49

総合スコア18156

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

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

maskmelon

2020/11/06 06:35

回答くださりありがとうございます。mapを使う方法は思いつきませんでした。参考になりました。
guest

0

分割代入を応用して、入れ子にすれば一発でいけます。

javascript

1const { 2 { 3 isbn, 4 title, 5 author, 6 publisherName, 7 largeImageUrl: coverImageUrl 8 }: book 9} = bookData;

投稿2020/11/06 03:04

編集2020/11/06 03:13
miyabi_takatsuk

総合スコア9528

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

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

miyabi_takatsuk

2020/11/06 03:24 編集

というか、多分、式として解釈されるから、 book変数宣言しないで、 そのままオブジェクトをreturnさせるでいける気がする
maskmelon

2020/11/06 06:36

回答くださりありがとうございます。試してみたのですが、bookが型として解釈されてしまいエラーとなるようです。
miyabi_takatsuk

2020/11/06 08:10

大変失礼しました。 しかし、型・・・ですか? それは本当にJavaScriptでしょうか? もしかしてTypeScriptですか?
miyabi_takatsuk

2020/11/06 08:14

JavaScriptであるならば、 :によって型の指定にはならないはずですが。 TypeScriptならば、質問タグを変更しましょう。 別の話になってしまいます。
maskmelon

2020/11/06 11:40 編集

JavaScriptなのですが、bookがTypeScriptの型の色で表示され、TypeScriptの構文エラーが発生している状態です。 私も最初このやり方でbookにデータを受け取れるのではないかと思ったのですが、うまく行かないようです。
miyabi_takatsuk

2020/11/06 13:19

ふむ・・・。 linterを、ES6以降に対応させていないからかと思います。 ブラウザ実行上だと、どんなエラーが出ますか? ただ、おっしゃる通り、 この方法ではエラーが起きるのは変わらないようです。 結論から言うと、分割代入を使う方法自体が最適解ではないかと思われます。
standard-soft

2020/11/08 08:37

分割代入の入れ子で下記コードが省略できるとは思えないのですが、入れ子にする書き方ができますか? ``` const original = { a: 1, b: 2, c: 3, }; const { a, b } = original; const output = {a, b}; console.log(output); ```
miyabi_takatsuk

2020/11/08 10:55

ご指摘いただいた通り、また、コメントした通り、できておりませんでした・・・。 現在、分割代入にての方法を模索しているところですが、 まだ解法に至っていません 汗
standard-soft

2020/11/08 12:16

miyabiさん、いつも拝見させていただいて参考にしています。 ずっと前から、これ、できなくて不便に感じていました。 const obj = { a, b } = source; こんな構文があったらいいのにと思ったりします。新構文で提案されたりしないかなと願ってます。 自分は、我慢がならん!と思ったので const obj = copyProperty(source, 'a, b'); という文字列でプロパティを指定する関数つくったりしました。 これで一応プロパティ名を2回書かなくて済むようになったのですが 文字列なのでちょっとイマイチです。 https://github.com/standard-software/partsjs/blob/master/source/object/object.test.js#L81
guest

0

ベストアンサー後に失礼します。
coverImageUrlだけは二回書く必要がありますが…

JavaScript

1const book = (({ 2 largeImageUrl: coverImageUrl, 3 ...rest 4}) => ({ 5 coverImageUrl, 6 ...rest 7}))(bookData);

投稿2020/11/06 06:53

shinji709

総合スコア805

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

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

maskmelon

2020/11/06 11:28

回答くださりありがとうございます。参考になりました。
guest

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

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

ただいまの回答率
85.50%

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

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

質問する

関連した質問