Angularで始めるモダンWeb開発セミナー受講メモ(2019/09/12)

参加の目的

業務システム開発のための開発言語／フレームワーク情報収集(2019年版)の一環。

ハンズオンセミナ概要

Angularで始めるモダンWeb開発セミナー 2019/09/12開催分

• 主な内容 　- Angularのこれまでの歴史やその使いどころ
  • 現在の周辺環境からサポート状況確認
  • Angularを構成する主な要素をAngular CLIをベースにしたデモを交えて解説、およびハンズオン
  • Angular専用 UI ライブラリIgnite UI for Angular について解説
  • Angular + Ignite UI for Angularをベースとしたアプリケーション開発をハンズオン形式で体験

学べたこと

• 感想として、Anglarで全てをスクラッチ開発するのは厳しい(難易度が高い)と感じた。
• セミナーで紹介していただいた商用UI製品(Ignite)などを活用することが必要そう。
• Ignite UIはAnglarに限定せずにWebシステムに導入できそうなので、今後評価／検討をしてみたい。

はまったこと

• プロキシ問題
  • 自分のNW環境では作業だったため、プロキシ(認証あり)の設定が必要でしたが、事前に以下の案内をいただいていたので設定できました。 参考リンク：[Node.js] npm の proxy と registry 設定

$ npm -g config set proxy http://username:[e-mail]:8080
$ npm -g config set https-proxy http://username:[e-mail]:8080
$ npm -g config set registry http://registry.npmjs.org/
$ npm config list

• ng new my-app時に、gitコマンド実行個所がエラー → GitのPATHを通して再実行

---

セミナーの目的

SPAやAngularの概要・特徴をおさえる

• 最良な開発プラットフォームの選択ができる状態になる
• 最低限のAngularアーキテクチャをおさえる

SPAの構成と特徴(従来のWebアプリと比較して)

1.サーバーレンダリング
　　ASP.NET,JSP

2.クライアントレンダリング
　　MVC,Spring,json,xml,Silverlightなど

3.Single Page Application
　JavaScriptベースでアプリを構築

SPAの利点

• サーバとクライアントの分離
• JavaScriptアプリの将来的な転用
• UIの柔軟性
• オフライン対応(Service Worker)をはじめとしたPWA
• Webコンポーネントとしての部品再利用性

SPA向き／不向き

• マルチデバイス／マルチブラウザ対応 → 〇
• 静的コンテンツ、Blogなど → ×
• SEO対策 → ×
• RIA(Flash,Silverlight)からの移行 → 〇 (来年でEOS。非常に多い)
• 開発後、〇年塩漬けしたい → × (WebブラウザVUP対応など必要。Angularのリリースサイクルにも追従必要)

スムーズなアップデートのために

• 常に最新のブラウザやFrameworkの動向をキャッチアップ
• テスト自動化は必須。スクリーンショットの差異のテストなども実現可能
• Frameworkのバージョンアップを阻害しない( 特定バージョンに依存するライブラリを使わない。メンテナンス頻度や依存ライブラリなどを確認する)
• ロジックは可能な限りAngular非依存で書く

Angularの歴史と現状

2009年、AngularJS、Googleと個人や企業のコミュニティによって開発。
その後変遷があり、現在はAngularへと変わっており、互換性は無くなっている。

開発イメージ

• Components → TypeScriptのclass (= JavaScriptのClass)
  • 日付入力部品、情報入力部品など。再利用性のあるものを任意に構成できる
• Metadata
  • メタデータ
• Template
  • View(見た目)の定義
• Data binding
  • 処理とDOMをつなげる
    • Interpolation
    • Property binding
    • Event binding
    • Two-way binding ---> 双方向
• Service
  • アプリケーション内における共通的な処理
  • (例：ログ、認証、通信、その他共通的なロジック)
• Dependency Injection(依存性注入)
  • コンポーネントにクラスのインスタンスを提供
  • 自動的にインスタンス生成
  • シングルトン

実演

• ngコマンドでプロジェクト作成
• node_modules ---> かなりの数のライブラリ群。npmでインターネット経由で取得
• srcフォルダ ---> ソースを書いていく
• (codeコマンドでVS Codeを起動)

その他

Stack Blitz
オンラインの VS Code。Angularのデモ環境を簡易に作成可能。