# 分割代入を使って見通しの良いコードを書こう

## 分割代入とは？

>配列から値を取り出して、あるいはオブジェクトからプロパティを取り出して別個の変数に代入することを可能にする JavaScript の式である。

[/用語集/Javascript/分割代入](https://tips.weseek.co.jp/5e3af26c25751e0049929801)

変数定義の際に短い記述で実現できるようになります。  
[GROWI](https://tips.weseek.co.jp/5e393927e848c600487d6a01) は [React](https://tips.weseek.co.jp/5e3930c8e848c600487d69ed) を使い UI を構築しているため[分割代入](https://tips.weseek.co.jp/5e3af26c25751e0049929801)の恩恵を受けることができます。

## 実際にコードを見てみましょう。

[該当のコード](https://github.com/weseek/growi/blob/44df910ed453d26453a3c79029ca0f44dce6bce5/src/client/js/components/Admin/ExportArchiveDataPage.jsx) 

```javascript:ExportArchiveDataPage.jsx
  render() {
    const { t } = this.props;
    const { isExporting, isExported, progressList } = this.state;

    const showExportingData = (isExported || isExporting) && (progressList != null);

    return (
      <Fragment>
        <h2>{t('Export Archive Data')}</h2>

        <button type="button" className="btn btn-default" disabled={isExporting} onClick={this.openExportModal}>
          {t('admin:export_management.create_new_archive_data')}
        </button>

        { showExportingData && (
          <div className="mt-5">
            <h3>{t('admin:export_management.exporting_collection_list')}</h3>
            { this.renderProgressBarsForCollections() }
            { this.renderProgressBarForZipping() }
          </div>
        ) }
        
        ~中略~

      </Fragment>
```

データアーカイブを制御するページのボタン部分だけを抜き出しました。  
`const { isExporting, isExported, progressList } = this.state;` では[分割代入](https://tips.weseek.co.jp/5e3af26c25751e0049929801)を用い、変数を定義しています。  

[分割代入](https://tips.weseek.co.jp/5e3af26c25751e0049929801)を用いない場合、 `showExpotringData` の式は次のようになります。

`const showExportingData = (this.state.isExported || this.state.isExporting) && (this.state.progressList != null);`

単語的意味合いを持たない `this.state` がコードにノイズとして入り、ただ長い記述になってしまっています。  
この式では `this.state` という情報は必要ありません。  
[分割代入](https://tips.weseek.co.jp/5e3af26c25751e0049929801)を使った省略をするのが賢明でしょう。  

同様に `const { hoge } = this.props;` のように `this.props` も省略することが可能です。

[分割代入](https://tips.weseek.co.jp/5e3af26c25751e0049929801)を使って見通しの良い読みやすいコードを書きましょう。

---

## Page Navigation

- Canonical URL: https://tips.weseek.co.jp/GROWI/分割代入を使って見通しの良いコードを書こう
- Permalink: https://tips.weseek.co.jp/5e3e6f19591d7f0048b3cc69
- Parent: [GROWI](/5e393927e848c600487d6a01.md)
- Children: 0 total
- Total descendants: 0
- Siblings: 8 total
  - [GROWIでapiを叩いてみよう](/5e4d5253340a4f0049473d2b.md)
  - [GROWIにおけるBootstrap](/5e3938c6e848c600487d69fa.md)
  - [GROWIのバージョンを下げた時に、nodeのバージョンで怒られた時の対処法](/5f7c32e8b8f345004895b23e.md)
  - [SSOと仲良くなろう](/5f99372a04330d004832a02c.md)
  - [formのactionでPUTとDELETEが送れない件](/5e789d45a5e29a004842ba63.md)
  - [reactstrap を使ったコンポーネントのレンダリング制御](/5e424e61decd0a0049953ae1.md)
  - [実例で見るpointer-eventsの使い方](/5e50df38839fe70048321573.md)
  - [故意の技術的負債から目を逸らさない](/5e71da49df47e40049fa6c6f.md)
- Last updated: 2020-02-11T09:41:04.411Z by deleted_at_1672138397219
- Full page listing (all children regardless of count): https://tips.weseek.co.jp/_api/v3/page-listing/children?id=5e3e6f19591d7f0048b3cc69