EmotionTechテックブログ

株式会社Emotion Techのプロダクト開発部のメンバーが、日々の取り組みや技術的なことを発信していくブログです。

フロントエンドをAngularに一本化した話

f:id:kneda:20220214112509p:plain

はじめに

こんにちは、フロントエンドエンジニアのねだです。 いきなりですが、タイトルの通りです。

弊社は元々フロントエンド環境に主にAngularを利用しており、Reactでの採用の募集も行っていましたが、当面Angularに一本化する方針に転換しました。

この事はもちろん他のライブラリについて否定的な意図があることを意味するわけではありません。現状のGitHub Star数などを確認しても、より新しいフロントエンドでの設計や開発について知るためにはReactを追い続ける必要がある現状がありますし、いわゆる通常のWEBサイトをカジュアルにSPA化する場合にはVueが入りやすいです。ですが、それを理解した上での判断になります。

JavaScript ライジングスター 2021

Angularのメリット

Angularはもともと、2009年にAngularJSとしてスタートし、その後、後方互換性を切ることで2.0からスタートしました。それから半年程度のサイクルでアップデートを繰り返し、最新version13(2022年1月現在)が昨年の11月3日にリリースされています。

Angularはフルスタックフレームワークを謳っていることと、Typescriptを前提に作られていることが大きな特徴です。

現状、フロントエンドの多くのシーンにおいて、JavaScriptを用いるのであれば、TypeScriptが前提となってきています。ゼロコンフィグで最初からTypescriptで書くことができるのは大きなメリットだと言えそうです。

また、特色としてはRxJSという非同期処理ライブラリがビルドインされており、Observableパターンを採用していることが挙げられます。

状態が変化する方が「通知」をする仕組みを持つことで、「いつ来るかわからないデータの状態を通知を元に監視する」ことが出来、APIからの複合的なデータ取得や、複雑なデータ取得を行いたいときに効力を発揮します。

そのほかにも

  • AngularJS → Angular2の時に破壊的な変更はあったものの、それ以降は提供機能が比較的安定しており、後方互換性が担保されている

  • Webアプリケーションフレームワークを謳っているため、ReactやVueに比べ公式関連のライブラリが提供している機能が多く、品質が保証されたプラグインを活用でき、個別に探さなくても良い。また保守性が担保されている状況が期待しやすい。結果として基盤が安定しやすい

  • Typescriptでサーバーサイドプログラミングを行おうとすると選択肢になりやすいNestJSがAngularの影響を強く受けており、サーバーサイドも近い感覚で書くことができる

  • 昨今のAngularはnxというライブラリを使えば全部入りでスタートできて、サーバー側まで全部tsでいける世界になっている

上記のような特徴によって、個別のライブラリの導入にあたって考慮しなければいけないケースが減っていますし、webアプリケーションを製品と見た時に保守性や管理労力の面で問題を生じにくく、比較的開発に専念できる環境を作りやすいライブラリだと考えています。

弊社プロダクトは、もともと、Angularで作られたという経緯もあり、ある程度ライブラリに慣れ親しんでいるという前提はあります。それでも大規模なプロダクトとは言い難いものの、中規模程度のスケールはあると考えられ、ビジネス観点でも拡張性や保守性が求められており、相性は良い方であると感じています。

私個人のAngularとの出会い

私自身は、ReactとVueにそれぞれ触れた後にAngularに触れました。 当初の印象としては、ReactとVueのようにわかりやすい押しがあるライブラリに比して、やや地味に感じていたといましたし、RxJSって必要なのか?って正直感じていた部分もあります。

ですが、使っているうちに親しみを感じている部分もありますし、TypeScript親和性の高さやAnglar-cliの機能など、じっくりと染み渡るような良さがAngularにはあるようにも感じています。

また、Angularは学習コストや学習勾配のことが挙げられることも少なく無いですが、実装に関して一定の思想があり、大きく逸脱しているわけでは無いため、費やしたコストがそれほど無駄にはならないと感じています。(https://lacolaco.hatenablog.com/entry/2019/02/19/001547)

そう考えると安定した基盤、という意味合いが大きく感じられるようになってきました。

決断に至った経緯

プロジェクトとAngularには一定のシナジーがあることは述べました。 ただ、ReactやVueなどに比較すると初期の段階での学習勾配が高めなこともあり、Angularユーザーはそれらのライブラリのユーザー数に比べるとやや劣る面もあり、弊社も採用に苦慮していた時期があったというのが正直なところです。

一時期、フロントエンドチームをワンオペで回していたこともありましたし、当時は他のライブラリのことが頭をよぎった瞬間も無いとは言いません。

ですが、ある時からAngularに関心のあるフロントエンドチームの仲間達が増えはじめ、現在では新規施策を行っていく選択肢として、Angularを使い続けることは悪くないものと変わってきました。

そして、新規施策について思案するこのタイミングで、開発部部長の吉田から「今後のプロジェクトは2年間業務に耐えうる設計で」という方針が提示され、それが選択を後押しすることになりました。

未来のことはわかりませんし、選定の判断はどうしてもユーザーシェアに流れがちです。フロントエンドのトレンドも移り変わりが激しいですが、システムライフサイクルを一度2年と規定した場合に、Angularは向こう2年間はコード品質が保証されているように思えましたし、もっと長い期間動くフロントエンド環境を提供できるように感じられました。

また、メンバーのモチベーション的にも良い判断に感じられました。 結果として今このような形で今回の判断をお知らせするブログを書いています。

まとめ

論旨としては

  • Angularはいいぞ
  • どうせなら少しは特色出して振り切った方が開発はハッピーになれるかも?
  • 多少尖った判断をするのにはシステムのライフサイクルって軸がとても大事

といったところでしょうか?

Emotion Techでは今後も継続してフロントエンジニアとしてAngularを書いてくださる方を募集中です。より現在のビジネスに寄り添ったサービスの改修を実施中でもあり、フロントエンドのユーザー体験の改善や見直しを一緒に考えていくメンバーも募集中です。

現在、フロントエンドチームは手前味噌ではありますが

  • フロントエンドチームにAngular精通者がいること。
  • モブプロやコードレビューが活発化し始めており、相談事のコミュニケーションもフラットに行える空気になってきている。(https://note.com/emotiontech_inc/n/n7343a6ac171c )
  • 会社的にも部署や担当領域での対立を感じることがなく、デザイナーやサーバサイドエンジニアの方々ともコミュニケーションが行いやすい。

など、伸び伸びと仕事ができる環境になってきています。

無論、私がjoinした当初からそのようなあり方ではなかったのですが、今日より明日の方がより良い世界が拡がっているんじゃないか?と感じられる瞬間の多い職場です。

この記事や他の記事を見て弊社に興味をもっていただけましたら、ご応募お待ちしております。

herp.careers

herp.careers

herp.careers