JavaScriptの人気のフレームワークは？ React、Vue、Angularについて解説してみた！

SHARE

こんにちは！株式会社ウィモーション、エンジニアリング事業部です。

今回はJavascriptの主要なフレームワークについてご紹介したいと思います。

人気のフレームワークとしてReact、Vue、Angularが挙げられ、日本ではどれも様々なプロフダクトで使用されています。

まずはそれぞれをわかりやすく比較した表を用いて特徴の違いを見ていきましょう。

React、Vue、Angularのそれぞれ特徴についての比較

特徴React.jsVue.jsAngular.js
コンポーネントの記述方法JSXを使用テンプレートを使用テンプレートを使用
データフロー単方向双方向双方向
仮想DOMありありあり
日本コミュニティの規模大規模中規模中規模
設計の柔軟性高い低い低い
アプリケーションの規模中〜大規模中規模大規模

React.js

まず初めにReactについて紐解いていきましょう。

ReactはFacebookが開発したJavaScriptのフレームワークであり、シングルページアプリケーション（SPA）やWebアプリケーションの開発に広く使用されています。

Reactのコンポーネントの記述方法は、JSXを使用して記述します。
（JSXとはJavaScriptの拡張構文であり、ReactにおいてUIを記述するための独自のテンプレート言語です。JSXを使用することで、JavaScript内にHTML風の構文でUIを記述することができます。）

データフローは単方向データフローを採用し、仮想DOMを使用して効率的にレンダリングを行います。ただし、Reactでも双方向データバインディングを実現するために、独自のライブラリやプラグインが提供されています。
（データフローとはデータが入力から処理を経て出力に至るまでの流れを表します。）

設計の柔軟性が高く、カスタマイズが容易であるため、大規模なアプリケーションを構築する場合に適しています。

以下は、Reactを使用したシンプルなTODOリストアプリのコード例です。ぜひ試しに実行してみてください。

import React, { useState } from 'react';

function App() {
  const [todos, setTodos] = useState([]);
  const [inputValue, setInputValue] = useState('');

  const handleInputChange = (event) => {
    setInputValue(event.target.value);
  };

  const handleAddTodo = () => {
    setTodos([...todos, inputValue]);
    setInputValue('');
  };

  return (
    <div>
      <h1>TODO List</h1>
      <input type="text" value={inputValue} onChange={handleInputChange} />
      <button onClick={handleAddTodo}>Add</button>
      <ul>
        {todos.map((todo, index) => (
          <li key={index}>{todo}</li>
        ))}
      </ul>
    </div>
  );
}

export default App;

このコードでは、useStateフックを使用して、TODOリストのアイテムの配列と、入力フィールドの現在の値を追跡しています。handleInputChange関数は、入力フィールドの変更を追跡し、handleAddTodo関数はTODOリストに新しいアイテムを追加します。

Vue.js

Vue.jsはEvan Youが開発したJavaScriptのフレームワークであり、SPAやWebアプリケーションの開発に広く使用されています。
Vue.jsは設計が明確であり初心者でも扱いやすく、他のフレームワークと比較して比較的軽量なため、Webアプリケーションの開発に適しています。

記述方法はテンプレートを使用してコンポーネントを記述する形式となっています。

主要な特徴として以下が挙げられます

  • リアクティブなデータバインディング：Vue.jsは、データとビューをバインドすることができ、データの変更を自動的に検知してビューを更新します。
  • 簡単なテンプレート構文：Vue.jsは、HTMLに似た独自のテンプレート構文を使用して、UIを簡単に記述することができます。
  • コンポーネントベースのアーキテクチャ：Vue.jsは、小さなコンポーネントを組み合わせてUIを作成することができます。これにより、アプリケーションの保守性や拡張性が向上します。
  • 拡張性：Vue.jsは、プラグインやミックスインなどの機能を使用して、アプリケーションの機能を拡張することができます。

以下は、Vue.jsを使用したシンプルなTODOリストアプリのコード例です。ぜひ試しに実行してみてください。

<!-- index.html -->
<div id="app">
  <h1>TODO List</h1>
  <input type="text" v-model="newTodo" />
  <button v-on:click="addTodo">Add</button>
  <ul>
    <li v-for="(todo, index) in todos" :key="index">{{ todo }}</li>
  </ul>
</div>

// script.js
const app = new Vue({
  el: '#app',
  data: {
    newTodo: '',
    todos: [],
  },
  methods: {
    addTodo() {
      this.todos.push(this.newTodo);
      this.newTodo = '';
    },
  },
});

このコードでは、v-modelを使用して、入力フィールドの値とnewTodoプロパティをバインドしています。addTodoメソッドは、TODOリストに新しいアイテムを追加し、v-forディレクティブを使用して、配列の各要素を表示しています。

Angular

AngularはGoogleが開発したJavaScriptのフレームワークであり、SPAやWebアプリケーションの開発に広く使用されています。
Angularはテンプレートを使用してコンポーネントベースのUI開発をサポートしております。

Angularは双方向データバインディングを採用し、仮想DOMを使用して効率的にレンダリングを行います。

Angularは複雑なアプリケーションに適しており、スケーラビリティが高いとされています。

Angular.jsの主な特徴としては、以下のようなものが挙げられます。

  • テンプレート構文：Angular.jsは、独自のテンプレート構文を備えており、HTMLに近い構文を使用してUIを記述することができます。
  • データバインディング：Angular.jsは、データとビューをバインドすることができ、データの変更を自動的に検知してビューを更新します。
  • MVCアーキテクチャ：Angular.jsは、Model-View-Controller（MVC）アーキテクチャを採用しており、アプリケーションのコンポーネントを分離して開発することができます。
  • 拡張性：Angular.jsは、プラグインやモジュールなどの機能を使用して、アプリケーションの機能を拡張することができます。

また、Angular.jsも他のフレームワークと同様に日本の様々なウェブサービスで利用されております。

AngularでもシンプルなTODOリストアプリのコード例を用意しました。ぜひ試しに実行してみてください。

<h1>TODO List</h1>
<input type="text" [(ngModel)]="newTodo" />
<button (click)="addTodo()">Add</button>
<ul>
  <li *ngFor="let todo of todos">{{ todo }}</li>
</ul>

typescriptCopy code// app.component.ts
import { Component } from '@angular/core';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent {
  newTodo: string = '';
  todos: string[] = [];

  addTodo() {
    this.todos.push(this.newTodo);
    this.newTodo = '';
  }
}

このコードでは、[(ngModel)]を使用して、入力フィールドの値とnewTodoプロパティをバインドしています。addTodo関数は、TODOリストに新しいアイテムを追加し、ngForディレクティブを使用して、配列の各要素を表示しています。

jQuery（おまけ）

jQueryは、DOM操作やイベント処理などのJavaScriptのタスクを簡素化するためのJavaScriptライブラリです。jQueryは、シングルページアプリケーション（SPA）やWebアプリケーションの開発に広く使用されています。

以下は、jQueryを使用したシンプルなTODOリストアプリのコード例です。

<!-- index.html -->
<div id="app">
  <h1>TODO List</h1>
  <input type="text" id="new-todo" />
  <button id="add-todo">Add</button>
  <ul id="todo-list"></ul>
</div>

// script.js
$(document).ready(function () {
  const $newTodo = $('#new-todo');
  const $addTodo = $('#add-todo');
  const $todoList = $('#todo-list');
  const todos = [];

  $addTodo.on('click', function () {
    const todo = $newTodo.val();
    todos.push(todo);
    $newTodo.val('');

    const $todoItem = $('<li>').text(todo);
    $todoList.append($todoItem);
  });
});

このコードでは、jQueryを使用して、入力フィールドの値を取得し、TODOリストに新しいアイテムを追加し、配列の各要素を表示しています。

まとめ

以上が、JavaScriptのいくつかのフレームワークの特徴とソースコード例です。それぞれのフレームワークによって、コードの記述方法や機能が異なることがわかります。

どのフレームワークを使用するかは、開発者の好みやプロジェクトの要件によって異なるため、選択する前に十分に調査する選択する前に十分に調査することが重要です。

弊社では社内教育にかなり力を注いでおり、これらのフレームワークも実際にポートフォリオを作れるような実践的な教育をおこなっております。転職をお考えの方は是非お気軽にカジュアル面談へのご応募お願いします。

また、弊社が運営しているフリーランスエンジニアの方に向けたフリーランスエージェントサービスであるフリーランススタンダード（https://free-sta.com/）にてJavascript案件を豊富に抱えております。

フリーランスをお考えの方はフリーランススタンダードへのご登録を是非お気軽にお願いします！

前の記事

【Windows編】 Docker環境構築

次の記事

【Mac編】 Python3 インストール 環境構築