春休み最後にクックパッドのスプリングインターンに参加しました。内容は 5 日間のハッカソン。モダンフロントエンド技術を使って、レシピページを作ってきました。

本記事はそのまとめ・振り返りです。

概要は以下の通りになります。

• クックパッドのスプリングインターンに参加した。
• フロントエンド領域 のハッカソン型
• Next.js,React,Typescript,GraphQL といったモダン技術を使ってレシピページを開発した。

正直ハッカソン型のインターンはあまり得意ではありませんでした。ですが、今回は自分なりに戦略を立て、納得のいくレシピページを作成することができました。

以下に詳細をまとめていきます。

1. 志望動機・選考

インターンの内容について説明していく前に、志望動機と選考について書いていきます。

まず僕が今回のインターンに参加しようと思った理由についてです。理由としては以下の 2 つが挙げられます。

Next.js と GraphQL にがっつり触るきっかけが欲しかった。

一点目は新しい技術(Next.js,GraphQL)の習得です。僕は普段からアルバイトや個人開発を通じて、React,Typescript には触れています。しかし、それらは create-react-app * restful というアーキテクチャです。そのため、エントリー時点では Next.js や GraphQL には触れた経験がほとんどありませんでした。そこで今更ではありますが、このハッカソンを通して、これらの技術を「完全に理解」してしまいたいと思った、というのが一点目の理由です。

クックパッドに興味があった

二点目はクックパッドへの興味です。僕の中でクックパッドは「Web 界隈で有名な人や技術に強い人がたくさん在籍している会社である」というイメージがありました。そのため、非常に興味のある会社の一つでした。また、昨年 7 月に開催された技育祭の発表の中で、個人的に一番印象に残ったのが、クックパッドの CTO・成田さんの発表でした。このようにクックパッドは「インターンに一度は参加してみたい！」と思っていた会社であった、というのが二点目の理由です。

以上の二つの理由から、このインターンに応募することにしました。

次にインターンの選考についてです。エントリシートと Web テストのみで、面接はありませんでした。

エントリーシートはこれまでの経験や志望動機といつも通り。

Web テストでは

• アルゴリズム系の問題 x 3
• 「自らの課題を解決するために作成したソフトウェアやコードについて述べよ」という記述問題 x 1

という構成で、計 4 問出題されました。

アルゴリズム系の問題が正直苦手であるため、不安でしたが、なんとか合格することができました。

2. インターン当日

さて、いよいよインターン本番です！

2.1 意識したこと

まず、当日意識したことについてです。

既に書きましたが、僕はハッカソンに苦手意識がありました。理由は昨年の 9 月に参加したサイバーエージェントの開発型ハッカソンです。

React,Typescript,create-react-app と手に慣れた技術を使って臨んだのですが、最終的な成果物のクオリティが他の子と比較して低いなぁ、と感じていました。

ここでいう「クオリティが低い」とは具体的に以下の二点が挙げられます。

• デザインがダサい
• 最低要件を実装する以上の機能実装ができなかった。

また、開発期間が二日と短かったこともあり、焦り気味であった記憶があります。開発のペース配分についても、課題を感じていました。

そこで、今回のインターンでは、サイバーエージェントのハッカソンでの反省を生かし、以下のようなことを意識しました。

• デザインにこだわること(Figma を用いて事前にデザインを作成)
• 落ち着いて実装を進める(ポモドーロテクニックを導入)
• 自分なりの + @ を実装する

これらを意識して、五日間ゴリゴリ開発を進めていきました。

2.2. 開発スケジュール

今回のインターンですが、「5 日後」という締め切りだけが決められており、開発をどう進めるかについては参加者の自由でした。僕の開発スケジュールは大まかに以下の通りです。

1 日目: 色々なレシピサイトのデザインを分析・デザイン作成 2 日目: Next.js のプロジェクト作成・レシピ一覧ページの実装 3 日目: 検索機能の実装・最低要件の実装が完了 4 日目: デザインを洗練させる・SSR&OGP の実装 5 日目: GraphQL の導入(実装途中)

GraphQL の導入が完了しなかった、というのが心残り…。

2.3 最終成果物

以上の開発プロセスを経て、最終的に出来上がったレシピページは以下のものになります。

ソースコード。

研究室配属やアルバイトの開発などと期間が重複しており、その合間を縫っての開発でした。正直大変でしたが、なんとか開発し切ることができました。

以下は成果発表のスライドです。

「いい感じに実装できた！」と思っていたので、入賞できなかったのが正直悔しいです(泣)。

ですが、入賞した子の作成したレシピページはデザインや実装されていた機能,フォルダ構成などの設計面等で僕が作成したレシピページよりも優れていたので納得です。

3. 振り返り

最後にインターンの振り返りです。良かった点と反省点をそれぞれ挙げていきたいと思います。

まずは良かった点です

• 前回のサイバーエージェントのハッカソン に比べたら、落ち着いて実装を進めることができた。
• おしゃれなデザインを自分で考える & 実装することができた。
• 独自機能(旬な食材一覧等)を実装することができた。
• SSR・OGP といった機能を初めて実装することができた。

次に反省点です。

• GraphQL への移行ができなかった。
• Prettier・Eslint の導入が中途半端。
• アーキテクチャを考慮したフォルダ構成・ファイル分割ができなかった。
• デザイン力がまだまだ足りていない。

このようにまだまだやるべきこと・足りていない部分はありますが、ハッカソン苦手を少し克服できたという点では非常に良かったかな、と思います。

4. まとめ

今回のインターンを通して、自分にはまだ以下のような知識が足りていないな、と思いました。

• UI デザイン
• ソフトウェア設計
• フロントエンドの基盤周辺の知識

この辺の知識に関する本や記事等を読んで、自分なりにデザインやフォルダ構成を考え、今後のプロジェクトで実装していきたいと思います。

短い期間ではありましたが、楽しく開発を進めることができたので参加できて本当に良かったです！

クックパッド の皆さん、ありがとうございました！

以上