JSの森を歩いてみる
Table of Contents
参考にしたもの 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/