オブジェクトから値だけを取り出す方法

apiの値を変数に代入する際に、以下のような方法だと可読性が上がります。

const obj = {name: "ko", age: 23, female: true}

const {name, age, female} = obj;

console.log(name); // "ko"

{ var } に代入すると、オブジェクトのキーがvarの値だけを取得できます。

const {name, age, female} = obj;

コンポーネントにpropsを渡すときに、
このモジュール内で使用するapiの値を1行目で確認する役割もあるので便利です。

export default function ArticleDetails({ article }) {
// (ふーん。 サムネとタイトルと記事内容を扱うんだ...)
  const { thumbnail, Title, detail} = article.fields

  return (
    <div>
      <div className="banner">
        <Image 
          src={"https:" + thumbnail.fields.file.url}
          width={thumbnail.fields.file.details.image.width}
          height={thumbnail.fields.file.details.image.height}
          /> 
        <h2>{ Title }</h2>
      </div>
      <div className="detail">
        <h3>detail</h3>
        <div>{ documentToReactComponents(detail) }</div>
      </div>
    </div>
  );
};

おしまい