やったこと

1. Next.jsやめました

ReduxとReactの接続でいろいろと試しているときに、詰まってる問題がReac由来なのかNext由来なのかが分からず思い切ってやめました。

getInitialPropsの挙動とか、専用のプラグインの挙動がかなりのブラックボックスで自分には早すぎたようです。もう少しReactスキルがアップしてから再挑戦したいと思います。

アプリは $ npx create-react-appで再度作り直しました。

2. redux-sagaについてひたすら考える

ひたすら考えてました。

そもそもSagaが提唱された経緯から thunkとの比較、 observable epicとの比較、型安全な書き方、フォルダ構成、テストの書き方、Generator構文の復習などをやっていたらあっという間に1日が過ぎてしまいました。

正直今やっているプロダクト程度ならThunkで十分なのですが、Sagaの書き心地が知りたいのでもう少し粘ってみます。

明日こそは実装に移りたい・・・

(*余談ですがSagaの紹介記事でやたらと「Thunkはコールバック地獄が厳しい」みたいな記述を見たけど、 async/awaitで書いたら大して変わらへんやんけというお気持ちになりました)

3. Reducerの書き方を変えました

一度はtypesafe-actionsで記述してみましたが、 actionCreator内での型定義やReducerの書き心地などの理由でtypescript-fsaおよびtypescript-fsa-reducersに乗り換えました

github.com

こんな感じで書けます

//  actions.ts
import actionCreatorFactory from 'typescript-fsa'

export const receiveTodos = actionCreator<ReceiveTodosActionPayload>(Types.RECEIVE_TODOS)

// reducer.ts
import { reducerWithInitialState } from "typescript-fsa-reducers"
import * as actions from './actions'
import { TodoState } from './types'

const initialState: TodoState = {
  items: []
}

const reducer = reducerWithInitialState(initialState)
    .case(actions.receiveTodos, (state, {items}) => {
      return {
        ...state,
        items
      }
    })

export default reducer

VSCode上での補完もバッチリ効いてナイスです。Async Actionsの書き方は要検証。

4. API疎通テスト(失敗)

Reactアプリケーションを localhost:3000で動かしているのに対してSwaggerで生成したモックサーバーは localhost:8080で動いているため、当然のごとくCORSで怒られました。React Nativeの開発をしている時は全然気がつかなかった・・・

改めてSwagger Specを読んで当該レスポンスに headers -> Access-Control-Allow-Origin: *を追記したのですが何故か適用されず🤔

Swagger Editor上では構文エラー等出ていないのですがなんでなんでしょうか。

明日もう一度試してだめならExpressからハードコーディングしたダミーレスポンスを返してみます

5. おひす訪問

恵比寿の某社にお邪魔してピカピカのおひすを案内していただきました。気になっていたチョコレートもついでに頂戴。

肝心のミーティングはというと、「デザイナーさんとかエンジニアさんと話してみたいっすwww」と舐めたお願いをしたことをひたすら反省するアレでした。

無防備でお邪魔したせいでこっちが面接してるのかあっちが面接してるのかよく分からない感じになっちゃいましたね。本当に申し訳ないです。

お忙しいなか時間をいただき、本当にありがとうございます。

6. 恵比寿探索

普段あまり足を運ぶ機会がない恵比寿なのでいくつかカフェ巡りをしました。

3つほど訪れましたが、本日のベストはessence cafe

https://essence-cafe.jp/

表向きは花屋と見紛う可愛らしさですが(実際にお花も売っていた)、B1フロアには電源とWi-Fiが完備されており作業スペースに持ってこいでした。

間食でいただいたミートパイも美味しかったです。

7. 会食

Vueコミュニティがきっかけで仲良くなった友人たちとご飯に行きました。

600円のスペアリブがめちゃめちゃ美味しかったです。

とてもワクワクする野望が聞けたので僕も気を引き締めて頑張らなきゃなと思いました。また近いうちにご飯しましょう！

8. ランニング

雨の上がった12:30ごろから深夜ランへ。

1kmを5分フラットで走ってみたくていつもより速めのペースで飛ばしたら、2km付近で見事にバテました...orz

徐々にペースを上げていって、ある程度のスピードに乗ったら均一の速度をキープするのが大事だなという学びです。

まあ今日は恵比寿から渋谷まで歩いたり、お酒も飲んだ後でのランなので疲れていて当然という気もします(言い訳)

明日はずっと雨のようなので休息日にするのもアリかもしれません。

明日やること

明日も本日と同じくオフィス訪問 & 会食の予定が入っています。そろそろ梅雨本番といった感じで天気もイマイチですが、粛々と進捗を生めたらなと思います。

オフィス訪問 & 会食
Redux Sagaの実装
API疎通テスト
Render List View

そういえばまだDead Poolを観に行けてない・・・

明日も良い1日になりますように

Studio Andy

修行編 - 5日目