新入社員(?)の原と申します。
6月末で仮想プロジェクトが終わり、現在はサービス開発チームでPostfor のフロントエンドでAngularを書いたり、serverlessと戦ったりしています。
仮想プロジェクトではPostforの管理画面をAngularで作りました。

仮想プロジェクトについて

仮想プロジェクトとは、新卒の社員がお題を渡されて、要件定義・設計・実装・リリースまで新卒だけで行うというものです。
私たちのチームのお題はPostforの管理画面で、ユーザー様のご利用状況を確認できたり、ビジネス側の運用が楽になるようなアプリケーションを作りました。

 
 
↑実際の画面
技術構成はフロントをAngular、バックエンドをAWSのServerless Architectureで実装しました。
このブログでは私が担当したフロントエンドについてお話します。

フレームワーク選定

バックエンドがサーバレスという性質上、SPAにすることは必然でした。
しかし私自身1からSPAを作ったことがなく、期間が約1ヶ月と短かったため、どのフレームワーク(ライブラリ)を使うか悩みました。
Vue.jsが比較的習得が簡単だという話を聞き、Vue.jsも触ってみたのですが、結局サービス本体と同じAngularに決定しました。
選定理由としてはPostfor本体でも使っているという他に、公式のチュートリアルが充実していたということがありました。これを一通りやるだけで、

• コンポーネントの分け方
• サービスのDI
• ページ遷移の方法
• バックエンドAPIとのhttp通信
  を学ぶことができ、簡単なSPAを作ることができました。

 
またAngularに決定してから実感したことですが、routerなど必要不可欠な機能が全て入っていたり、ビルドも簡単にできることもありがたかったです。
Angular Materialを使うと、簡単にマテリアルデザインのUIが出来上がることも非常に嬉しいことでした。Angularチームが公式に作っていて安心感もあり、ドキュメントも豊富でわかりやすいです。モーダルやローディングのスピナーなども簡単に実装できました。

RxJSと状態管理

RxJSを使わない？？

AngularはRxJSに依存していて、そのことが学習コストになると言われています。
自分は非同期処理について、PromiseはギリわかるけどRxなにそれという状態でした。
当初は非同期処理はhttp通信の部分くらいだと思っていたので、http通信にはAngularの標準のhttpClientではなくaxiosを使うことでRxJSではなくPromiseでうまいことしようと考えました。
またcognitoやS3にアクセスするためにAmplifyを使ったのですが、これもPromiseを返すので、非同期処理はほとんどPromiseで済むと考えました。

状態管理

しかし状態管理の問題に突き当たり、RxJSの必要性が出てきました。
具体例でいうとログインしているユーザーの属性によって、各コンポーネントの表示内容を切り替える実装のため、ユーザーのデータをどこからでも参照できるようにする必要がありました。
当時はfluxのアーキテクチャを知らなかったため、こちらの記事を参考にさせて頂き、service層にBehaviorSubjectを置いて、データが必要なコンポーネントでsubscribeできるようにしました。
結局RxJSを使う必要が出てきましたが、今回作った管理画面レベルのシンプルなアプリケーションは、Rxのオペレーターを複数覚える必要はなく、promise.then()がobservable.subscribe()に変わったという程度の理解で作ることができました。

仮想プロジェクトを終えて

試行錯誤しながら1からSPAを作れた経験はとても成長できたなと感じています。特に状態管理の問題に突き当たった経験のおかげで、fluxのアーキテクチャの必要性も実感することができました。
配属後はPostfor本体の開発をしています。Postforでは状態管理にngrxを使っていて、状態管理を一元化できる恩恵を感じながら開発をしています。(Redux DevToolsめちゃ便利)
最後に。
フロントエンドエンジニア募集してます！
https://www.wantedly.com/projects/233008