CyberAgentさんのWebFrontendChallengeに参加してきました
CyberAgentさんのWebFrontendChallengeに参加してきました
こんにちは、最近恐ろしく運動する機会が減ったのでなるべく移動は徒歩にしているたじまです。
今回、CyberAgent さんの Web Frontend Challenge に参加してきたのでブログにまとめようと思います！
この記事の要約
めっちゃ楽しかったのでまた挑戦したいです。
今回作ったアプリです。 レビューいつでも受け付けています！！
参加したきっかけ
このインターンに参加する前にサポーターズさんの合同座談会に参加してきたんですが、そのイベントに参加していたサイバーの方に紹介していただきました。
サイバーにいけるのは優秀なエンジニアばかりだと思っていたので、とりあえず応募しておくかと応募したら受かりました。とても嬉しいしびっくりしました。
参加するまで
実は今回面接が水曜日で、その週の土日にあったので、行くことが決まってからは新幹線の予約や電車の時間をしらべ、週末のバイトにお休みの連絡をいれるなど大忙し、幸いなことにホテルは用意してもらったのですがとてもドタバタしました。
ちなみに初日渋谷駅からオフィスまで迷わずに5分とあったのですが、20分かけて集合時間ぎりぎりでした。
開発開始
初日、最初にお題発表がありその後インプットのためのLTを聞き、そのご作業開始という流れでした。
じゅんじゅん「僕がイケメンだと思う人」
— Yanagi Kota🐶PAGU (@pagu0602) March 9, 2019
#ca_wfc pic.twitter.com/rMNgQoaWcn
LTの様子(冗談です)
お題
写真一覧(アルバム) のUIをつくる
最低条件
- 画像APIをつかって画像の一覧ができている
- 一覧から画像詳細一覧を開ける
デザインは自由！
Googleフォトなどの既存アプリを参考にするもよし、オリジナリティを出すのもよし !
評価ポイント
- 最低条件を達している
- UIのつくりこみ
- デザイン、アニメーションの工夫、アクセシビリティなど
- 技術的アプローチ
- その他
- 最低条件以外の昨日のオリジナリティ
APIも用意されていたので最低条件は簡単にできそうだからオリジナリティとこだわり点が重要だなという印象でした。
1日目
- 進めたこと
- vue cli でプロジェクト作成、buefyいれる
- 最低条件の画像一覧と詳細画面をつくる
- 画像一覧の写真をクリックすると詳細画面に飛べるようにする
- 大変だったこと
- 実は画像を扱うことが初めてだったので思い通りに表示させるまでbulmaと戦ってました
- いつも苦労するのですがfetch使う時に最初errorが出てて大変でした
ここまで進めてワークタイムがおわりました。 こうして書き出すと全然進められてなくてしんどいですね、、、
高画質ドーナツ#ca_wfc pic.twitter.com/gQLFEzWjPC
— Mori Atsushi 📷 (@at_sushi_at) March 10, 2019
しんどいのでお口直しに差し入れのドーナツを挟んでおきます。
このあとアパホテルに泊まってた組とそのとき一緒に帰ろうとしてたインターン生でごはんにいきました。参加していたのが半数以上20卒だったので就活のどろどろした話などで盛り上がりました。
- ホテルについてから
- LTで知ったlazy load を導入。
- ビルドされたURLを用意するためにherokuを導入
いつもnowというものを使っていたのですがgithubと連携すればpushすると自動でビルドしてくれるというのを聞いて初めて使ってみました。infinite scroll をいれたかったのですが睡魔に襲われました。
2日目
- 進めたこと
- infinite scrollを導入(ここで転び午前中すべて消化)
- 時間が少なくなったので一覧画面をやめて、buefyのmodalを採用。
- 大変だったこと
格言にしたい社員さんのお言葉「公式ドキュメントを読め」
結果発表
発表順番はランダムで決められ私は5番目でした。私は最低条件をやっと満たせたレベルでしたが、一緒に参加していた数々の猛者たちの作品で気になったものを勝手に紹介していきます。
GitHub - dora1998/ca2019-wfec: Web Frontend Challenge 2019
こちらは最優秀賞をとったどらくんの作品で、唯一アルバム機能をつくったりiOSの写真アプリのような使い心地でダントツの最優秀賞でした。
GitHub - kobakazu0429/CA_PhotoAlbum
こちらは唯一未成年者で高専生2年のこばくんの作品。印象に残ったのが画像にあった緯度経度から地図にまとめて表示していたのが印象でした。
他にも検索機能をつけたりアクセリビリティのためにvoice over を立ち上げたりといろいろなアイデアがあり、それぞれ違ったこだわりポイントがありすごかったです。
懇親会
二日間作業づめのお酒は美味かった。社員の方々とからのアドバイスやサイバーさんの裏話などなかなか聞けないようなことを聞けて楽しかったです。 正直この業界では飲み会にいくと男子大多数女子一人か二人で圧倒的に孤立してしまうので、今まで二次会などは参加しなかったのですが、そんな心配何処吹く風でめちゃめちゃ盛り上がったので楽しかったです。
余談ですが、500円で飛露喜がのめるなんて最高じゃんって思いこのくじなんども頼んだのですが(若干引かれてた)、そんなもの当たるわけなくウコンの力などでした。米焼酎を初めて飲んだのですが美味しかったです。
おわりに
今回フロントエンドのインターンで、フロントエンドを専門にしているフロントエンドのエンジニアといっぱい話せたのがいい体験でした。 会津大学にもすごい先輩がいっぱいいますが、サーバーサイドが好きな人がおおく裏話やあるあるやお得情報など耳にする機会がないのでとてもためになる時間でした。
今回はまだ、「ここがこだわりポイントです！！！」ってアピールできるほどの余裕や慣れがなかったのでこつこつと経験を積んでいきたいと思いました。
次までの目標
今回のアプリにあと、
- 検索機能
- 日付でソートする
- issue を直す
を実装して次に取り掛かろうと思います。
あと、CSSも慣れるといいぞと教わったので次つくるアプリはCSSは書いていこうと思います。
最後まで読んでいただきありがとうございました！
