Monoxer Intern Report #13_大量のコンテンツの描画処理最適化

自己紹介

筑波大学大学院修士1年の山﨑昂輔です。大学ではRDFデータを分散処理で効率的に問合せするためのデータ分割手法について研究しています。 モノグサで7月から9月までの3ヶ月間夏季インターンシップに参加していました。

参加を決めた理由

Scalaという言語をより実践的に学びたいということと、実務経験を積みたいということが主な理由です。 私は研究でこのScalaを使用しているのですが、学習のための資料が少ない状況でした。5年以上前のwebページの資料等を参考になんとか学習し、使えるようにはなりましたが、この使い方が本当に正しいのかを知りたいと考えていました。 そこで様々なインターン応募サイトを探していたところ、AtCoder JobでScalaを使用している企業としてモノグサがヒットし、参加を決めました。

取り組んだこと

細かいタスク

Monoxerの業務は様々ですが、私はその中でもマーケットプレイスという領域のタスクに取り組みました。マーケットプレイスは出版社が商品を販売・管理する機能や、利用組織の管理者である学校の先生などが商品を購入・管理する機能があります。詳しくはマーケットプレイス概論を読んでみてください。 マーケットプレイスでの開発は、フロントエンドとバックエンドを触ることになるのですが、私は今回のインターンシップが実務初体験であり、TypeScriptの使い方どころかGitHubの使い方すらわかっていませんでした。そこで初めは軽めのタスクを割り当ててもらいながらどのようなものかを理解していきました。 詳細は省きますが、小さめのタスクは

  • ページネーションの導入
  • ダイアログをトーストに変更
  • 表示のバグの修正

などです。これらのタスクを通して基本的なGitHubの使い方やReactの仕組み、バックエンド処理などについて教わったのち、今回のインターンシップのメインタスクに取り組み始めました。

メインタスク

概要

私のメインタスクは、「マーケットプレイスのコンテンツを大量に購入しているとブラウザが停止してしまう」という問題の解決でした。上述の通り、マーケットプレイスの商品は学校の先生などが購入して利用しますが、先生方が利用するPCのスペックはあまり高くないことも多いです。そしてその場合、購入したコンテンツが増えると一覧表示時等においてそれらを処理することができなくなってしまいます。そこで今回のメインタスクによって、PCのスペックを問わずスムーズな操作の実現を目指しました。

Bookとその統合

今回の問題はBookの統合を行う際に生じていました。 Bookとは、モノグサの商品に含まれているいわゆる問題集のようなものであり、組織は商品を購入し、その問題を児童生徒らに解かせることができます。このBookは単元ごとに分割されていることもあり、組織が商品一覧から複数のBookを選択し統合することで、指導内容に合わせた新たなBookを作成することも可能です。今回の問題は、この統合操作の際に生じていました。

従来の処理

そもそもなぜブラウザが停止してしまうことがあったのかを理解するために、元々どのような処理になっていたのかを説明します。 学校の先生などが購入した商品の一覧を開く際、従来はすべての商品とその商品に含まれるBookの情報を一括で受信し表示していました。さらに、この時デフォルトではアコーディオンが開いており、購入している商品だけでなくその中のBookが全て表示される(図1参照)ことから、商品数の増加に伴い描画コストも増加し、結果としてブラウザが処理しきれずに停止してしまっていたのです。また、商品検索も同様で、大量の商品内での検索は処理コストが高くブラウザ上での処理が困難となってしまっていました。

図1.「Bookの統合」を開いた時の従来の画面

処理の改善

上記の問題に対して、受信・描画するデータ量を削減することによる改善を試みました。 具体的には、

  1. ページネーションを導入し、1ページあたりの商品数を30件に制限
  2. デフォルトではアコーディオンを閉じ、商品名のみの表示(図2参照)
  3. 商品検索をサーバーサイドでの処理に変更

の3つのアプローチを取りました。1と2のアプローチは、描画量の大幅な削減を目的としており、従来は総商品数+総Book数だけ必要だった描画を30件以下に抑制できます。3のアプローチは検索コストの削減を目的としており、サーバー側での処理によって組織のPCのスペックに依存しないスムーズな検索を実現できます。 リリース後には、「挙動が軽くスムーズになった」との声もいただきました。

図2.「Bookの統合」を開いた時の変更後の画面

インターンの感想

実務を行う経験

本インターンシップはインターンシップ専用のプログラムではなく、実際に実務としての開発を行い、会議や社内chat等の閲覧も可能な環境でした。今後就活を控えている身として、どのような人たちがどのようにして働いているのかを知ることができたのはとても良い経験であり、社会での働き方の例として大変参考になりました。プログラミングの面では、そもそもの一般的なコーディングの作法から必須スキルまで、多くのことを経験できたと感じています。特に、命名や責任範囲などは普段の研究でも自分のコードを読むために重要なことであるため、意識して活かしていきたいと思います。

誰かのためにプログラムを書く経験

これまで自身のためのプログラムしか書いたことがなかった私にとって、私がコードを書くことで他の誰かのユーザー体験が改善したという実感はとても新鮮であり、かつ嬉しいものでした。実際に「挙動が軽くなって助かった」という声をいただくことができたのも印象的です。

社内の環境や働き方

先にも書いた通り社内のやり取りの閲覧や自分の意見の発信もできるという中で、社員の方々がモノグサという会社とサービスに誇りを持ち、より良くしていこうと考えていることを感じられました。また、多くのやり取りの中で「ありがとうございます」という言葉が頻繁に出てくるのも印象的でした。私自身、特にインターン開始直後などは自分の考えを発信する際に「こんな初歩的なこと聞いても良いのだろうか」や、「素人意見で大丈夫だろうか」などとドキドキすることもありましたが、「ありがとうございます」と言っていただけることで発言のハードルが下がり、より気楽に発信しやすくなったと感じました。 働き方の面では、勤務時間・勤務形態ともに柔軟であり、授業や課題、研究等とのバランスを取りながら不自由なく勤務できました。また、会社にはフリードリンクや軽いおやつ、ボードゲームなど仕事以外も充実しており出社も楽しかったです。

自身の成長

授業や研究でのプログラミング経験はあったものの実務での経験は0からのスタートだったので最初は不安もありましたが、日を重ねるごとに徐々にいろいろなことを理解していくことができたと感じました。特に、9月に2週間他社のインターンシップにて学生7人でチームを組んでReactを用いたAgile開発を行なった際には、モノグサでインプットしてきた経験や知識を適切にアウトプットでき、これまで自身が教わってきたことが自分のものになっていることを実感しました。とはいえ何度もメンターの加藤さん含めいろいろな方に質問しており、レビューでもたくさんの指摘をいただいているので、まだまだこれからも様々なことを吸収していきたいと考えています。 今後は通年インターンに切り替えて引き続きモノグサで働かせていただけるので、より良いサービス作りに貢献できればと思います。