ReactとAngular2の使い方やコードの違いをコンポーネント単位で比較する：モダンなフロントエンド開発者になるためのSPA超入門（2）（1/4 ページ）

フロントエンド開発のアーキテクチャである「SPA（Single Page Application）」について、開発に必要となる各種フレームワークの特徴や作り方の違いなどを紹介する連載。今回は、ReactとAngular2を使い、SPA開発のイメージをつかむとともに、それぞれの違いを明らかにしていく。

[千葉達仁, 日野達也，三菱総研DCS]

ReactとAngular2サンプルアプリ開発を通した比較

今回の主な内容

• スターターツールとは
• スターターツールでReactをインストール
• スターターツールでAngular2をインストール
• サンプルアプリの全体構成（共通）
  • Reactアプリのディレクトリ構成
  • Angular2アプリのディレクトリ構成
  • 開発言語
• Reactコンポーネントの作成
• Angular2コンポーネントの作成
• 次回は、状態（データ）管理やスタイルの適用、テストで比較

　フロントエンド開発のアーキテクチャである「SPA（Single Page Application）」について、開発に必要となる各種フレームワークの特徴や作り方の違いなどを紹介する本連載「モダンなフロントエンド開発者になるためのSPA超入門」。

　前回の「ゼロから学ぶ!　Single Page Applicationの特徴と主なフレームワーク5選」ではSPAの特徴と取り巻く環境、フレームワークを紹介しました。今回は、前回紹介したフレームワークの中から、特に注目度が高い「React」と「Angular2」を使い、SPA開発のイメージをつかんでいただくとともに、それぞれのフレームワークの違いを明らかにしていきます。

　本連載で使用する環境は表1の通りです。

表1　開発環境

環境	利用製品およびソフトウェア
OS	Windows 10
ブラウザ	Google Chrome
開発ツール実行環境	Node.js（version 6.9.5）
パッケージ管理	npm（version 3.10.10）

　SPAはWeb標準技術（HTML、JavaScript、CSS）で構成されているため、環境依存がほとんどありません。Node.jsやnpmは公式サイトから各OSに対応したインストーラーが取得できますので、環境の構築も容易です。また開発用のエディタとしては、近年はAtomやVisual Studio CodeといったOSSエディタが充実しているので、Node.jsとエディタの2つをインターネットから取得すれば、すぐにSPA開発を始めることができます。

スターターツールとは

　SPA開発を始めるに当たり、さまざまなライブラリを組み合わせる必要があります。本来であれば、ライブラリを選定し、環境を構築するところから始める必要がありますが、今回は開発を簡単に始めるため、Reactは「create-react-app」、Angular2では「Angular CLI」と呼ばれるスターターツールを使用します。

　これらのツールを使うことで、開発に必要なライブラリが組み込まれたプロジェクトのひな型を簡単に作成できます。

　まずは、このスターターツールを利用し、ReactとAngular2の開発準備を行います。

スターターツールでReactをインストール

　npmを使って「create-react-app」をインストールします。コマンドラインから、以下のコマンドを実行します。

C:\workspace>npm install -g create-react-app

　インストール完了後、以下のコマンドでバージョンが表示されることを確認してください。

C:\workspace>create-react-app -V
1.0.4

　今回使用しているツールのバージョンは「1.0.4」です。バージョンによって生成されるディレクトリの構成等が異なる可能性がありますので、ご注意ください。次にプロジェクトの作成を行います。プロジェクト名は「todo-react」とし、任意のフォルダ内で以下のコマンドを実行します。

C:\workspace>create-react-app todo-react
……
Success! Created todo-react at C:\Users\dcs\workspace\ang\todo-react

　しばらく待つと、プロジェクトの作成が完了しますので、アプリを立ち上げます。

C:\workspace>cd todo-react
C:\workspace\todo-react>npm run start
Compiled successfully!

　ブラウザで「http://localhost:3000」にアクセスすると、アプリの画面が表示されます。

図1　create-react-appで構築したアプリケーションの初期ページ

　初期のディレクトリ構成は下記のようになっています。

todo-react/
├ node_module/……npmでインストールしたモジュールを格納
├ public/……ローカルサーバに公開するファイルを格納するディレクトリ（HTMLなど）
├ src/……アプリケーションのソース格納ディレクトリ
├ .gitignore……Gitへのコミット対象から除外するリソースを設定
├ package.json……外部ライブラリへの依存関係を記したjsonファイル
└ README.md……プロジェクトの説明を記載するマークダウンファイル

スターターツールでAngular2をインストール

　Angular2でも「create-react-app」と同様、まずはnpmを使って「Angular CLI」をインストールします。コマンドラインから、以下のコマンドを実行します。

C:\workspace>npm install -g angular-cli

　インストール完了後、以下のコマンドでバージョンが表示されることを確認してください。

C:\workspace>ng -v
angular-cli: 1.0.0-beta.26
node: 6.9.5
os: win32 x64

　今回使用するバージョンは「1.0.0-beta.26」です。次に、プロジェクトの作成を行います。プロジェクト名は「todo-angular2」とします。任意のフォルダ内で以下のコマンドを実行します。

C:\workspace>ng new todo-angular2
……
Project 'todo-angular2' successfully created.

　しばらく待つと、プロジェクトの作成が完了しますので、アプリを立ち上げます。

C:\workspace>cd todo-angular2
C:\workspace\todo-angular2>ng serve
……
webpack: Compiled successfully.

　ブラウザで「http://localhost:4200」にアクセスすると、アプリの画面が表示されます。

図2　Angular CLIで構築したアプリケーションの初期ページ

　初期のディレクトリ構成は下記のようになっています。

todo-angular2/
├ e2e/……E2Eテスト実施スクリプトの格納ディレクトリ 
├ node_module/……npmでインストールしたモジュールを格納
├ src/……アプリケーションのソース格納ディレクトリ
├ .editorconfig……プロジェクトのコーディングスタイルを定義するファイル
├ .gitignore……Gitへのコミット対象から除外するリソースを設定
├ package.json……外部ライブラリへの依存関係を記したjsonファイル
├ angular-cli.json ……アプリケーションの構成情報を設定
├ tslint.json……TypeScript用の静的解析ツールであるtslintの設定ファイル
├ karma.conf.js……単体テスト実行用テストランナーであるKarmaを実行するための設定ファイル
├ protractor.conf.js……SeleniumベースのE2EテストフレームワークであるProtractorを実行するための設定ファイル
└ README.md ……プロジェクトの説明を記載するマークダウンファイル

　その他、Angular CLIを使うことで、Angular2アプリケーションの構成要素であるコンポーネントを始めとした、各モジュールのひな型の生成をコマンドラインから行うことができます。