TL;DR
選考・参加の動機
自分の GitHub アカウントを紹介して、そこにある成果物とオンライン面接で選考を受ける「GitHub 選考」でエントリーしました。 様々なコースがありましたが、中でも自分が使ったことのあるサービスで、かつ仕組みが面白そうな pixivFACTORY のコースを選びました。 pixivFACTORY は、少なくとも画像１つから様々なグッズをデザインしてそのまま購入できるサービスです。 就業型インターンということで、オフィスの雰囲気や働き方、チーム開発などについて実践を通して深く学ぼうと考えて参加しました。
やったこと
Webフロントエンドを担当し、グッズのデザインを編集する画面(以下、エディタ)のリファクタリングとプロトタイプの作成をしました。TypeScript, React, Redux (+ Thunk), DOM とひたすら格闘する日々でした。主に f_subal さんにメンターを担当していただいていました。
技術面
初めての React Hooks
関数コンポーネントの定義のなかで特定の組み込み関数を使って、 ステート・componentDidMount/Updateでの非同期処理・ref などの機能を利用できる機能です。 既存の複雑なクラスコンポーネントをリファクタリングしていく上で強力な機能だということを実感しました。
(ステートフック、これ使ったら実質クロージャやんけ…すき)
初めての Redux Thunk
今まで Redux Saga を使ってジェネレータ関数で Side Effect を実装していました。 Redux Thunk は、非同期処理をそのままアクションとして投げると実行してくれるという機能のみを提供する Redux ミドルウェアです。 実際に使ってみると「正直 Saga のような複雑な仕組みを用いなくても Thunk だけで十分なシチュエーションは多いな」という感想を持ちました。
これが複雑GUI
エディタで画像やテキストを追加してある場合にそれぞれ表示されるバウンディングボックスを SVG で実装しているコードを読んで衝撃を受けました。そこから複雑GUIに関して、いろいろな技法を会得しました。 例えばドラッグ操作に関して、「イベントハンドリングを確実に行ってスムーズにSVG要素の座標を更新するために、ドラッグ中であることを検知するためのイベントハンドラを document 要素に追加してしまう」という大技も知ることができました。(f_subal さんによると、これは常套手段らしいです)
SVG すごい
もともと存在は知っていましたが、viewbox の機能も知らないレベルでした。 f_subal さんの SVG 芸を知って、自分もこれからフロントエンドのベクターグラフィックスにガッツリ触れていきたいと思うきっかけになりました。
感想
この短期間で、フロントエンドの技術はもちろん、チームで進捗を管理しながらサービスの開発と運営を行う現場の雰囲気や開発の流れについて深く知ることができました。また、社内勉強会等を通じて、異なるチームに属するエンジニア同士でも積極的に楽しく技術を学んでいける文化に触れることもできました。この貴重な経験を、今後のエンジニアとしての人生に存分に活かしていきたいと思います。
