JavaScriptの分割代入について

Question

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

※コード修正しました

 export const fetchBookByIsbn = async isbnInput => {
  const url = `https://app.rakuten.co.jp/services/api/BooksBook/Search/20170404?applicationId=${rakutenAppId}&isbn=${isbnInput}`;

  const response = await fetch(url);
  const data = await response.json();
  const bookData = data.Items.map(val => val.Item)[0];
  const {
    isbn,
    title,
    author,
    publisherName,
    largeImageUrl: coverImageUrl,
  } = bookData;
  const book = { isbn, title, author, publisherName, coverImageUrl };
  return book;
};

Comments

[m.ts10806]

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

[miyabi_pudding]

回答しといてなんですが、
上行で、
largeImageUrl
という変数名で宣言してますが、
下行で、
coverImageUrl
という変数を使っていますが、
どちらが正解でしょうか？

すみません、私が分割代入のことをかん違いしてたので、回答修正しますね。

[think49]

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

繰り返し処理があるように見えませんが、どこのことでしょう？

[maskmelon]

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

Answer 1

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

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

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

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

export const fetchBookByIsbn = async isbnInput => {
  const
    // endpoint は passive と active とで分けてみました。
    url = 'https://app.rakuten.co.jp/services/api/BooksBook/Search/20170404'
      + `?applicationId=${rakutenAppId}&isbn=${isbnInput}`,
    data = await fetch(url).then(resp=>resp.json())
  ;

  return ({
    isbn,
    title,
    author,
    publisherName,
    largeImageUrl: coverImageUrl,
  } = data.Items[0].Item);

};

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

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

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

---

訂正）book は必要

var data_Items = [
  {
    Item: {
      isbn : "A",
      title : "a",
      author : "authA",
      publisherName : "pubA",
      largeImageUrl : "urlA"
    },
  },
  {
    Item: {
      isbn : "B",
      title : "b",
      author : "authB",
      publisherName : "pubB",
      largeImageUrl : "urlB"
    },
  }
];

console.log( { isbn,
    title,
    author,
    publisherName,
    largeImageUrl: coverImageUrl
} = data_Items[0].Item ); // 追記前の回答＆ご指摘の内容

// 分割代入では何かしらのテンポラリ変数に代入するなどの措置が必要でした。
var oj = { isbn,
    title,
    author,
    publisherName,
    largeImageUrl: coverImageUrl
} = data_Items[0].Item;
console.log( oj ); // ご質問者様の意図した結果。
return oj;

Comments

[maskmelon]

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

[AkitoshiManabe]

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

[pandanoir]

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

[AkitoshiManabe]

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

Answer 2

分割代入

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

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

new Map

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

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

Re: __stsh さん

Comments

[maskmelon]

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

Answer 3

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

const {
  {
    isbn,
    title,
    author,
    publisherName,
    largeImageUrl: coverImageUrl
  }: book
} = bookData;

Comments

[miyabi_pudding]

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

[maskmelon]

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

[miyabi_pudding]

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

[miyabi_pudding]

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

[maskmelon]

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

[miyabi_pudding]

ふむ・・・。
linterを、ES6以降に対応させていないからかと思います。
ブラウザ実行上だと、どんなエラーが出ますか？

ただ、おっしゃる通り、
この方法ではエラーが起きるのは変わらないようです。
結論から言うと、分割代入を使う方法自体が最適解ではないかと思われます。

[standard-soft]

分割代入の入れ子で下記コードが省略できるとは思えないのですが、入れ子にする書き方ができますか？

```
const original = {
a: 1,
b: 2,
c: 3,
};

const {
a, b
} = original;

const output = {a, b};

console.log(output);
```

[miyabi_pudding]

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

[standard-soft]

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

Answer 4

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

const book = (({
  largeImageUrl: coverImageUrl,
  ...rest
}) => ({
  coverImageUrl,
  ...rest
}))(bookData);

Comments

[maskmelon]

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