MENU

WHAT IS FUSIC DOING?Fusicってなんしようと?

OJTレポート「Fusic-Photo(検索システム)のご紹介」#藤澤・花園レポ

2020.09.29

OJTレポート

2020年度新卒入社の技術開発本部の藤澤 亮平花園 楽志

当社のOJTで作成した社内システムをご紹介します。


※Fusicでは、エンジニアの新入社員に対し、約半年間の教育制度を導入しています。

その期間のうち数ヶ月間は、エンジニアとしての技術力向上や、

一人でクライアントとやり取りができるようになることを目的とし、

OJTを実施しています。

==============================


【システム名】

Fusic-Photo(検索システム) ヨミ:フュージックフォト






【システム種別】
検索システム



【セールスポイント】
UIがシンプルで使いやすい
画像の整理に使える

画像を管理するためのシステムです。
アップロードした画像に撮影場所などのメタデータが存在している場合、その情報を抽出し、撮影場所や撮影した日付でグループ分けを行います。
また、アルバムにまとめることができ、画像にユーザーのタグ付けを行うことで誰がどの画像に写っているのかを整理することができます。
今後は画像に写っている人を認識し、自動でタグ付けできるような機能を追加予定です。


【開発期間】
1ヶ月


【技術】
Ruby on Rails、Vue.js



藤澤の感想


【難しかったこと】
バックエンドとフロントエンドをAPIで切り離さずに、Ruby on RailsのアプリケーションサーバーでVue.jsコンポーネントのコンパイルやトランスパイルもおこなっていたため、バックエンドからフロントエンドにデータを渡す部分で苦労しました。また、タスクを機能ごとに縦割りで振り分けていたため、フロントエンドで表示したいデータがあったら、その度にエンドポイントを追加していました。そのため、かなり多くのエンドポイントが乱立してしまいました。その部分をクエリストリングに検索条件を持たせてGETする方針に変更し、その方針に沿って必要のないエンドポイントを削除、統一化していく作業が大変でした。

【頑張ったこと】
共同で開発した同期がVue.jsを触ったことがない状態だったため、積極的にコミュニケーションを取りながら、わからない点は聞いてもらいながら進めていきました。結果的に、OJT発表の前までには同期もフロントエンドのタスクをしっかり進められるようになっていて、とても助けられました。

【OJTを通して学んだこと】
ユースケースの漏れが非常に目立ちました。「この部分ってどうするんだっけ?」という会話が多かった気がします。また、URL設計が非常に雑でした。RESTを意識したURL設計になっていなかったため保守性の低いコードを生産してしまいました。開発前の設計のプロセスで、どこまで漏れのない設計ができるのか(DB設計、画面設計、ユースケースの定義、URL設計、仕様書の策定など)が開発や、工数見積りなど、様々な点において共通して、重要だということを、身をもって体験できました。


花園の感想


【難しかったこと】
Vue.jsコンポーネントとRuby on Railsアクション間の値の受け渡しに苦労しました。コンポーネント間でもバケツリレーのように値を受け渡さなくてはならず、一つの変更に対して多大なコストを掛けなくてはならなかったです。また、遠隔での共同開発だったため、前提知識の共有が難しく、開発初期はなかなか思うようにいかなかったです。

【頑張ったこと】
Ruby on Railsは4月から、Vue.jsを触るのはこのOJTが初めてという状況だったので、Ruby on Rails+Vue.jsでの開発は覚える事が多く大変でした。画面設計書はチューターの2人と南部 晃史さんから「しっかりしている」との評価を得ることができたので嬉しかったです。

【OJTを通して学んだこと】
実際にOJTで仕様決定からデプロイまでの開発のフローを実践できたことで自信がつきました。また、Vue.jsは開発の初めこそ右も左も分からない状態でしたが、OJTの終盤では自分でコンポーネントを作成して挙動を制御できるようになりました。