研究にwebに忙しいドラです。春休みにcookpadのspring internship(学習型ハッカソン)に参加してきたので、 そのことについて書いていきます。
それは何？
インターン用のapiを用いてスマートフォン向けのレシピサイトを作るというものでした。
仕様書と使う技術(next.js, Typescript)は決まっていて基本的にはそのレギュレーションをまもりつつ
まずは必須課題をこなしてその後自由課題や自分で考えた改善にとりくむという
感じでした。詳細は公式さんのリンク
を載せておくのでそれを読んでもらえると幸いです。
以下はドラの参加記です。
実際の開発
基本課題
開発初期はReactは軽く触ったことはあったもののNext.jsやapi通信に対ししっかりと型を使う経験などはないみたいなスペックでした。
そこでとりあえず用意していただいた講義動画を順に見ていきました。リンクの方から飛べると思うので良かったら見てみてください。
jsの入門から始まり最終的にはいろいろなレンダリングを用いた実装まで網羅していてとても完成度が高かったです。
見た後はまずは基本課題の実装をしていきました。基本課題に関してはあまり滞りなく進むはずだったのですが途中で
apiキーをgithubにあげる基本的ミスをして青ざめたりしていました(言い訳をしておくとenvファイルまで作った上で使っていなかったので
自分でも意味不明でした)。開発は都度冷静になることが大事ですね。
発展課題
発展課題に関しては以下のものに取り組みました。
OGP(SSR)に関しては前からやってみたいな〜って思ってたのでslackで画像がちゃんと表示されたときはﾔｯﾀｰって言ってました。CSSに関しては前々からtailwindCSS使ってみたかったので
開発初期から使っていました。めちゃめちゃ体験が良かったのでおすすめです。無限スクロールに関してはlodashをググって出てきたので使いましたが他の方の発表聞いてみた感じ
いろいろとｱらしいですね。ﾑｽﾞｶｼｲ
パフォーマンス最適化に関しては(スコア的な話だけにとどめますが)SSRしてnext/image適用で点数ガンガンあがりました。Next.jsｽｺﾞｲ
余談ですが最適化面白そうだな〜って思って今超速本を読んでみたりしています。
UIは指で使いやすいといいよな〜ってしたら某フリマサイトみたいになりました。
他の人の発表を見て
終始すげ〜〜っていいながら聞いてました。同じものを作る上でもここまで人に寄ってコンセプトが変わってくるのかって参考になりました。中には しっかりと使ってもらう対象を絞って開発している人やposter viewを他のサイトのcssとにらめっこして作った人とかもいてとても面白かったです。
感想
- Next.js初めて使ったんですけどいろいろと整いすぎていてすげ〜って感じました。あとtypescriptはもっとゴリゴリかけるようになりたい。
- slackでとても質問しやすい雰囲気になっていたのは参考にしたいなと思いました(レススピードやスタンプとかかな多分)。
- メンターの方々がﾂﾖﾂﾖ&秒で質問に答えてくれてとても開発しやすかったです。ありがとうございました。
- フロントエンドの視野が広まってあと自分の中の課題感がまとまった感じがしていて参加してよかったです。
