Patheeエンジニアの @mikan3rd です！

自分はPathee PartnerというSasSの開発に携わっています。

フロントエンドは React + Redux + TypeScript で構成されているのですが、カレンダーから日付を選択するUIに react-datepicker というライブラリを使用しています

例えば、こんな感じに使うことができます

f:id:pathee:20190531150016p:plain

今回はこの react-datepicker のexampleの一部の修正のためにプルリクを出してみました！

手順

まずはGitHubで公式のリポジトリをForkし、修正用のリポジトリを作成します

f:id:pathee:20190531174255p:plain

自分のアカウントにリポジトリが複製されるので、これを自分のローカル環境にcloneします

f:id:pathee:20190531174726p:plain

$ git clone git@github.com:mikan3rd/react-datepicker.git

これをmasterブランチのままいじっていきます。

今回、修正したかったのは exampleの「Date Range」の部分でした。

これは2つのコンポーネントを使用して期間を指定するUIを実現する例でしたが、終了日が開始日より前に設定できないように自前の関数で処理していました。

しかし、実は minDate を入れることによりこの処理は不要になることに気づいたので、プルリクを出して見ることにしました。

まずは、 examples/hello-world/README.md の Running Example に起動のコマンドが書いてあるので、その通りに実行してみましょう。 yarnの方が使い勝手が良いと思ってるので、yarnでmoduleをインストールして起動しましょう。

$ yarn
$ yarn start

yarn run v1.16.0
$ cross-env MODULES=false node server.js
Listening at http://localhost:8080
webpack built 1f9c1eef93ea4b840ab8 in 4934ms

http://localhost:8080 にアクセスすると公式ページに掲載されているexampleと同様のものが表示されます。

それでは、実際にコードを修正してみます。

docs-site/src/examples/date_range.jsx に「Date Range」の部分のexampleの記述がされているので次のように修正しました。

import React from "react";
import DatePicker from "react-datepicker";
import isAfter from "date-fns/isAfter";

export default class DateRange extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      startDate: new Date("2014/02/08"),
      endDate: new Date("2014/02/10")
    };
  }

  handleChange = ({ startDate, endDate }) => {
    startDate = startDate || this.state.startDate;
    endDate = endDate || this.state.endDate;
    this.setState({ startDate, endDate });
  };

  handleChangeStart = startDate => this.handleChange({ startDate });

  handleChangeEnd = endDate => this.handleChange({ endDate });

  render() {
    return (
      <div className="row">
        <pre className="column example__code">
          <code className="jsx">
            {`
<DatePicker
    selected={this.state.startDate}
    selectsStart
    startDate={this.state.startDate}
    endDate={this.state.endDate}
    onChange={this.handleChangeStart}
/>

<DatePicker
    selected={this.state.endDate}
    selectsEnd
    startDate={this.state.startDate}
    endDate={this.state.endDate}
    onChange={this.handleChangeEnd}
    minDate={this.state.startDate}
/>
`}
          </code>
        </pre>
        <div className="column">
          <DatePicker
            selected={this.state.startDate}
            selectsStart
            startDate={this.state.startDate}
            endDate={this.state.endDate}
            onChange={this.handleChangeStart}
          />
          <DatePicker
            selected={this.state.endDate}
            selectsEnd
            startDate={this.state.startDate}
            endDate={this.state.endDate}
            onChange={this.handleChangeEnd}
            minDate={this.state.startDate}
          />
        </div>
      </div>
    );
  }
}

終了日の方のDatePickerに minDate={this.state.startDate} を追記することで開始日より前に終了日を選択できないようになりました。

これにより、 handleChange で行なっている次の記述を削除できました。

    if (isAfter(startDate, endDate)) {
      endDate = startDate;
    }

（改めて見るともうちょっと修正できる部分がありました・・・）

yarn test を実行してテストも問題なく通ることを確認し、この変更をコミット&リモートにpushします。

あとは次のようにプルリクエストを作成するだけです。

github.com

おわり

2週間ほどたって無事にmergeしてもらうことができました！

今回はexampleを修正しただけなので全然大したことないですが、とりあえずOSSコミッターへの道の一歩を踏み出したような気がします

これからもOSSに不具合や改善点などがあればソースを読んでプルリクを出せるようにしていきたいですね！

それでは、また次回！

Pathee engineering blog

世界をしなやかに変えるエンジニアたちのブログ

初めてOSSにプルリクを出してみた

手順

おわり