🅰️
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