はじめに
JavaScriptのフレームワークの中にAngularというフレームワークがあり、調べた際、AngularJSという前身のフレームワークの存在を知りました。Angularを知るにあたって、AngularJSとの関係は知っておいた方が良いと思い、AngularJSとAngularの関係性などを調べました。
今回はその振り返りです。
AngularJS
Googleが中心となって2012年6月頃にバージョン1.ｘがリリースされたオープンソースのJavaScriptフレームワークです。主にシングルページアプリケーション（SPA）を作成するのに使われていました。主な特徴としては
1. MVCアーキテクチャ
2. ルーティング
3. 双方向のデータバインディング
などが挙げられます。
問題点として、
-
パフォーマンスが下がりやすい
「消化サイクル」(digest cycle)という機能がある種のループ構造であり、ループする際に、スコープの監視している変数に変更があったか全て確認しています。そのため、スコープが増えすぎると画面の監視する処理が増えてしまいパフォーマンスに影響が出てしまいます。 - 2022年１月にサポートが終了している
などがあります。
Angular
2016年9月頃にリリースされたAngularJSのバージョン2以降のことをAngularと呼びます。AngularJSの一部機能や名称は受け継がれていますが、基本的に別のフレームワークと言えます。特徴としては
1. コンポーネントベース
2. TypeScriptベース
などが挙げられます。
どこが違うのか
AngularとAngularJSは基本的に別のフレームワークだと分かりました。具体的にどういった違いがあるのかをまとめます。
1. AngularJSはMVCアーキテクチャであるのに対して、Angularはコンポーネントベースです。
2. AngularJSがJavaScriptを使用しているのに対して、AngularはTypeScriptが使用されています。
3. AngularJSはスコープの概念がありますが、Angularではスコープの概念は廃止されました。
この中でも、MVCアーキテクチャだったフレームワークがコンポーネントベースに変更されたのはかなりの違いだと思います。Reactよりも前にリリースされていたので仕方ないのですが、AngularJSがMVCアーキテクチャを採用していたのは意外でした。
AngularでHello World
AngularでHello WorldするにはNode.jsやnpmがインストールされているのを確認した上で、Angular CLIを下記コマンドでインストールします。
npm install -g @angular/cli
その後、下記コマンドで新しくAngularプロジェクトを作成します。
ng new hello-world
設定を終えた後、開発サーバーを起動することで初期画面が表示されます。
cd hello-world
ng serve
Angularはsrc/app/app.component.htmlにデフォルトのページ内容が記述されています。このファイルを編集することでページ内容が変更されます。
<h1>Hello World!</h1>
まとめ
AngularJSはMVCアーキテクチャに対してAngularはコンポーネントベースである、などAngularについて、AngularJSとの違いを通じて理解を深めることができました。
参考資料
AngularJS — Superheroic JavaScript MVW Framework
Home • Angular 日本語版
採用拡大中！
アシストエンジニアリングでは一緒に働くフロントエンド、バックエンドのエンジニアを募集しています！
少しでも興味ある方は、カジュアル面談からでもぜひお気軽にお話ししましょう！
お問い合わせはこちらから↓
https://official.assisteng.co.jp/contact/