🅰️

AngularエンジニアのためのReact入門:クラスから関数へ

に公開

はじめに

Angularでクラスベースのコンポーネント設計に慣れているエンジニアにとって、Reactの「関数型コンポーネント」は一見して異質に映るかもしれません。この記事では、Angular開発者の視点から、Reactの思想と構造を分かりやすく解説していきます。


クラスベースと関数型の違い

Angularでは次のようなクラスベースの構造が基本です:

@Component({...})
export class HelloComponent {
  name = 'Angular';
  constructor() {}

  greet() {
    return `Hello ${this.name}`;
  }
}

Reactではこのようになります:

function HelloComponent() {
  const [name, setName] = useState('React');
  return <div>Hello {name}</div>;
}

ポイント比較

項目 Angular(クラス) React(関数)
状態管理 this.property useState
ライフサイクル ngOnInit()など useEffect()
DI サービスインジェクション コンテキスト or カスタムフック
テンプレート HTML + バインディング JSX(JavaScript + HTML)

Reactの基本構造を分解

useState:状態管理

Angularのthis.count = 0のような状態管理は、ReactではuseStateで実現します。

const [count, setCount] = useState(0);

useEffect:副作用処理(ngOnInit的なもの)

useEffect(() => {
  console.log('初回レンダリング時に実行');
}, []);

依存配列を指定することで、実行タイミングを制御します。


Reactの思想:UIは状態の関数

Reactでは「UI = f(state)」という原則があります。

  • 状態が変われば、自動的にUIが再描画される
  • 明示的にDOM操作する必要がない

これはRxJSのようなリアクティブな考えにも近いです。


よくある疑問

Q1. コンポーネント間通信はどうやるの?

  • 親から子:propsで渡す
  • 子から親:コールバック関数をpropsとして渡す
  • グローバル:Context APIやRedux、Zustandなどを使用

Q2. サービスやDIはどうする?

  • ReactにはDIの概念はありません
  • 代わりに「カスタムフック」や「Context API」で共通ロジックを分離します
// useUser.ts
export const useUser = () => {
  const [user, setUser] = useState(null);
  useEffect(() => {
    fetchUser().then(setUser);
  }, []);
  return user;
}

まとめ

観点 Angular React
主な設計 クラスベース 関数ベース
テンプレート HTML + TS JSX(JavaScript内にHTML)
データバインディング 双方向 単方向(親→子)
状態管理 クラス内のプロパティ useStateなど
DI 組み込みあり なし(フックで代用)

終わりに

Reactに初めて触れるAngularエンジニアは、関数型の柔軟さに戸惑うかもしれませんが、一度理解すれば保守性や再利用性の高いコードを書くことができます。関数型思考を受け入れて、新しい視点でUI設計を楽しみましょう!


おまけ:TypeScriptとの相性も◎

ReactはTypeScriptとの親和性も高く、型安全な開発も可能です。Angularの型重視の文化もそのまま活かせます。

Discussion