SlideShare uma empresa Scribd logo
1 de 15
TECHNOMOBILE
GROUP
HEAD OFFICE
TOKUSHIMA development section
| 5floor Column Minamiaoyama,7-1-5,Minamiaoyama,Minato-ku,Tokyo 107-0062,Japan
| 3floor Tokushimakenkohkagaku-center,Hiraishisumiyoshi,Kawauchi-cho,Tokushima-shi Tokushima 771-0134,Japan
シンプルな9つのサンプルで学ぶ
JavaScript初心者のためのAngularJSハンス゚オン
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script>
</head>
<body ng-app>
<div>
<p><input type="text" ng-model="name"></p>
<p>名前は{{name}}です。</p>
</div>
</body>
</html>
2
みなさんJQuery使ってますか?
COPYRIGHT(C) TECHNOMOBILE ALL RIGHTS RESERVED.
6
3
JQueryを使っていると自由度が高すぎ
て関数など整理しにくくありませんか?
COPYRIGHT(C) TECHNOMOBILE ALL RIGHTS RESERVED.
6
4
整理するならルールが明確になるよう
にフレームワークを使いましょう!!
COPYRIGHT(C) TECHNOMOBILE ALL RIGHTS RESERVED.
6
5
JavaScriptのフレームワークなら
AngularJSとReactが有名ですよね。
どっちがよいのでしょう?
COPYRIGHT(C) TECHNOMOBILE ALL RIGHTS RESERVED.
6
6
AngularJSはデザイン寄り、Reactはプログラ
マー寄りの感じはする。。。
まずは、使ってみることが大切。
今回はAngularJSを!!!
Reactはどこかの機会に
COPYRIGHT(C) TECHNOMOBILE ALL RIGHTS RESERVED.
6
7
AngularJSを勉強したことありますか?
かなり多機能でこれを全部理解しない
といけないのか。。。。と思いますよね。
COPYRIGHT(C) TECHNOMOBILE ALL RIGHTS RESERVED.
6
8
今回はフロント制作を楽にかっこよく
作ることに絞ってできるだけ簡単なサン
プルを紹介します。
COPYRIGHT(C) TECHNOMOBILE ALL RIGHTS RESERVED.
6
9
たった9つのサンプルです。すべてのサ
ンプルはスライド一枚に収まる量です。
COPYRIGHT(C) TECHNOMOBILE ALL RIGHTS RESERVED.
6
10
これだけ理解できればAngularJSは簡
単です。
シンプルに学びましょう。
COPYRIGHT(C) TECHNOMOBILE ALL RIGHTS RESERVED.
6
11
Chromeなどの最新のブラウザがあれば動作します。
6
事前準備
12
COPYRIGHT(C) TECHNOMOBILE ALL RIGHTS RESERVED.
6
この学びの対象者は?
→JavaScriptはなんとなくわかるけどちゃ
んとフレームワークを学びたい
教えないことは?
→ばりばりのJavaScriptプログラマーでは
ないので深い知識はありません。難しい質
問はしないで。
13
COPYRIGHT(C) TECHNOMOBILE ALL RIGHTS RESERVED.
講師
Gashfara,Inc.代表
デジタルハリウッド大学院客員講師
茂木健一
mogi@gashfara.com
kenichi.mogi@tcmobile.jp
http://facebook.com/mogiken
http://www.slideshare.net/mogiken1
自己紹介
[プロフィール/実績]
もぎ・けんいち●青山学院大学大学院卒。Gashfara,Inc.代表。本社はハワイですが出社したことなし。
ホノルルマラソンには参加w
青山学院大学大学院卒:エニックスでオリジナルゲーム制作(Z80アセンブラ CP/M)、SmallTalkで
人工知能開発(企業買収)。
(株)東洋情報システム退社後、(株)エイチアイ、グランスフィア(株)、(株)ファッション
ウォーカー(えびもえのEC)など数社のベンチャー企業の立ち上げ・創業期に参画し、ガシュファ
ラ・インクをUSで起業。システム開発ではゲーム、TOL(ツタヤオンライン)の立ち上げ。動画配
信システム(USENのGate01:Gyaoの前進)、電子マネーシステム(Bitcash)、ECフルフィルメント
システムなど、多彩な分野を経験。IT関連教育では1998年ころからデジハリの2.5階に間借りしな
がら教育コンテンツ作成(JIB社)。Brew、Java、セキュリティーなどの講師として活躍。現在、
(株)HUGGを設立し、スマホのカップル向けSNSサービス[HUGG]をグローバルに展開。㈱テクノ
モバイルにて技術サポート。
【著書】
BREWプログラミング実践バイブル [共著] (インプレス)、PHP逆引き大全 516の極意[共著](秀和
システム)
14
成長を実現させるシステム”モバイルトータルソリュー
ション”
Web
システム
1
スマホ
アプリ
2 ゲーム
アプリ
3
モバイルトータルソリューション
B2B2C
• コンシューマ向けの大規模Webシステムの開発からアプリ・ゲーム開発までをマルチデバイスで対応
高い技術力 市場ニーズとマッチ
大規模
Webシステム
に強い
Java,PHP
Strong1
最先端技術・独自
フレームワークで
効率的な
開発
Strong2
高トラフィック、
インフラ
ネットワーク
に強い
Strong3 プライマリー
ベンダー、
ヒアリング・
要件定義
に強い
StrongⅠ
情報資産の活用
最先端と
知見に強い
StrongⅡ
最先端のマルチ
デバイス
ウェアラブルに
強い
StrongⅢ
Mashup Awards 5年連続 受賞
会社名 株式会社テクノモバイル
設 立 2008年
資本金 2,500万円
代 表 播田 誠
従業員数 100名(グループ合計)
本社所在地
〒 107-0062
東京都港区南青山7-1-5 コラム南青山 5F
開発室
〒771-0134
徳島県徳島市川内町平石住吉209-5
徳島健康科学総合センター 3F
15
6
ここから先の資料はお問い合わせください

Mais conteúdo relacionado

Mais procurados

エンタープライズ分野での実践AngularJS
エンタープライズ分野での実践AngularJSエンタープライズ分野での実践AngularJS
エンタープライズ分野での実践AngularJS
Ayumi Goto
 
Visual studio 2013 Overview
Visual studio 2013 OverviewVisual studio 2013 Overview
Visual studio 2013 Overview
一希 大田
 
テスト自動化の様々な道具を使ってみた四方山話
テスト自動化の様々な道具を使ってみた四方山話テスト自動化の様々な道具を使ってみた四方山話
テスト自動化の様々な道具を使ってみた四方山話
haljik Seiji
 
次世代Web業務アプリケーション
次世代Web業務アプリケーション次世代Web業務アプリケーション
次世代Web業務アプリケーション
Fumio SAGAWA
 

Mais procurados (20)

エンタープライズ分野での実践AngularJS
エンタープライズ分野での実践AngularJSエンタープライズ分野での実践AngularJS
エンタープライズ分野での実践AngularJS
 
Webサイトに動きをつける、jQueryプラグインの設置方法 先生:田中 晶子
Webサイトに動きをつける、jQueryプラグインの設置方法 先生:田中 晶子Webサイトに動きをつける、jQueryプラグインの設置方法 先生:田中 晶子
Webサイトに動きをつける、jQueryプラグインの設置方法 先生:田中 晶子
 
今すぐブラウザでES6を使おう
今すぐブラウザでES6を使おう今すぐブラウザでES6を使おう
今すぐブラウザでES6を使おう
 
Visual studio 2013 Overview
Visual studio 2013 OverviewVisual studio 2013 Overview
Visual studio 2013 Overview
 
3分でわかるangular js
3分でわかるangular js3分でわかるangular js
3分でわかるangular js
 
DevLOVE Kansai KnockoutJS
DevLOVE Kansai KnockoutJSDevLOVE Kansai KnockoutJS
DevLOVE Kansai KnockoutJS
 
Night Hack LT
Night Hack LTNight Hack LT
Night Hack LT
 
グレープシティのJavaScriptライブラリ
グレープシティのJavaScriptライブラリグレープシティのJavaScriptライブラリ
グレープシティのJavaScriptライブラリ
 
これからフロントエンジニアを目指すあなたへ
これからフロントエンジニアを目指すあなたへこれからフロントエンジニアを目指すあなたへ
これからフロントエンジニアを目指すあなたへ
 
テスト自動化の様々な道具を使ってみた四方山話
テスト自動化の様々な道具を使ってみた四方山話テスト自動化の様々な道具を使ってみた四方山話
テスト自動化の様々な道具を使ってみた四方山話
 
一六社ブログ-プラグイン作成入門
一六社ブログ-プラグイン作成入門一六社ブログ-プラグイン作成入門
一六社ブログ-プラグイン作成入門
 
AllegroGraphでsgvizler 0.5を使うときの注意点
AllegroGraphでsgvizler 0.5を使うときの注意点AllegroGraphでsgvizler 0.5を使うときの注意点
AllegroGraphでsgvizler 0.5を使うときの注意点
 
エンタープライヤーのためのWeb Componentsハンズオン
エンタープライヤーのためのWeb ComponentsハンズオンエンタープライヤーのためのWeb Componentsハンズオン
エンタープライヤーのためのWeb Componentsハンズオン
 
開発ツール「Wijmo」と「SpreadJS」からみる業務アプリケーションの変遷とこれから
開発ツール「Wijmo」と「SpreadJS」からみる業務アプリケーションの変遷とこれから開発ツール「Wijmo」と「SpreadJS」からみる業務アプリケーションの変遷とこれから
開発ツール「Wijmo」と「SpreadJS」からみる業務アプリケーションの変遷とこれから
 
次世代Web業務アプリケーション
次世代Web業務アプリケーション次世代Web業務アプリケーション
次世代Web業務アプリケーション
 
Angularモダンweb開発セミナー紹介 20170923
Angularモダンweb開発セミナー紹介 20170923Angularモダンweb開発セミナー紹介 20170923
Angularモダンweb開発セミナー紹介 20170923
 
受託開発でのAngularJS - 第1回AngularJS 勉強会 at LIG
受託開発でのAngularJS - 第1回AngularJS 勉強会 at LIG受託開発でのAngularJS - 第1回AngularJS 勉強会 at LIG
受託開発でのAngularJS - 第1回AngularJS 勉強会 at LIG
 
UXを向上させる サイト高速化テクニック
UXを向上させる サイト高速化テクニックUXを向上させる サイト高速化テクニック
UXを向上させる サイト高速化テクニック
 
AngularJS入門
AngularJS入門AngularJS入門
AngularJS入門
 
「Selenium実践入門」で学ぶテスト自動化の世界
「Selenium実践入門」で学ぶテスト自動化の世界「Selenium実践入門」で学ぶテスト自動化の世界
「Selenium実践入門」で学ぶテスト自動化の世界
 

Destaque

ひとりでできるもん!サーバープログラム不要、Java Scriptだけで作るハイブリッドアプリ(iphone,android,web)...
ひとりでできるもん!サーバープログラム不要、Java Scriptだけで作るハイブリッドアプリ(iphone,android,web)...ひとりでできるもん!サーバープログラム不要、Java Scriptだけで作るハイブリッドアプリ(iphone,android,web)...
ひとりでできるもん!サーバープログラム不要、Java Scriptだけで作るハイブリッドアプリ(iphone,android,web)...
健一 茂木
 

Destaque (11)

ひとりでできるもん!サーバープログラム不要、Java Scriptだけで作るハイブリッドアプリ(iphone,android,web)...
ひとりでできるもん!サーバープログラム不要、Java Scriptだけで作るハイブリッドアプリ(iphone,android,web)...ひとりでできるもん!サーバープログラム不要、Java Scriptだけで作るハイブリッドアプリ(iphone,android,web)...
ひとりでできるもん!サーバープログラム不要、Java Scriptだけで作るハイブリッドアプリ(iphone,android,web)...
 
pケモンGoみたいなarアプリをandroidで作るハンズオン
pケモンGoみたいなarアプリをandroidで作るハンズオンpケモンGoみたいなarアプリをandroidで作るハンズオン
pケモンGoみたいなarアプリをandroidで作るハンズオン
 
自分だけの仮想通貨を作ってブロックチェーンを理解するハンズオン
自分だけの仮想通貨を作ってブロックチェーンを理解するハンズオン自分だけの仮想通貨を作ってブロックチェーンを理解するハンズオン
自分だけの仮想通貨を作ってブロックチェーンを理解するハンズオン
 
ブロックチェーンを理解して応援する「熊本がんばれ募金ハック」サイト作成ハンズオン
ブロックチェーンを理解して応援する「熊本がんばれ募金ハック」サイト作成ハンズオンブロックチェーンを理解して応援する「熊本がんばれ募金ハック」サイト作成ハンズオン
ブロックチェーンを理解して応援する「熊本がんばれ募金ハック」サイト作成ハンズオン
 
Docker環境でetherium開発環境を作る際のはまりどころ
Docker環境でetherium開発環境を作る際のはまりどころDocker環境でetherium開発環境を作る際のはまりどころ
Docker環境でetherium開発環境を作る際のはまりどころ
 
Java script初心者のためのnode.jsで学ぶドローン制御プログラミング
Java script初心者のためのnode.jsで学ぶドローン制御プログラミングJava script初心者のためのnode.jsで学ぶドローン制御プログラミング
Java script初心者のためのnode.jsで学ぶドローン制御プログラミング
 
Slackとgoogle appsscript(js)で作る俺の秘書ハンズオン
Slackとgoogle appsscript(js)で作る俺の秘書ハンズオンSlackとgoogle appsscript(js)で作る俺の秘書ハンズオン
Slackとgoogle appsscript(js)で作る俺の秘書ハンズオン
 
Ethereumをさわって実感するブロックチェーンハンズオン(新版はここ https://www.slideshare.net/mogiken1/et...
Ethereumをさわって実感するブロックチェーンハンズオン(新版はここ https://www.slideshare.net/mogiken1/et...Ethereumをさわって実感するブロックチェーンハンズオン(新版はここ https://www.slideshare.net/mogiken1/et...
Ethereumをさわって実感するブロックチェーンハンズオン(新版はここ https://www.slideshare.net/mogiken1/et...
 
Hyperledgerのチュートリアルで理解する基幹システム向けブロックチェーンハンズオン
Hyperledgerのチュートリアルで理解する基幹システム向けブロックチェーンハンズオンHyperledgerのチュートリアルで理解する基幹システム向けブロックチェーンハンズオン
Hyperledgerのチュートリアルで理解する基幹システム向けブロックチェーンハンズオン
 
Tensorflowのチュートリアルで理解するdeep learningはじめてハンズオン
Tensorflowのチュートリアルで理解するdeep learningはじめてハンズオンTensorflowのチュートリアルで理解するdeep learningはじめてハンズオン
Tensorflowのチュートリアルで理解するdeep learningはじめてハンズオン
 
Cocos2d js セットアップ for windows
Cocos2d js セットアップ for windowsCocos2d js セットアップ for windows
Cocos2d js セットアップ for windows
 

Semelhante a シンプルな9つのサンプルで学ぶJava Script初心者のためのAngularJS超入門ハンズオン

Spring Frameworkの今 (2013年版) #jjug_ccc #ccc_r17 #springframework
Spring Frameworkの今 (2013年版) #jjug_ccc #ccc_r17 #springframeworkSpring Frameworkの今 (2013年版) #jjug_ccc #ccc_r17 #springframework
Spring Frameworkの今 (2013年版) #jjug_ccc #ccc_r17 #springframework
Toshiaki Maki
 
Struts2を始めよう!
Struts2を始めよう!Struts2を始めよう!
Struts2を始めよう!
Shinpei Ohtani
 
Windows ストア lob アプリ開発のためのガイダンスとフレームワークのご紹介 rev
Windows ストア lob アプリ開発のためのガイダンスとフレームワークのご紹介 revWindows ストア lob アプリ開発のためのガイダンスとフレームワークのご紹介 rev
Windows ストア lob アプリ開発のためのガイダンスとフレームワークのご紹介 rev
Shotaro Suzuki
 

Semelhante a シンプルな9つのサンプルで学ぶJava Script初心者のためのAngularJS超入門ハンズオン (20)

CSS Nite in Matsuyama vol.1 - session 4
CSS Nite in Matsuyama vol.1 - session 4 CSS Nite in Matsuyama vol.1 - session 4
CSS Nite in Matsuyama vol.1 - session 4
 
WordPressをこれから始める人のためのテーマ講座
WordPressをこれから始める人のためのテーマ講座WordPressをこれから始める人のためのテーマ講座
WordPressをこれから始める人のためのテーマ講座
 
History api
History apiHistory api
History api
 
Sendai.html5#2
Sendai.html5#2Sendai.html5#2
Sendai.html5#2
 
Progressive Framework Vue.js 2.0
Progressive Framework Vue.js 2.0Progressive Framework Vue.js 2.0
Progressive Framework Vue.js 2.0
 
Spring Frameworkの今 (2013年版) #jjug_ccc #ccc_r17 #springframework
Spring Frameworkの今 (2013年版) #jjug_ccc #ccc_r17 #springframeworkSpring Frameworkの今 (2013年版) #jjug_ccc #ccc_r17 #springframework
Spring Frameworkの今 (2013年版) #jjug_ccc #ccc_r17 #springframework
 
JobSchedulerでCD(継続的デリバリ)
JobSchedulerでCD(継続的デリバリ)JobSchedulerでCD(継続的デリバリ)
JobSchedulerでCD(継続的デリバリ)
 
Reladomo in Scala #scala_ks
Reladomo in Scala #scala_ks Reladomo in Scala #scala_ks
Reladomo in Scala #scala_ks
 
Struts2を始めよう!
Struts2を始めよう!Struts2を始めよう!
Struts2を始めよう!
 
jQuery と MVC で実践する標準志向 Web 開発
jQuery と MVC で実践する標準志向 Web 開発jQuery と MVC で実践する標準志向 Web 開発
jQuery と MVC で実践する標準志向 Web 開発
 
jQueryの先に行こう!最先端のWeb開発トレンドを学ぶ
jQueryの先に行こう!最先端のWeb開発トレンドを学ぶjQueryの先に行こう!最先端のWeb開発トレンドを学ぶ
jQueryの先に行こう!最先端のWeb開発トレンドを学ぶ
 
Seasarプロジェクト徹底攻略
Seasarプロジェクト徹底攻略Seasarプロジェクト徹底攻略
Seasarプロジェクト徹底攻略
 
XML とは?
XML とは?XML とは?
XML とは?
 
WordBench Saitama vol.6
WordBench Saitama vol.6WordBench Saitama vol.6
WordBench Saitama vol.6
 
sgvizler
sgvizlersgvizler
sgvizler
 
Vue入門
Vue入門Vue入門
Vue入門
 
第1回 Magento Cafe Plus Kansai ~ Magentoカスタマイズ入門
第1回 Magento Cafe Plus Kansai ~ Magentoカスタマイズ入門第1回 Magento Cafe Plus Kansai ~ Magentoカスタマイズ入門
第1回 Magento Cafe Plus Kansai ~ Magentoカスタマイズ入門
 
Do not use document.write
Do not use document.writeDo not use document.write
Do not use document.write
 
Alfresco勉強会#36 alfresco 5でカスタムREST APIを作ってみよう
Alfresco勉強会#36 alfresco 5でカスタムREST APIを作ってみようAlfresco勉強会#36 alfresco 5でカスタムREST APIを作ってみよう
Alfresco勉強会#36 alfresco 5でカスタムREST APIを作ってみよう
 
Windows ストア lob アプリ開発のためのガイダンスとフレームワークのご紹介 rev
Windows ストア lob アプリ開発のためのガイダンスとフレームワークのご紹介 revWindows ストア lob アプリ開発のためのガイダンスとフレームワークのご紹介 rev
Windows ストア lob アプリ開発のためのガイダンスとフレームワークのご紹介 rev
 

Mais de 健一 茂木

Mais de 健一 茂木 (6)

Ethereumをさわって実感するブロックチェーンハンズオン
Ethereumをさわって実感するブロックチェーンハンズオンEthereumをさわって実感するブロックチェーンハンズオン
Ethereumをさわって実感するブロックチェーンハンズオン
 
自己紹介Lt
自己紹介Lt自己紹介Lt
自己紹介Lt
 
Oculusで会える俺のミクを作るハンズオン
Oculusで会える俺のミクを作るハンズオンOculusで会える俺のミクを作るハンズオン
Oculusで会える俺のミクを作るハンズオン
 
Java ScriptでつくるはじめてのiPhoneAndroidゲーム開発体験ハンズオン
Java ScriptでつくるはじめてのiPhoneAndroidゲーム開発体験ハンズオンJava ScriptでつくるはじめてのiPhoneAndroidゲーム開発体験ハンズオン
Java ScriptでつくるはじめてのiPhoneAndroidゲーム開発体験ハンズオン
 
はじめてのApple Watch開発体験ハンズオン
はじめてのApple Watch開発体験ハンズオンはじめてのApple Watch開発体験ハンズオン
はじめてのApple Watch開発体験ハンズオン
 
実践:今日から使えるビックデータハンズオン あなたはタイタニック号で生き残れるか?知的生産性UPのための機械学習超入門
実践:今日から使えるビックデータハンズオン あなたはタイタニック号で生き残れるか?知的生産性UPのための機械学習超入門実践:今日から使えるビックデータハンズオン あなたはタイタニック号で生き残れるか?知的生産性UPのための機械学習超入門
実践:今日から使えるビックデータハンズオン あなたはタイタニック号で生き残れるか?知的生産性UPのための機械学習超入門
 

シンプルな9つのサンプルで学ぶJava Script初心者のためのAngularJS超入門ハンズオン

Notas do Editor

  1. 弊社がご提供しているソリューション内容です。 企画から運営・保守にいたるまでを一気通貫で、 軸となるコンシューマ向けの大規模Webシステムをはじめ、スマホアプリ、ゲーム開発などをご提供しております。 特に大きな実績として、大規模ECシステム、求人検索サイトの開発となっております。 他にも音楽DLサイトや、業務を効率する管理系のシステムの実績も多数あります。 (30秒)