pixivでアルバイトを始めて三ヶ月経った話

こんにちは、ピクシブでWebフロントエンジニアとしてアルバイトをしているunipotaです。今年の一月中旬にアルバイトを開始して約三ヶ月が経過したため、ここまでで自分が何に携わることができたのか、ピクシブがエンジニアにとってどのような環境なのかということを書きたいと思います。

私はWebデザインやフロントエンドプログラミングを中心に触っていて、特にCSSでスタイルを作り込んだりVue.jsでリッチなアニメーションのあるアプリケーションを作ることに熱中していました。 IllustratorやFigmaを使ってデザインを組むのも好きでUI/UXへの興味が高まってきていたところに、ピクシブのフロントエンド業務アルバイトの募集を見かける機会がありました。 UXへの関心やSPAアプリケーションの開発経験など要件がマッチしていてすぐに応募したのでした。

pixivのフロントエンドはモダン

私が所属しているのはpixivのWeb開発チームで、モバイルとデスクトップ向けのフロントエンドを主に開発しているところです。最初に驚いたのはフロントの技術構成が非常にモダンなことです。モバイルはVue.js+Vuex、デスクトップはReact+Reduxの導入が進んでいて、いずれもTypeScriptが使われています。

レガシーコードを積極的になくしていく姿勢があり最新技術へのキャッチアップに意欲的な雰囲気がすごく印象的です。自分で勉強したり見聞きした技術をスピード感を持ってプロダクトに注ぎ込むことができるのは最高です。

開発のしやすさ

一定以上の規模があるプロジェクトに途中から参加するとなると、まず全体を見渡すことが必要になってくると思います。そこで最初に見せてもらったのはピクシブ内のナレッジ共有に使われているesaでした。プロジェクトチームごとの知見や考えがここで発信・保存されています。新しく入ってきたエンジニア向けにもドキュメントが整備されていて、esaを見るだけで環境設定ができました。

他にも開発フローや各種方針が明文化されていて、事細かに聞くことが減るのでメンタル的にもかなり気が楽だったことを覚えています。具体的な実装をする上ではデザインガイドラインがFigma上でデザイナーさんと共有されていることと、Storybookで各種コンポーネントが一覧できることも重要でした。 Storybookを触ったのは初めてだったのですがコーディングなしでプロパティによる変化を確認できていいと思いました。なお、Storybookの運用についてはdo7beさんがチームごとに色づいたピクシブのStorybook運用の記事で紹介しています。

やったこと

さて実際に私が何をやったかということなのですが、最初の二ヶ月ほどは「割れ窓対応」をやっていました。これまたdo7beさんが割れ窓理論を導入してWebサービスのクオリティに直結した話で話されているのですが、要は軽めのバグやデザイン崩れの修正です。

実際にやったのはデザインガイドラインに従っていない文字色の修正だったりプロフィールページの挙動変更だったりです。作品サムネイルへのバッジ表示といった小さい機能実装もさせてもらいました。ここまで実装、ビルド、コードレビュー、デプロイの開発フローを経験してプロジェクトへの理解が深まってきたところで閲覧履歴ページのSPA化という大きなタスクを割り当ててもらうことになります。

チームでは古い実装の残るページを次々とSPAへと置換する作業を実施していて、そのうちの一つをやれることになったわけです。この時もSPAページを増やすためのマニュアルがesaに用意されていて助かりました。後々ページの出し分けをするためのABテストなどを設定しながらコンポーネントを作っていったのですが、プレミアム会員であるかどうかによる機能とデザインの違いなどでロジックが複雑になり、レビューを繰り返しながら形にしていきました。その後無事100%リリースが行われ、自分の端末で新しくなった閲覧履歴ページを見たときは正直かなり感動しました。