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

asaba 著者:asaba

【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で上のデータを基に新しく配列をつくれば完成です。

  • この記事いいね! (0)

著者について

asaba

asaba author

好きなもの:RPG、チョコミント 少しずつ頑張ります。