【最新v5対応】はじめてのAngular入門 実践シングルページアプリケーション(SPA)構築
3.8 (250 ratings)
Course Ratings are calculated from individual students’ ratings and a variety of other signals, like age of rating and reliability, to ensure that they reflect course quality fairly and accurately.
1,424 students enrolled

【最新v5対応】はじめてのAngular入門 実践シングルページアプリケーション(SPA)構築

人気のJavaScriptフレームワークAngularを一から学び、TypeScriptやRxJSなどの関連技術の基礎、シングルページアプリケーションの開発手法、Firebaseでアプリケーションを構築する方法を習得します
3.8 (250 ratings)
Course Ratings are calculated from individual students’ ratings and a variety of other signals, like age of rating and reliability, to ensure that they reflect course quality fairly and accurately.
1,424 students enrolled
Last updated 4/2019
Japanese
Current price: $11.99 Original price: $199.99 Discount: 94% off
3 days left at this price!
30-Day Money-Back Guarantee
This course includes
  • 10 hours on-demand video
  • 4 articles
  • 48 downloadable resources
  • Full lifetime access
  • Access on mobile and TV
  • Certificate of Completion
Training 5 or more people?

Get your team access to Udemy's top 3,000+ courses anytime, anywhere.

Try Udemy for Business
What you'll learn
  • Angularの基礎知識を身につけることができる。
  • TypeScriptの基礎を身につけることができる。

  • シングルページアプリケーションの実装方法をひと通り理解できる。

  • Firebaseでアプリケーションを構築・公開できる。
Course content
Expand all 67 lectures 09:58:24
+ はじめに
5 lectures 18:52

nodebrewのインストールにつまづいてしまったら、Node.jsインストーラの利用をおすすめします。

Node.jsのインストーラは以下からダウンロードできます。
https://nodejs.org/ja/

Macの学習環境を構築しよう
05:54

nodistのインストールにつまづいてしまったら、Node.jsインストーラの利用をおすすめします。

Node.jsのインストーラは以下からダウンロードできます。
https://nodejs.org/ja/

Windowsの学習環境を構築しよう
06:08
Visual Studio Codeの拡張機能
00:10
+ 初めてのAngularアプリケーションを作成しよう
2 lectures 10:32

クイックスタート用のファイルはこちらからもダウンロードできます。
https://github.com/angular/quickstart

このセクションの内容
00:43
+ TypeScriptに慣れよう
9 lectures 01:09:52

TypeScript Playgroundは以下のURLからアクセスできます。
https://www.typescriptlang.org/play/

このセクションの内容
01:44
型キャストとテンプレート文字列
06:15
関数を理解しよう
11:20
クラスを理解しよう
11:03
クラスの継承を理解しよう
05:50
ジェネリックを理解しよう
07:29
インターフェイスを理解しよう
07:58
+ 社員管理アプリケーションを作成しよう
16 lectures 03:34:59
このセクションの内容
01:54
社員データを一覧表示する
08:06
社員リストを選択可能にする
11:05
コンポーネントを分割する
18:17
外部データを取得する
11:53

ライフサイクルの詳細に関してはこちらも参照してください。

http://blog.yuhiisk.com/archive/2016/05/02/angular2-lifecycle-hooks.html

コンポーネントのライフサイクルを理解する
08:48
ルーティングを設定する
15:45
ダッシュボードを追加する
07:35
ルーティングに応じたリンクを設定する
25:06
リファクタリングとスタイルを調整する
23:00
HTTPクライアントでデータを取得する
26:31
データの追加と削除を実装する
18:03
データの検索機能を実装する
21:19
Angular v5のHTTPクライアントの注意点
02:44
+ RxJSを理解しよう
6 lectures 28:37

RxJS公式ドキュメント
http://reactivex.io/rxjs/

このセクションについて
01:15
RxJSとは?
06:50

RxJSの視覚的な理解には、RxJS Marblesも合わせて参照してください。
http://rxmarbles.com/

Preview 07:49

RxJSの視覚的な理解には、RxJS Marblesも合わせて参照してください。
http://rxmarbles.com/

RxJSのオペレータ2
06:02

RxJSの視覚的な理解には、RxJS Marblesも合わせて参照してください。
http://rxmarbles.com/

RxJSのオペレータ3
02:33
Subjectについて
04:08
+ Angular CLIを使いこなそう
2 lectures 00:08
Angular CLIとは?
00:05
各コマンドを理解する
00:02
+ チャットアプリケーションを作成しよう
25 lectures 04:07:02
このセクションの内容
01:08
アプリケーションの開発準備
05:33
チャットアプリ画面の作成
01:42
タイムラインを表示する
07:19
クラスでデータを作成する
09:54
Pipeで日付を整形する
10:17

firebase
https://firebase.google.com/

Firebaseの初期設定
04:42
FirebaseとAngularを連携する
15:06
チャットを投稿してデータベースに保存する
10:09
チャットの編集・削除を実装する
26:25
アプリケーション構成を見直す
19:47
ルーティングを設定する
08:17
ユーザーを作成する
16:45
ログイン・ログアウトを実装する
16:07
usersモジュールを作成する
13:16
ユーザーデータの登録
12:34
チャットデータにユーザーを紐付ける
10:54
Guardでページアクセスを制御する
08:51
ログインに応じてトップページの表示を切り替える
02:54
Timelineモジュールを作成する
07:45
ユーザー一覧を表示する
10:09
ユーザーページを作成する
10:57
アプリケーションを公開する
10:53
Firebaseにサイトをデプロイしても表示されない場合
00:07
+ 終わりに
2 lectures 05:56

・ngx-bootstrap
https://valor-software.com/ngx-bootstrap

・ng2-validation
https://github.com/yuyang041060120/ng2-validation

・Angular Material
https://material.angular.io/

関連ライブラリの紹介
03:35

・angular.io
https://angular.io/

・angular.jp (公式サイトの日本語訳)
https://angular.jp/

・Angular Style Guide
https://angular.io/guide/styleguide


終わりに
02:21
Requirements
  • HTML, CSS, JavaScriptについての基礎知識が必要
  • Googleアカウントが必要(Firebaseで利用します)
Description

このコースは、JavaScriptフレームワーク「Angular」の初心者に向けて構成された入門コースです。

Angularがはじめての方でも、一から解説するサンプルアプリケーションの開発を通して、Angularの基礎、TypeScriptの構文や機能、RxJSの使い方、シングルページアプリケーションの構築方法を習得できます。

またこのコースでは、Firebaseのリアルタイムデータベースと連携したチャットアプリケーションを開発・公開する、より実践的な学習内容が用意されています。サーバーの知識が無くてもアプリケーションを公開することが可能です。

コース受講後には、学んだ知識・技術を実務や個人開発に役立てることができます。


【このコースの特徴】

Angularはフレームワークの知識に加えて多くの周辺知識(TypeScript、RxJSなど)を必要とするので、学習のハードルが高いのがデメリットです。

まだまだAngularを詳細に学べる機会は決して多くありません。

そこでこのコースでは、初心者でも挫折しないように、Angularに必要な知識・技術の解説を全て行います。

  • Mac・Windowsの両方に対応したNode.jsのインストール
  • Visual Studio Code(エディタ)のインストール・設定
  • 【TypeScript】
  • ー 型・関数・クラス・インターフェイス・ジェネリックの解説
  • 【Angularの各機能】
  • ー コンポーネント
  • ー ディレクティブ
  • ー パイプ
  • ー サービス
  • ー フォーム
  • ー ルーティング
  • ー Guard(ガード)
  • ー HTTPクライアント
  • ー NgModuleでのアプリケーション構成
  • ー スタイルガイドに添った開発手法
  • 【RxJS】
  • ー Observable
  • ー Subject
  • ー オペレーター
  • 【Angular CLI】
  • 【Firebase】
  • ー リアルタイムデータベースの利用
  • ー ユーザー認証
  • 関連ライブラリの紹介

またAngularでは最新のフロントエンド技術を取り入れられていますので、フレームワークの習得とともに技術トレンドを抑えることができます。

各レクチャーにはリソースファイルに終了時点のソースコードを用意しています。
レクチャーでの不明な点はコース内のQ&Aでサポートしますので、ご安心ください。

※本コースでは、今後もカリキュラムの追加を行っていく予定です。


【更新情報】

次のセクションの動画を近日中に追加予定です。

  • RxJSを理解しよう
  • Angular CLIを使いこなそう


【このコースで利用しているAngular・その他ツールのバージョン情報】

  • 社員管理アプリケーション(Angular v4.3.4)
  • チャットアプリケーション(Angular v5.0.2)
  • Angular CLI(v1.5.0)
  • Node.js (v8.8.1)


【注意点】

  • JavaScript未経験の方には、レクチャーの内容がとても難しいため、まずは別の入門コースで基礎を学習していただくことをおすすめします。
  • 本コースはAngular初心者に向けた入門コースです。ユニットテストやサーバーサイドレンダリングなどの高度な内容は取り扱っていません。
  • 本コースで扱うAngularのバージョンは「4.3.4」と「5.0.2」です。AngularJS(v1)、Angular2の解説・対応は行っておりませんのでご了承ください。


Who this course is for:
  • これから業務でAngularアプリケーションを開発をしたい方
  • 今までにAngularの学習につまづいてしまった方
  • シングルページアプリケーションを開発したい方
  • すでにWeb制作・開発の仕事をしていて、さらにスキルアップしたい方