サイバーエージェントのWebフロントエンドチャレンジに行ってきた

概要

2019/3/10~11の二日間で開催されたサイバーエージェントのWebフロントエンドチャレンジに参加した。端的に最高だったのでシェアしたい。

チャレンジのお題は以下のようにギャラリーアプリを作成し、その出来を競うというもの。

  • APIを叩けるか
  • リスト表示を実装できるか
  • ルーティングを実装できるか

といったフロントエンドの基礎的な技術を要求されているように感じた。

びっくりしたのがサポートの手厚さで

  • 参加人数10人なのにメンターが8人(しかも全員ガチエンジニア)
  • 交通費、宿泊費支給
  • ランチ、魔剤、その他諸々支給

など、ひとりあたりN万円かかっているサポートがあった。

個人的な振り返り

はじまってすぐにcreate-react-appでつくりはじめ、初日終了の時点で要件を満たすものはだいたいつくり終えていた。

初日の終わり際にみんなのものを見る機会があり、思ったのが

「みんなできてるし、あんま差がつかないやつやん(´・ω・`)」

そこで、家に帰ってから二日目の戦略を立て直した。

この戦略は当たりで、実際に

  1. 昼夜関係なく見やすいようにナイトモードを導入
  2. 読み上げに対応するようにaltやaria-labelを付与
  3. キーボード操作に対応

などを二日目に実装し、そこが評価されてアクセシビリティ賞をいただくことができた。

いっぽうで大反省なのが技術的なアプローチ部分。

  • アーキテクチャ

しっかりコンポーネントを分けるべきだった。すべてをAppクラスにまとめていたので、あとから読んでもよくわからない上にReactのライフサイクル的にもよろしくない。

  • そもそものコード

これ書いたの本当におれ。。。?(´・ω・`)

  • ルーティング

React-routerをあまり理解してなく、シェアを前提としたルーティングを実装しなかった。

(ちなみに、ここらへんの反省点は終了後にちゃんとリファクタしたので、気になる方はレポジトリ見てください☆彡 (まさかり、コードレビュー大歓迎です))

アクセシビリティ

せっかくアクセシビリティ賞を頂いたのだから、アクセシビリティのことも触れておく。

厚生労働省ではアクセシビリティを

年齢や身体障害の有無に関係なく、誰でも必要とする情報に簡単にたどり着け、利用できること

と定義している。たしかに誰もが利用できないWebなんて、Webじゃないよね。

わたしはReactを使ったのだが、Reactでアクセシビリティを満たすような例を挙げると、

  • aria-labelを入れる
  • 無駄なdivを使用せず<>を用いる
  • フォームにはラベルをつける

などがある。より詳しくはReactドキュメントに記載されている。普段開発をしていて絶対に気を遣わない部分なので、こういうことを知れて良かった。

感想

社員さんと参加者が全員優秀だった。

キーボード操作をどう実装しようか迷った際に、すぐに公式ドキュメントにある合成イベントの存在を教えてくれたメンター@uenitty

フォーカスを動かしたいと相談した際に、refを用いる手法を思いつき教えてくれた@pagu0602 (実際にベストプラクティスだった)

リファクタの際にめちゃくちゃコードを参照させてもらい、メンターなのになぜかガチで優勝を狙いにきていたカメラマン@at_sushi_at

フリー素材イケメンの@konojunya

アルバム作成機能をなんと半日で実装し優勝した、世にも珍しいOneplus使いのどらくん@_dorayaki_

その他書ききれないほどの方々

自分にとって今まで参加したインターンの中でいちばん楽しかった。お世話になりました。