Help us understand the problem. What is going on with this article?

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システムに導入できそうなので、今後評価/検討をしてみたい。

はまったこと

$ npm -g config set proxy http://username:password@prox.example.com:8080
$ npm -g config set https-proxy http://username:password@prox.example.com: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のデモ環境を簡易に作成可能。

Why do not you register as a user and use Qiita more conveniently?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
Comments
Sign up for free and join this conversation.
If you already have a Qiita account
Why do not you register as a user and use Qiita more conveniently?
You need to log in to use this function. Qiita can be used more conveniently after logging in.
You seem to be reading articles frequently this month. Qiita can be used more conveniently after logging in.
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away