クラウドインテグレーションサービス「雲斗」のブログ

芝公園にある創研情報株式会社がAWS を 中心にクラウドの基本から便利な使いかたまでをお伝えしていきます。

Angular

フルスタックフレームワーク「Angular2」

2017/04/21

通勤中プライムミュージック、仕事AWS、休日プライムビデオ。Amazonが無ければ成立しない生活をしています。

はじめに

最近話題のフロントエンドWEBアプリケーションフレームワーク、「Angular2」の特徴をご紹介します。

コンポーネント指向

コンポーネントとは？

ユーザインターフェースを分解した1つ1つのパーツのこと。
コンポーネントにビュー(HTML・CSS)、ロジック(Controller)を持たせる。
セレクタとして指定した名前が要素名になり、アプリケーション内で再利用できる。

それでコンポーネント指向って？

複数のコンポーネントを組み合わせてUIを作っていくこと。
コンポーネントは再利用ができるので、複数の画面で同じものを出してそこで同じ処理をする（例えばサイドメニューにDBのレコードを一覧表示するとか）でしたら一度作ってあとはそれを各コンポーネントで利用するだけということができます。

AltJS

公式はTypescriptを推しています。プレーンなJavascriptやDartで書くこともできますが、調べた限りTypescriptで作っている方がほとんどのようです。ネット上の情報を活用するためにもTypescriptをオススメします。
function とか prototype とかもう書きたくないねん。

バインディング

Angular1からの続投。ただし、書き方が変わっています。
// 単方向: データソースからビュー
<p>{{name}}<p>
<p [attr]="name">hogehoge</p>
// 単方向: ビューからデータソース
<button (click)="clickHandler()">hogehoge</button>
// 双方向: ビューからデータソース、データソースからビュー
<input type="text" [(ngModel)]="name">hogehoge</input>

その他(勉強中なので列挙のみ)

  • RxJS

    非同期処理をイイ感じにするライブラリらしい。SubjectやらObservableやら色々あって心が折れそう。

  • systemjs, webpack
  • Zone.js

Angular2を使うと何が良くなる？

ざっと使ってみた範囲ですが以下のような感じです。

  • コンポーネント指向でUI構築がスムーズ。またテンプレート、コントローラーが1対1で対応しているのでソースも追いやすいです。

  • Typescriptならコンパイラが実行前にエラーを教えてくれる

  • コンポーネント、ディレクティブ、サービス、ルーティング、HTTPなど一通り触れます。
    チュートリアルをこなしてなにか動くものを作れるとモチベーションが上がりますね。今のところ日本語翻訳されているものが無いのが難点か。

逆にデメリットは？

  • やはり学習コストは高いように思えます。機能が多いので当然といえば当然ですが事前情報が何もない状態でリファレンスを見るととてつもなく高い壁を見た気分になります。
    Angularに限ることではないですが、1つずつ理解をしていくしかないですね。Angular1の経験があると少し理解が早いかもしれません。

  • ベストプラクティスはまだ固まっておらず、手探り状態です。いろんな人がいろんな実装をしているのを見かけます。
    フレームワークを使えばすぐできるんでしょ？という方にはもう少し情報が出てきてから手を付けた方がいいかもしれませんね。

Angular2を始めるにあたって

英語大事

リファレンス、StackOverflowは斜め読みできるくらいの英語力があると望ましいです。

そのソースはどのバージョンのAngularで書かれていますか？

バージョンによって少し書き方が違う所があり、古いバージョンの書き方ではコンパイルエラーになることがあります。そのときは参考ソースのAngularのバージョンを確認した方が良いです。
調べる際にはGoogleの期間指定検索を活用しましょう。

環境立てるのが面倒？

別途記事を書く予定です。

◆クラウドインテグレーションサービス「雲斗」以下のページからアクセス出来ます。

-Angular

Bitnami