2015年4月23日木曜日

GTUG Girls Meetup (#gtuggirls) に参加してきました!

しょこです。

昨日は第21回GTUG Girls Meetup「1からはじめるAngularJSハンズオン」に
参加してきました。GTUGのイベントは初参加。

Meetupの内容

簡単な概要と初心者向けハンズオンをやりました。
講師は@albatrosaryさん,チュータが@mitsuruogさんでした。
これに則ってやってきた(全部はやってない)
http://albatrosary.hateblo.jp/entry/2014/11/06/101400
togetterはこちら

AngularJS概要

1. AngularJSが生まれた背景
そもそもJava Scriptとは,DOMを操作することを原点としている言語。
→ただ操作しづらいので,操作しやすくするためにjQueryができた。
→でも結構問題があったので,jQueryを整理したBACKBONE.JSが生まれた
→そこからさらに操作しやすくしたのがAngularJS

ちなみにWeb業界2大トレンド"AngularJS"と"React"の違いは,
DOM操作を隠ぺいするかしないか辺りらしい。

2. AngularJSとは
JavaScriptフレームワーク。
色々特徴あるなかで今日は初心者でもわかりやすいディレクティブをやります。
(ディレクティブ以外だとルーター,コントローラー,ファクトリーなどがある)
近いうちに1.x系か2.x系への大型アップデートがあり,機能も拡張される予定。
<<キーワード>>
カスタムタグ/双方向バインディング/DI/ルーティング/Virtual DOM

ハンズオン

1. 環境構築 (サーバの準備)

(1)Macの場合
Pythonが入ってるのでそれを使う。
- アプリケーションサーバを作業フォルダ内で立ち上げる
- localhost:8000 (またはlocalhost:9000)にアクセス
- index.htmlを作成する

(2) Windowsの場合
Python入ってないのでとりあえずWeb IDEを使う。
- Web IDEを開く (今回はJS Binを使った)
- [Add Library] で Angular 1.3.2 Stableを選択
- この時点でindex.htmlが作成されるのでここを編集していく

2. index.htmlを編集してHello, Worldしよう。


<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <title>Angularの基礎</title>
</head>
<body>
  Hello
</body>
</html>

3. index.htmlにAngularJSを読み込ませる

ダウンロードしてもいいけど,とりあえず以下のようにURLから読み取る
srcに指定するのはhttps://angularjs.org/のDownload→CDN
<head>
<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.3.2/angular.min.js"></script>
</head>

4. 実際に動かしてみよう!!

(1) Angular JSが動いてることを確認する
1+1を{{}}で囲んだ場合に演算結果が表示されればOK
<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <title>Angularの基礎</title>
</head>
<body>
  Hello {{1+1}}
</body>
</html>

<出力結果>
Hello 2

(2) バインディングの基本をやってみる
<body ng-app>とすると,AngularJSのコードだと認識される。
<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <title>Angularの基礎</title>
</head>
<body ng-app>
<!--テキストボックス-->
  <input type="text" ng-model="hoge">
<!--テキストボックスに入力された内容を表示(バインディング)する-->
    {{hoge}}
</body>
</html>

バインディング時に一瞬{{hoge}}が見えてしまう。
これを解決したい場合はspanを利用してバインディングする。
<body ng-app>
  <input type="text" ng-model="hoge">
  <span ng-bind="hoge"></span>
</body>

(3) 条件分岐をやってみる
AngularJSではng-showとng-ifの2種類が条件分岐文。
二つの違いは今は気にしなくてよいため,今回はng-showを利用。
(*・ω・){<div ng-show="hoge==='1'">が肌になじまない...!
<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <title>Angularの基礎</title>
</head>
<!--"1"入力時のみメッセージを出す-->
<body ng-app>
  <input type="text" ng-model="hoge">
  <div ng-show="hoge==='1'">
    <span ng-bind="hoge"></span>
    が入力されました
  </div>
</body>
</html>

(4) ループ文をやってみる
予め初期化しておいたリストからデータを取り出して表示する。
ここらへんで気付いたけどAngularJSはデフォルトの表示がある程度成形されている。
今回のケースだと箇条書きになっている点。
<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <title>Angularの基礎</title>
</head>
<body ng-app>
  <!--ブラウザが表示されたときにdemoDataとして読み取るデータ群-->
  <div ng-init="
    demoData = [
      {name: '佐川', age: 28}, 
      {name: '小川', age: 32}, 
      {name: '山田', age: 16}, 
      {name: '井上', age: 42}
    ]
  "></div>
  <ul>
    <!--リストからデータを取り出す-->
    <li ng-repeat="data in demoData">
      {{data.name} - {{data.age}}
    </li>
  </ul>
</body>
</html>
<出力結果>
・ 佐川 - 28
・ 小川 - 32
・ 山田 - 16
・ 井上 - 42

ここにフィルタ機能を実装するときはliにfilterオプションつけるだけ。
<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <title>Angularの基礎</title>
</head>
<body ng-app>
  <div ng-init="
    demoData = [
      {name: '佐川', age: 28}, 
      {name: '小川', age: 32}, 
      {name: '山田', age: 16}, 
      {name: '井上', age: 42}
    ]
  "></div>
  <input type="text" ng-model="search">
  <ul>
    <li ng-repeat="data in demoData | filter: search">
      {{data.name} - {{data.age}}
    </li>
  </ul>
</body>
</html>
(5) Validationチェックをやってみる
まず初めにhead内でstyleを定義する。
<head>
  <meta charset="utf-8">
  <title>Angularの基礎</title>
  <!--style定義-->
  <style>
    input.ng-invalid.ng-dirty {
      border-color: #ff0000;
    }
  </style>
</head>
次に,body内で必須項目設定(required)をする
<body ng-app>
  <input type="text" ng-model="hoge" required>
</body>
これだけで必須項目にしたテキストボックスに値が入っていないと赤枠が表示されるようになる。
最初から陰影ついててビビる。

(6) エラー処理をやってみる
body内をformで囲った後,エラー条件(今回は文字数)を定義。
エラーメッセージで指定するために名前を付けておく。
<body ng-app>
  <form name="demo">
    <input type="text" name="username" ng-model="hoge" ng-minlength="4" ng-maxlength="8" required>
  </form>
</body>
エラー条件定義後,エラーメッセージを実装
<body ng-app>
  <form name="demo">
    <input type="text" name="username" ng-model="hoge" ng-minlength="4" ng-maxlength="8" required>
      <!--テキストボックスに入力された文字数に問題があった場合エラーメッセージを表示する-->
      <p ng-show="demo.username.$error.minlength">4文字以下です</p>
      <p ng-show="demo.username.$error.maxlength">8文字以上入力されています</p>
  </form>
</body>
(7) 番外編:ヘッダーを固定させる(SPA)
Single Page Applicationを実装するときは,ファイルを分けてbody内でindex.htmlから呼び出す。
<body ng-app>
  <div ng-include="'header.html'"></div>
  <div>
    <!--この中身を書き換える-->
  </div>
</body>

Q&A

1. 今後独学するのにおすすめなサイト/本


2. その他


  • Yeoman
    • http://yeoman.io/
    • yo angular-fullstackコマンドだけでちょっとしたアプリケーションが動く。
    • 次回のGTUGのテーマです。
  • AngularJS適用するのにおすすめ/おすすめじゃないソフトウェアは?
    • おすすめ→業務アプリケーションの管理画面とか
    • おすすめじゃない→画像をたくさん動かすゲームとか
    • 規模は小規模~大規模特に関係ない
  • ディレクティブの次は何やるのがいい?
    • 次のステップならルーターとコントローラーがおすすめ。
      • ルーターには3種類ある。ng-ルーター/ui-ルーター/new-ルーター
      • 仕事でAngular触るならui-ルーター,勉強用ならnew-ルーターを使うのがおすすめ (newはまだ安定していない)
    • ルーターとコントローラーの次はファクトリー
      • $httpと$resourceを使ってサーバと通信すれば一通り作れるようになったってことになる。

0 件のコメント:

コメントを投稿