JSの森を歩いてみる

参考にしたもの
http://qiita.com/koki_cheese/items/c559da338a3d307c9d88
https://www.amazon.co.jp/JS-Node-js%E3%81%AB%E3%82%88%E3%82%8BWeb%E3%82%AF%E3%83%AD%E3%83%BC%E3%83%A9%E3%83%BC-%E3%83%8D%E3%83%83%E3%83%88%E3%82%A8%E3%83%BC%E3%82%B8%E3%82%A7%E3%83%B3%E3%83%88%E9%96%8B%E7%99%BA%E3%83%86%E3%82%AF%E3%83%8B%E3%83%83%E3%82%AF-%E3%82%AF%E3%82%B8%E3%83%A9%E9%A3%9B%E8%A1%8C%E6%9C%BA/dp/4883379930/ref=sr_1_1?ie=UTF8&qid=1490742886&sr=8-1&keywords=web%E3%82%AF%E3%83%AD%E3%83%BC%E3%83%A9%E3%80%80nodejs

nodejs
http://qiita.com/ozawan/items/86ca7551d59005128892
http://qiita.com/megane42/items/2ab6ffd866c3f2fda066

npm
http://sadakoa.hateblo.jp/entry/2016/06/03/084623

bower
https://liginc.co.jp/web/programming/other-programming/134044

grunt

yo

Yeoman
http://qiita.com/sys1yagi/items/4d8c2994580c274fd3fa
http://yosuke-furukawa.hatenablog.com/entry/2013/07/04/085814

CoffeeScript

#nodejs

汎用となったJSの言語・実行環境

##nvm
nodejsのバージョン管理プログラム
https://github.com/creationix/nvm

取ってくる

git clone https://github.com/creationix/nvm.git ~/.nvm
source ~/.nvm/nvm.sh

最新版をフェッチ

cd ~/.nvm
git fetch

バージョンを確認

nvm --version

bashにパスを書く（どこに書くかはお好みで）

vi ~/.bashrc
...
if [[ -s ~/.nvm/nvm.sh ]];
 then source ~/.nvm/nvm.sh
fi

リモートにあるバージョンを確認

nvm ls-remote

最新の安定版をインストール

nvm install stable

nodeのバージョンを確認

node -v

##npm
nodejsのパッケージマネジャ

インストール
(Fedora 25)

sudo yum install npm -y

プロジェクトの初期設定をする

npm init

パッケージをインストール

#普通にインストール
npm install <package-name>

#package.jsonのdependenciesに記述
npm install --save <package-name>

#package.jsonのdevDependenciesに記述
npm install --save-dev <package-name>

オプションのち外はこんな感じ

directive	description
dependencies	実行時に必要となるパッケージ
devDependencies	ビルド時だけに必要となるパッケージ

package.jsonに基づいて依存関係のあるパッケージをインストールする

npm install

##bower
フロントサイドで使用するツールのパッケージマネジャ
https://bower.io/

インストール

npm install bower -g

バージョンの表示

bower -v

プロジェクトの初期化

bower init

パッケージのインストール

bower install <package-name> --save

ライブラリを検索

bower search ライブラリ名

キーワードから該当するものを検索

bower lookup ライブラリ名

bower.jsonに記載されているライブラリを確認

bower list

##yo

雛形作成ツール

##grunt

タスクランナー

##Yeoman

Google社が作成した総合開発ツール群
曰く、

昔々、yeomanはYoとBowerとGruntをラップした一つのツールであり、全部をyeomanというコマンドで実行していました。yeoman 1.0からこの依存状態を解消し、それぞれを別々のツールに分離したため、このような構成になっています。これにより、yoの汎用性が高まるのと同時にgrunt、bower、yo、それぞれの役割が明確になりました。

#MEAN
できない
参考
http://www.atmarkit.co.jp/ait/articles/1412/01/news041_3.html

頭文字	構成要素
M	MongoDB
E	express
A	AngularJS
N	Node.js

Angular cliのインストール

npm install -g angular-cli

gruntのインストール

npm install -g grunt-cli

mean-cliのインストール

npm install -g mean-cli

MEANスタックのひな型ディレクトリを作成
ディレクトリに移動
必要なモジュールをインストール

mean init sampleProject
cd sampleProject
npm install

##MongoDB
https://www.mongodb.com/
https://utage.headwaters.co.jp/blog/?p=5065

##express

##AngularJS

##Node.js

#Heroku
nodejsをデプロイできるPaaS
https://devcenter.heroku.com/categories/reference

##インストール

# <OS>は次のどれかで置換する：“linux”, “darwin”, “windows”, “freebsd”, “openbsd”
# <ARCH>は次のどれかで置換する：“amd64”, “386” or “arm”
wget https://cli-assets.heroku.com/branches/stable/heroku-<OS>-<ARCH>.tar.gz
#これはあれば不要
mkdir -p /usr/local/lib /usr/local/bin
tar -xvzf heroku-OS-ARCH.tar.gz -C /usr/local/lib
ln -s /usr/local/lib/heroku/bin/heroku /usr/local/bin/heroku
# /usr/local/binにパスが通っていれば使える

バージョン確認

heroku version

ログイン

heroku login
```

##デプロイの流れ

```
cd <app-path>
git init
git add .
git commit -m "comment"

##herokuのリモートレポジトリを作成（アプリが作られる）
heroku create

##リモートリポジトリの一覧を表示
git remote -v

##herokuへプッシュ（デプロイ）
git push heroku master
```

#MySQLと接続
参考
http://qiita.com/PianoScoreJP/items/7ed172cd0e7846641e13
http://dev.classmethod.jp/server-side/node-js-server-side/node-js-mysql-get-data-from-table-record/


接続

```
//モジュールの呼び出し
var mysql      = require('mysql');

//設定
var connection = mysql.createConnection({
  host     : 'hostname',
  user     : 'DB-user-name',
  password : 'password'
});

//コネクションでエラー処理
connection.connect(function(err) {
  if (err) {
    console.error('error connecting: ' + err.stack);
    return;
  }
  console.log('connected as id ' + connection.threadId);
});
```

herokuでmysqlを使用するには環境変数を参照し、インスタンスプールを使用する必要あり

```
var mysql	= require('mysql'			);
module.exports = mysql.createPool(process.env.DATABASE_URL);
```



#AngularJS

JSのフレームワーク

How to create a model
var myApp = angular.module('myModule', []);

How to create a controller in angular
var ngController = function($scope) {}

what is a module
a controller for different parts of your application. i.e. controllers, services, directives, filters, etc

what is a controller
a JavaScript function. the joy of the controller is to build a model lfor the view to display.

What is services?
A service in AngularJS is simply an object that provide some sort of services that can be reused with in an Angular application.

why do we need services?
Services encapsulate reusable logic that does not belong anywhere else (i.e. directives, filters, views, models, controllers)

what are the benefits of using services?
Resusability
Dpendency Injection
Testability


ng-model
使用可能タグ
input, select, texarea

#ハイブリッドアプリ

##ionic

###Androidで実機run

こんなエラーがでたら

```
Error: Failed to find 'ANDROID_HOME' environment variable. Try setting setting it manually.
Failed to find 'android' command in your 'PATH'. Try update your 'PATH' to include path to valid SDK directory.
```

環境変数を設定する

```
export ANDROID_HOME=<Android SDKのパス>
```
さらにこんなエラーがでたら

```
Error: /home/kenta/work/cutePuppyPics/platforms/android/gradlew: Command failed with exit code 1 Error output:
FAILURE: Build failed with an exception.

* What went wrong:
A problem occurred configuring root project 'android'.
> You have not accepted the license agreements of the following SDK components:
  [Android SDK Platform 25].
  Before building your project, you need to accept the license agreements and complete the installation of the missing components using the Android Studio SDK Manager.
  Alternatively, to learn how to transfer the license agreements from one workstation to another, go to http://d.android.com/r/studio-ui/export-licenses.html

* Try:
Run with --stacktrace option to get the stack trace. Run with --info or --debug option to get more log output.
```

https://teratail.com/questions/73333

他にも
https://teratail.com/questions/73333



##Promise
what is promise

通常

```
A(function(a) {
  B(a, function(b) {
     C(b, function(c) {
        done(c);
     }
  }
});
```

Promise

```
A().then(B).then(C).then(done);
```


##CoffeeScript
いろいろ簡単にできるJSのラッパー言語

インストール

```
npm install -g coffee-script
```

実行

```
coffee sample.coffee
```

#データ形式

|名前|description|
|---|---|
|JSON|{"key":"value",...}|
|JSON5|JSONの改良版。コメント記入可。キーはダブルクォーテーション不要。データの末尾にカンマ可。|
|CSON|CoffeeScriptのJSON|
|XML/RSM|タグを使用|
|YAML|インデントを使用|
|INI|name=value|
|CSV/TSV|言わずもがな|


#形態素解析
##ChaSen（茶筌）
##KyTea
##kuromoji - Java
##Igo - Java
##meCab（和布蕪）

###インストール(Fedora25)
http://taku910.github.io/mecab/#install-unix

```
su
cd /usr/src
curl -L -o mecab-0.996.tar.gz "<ファイルの場所>"
tar xvf mecab-0.996.tar.gz
tar xvf mecab-0.996.tar.gz 
cd mecab-0.996
./configure --enable-utf8-only && sudo make && sudo make install
cd ..
rm mecab-0.996.tar.gz 
```

辞書のインストール

```
tar zxfv mecab-ipadic-2.7.0-XXXX.tar.gz
cd mecab-ipadic-2.7.0-XXXX
##rootには/usr/local/binにパスが通っていないので設定
export PATH="$PATH":/usr/local/bin
./configure --with-charset=utf8 && make && make install
```

#スクレイピング

##cheerio-httpcli
ファイルをダウンロードしてJQueryっぽく扱える

##PhantomJS

##CasperJS

#Webデータソース
##Twitter
##Facebook
##はてなブックマーう
##Amazon
##Flicker
##Youtube
##Yahoo!Finance
##Wikipedia

#データの視覚化ライブラリ
http://www.jsgraphs.com/

##Goolgle Charts
##D3.js
https://d3js.org/