もふもふ技術部

IT技術系mofmofメディア

【Rails・Next.js】技術研修で初モノレポ構成でタスク管理アプリを作ってみたレポート

こんにちは。鳥井です!

株式会社mofmofに入社して2ヶ月が立とうとしています。

mofmofでは実際にアプリを作るという技術研修があり、入社してから技術研修に集中して取り組んでいました。

個人的には技術部分が初めて触ったところが多くて忙しくも楽しい技術研修になったと思います。

今回はmofmofの技術研修レポートとしてどんなものを作ったか、技術研修を通して学んだことについて紹介します!

概要

タスクを管理するTodo Appです。

WEBブラウザで確認したTodo Appの画面

機能は下記の内容で一通り実装しました。

  • 一覧表示機能
  • 詳細表示機能
  • ユーザー登録機能
  • ログイン機能
  • タスク一覧情報のCSVデータ出力

技術スタックについて

技術スタックについては以下の通りです。

  • Docker
    • compose
  • Ruby on Rails
    • device-auth-token使用
  • Ruby
  • GraphQL
    • client: Apollo Client
  • バックグラウンド処理系
    • Sidekiq
  • フロントエンド
    • Next.js
      • App Router
    • TypeScript
    • Tailwind CSS
  • インフラ
    • Heroku
  • DB
    • PostgreSQL

技術研修内で行ったこと

実装はもちろん担当していましたが技術研修では技術定例があり、そのファシリテーションも担当していました。

技術定例とは週に1回案件に関わっているメンバー同士で行うものです。(技術研修では週1)

実際に案件を担当したという流れで進捗と、今後の進め方について話を行いました。

実は個人的にファシリテーションをやるのは緊張しており正直に言いすぎて、何か失言したのではないかとずっとヒヤヒヤしていましたね…。

今回は技術研修でしたが実際のファシリテーションを担当する時は技術研修で経験したことを活かしていきたい、と思いました。

技術研修を通してわかったことについて

フロントエンド部分実装が弱点

私はフロントエンド業務を行なってきたことがないことも関係しており、そこが今苦手な分野なんだと感じました。

今後はバックエンドとフロントエンドどちらも担当することが増えるのでフロントエンドの方も個人で勉強を進めていきたいところです。

非同期処理の実装方法

今まで個人で実装してきたものも同期処理が主な実装だったので今回初めて非同期処理の実装を行いました。

Next.jsの書き方がわからないことから結構苦戦しましたが…。

基礎はつかめた感じです。(今後も勉強が必要ではあります…。)

モノレポ構成について知った

今まではバックエンドのみ担当の案件につくことが多くて、実はモノレポ構成という名前を知るのが初めてだったりしました。

関わった案件の中ではモノレポ構成だったけど、バックエンド担当でそこだけしかやっていなかったというケースばかりだったようです。

バックエンドとフロントエンドの通信方法について知ることができたのはとても良かったです。

実装時はCORSエラーについて結構詰まっていました。

振り返り

技術研修の終わりには振り返りを行いました。

技術研修でやったことの良かったところ、問題点、改善点を技術研修メンバーで話し合って出たことについては以下のとおりです。

  • PO(プロダクトオーナー)担当にわかりやすく説明すること
  • ファシリテーションの担当をする時は議事録記入の担当を誰かにお願いしておくと良い
  • POと技術面の実装で会話をするときには堂々と回答できるようにすること
  • 環境構築に時間をかけすぎないことが大事であること

POだけに限らず相手の立場に立って、時には噛み砕いて説明をすることが大事だと思いました。

個人の理解と、他の人の理解が必ずしも同じではないことを理解した上で話し合いは行うべきですね。

あとファシリテーションで話すのと技術系の研修を行うこと、議事録を書くのは難しい!

その部分については誰かにお願いするというように分担しておくとスムーズに進みます。

環境構築は久しぶりにやると思わないところで躓きがちです。

時間をかけすぎないほうがその先の実装できる数も変わるので注意したいところです…。

もう1ヶ月あったらやりたいこと

技術研修は2ヶ月でしたが下記の部分がもう少しやりたかったところでありました。

  • デザインの修正
    • シンプルなデザインを目指したけどどこかダサいデザインである
    • 画面遷移が多い印象だったのでそこの改善
    • 処理速度の向上など

今回は範囲外ではありましたが、スマートフォンで利用できることも想定したデザインもしっかり考えておくべきだったと思います。

一覧表示の画面上で登録フォームを出して、そこから登録できるようにするとか。

利用者としては今時っぽい使いやすいデザインを求めている人も少なくないですね。

まとめ

技術研修でほぼ経験したことない言語を触ってきて思うことは、まだまだ勉強が足りないなということ。

今後違う案件に触れていくことも増えていくと思いますので諦めない心で挑んで本当の目的に合ったものを実装できるようにしていきたいと思います!