uitspitss blog

プログラミングと音楽とエッセイ ※記載内容は個人の見解であり、所属する組織とは一切関係がありません。

オレオを作って学んだReact + Redux + TypeScript

今年、一本目の記事が1月中に書けたのは良い事です。 久しぶりにプログラミング系の記事です。 プログラミング自体は、仕事でもプライベートでもやっていますが、 これと言って記事にする内容もなかったので、久しくなってしまいました。

f:id:uitspitss:20190120020350p:plain

きっかけ

年末年始にtwitterを見てたら、あのなお菓子、オレオのツイートがバズっていました。

年末に@773O3さんによるオレオツイートが投稿され、

年始に海外の@Bl00dThunderさんが翻訳して、海外でもバズる。

そして、オレオ公式アカウントリツイート

OREO Maker

そんな中、2018年末にReactで遊んでいたので、手頃な練習題材がないかなーと思っていたら、 オレオを積み上げるのが簡単そうなので、オレオで素振りしました。

実際に触れるように、github pagesで上げておきました。*1

https://uitspitss.github.io/practice-oreo

f:id:uitspitss:20190120020350p:plain

技術的なところを簡単に書くと、

  • React
  • Redux
  • TypeScript

で作っています。

中でも、Reduxは今回使っていて一番楽しかった! 簡単に言うと、Reduxはアプリケーション内における変数等を保管庫みたいなもの(Store)に 入れて状態(State)を管理するためのフレームワークで、 開発時のエコシステム等もできていて、

github.com

こののChrome拡張機能を入れると、Reduxによって管理されている変数を確認したり、あれやこれやできます。

今回は、

  • inputに入れられたテキスト(今思うとStoreに入れる必要がなかった…)
  • inputに入れられたテキストからマッチする文字列の配列

をStoreに入れて管理させていて、それによって入力に対して動的に動かす感じにしていました。

こうすることで、以下のgifのようなことができます。

f:id:uitspitss:20190120023603g:plain
redux-devtools-extension

Stateの確認だけではなく、ある時点のStateに跳んだりと、全知全能感を楽しめます。 f:id:uitspitss:20190120023826p:plain

実際に開発時に使ってみると、ほんとに便利でした。

「レ」の画像が実は欠けているところの修正とか、複数個のオレオを作れるようにとか、他にもやりたいことはあるけど、これで一旦終了にしておきます。

参考図書

この記事を書こうと思ったのは、半分くらいがこの部分を書きたくてです。 去年の春くらいにReactに手を出していました。 ただ、調べているうちに、「SFC(Stateless Function Component)、これは良いものだ」と思ったりして、 (動けなくなる方の)ハマってしまいました。 このとき、SFCでまとまっている文献等を探しましたが、見つからなくて、 だましだまし Class Component で書いていたりしてました。 それで、去年の秋、技術書典が終わった頃に、技術書典にどんな本が出ていたのかなと調べていたら、 最終的にSFCに持っていくという内容の、素晴らしいReact本がありました。

oukayuka.booth.pm

おまけにTypeScriptも学べて、お値段以上です。

ものすごく助かったのが、書籍内にでてきたコードがディレクトリごと、githubに挙げられていた点でした。 これの何が良いのかと言うと、lint, format関連の設定ファイルは、 最初にちゃんと設定しておくと、ある程度、質の高いコードが最初からできていくことになるのですが、 それを設定するのが大変なので、熟練者から拝借するのが早いです。 今回の練習用コードのlint関連も拝借させていただいた設定そのままです。

あと、著者の方が、続編を匂わせている感もあるので、それも気になります。 React Hooks とか、実用的なフォーム周りの部分とかでしょうか。

今回の、Reactに手を出して、ハマって、技術書に助けられた体験を通して感じたことがありました。 プログラミングをやっていると、いつも巨人の肩*2に乗っている感をバリバリに感じるんですが、 「巨人の肩が高いと思ったら、手近なハシゴを探そう」ということを学びました。 (書くとものすごく長くなるので、察していただけると…)

でも、2次情報だけで動くと痛い目を見ます、とだけは書いておきます。

最後に

新年、一本目ということで、今年の抱負を少し書きます。 もう少しで、SEに転職して2年が経つので、いろいろと考えています。 それは、悩みとかのマイナス方向ではなく、どういうプロダクト・技術が面白いかなという、 どちらかと言えば、プラス方向の考えています、です。

ここ2年は、python + web系 でツヨツヨになりたいと思って動いてきて、 Djangoで開発したり、GCPでサーバー・DB周りを触ったり、機械学習ディープラーニングをやったり、 とバックエンド側のスキルを身につけることができました。 なので、今年は、特に、フロントエンド側のスキルを身につけていきたいと思ってます。 ただ、バックエンド側はバックエンド側で、kubernetesに手を出しているので、そちらも継続です。 最終目標は、全方向ツヨツヨです。

そんなこんなで、2019年最初の記事は、Reactの記事になりました。