AngularエンジニアがReact,Next.jsを学び始めた話

こんにちは、私は現在フロントエンドエンジニアとして開発に勤しんでいます！
普段の業務ではAngularを用いて画面開発をしているのですが、Reactを学び始めることになりました。
今回はその経緯や実際に学び始めてみて気づいたことを書き綴ろうと思います。

経緯

Angularとの出会い

私が配属されたフロントエンド部門ではAngularが採用されていました。
これが私とAngularの出会いです。

Angularはフルスタックのフレームワークであるため、最初に学ばなければならないことはReactやVue.jsと比較すると多いです。
ただ、フロントエンドエンジニアとして活動する上で必要な技術を一通り自然に触ることが可能です。
そのため、包括的なスキルを身につけるには適していると考えています。

そういった意味では、初心者にもおすすめできる技術だと思います。
個人的には最初のフレームワークがAngularでとても満足しています。

Reactとの出会い

3年経った頃、ふと転職を考えるようになり、転職活動を始めました。
そこで初めて、Angularを採用している企業の少なさを知りました¹。
特に私が志望していたWeb系企業やスタートアップではReactが主流となっていることに気づきました。

Angularは間違いなく魅力的なフレームワークです。
一方で、将来的なキャリアを考えた時、AngularよりReactの開発経験の方が市場価値が高まりつつあるのではないかと感じました。
そのため、転職活動と並行してReactの学習を始めました。

AngularとReact,Next.jsを学び始めて気づいたこと

フックってすごい！

useState()みたいなやつです。
関数コンポーネントで状態管理を容易に実現できる機能です。
以下のコードは実際にuseState()を使ってみたコードです。

import { useState } from 'react';

function Counter() {
  const [count, setCount] = useState(0); // 初期値0の状態を宣言
  const handleClick = () => setCount(c => c + 1);

  return (
    <div>
      <p>Count: {count}</p>
      <button onClick={handleClick}>Increment</button>
    </div>
  );
}

実はAngularでもSignalを使うことで、似たような状態管理が簡単にできます。
（もしくは外部ライブラリのRxjsのBehaviorSubject()でも可能）

// counter.component.ts
import { Component, signal } from '@angular/core';

@Component({
  selector: 'app-counter',
  template: `
    <div>
      <h1>Count: {{ count() }}</h1>
      <button (click)="increment()">Increase Count</button>
    </div>
  `,
})
export class CounterComponent {
  // Signalを定義
  count = signal(0);

  // ボタンを押した際にカウントを増加
  increment() {
    this.count.update(this.count() + 1);
  }
}

ただ私が所属していた組織では、大規模プロジェクトを扱っていたため、アップデートには非常に慎重でした。
そのため、私が転職活動を始める頃にようやくAngular Signalsが正式に導入されたバージョンにアップデートされました。
故に、私は業務上でAngular Signalsを利用した経験はありません。

少し調べてみると、ReactでuseState()のような関数コンポーネント向けのフックが追加されたのは2019年とのことです。（クラスコンポーネント向けだともっと前？）
5年も前からこのような機能を使えるようにしていたのは、すごいな〜と思いました。

フォルダベースルーティングってすごい！

個人的には全然知らない技術だったので、これを知った時はとてもびっくりしました。

Angularでは、基本的にはコード単位でルーティングを定義することになります。
部分的なコードですがこのような感じ。

const routes: Routes = [
  { path: '', component: HomeComponent },
  { path: 'about', component: AboutComponent },
];

一方Next.jsではApp Routerを用いることで、パスとコンポーネントの対応関係が/app配下のフォルダー階層によって決まります。
すなわち、フォルダー構成そのものがルーティング設定になります。

学習量

Angularはフルスタックなフレームワークであるため、React+Next.jsと比較すると学ばなければならない知識が非常に多いです。
また、メジャーアップデートが半年に1回されるので、新しい知識もどんどん吸収していかなければなりません。
もっというとマイナーアップデートでも多くの有用な新機能が追加されるので、それも吸収していかなければなりません。

ただ学ぶべき量は多いですが、バックエンドとの連携やビジネスロジックの実装といった幅広い技術を一通りカバーできます。
多くのスキルを一度に習得できるのはAngularの利点なのではないかなと考えます。

最後に

Reactを学び始めて、同じフロントエンド向けのフレームワークでも、ここまで書き方やアプローチが異なるのかと改めて感じました。
AngularとReactの違いについては、まだ深い部分まで理解しているわけではありません。
これからも学び続け、いつかはその違いを詳しく語れるようになりたいと思っています。

1. React,Vue.jsと比較すると少ないという意味です。Angularは大規模プロジェクトに向いているという特性から、日系の多くの大企業に採用されている気がします。 ↩