多くのWEBサイトで導入されているWebアプリケーションフレームワークのAngular。
この度、待望の最新シリーズ『Angular7』が2018/10/19にリリースされました。
この記事では、初心者でもすぐに使えるようなリリース内容に触れていきます。

Angular Materialは見栄えの良いサイトを作成するのに必要な便利な素材を用意しているツールです。
今回のAngular7リリースと同時にAngular Materialに便利なVirtual ScrollingとDrag and Dropが追加されたのでご紹介したいと思います

スクロールが長くても動作が重くならないVirtual Scrolling

公式より引用

上の画像の通り、表示されている部分のみがHTMLに構成されるようになります。スクロールが長くなりページが重くなってしまうようなサイトでパフォーマンス向上が期待される機能です。

こちらのリンクで公式のサンプルを公開しています。
https://material.angular.io/cdk/scrolling/overview

自由にレイアウトを組み替えられるDrag and Drop

https://material.angular.io/cdk/scrolling/overview

公式より引用

自由にドラッグしたり、リスト内で並べ替えたりと、アイテムを自由自在に動かすことができるようになりました。
各要素の配置を自由に動かすことができるようなサイトを簡単に作ることができ、ユーザーごとの配置をDBに保存しておくことで、カスタマイズ性の高いサイトが出来ます。

こちらのリンクで公式のサンプルを公開しています。
https://material.angular.io/cdk/drag-drop/example

まとめ

Angular7と同時にアップデートした、AngularMaterialの2つの機能について紹介しました。
今回は実装方法について触れませんでしたが、公式サイトの通りに実装していけばしっかりと機能を実装できるようになっています。
最近の技術は初心者にもわかりやすく、諸先輩方には感謝しかありません。
今後も新しい技術で便利なツールを作り皆様をシームレスにアテンドしていきます。

Angularを使用したWEBサイトを制作するソリューション事業部はこちら