LaravelでつくったAPIをADRならぬADM(Action-Domain-Model)にリファクタリングした話

 

概要

今回はGraspyというキャリア形成プラットフォームGraspyの開発エンジニアの

もり(@frostndays)とよね(@keiuwk0614)が執筆しました。

 

graspy.jp

Graspyの技術スタックとして

フロントエンドはNuxt.js、サーバサイドはLaravelを使用しております。

今回は、LaravelでつくったAPIをβ版リリース直後にリファクタリングした経緯や

そのメリット、デメリット等を紹介させて頂きます。

 

リファクタリングした経緯

 リファクタリング前は、一般的なWebアプリケーションで採用されることが多いMVCパターンを採用していました。

MVC(Model View Controller)とは、リクエストに応じて処理を振り分けるコントローラ、画面やレスポンスなどの情報を出力するビュー、ビジネスロジックをモデルとして、3つの責務に分割したアプリケーション設計パターンです。

 

 しかし、開発していく中で開発者のファイルの切り出しの粒度であったり、ControllerとModelの処理の責務が煩雑になり、Controller、Model共に肥大化していき、所謂fat controller、fat modelになっていました。

 これを解決するために、controllerとmodelの間にservicesを挟み、controllerに書かれていたビジネスロジック等を、servicesに切り出すことも考えましたが、結論それを行ってもcontrollerの処理がservicesに移行するだけで、ファイルの肥大化の根本的な解決になりませんでした。

 

ADR(Action-Domain-Responder) 

 そこで、今回参考にしたのは、最近発売されて話題になっていたLaravel本

PHPフレームワーク Laravel Webアプリケーション開発 バージョン5.5 LTS対応

PHPフレームワーク Laravel Webアプリケーション開発 バージョン5.5 LTS対応

  • 作者: 竹澤有貴,栗生和明,新原雅司,大村創太郎,丸山弘詩
  • 出版社/メーカー: ソシム
  • 発売日: 2018/09/26
  • メディア: 単行本
  • この商品を含むブログを見る
 


に記載してあり話題になっていたADRというAction、Domain、Responderの3つの責務から成り立つアプリケーション設計パターンを参考にすることにいたしました。

 

f:id:itpro_yonekawa:20181110195401p:plain

ADR(Action-Domain-Responder)


 

ADRパターンとは
A : Action 

 MVCで言う所のControllerに当たるレイヤー。Controllerが複数のActionに対応するのに対して、1Action1メソッドとして独立させ、1つのActionとルートを対応させることで複雑化を防ぎシンプルにHttpリクエストが扱える。


D : Domain

 モデルとドメインの2つに大きな違いはなく、レスポンダが出力するためのビジネスロジック等を記述する。モデルの代わりにドメインを当てはめることで、データベース=モデルの概念から、ドメイン駆動設計パターンを考えてもらうことを意図している。


R : Responder

 レスポンダは、モデルから返却される値によって表示方法の変更、HTTPステータス変更など、プレゼンテーションロジックをコントローラ・アクションから切り離し、コンテンツ情報だけでなく、HTTPレスポンスを構築する処理を担当する。

 

 

ADRならぬADM(Action-Domain-Model)


しかし、今回はLaravelはAPIサーバーとしてしか使用していません。そのため、ADRパターンのResponderに値するレイヤーではviewをreturnしたりするような処理を行なっておらず、Jsonをreturn するだけのシンプルな構造になっていることから、Responderレイヤーは導入しませんでした。また、Modelディレクトリの移行も既存APIリファクタリングの難易度が高かったため残すことにし、下記のようなADM(Actions-Domain-Model)のアプリケーション設計パターンを採用することにしました。

 

f:id:itpro_yonekawa:20181110195322p:plain

ADM(Action-Domain-Model)


A : Action
- 上記ADRのaction同様に1Action1メソッド


D : Domain
- service : ユースケースビジネスロジック
- repository : Modelからデータ取得処理、データ加工


M : Model
- 各テーブルの定義情報、リレーションのみ、ロジックは書かない


これにより

Action : Domainのみ知っている
Domain(service) : Repositoryのみ知っている
Domain(Repository) : Modelのみ知っている

という以下のような依存関係にしました。
action → Domain(Service) →Domail(Repository) → model

 

 

リファクタリングしたことによるメリット、デメリット

 

メリット

問題となっていた一つのファイルの肥大化が抑えられ、整理された小さな機能の集まりとして、それぞれの責務が明確されコードの可読性が上がった。

 

デメリット
1Action1メソッドのためファイル数が多くなり、それに伴いコード量も比例して増えてしまう。ドメインをどの粒度で分けるか悩む、あまり大きな括りで分けると結局serviceが肥大化してしまう。

 

MVCからADMにリファクタリングしてみて

 

 今回は、β版リリース直後にAPIリファクタリングをするべきかそうでないか、迷いました。しかし、今後2次リリースに向けてもっと機能が増えて開発してから行うよりも、今やらなければ後からもっと技術的負債が残ると感じ、今後のメンテナンスや保守運用を考え、リリース直後にリファクタリングすることを決め、しっかりリファクタリングスケジュールを組んで実施しました。

 今回ADRを参考にADMというアプリケーション設計パターンにしたのですが、私たちのように元々MVCで作ってしまいModelを削除しDomainに切り替えるのが難しくなってしまっている方には、そこまでリファクタリングのリスクもなくController、Modelの肥大化が抑えられるので、ADMを是非参考にしてみてください。

 

最後に

 

 株式会社ITプロパートナーズは、Laravel/Vue.js(Nuxt.js)で開発したいエンジニア、デザイナー絶賛募集中です。少しでも興味のある方は、DMでもWantedlyでもお気軽にご連絡頂けますと嬉しいです。お待ちしております。

 

www.wantedly.com

 

www.wantedly.com

 

 

 

 

 

Vue Fes Japan 2018 ゴールドスポンサーとして協賛しました

こんにちは。

株式会社ITプロパートナーズでエンジニアをやっている米川です。

 

弊社は、「自立した人材を増やし、新しい仕事文化をつくる」というビジョンのもとで、IT・Web 業界の起業家やフリーランスで活躍するエンジニア・クリエイターに週2日からの案件を紹介するプラットフォーム「ITプロパートナーズ」(https://itpropartners.com/)を運営しています。

その他にもマッチングサイト構築パッケージの「PIECE」、教育支援サービスの「ITプロカレッジ」、新卒採用サービスの「intee」という事業を展開しています。

 

また、この度中途向けの教育型転職支援サービスGraspyを2018年8月末にリリース致しました!

graspy.jp

技術スタックは、フロントサイドはNuxt.jsのSSR、サーバサイドはLaravel5.5を使用しております。

 

f:id:itpro_yonekawa:20181103134928p:plain

 

 弊社のサービスでは、Vue.jsを積極的に採用しており、Vueのコミュニティにも貢献していきたいと思い、vue fes japan2018のゴールドスポンサーとしてCTO1名、PM1名、エンジニア2名で参加してきました。

vue fes japanとは、日本で初めて開催されるVue.jsのカンファレンスです。

vuefes.jp

 

弊社ブースでは、開発したエンジニアがブース担当していたため、お立ち寄り頂いた方たちと開発チーム体制や、どのようなサービスをVueで開発しているか等、技術的な深い話も沢山することができ、とても有意義な時間を過ごせました。中には、その場でGraspyに興味を持ってくださり登録してくださる方もいました!ありがとうございます!

 

f:id:itpro_yonekawa:20181103150404j:plain

 

弊社は毎月第3土曜日あたりにProLaboというもくもく会を開催しており、通りすがる方々に「あ!プロラボさんですね!」とか「プロラボ参加したことあります!」という声をありがたいことに沢山頂き、急遽モニターの半分をconpassのProLaboのページを表示するようにしました!

ProLaboの画面をモニターに表示するようにしてから、参加者の方々が沢山ブースに脚を運んでくれるようになりました!恐るべしProLabo。。。

 

f:id:itpro_yonekawa:20181103150505j:plain

 

セッションについて

Atomic Design のデザインと実装の狭間

www.slideshare.net

 こちらのセッションでは、エンジニアとデザイナーが同じ目線でコンポーネントを設計するのは難しい、デザイナー目線とエンジニア目線の利点と難点が凄く分かり易かったです。弊社でもAtomic Designを採用し業務委託で入られているデザイナーが作ったvueファイルをエンジニアがコンポーネントの分割をしています。

弊社の開発体制では、デザイナーは業務委託で入られている方1名で、コンポーネントを分割しエンジニアリングしてからデザイナーの方が作業することもあったり、先にデザインを作ってもらってからエンジニアが作業したり、その辺は柔軟に対応してもらっています。

そもそもデザイナーがやっていることとは、「UI/UXのデザインであり、もっとも大事なのはユーザーの反応、コンポーネントはそもそもエンジニアリングの概念」というのは、今まで開発してきて意識してこなかったことでした。このスライドの最後に書いてある通り、まだまだ手法はみんな手探り状態であるということ、デザイナーがデザインに専念できる環境をつくってあげれるようにエンジニアリングでサポートしていけるように、デザインツールとかこれから覚えていけなければならないなとか考えさせられました。

 

f:id:itpro_yonekawa:20181103161821j:plain

 

 

参加者メンバーの所感

CTO 柳澤

 ITプロパートナーズとしては久しぶりのブース出展となりました。
graspyパーカーやステッカー、配布するフライヤーなど社内メンバーが惜しみない協力をしてくれたことに感謝です。
やはりエンジニアが多く来場するイベントなので、昔の同僚や知人と会場で再開したりして刺激もありました。
ブースを覗いてくれた人達とも楽しく会話できて、graspyを知ってもらうよい機会になったと感じています。
ありがとうございました。

 

PM 中丸

非エンジニアとしてドキドキしながら参加してきました笑 実際にブースで参加者の方や企業の方とお話をする中で、興味を持って頂き「面白いね」と言っていただけたことはサービスに対する生の声を聞くという意味で非常に良い経験でした。Graspyをより良いサービスにして広めていきたいと思います!

 

エンジニア 森山

 Vue作者のEvan Youさんから直接Vue3.0の話を聞くことができ
TypeScriptやNativeなど、Vueの今後のさらなる可能性を感じることができました!
また、他社のVueを使用しているプロダクト開発者の方とも交流ができたのでいい刺激になりました

 

エンジニア 米川

 ブース出展準備で朝早かったり、慣れない名刺交換や営業トークみたいなのをして正直疲れたけど、貴重な経験をさせて頂くことができ凄く楽しかったです!Vueエンジニアの方々とお話できたのは勿論、協賛企業同士の交流もあり、Graspyを多くの方に知ってもらえる機会になり良かったです。

Vue Fes Japanのオーガナイザーやスタッフの皆さま、関係者の皆さま、ありがとうございました!

 

最後に

 株式会社ITプロパートナーズは、Laravel/Vue.js(Nuxt.js)で開発したいエンジニア、デザイナー絶賛募集中です!!少しでも興味のある方は、DMでもWantedlyでもお気軽にご連絡頂けますと嬉しいです。お待ちしております!

www.wantedly.com

 

www.wantedly.com

 

f:id:itpro_yonekawa:20181103150310j:plain

 

毎月恒例!ProLabo(プロラボ)もくもく会を@渋谷10月27日(土)に開催しました! 

こんにちは! ITプロパートナーズ(https://itpropartners.jp/)インターン栗岡です!

普段は、Laravelで自社サービスの開発をしたり、新卒採用関係の業務をやっています。

今回は、先月開催された弊社主催のもくもく会についてレポートして行きます!

ではでは、スタートです〜

 

続きを読む

技術ブログをはじめました

f:id:channaka0531:20181106124407p:plain

皆さん、初めまして!
本ブログの初エントリーを書かさせて頂く
株式会社ITプロパートナーズのちゃん(@channaka0531)と申します。

 この度ITプロパートナーズの最新技術を活用した取り組みを皆さんに知ってもらう為に技術ブログを始めました。
弊社のエンジニアやデザイナーが社内で培った技術的知見や課題、社内の開発体制、弊社運営のイベントやカンファレンスのレポートなど 多岐に渡って技術に関連する情報を発信していきます。

 ▪️ITプロパートナーズとは

簡単にITプロパートナーズについてご紹介します。
弊社は「自立した人材を増やし、新しい仕事文化をつくる」をビジョンのもと、
起業家支援を中心とした下記の複数サービスを展開している企業です。

 ・ITプロパートナーズ事業(起業家・フリーランス支援事業)https://itpropartners.com/
・ITプロクラウド事業(在宅ワーカー支援事業)https://crowd.itpropartners.com/
・ITプロカレッジ事業(オンラインPG教育事業)https://itprocollege.com/
・intee事業(新卒向け就職支援イベント事業)https://intee.jp/student/
・Graspy事業(キャリア育成プラットフォーム事業)https://graspy.jp/

 当ブログを見て頂いた方のお役に立てる様なコンテンツを作っていきたいと思います!

 ITプロパートナーズでは、一緒にサービスを開発してくれる仲間を募集しています。
ご興味がある方は、以下URLよりご応募ください!

www.wantedly.com

www.wantedly.com