Skip to content

Instantly share code, notes, and snippets.

@asufana

asufana/AngularJSの入門の入り口.markdown

Last active January 4, 2016 08:19
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save asufana/8594449 to your computer and use it in GitHub Desktop.
Save asufana/8594449 to your computer and use it in GitHub Desktop.
Download ZIP
AngularJSの入門の入り口
Raw
AngularJSの入門の入り口.markdown

AngularJSの入門の入り口

  • AngularJSの出てきた背景とか

  • その特徴や既出のフレームワークとの違いとか

  • 関連技術について書くよ

  • コードについては自分で勉強してください笑

昨今のWebAP

  • UI/UX重視なIFが求められている
  • モバイル対応が必須

そのひとつの回答がSPA

  • URL遷移しない Single Page Application
  • サーバサイドはREST/JSON APIのみ
  • JSでネイティブAPに引けを取らないWebUIを構築する

jQueryでのフロント開発の限界

  • イベントをバインドして変更をキャッチして、

  • AJAXでサーバにクエリをして

  • セレクタで指定したDOM要素にレスポンスをaddClassやappend

  • 仕組みが薄いので実装は簡単

  • でもDOMに依存するので保守性が低い、大規模になってくると辛い、テストできないし

  • http://blog.livedoor.jp/sasata299/archives/51966228.html

そこでAngularJS

赤丸急上昇中！

AngularJSの特徴

双方向データバインディング

  • もうDOM操作なんてやってらんない
  • ビューとデータを紐付けて双方向に反映させるよ
  • リモートJSONデータもバインドできるよ

フィールドとの結合

<html ng-app>
<head>
  <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.10/angular.min.js"></script>
</head>
<body>
  <input type="text" ng-model="name" />
  <p>Hello! {{name}}</p>
</body>
</html>

モデルとの結合

<html ng-app>
<head>
  <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.10/angular.min.js"></script>
  <script type="text/javascript">
  var mainCtrl = function($scope){
    $scope.users = [
      {"id":"444", "name":"華房誠"},
      {"id":"442", "name":"遠藤邦夫"}
    ];
  }
  </script>
</head>
<body>
  <div ng-controller="mainCtrl">
    <li ng-repeat="user in users">
      {{$index+1}} {{user.id}} : {{user.name}}
    </li>
  </div>
</body>
</html>

イベントドリブンを補完する

  • jQueryにもイベントはあるけど、その後の処理はDOMを使って操作しないといけない
  • ってこれMSのあれみたいなのにすればいいじゃん
  • MSな人ならVB時代からおなじみなやつ、データバインディング
  • 削除ボタン押したら削除イベントが呼ばれるから当該データを削除するよ ⇒ ビューから削除される
  • データとビューを紐付けたらあとはお任せがデータバインディング

複数人開発もいけるんじゃない

  • 強い制約と少ないコード量
  • HTMLにロジックが書けない
  • DOM操作できない（一応）

DIもあるらしいよ

  • Dependency Injection
  • 文字列パースだからダサいけど
  • 難読化するとアウトよ
  • まあテストはしやすくなるかもね

SPAだけどブックマークもしたい

  • HTML5のpushState/popStateを利用
  • クライアントサイドでページの切り替えを行いつつ、それに合わせてURLの変更を行うことができる

AngularJSでの開発の流れ

  • HTMLにAngularでバインドすべきイベントを記述
  • Controllerでイベントをうけとる
  • モデルの変更をビジネスロジックとしてServiceに実装
  • データバインディングを起点にViewを更新
<html ng-app>
<head>
  <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.10/angular.min.js"></script>
  <script type="text/javascript">
  var mainCtrl = function($scope){
    $scope.users = [
      {"id":"444", "name":"華房誠"},
      {"id":"442", "name":"遠藤邦夫"}
    ];
  }

  var userCtrl = function($scope){
    //イベントハンドル
    $scope.increment = function(){
      //イベント後のビジネスロジックは本来Serviceに実装する
      $scope.user.id++;
      //ネストしたコントローラは親要素にアクセスできる
      //ビューはデータバインディングで自動更新される
    }
  }
  </script>
</head>
<body>
  <div ng-controller="mainCtrl">
    <li ng-repeat="user in users" ng-controller="userCtrl">
      {{user.id}} : {{user.name}}
      //イベント
      <button ng-click="increment()">+1</button>
    </li>
  </div>
</body>
</html>

いままでのJSフレームワークとはちょと違う

  • Backbone：グローバルを汚染したりせずに綺麗にJSを構造化させるための仕組みを提供（MVCモデル）
  • AngularJS：HTMLを拡張して動的処理できるようにする
  • WebComponentsなど、将来的なHTML5の拡張を見込んだ機能提供を指向している
  • JSでの開発不便さを改善するのではなく、次世代WEBのための仕組みを提供しようとしている
  • Googleらしい押しつけがましさ

違いとか

MVVC

この神資料を読む！ http://goo.gl/VmYljE

PODCASTを聞こう

Rebuild.fm #27

サーバサイドはRailsでFA？

  • インフラは DevOps、Infrastructure as Code、Immutable Infrastractureとか話題がある

  • フロントも JSフレームワークなど盛り上がっている

  • 手元でがんばらないとUI/UXこだわれないしね

  • 真ん中（サーバサイド）はもうRailsでいいよね的な

DevOps（デブオプス）

Development and Operations

  • 2009年のオライリーイベント

  • Flickrのエンジニアが「開発と運用が協力することで、1日に10回以上のペースでリリースが可能になること」を紹介

  • DevOpsという言葉は、このプレゼンの中で登場したもの

  • DevOpsとは、開発（Development）と運用（Operations）が協力し、ビジネス要求に対して、より柔軟に、スピーディに対応できるシステムを作り上げるためのプラクティス

  • あたりまえだけど重要

  • 重要だけどそうなってないところが多い

Joelも昔から言ってなかったっけ？

  • 開発者は定期的にサポート電話を受けるべきだってどっかで言ってた気が
  • 探したけど見つからなかった。。
  • http://japanese.joelonsoftware.com/

mBaaS（エムバース）

mBaaS（mobile Backend as a Service）

  • スマートフォンアプリの開発に必要な汎用的機能をAPI・SDKで提供
  • サーバサイドコードを書くことなく、サーバ連携するスマートフォンアプリを効率よく開発できるようにするクラウドサービス
  • サーバサイド自体なくてもいいんじゃね？

よくある機能

  • ユーザ管理
  • 認証・認可
  • SNS連携
  • データ管理
  • プッシュ通知
  • アクセス分析

Backbone（バックボーン） / Knockout（ノックアウト）

Haml（ハムル）

http://haml.ursm.jp/

  • HTMLを生成するためのテンプレートエンジン
  • 実体はマークアップ言語
  • 少ない行数でHTMLを記述することができる

こんなの

!!!
%html
  %head
    %title Hello, Haml!
  %body
    #header
      %h1 Hello, Haml!
    #content
      %p
        I use Haml
        %span.version= Haml::VERSION

Slim（スリム）

http://slim-lang.com/

  • Halmをさらにシンプルにしたテンプレートエンジン

こんなの

doctype html
html
  head
    title Slim Examples
    meta name="keywords" content="template language"
    meta name="author" content=author
    javascript:
      alert('Slim supports embedded javascript!')

  body
    h1 Markup examples

    #content
      p This example shows you how a basic Slim file looks like.

Grunt（グラント）

http://gruntjs.com/

  • Node.js製のビルドツール
  • JSミニファイ、圧縮、JSコンパイルなど

Sinatra（シナトラ）

http://www.sinatrarb.com/

  • Webアプリケーションフレームワーク
  • MVCに基づかない小さなアプリを構築できる

こんなの

#!/usr/bin/env ruby
require 'sinatra'
 
get '/' do
  redirect to('/hello/World')
end
 
get '/hello/:name' do
  "Hello #{params[:name]}!"
end

DI（ディーアイ・ディペンデンシーインジェクション）

http://goo.gl/lDqQx

  • Dependency Injection 依存性の注入
  • インスタンスをクラス内で生成（new）せずに、外部から注入すること

PhoneGap（フォンギャップ） / Cordova（コルドバ）

http://phonegap.com/ http://cordova.apache.org/

HTML5 WebComponents（ウエブコンポーネント）

http://japan.zdnet.com/development/sp_13html5experts/35035862/3/

  • WEBにおけるコンポーネント開発の標準的な枠組みを提供する仕様
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment