React

CyberAgent Web Frontend Intern 奮闘記録

 

2020年9月26, 27日の2日間、サイバーエージェントさんの Webフロントエンド開発型インターンシップ に参加してきました！
その内容や学んだことなどをできるだけ詳細に記録したので、最後まで読んでいただけたら嬉しいです。

インターン概要


以下、サイバーエージェントさん（以下、サイバーさん）のインターン募集要項からの引用です。

2days Webフロント向け 開発型インターンシップでは、Webブラウザ上で動作するアプリケーションを2日間で実装してクオリティの高さを競って頂きます。2019年12月に実施された「WebFrontendChallenge」と同内容のインターンシップです。
サイバーエージェントの現場で実際に働いているエンジニア社員のバックアップのもと、お題とされるアプリケーションの完成を目指していただきます。
完成したアプリケーションはUI、設計、マークアップ、完成度等を評価します。
お題は当日発表させていただきます。
実務でのWeb開発におけるノウハウを、活躍する現場社員からも学んでいただけます。

上記の通り、サイバーさんの現役エンジニアの方がメンターとしてついて、開発におけるノウハウなどをいつでも質問できるという環境での開発インターンでした。

評価の仕方は上記の「UI、設計、マークアップ、完成度」に加えて「ユーザ視点のアプリケーションかどうか」も重視されていました。実際に動くものができても、パフォーマンスやアクセシビリティ、UI設計が悪かったらサービスとして良いものとは言えないですもんね。

僕は趣味で個人開発をしますが、機能を重視し過ぎてユーザにとって使い辛いサービスができる傾向にありました。このインターンでは、ユーザの視点に立って開発が進めていこうと意識しました。

インターン選考について

まずはサイバーさんのインターン募集ページからエントリー。幸いにも書類審査を通過し、Zoomによるオンライン面談を行いました。

主に話したことは以下の通りです。

  • 自己紹介
  • 個人開発しているiOSアプリの詳細
  • 開発していて困難だと思ったこと
  • インターンで得たいもの、終わった後にどうなっていたいか
  • どんなエンジニアになりたいか
  • 逆質問

最初は緊張していましたが、とても楽しい面談でした。
後日、おめでとう連絡をいただき、晴れて本インターンに参加できました。

本インターンで意識したこと（目標など）

インターン終了時の目標・理想状態について

  • UIコンポーネントとstate部分を切り分けるためのカスタムフックを使うべきかどうか(そもそもカスタムフック化できるかどうか)の判断ができるようになっていたい。
  • 機能を実装する際に、簡単な仕様を素早くまとめて、しっかりとした理由を持って提案し、実装できる力をつけたい。しっかりとした理由とは、なぜその処理にしたのか、他の実装方法と比べた時に勝っている点などのこと。
  • 責務の切り分けを的確に素早くできるようになっていたい。切り分けをすることで、運用・保守をする際にその恩恵を受けることができると思っているため。できるだけリファクタしなくても良い設計を考えながら実装する力をつけたい。
  • Atomic design における粒度の決定を、根拠を持って自分で判断できるようになりたい。

インターン前に決めた準備事項

インターン当日に意識すること、挑戦すること

  • UIコンポーネントとstate部分を切り分けられないかを意識して実装を行う。3~5分考えてから実装方法を簡単にまとめてメンターさんに提案して、アドバイスをいただきながら開発を進める。
  • 提案する際も、「なぜそのような実装にしたいのか or すべきなのか」を答えられるようにする。
  • Atomic design を意識して開発にチャレンジしてみたいため、作成していくUIはどの粒度に該当するのかを考えつつ、メンターさんに提案・フィードバックをいただく。
  • 第3者が見た時に、理解しやすいコード/フォルダ構成/適切なカスタムフックの活用/責務の切り分けなどを意識して開発を進めていく。

常にZoomを繋げた状態だったため、自分で少し考えてもわからなかったときはメンターさんに聞くということを意識しました。

インターン内容

事前オリエン

【インターンをより有意義にするための目標設計、それに向けた準備、インターン当日意識すること】を参加者が意識するためのオリエンテーションでした。

目標を立てたりして準備するのは個人の自由ですが、これをするかしないかで成長度合いや達成感が大きく変わってきます。上述しましたが、僕自身、目標をしっかりと立てて準備を行い本インターンに参加したことで、大きな学びを得られたと実感しています。

インターンにただ参加するのではなく目標を持って参加することで、終わった後の達成感や成長度合いに大きな差があると改めて学びました。これはインターンだけでなく、ハッカソンやその他様々なことに適応できると思います。

1日目

午前(10時開始)：オープニング・ワーク

ここで本インターンの詳細やメンターさんの自己紹介がありました。つよつよ感が伝わってくると同時に、とても気さくで和やかな印象を受けました。

それから開発テーマ発表です。

今回の開発テーマは…【番組表】でした。


また、レギュレーションは以下の通りでした。

  • アプリケーションの完成度・クオリティ
  • ユーザー目線の機能開発ができているか
  • 実装したUI/機能について、ターゲットユーザーと、そのユーザーがどう使うのかというユーザーストーリーを適切に考えられているか
  • インターンを通してどれくらい挑戦・成長したか
    • 新しく挑戦したポイントをアピールしてください
    • 普段使わないフレームワーク/言語/API/開発手法を使ったなど

もちろん、今まで番組表を作ったことがなかったので、色々な番組表UIを見たりしてUIや実装する機能を決めていきました。2日間でこれらのレギュレーションを満たす開発を行いつつ、事前に立てた目標も達成できるように意識したので、頭をフル回転させました笑

午後：ワーク

APIは、サイバーさんが事前に準備したものを用いました。

提供されたものはそれのみで、UIや設計は全て自分で考えて2日間で実装するという内容です。また、3人〜4人のグループに対し、メンターさんが1人ついて開発を進めます。開発は個人戦です。他の人が質問した内容を聞いて学ぶこともできたので、僕にとってグループ制はとてもよかったです。

そして、僕がAtomic Designを採用していることを聞いたグループの方が、以下のサイトを紹介してくれました。感謝🙌

AtomsやMolecules、Organismsなどを選択すると、そのコンポーネントのみ表示され、どの粒度で構成されているかを確認することができます。Atomic Designは個人の考え方によって分割の仕方が違うので、このサイトが必ず正しいとは言えませんが、参考になるサイトです。

https://demo.patternlab.io/?p=pages-dashboard

Atomic Design DemoSite

これまでハッカソンや個人開発を行ってきた微々たる経験から、しっかりと設計を行ってから実装した方が開発効率が上がると学んでいたので、今回も設計から入りました。設計には大体3時間くらいかけたと思います。ユーザ視点から考えたかったため一番最初にペルソナ設定を行い、UI設計(Figma, AtomicDesign考察)に入りました。（時間があればユーザーストーリーもう少ししっかり考えたかった…）

UI設計が終わったら、どの技術を用いて実装するかを検討しました。
あくまでも今回はユーザ視点を大事にしたかったため、技術選定を後回しにしました。理由としては、技術選定から入ると「その技術を使ってどう実装するか」という発想に至ってしまうからです。「その技術を使ってどう実装するか」ではなく「問題/課題を解決するためにベストな技術は何か」という視点から考えるべきだと思っています。

このように、「ペルソナ設定→UI設計→技術選定→機能の選定→実装開始」という流れで1日目を終えました。

2日目

午前：ワーク

ごりごり開発です。

今回初めてwebpackを自分で書いてReactの環境構築を行ったため、file-loaderで躓きましたが、メンターさんサポートのもとエラーを解消することができました。原因は、型定義ファイルをプロジェクト内に配置しておらず、tscがコンパイルできていなかったためでした。tsconfig.json の修正と types/import-png.d.ts を新たに作成したところ、解決できました。（参考：webpack、typescriptでpngファイルをバンドルする）

今はcreate-react-appやnext.js等のおかげで自分で0から環境構築を行う必要はないかもしれないですが、内部でどのように動作しているのかを理解することは大変重要ですよね。webpackと戯れながら勉強したいと思います（）

幸いにも、この時点でデプロイ完了、レギュレーションも満たしており動作確認もできていたため、検索機能の実装と他ブラッシュアップに時間を割きました。

Gitに関しては、細かくブランチは切らず、developブランチでの開発を行いました。後からコミット履歴を見た時を考えてcommitはできるだけ分割し、絵文字も付けました。

午後：ワーク・発表

40分ほどで発表スライドを作成し、発表を行いました。
作成したスライドは こちら（Google Slide）です。SpeakerDeck にもアップロード済みですが、こちらGifが見れないので Google Slide の方をご覧いただければ嬉しいです。なお、スライドに関しての詳細は省略します。

成果物：【流れるように閲覧できる番組表】

https://progriro-program-guide.surge.sh/

Front
・React (TypeScript)
・Material UI
・webpack
・surge

Tools
・Figma
・Postman

Others
・Atomic Design
・Clean Architecture
・DDD
・Git

午後：審査結果

全員の発表が終わり、審査結果の発表が行われました。
そこでなんと…2位を受賞することができました🎉


特に、設計に関して評価していただきました。

Atomic Design、Clean Architecture、DDDを考慮したフォルダ構成に関して、審査員の方の中で「勉強になる」という声があったとお聞きし、大変嬉しかったです。まだまだ知識不足なので、多少の自信は持ちつつ、これからもアーキテクチャに関して勉強していきたいと思います。

後日Abemaグッズが貰えるらしく、とても楽しみです笑！

abemaくんクッション頂きました🙌

夜：オンライン懇親会

ランダムに構成された、学生とメンターさんの4, 5人グループで交流する形でした。合計2回行われた懇親会のグループでは、僕より年上の院生の方のみで、とても貴重なお話を聞けました。研究内容や開発に関することなど、自分が今まで触れたことのないことを知る機会になりました。また、ここでサイバーさんに関する色々なことを聞くこともできました。

本インターンを通して成長したこと

  • 「なぜ」その実装にするのかを意識しながら開発できるようになった
  • Atomic Design の粒度を実装を通して理解してきた
  • 初めて create react app ではなく webpack から開発できた
  • DDD 自分なりに少し意識できた、でもまだまだ…
  • フォルダ構成の考え方がわかってきた
  • 責務の切り分けをスムーズにできるようになることが直近の課題

本インターンを通して学んだこと

アクセシビリティを意識することはとても大事というお話を聞きました。
実際、過去オリンピックの公式サイトやビヨンセの公式サイトにおいて、アクセシビリティへの対応が不十分として訴えられた事例もあります。（参考：Beyonce’s Parkwood Entertainment Sued Over Website Accessibility）

Amebaでは、Ameba Accessibility Guidelines を意識して開発を行っているということでした。個人開発ではなかなか意識することのないアクセシビリティですが、これから Ameba Accessibility Guidelines を参考に、アクセシビリティを考慮したサイトを意識していきたと思います。

また、僕が設計したAtomic Designの分割設計をメンターさんにチェックしていただき、これで問題なさそうだと評価をいただくことができました。個人の裁量によってどのように分割するかは変わってくるため、どの分け方が正しいというはっきりとしたルールはないそうです。ここら辺、具体的な理由を持って分割できるように開発中から意識していきます。

また、今回は非同期通信にaxiosを用いました。しかし、axiosであまり複雑なことをしていないのなら redaxios を代わりに使うと、ビルドした後の JavaScript のファイルサイズが減るかもしれないと紹介していただきました。

Axios has a great API that developers love. Redaxios provides that API in 800 bytes, using native fetch().

redaxios/README.md によると、800byteで提供してくれるようです。これはaxiosに比べて1/5くらい軽量。導入する時間がなく実際に取り入れることができませんでしたが、今後リファクタをして挙動を見てみたいと思います。

その他、「拡張子を付けない .eslintrc は非推奨なので、ファイル名を .eslintrc.json とした方が良い」ということや、.gitignore に関して「Node.gitignore にnode.jsでよくignore されるコレクションがあるため、これを使うと楽かもしれない（が、これから入れると除外したくないファイルを除外してしまう可能性があるかも……）」など、新しく知ることができました。

また、テストツールについても色々と紹介していただきました。
僕はインターン先で jest を使っているのですが、他にも多くのテストツールがあると知り驚きました。ここら辺も、なぜそのテストツールを採用したのかを理由をもって説明できるようになりたいです。実際に触ってみます。

また、普通のアサーションと比べて、簡単な書き方でより多くの情報を提示してくれる power-assert というアサーションライブラリも教えていただきました。

最後に

とても濃く、自身が成長したと思える2日間の開発インターンでした。
これまで参加したハッカソンなどのイベントでは、賞を逃してきましたが、本インターンで初めて受賞する事ができ、とても自信になりました。慢心せず、理想のエンジニア像になれるよう日々精進していこうと思います。

運営していただいた CyberAgent の皆さん、インターンに参加した学生の皆さん、最後まで読んでくださった皆さん、本当にありがとうございました！

Javascript インターン 個人開発
ABOUT ME
ProgRiro
M0 / Frontend / Data Analytics / GCI2020 / FE / JS TS React ReactNative Node Python / Atomic design / DDD / Clean Architecture