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

分割代入とは？

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

/用語集/Javascript/分割代入

変数定義の際に短い記述で実現できるようになります。
GROWI は React を使い UI を構築しているため分割代入の恩恵を受けることができます。

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

該当のコード external_link

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; では分割代入を用い、変数を定義しています。

分割代入を用いない場合、 showExpotringData の式は次のようになります。

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

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

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

分割代入を使って見通しの良い読みやすいコードを書きましょう。