LoginSignup
56
67

More than 3 years have passed since last update.

Angularとは

Last updated at Posted at 2019-05-15

Angular

angular.png

Googleが開発しているJavaScriptのフレームワークです。
現在(2020/02/20)はVersion9までリリースされているようです。

Wikipediaには

Angular(アンギュラー)は、Googleと個人や企業のコミュニティによって開発されているTypeScriptベースのオープンソースのフロントエンドWebアプリケーションフレームワークである。

と記載されています。

他にも「Vue」や「React」などありますが、一番大きな違いはフルスタックであることです。
「Vue」や「React」は画面側のフレームワークですが、「Angular」はルーティングなどwebアプリケーションに必要な機能が全て備わっています。
そのため、「Vue」や「React」はフレームワークというよりかは画面側のライブラリという認識でも良いのではないでしょうか。

つまり、「Angualr」を使うだけでwebアプリの開発ができると言うことです。

AngularJSとAngular

調べていると、AngularJSとAngularが出てきて、何が違うんだ?となったので簡単に調べておきました。
AngularJSも同様にGoogleが開発していましたが、多くの欠点があったためAngularJSを構築した開発者がコードを1から書き直したようです。
一部の機能は受け継がれていますが、基本的には別のフレームワークとして考えたほうが良いみたいです。

Angularの特徴

Angularは全てのプラットフォームで動作する。動作環境を意識をする必要がない。

  • Web、モバイルWeb、ネイティブモバイル、ネイティブデスクトップ全てのプラットフォームで動かすことが可能です。

SPA(Single Page Application)の開発に向いている。

  • 最近よくみるリッチで良い感じのサイトですね。
  • 例えばこういうサイト

双方向データバインディング

  • 非常に少ないコードで機能を実装できてしまったので、感動しました。
  • [(ngModel)]="name"と記述するだけで、nameプロパティと双方向データバインディングされています。

コンポーネント思想のアーキテクチャ

cdk.png

  • 簡単に言うと複数のコンポーネントを積み重ねて、モジュールを作成する思想ですね。一つの大きいコンポーネント内に様々なコンポーネントを含有する感じです。

RxJS

  • Observables というアーキテクチャを用いたリアクティブ・プログラミング用のライブラリで、非同期処理を簡潔かつ可読性高くコーディング出来るやつです。

開発するために知っておいたほうが良いこと

TypeScript

  • JavaScriptに静的型付けを与えてくれるJavaやC#などオブジェクト指向経験者が嬉しいやつです。
  • Angularは基本的にこれを使っていきます。

Angular CLI

cli.png

  • Angularアプリのプロジェクト生成や実行などが行えるコマンドラインツールです。簡単に雛形を作ったりしてくれて、開発が楽チンです。

Ionic

eyecatch_ionic.png

  • Google社のAngularをベースに作成されたHTML5ハイブリッドモバイルアプリの制作に便利なフレームワークです。
  • ちなみにアイオニックと読みます。

参考サイト

Angular
Angular Wikipedia
Angular開発の強力サポートするコマンドラインツール「Angular CLI」の活用法
Angularの学習コストは本当に高いのか
プロトタイプ制作にも使えるモバイルフレームワーク「Ionic」を便利に使うコツ
Ionic

56
67
1

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
56
67