Angular2チームも登壇。ーモナカプレスイベントAngular2チームも登壇。Cordova勉強会レポートAngular2チームも登壇。Cordova勉強が開催されました。今回はAngular2チームの来日を記念して開催されました。こちらはそのレポート記事になります。UIはHTML5/ハイブリッドアプリのUIフレームワークです。10でもEdgeなら動きます。オープンソースでAngular2、1両方に対応しています。ネイティブの場合はUIフレームワークが含まれているので、開発者はUIフレームワークが裏で何をやっているのか気にせずすぐにアプリを開発し始められます。ハイブリッドアプリはその辺りが開発者任せになっています。UIの開発がはじまりました。UIでは様々なコンポーネントを持っています。無限スクロール、ナビゲーター、タブバー、スライディングメニューなどです。内部的にパフォーマンスチューニングを行なっているため高速に動作します。CSSコンポーネントとしてデザインが作られており、複数のデザインを持っています。AndroidならAndroidらしく、iOSならiOSらしく表示されます。各プラットフォームで最適な表示を可能にしています。CoreはWebコンポーネントのカスタムエレメンツを使っています。外部フレームワークへの依存性がありませんのでjQueryでも使えます。HTMLを記述するだけでUIを構築できます。新しいバージョン2になって様々なフレームワークに対応しました。Angular/Reactにも対応しています。Vue2への対応を進めています。UIを簡単に使えます。UIは開発者がアプリ開発者にフォーカスできるのを目指しています。クロスプラットフォームで素敵なアプリケーションを作りたいと思っても、Webブラウザごとの違いやチューニングに時間がかかるようでは実現できません。UIで抽象化できるところを増やしていきたいと考えています。その他の特徴として日本製なので日本語ドキュメントもばっちり揃っています。現状、日本からのアクセスは約20%で圧倒的に海外からのアクセスが多いです。開発事例も色々でてきています。d'Italiaはイタリアの自転車系アプリです。その他、B2CでもB2Bでも実例が出てきています。章さんJavaScriptを使った大規模な開発になると色々な問題があります。Hanselmanがいっています。テストの工数、実行するまでエラーが分からない、メンテナンスが大変になるという辛さがあります。いう点を踏まえてTypeScriptが出てきました。2014年04月にバージョン1.0がリリースして以来、現在は2.1がリリースされています。TypeScriptはコンパイラがJavaScriptを生成する、altJSの一つになります。特徴としては静的型付け、クラス、モジュールをサポートしています。2017の仕様も取り込んでいます。基本形として*.tsと.d.ts(型定義ファイル)を使ってコンパイラを通してJavaScriptが生成されます。コンパイラはNode.jsまたはWSHで実行できます。大きいのは静的型付けができることです。型はよく使うものとしてはString、Number、Booleanなどがあるでしょう。インタフェースやクラス(継承含む)、名前空間もサポートされています。ジェネリクス、アロー関数式などもあり、コード量を減らせます。クラスではget/setアクセサ構文もサポートされています。Codeを紹介します。これもTypeScriptで作られています。Codeでは補完であったり、関数の引数をリアルタイムでチェックして警告を出したり、さらにタスクランナーを生成できます。ブレークポイントを入れてステップ実行も可能です。拡張機能の中にはAngular2のスニペットも用意されていますのでぜひ一緒に使ってみてください。WormaldさんAngular2はWebアプリケーションフレームワークで、最近1から2へバージョンアップしました。一から書き直されています。1.0の時代にはWebブラウザはサーバへアクセスして、返ってきた結果をHTMLをレンダリングする仕組みでした。今はSPA(シングルページアプリケーション)になっています。Ajaxでリクエストして、JSONが返ってくる仕組みです。AngularはSPAに最適な仕組みを提供していました。現在、ページを表示する際に多くのJavaScriptを読み込まなければならないという問題が出ています。Appsという開発法を紹介します。Webアプリケーション開発にあたってのベストプラクティスになります。プログレッシブアプリはネイティブアプリのようなユーザ体験を提供します。アプリとは、パフォーマンス/信頼性/没入感がキーになります。第一印象が大事で、3秒で読み込みが終わらなかったら50%のユーザが離れてしまうと言われています。何か動いているというのを見せないといけません。その後、ダイナミックなコンテンツを表示する状態に移行します。Angular1の場合はWebブラウザのみを対象としていました。レンダラーに分かれています。レンダラーが切り離されたことでNode.jsでもWebブラウザでも動かせるようになりました。Expressのレンダリングエンジンとして使うこともできます。サーバレンダリングでも使えることでパフォーマンス、SEO、シェアできるといったメリットが生まれます。前述のバンドルが拡大している問題に対する答えです。アプリケーションが肥大化すれば読み込みに時間がかかります。そこで、ファイルを後回しに読み込めるようになりました。必要になったタイミングで読み込むようになっています。一つ、サービスワーカーを紹介します。サービスワーカーを使うとアプリケーションがプリフェッチできるようになるので、サーバコンテンツの読み込みがさらに速くなります。次の問題はコンパイルです。Angular1ではテンプレートの展開をWebブラウザが毎回行っていました。これが処理速度を低下させていました。Angular2ではAOTという機能によってWebPackを使ってあらかじめコンパイルした結果をバンドルできるようになりました。Webブラウザ側のライブラリのコード量が少なくなります。一例でコンパイル前が118KB、コンパイルすれば35Kまで減らせます。ネイティブのアプリではインターネット接続がないと言った表示は出てきません。Webアプリの場合はインターネット接続がない場合も考えられます。圏外になることもあります。ユーザはオフラインのエラーを見てしまったら、もうサイトを使わなくなってしまうでしょう。サービスワーカーは新しいAPIで一種のプロキシです。アプリケーションからサーバに対してリクエストする時、その接続をフックしてローカルにあるキャッシュを返してくれます。ここからは補足情報です。Chromeで動くLighthouseを使うとプログレッシブWebアプリが適用できているか測れるようになります。Lighthouseで良いスコアが取れていると、AndroidのChromeで「ホームスクリーンに追加する」が表示されるようになります。FirebaseではWebプッシュ通知をサポートしています。短いコードで書けます。フィードバックを必要です。皆さんのサイトをプログレッシブに対応してください。中津川篤司プログラマ、エンジニアとしていくつかの企業で働き、28歳のときに独立。2004年、まだ情報が少なかったオープンソースソフトの技術ブログ『MOONGIFT』を開設し、毎日情報を発信している。2013年に法人化、ビジネスとエンジニアを結ぶエバンジェリスト業「DevRel」活動をスタートした。【Monacaソリューションセミナー...2017年12月8日セキュリティからWeb、教育まで。