ASP.NET Core 2.0 Razor vs Angular/React/Vue.js: それぞれのフレームワークでToDoアプリを作ってみよう

2024-05-14

ASP.NET Core 2.0 Razor vs Angular/React/Vue.js: プログラミング初心者向け解説

Webアプリケーション開発において、フロントエンドとバックエンドは重要な役割を担います。

フロントエンド: ユーザーが直接操作する画面部分
バックエンド: データ処理やサーバー側のロジックを担当

今回取り上げるASP.NET Core 2.0 RazorとAngular/React/Vue.jsは、それぞれフロントエンド開発における代表的なフレームワークです。それぞれの機能と特徴を理解し、最適な選択をすることが重要になります。

ASP.NET Core 2.0 Razorは、Microsoftが提供するサーバーサイドレンダリングのフレームワークです。HTMLファイル内にC#コードを埋め込むことで、動的なWebページを生成できます。

主な特徴:

シンプルで分かりやすい: HTMLとC#を組み合わせるため、初心者でも比較的学習しやすい
サーバーサイドレンダリング: ページ全体をサーバー側で生成するため、SEO対策に有利
Microsoftとの親和性: .NET FrameworkやASP.NET MVCとの連携がスムーズ

向いているプロジェクト:

企業向けWebアプリケーション
コンテンツ管理システム (CMS)
内部システム

Angularは、Googleが開発したオープンソースのフロントエンドフレームワークです。コンポーネントベースの開発を可能にし、複雑なWebアプリケーションでも効率的に構築できます。

コンポーネントベース: 再利用可能なコンポーネントを組み合わせてUIを構築
双方向データバインディング: データとUIを自動的に同期
ルーティング: ページ遷移を管理

シングルページアプリケーション (SPA)
複雑なUIが必要なプロジェクト

Reactは、Facebookが開発したオープンソースのフロントエンドライブラリです。仮想DOMを用いて高速なレンダリングを実現し、ユーザーインターフェースの開発に特化しています。

仮想DOM: 効率的なレンダリングとパフォーマンス向上
JavaScriptライブラリ: 軽量で柔軟性が高い

SPA
パフォーマンスが重要なプロジェクト

Vue.jsは、Evan You氏が開発したオープンソースのフロントエンドフレームワークです。AngularやReactと比べて学習曲線が緩やかで、初心者にも使いやすいのが特徴です。

シンプルな構文: HTML、CSS、JavaScriptを組み合わせる

プロトタイピング

ASP.NET Core 2.0 Razor、Angular、React、Vue.jsは、それぞれ異なる強みと弱みを持つフロントエンドフレームワークです。プロジェクトの要件や開発チームのスキルセットを考慮し、最適なフレームワークを選択することが重要です。

補足

上記以外にも、SvelteやMithrilなどのフロントエンドフレームワークが存在します。各フレームワークの特徴を理解し、最適なツールを選択することが重要です。

前回は、ASP.NET Core 2.0 Razor、Angular、React、Vue.jsの概要と、それぞれの向いているプロジェクトについて説明しました。

今回は、各フレームワークの特徴をより具体的に理解するために、シンプルなToDoアプリのサンプルコードをご紹介します。

ToDoアプリ

このToDoアプリでは、ユーザーがタスクを入力し、追加、削除、完了を操作することができます。

ASP.NET Core 2.0 Razor

@{
    ViewData["Title"] = "ToDoアプリ";
}

<h1>ToDoアプリ</h1>

<form asp-action="Create">
    <input type="text" asp-for="NewTodo" />
    <button type="submit">追加</button>
</form>

<ul>
    @foreach (var todo in Model)
    {
        <li>
            @todo.Text
            @if (!todo.IsCompleted)
            {
                <a asp-action="Complete" asp-route-id="@todo.Id">完了</a>
            }
            else
            {
                <a asp-action="Delete" asp-route-id="@todo.Id">削除</a>
            }
        </li>
    }
</ul>

Angular

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>ToDoアプリ</title>
    <script src="https://unpkg.com/@angular/core@latest/bundles/core.umd.js"></script>
    <script src="https://unpkg.com/@angular/common@latest/bundles/common.umd.js"></script>
    <script src="https://unpkg.com/@angular/compiler@latest/bundles/compiler.umd.js"></script>
    <script src="app.component.ts"></script>
</head>
<body>
    <app-root></app-root>
</body>
</html>

import { Component } from '@angular/core';

@Component({
    selector: 'app-root',
    template: `
        <h1>ToDoアプリ</h1>
        <input type="text" [(ngModel)]="newTodo" />
        <button (click)="addTodo()">追加</button>
        <ul>
            <li *ngFor="let todo of todos">
                {{ todo.text }}
                <button (click)="completeTodo(todo)">完了</button>
                <button (click)="deleteTodo(todo)">削除</button>
            </li>
        </ul>
    `
})
export class AppComponent {
    todos: Todo[] = [];
    newTodo: string = '';

    addTodo() {
        this.todos.push({ text: this.newTodo, isCompleted: false });
        this.newTodo = '';
    }

    completeTodo(todo: Todo) {
        todo.isCompleted = true;
    }

    deleteTodo(todo: Todo) {
        this.todos = this.todos.filter(t => t !== todo);
    }
}

interface Todo {
    text: string;
    isCompleted: boolean;
}

React

// App.js
import React, { useState } from 'react';

const App = () => {
    const [todos, setTodos] = useState([]);
    const [newTodo, setNewTodo] = useState('');

    const addTodo = () => {
        setTodos([...todos, { text: newTodo, isCompleted: false }]);
        setNewTodo('');
    };

    const completeTodo = (todo) => {
        setTodos(todos.map((t) => (t === todo ? { ...t, isCompleted: true } : t)));
    };

    const deleteTodo = (todo) => {
        setTodos(todos.filter((t) => t !== todo));
    };

    return (
        <div>
            <h1>ToDoアプリ</h1>
            <input type="text" value={newTodo} onChange={(e) => setNewTodo(e.target.value)} />
            <button onClick={addTodo}>追加</button>
            <ul>
                {todos.map((todo) => (
                    <li key={todo.id}>
                        {todo.text}
                        <button onClick={()