tekitoumemo’s diary

C#、.NET系の技術ブログを書いています。みんなの洋楽ランキングを運営しています。

【第2弾】React使ってちょっとしたもの作った

大したものじゃないんですが、課題だった日付の検索プルダウンを実装しました。数年に遡って週ごとにプルダウンを出してたのですが、使いづらすぎる、量が多すぎる、パフォーマンスも気になるので整えました。インデックスが1000を超えたので(ページ数は2000弱)、そろそろサイト内でいろいろ見れるように整理する段階に入ったかなと思って使いやすくすることが課題でした。

前置きが長くなりましたが、どういう風に変えたのか画像を貼ります。

変更前↓

f:id:tekitoumemo:20180908191148p:plain
手抜き杉。

変更後↓

f:id:tekitoumemo:20180908191348p:plain
デザインも整えて検索しやすいようにしました。まぁ、この検索方法はどっかの有名サイトの丸パクリなんで間違い無いでしょう笑

2時間ぐらいでできるかなーと思ってましたが、結局、8時間(一人日)ぐらいかかっちゃったので苦戦したところをさらっと書きます(ちなみにReactはドドド初心者、Angularは3ヶ月程度仕事でやってる)

this.setState is not a function

なんやこれ?と思って調べたらbindを使わなきゃいけないらしい。書き方は以下。

this.{メソッド} = this.{メソッド}.bind(this);

なんかthisの指すところが違うからbindしてthisを示す必要があるみたい(よくわからないけど)

TypeSctiptが辛い

修行だと思ってるけど本当に苦行。めんどくさいのでstate、propに型をanyにしてるのですが、いちいちcastしなきゃいけなくてめんどい。型宣言するとスラスラ書けないからanyにしたけど結局めんどいから、結果どっちもめんどい(笑)これとかねもう。

this.state.tests as string[]).map((value) =>
    <option value={value} selected=true >{value}</option>
)}

つらみ

他Domが操作できなくて辛い

Aungularでもできないのですがね、Reactだと出来ると思っちゃった(笑)Jqueryの置き換えだから結構めんどくさかった。
なんとか出来るのですが、非推奨なのでやらないでください。結局onchangeで対応した。

refでやる

<input type="email" ref={ input => { this.Input = input }} />
React.findDOMNode(this.refs.Input)
結局fetchでいいよね?

使いやすいからfetchを選定してるけど、どれが良いのかわからん。

コンポーネント化することでサーバー側のコードが綺麗になる

コンポーネント化することで、クライアント+APIで対応出来るのでその分サーバ側のコードが減りました。
辛いところじゃないと思うのですが、直すところが増えるので大変。ここも時間かかった一つの要因だけど、結果よかった。

いろいろ辛かったけど、結果綺麗に出来た気がする。

次はこれやるよー多分
github.com