SlideShare une entreprise Scribd logo
1  sur  16
Télécharger pour lire hors ligne
第6回勉強会-2 
MEANの手前まで 
~Hello World!までのハンズオン~ 
内村 康一
今日の目次 
第1章 MEANとは?? 
第2章 下準備 
第3章 AngularJSに慣れよう
第1章 
第1章 MEANとは??
第1章 MEANとは?? 
MongoDB Express AngularJS Node.js 
NoSQLの 
代表格 
Node.js向け 
フレームワーク 
(サーバサイド) 
JavaScript 
フレームワーク 
(クライアントサイド) 
サーバーサイド 
JavaScript環境 
M E A N
MEANの概要 
引用:What Developers Mean When They Build a MEAN Stack - New Spin Digital
第2章 
第2章 下準備
AngularJSのダウンロード 
• https://angularjs.org/ で「ダウンロード」を選択 
• デフォルトのままで「Download」 
• 今回の「HelloWorld」フォルダに「angular.min.js 
」を置いておく
MongoDBのインストール(Windows) 
1.「http://www.mongodb.org/downloads」から 
MongoDBをダウンロード。 
2.ダウンロードしてきたzipを展開する 
3.展開したフォルダ名を 「mongodb」 に変更する 
4.mongodbbinにパスを通す 
5.コマンドプロンプトから「mongod」でmongodbを起動 
6.別のコマンドプロンプトからmongoシェルを扱う
MongoDBのインストール(Mac) 
1.ターミナルから「$ brew install mongodb」 
2.PATHを通す 
3.mongodbの起動「$ sudo mongod」 
4.別のターミナルからmongoシェルを扱う 
「$ mongo」 
参考:Qiita(http://qiita.com/yoh-nak/items/f0c429f10347ae7ec98b)
MongoDBをちょっといじる 
1.Mongo実行中に・・・ 
「use sample」でsampleデータベースが自動生成 
2.コレクション(=テーブル)「articles」にドキュメントを追加 
> db.articles.save({ 
... title: "MongoDB テスト", 
... author: "テスト管理者" 
... }) 
3.ドキュメントを検索 
# ドキュメントを検索する 
> db.articles.find () 
{ "_id" : ObjectId(○○),"title" : "MongoDB テスト", "author" : "テス 
ト管理者" }
第3章 
第3章 AngularJSに慣れよう
1.準備 
Helloworldフォルダの中に、「hello.html」と 
「app.js」を作ってください。 
(空でイイです)
2.HTMLの記述 
<!doctype html> 
<head> 
<script src="angular.min.js"></script> 
<script src="app.js"></script> 
</head> 
<body ng-app="Hello"> //①Body全体がスコープ 
<div ng-controller="HHHHeeeellllllllooooCCCCttttrrrrllll"> //②利用するアプリケーション 
                       モジュールを指定 
<p>{{hello.text}}, world!!</p> //③{{}}で囲まれた部分に反映 
</div> 
</body> 
</html>
3.app.jsの記述 
var app = angular.module("Hello", []); //①第1引数がコントローラ 
名、第2引数が使用したい外部モジュール(配列) 
app.controller("HHHHeeeellllllllooooCCCCttttrrrrllll", function($scope){ //②コントローラ呼 
び出し 
$scope.hello = {  
text : "Hello" //③「hello.text」に「Hello」を反映 
}; 
});
4.実行 
「hello.html」を開いて 
「Hello,World!!」が表示されればOKです。
ありがとうございました。 
ご清聴ありがとうございました。

Contenu connexe

Tendances

ふくあずLt(最近のクラウド業界)
ふくあずLt(最近のクラウド業界)ふくあずLt(最近のクラウド業界)
ふくあずLt(最近のクラウド業界)
Kazunori Hamamoto
 

Tendances (20)

ふくあずLt(最近のクラウド業界)
ふくあずLt(最近のクラウド業界)ふくあずLt(最近のクラウド業界)
ふくあずLt(最近のクラウド業界)
 
俺的 Ignite 2021 Fall Update まとめ
 俺的 Ignite 2021 Fall Update まとめ 俺的 Ignite 2021 Fall Update まとめ
俺的 Ignite 2021 Fall Update まとめ
 
20130222 osc tokyo
20130222 osc tokyo20130222 osc tokyo
20130222 osc tokyo
 
Oss on Azure, Websites, WordPress
Oss on Azure, Websites, WordPressOss on Azure, Websites, WordPress
Oss on Azure, Websites, WordPress
 
マニアックス5Sql azure
マニアックス5Sql azureマニアックス5Sql azure
マニアックス5Sql azure
 
Memtest86をかけてみた話
Memtest86をかけてみた話Memtest86をかけてみた話
Memtest86をかけてみた話
 
JAWS-UG 磐田支部 第7回勉強会Agenda
JAWS-UG 磐田支部 第7回勉強会AgendaJAWS-UG 磐田支部 第7回勉強会Agenda
JAWS-UG 磐田支部 第7回勉強会Agenda
 
BIOSからUEFI
BIOSからUEFIBIOSからUEFI
BIOSからUEFI
 
Technical session 1 新機能web サイトで実現する web アプリケーション高速開発
Technical session 1 新機能web サイトで実現する web アプリケーション高速開発Technical session 1 新機能web サイトで実現する web アプリケーション高速開発
Technical session 1 新機能web サイトで実現する web アプリケーション高速開発
 
正式リリースされた.Net coreに少し触れ合ってみる
正式リリースされた.Net coreに少し触れ合ってみる正式リリースされた.Net coreに少し触れ合ってみる
正式リリースされた.Net coreに少し触れ合ってみる
 
Azure Updates from Build 2021
Azure Updates from Build 2021Azure Updates from Build 2021
Azure Updates from Build 2021
 
Azureで、動け動け動けconcrete5 !!
Azureで、動け動け動けconcrete5 !!Azureで、動け動け動けconcrete5 !!
Azureで、動け動け動けconcrete5 !!
 
Technical session 2 iaa s 始めました~自社内にある windows も linux もそして sql server も azur...
Technical session 2 iaa s 始めました~自社内にある windows も linux もそして sql server も azur...Technical session 2 iaa s 始めました~自社内にある windows も linux もそして sql server も azur...
Technical session 2 iaa s 始めました~自社内にある windows も linux もそして sql server も azur...
 
for Developer、 Microsoft Edge とInternet Explorer で 新しくサポートされるAPI
for Developer、Microsoft Edge とInternet Explorer で新しくサポートされるAPI for Developer、Microsoft Edge とInternet Explorer で新しくサポートされるAPI
for Developer、 Microsoft Edge とInternet Explorer で 新しくサポートされるAPI
 
regrowth_configurationtool
regrowth_configurationtoolregrowth_configurationtool
regrowth_configurationtool
 
【 Zabbix 2.0 】zabbix 2.0による簡単 MySQL 監視 #Zabbix
【 Zabbix 2.0 】zabbix 2.0による簡単 MySQL 監視 #Zabbix【 Zabbix 2.0 】zabbix 2.0による簡単 MySQL 監視 #Zabbix
【 Zabbix 2.0 】zabbix 2.0による簡単 MySQL 監視 #Zabbix
 
Microsoft Edgeで サポートされる 新しい API について
Microsoft Edgeでサポートされる新しい API についてMicrosoft Edgeでサポートされる新しい API について
Microsoft Edgeで サポートされる 新しい API について
 
Non-coding! Azure
Non-coding! AzureNon-coding! Azure
Non-coding! Azure
 
後期講座05
後期講座05後期講座05
後期講座05
 
[MW01] ご注文は Linux + Docker ですか? Windows だけじゃない App Service を使い切る
[MW01] ご注文は Linux + Docker ですか? Windows だけじゃない App Service を使い切る[MW01] ご注文は Linux + Docker ですか? Windows だけじゃない App Service を使い切る
[MW01] ご注文は Linux + Docker ですか? Windows だけじゃない App Service を使い切る
 

En vedette (8)

Final live project
Final live projectFinal live project
Final live project
 
第6回鹿児島node.jsの会資料_内村
第6回鹿児島node.jsの会資料_内村第6回鹿児島node.jsの会資料_内村
第6回鹿児島node.jsの会資料_内村
 
Big data wonderland
Big data wonderlandBig data wonderland
Big data wonderland
 
第3回鹿児島node.jsの会資料_内村
第3回鹿児島node.jsの会資料_内村第3回鹿児島node.jsの会資料_内村
第3回鹿児島node.jsの会資料_内村
 
第1回鹿児島node.jsの会資料_内村
第1回鹿児島node.jsの会資料_内村第1回鹿児島node.jsの会資料_内村
第1回鹿児島node.jsの会資料_内村
 
第2回鹿児島node.jsの会資料_内村
第2回鹿児島node.jsの会資料_内村第2回鹿児島node.jsの会資料_内村
第2回鹿児島node.jsの会資料_内村
 
What's new in digital marketing to improve your subscription marketing
What's new in digital marketing to improve your subscription marketingWhat's new in digital marketing to improve your subscription marketing
What's new in digital marketing to improve your subscription marketing
 
Stinnes-Entscheidung des BGH
Stinnes-Entscheidung des BGHStinnes-Entscheidung des BGH
Stinnes-Entscheidung des BGH
 

Similaire à 第6回鹿児島node.jsの会2資料_内村

120512 metro styleapp_javascript
120512 metro styleapp_javascript120512 metro styleapp_javascript
120512 metro styleapp_javascript
Takayoshi Tanaka
 
Hokuriku.net 2013 01-26 node.js
Hokuriku.net 2013 01-26 node.jsHokuriku.net 2013 01-26 node.js
Hokuriku.net 2013 01-26 node.js
Tadahiro Ishisaka
 
OpenCVをAndroidで動かしてみた
OpenCVをAndroidで動かしてみたOpenCVをAndroidで動かしてみた
OpenCVをAndroidで動かしてみた
徹 上野山
 

Similaire à 第6回鹿児島node.jsの会2資料_内村 (20)

JavaScript(AngularJS・React.js)で作る iOS・Androidアプリハンズオン
JavaScript(AngularJS・React.js)で作る iOS・AndroidアプリハンズオンJavaScript(AngularJS・React.js)で作る iOS・Androidアプリハンズオン
JavaScript(AngularJS・React.js)で作る iOS・Androidアプリハンズオン
 
MEANスタック提案プレゼンテーション
MEANスタック提案プレゼンテーションMEANスタック提案プレゼンテーション
MEANスタック提案プレゼンテーション
 
後期講座01
後期講座01後期講座01
後期講座01
 
Node.js Tutorial at Hiroshima
Node.js Tutorial at HiroshimaNode.js Tutorial at Hiroshima
Node.js Tutorial at Hiroshima
 
Node.js Hands-On
Node.js Hands-OnNode.js Hands-On
Node.js Hands-On
 
.NET Coreから概観する.NETのOSSへの取り組み
.NET Coreから概観する.NETのOSSへの取り組み.NET Coreから概観する.NETのOSSへの取り組み
.NET Coreから概観する.NETのOSSへの取り組み
 
webpackを使ったワンランク上のモダンJSカスタマイズ_門屋 亮氏
webpackを使ったワンランク上のモダンJSカスタマイズ_門屋 亮氏webpackを使ったワンランク上のモダンJSカスタマイズ_門屋 亮氏
webpackを使ったワンランク上のモダンJSカスタマイズ_門屋 亮氏
 
120512 metro styleapp_javascript
120512 metro styleapp_javascript120512 metro styleapp_javascript
120512 metro styleapp_javascript
 
Node.js基礎の基礎 - Miyazaki.js vol.2
Node.js基礎の基礎 - Miyazaki.js vol.2Node.js基礎の基礎 - Miyazaki.js vol.2
Node.js基礎の基礎 - Miyazaki.js vol.2
 
Docker for Windows & Web Apps for Containers 実践活用技法
Docker for Windows & Web Apps for Containers 実践活用技法Docker for Windows & Web Apps for Containers 実践活用技法
Docker for Windows & Web Apps for Containers 実践活用技法
 
MongoDBCSharp
MongoDBCSharpMongoDBCSharp
MongoDBCSharp
 
Hokuriku.net 2013 01-26 node.js
Hokuriku.net 2013 01-26 node.jsHokuriku.net 2013 01-26 node.js
Hokuriku.net 2013 01-26 node.js
 
OpenCVをAndroidで動かしてみた
OpenCVをAndroidで動かしてみたOpenCVをAndroidで動かしてみた
OpenCVをAndroidで動かしてみた
 
Sails.jsのメリット・デメリット
Sails.jsのメリット・デメリットSails.jsのメリット・デメリット
Sails.jsのメリット・デメリット
 
Nodejs
NodejsNodejs
Nodejs
 
Hello, Node.js
Hello, Node.jsHello, Node.js
Hello, Node.js
 
ASP.NET MVC プログラミング入門の入門
ASP.NET MVC プログラミング入門の入門ASP.NET MVC プログラミング入門の入門
ASP.NET MVC プログラミング入門の入門
 
静的解析Klocwork とJenkins CIの連携
静的解析Klocwork とJenkins CIの連携静的解析Klocwork とJenkins CIの連携
静的解析Klocwork とJenkins CIの連携
 
JavaScript(AngularJS)で作る iOS・Androidアプリ開発ハンズオン
JavaScript(AngularJS)で作る iOS・Androidアプリ開発ハンズオンJavaScript(AngularJS)で作る iOS・Androidアプリ開発ハンズオン
JavaScript(AngularJS)で作る iOS・Androidアプリ開発ハンズオン
 
Microsoft azureとdockerとansibleと
Microsoft azureとdockerとansibleとMicrosoft azureとdockerとansibleと
Microsoft azureとdockerとansibleと
 

Plus de Koichi Uchimura (7)

痛すぽ事業計画書
痛すぽ事業計画書痛すぽ事業計画書
痛すぽ事業計画書
 
第7回鹿児島Node.jsの会勉強会資料
第7回鹿児島Node.jsの会勉強会資料第7回鹿児島Node.jsの会勉強会資料
第7回鹿児島Node.jsの会勉強会資料
 
えあすぽ
えあすぽえあすぽ
えあすぽ
 
痛すぽ_プレゼン資料
痛すぽ_プレゼン資料痛すぽ_プレゼン資料
痛すぽ_プレゼン資料
 
第5回鹿児島node.jsの会資料_内村
第5回鹿児島node.jsの会資料_内村第5回鹿児島node.jsの会資料_内村
第5回鹿児島node.jsの会資料_内村
 
第4回鹿児島node.jsの会資料_内村
第4回鹿児島node.jsの会資料_内村第4回鹿児島node.jsの会資料_内村
第4回鹿児島node.jsの会資料_内村
 
第1回鹿児島node.jsの会資料_内村
第1回鹿児島node.jsの会資料_内村第1回鹿児島node.jsの会資料_内村
第1回鹿児島node.jsの会資料_内村
 

第6回鹿児島node.jsの会2資料_内村