JavaScript講座

野中文雄のAngularJS入門講座

シングルページwebアプリケーション(SPA)は、ひとつのページで変更が必要な要素やモジュールを動的に切り替えることにより、操作の反応を速め、ユーザーエクスペリエンスを高めるアーキテクチャです。そのためのフレームワークとして今もっとも注目を集めているのがGoogle社の開発するAngularJSでしょう。

野中文雄

本講座は、AngularJSのインストールから始め、サンプルのwebアプリケーションを段階に分けて組み立てながら、このフレームワークの仕組みや構文、JavaScriptコードの書き方について解説します。扱うふたつの作例のひとつ目は、Todoリストです。ひとつのページの中で、表示する項目の数やテキスト、スタイルを動的に切り替えます。ふたつ目は、さらに項目のリストをコンポーネントと呼ばれるパーツに分けて階層化し、テンプレートのHTMLコードを差し替えるなど、SPAの開発に重要となるテクニックについて解説します。

AngularJSのバージョンは1.5を使用します。HTMLとCSSおよびJavaScriptの基礎を学んだ方が対象です。


修了目標

本講座の受講修了時に、以下のスキル習得を目指します。

  • ディレクティブを使った構文がわかる
  • モジュールとコントローラをJavaScriptコードで定められる
  • データにもとづいてHTMLドキュメンの要素や属性が動的に変えられる
  • コンポーネントを使ってHTMLドキュメントが組み立てられる
  • データバインディングの方向と扱い方がわかる
野中文雄

カリキュラム概要

  1. AngularJSを始める
  2. Todoリストをつくる
    • 要素の属性を動的に変える
    • コントローラで値を与える
    • 動的にリストをつくる
    • コントローラで項目を動的に追加する
    • 項目を数えて表示する
    • 項目を調べて削除する
    todoリストの図
  3. コンポーネントを使う
    • コントローラに定めた値をデータバインディングでHTMLドキュメントに表示する
    • アプリケーションからコンポーネントを切り分ける
  4. コンポーネントを階層化する
    • コントローラに定めた値をデータバインディングでHTMLドキュメントに表示する
    • コンポーネントから表示項目を削除する
    • 項目のデータを増やして新たなコンポーネントで編集する
    • リセットボタンでテキストを編集前に戻す
    • 一方向のバインディングでデータの変更を親コンポーネントに反映させる

サンプル
項目の値がコンポーネントで編集・保存・リセットできる

サンプル図

*カリキュラムの進度および内容は、受講者全員の理解度・習得度によって変更される場合があります。


使用アプリケーション・開発言語
Dreamweaver + JavaScript + AngularJS 1.5
講師
野中文雄
定員
6名
対象
HTMLとCSSの基礎知識があり、変数や関数を用いた基本的なJavaScriptコードが書ける方

受講料

受講料
29,800円(税込み)

開講日・お申し込み

この講座には現在募集日程がありません。次回開講日程は67WSカレンダー共有などでご確認ください。また、企業研修などで開講をご希望の場合はお気軽にご相談ください。

受講希望の方は 受講規約 および よくある質問 のページを閲覧していただき、ご了承の後にお申し込みフォームからお申し込みください。また お申し込みの流れ もご参照ください。


受講対象レベルチェック問題

以下の問題はJavaScriptで書かれたコードです。それぞれのコードを実行した場合の問 にお答えください。
全問正解が受講の必須条件ではなく、受講対象レベルの具体的な目安とお考えください。

問1:変数aの値はいくつになりますか。

var a = 2;
 a = getSquare(a);
 function getSquare(value) {
  var answer = value * value;
  return answer;
}

問2:変数nの値はいくつになりますか。

var n = 0;
for (var i = 1; i < 3; i++) {
 n += i;
}

問3:変数hasElementの値はどうなりますか。

var _array = [];
var hasElement;
if (_array.length > 0) {
 hasElement = true;
} else {
 hasElement = false;
}
}

答1:4

答2:3

答2:false



受講者の声

わかりやすかったです。jsonを読み込んで画面を更新するところなど、もう少し時間をかけてじっくりやりたいと思いました。

Web制作会社勤務 正社員

大変勉強になりました