tonkatuのおしゃべり

まっきーの研鑽記

ラーメン二郎には二度と行かねえ

知る人ぞ知るランキングアーカイブスを作ったので報告

はじめに

これは ドワンゴ Advent Calender 2019の記事です。

今回は僕がニコニコ動画のフロントエンドチームにいたときにフロント開発を担当した、ランキングアーカイブス 開発の雰囲気を話したいと思います。雰囲気を感じることを目的にして読んでください。

f:id:tonkatu05:20191212142642p:plain
ランキングアーカイブスの画面

自己紹介

ドワンゴで内定者アルバイトをしています、まっきー@macinjoke です。 2019年5月頃から始めて9月半ばまでニコニコ動画のフロントエンド開発、その後から現在はニコニコ生放送のフロントエンド開発をしています。

ドワンゴは優しい会社なので「色んなところで働きたいから異動させてよ!」って言えば上の人が相談してくれてすんなりと異動できました。

動画チームの人は胴上げして送り出してくれました。好き。

ランキングアーカイブスとは

ニコニコ動画は今年6月26日にランキングシステムが新しくなり、今までの動画分類方法(カテゴリ)を見直して整理し、ランキングページを作り変えました。 詳しくは: 新ランキング解説ページ

それに伴い、これまでのランキングは新ランキングとは別の集計方法なので、過去のランキングにはアクセスできなくなりました。

そこで過去のランキングにもアクセスできるようにランキングアーカイブスというページを作ることになりました。

わりと需要のあるサイトだと思うのですが、あまり大々的に告知はされておらず、ニコ動ページからも全く導線がありません。ゆえに、まさに知る人ぞ知る思い出の溜まり場なのです。

実際、ニコ生チームに来てから、こんな会話がありました。

まっきー「動画チームでこんなページ作ったんですよ」

O「へー知らなかった。良さそうですね」

...中略

O「重宝します(素敵な笑顔)」

社内ニコ厨に重宝されることができました。

f:id:tonkatu05:20191212153357p:plain
カテゴリ選択

機能としては単純で、使ってみれば1分で全ての機能を把握できると思うのですが、簡単に説明すると、カテゴリやら期間やらを指定すると対応したランキングを表示してくれます。

プレミアム会員なら期間を指定することができ、その期間のランキングを表示して思い出に浸れます。

あゝ愉しい。古参勢は思い出の旅に出かけて帰ってこれなくなり日が暮れること間違いなしです。

開発

フロントエンドに関しては僕が一人で開発しました。 デザインとCSSはデザイナさんがやって、バックエンドのAPIは他の人が書きました。

フロントエンドは僕一人なので本当に自由にやらせてもらいました。ReactでもVueでも好きなようにどうぞと。お手並み拝見されたという感じです(?)。 1ヶ月ほどで開発からリリースまでできて充実感ありました。

使用した技術

主な技術として TypeScript, React, Redux, CSS Modules を採用しました。 使い慣れてるので脳死でRedux 使いましたが、この規模なら使いやすいと個人的に思っています。 Redux の良いところの一つはRedux DevToolsが見やすくてデバッグしやすいことだと思っています。ボイラープレートが多いけど、個人開発でスピード感ある開発するには普通に使いやすいです(慣れてれば)。 (MobXもReduxも使わない中~大規模開発を今度やってみたいとは思ってる。hooks ならcontext api を簡単に使えるのでできそうという気持ちがしている。ReactNも良さそう)

CSS はデザイナさんがやりやすいように CSS Modules な感じにしました。

また、スクロールに応じてレンダリングするために、react-intersection-observer を使っています。これは Intersection Observer API をReactコンポーネントで簡単に使えるようにしたもので、楽に実装できて便利でした。

開発の流れ

技術的に特筆する点はそこまでないですが、開発体験的にはけっこう成功でした。

僕が仕様にそってひたすらコンポーネントを作って、デザイナさんがCSSを当てました。 コンポーネント作ってる間にフォームのロジックやredux-thunk で非同期でAPIを叩くロジックを組んでいき、それをしている間にデザイナさんがCSSを当て...。という感じで着々と見えるものが出来上がっていくのが楽しかったです。

f:id:tonkatu05:20191212193948p:plain
開発の流れ

CSSを自分で書かないとこんなに開発早いんだなーと驚きました。 自分はバイトなので週3でしかコミットしていません。自分がコンポーネント書いてpush して、2日後会社に来たらCSSが当てられているみたいな状態ができてて、なんか気持ちよかったです。自分はフロント大好きだがCSSをあまり書きたくない人間なのでこの役割分担はかなり俺得でした。

つらみ

しかし全てが順調と言われればそうでもなく、特にややこしいランキングの仕様をちゃんとコードに落とし込むのはなかなか骨が折れました。あとそもそも古いランキングの仕様を把握しきれてなく、「あれ、ここのこういう場合だと動かなくね?」みたいなことがあり、詳しい人に聞いて「実はこうなんよ」って言われて実装を変えたりしてけっこう苦労しました。

また、IE対応に苦労しました。自分が普段個人開発しているときはIE対応なんてしないし、特にクロスブラウザチェックなんてせずにchromeだけ動けばええやろとリリースしています(怠惰)。 なのでそこらへんの知見が全くなく、今回色々教えてもらいながら CSSはautoprefixer、 babel は preset-env がいい感じに browserslist を読み取ってIEでも使えるようにしてくれるよみたいな話を学びながら設定しました。 しかしそれでもIEでは差異がでてしまうあんなことやこんなことに遭遇し、IEに対する○意が湧き出ながら対処をしたのは良い思い出です。

まとめ

今回内定者アルバイトとして1ヶ月で自由にゼロからWebアプリケーションを作らせていただきました。 小さいチームでひとつのプロダクトを無事つくることができたのは非常に良い経験でした。 ニコニコ古参勢はぜひ使ってください。

胴上げは楽しかったので、社員になったら今度は胴上げをする側に回りたいです。