新しい Web アプリケーションに React ではなく Angular または Vue を選択する理由

これまでのキャリアを通じて React、Angular、Vue の複雑な部分を扱ってきた者として、私はこれらの人気のフロントエンド フレームワーク間の微妙な違いを理解するようになりました。この記事では、次回の Web アプリケーション プロジェクトで React よりも Angular または Vue を選択すると、より構造化されスケーラブルなアプローチが実現できる理由について説明します。

1. テンプレート

Angular と Vue のテンプレートは、ロジックとプレゼンテーションの懸念事項を明確に分離し、よりクリーンなコードとメンテナンスの容易さを実現します。JavaScript ロジックがマークアップと絡み合うReact の JSX とは異なり、Angular と Vue のテンプレートは厳密な分離を強制します。例を挙げてこれを説明しましょう。

リアクトJSX:

 return ( <div> {array.map(item => { if (condition) { return <p>{item}</p>; } else { return <span>{item}</span>; } })} </div> );

Angular テンプレート:

 <div *ngFor="let item of array"> <p *ngIf="condition; else other">{{ item }}</p> <ng-template #other><span>{{ item }}</span></ng-template> </div>

Vue テンプレート:

 <div v-for="item in array"> <p v-if="condition">{{ item }}</p> <span v-else>{{ item }}</span> </div>

2. フォームコントロールのバインド:

Angular と Vue は、フォーム コントロールをバインドする簡単な方法を提供しているため、複数のフィールドを持つフォーム データを簡単に管理できます。テキスト入力、ラジオ ボタン、チェックボックス、選択ドロップダウンの 4 つのフィールドを持つフォーム オブジェクトを作成しましょう。

角度:

 @Component({ selector: 'app-form', template: ` <form> <input type="text" [(ngModel)]="formData.text" placeholder="Text Input"> <br> <input type="radio" [(ngModel)]="formData.radio" value="option1"> Option 1 <input type="radio" [(ngModel)]="formData.radio" value="option2"> Option 2 <br> <input type="checkbox" [(ngModel)]="formData.checkbox"> Checkbox <br> <select [(ngModel)]="formData.select"> <option value="option1">Option 1</option> <option value="option2">Option 2</option> </select> </form> `, }) export class FormComponent { formData = { text: '', radio: '', checkbox: false, select: '', }; }

ビュー:

 <template> <form> <input type="text" v-model="formData.text" placeholder="Text Input"> <br> <input type="radio" v-model="formData.radio" value="option1"> Option 1 <input type="radio" v-model="formData.radio" value="option2"> Option 2 <br> <input type="checkbox" v-model="formData.checkbox"> Checkbox <br> <select v-model="formData.select"> <option value="option1">Option 1</option> <option value="option2">Option 2</option> </select> </form> </template> <script> export default { data() { return { formData: { text: '', radio: '', checkbox: false, select: '', }, }; }, }; </script>

反応:

 const FormComponent = () => { const [formData, setFormData] = useState({ text: '', radio: '', checkbox: false, select: '', }); const handleChange = (e) => { const { name, value, type, checked } = e.target; setFormData({ ...formData, [name]: type === 'checkbox' ? checked : value, }); }; return ( <form> <input type="text" name="text" value={formData.text} onChange={handleChange} placeholder="Text Input" /> <br /> <input type="radio" name="radio" value="option1" checked={formData.radio === 'option1'} onChange={handleChange} /> Option 1 <input type="radio" name="radio" value="option2" checked={formData.radio === 'option2'} onChange={handleChange} /> Option 2 <br /> <input type="checkbox" name="checkbox" checked={formData.checkbox} onChange={handleChange} /> Checkbox <br /> <select name="select" value={formData.select} onChange={handleChange}> <option value="option1">Option 1</option> <option value="option2">Option 2</option> </select> </form> ); };

React では、Formik や React Hook Form などのライブラリを使用せずにフォームの状態を管理するには、 useStateを使用して状態変数を設定し、フォーム フィールドが変更されるたびに状態を更新するハンドラー関数を記述する必要があります。これにより、定型コードが追加され、特に複数のフィールドがあるフォームでは複雑さが増す可能性があります。フォーム ライブラリは高度なフォーム処理機能を提供しますが、プロジェクトに統合するには追加の設定と学習が必要です。

私の意見では、特にフォームの処理がフロントエンド開発者の典型的な日常業務である場合、開発者はフォーム ライブラリの選択や追加のドキュメントの学習に時間を費やしたくないかもしれません。Angular と Vue の組み込みフォーム処理機能は、よりシンプルで統合されたアプローチを提供し、開発者が追加の依存関係を必要とせずにアプリケーションの構築に集中できるようにします。

3. 子コンポーネントへのアクセス:

Angular のViewChild 、Vue の refs、React のuseImperativeHandleは、子コンポーネントと対話するためのメカニズムです。3 つともこれを実現する方法を提供していますが、Angular と Vue は、React のドキュメントではあまり推奨されていない React のuseImperativeHandleと比較して、よりクリーンで直感的なアプローチを提供しています。次に例を示します。

角度:

 @Component({ selector: 'app-parent', template: ` <app-child #child></app-child> <button (click)="callChildMethod()">Call Child Method</button> `, }) export class ParentComponent { @ViewChild('child') childComponent: ChildComponent; callChildMethod() { this.childComponent.someMethod(); } }

ビュー:

 <template> <div> <child ref="child"></child> <button @click="callChildMethod">Call Child Method</button> </div> </template> <script> import Child from './Child.vue'; export default { components: { Child, }, methods: { callChildMethod() { this.$refs.child.someMethod(); }, }, }; </script>

反応:

 const ChildComponent = forwardRef((props, ref) => { useImperativeHandle(ref, () => ({ someMethod() { // Method logic }, })); return ( <p>I am a child</p> ); }); const ParentComponent = () => { const childRef = useRef(null); // Access child component's method const callChildMethod = () => { childRef.current?.someMethod(); }; return ( <div> <ChildComponent ref={childRef} /> <button onClick={callChildMethod}>Call Child Method</button> </div> ); };

React では、関数コンポーネント パラダイムは、Angular クラス コンポーネントや「methods」プロパティを持つ Vue コンポーネントのように本質的に「メソッド」を提供しませんが、 useImperativeHandleフックを使用せずに子メソッドにアクセスするためのより簡単な方法が求められます。useImperativeHandle useImperativeHandle明確ではない可能性があり、子コンポーネントをforwardRef関数でラップする必要があります。子コンポーネント自体を変更せずに子メソッドにアクセスできる Angular や Vue とは異なり、React では同様の機能を実現するためにこの追加の設定が必要です。

Vue についても触れておきたいことがあります。Composition API は Vue の比較的新しいテクノロジーであり、子コンポーネントへのアクセスは上で説明したものとは少し異なります。ただし、すべてのチームがプロジェクトに Composition API を実装しておらず、私が説明したアプローチを使用しているわけではないと思います。

私が考えるに、React ではなく Angular または Vue を選択すべき 3 つの理由について説明しました。