モノグサのソフトウェアエンジニアインターンに参加させていただいた、青柳と申します。普段は早稲田大学で計算機科学を専攻しています。また、学業とは関係なく趣味でもソフトウェア開発をよくやっていて、最近は特にWebサービスを作っていることが多いです。例えば、今年（2025年）は主に自分の知り合い向けにTwitterクローンを開発しました。
今回モノグサのインターンに申し込んだきっかけとしては大きく分けて二つあります。
まず一つは大学のサークルの後輩からオススメされたことです。彼は昨年度既にモノグサのインターンに参加していたので、その口コミがモノグサに興味を持つきっかけになりました。
もう一つのきっかけは、以下の大橋さんの記事です。
自分は普段趣味でよく音楽ゲーム（いわゆる音ゲー）をプレイしていて、この記事の題材であるSOUND VOLTEX（サウンドボルテックス）というゲームも最近よく遊んでいるので、この記事を読んで「おもしろい会社だなあ」と思っていました。
今年の夏季のインターンを考える時期になり改めてモノグサの募集を確認したところ、タスクによってフロントエンド/バックエンド、Web/モバイルをどれくらいやるか自分で決められそうというのと、給与面なども他のところと比較して高い水準だったので今回このインターンに申し込むことにしました。
背景
今回私が主に担当したのは、Web管理画面の中にあるBook編集画面の改修です。まず「Web管理画面とは何か？」というところから解説します。
「Monoxer」というアプリケーションは、学習者が使うモバイルアプリと管理者（学校の先生など）が使うWeb管理画面の2要素から構成されています。管理画面では、記憶する対象をまとめたものである「Book」の作成・編集・配信や、小テストの作成・配信などを行うことができます。
以下に、実際のBook編集画面をお見せします。
このBook編集画面では収録されているエントリ（学習で記憶したい対象）が一覧になって表の形式で並んでおり、必要に応じてエントリを編集することができます。ただし、編集することができるのは下書き状態（学習者には公開されていない）のエントリのみで、一度公開してしまったエントリについては直接編集をすることができない仕様になっています。しかしそういう仕様とはいえ、公開されているエントリの内容を後から修正したくなることもあります。
これは例えば、問題文や解答に誤植があったときや、時代に合わせて問題文・解答などを修正したいときのようなケースです。このような場合、従来のBook編集画面でエントリを編集するには①一度編集したいエントリを複製して同内容の下書きエントリを作成し、②作成した下書きエントリにて修正をして、③複製元のエントリを削除して、④修正した下書きエントリを公開する——という手続きを踏む必要がありました。エントリの編集をしたいのに複製をするというのはあまり直感的な操作ではありませんし、必要な操作のステップも多いです。こういった背景があり、今回のインターンではこのBook編集画面のエントリ編集のUI/UX改善というテーマに取り組むことになりました。
改善手法
前述した仕様を変更して公開済みエントリを編集できるようにするためにはバックエンド（サーバー側で行う処理）の改修も必要となり簡単なタスクではないため、まず「フロントエンド（クライアント側で行う処理）だけで対応できないか？」という方向で実装を決めていきました。結果としては、以下の図のように公開済みエントリのメニュー内に「下書きに戻し編集」機能を追加する形になりました。
この機能を呼び出すと指定したエントリが下書き状態に戻り、かつ自動的にエントリの内容の入力欄（以降は単に入力欄と呼びます）が開いた状態になるので、そのまますぐに内容を編集できます。
これは内部的には、エントリを複製して下書きエントリを作成したあとに自動的に複製元エントリを削除して、下書きエントリの編集画面を開くという機能の組み合わせによって実装されています。従来のBook編集画面でのエントリの編集フローで必要だった操作のうち、いくつかをまとめて扱いやすくした形です。
ただし、既に学習者に配信済みのエントリを編集してしまうと学習者の「記憶度」や学習計画の進捗といったデータに影響を与えてしまうため、「下書きに戻し編集」ボタンを押した際には以下のようなモーダルを表示して、意図せずにエントリを編集してしまうことを防ぐようにしています。
実際の開発の流れ
今回のインターンタスクに取り組むにあたって、まず「UIをどのように変更するか？」という点をデザイナーの方と相談しました。画面のレイアウトなどに変更が加えられる機能の開発になるため、エンジニアの自分1人だけで全て進めることはできません。このようなケースでは、デザインのプロであるデザイナーさんと共同で作業を進めていくことになります。
モノグサでは、画面のデザインについて議論する場として主に Figmaを利用しています。今回の開発では最初にデザイナーの方にベースとなる案を作成していただき、そこにコメントをつけていく形でディスカッションを行っていました。また、「この点については詳細に意見を共有したい」というときにはミーティングを適宜設けて話し合いをすることもありました。必要な議論が一通り済んだ段階でデザインがfixの状態となり、その後は決められたUIとなるようにエンジニア側で実装を進めていく形になります。
デザインの話し合いの段階では、公開済みのエントリについても下書きエントリと同様に「削除」ボタンの左に「編集」ボタンを表示するという案や、最終的に採用された仕様ではモーダル内に表示しているアラートをエントリの入力欄内で表示する案がありましたが、「配信済みエントリを編集することの影響を知らないまま編集をしてしまわないか？」などの観点から最終的には現在のような画面デザインとなりました。
実装の段階では大きく分けて二つの対応をしました。一つはエントリの複製処理の改修で、もう一つはエントリ一覧の表コンポーネントの状態管理の改修です。順番に説明します。
公開済みエントリのメニューから「上に複製」あるいは「下に複製」を選択すると、公開済みエントリの内容をコピーした下書きエントリを作成するエントリの複製処理が呼ばれます。下書きに戻す処理を実装しようとしたときに、エントリの複製自体はこの既存の機能を流用することでできるのですが、今回のケースでは複製したあとに作成された下書きエントリの入力欄を自動的に開くようにしたいです。このために下書きエントリの情報（IDなど）を複製の後続処理で使えるようにしたいのですが、従来の仕様では複製時には複製処理を呼び出すだけで返り値を受け取っておらず、まずこの部分を変更する必要がありました。これが大きな変更点の一つ目です。
ただ、複製して作成された下書きエントリを受け取るようにすることはできたものの、肝心の入力欄を自動で開くというところにもう一つ壁がありました。
それは、それぞれのエントリは自分自身以外の「編集中かどうか」フラグを操作できないという点です。今回の機能では複製元エントリを複製した後に作成した下書きエントリの状態（編集中フラグ）を操作したいのですが、これらは異なるエントリであるため従来の実装ではお互いの状態を変更することはできませんでした。
そこで、それぞれの行のコンポーネントで状態管理を行っていたところを親であるエントリ一覧のテーブルのコンポーネントで状態管理を行うように変更しました。これが二つ目の変更点です。
この二点の改修さえしてしまえば、あとは既存の機能をいくつか組み合わせることで今回のメインタスクの実装をすることができます。実際ここまで開発が進んだ後は、かなりスムーズに残りの実装が進みました。
モノグサでのインターンは6週間というかなり長めの期間でしたが、その分かなり詳細にモノグサの文化を知ることができました。
就業型インターンに参加するのは実はモノグサが3社目なのですが、他の企業と比較してモノグサの良いところはボドゲ会やおやつ会、TechTalkなどのような直接の業務以外での社内交流の機会があること、そしてそれを可能とするようなゆとりのある働き方ができること、だと思っています。ものぐさで行こう。
モノグサでエンジニアとして自分が働く姿を想像できるようになった、インターンらしいインターンだったと思います。
機能の開発に関しては、最終的にはあっさりという感じでしたが途中詰まったりする場面もありました。
自分が元からNext.jsの経験があり、さらにメインタスクもフロントエンドの改修ということで技術的に新しいことをやる感じにはならないのかなと思っていたのですが、エントリの複製処理の改修の際にRedux-Sagaで実装された処理をRedux ToolkitのRTK Queryに移行するという対応をすることになり、どちらもまったく名前も知らないところから作業することになったので大変でしたし、商用サービスでのdata fetchingの勉強になりました。
また、自分が最近になってからReactに入門したこともあり、やや古い方式であるクラスコンポーネントに馴染みが無かったので、最初はコードの意味を読むのに少し苦労しました。こちらは、プロダクトのメンテナンスという面で勉強になった気がします。
インターンを総合して振り返ると、最終的にはインターン期間中にメインタスクの機能を実際にリリースするところまで到達できたのでかなり満足しています。機能リリース後には他のチームの方から「大変ありがたい」というコメントもいくつかいただき、非常に嬉しかったです。
開発を通して、デザイナーの方、エンジニアの方、QAの方などたくさんの人にお世話になりました。プロダクトの開発に対する知識がまた一層深まったと感じます。今回インターンのタスクに関わってくださった全ての方に、ここで改めて感謝をしたいと思います。ありがとうございました。
趣味の音ゲーで交流ができて良かったです。#club-rhythm-gameのみなさんありがとうございました！
コメント