AWSの話題を中心に、日々の業務やプログラミングの徒然を綴るエンジニアブログです。

HANDS LAB

HANDS LAB ENGINEERS BLOG

ハンズラボエンジニアブログ

カテゴリー: JavaScript

SPA初心者が管理画面をAngularで作った話

Pocket

新入社員(?)の原と申します。

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

Pocket

ブラウザのLocalStorageにデータ保持させてみた

Pocket

初めましてこんにちは、今年度新卒入社しました大作です。

大学時代では、Hot Soup Processorというスクリプト言語で簡単なゲーム開発しかしておらず、本格的なプログラマとしてデビューしてからまだ間もないヒナ鳥です。今は技術レベルや理解がまだ低いですが、これから日々勉強していきたいと思います!(ぴよぴよ)

 

今回やること

今、新人研修ではHTML, CSS, JavaScript(jQuery)を用いてアプリ制作をしているのですが、

  • ブラウザのリフレッシュしても入力したデータを保持する
  • 保存するデータの中身は複数項目がある(日付とか件名とか)

 

以上の機能要件を満たすものを作っており(この時点で作っているものが大体想像つくであろう)、他の同期がサーバを用いた方法で紹介していますが、こちらでは入力したデータをブラウザのLocalStorageに保存する方法で実践します。

 

そもそもLocalStorageって何なんだ?

私自身の復習がてら調べました。

クライアント側のローカル環境にデータを保存するWebStorageの仕組みの一つで、もう一つにSessionStorageがある。それぞれの特徴は以下の通り。

  • LocalStorage‥‥永続的に保存される
  • SessionStorage‥‥ブラウザを閉じるまで保存される

 

LocalStorageが主に使用されているのがショッピングサイトの商品履歴だそうな。

 

 

やってみた実践コード

保存データは、配列の中にプロパティがそれぞれ入ったオブジェクトが入るようにします。ここでは、追加日付、名前、ラジオ(期限or予定)を入れてます

HTML

JavaScript

取得処理で、データの中身が空だった場合にparseしたものを直接配列に入れると、配列の中身を読めないエラーを吐いてしまうため、if文で制御して入れないようにしました。(この問題に同期から助言を頂きました。感謝!)

まとめ

学び始めは理解に苦しみましたが、やっていくうちになんとかLocalStorageを用いたデータ保存が出来るようになりました! 感想としては、LocalStorageへの保存は簡単ですが、オブジェクトデータから中身を取得するのがとても大変でした。

次はAjaxでも出来るようにしてみようかと思います・・・・

 

Pocket