内容

Next.jsでフロントエンドでCookpadモバイル版のようなレシピサイトを作ってみると言うのが今回の課題でした。講義は数時間分の動画ぐらいでわからない事はSlackの全体チャンネルで随時メンターの方に聞いていく感じです。一覧画面と検索機能、ページネーション、個別レシピページをNext.jsで組めばひとまず基本課題はクリアで、そこからGraphQL endpointを生やしたりスワイプの画面遷移を実装したりと各々好きなタスクを5日間で実装していく形式でした。

Next.jsの開発環境がよく整えられていて特にハマるところも無く開発できたのもあり、あまり無理せず開発できる良い課題の分量だと思いました。 Cookpadさん側で用意して頂いたREST APIがよく出来ていて何も考えずViewを書くだけだったのも大きいです。個人でフロントエンドを書くとなるとAPI鯖も用意する必要があり面倒なのでこうしてフロントエンドだけ体験出来る機会は嬉しいです。

基本課題に加えて実装したのは

GraphQL endpoint
ブックマーク機能
Poster-view

の3点です。Lighthouseのスコア最適化の課題もありましたが、SSGを使いAccesibilityに関する属性を設定してnext/imageを使うだけでSEO以外かなり点数良くなったのでここは取り組んだという程にはしていませんでした。メンターの方も仰ってましたがNext.jsは自動でベストプラクティスの殆どに沿うような動作をするので手で最適化をする余地を見つけるのが難しいです。最初はnext/imageを知らず、パフォーマンス計測してLayoutが遅いからimageにwidthとheightを設定していたりしましたが、これもnext/imageで全部済みました。凄いですね。

GraphQL endpointはApolloでサーバとクライアントを書き型定義をgraphql-codegenで生成して実装しました。型定義を自動生成出来るとは言っても、Apollo clientを使う際ジェネリクスでクエリを指定しないとanyが返る（それはそう）だったりとやっぱり漸進的な部分があり、型を付けていく気持ちがないとすぐエラーを踏むのは若干つらいです。

Poster-viewというのは左右スワイプで別の記事に飛べる機能です。モバイル版のGoogle画像検索で個別の画像をタップし、スワイプするとどういったものか分かると思います。ページをコンテナ内にそのままdivで並べ、現在見ているページに隣接するページはtransform: translateで左右に100 vwずらし、隣接してないページは非可視化しておきます。スワイプ操作はReactならonTouchMoveをlistenして移動量だけtranslateを書き換えてずらし、onTouchEndで次のページに遷移するかページを戻すか決め、 CSSのプロパティをいい感じに付けて自然なアニメーションにします。

これだけではスワイプ中に上下にもページが動き使いづらいのでスクロールをpreventDefaultして止めるのですが、現在のブラウザはデフォルトではtouchmoveイベントはpreventDefault出来ないようになっています（スクロールのたびに可能性があるすべてのリスナーでpreventDefaultしていないか調べていたのではパフォーマンス上大きな問題になってしまうためです）。生のDOMならaddEventListenerの第3引数に{passive: true}と渡せば良いだけなのですが、Reactでは無理なのでuseRefを使い生のDOMにイベントリスナーをひっつけます。またここで繋げられた生のDOMのイベントリスナはuseStateで作られた変数の更新を知れないのでこれもuseRefで緊急脱出ハッチを開けておきます。

インターンのSlackを見ていた感じではPoster-viewを実装している人は居らず、一番実装進められていたかなと思っていたのですが、いざ成果発表となるとGraphQL以外のほぼすべての課題をPoser-viewも含め実装した上デザインも詰めた猛者が出てきて驚きました。この発表を見て正直負けた、やっぱり他を圧倒する実装じゃないとインターンで賞は取れないなとやや意気消沈していたのですが、蓋を開けてみるとなんと最優秀賞に選んでいただけていました。Poster-viewの実装を最後まで詰めたのが良かったみたいです。賞品は大きなステーキ肉2切れとお皿とマグカップでした。肉は家族で食べてマグカップは大学の宿舎で使っています。美味しかったです。

また成果発表はインターン生だけでなく、Cookpad社内のHackaradeと合同だったので社員の方の発表も見れました。出来ているものもそうですがやっぱりプロとなると実装も速かったです。