Portfolio of
Kaito Horiuchi
ブログ記事『CA Tech Challenge 2days Webフロント向け 開発型インターンシップ ONLINEを振り返る』のサムネイル

CA Tech Challenge 2days Webフロント向け 開発型インターンシップ ONLINEを振り返る

はじめに

今年3月の27日～28日にかけて、株式会社サイバーエージェントさん主催の「CA Tech Challenge 2days Webフロント向け 開発型インターンシップ ONLINE」に参加してきました！社員さんたちが「ブログ書いてね！」とおっしゃっていたのですが、僕はブログをやっていなかったためNuxtでこのブログを開発するところからはじまり、1ヶ月近く経ってしまいました（汗
それでは、1ヶ月越しになりますが時系列で振り返ってみたいと思います！

1日目

開幕

zoomではじめて参加者・メンターさんたちと顔合わせして、いろいろ説明などがあったあと、今回のテーマが発表されました。その内容は「用意されたAPIを使ってECサイトを開発する」というものでした。このインターンは2日間、ハッカソン形式でそれぞれ個人開発し、最後に成果発表をするという流れになっています。かなり時間が限られているので、使ったことのある技術をベースにちょっと新しいことにも挑戦してみたいなぁ、などと思っていました。

チームに分かれ、開発

個人開発ではあるものの、あらかじめ参加者3人+メンターさん1人のグループが決められており、zoomを繋ぎながら作業してわからないことが出てきたらいつでも質問できる（手厚すぎる、、）というスタイルでした。それぞれ自己紹介し軽く雑談したあと、いよいよ開発がスタートしました。

技術選定

参加当時、React系のフレームワーク（主にReactとGatsby）は1年近く経験があって、Vue系のフレームワーク（Vue.jsとNuxt.js）を2ヶ月ほど前から使い始めたという状況だったので、技術的挑戦の意も込めてNuxt.jsを使うことに決定。UIライブラリはVuetify.js、デプロイ先はVercelを採用しました。Vuetifyは使ったことがありませんでした。VercelはSSGでのみ使用していましたが、今回はAPIから商品情報をフェッチしてくる必要があるので初めてSSRをすることにしました。（VercelでSSRができるとは思っていなかった）

ひたすら型定義

TypeScriptを導入していたので、始まってすぐはUIや設計を考える前にひたすら型定義や環境の整備（lint, huskyなどの導入）をしていました。（APIのレスポンスにも型を付けていました。型は人権。）
しかし、チームメイトはコンセプト・設計思想（なんならターゲットユーザーまで！）を先に考えており、ビューの実装に取り掛かっていたため（すごい）、進捗共有の際に自分だけ見せられるものがなく正直めちゃくちゃ焦っていました。

夜は長い

夜の方が生産性が上がり集中してコードを書けるタイプ（よくない）なので、zoomが終わってコンセプトやUIを決めてしまった後は夜の3時くらいまでひたすら実装していました。

2日目

方向転換

1日目夜の成果で最低限のレギュレーション（商品一覧と個々の商品詳細が見れる状態）は満たすことができました。作り込みたい人のためにカートAPIが用意されていて、ユーザーやカートといった機能も実装できたので本当はしたかったのですが、発表の時間までに実装しきれる自信がなかったためUI・UXを整えていったりレスポンシブ対応したりという方向に切り替えることにしました。具体的には、APIを叩いている間SkeletonやCircularを表示する・画像周りのパフォーマンス向上・メタデータ・OGPあたりをやりました。

成果

実際に開発したECサイトがこちらです。

（↑ アイテム一覧画面）

（↑ アイテム詳細画面）

ユーザーが目的のアイテムを見つけやすいストアというコンセプトのもと開発しました。カテゴリでアイテムを絞り込めたり、新着順・価格の安い順でソートすることができたりします。機能実装というよりはUIやUX、使っている中での心地よさに重点を置きました。
さらに、ユーザー目線の使い心地だけでなく、開発者目線の開発しやすさ（Developer Experience）にも力を入れました。ESLint, Prettier, husky(lint-staged), stylelint, commitlintを導入し、コミットメッセージにはprefixも入れました（個人開発ですが！笑）。ほかにもAtomic DesignやSCSSなど、開発体験向上のために知っている要素は全て取り入れました。

成果発表

zoomで参加者全員の成果発表をしました。みんなすごかったです。決済機能や音声認識からの形態素解析で音声制御などインパクトある機能を実装してきた方もいましたし、何より全員目の付け所が違うので同じAPIを使っていてもいろいろな方向性・コンセプト・機能が生まれてきていていいなと思いました。
成果発表の後、メンターさんからのフィードバックや表彰などがありました。メンターさん、はじめてのVercel SSRデプロイで詰まっていた時に解決策を見つけてきてくださったり、方向転換の際にも相談に乗ってくださったり、すごく手厚いなと思っていたのにさらにフィードバックもあり驚きでした。フィードバックの内容も的確だったので、今後いいところは伸ばしつつ、頑張らなきゃいけない点はどんどん改善していきたいと思います。表彰の方は、チームメイトと共に3位をいただくことができました！自分の作ったものを評価していただけて、モチベーションになりました。

まとめ

自分の良かったところや課題が把握できたり、他の参加者からの刺激やモチベーションが得られたりと、2日間ながら充実したインターンでした。学生エンジニアの知り合いも増えたので、負けないように・もっとつよつよになれるように今後も頑張りたいです。
読んでくださってありがとうございました！