【cordova-react】長ったるいコードをfor文で解決させた話

前に書いた記事の後付けです。

selectタグを用いて生年月日をプルダウンする機能を実装したのですが、生年月日を全部手書きで書いたためか

エディタの機能やコーディングのスピードが著しく落ち、メンテナンスしにくいコードになってしまいました。

行を無駄に使っているのでスクロールするときもぎこちなくこの状態では効率が悪いと思い、とりあえず

生年月日をループさせてコードの行を減らすことに努めました。

生年月日のデータをreactで書くとこんな感じになります。悪い例　↓

<pre>    this.dayData = [
      {value: '', label: '▼日にち選択'},
      {value: 1, label: '1'},
      {value: 2, label: '2'},
      {value: 3, label: '3'},
      {value: 4, label: '4'},
      {value: 5, label: '5'},
                .
                .
                .</pre>

コンストラクタ内でthis.dayDataを初期化しています。

生年月日なので、19××～20××と幅広い西暦を設定しなければいけません。

当然これを直接書くと年齢の幅を考えると100行近くなってしまいますね・・・。

短いですがここでシェイプアップのためにrender()内で記述したコードを説明します。

//コンストラクタ内

　　{value: '', label: '▼日にち選択'},


　　//render内

    for(var dayNum = 1930; dayNum <=2030; dayNum++){
    this.dayData[dayNum] = {value: dayNum, label: dayNum};
    }

みてくれは通常のjavascriptで連想配列を新しく追加するときのような形式になっています。

これを書いたら後はmapで上のデータを基に新しく配列をつくれば完成です。