【ウェイブレポート♯１】

ウェイブのプロジェクトやイベントをお届けするウェイブレポート

第1回は、2021年にスタートしたサブスクリプション型のアニメ配信サービス「AnimeFesta」。その立ち上げに参加したエンジニアを一同に介し、取り組みについてお伺いしました。

小森 一樹（写真：左端）
決済システムやコミック配信サービスComicFestaとの会員連携などを担当。

冨永 修平（写真：中央左側）
渡邉とともにフロントエンド、バックエンドの開発を担当。

渡邉 晋（写真：右端）
冨永とともにフロントエンド、バックエンドの開発を担当。

八木 良樹（写真：中央右側）
インフラを担当。

ー皆さんのAnimeFestaでの取り組みを教えてください。

小森

AnimeFestaは、ComicFesta内にあった課金型のアニメ配信サービスを独立させる形で誕生したサブスクリプション型のサービスです。ユーザー様も両方をご覧になるということが想定されたため、決済は共通でご利用いただける「Festa」に集約することにしました。私は、そのあたりの整理だったり、設計を担当しました。

冨永

私は、AnimeFestaのフロントエンド、バックエンドに携わりました。開発に当たっては、当社で初めて使うNuxt.jsを利用したり、トレンドであるTypeScriptにも挑戦しました。最低限ご満足いただける機能を実装し、できるだけ早くローンチすることを心がけました。

八木

インフラ部分の設計を０からやりました。コード化を進め、サービスに携わるエンジニアが増えた場合にもメンテナンスがしやすいインフラ設計を行いました。

渡邉

AnimeFestaのプロジェクトには後から参加させてもらいました。Nuxt.js、TypeScriptを採用していて、初めて本格的にJavaScriptで開発をする経験をすることができました。またテストの面では、通常のユニットテストに加え、当社で初めて利用するTestCafeを使用し、バグのないサービスを目指しました。

ープロジェクトはどのように進められたのでしょうか？また技術選定などはどのようにされたのですか？

冨永

まずは前段となる「ComicFestaアニメ」の機能を利用しながらどのように新サービスを立ち上げるのか要件定義を行いました。大枠が決まったあとはそれぞれの担当が裁量をもって開発し、必要に応じてすり合わせつつ開発を進めていきました。

技術選定については、要件を実現するために何を使うか今後の開発環境のことも加味しつつ選定していきました。

ー開発でイメージに残っていることはありますか？

冨永

フロントエンドとバックエンド、インフラなどを分離した点です。

分離のメリットとしてミニマムな更新で反映させることが可能になったことと作業を分担しやすくなったことがあげられます。一体だと細かな修正でも全体を更新しなければならないですし、すべてを管理しなければならないので分担が難しいんです。

ComicFestaはここまで分離されてはいなかったので、こうした設計にするのは、初めての試みでした。

分離と一体、どちらがいいのかというとそれぞれにメリットとデメリットがあるので一概には言えません。ただ、分離させる構成が最近、主流になってきている中で、この機会にそういった構成に挑戦して、ノウハウを獲得したいと思い採用することにしました。

八木

インフラ面ではAWS CloudFormationを活用したコード化が印象に残っています。

最近コード化が一般的になってきましたが、前段のComicFestaではできていない部分も多々ありました。今回は0から作ることができる機会だったので、できるだけコード化したいと思ったんです。

コード化したことで新しい環境があればすぐつくれますし、どうやってサービスを作っているかすぐわかるので、新しくジョインされる方にも共有のしやすい物になったと思います。

小森

ComicFestaを活用したところが印象に残っています。

私が担当した決済システムはミスがあってはならない重要なシステムです。なので、何年も安定してサービスを続けているComicFestaのシステムを利用することにしました。

信頼性のあるComicFestaをある程度踏襲することで、安全性とスピード感を意識できたのではないかと思います。

渡邉

私はTypeScriptを使った開発がイメージに残っています。TypeScriptは、JavaScriptを拡張して作られたプログラミング言語ですが、今回、初めて本格的に使用させてもらいました。

JavaScriptを包括的に書くことができるので、いくつか工数を短縮できたり、効率的な開発ができる場合があり、経験できて良かったと思っています。

また、JavaScriptだと指定の文字がなくてもうまく動いちゃったりするので、エンジニアによって表記ゆれが生まれます。TypeScriptは、その点が厳格なのでチーム開発の時に統一感が出て今後もメンテナンスしやすいと思います。

ーリリースされてしばらく経ちました。反省点などはありますか？

冨永

もっと機能を削ることで早くリリースできたのではないかと思っています。

ざっくりいうと今回のサービスは、アニメが視聴できればいいんです。そこだけに特化して開発すればもっともっと早くリリースできたと思います。

わざわざリリースを遅らせてまでやる必要のない機能もいくつかあるので、次回はもっとスピード感を意識して取捨選択していきたいですね。

八木

基本的にComicFestaアニメという元サービスの構成を改善してAnimeFestaを実現しました。だた、ComicFestaアニメ自体がベストプラクティスというわけではなかったと思うんです。

当時はあんまり考えられなかったんですが、単純に持ってきて作るんじゃなくてもっとよいアプローチを求めて制作すれば良かったと反省しています。

ー今後も新規開発をすることもあると思います。最後に展望等を教えてください。

冨永

今回の開発経験により、ジョインするエンジニアがより開発しやすい環境を整備していけると思います。

開発で使用したNuxt.js、TypeScript、また八木の行ったインフラのコード化は携わるエンジニアが増えた時に力を発揮するものです。表記ゆれなどが起こりにくく統一性があり、分離などにより分担も容易だし、決まったテンプレートを知っていればある程度理解しやすい。そういった意味でサービスの規模が大きくなっていっても安定して開発ができると思います。

今回の知見を活かして他サービスでもこういった構造設計をしていくとエンジニアがより力を発揮しやすくなるのではと思っております。