Ashiras, inc. blog

若手による日々奮闘記

フロントエンド未経験の人間が3ヶ月Angularを書いてみた感想

業務では主にVBA,C#,VBA
趣味でrubyを書いていた自分がAngularを書くことになり
Angularを書き始めて3ヶ月程経ったので所感を書く事にしました

Angularを触ってみた感想

フロントエンドと言えば、jqueryによる大量のスパゲッティコード
複雑化しすぎたCSSのせいで、どの部分が原因で表示に不具合出てるのか分からない
のようなイメージを持っていましたが
Angularだとコンポーネント指向なので、ソースコード全体の見通しもよく
苦手なイメージを持っていた、フロントエンドの問題点が解決されていたので
苦手意識を持つ事無く、書く事が出来ました
また、TypeScriptも非常に書きやすく、ES2015等で個人的にjs好きでなかった部分が改善されていたのもよかったです

Angularを書く上で詰まった点

Angularを書いてる上で個人的に困った点を何点か挙げていこうと思います

ドキュメントが大体英語

大体、検索してもstack over flow や Angular.io しか出てこないので
(特にAngular Material関連) google翻訳に頼りつつ苦労しました

@Input()で値が渡されるタイミングが分からない

@Input() で値を受け取ってから処理せずに undefined で落ちる
のような事を何度か経験しました
ただ、これについてはコンポーネントの設計がうまく出来てない事の方が問題だったかなと思っています

そもそもObservableがよく分かっていない

export class Hoge(){
   constructor (private hogeService:HogeService ){
}
public hoge(){
  this.hogeService.getUserID()
    .map(res => res.JSON())
    .subscribe(
      data => {
        this.hogeService.getUserInfo(data.ID)
        .map(user_res => user_res.JSON())
        .subscribe(){
          user_info=>{
            // なんか処理
          },
          error=>{
            // getUserInfoエラー処理
          }
        }
      },
      err=>{
        // getUserIDエラー処理
      }
    )
  }
}

f:id:oniipoooon:20171219163707p:plain ネストが…深い…っ
Observableの書き方をよくわかっておらず上記のようなコードを書いていました
RxJS は今後の課題です

今後の課題

  • RxJS の書き方
  • コンポーネント指向の際の設計
  • router guard
  • Oauth2認証周り
  • Angular developer guidで勉強し直す

おまけ DatePickerで詰まった話

仕事でAngular Material Datepicker を使用する機会があり、使用してみたところ
chrome や safari だと 2017/12/16 のように /区切りで表示されるのですが
IE11 だけ 2017年12月16日 のように年月日で表示される事がわかりました
ソースコードを読んでみたところ、表示の際に NaitiveDataAdapter クラスの format 関数を呼び出している事が判明したため
NaitiveDataAdapter を継承した MyDateAdapter を作成し、 format 関数をオーバライドする事にしました

export class MyDateAdapter extends NativeDateAdapter {
  constructor() {
    super('ja'); // デフォルトだとアメリカ時間になっているので日本にする
    this.setLocale('ja');
  }
  // format関数を上書き
  format(date: Date, displayFormat: Object): string {
    const day = date.getDate();
    const month = date.getMonth() + 1;
    const year = date.getFullYear();
    return year + '/' + ('00' + month).slice(2) + '/' + ('00' + day).slice(2);
  }
}

その後、format 関数を上書きした MyDateAdapter を DateAdapter にインジェクションする事によりIE11でも/区切りで表示されるようになりました

    { provide: DateAdapter, useClass: MyDateAdapter }, // DateAdapterに対してMyDateAdapterのインスタンスを使用するようにする