初めまして20新卒エンジニアの水谷です。
入社してから一度も出社しておらずリモートで勤務しているため、結構前から運動不足を感じています。
入社してからはScala、Vueの研修を受け、部署に配属された後にプロダクト新規価値開発のチームでプロダクト開発の業務を行なっています。
今回は実務で学んだScalaでのクリーンアーキテクチャ、VueのAtomic Designについて思ったことを書いていきます。
クリーンアーキテクチャについて
過去に弊社のブログでも記事が書かれているので下記を参照してください。
簡単に説明するとビジネスロジック部やデータを取得する部分がはっきりと分かれている設計だと思っています。
弊社でクリーンアーキテクチャの設計で実装されている部分は、私が所属しているチームで開発を行なっているAppDriverのバックエンドで利用されています。
良かったところ
出典: https://blog.cleancoder.com/uncle-bob/2012/08/13/the-clean-architecture.html
クリーンアーキテクチャでは依存のルールが大切で同心円の内側から外側のデータを参照しないようにする必要があります。このことによってデータベースにアクセスする部分はデータベースにアクセスする処理を、ビジネスロジック部分ではビジネスロジック部分のことに集中できることがいいところだと思いました。
例えば、データを取得する処理を呼び出す際には、呼び出し側はデータをDBから取得するのかfirestoreから取得するのかということを意識せずに扱えます。これはデータソースが変わった場合にも呼び出し側は、コードを変える必要がなくなり、実際にデータを取得する部分だけを変更すればいいので、変更が簡単に行えるというメリットがあるのかなと思いました。
悩んだところ
単純にクリーンアーキテクチャの理解がうまくできなかったところです。このブログを書いている時にもあまり理解がうまくできていないなと感じています。その要因としてはすでにプロダクトコードにクリーンアーキテクチャで実装されている部分があり、新規で開発する時にもそれを真似ることでうまくいったことです。理解せずとも既存で実装されている部分を真似ることでクリーンアーキテクチャになったので、これはうまいこと処理部分を分割している設計が優秀なところだと思います。この辺りはまた学び直す必要があるなと思っています。
Atomic Designについて
Atomic Designについては下記が個人的にわかりやすかったです。
https://design.dena.com/design/atomic-design-%E3%82%92%E5%88%86%E3%81%8B%E3%81%A3%E3%81%9F%E3%81%A4%E3%82%82%E3%82%8A%E3%81%AB%E3%81%AA%E3%82%8B
出典: https://atomicdesign.bradfrost.com/chapter-2/
簡単に説明すると小さな部品ごとにコンポーネントを作成していくことです。
Atomic Designには最小単位からAtoms、Molecules、Organisms、Templates、Pagesというパーツがあります。
- Atoms: 入力フォームやボタン
- Molecules: Atomsで構成されたもの
- Organisms: ヘッダーのようなAtomsとMoleculesで構成されたもの
- Templates: Organismsを組み合わせて画像などが穴あきのもの
- Pages: 完成した画面
AppDriverではフロントエンドでVueを採用しており、Atomic Designで設計されています。実際に複数のメディアに導入をしてもらっています。
良かったところ
Atomic Designで設計されていてよかったところとしては、小さい単位でコンポーネント化されており、そのAtomsやOrganismsが複数のところで必要になった時には新しく作り直す必要がなく、そのコンポーネントを呼び出すだけで使えるようになることです。このことでコード上で同じような処理を書いている部分がなくなります。
また、デザインやカラーの部分でもいいところがあります。デザインの部分では、AtomsやOrganisms単位で修正が効くので、小さく開発ができることによってその部分だけに集中して開発を行えています。カラーについては、弊社ではコンポーネントごとにカラーを定義できるようになっており、文字の色や背景のカラーを変更できるようになっています。
悩んだところ
複数のメディアに導入してもらっているため、メディアによってデザインが違うことがあります。このため、同じようなtemplateファイルが多くなっており、どれを使えばいいかがわからないということがありました。コードを見ることで解決は可能ですが、それらの違いがまとまったドキュメントなどがあれば簡単にどれが最適なものなのかが一目でわかっていいのかなと思います。
また、新規の画面を作成する時や新しい画面や機能をAtomic Designにする時にはどの単位でコンポーネントにするべきかということです。この部分に関しては先輩社員と議論を行い、解決しました。
終わりに
このブログを書いている時に気づきましたが自分があまり理解できていないことが認識できました。特に、クリーンアーキテクチャについては難しく依存性の注入などについても理解できていない感じです。
4月から2年目になりますが、こんな調子で大丈夫なのかと不安になってきました。
2年目ということなので、サービス開発で触れることが多いクリーンアーキテクチャやAtomic Designについてこれまで以上に頑張っていきたいと思います。
