# App = ({name}) => name 型のシンタックス / Destructuring assignment

<https://codesandbox.io/s/r50k3n0z4m>

オブジェクトを展開して、変数に代入するシンタックスです。 React 開発においては、以下のケースが頻出します。

index.js

```javascript
// この {} での import も Destructuring assignment に似たシンタックス
import { const1, const2 } from "./const";
console.log(const1, const2, "imported constant");

// object を定義
const obj1 = {
  name: "Nakanaishi",
  music: "Jazz-funk"
};

// name, music という変数を作って、
// 直接 object の内容を展開して代入するシンタックス
const { name, music } = obj1;
console.log(name, music, "obj1");

// 引数を受け取る際に、オブジェクトを展開して受け取るシンタックス
const func1 = ({ name, music }) => console.log(name, music, "func1");
// オブジェクトを関数に渡す
func1(obj1);
```

App.js

```javascript
import React from "react";

// 引数に入ってきた object を展開して受け取る
// 関数 であり、同時に React Component
const App = ({ name, music }) => (
  <div>
    App {name} {music}
  </div>
);

export default App;
```

### よりシンプルな例

<https://codesandbox.io/s/20z1q3lnqp>

{% code title="index.js" %}

```javascript
// オブジェクトを分割して引数に受け取るシンタックス
// 受け取ったオブジェクトのプロパティネームが name ものが name の変数に入る
// val も同じく
const func1 = ({ name, val }) => {
  console.log(name, "name");
  console.log(val, "val");
};

// オブジェクトを定義
const object1 = {
  val: "test",
  name: "nakanishi"
};

// オブジェクトを代入する
func1(object1);

```

{% endcode %}


---

# Agent Instructions: Querying This Documentation

If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter:

```
GET https://super-yusuke.gitbook.io/udemy-course/bu-zu-zi-liao/app-name-name-noshintakkusu-destructuring-assignment.md?ask=<question>
```

The question should be specific, self-contained, and written in natural language.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.