モブプロしてみた(4/29の様子）
ラボ GW アドベントカレンダーの3日目（4/29）です。4/29日の35時に書いてますが、4/29です。いいね？
今日（4/29）は、脱脂綿さん・Forteさんと僕の3人でモブプロをしてみました。
ラボの名前がラブレスラボ（lovelace-lab）になりました
実際のところ、多分みんな「ラボ」としか呼ばないと思います。改名の理由は「複数の団体にまたいでるため元の名前から切り離したかった」のと「GitHub OrgのIDを決めたかった」の2点です。
1.メゾン・ド・ラボ
2.lovelace-lab
3.byron-lab
4.Maison de laboratoire (1番と同じ）
5.ラボ・ラ・フランス
6.good-lab
7.perfect-lab
8.淺草lab
9.アニメ系のどれか
という候補の中から選びました。9番には「ラボライブ」だの「ご注文はラボですか？」だの、ひたすら大喜利が生じていたのはSlackの宿命というヤツでしょうか。
lovelaceとbyronが並んでていて気づく人がいるかもしれませんが、元ネタはAda Lovelaceです。お父ちゃんのByron卿（というか旧姓）から取るのもアリかなーとか思ってたりしました。
ちなみにラボの利用用途としてエンジニアに限定するわけでは無いので、エンジニアリングを直接的に指す言葉は避けました。本（ほん）を生やす人や、Podcastを生やす人も多いですが、それら含め、みんなのラボです。
まぁ「ラボ」としか呼ばれないでしょうね！！！
名前なんてただのプレースホルダーなのです。
モブプロをやってみた
モブプロと言いつつ、あまり時間がとれなかったこととイントロダクションというところで、僕がドライバーをやりながら解説したり、突っ込みや質問が入ったりというスタイルでした。
これは create-react-app を使って生成しました。
$ yarn create react-app lab-app --typescript
or
$ npx create-react-app lab-app --typescript「なんでいきなりGitが初期化されてしかもコミットされてるの？」という質問がありましたが、create-react-app自体がプロジェクトディレクトリを作成して必要なものをインストールした上で、git init や git commit まで一通りやってくれるからです。
Reactのロゴとかいらんのでそこらへんを削りました。あと、tsconfig.jsonの、targetをes2015に変更し、excludeにnode_modulesを追加しました（コンパイル時間問題のため）
まずは React を触ってみるために、Tips を入力するためのコンポーネントを作成しました。といっても中身は実装せず、ダミーの div を返すだけです。
ついでに、.prettierrc も入れてます。
よくある input のコンポーネントですが、React Hooks の useState の説明のために書いてみました。
ts-jestが入ってないので、ts-jestを入れて、jest.config.jsを書いて、Jest（ユニットテスト）でTypeScriptを使えるようにします。
Tipsのテストと言いつつ、この1つ前のTipsコンポーネントのテストではありません…。clean architectureっぽいのを実装したのです。ここだけコミット単位が雑な気がします…。というか、ちゃんと名前を付けるなら、TipsユースケースのうちcreateTipsを作ってみたとかになるかなと思います。
ここでは、clean architectureで良くユースケース・エンティティと呼ばれるものを、いったん1つのdomainsというレイヤーに納めました。
あと単にTipsPortというリポジトリパターンのportを用意しています。
原点の図にあるcontrollerからusecase input port経由でuse caseにいって、usecase output portからpresenterにいくという経路のうち、input/outputでportの種類を分ける理由がいまいち理解できず、単なるTipsのPortという名前にしています。
input/outputは普通に逆転するだろうから、いちいちinput/outputと呼び分ける必要ってあるのかな？
それはさておき、TipsPort#save の挙動だけ見るというコードとユニットテストを書きました。
TipsPortは単なるインターフェースであり、それの実態をadaptersというディレクトリの中に置いてみました。これも先ほどのdomainsと似たような理由でinterface&adapters と framework & drivers が入り交じったものになっています。
domains/tips では、saveだけ対応したコードができあがっているため、それに対応する実装としてlocalStorageに対応したものを書きました。ラボアプリはFirebaseで動かすことが前提なので、FirestoreやRealtime DatabaseのAdapter/driverがあればいいのですが、実際にdomainsからadapterまでつないでみてデータがやりとりされる（localStorageにデータが格納される）ところまでをやってみた方が、メンバー全員が理解しやすいかな？と思ったので、こういう順番で作っています。
また、localStorageのユニットテスト用モックとして、jest-localstorage-mockをインストールしています。
所感
時間があまりとれなかったこともあって、さほど進んではいませんが、出来ればラボアプリをラボメンみんなで作っていきたい（けど、GW終わるまでには実際に動くようにしたいので、ペースによっては僕1人で実装してるかもしれません。その時はここのブログで詳しく解説を書いていく予定です）
2019/04/29の35時ですが、GWアドベントカレンダー3日目（4/29）でした。
明日（4/30）は、脱脂綿さんが書いてくれます。パチパチ
この記事が気に入ったらサポートをしてみませんか？