前回、実際にReact-Reduxを組むことが出来たので、今度はTypeScriptで組みなおすことにしました。
TypeScriptは何度か触ったことがあったのですが、ちゃんと覚えてなかったのでこれを期に覚えようと思います。

そのままTypeScriptに乗せ換えてみてもよかったのですが、調べたら去年のReactアドベントカレンダー2018で
私のやりたかったmaterial-uiのやり方がまとまってあったので、ありがたくチャレンジさせていただきました。

【React】react × redux × material-ui × typescript いまどきのWebアプリの作り方
https://qiita.com/kousaku-maron/items/6357ad4128cf7b9ffcaa

実に丁寧に書かれていて、React-Reduxの基本がわかったらなぞるだけで作ることが出来ました。
これは自分なりに書き直す必要は全くなかったぐらいちゃんと記事が作られていて感動しました。

なので、今回はそこまで長くない記事になります。

ただ、そのまま自動で進めると1点、バージョン関係でエラーが発生してTypeScriptのコンパイルが通りませんでした。
なので、そこだけ紹介させていただきます。

@material-ui/core v3.8.1によるエラー

@material-ui/coreをyarn add で普通に入れてしまうと「v3.8.1」が入りました。(2019/01/05現在)
そして、アドベントカレンダー通りにコードを打ち込んでみてyarn startで動かそうとしたら下記のエラーが発生してコンパイルが通りませんでした。

E:/~~~~/node_modules/@material-ui/core/styles/createGenerateClassName.d.ts
(1,10): Module '"../../../../../../../React/ReactRedux/my-app/node_modules/@types/jss"' has no exported member 'GenerateId'.

どうやらjssの型ファイルの「GeneratedId」がexportされていなかったとのことです。
実際にモジュールの中を覗いてみたら確かに「GeneratedId」がありませんでした。

「GeneratedClass」はあったのですが、@typesのバージョンが上がって仕様が変わってしまったんでしょうかね。
検索しても意外と出てこなくて、下記のGithubのページでこのエラーに関してのやり取りを見つけました。

v3.8.1 issue with @types/jss #14040
https://github.com/mui-org/material-ui/issues/14040

読んでいるとどうやらmaterial-uiのバージョンを下げたらコンパイルが通ったということで
試しに通ったと書いている「v3.7.1」にしてみました。

そして再コンパイルしてみると、見事記事の通りの動作をしてくれました。
特に「v3.8.1」に拘りはないので、一旦この「v3.7.1」でやろうと思います。

「v3.8.1」でもjssの型のバージョンを下げたらいけそうな感じもしますね。
しかし拾ってきたモジュールのソースを弄りたくはないので一旦バージョンダウンで対応します。

手段と目的を履き違えてはいけない！

React-Reduxの基礎が分かれば他の解説記事が読めるようになった

今回の記事もそうなのですが、前回やっとReact-Reduxを使えるレベルまで理解出来たので
記事を読んで端折られていても理解できるようになりました。

つい最近までわからなかったものが急にすごくわかる！って感じになって凄くアドレナリンが出ました。
色々覚えることが多すぎて完全に初心者バイバイですねReact-Redux……

分かってしまえばこっちのものです！

TypeScriptにしても、基本さえわかってしまえばあとはTypeScriptのやり方を学べばいいだけですね。
私はブラウザ起動ではなく、ElectronでReact-Reduxを使いたいので次回は
前々回で作ったソースを自力でTypeScriptに載せ替えをしてからElectron版にチャレンジしようと思います。

実は、Electron+React+Redux+TypescriptのTODOアプリ作成記事を書いてくださっている方がいらっしゃったので
一度試してみたのですが、やはりその時はReact-Reduxを理解しておらず途中で逃げ出しました。

しかし、今の私ならきっと理解できるはず。

ComponentのSFC(Stateless Function Component)化、FSA(Flux Standard Action)に準拠したAction

最後に、今回チャレンジした記事に上記のようなことが書かれていました。
SFC(略文字のせいでスーファミに見えてしまう世代)に関してはまた別途調べてみたいと思います。

ステートレスにすることで処理を軽くするとのことですが、そこまで極限まで張り詰めたものを作るつもりは現時点ではないので
こういう書き方もあるんだなー程度に今はとどめておこうと思います。

いつも理解しかけてきたころに知らない技術が紛れ込んでくるのがいつもわからなくなる原因なので
私は自分で作るときはクラス化でやっていこうと思います。

FSAに関しては覚えた方がよさそうな感じがしましたね。
本当、覚えることが多すぎて時間が一気に奪われてしまうのが辛い。

でもここを乗り越えれば仕事でもかなり楽になりそうなので頑張ります。