Cookpad Online Spring Internship 2021に参加してきた話
Cookpad Online Spring Internship 2021に参加してきました！！！
概要
５日間のハッカソン形式のインターンで、「TypeScriptとNext.jsでレシピサービスをつくる」というお題に取り組みました。基本課題と応用課題に分かれていて、用意された講義動画を見たあと基本課題が終わり次第それぞれがやりたい応用課題を進めるという形です。基本課題ではレシピ一覧画面・レシピ詳細画面・ワード検索機能の実装、応用課題ではOGP 対応、マイフォルダ機能の実装、無限スクロール、パフォーマンス最適化、GraphQL、Poster Viewの実装などが事前に候補として提示されており、他にも自分がやりたいと思ったことを自由に実装していく形でした。最終日には成果発表会があり、取り組んだことについての発表を行いました。
講義動画について
JavaScript, TypeScript, React, Next.jsの４つの動画を用意していただいていました。
めっっっっちゃくちゃわかりやすかったです...！！！
すごく手間をかけて作っていただいていたみたいで…！内容自体もすごくわかりやすいんですが、説明欄には何分くらいから何について説明しているかの目次があったり、動画だから自分のタイミングで何回でも見られたりして勉強しやすく本当にありがたかったです🙇♂️✨
基本課題について
講義動画で知識をインプットした後に取り組みました。
私はインターン前にReactとNext.jsの知識がほんのちょっとだけあったので、講義動画を見て比較的スムーズ（？）に実装できたかなと思います。CSS抜きで1日と半分くらい？ でもインターン中や終わった後に他の参加者の方のコード見て「私のコード汚すぎ....!?」となりました....。５日間という期間設定があるにしても超ゴリ押しで汚い実装をしてしまったのでしばらく経ったら自分でも何書いているかわからなくなってそう。反省点です。
応用課題について
基本課題が終わった後に取り組みました。
色々やりたいことがありましたが、最終的には、
- PWA対応
- OGP対応
- 無限スクロール
- Tailwind CSS
- パフォーマンスチューニング(ちょっとだけ)
以上の５つに取り組みました。いくつか少し説明します。
PWA対応について。レシピを調べたいと思った時にスマホ開いてブラウザ開いてブックマーク開いてやっと検索できる、という風にレシピ検索するまでが面倒だと料理すること自体が面倒になってしまうのではと思い、ユーザがより気軽に利用できるようにということで挑戦してみました。next-pwaというライブラリを使用しました。ホーム画面に追加してワンタップで利用開始できたり読み込みが早かったりフルスクリーンでネイティブアプリみたいだったりとテンションが上がりました。
パフォーマンスチューニングについて。next/imageが賢すぎる。Lighthouseのスコアが爆上がりしました。また、色々調べているうちにnext/bundle-analyzerという生成されたjsファイルのバンドル情報を可視化できるプラグインがあるらしいということを知り、物は試しということで使ってみました。lodash.jsでっっっっかとなりました。最終日のお昼くらいに試してみたのですがバンドル情報可視化したあとそこからどうこうするというところまでいけなかったので今後挑戦してみたいです。パフォチューは奥が深そうで面白そうなのでちゃんと時間とって勉強します！！！
その他
TAさんが神でした......slackで質問したら秒で対応してくださいました....しかも丁寧.......神でした.....神.........。クックパッドのフロントつよつよの方に直接質問できる機会なんてなかなかない！と思って結構たくさん質問してしまった気がするのですが毎回すごく丁寧に....(サカナクション)。GraphQLについて質問させていただいた時、slack上でも導入するメリットなど色々教えていただいたのですが、その1時間後？くらいにGraphQLについての記事を投稿されていて「！？」となりました....すごい....。今回期間内に実装できなかったのめちゃくちゃ悔しかったので参考にして勉強したいと思います。
応用課題で色々初めてのことに挑戦してみたのですが、TAさんたちのサポートがなければできませんでした。本当に感謝です🙇♂️✨
また、3日目に隔週で開催されているエンジニア全員参加のミーティングであるTech MTGに参加させていただきました！開発者ブログで良い感じの記事を書いた社員さんの表彰するという内容でした。その際インターン用のslackのチャンネルに社員の方が50人くらい参加してくださりTech MTG中はそこのチャンネルが使われたのですが、盛り上がりがすごかったです！！！！ほぼ宴状態で超ワクワクしました！！！楽しかったです。*1
TAさんに質問させていただいたり、Tech MTGでslackの雰囲気を味わわせていただいたり、インターン期間中に開催された「クックパッドCTOが就業型インターンメンバーにぶっちゃけどうなのか聞いてみた - YouTube」というYouTubeLiveを視聴したりする中で、クックパッドさんはとてもコミュニケーションを取りやすい雰囲気があるのだなというのを感じました。質問に丁寧に即レスしていただけたりslackの雰囲気だったり、そういう中で「あ、もっと積極的に発言しても大丈夫なのかも」って感じて、いっぱい質問できて結果的に色々な知識を吸収できたと思っているのでそういう雰囲気があるのってすごく大切で素敵だなと思いました。
まとめ
参加させていただけてよかった.....！！
TypeScriptやNext.jsに慣れることができたり、新しいこと（PWA対応と実装できなかったけどGraphQL）に挑戦できたり、知識としては持っていたけど実装したことのなかったもの（動的なOGP生成、無限スクロール、Tailwind）を実装できたりなど技術的な面はもちろんですが、社内の雰囲気を知ることができたという点でも参加できてよかったなと感じました。インターンを終えてみて、可読性の高いコードを書きたいしパフォチューももっとやってみたいしGraphQLの勉強もしたいし適切なエラーハンドリングも意識したいしという感じで色々やりたいことや課題を見つけられたので、どんどん挑戦してきたいです！
５日間本当にありがとうございました！！！！！！！！
*1:💃
