フロントエンドフレームワークとAngular

かなり前になりますが、本ブログでクライアントサイドのフレームワークというところで、AngularJSを少し取り上げました。

その後、フロントエンドのフレームワークは諸々動きがあって今回少し整理したのと、私も時々Qiitaに投稿しているAngularについて取り上げたいと思います。

フロントエンドフレームワークの最近の主だったものとして、Angular、React、Vue.jsが挙げられ各々の特徴は下記の記事にまとめられています。

これらのフレームワークを利用することでWebサイトであってもページ遷移なしに、画面の動きを表現することがある程度容易に実装できます。前に本ブログで取り上げたPWAは、基本的にこれらのフレームワークを使用して構築するものとなります。

Angularについては、AngularJsの後継のフレームワークになり、かなり書き方も異なるものとなっています。Angularにの実装に沿ってフロントエンドフレームワークの主だった仕組みであるコンポーネントと双方向バインディングについて紹介します。

まず、コンポーネントについての紹介です。コンポーネントはページにおける、テキストボックスなどを一括りとした単位となります。下記の記事がイメージがつきやすいと思います

【「Angular 2」の構成単位「コンポーネント」「モジュール」を使いこなそう】

次に双方向バインディングです。ざっくりいうと、ビューの値とコンポーネントのロジックで設定される値を同期するものとなります。これにより、入力内容や処理結果がほぼリアルタイムに画面へ反映されます。具体例については、下記の記事にまとめられています。

【フォームの入力値をコンポーネントと同期するには？（双方向バインディング）】

Angularは他にも様々な機能があるのですが、網羅的に確認するとなるとかなりのボリュームがあります。現状かなりまとめられている書籍は下記になります、私も読みつつ手を動かしています。

とあるIT屋の独白