2018-03-19

【Node.js】npmのパッケージserveを使ってサーバを立てる

npmとは

npmはNode.js環境下で使われるJavaScriptのパッケージマネージャです。

Javaで使われるMavenやpythonのpipなどのようにライブラリを一元管理することができ、
コマンド一発で外部リポジトリからライブラリをインストールすることができます。

またJavaScriptのパッケージマネージャだけあってフロントエンドの開発に親和性が高く、
npm scriptsと呼ばれるスクリプトを呼び出し、ビルドやサーバ起動等もできます。

npmのインストール

# nodebrew(node.jsのバージョン管理ツール)をインストール
$ brew install nodebrew

# 最新のnode.jsをインストール
$ nodebrew install-binary latest

# node.jsのバージョンを指定して有効化
$ nodebrew use v9.8.0

# nodeコマンドが使えるように使用しているシェルのrcファイルにPATH記述追加
$ echo 'export PATH=$PATH:/Users/...../.nodebrew/current/bin' >> ~/.bashrc
$ source ~/.bashrc

$ npm -v

npmが管理するディレクトリを初期化

npmはプロジェクトごとにパッケージの管理を行うことができます。
パッケージ管理の対象としたいディレクトリで以下のコマンドを実行します。

$ npm init

コマンドを実行すると、初期化を行うにあたりいくつか質問されます。
この内容はpackage.jsonファイルとなって、プロジェクト配下に保存されます。

$ ls
package.json

$ cat package.json
{
  "name": "test",
  "version": "1.0.0",
  "description": "test package",
  "main": "index.js",
  "scripts": {
    "test": "test"
  },
  "repository": {
    "type": "git",
    "url": "none"
  },
  "keywords": [
    "test"
  ],
  "author": "rennnosuke",
  "license": "MIT"
}

今後、npmを使ってビルドやサーバ起動をする際にpackage.jsonが必要になります。

npmでサーバを立てる

npmコマンドによってサーバを立てます。

# npm serveのインストール
$ npm install -g serve

# 実行
$ serve

   ┌──────────────────────────────────────────────────┐
   │                                                  │
   │   Serving!                                       │
   │                                                  │
   │   - Local:            http://localhost:5000      │
   │   - On Your Network:  http://192.168.0.10:5000   │
   │                                                  │
   │   Copied local address to clipboard!             │
   │                                                  │
   └──────────────────────────────────────────────────┘

無事立ち上がりました！

認証込みでサーバ立ち上げ

--authオプションを組み合わせることで、ベーシック認証込みでサーバを立ち上げることができます。

$ SERVE_USER=leo SERVE_PASSWORD=1234 serve --auth

アプリケーション内で`serve`を使用

アプリケーション内でserveを呼び出すこともできます。
動的にサーバ起動・終了・設定を行いたい場合に。

const serve = require('serve');
const server = serve(__dirname, {
  port: 1337,
  ignore: ['node_modules']
});

参考文献

www.npmjs.com

2018-03-18

【JavaScript】DomParserを使ってXMLやHTML文字列をパースする

DomParserとは

DomParserはJavascriptに組み込みで実装されている、XML/HTML用パーサです。
文字列形式のXMLやHTMLをパースし、DOM情報を保持するdocumentオブジェクトに変換します。

documentオブジェクトの持つプロパティ等の仕様はこちら

HTMLをパースする

文字列形式のHTMLは以下のようにしてパースできます。

// HTML文字列
let html = 
"
<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8" />
  <title>Title</title>
</head>
<body>
  <p>hoge</p>
</body>
</html>
";
// DOMParserオブジェクト
let parser = new DOMParser();
// HTML文字列をパースし、documentオブジェクトを返す
let doc = parser.parseFromString(html, "text/html");

parseFromString(htmlStr, "text/html")メソッドでパース可能。
第二引数にtext/htmlを指定するのがミソです。

XMLをパースする

HTMLだけでなく、XML形式の文字列もパースすることができます。

let xml = 
"
<note>
<to>Tove</to>
<from>Jani</from>
<heading>Reminder</heading>
<body>Don't forget me this weekend!</body>
</note>
";
let parser = new DOMParser();
let doc = parser.parseFromString(xml, "text/xml");

パース可能な文書一覧

以下の文書タイプがサポートされているようです。

"text/html",
"text/xml",
"application/xml",
"application/xhtml+xml",
"image/svg+xml"

パースできる文書にはXMLとHTMLのほか、SVGもパースすることができます。

先ほど文書をパースするとdocumentオブジェクトを返戻すると述べましたが、厳密には

XMLをパースした場合にはXMLDocumentオブジェクト
HTMLをパースした場合にはHTMLDocumentオブジェクト
SVGをパースした場合にはSVGDocumentオブジェクト

が返戻されます。

2018-03-17

【AngularJS】AngularJSの組み込みjQuery "jqLite" を使う

AngularJS

jqLiteとは

jqLiteはAngularJSに組み込みで実装されている軽量版JQueryです。
JQueryのようにDOM要素やHTML文字列を操作することができます。

使い方

angular.element()を使うと、JQueryの$()のように働きます。

// id指定
angular.element('#element_id');
// クラス名指定
angular.element(document.getElementsByClassName('.class_name')[0]);

angular.elementはjQueryのラッパーとして働きます。
jQueryが使える環境下であればそのままjQueryを呼び出し、
使用できない環境であればjQliteが呼ばれる仕組みになっています。

jQueryを呼び出したい場合は通常のjQueryを読み込んで使用するか、
ngJqディレクティブを使用することでjqliteをjQuery経由で使用することができます。

使用可能な関数

jQliteは軽量なjQueryなので、使用できる関数に制限があります。
また、AngularJSのバージョンによっても使用可能な関数が変わってきます。

addClass()
after()
append()
attr()
bind() -> 非推奨。代わりにon()を推奨
children()
clone()
contents()
css()
data()
detach()
empty()
eq()
find()
hasClass()
html()
next()
on()
off()
one()
parent()
prepend()
prop()
ready()
remove()
removeAttr()
removeClass()
removeData()
replaceWith()
text()
toggleClass()
triggerHandler()
unbind() -> 非推奨。代わりにoff()を推奨
val()
wrap()

`angular.element()`が呼べるメソッド

angular.element()が返戻するオブジェクトには、上記で紹介したメソッドに加え、$()が返すオブジェクトでは呼べないメソッドも実装されています。

controller(directiveName)

指定した要素、またはその親要素に紐付けたControllerオブジェクトを取得します。
引数を与えなかった場合、ngControllerディレクティブによって紐付けたControllerオブジェクトが返戻されます。
引数をキャメルケースのディレクティブとして与えた場合、指定したディレクティブのControllerが取得できます。

injector()

要素のInjectorを取得します。

scope()

指定した要素、またはその親要素のscopeオブジェクトを取得します。

isolateScope()

指定した要素に紐付けたscopeオブジェクトを取得します。

inheritedData(key)

指定したキー値keyに一致する属性を親要素を辿りつつ探索し、マッチした場合にそのvalue値を返戻する。

2018-03-16

YEOMANでAngularJSプロジェクトにControllerを追加する

メモ。 YEOMANでジェネレータgenerate-angularをインストールしている場合、
以下のコマンドでControllerの作成も自動でやってくれます。

# 生成したいプロジェクトディレクトリ上で実行
$ yo angular:controller MyNewController 
# 生成
create app/scripts/controllers/mynewcontroller.js
create test/spec/controllers/mynewcontroller.js

ただし、controllerを作成するためには予めyo generate-angularでAngularJS用リポジトリを作成しておく必要があります。

.
├── README.md
├── app
│   ├── 404.html
│   ├── favicon.ico
│   ├── images
│   │   └── yeoman.png
│   ├── index.html
│   ├── robots.txt
│   ├── scripts
│   │   ├── app.js
│   │   └── controllers
│   │       └── main.js
│   ├── styles
│   │   └── main.scss
│   └── views
│       └── main.html
├── bower.json
├── gulpfile.js
├── package.json
└── test
    └── spec
        └── controllers
            └── main.js

2018-03-15

YEOMANを使って高速にAngularJSプロジェクトを作る

YEOMANとは

YEOMANはWebアプリケーションジェネレータと呼ばれるツールの一つです。
新しいアプリケーションを作成する際に必要なディレクトリやコンポーネントを自動作成することができます。

Web開発を始める時、プロジェクトのディレクトリ構成やツールの導入の仕方で迷うことはよくあると思いますが、 YEOMANを使うことで、構成に迷うことなくプロジェクトをすぐに立ち上げることができます。

またYEOMANのディレクトリ構成がある種のスタンダードになりつつあるようなので、
既にあるプロジェクトにもYEOMANの構成を取り入れてみる、というのもありだと思います。

YEOMANを使ってみる

さっそくYEOMANを使ってみましょう。

環境はMac OS Xです。
Windowsの方はPowerSHellかcmderでお願いします。。。

先ずはnpmを使い、コマンドツールyoをインストールします。

$ npm install -g yo

このyoコマンドを使って、以降プロジェクトのテンプレート作成等を行っていきます。

yoをインストールしたら、次はWebアプリケーションジェネレータをインストールします。

$ npm install -g generator-[webapp]

[webapp]の箇所には作成したいWebアプリケーションのジェネレータ名が入ります。
インストールできるジェネレータ一覧はこちら -> Generator

ジェネレータ一覧を見るとフレームワークの名前がちらほらと見えるので、
自分の作成したいWebアプリケーションで使うフレームワーク用ジェネレータを入れていきましょう。

今回はAngularJSのジェネレータをインストールしていきます。

$npm install -g generator-webapp

次に、プロジェクトのテンプレートを作成したいディレクトリに移動し、
以下のyoコマンドを実行。

# ディレクトリ移動
$ cd yoman
# テンプレート作成
$ yo angular

初めてyoコマンドを実行する場合、匿名レポート提出許可のオプションが出てくると思いますがこちらはお好みでYまたはnを入力。

? ==========================================================================
We're constantly looking for ways to make yo better! 
May we anonymously report usage statistics to improve the tool over time? 
More info: https://github.com/yeoman/insight & http://yeoman.io
========================================================================== (Y/n)

次におじさんAAが出てきます。
同時に「Gruntの代わりにGulp使う？」と聞いてきますが、ここではyを入力。

     _-----_     
    |       |    ╭──────────────────────────╮
    |--(o)--|    │    Welcome to Yeoman,    │
   `---------´   │   ladies and gentlemen!  │
    ( _´U`_ )    ╰──────────────────────────╯
    /___A___\   /
     |  ~  |     
   __'.___.'__   
 ´   `  |° ´ Y ` 

Out of the box I include Bootstrap and some AngularJS recommended modules.

? Would you like to use Gulp (experimental) instead of Grunt? Yes

ちなみにこのGruntおよび Gulpはタスクランナーと呼ばれるツールで、
Webアプリケーションの様々な処理をタスクという単位で自動実行するのに使います。

その後もYesを入力していきます。

# Sass : コンパイルするとcssになるスクリプト(Yes)
? Would you like to use Sass? Yes

# Bootstrap : イケてる鉄板CSSライブラリ(Yes)
? Would you like to include Bootstrap? Yes

# angular用ライブラリ群(Yes)
? Which modules would you like to include? 
angular-animate.js, 
angular-cookies.js, 
angular-resource.js, 
angular-route.js,
angular-sanitize.js,
angular-touch.js

最後に導入したいライブラリを選択してEnterを押すとプロジェクトの生成が開始されます。

.
├── README.md
├── app
│   ├── 404.html
│   ├── favicon.ico
│   ├── images
│   │   └── yeoman.png
│   ├── index.html
│   ├── robots.txt
│   ├── scripts
│   │   ├── app.js
│   │   └── controllers
│   │       └── main.js
│   ├── styles
│   │   └── main.scss
│   └── views
│       └── main.html
├── bower.json
├── gulpfile.js
├── package.json
└── test
    └── spec
        └── controllers
            └── main.js

AngularJS Webアプリケーションプロジェクトのテンプレートができました！

YEOMANを使えば、新しいフレームワークを試したいときにも簡単に開発を始めることができそうですね。
またテンプレート作成時に導入されるツールの種類から「このフレームワークにはこういうツールを導入すると良いのかも」というように、必要なWeb開発ツールについて新しい示唆を得ることもできそうです。

2018-03-14

【AngularJS】ルーティングを設定する

AngularJS

AngularJSはSPAを実装するフレームワークであるため、単一のページを読み込んだ後にクライアント側で柔軟に表示を切り替えていく機能を備えています。

AngularJSでは$routeProviderを使うことによって、リクエストURL別にコントローラーやテンプレートを切り替えることができます。

ルーティングを設定

ルーティングの設定はconfigメソッドを使ってやっていきます。
configメソッドはAngularJSアプリケーションの前処理（configフェーズ）を記述するために使われます。

なお、configフェーズではServiceのインスタンスが生成されません。

// ルーティング情報を記述
angular.module('App')
.config(function($routeProvider) {
  $routeProvider
    .when('/', {
      templateUrl: '../../views/index.html',
      controller: 'MainController'
    })
    .when('/hoge', {
      templateUrl: '../../views/hoge.html',
      controller: 'HogeController'
      controllerAs: 'HogeCtrl'
      resolve: {
        currentHoge: 'currentHoge' 
      }
    })
    .otherwise({
      redirectTo: '/'
    });
  }]);

$routeProviderのwhenメソッドを呼び出し、リクエストURLと対応するHTMLファイル、Controllerなどを登録していきます。

パラメータ

templateUrl

パスが入力されたときに表示するHTMLテンプレートファイルです。

controller

表示するHTMLテンプレートファイルに対応するControllerです。

controllerAs

Controllerの別変数名を設定できます。Controllerの持つ変数時などに、この変数を使うことができます。

resolve

Promiseオブジェクトを返戻するサービス名を指定すると、サービス内の全てのPromiseに対してresolveが呼ばれたときに、Promiseの値を注入します。

そのほか、下記のパラメータを設定できます。

template : 文字列としてテンプレートを設定する
redirectTo : リダイレクト先を設定する
reloadOnSear : $location.search/hashが変更された時、設定したルーティング先を再読込するかどうか
caseInsentiveMatch : ルーティング先の大文字/小文字を区別する

2018-03-13

【AngularJS】Controller間で共有可能な値を定義する

AngularJS

AngularJSでは、Controller間で共有可能な値を定義する方法が二通りあります。

value
constant

value

valueメソッドを使うことで、Controller間で共有できる値を定義することができます。
定義した値はControllerの引数に設定することで使用可能になります。
FactoryやService内でも同様にして利用可能です。

// 値の定義
angular.module('MyApp',[])
  .value("hogeStr", "hogehoge")
  .value("nHoge", 123)
  .value("isHoge", true)
  .value("hogeObj", {"hoge" : "1", "fuga" : "2"});

// 使用時はControllerの引数に渡す
angular.module('MyApp')
  .controller('MyController', [
    '$scope',
    'hogeStr',
    'nHoge',
    'isHoge',
    'hogeObj',
    function($scope, hogeStr, nHoge, isHoge, hogeObj) {
      console.log(hogeStr);  // hogehoge
      console.log(nHoge);    // 123
      console.log(isHoge);   //  true
      console.log(hogeObj); // {hoge: "1", fuga: "2"}
  }]);

constant

valueメソッド同様に、constantメソッドを使っても共有変数を定義することができます。

// 結果はvalueと同じ
angular.module('MyApp',[])
  .constant("hogeStr", "hogehoge")
  .constant("nHoge", 123)
  .constant("isHoge", true)
  .constant("hogeObj", {"hoge" : "1", "fuga" : "2"})
  .controller('MyController', [
    '$scope',
    'hogeStr',
    'nHoge',
    'isHoge',
    'hogeObj',
    function($scope, hogeStr, nHoge, isHoge, hogeObj) {
      console.log(hogeStr);   // hogehoge
      console.log(nHoge);      // 123
      console.log(isHoge);     //  true
      console.log(hogeObj);  //  {hoge: "1", fuga: "2"}
  }]);

valueとconstantの違い

話が飛びますが、AngularJSはアプリケーションを実行する際configとrunと呼ばれる二つの工程を経由します。

configフェーズではangular.configメソッドを用い、Providerと呼ばれるモジュールの設定変更を行います。（Providerはサービスの挙動を変更するために用いられます）

configフェーズではまだサービスがインスタンス化されていない状態なので、サービスを機能を利用することができません。 valueもサービスの一種であるため、configフェーズでは使うことはできません。
一方でconstantもサービスの一種なのですが、例外的にconfig内で使用することができます。

そのためconfigフェーズで共有変数を利用したい場合は、必然的にconstantを利用することになります。

じゃあvalueは使う意味ないじゃないかと思うかもしれませんが、
「constantはconfigフェーズでのみ利用する」「valueはrunフェーズ以降で利用する」のように、
各メソッドに意味を与えつつ使い分けるというやり方が可能です。

やっぱりconstantだけで良い気がしてきた

参考文献

プロバイダーについて | AngularJS 1.2 日本語リファレンス | js STUDIO

npmとは

npmのインストール

npmが管理するディレクトリを初期化

npmでサーバを立てる

認証込みでサーバ立ち上げ

アプリケーション内でserveを使用

参考文献

DomParserとは

HTMLをパースする

XMLをパースする

パース可能な文書一覧

jqLiteとは

使い方

使用可能な関数

angular.element()が呼べるメソッド

controller(directiveName)

injector()

scope()

isolateScope()

inheritedData(key)

YEOMANとは

YEOMANを使ってみる

ルーティングを設定

パラメータ

templateUrl

controller

controllerAs

resolve

constant

valueとconstantの違い

参考文献

アプリケーション内で`serve`を使用

`angular.element()`が呼べるメソッド