ng-japan中津川篤司6月17日、日本Microsoft社にてAngularのカンファレンス、ng-japanが開催されました。今回、アシアル社の又川さんが登壇しました。こちらはそのレポートになります。お話をしようと思います。Componentsの紹介をします。スマートフォンアプリを作るのに必要になるUI/UXフレームワークになります。メニューの表示機能があります。ハンバーガーメニューをクリックすると表示される、よくあるものです。表示した後はマウスでドラッグもできます。iOS向けだけでなくAndroid、つまりマテリアルデザインにも変更できます。Componentsに対応しています。その特性を活かして幅広いフレームワークに対応しています。Componentsについて知ってもらいたいと考えています。聞かれる疑問として「今後もAngularを使って大丈夫なのか?」とか「またWebに一波来るのか」などがあります。した疑問にもお答えしていきます。Componentsは無関係ではありません。言えばフレームワークと密接な関係があります。ComponentsはWebブラウザの機能です。APIなどと同じです。最近度々話題にあがるのですが、これはメジャーブラウザに搭載されはじめたからです。10.3でも対応したことで反響が大きくなっています。最近ではAngularがいい、Reactがいいといったフレームワーク選定の話が収束してきたように感じます。各フレームワークを掘り下げる流れになってきています。新しい話題として注目されてきています。Componentsは複数の機能が集まっていますが、重要な機能は二つです。生成された時やDOMツリーに追加された時に指定した機能を実行できます。使えるようになります。生成したり、DOMツリーに追加した時にコールバックが起きます。これは通常のJavaScriptの機能だけでは実現できません。一つはDOMツリーの一部分に対して個別のDOM、CSSスコープを与える機能です。DOMとして知られている機能です。以下にだけ適用できるスタイル設定を追加することできます。Webブラウザだけでスコープ機能が実現できます。この2つの機能を使ってHTML標準のinput/video/tableなどと同じ仕組みで新しいタグを作ることができます。HTML5に新しい機能が増えたかのような感覚でコンポーネントが使えるようになります。大きいのはこの再利用可能なコンポーネントをWebブラウザ標準の機能だけで開発できることです。特定のフレームワークに依存しない実装が可能で、シェアしたり利用できます。これは別にAngularが不要になるという訳ではありません。Componentsの闇では逆に悩みどころを紹介します。機能不足な点が挙げられます。データバインディングやInput/Output、DI、パイプ、モジュール、アニメーションなどの機能がありません。Componentsをラップして使いやすくするライブラリがあります。X-Tag、Polymer、slim.js、Skateといったライブラリです。やり方としては二種類あり、一つはランタイムライブラリを読み込むものです。これはWebブラウザ標準以外の機能を使わないといけません。Componentsに変換するものです(現時点ではありません)。この場合、ランタイムライブラリは不要ですがビルドする環境が必要になります。Componentsのままであればフレームワークを使わないユーザにとっては魅力的です。ライブラリなしで動きますし、コードをコピー&ペーストするだけで使えます。Componentsは魅力的です。これまでUIライブラリを提供する場合、フレームワークの数だけライブラリを開発する必要がありました。ような各フレームワーク独自部分を実装していくだけで済みます。採用している方法です。Angular/React/Vue.jsについては公式で提供していますが、Ember/Aureliaについてはユーザが開発してくれています。今後このような設計手法を採用するライブラリは増えていくのではないでしょうか。ComponentsはWebブラウザ標準で実装されているので処理が高速です。足りない機能も多いのが現実ですが、今後に期待しましょう。Components側に寄せていくそうです。Componentsをサポートしていないブラウザでは動作仕様が異なることがあります。Componentsが8割。各フレームワーク固有の部分は2割くらいです。中津川篤司プログラマ、エンジニアとしていくつかの企業で働き、28歳のときに独立。2004年、まだ情報が少なかったオープンソースソフトの技術ブログ『MOONGIFT』を開設し、毎日情報を発信している。2013年に法人化、ビジネスとエンジニアを結ぶエバンジェリスト業「DevRel」活動をスタートした。発足!キックオフイベントレポ関連記事Monaca×Watsonで人工知能アプリを作るハンズ...MonacaでもAR/VRを。OS...HTML5アプリに関わるユーザのための祭典。(JavaScript基礎構文)iOS16から導入された「デベロッパモード」についてhtmx:JavaScriptなしでサーバーとの通信を実現する見やすい、メンテナンスしやすいJavaScriptのために。