10
1

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

AngularAdvent Calendar 2023

Day 7

自身が経験したAngular7〜Angular16までの変遷について

Last updated at Posted at 2023-12-06

Angular Advent Calendar 7日目の記事です。

はじめに

私は元々バックエンドエンジニアで長く働いていましたが、ここ5年はフロントエンジニアとして働いています。(とはいえ、最初の2年は、あまりフロントを触って無いですが)

5年間で3つの現場を経験しAngularは7で始まり、現在は16を使っています。

その3つの現場で経験した内容について紹介していきます!

大手携帯会社のNW監視(Angular 7-10)

この現場で初めてAngularに触れました。
他にもrxjsやNgrxも使ってたので、最初の学習コストが高く、苦労したのを今でも覚えています。

この状態では、チケットをこなすことができないので、結局バックエンドでJavaをひたすら書いてました。

ただ、コードはあまり分からなくても仕様面などをチェックする名目でフロント(Angular)のコードレビューはやらせてもらってました。

で、少し慣れた頃に、Angular7から8にアップデートする話になり、他の方のサポートありで、私が対応することになりました。

Angular Update Guideを見ながらアップデートしたんですが、アップデート自体はスムーズに終わったので、少し安心して、起動したら、たくさんのエラーが出て、絶望したのを覚えてます。

正常に起動できるまでが一苦労で、ようやく起動できて少し動作確認した感じ問題なさそうだったので、念の為QAにも見てもらったら、ちらほら動きが怪しいところがあり、結果、全画面テストしてもらい、追加で修正したのも覚えてます。

その後、8から9は別の人がアップデートしたんですが、7から8の時よりは、エラーが少なかった印象です。
※個人的なイメージだとバージョンが上がるごとにアップデートはやりやすくなってそう。

ポイント

  • 昔のAngularは、アップデートが結構大変
  • Angularの習得は大変(Ngrx,rxjsも大変 もちろん個人の能力による)

学校教育関連(Angular 12)

次の現場では、Angularに触れる機会が少なかったので、次の現場では、フロントエンドメインのところを選びました。

こちらは、システムのリプレース案件で、現在動いているものをAngularに置き換えていきます。

まず、自分が担当する機能のリポジトリを作成して、そこにリプレース用のコードを書いていきます。

まだまだAngularに慣れていないなか、リポジトリから作成するのは非常に良い経験でした。

分からないことが多かったので、もう一人の(若いけど、めちゃくちゃ出来る)エンジニアに色々聞きました。

私が担当したのはカレンダー機能で、ライブラリを使ってたので、Angularよりは、ライブラリの使い方に苦労したのを覚えてます。

あとrenovateが、まあまあコケてたな〜(つらかったな〜)

カレンダーライブラリを使うのに苦労したけど、コード書く時間が比較的多く取れたのと、分からないことを聞ける環境は良かった。

Angularが少し出来るようになった気がする。

ポイント

  • リポジトリ作るところから経験できたのは良かった
  • Angularを習得するにはたくさんコードを書く

契約管理(Angular 13-16)

現在の現場は、さらにコードを書く時間が増えた。
打ち合わせもほとんどないので、ほぼ全ての時間でコードを書いてる。

また、最初の現場以来、Ngrx, rxjsを使ってて、さらにNxも使ってる。

この現場は、基本的に最新のAngularに追従しており、アップデートする際は、nx migrateでAngular以外のNgrx、rxjsや他のライブラリもまとめてアップデートしてます。

さらに、テックリードの人が、「新しいバージョンでこんなことが使えるよ」と、情報発信してくれるので助かる。

なので、ここではAngularがアップデートするたびに、コードの書き方も新しくなっていった。

Angular 15

15といえば、Standalone Componentでしょう。

15に上げた後に、新しいアプリを開発するチャンスがあって、全てStandaloneで開発した。(apps/**/app.module.tsなし)

Standaloneのお陰で、そのComponent見れば、何がimportされてるか分かるし、テスト側はimportが不要で、非常に良かったです。

Angular 16

16は、やはりSignalですよね!

まだまだ、書けるところは限定的ですが、それでも少しずつ書いてます。
初めて書いた時のポスト

あと、Self-closing tagも結構良くて、いっぱいつかってます!

<app-component></app-component> // <- これが

<app-component /> // <- こう出来る

Angular 17

まだ、導入してないですが、Control Flow激アツですよね!!

ポイント

  • Angularアップデートの情報を社内共有してくれると新しい機能を知れて使う機運が高まる
  • Angular15のComponent Store良い
  • Angular16のSignal, Self-closing tagも良い
  • Angular17のControl Flow激アツ
  • 最近のAngularアップデートはすごい(やらなきゃ損)

まとめ

今までの現場で経験して、苦労した点や、思うところを記載しました。

私の見解としては、Angularのバージョンが上がるほど、アップデートは簡単になるのと、最近のAngualrアップデートはアツいということです!

半年に1回、バージョンが上がりますが、新しい機能も使えるし、アップデートは大変じゃなくなると思うので、どんどんバージョンアップするのが良さそうです!!(最近自分じゃやってないので、自分でやったら大変かもしれないけど。。。)

明日は、@KOHETsさんです!

10
1
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
10
1

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?