オレオを作って学んだReact + Redux + TypeScript
今年、一本目の記事が1月中に書けたのは良い事です。 久しぶりにプログラミング系の記事です。 プログラミング自体は、仕事でもプライベートでもやっていますが、 これと言って記事にする内容もなかったので、久しくなってしまいました。
きっかけ
年末年始にtwitterを見てたら、あのなお菓子、オレオのツイートがバズっていました。
年末に@773O3さんによるオレオツイートが投稿され、
だいらす🐹さん「暗号みたいな言い方ほんとやめてほしいw」
— 白砂糖 (@773O3) December 31, 2018
面白すぎたんでオレオ全種作ってみた pic.twitter.com/KA9pOOpG47
年始に海外の@Bl00dThunderさんが翻訳して、海外でもバズる。
This has me questioning all I thought I knew about Oreos pic.twitter.com/nGyX8Z4cAV
— BloodThunder (@Bl00dThunder) December 31, 2018
そして、オレオ公式アカウントもリツイート
Cookies and creme by us. Architecture by you. https://t.co/83k6v5GeTa
— Oreo Cookie (@Oreo) January 2, 2019
OREO Maker
そんな中、2018年末にReactで遊んでいたので、手頃な練習題材がないかなーと思っていたら、 オレオを積み上げるのが簡単そうなので、オレオで素振りしました。
実際に触れるように、github pagesで上げておきました。*1
https://uitspitss.github.io/practice-oreo
技術的なところを簡単に書くと、
- React
- Redux
- TypeScript
で作っています。
中でも、Reduxは今回使っていて一番楽しかった! 簡単に言うと、Reduxはアプリケーション内における変数等を保管庫みたいなもの(Store)に 入れて状態(State)を管理するためのフレームワークで、 開発時のエコシステム等もできていて、
こののChrome拡張機能を入れると、Reduxによって管理されている変数を確認したり、あれやこれやできます。
今回は、
- inputに入れられたテキスト(今思うとStoreに入れる必要がなかった…)
- inputに入れられたテキストからマッチする文字列の配列
をStoreに入れて管理させていて、それによって入力に対して動的に動かす感じにしていました。
こうすることで、以下のgifのようなことができます。
Stateの確認だけではなく、ある時点のStateに跳んだりと、全知全能感を楽しめます。
実際に開発時に使ってみると、ほんとに便利でした。
「レ」の画像が実は欠けているところの修正とか、複数個のオレオを作れるようにとか、他にもやりたいことはあるけど、これで一旦終了にしておきます。
参考図書
この記事を書こうと思ったのは、半分くらいがこの部分を書きたくてです。 去年の春くらいにReactに手を出していました。 ただ、調べているうちに、「SFC(Stateless Function Component)、これは良いものだ」と思ったりして、 (動けなくなる方の)ハマってしまいました。 このとき、SFCでまとまっている文献等を探しましたが、見つからなくて、 だましだまし Class Component で書いていたりしてました。 それで、去年の秋、技術書典が終わった頃に、技術書典にどんな本が出ていたのかなと調べていたら、 最終的にSFCに持っていくという内容の、素晴らしいReact本がありました。
おまけにTypeScriptも学べて、お値段以上です。
ものすごく助かったのが、書籍内にでてきたコードがディレクトリごと、githubに挙げられていた点でした。 これの何が良いのかと言うと、lint, format関連の設定ファイルは、 最初にちゃんと設定しておくと、ある程度、質の高いコードが最初からできていくことになるのですが、 それを設定するのが大変なので、熟練者から拝借するのが早いです。 今回の練習用コードのlint関連も拝借させていただいた設定そのままです。
あと、著者の方が、続編を匂わせている感もあるので、それも気になります。 React Hooks とか、実用的なフォーム周りの部分とかでしょうか。
今回の、Reactに手を出して、ハマって、技術書に助けられた体験を通して感じたことがありました。 プログラミングをやっていると、いつも巨人の肩*2に乗っている感をバリバリに感じるんですが、 「巨人の肩が高いと思ったら、手近なハシゴを探そう」ということを学びました。 (書くとものすごく長くなるので、察していただけると…)
でも、2次情報だけで動くと痛い目を見ます、とだけは書いておきます。
最後に
新年、一本目ということで、今年の抱負を少し書きます。 もう少しで、SEに転職して2年が経つので、いろいろと考えています。 それは、悩みとかのマイナス方向ではなく、どういうプロダクト・技術が面白いかなという、 どちらかと言えば、プラス方向の考えています、です。
ここ2年は、python + web系 でツヨツヨになりたいと思って動いてきて、 Djangoで開発したり、GCPでサーバー・DB周りを触ったり、機械学習・ディープラーニングをやったり、 とバックエンド側のスキルを身につけることができました。 なので、今年は、特に、フロントエンド側のスキルを身につけていきたいと思ってます。 ただ、バックエンド側はバックエンド側で、kubernetesに手を出しているので、そちらも継続です。 最終目標は、全方向ツヨツヨです。
そんなこんなで、2019年最初の記事は、Reactの記事になりました。