pixiv の梅雨インターンシップで最高の体験をしてきた

f:id:sathoeku:20190529175758p:plain

はじめに

どうも、さぃと（@saitoeku3）です。
5/25 - 5/26 の2日間、pixiv さんの梅雨インターンシップ（Web コース）に参加してきたので、内容や感想をざっくり紹介します。

インターンの概要

今回のインターンは、就業型ではなくハッカソン形式でした。
参加者はメンターとペアでチームを組み、「あなたの考える最高の pixiv を開発する」というお題に沿って2日間で1つのアプリを作り上げます。
期間中は実際に運用されている pixiv の API を使うことができました。

エントリーした経緯と選考

このインターンは Twitter を見ているときに知りました。
他の企業は夏のインターンの募集を開始する中、pixiv さんは他と被らないような時期にも開催するようだったので、迷わずエントリーすることを決めました。（メンターの中に知っているエンジニアがいたのも決め手だったりする）

選考では、書類選考を選びました。GitHub 選考でも良かったのですが、どちらを選んでも GitHub を見られる気がしたという理由があります。実際に、面談中は GitHub を見せながら話をしていたので、大は小を兼ねるという意味でも書類選考で間違いなかったです。

インターン中の様子

僕は subal（@f_subal）さんとチームを組んで React + TypeScript を用いた Web アプリケーション開発を行いました。普段から愛用している構成だったこともあり、スムーズに始められてよかったです。（事前にプロジェクトの雛形を用意してくださった subal さんに感謝）

開発環境が整うと、すぐにアイデア出しを始めました。今回のインターンで一番よかった体験はここで、僕がぼんやりと考えていたアイデアを言語化できるまで subal さんは何度もアイデアの詳細や実装したい理由等を問いかけてくれました。

このサポートのおかげで、最後までブレずに開発を続けられたと言っても過言ではありません。 そして、以下のような技術的な部分でも何度もサポートしていただき、無事に作りたかったアプリを形にすることができました。

  • createPortal を用いたコンポーネントの構築
  • useRef や useEffect の効果的な使い方
  • border-image の使い方
  • コンポーネントを共通化するときのプラクティス
  • マウスカーソルの座標計算を利用したリッチな UI の実現（キラキラが追従するアレではない）
  • Firebase Functions を用いた SSR による OGP 画像の生成（頭がおかしくなって最後の1時間で強引に実装した）

作ったもの

※ 著作権の都合上、以降の画像に含まれるイラストにモザイクをかけています

f:id:sathoeku:20190529171706p:plain
よかったイラストをシェアするアプリ「yokatta」

アプリを作るときのコンセプトは、「シェアをキッカケにして pixiv 上のまだ見ぬ素晴らしいイラストや絵師に出会うという体験を生み出す」 にしました。

アイデアのもとは Apple Music のプレイリストです。僕は以前、大学の先輩からシェアされたプレイリストがキッカケで今まで知らなかったアーティストに出会って幸せになったことがありました。同じ体験を pixiv でも生み出したいと言う思いからコンセプトを決定しました。

コンセプトを満たすために、アプリの設計ではユーザーの流れがアプリ内で完結しないことを気をつけました。具体的には、全てのページでイラストを見られるようにして、気になったイラストがあればすぐに pixiv のイラストやユーザーのページに移動できるようにしています。

ユーザーは自分が見てよいと思ったイラストをリストにして他の人にシェアすることができます。OGP 画像を設定しているので、ユーザーはアプリを開く前からイラストを楽しむことができます。（これが音楽では不可能な強みだったりする）

f:id:sathoeku:20190529171841p:plain
使用例（伝われ！）

結果

２日間の努力の結果、なんと優勝することができました！！

話をうかがうと、発表中に説明した制作意図が明確かつ実現できていることを評価していただけたようでした。最初の段階でアイデアのベースを固めて、その実現のために妥協をしなかったおかげです。

一方で、発表後のフィードバックでアプリの改善点をいくつか知ることができました。その中で強く改善したいのは、「ユーザーがより楽しめる UI/UX の構築」です。他のチームのプロダクトには、豊かなアニメーション表現やデザインやレイアウトの工夫が多く見られましたが、yokatta には明らかに不足していました。今後の開発の課題です。

感想

今回のインターンでは subal さんを始めとした多くの方々のサポートのおかげで、最高の体験をすることができました。
また、他の参加者を見ているとみんな素晴らしい技術と発想力を持っていてキラキラしていました。皆これからどんどん伸びていくと思うので、（競うわけではないけど）僕も負けたくないです。
２日間貴重な体験をさせていただき、本当にありがとうございます！！