LoginSignup
1
4

More than 5 years have passed since last update.

JSの森を歩いてみる

Last updated at Posted at 2017-03-18

参考にしたもの
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

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)

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

データの視覚化ライブラリ

Goolgle Charts

D3.js

1
4
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
1
4