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 を採用していることを聞いたグループの方が、以下のサイトを紹介してくれました。

https://demo.patternlab.io/

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

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

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

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

2日目

午前：ワーク

ごりごり開発です。

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

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

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

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

gitcommit

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

夜：オンライン懇親会

ランダムに構成された、学生とメンターさんの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 の皆さん、インターンに参加した学生の皆さん、最後まで読んでくださった皆さん、本当にありがとうございました！