Movatterモバイル変換

∼そもそもWebって∼2015.09.10AngularJS勉強会勉強会

自己紹介高橋知成デザインエンジニア（見習い）去年の11月からツクロアでインターンをしています。今月30日からちょっと飛び立ちます。

今回は。。。最近よく耳にする『フレームワーク』『AngularJS』『何ちゃらjs』・・・デザイナーの方とディレクションの方に向けて

『ボヤッと』わかってもらえることがゴールです。

AngularJSとは・JavaScriptフレームワーク（Google製）・HTMLベースのテンプレート・双方向データバインディング・ルーティング機構・Ajaxサポート

まだ理解できなくていいです

そもそも自分が・今年の夏前から「AngularJS」を触り始める・「MEGANATOR」をその流れで実装してみることに・なのでAngularJS歴3ヶ月とか

まずは実際にどこで使われているのかを見てみましょう

メインでやってることは・画面遷移とそれに応じた表示の切り替え・データ通信・クリックなどのイベント処理・データの表示ーー「トップ」「計測」「フィッテング」などーーメガネのデータを取得ーーメガネを選択したらどうするのかなどーーメガネを繰り返しをして表示したりなど

それぞれ見ていきましょう

画面遷移meganator.tuqulore.com/#/

画面遷移meganator.tuqulore.com/#/set_up

画面遷移meganator.tuqulore.com/#/ﬁtting

画面遷移『/』の時はこれ表示『/set_up』の時はこれ表示

データの表示とイベント処理

でも、全部じゃないんです

を使っています・・・メガネの表示などは『∼JS』2個目

『∼JS』は本当にたくさんあります

しばしば組み合わせられて使われます

では、AngularJSの具体的な事例から離れて『JSライブラリー』『JSフレームワーク』なんでできたんだという話をします。

『技術の進化』『守備範囲』ポイントは

少し前まではJS＝『オワコン』・環境によって動かない・遅い・型がない

今ではJS＝『重要っしょ』・非同期通信（Googleマップなど）必須・弱点も補えるような仕組みの確立

こんなことする（できる）ようになった

そんなにやること（やれること）が多くなかった。アニメーションとかはFLASHだったり。。。少し前までは

自前のPCサーバーPCの性能の向上などがあり仕事量激増今まではサーバーでやっていた処理の代行や、新たな処理ができるように今では

『もっとラクしたいなっ』

『JSライブラリー』JavaScriptの便利機能集のようなものDOM操作系グラフィック系それぞれ『守備範囲』があります

例えば『ボックスをフェードアウト』させる

DOM操作系グラフィック系それぞれ『守備範囲』があります

『JSライブラリー』守備範囲に特化した便利機能集＝

それでもコード数千行とかになるケース続出

プログラミング言語ってとても自由だから色々なものが作れる

『コード数千行』。。。自由が故に

CSSで例えてみましょうインラインstyle.css headタグ内

『JSフレームワーク』『ライブラリー』＋『ルールを提供』

『JSフレームワーク』・ライブラリーと同じで『守備範囲』がある・ライブラリーと同じで『便利機能』を持っている

+『JSフレームワーク』・ライブラリーと同じで『守備範囲』がある・ライブラリーと同じで『便利機能』を持っている大枠の書くルールが決められている。「どこに」「どんな名前で」「どんな風に」

自分の脳内イメージですがAngularさん「自分を使うんですね。わかりました。ということは、大体○ △のようなサイトを作るんですね。それじゃ自分の指示に従ってもらいますね」

『守備範囲』ならばコードを短くスッキリと誰もが見易くなるようになる。

『技術の進化』『守備範囲』ポイントはここで一旦小まとめ

『守備範囲』フレームワークの

サーバー自前のPC通信データ・高橋知成・友達000人・写真000枚・グループ000に参加

サーバー自前のPCデータ・高橋知成・友達000人・写真000枚・グループ000に参加表示

サーバー自前のPC画面遷移ニュースフィード個人ページ

サーバー自前のPC通信イベント投稿する・友達申請

通信・画面遷移・データ・イベント・表示

『守備範囲』フレームワークの通信・画面遷移・データ・イベント・表示

『守備範囲』フルスタック通信・画面遷移・データ・イベント・表示

『守備範囲』通信・画面遷移・データ・イベント・表示表示特化

『守備範囲』通信・画面遷移・データ・イベント・表示便利機能少なめ

それじゃなんでもAngularJSで作れば。。。

スピードが遅い覚える量が多い決まりでガチガチ

守備範囲が狭く単体ではあまり意味がない

守備範囲が狭く単体ではあまり意味がない色々な組み合わせをすることができる

その時々の状況にあった選択が大切

んじゃAngularJSに向いてる物って?

ダッシュボード系アプリケーションhttps://dribbble.com/shots/1283529-The-Pony-Express-Mail

https://dribbble.com/shots/928345-Sush-io-Mac-App-Full-view+

それでは作ってみましょ

補足：APIについてhttp://api.gnavi.co.jp/ver1/RestSearchAPI/?『？』の後に『キーワード名』＝『キーワード』『＆』で複数続けて

まとめAngularJSのルールに則って書くことで短くスッキリと書くことができる。

まとめフレームワークとは守備範囲がある

ご静聴ありがとうございました2015.09.10勉強会

Movatterモバイル変換

Change Language

AngularJS勉強会「そもそもwebって」＠ツクロア勉強会（2015.09.10）

Embed presentation

Recommended

More Related Content

What's hot

Similar to AngularJS勉強会「そもそもwebって」＠ツクロア勉強会（2015.09.10）

AngularJS勉強会「そもそもwebって」＠ツクロア勉強会（2015.09.10）