2015-11-02

angularjs2のtutorialをやってみた

お断り事項

本記事は、Angularjsの公式サイトの5分クイックスタートのチュートリアルを

純粋にやってみているだけです。

英語苦手な方には悪くないと思いますが、本家のほうが、アップデートもかかるし、

英語問題ない方は本家をみたほうがよいです。

本題(フレームワーク選定)

Javascript フレームワークをやらないとな、、、

というわけで、重い腰をあげて触ってみましたよ、と。 JSのフレームワーク、なんだか沢山あるようです。

backbone.js
react.js
knockout.js
ember.js
aurelia
angularjs1.x
angularjs2.x

などなど沢山あります。今回の選定基準はこれ！！！

ES6が新しいらしいので、ES6対応(または対応しはじめてる)
そこそこ有名でユーザが多い
ぶっちゃけはじめて使うので、感覚値身に付けるために、「どれでもいい」

というわけで結構テキトウな選定基準です。

一旦、Google Trendで比較。

f:id:xengineer:20151030133025p:plain

おお！圧倒的ではないか！我が軍は！

はい。angularjsが圧倒的です。

でも、「angularjs」じゃなくて、「angular.js」にすると・・・

f:id:xengineer:20151030133140p:plain

ああ・・・以外と普通・・・むしろreact.jsが盛り上がってきてるように見える。

物事は、見る角度次第でどうにでも変わってくるわけです。

そして、どう判断すればいいかわからなくなったので、

グーグルの人が作ってるし
ES6にも対応してるし(α版だけど)

ということから、angularjs2を使ってみることにしました。

初心者は、初心者らしく、簡単チュートリアルからやります。

5 Min Quickstart - ts

これね。5分クイックスタート、なので、5分でとりあえず動かしてなんか見れるようになるんだろ。

前提条件：

OS: Ubuntu 14.04.1 LTS
npm: 2.14.7
angularjs: 2.0.0-alpha.44
systemjs: 0.19.5
live-server: 0.8.1
typescript: 1.6.2
Linuxの操作には慣れている(開発にあたっての環境整備は出来るレベル)

ざっくりフロー

さて、本記事のざっくりした流れです。

プロジェクトフォルダー作成
必須ライブラリのインストール
httpd環境設定
Angular component作成
appをの起動コードを書く
index.htmlの作成
実行

詳細

以降ではやったことを少し詳細に。

プロジェクトディレクトリ作成

まずは、フォルダを作ります。場所はどこでもいいです。

そして作ったら、そのディレクトリに移動します。

$ mkdir angular2-quickstart
$ cd angular2-quickstart

本記事では、上記の作業ディレクトリは、と表します。

必須ライブラリのインストール

お次は、ライブラリのインストール。

なんだけど、npm使うので、まずはnpmをインストール。

下記コマンヅで。

$ sudo apt-get update
$ sudo apt-get install nodejs npm

で、npmが入るので、次は

angular2
live-server

を入れましょう。

angular2はそのまんま、angularのライブラリで、live-serverは、

すぐに動作確認できる簡易httpdでした。あると楽ちん。

で、下記コマンヅ実行。

$ cd <WORKDIR>
$ npm init -y
$ npm i angular2@2.0.0-alpha.44 --save --save-exact
$ npm i live-server --save-dev

これで、angularとlive-serverが、にインストールされます。

httpd環境設定

では、インストールするものはしたので、次は環境設定をば。

今回は、liver-serverの実行設定だけです。

さっき実行したコマンド($ npm init -y)の結果として、

package.jsonなるファイルも作成されてるはず。

# package.json

{
  "name": "angular2-quickstart", # <WORKDIR>の名称が勝手に入ってる
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "keywords": [],
  "author": "",
  "license": "ISC",
  "dependencies": {
    "angular2": "2.0.0-alpha.44"
  },
  "devDependencies": {
    "live-server": "^0.8.2"
  }
}

色々書いてあるけどまぁ一旦こんなもんかと眺めます。

そんで次に、package.jsonの、scriptsの値を変更します。

# 変更前
"scripts": {
  "test": "echo \"Error: no test specified\" && exit 1"
},

# 変更後
"scripts": {
  "start": "live-server"
},

これで、npmコマンドから、live-serverを起動できるわけです。

$ npm start # ってするとliver-serverが起動されるけど、今は起動しなくていい

環境設定完了！

Angular component作成

さてさて、本題の Angularに入ります。

で、本題に入る前に、なんとなくの動作イメージを絵にしてみました。

f:id:xengineer:20151102121029p:plain

イベントが発生する順に番号振って説明つけてみてますが、

簡単に説明すると、今回のチュートリアルで主に登場するファイルは、

package.json
app.js
index.html

で、app.jsに、Angular componentなるものを記載して、

index.htmlから、Angular componentと、Angularのライブラリを読み込んで、

index.htmlとしてユーザにみせつける、という流れですな。

package.jsonは、ユーザに見えるとこには関係なくて、裏方さん的な役割。

で、Angular componentを作ります。

$ cd <WORKDIR>
$ vi app.js

で、app.jsに下記をペタっとな。

# app.js

var AppComponent = ng
  .Component({
    selector: 'my-app',                            # HTMLのmy-appタグにこのComponentを挿入するよ、ってこと
    template: '<h1>My First Angular 2 App</h1>'    # Componentの見た目定義
  })
  .Class({                                         # Componentのクラス
    constructor: function () { }                   # 今回はコンストラクタはなんもしない
  });

上のほうに書いてある、ngっていうのは、Angularのglobal namespaceとのこと。

でも、公式ドキュメントのどこに記載があるのかわからなくて正体不明。

と思って、少し調べてみた。

https://raw.githubusercontent.com/angular/code.angularjs.org/master/2.0.0-alpha.44/angular2.sfx.dev.js

の凄い下のほうに、こんなんがあった。

System.register("angular2/angular2_sfx", ["angular2/angular2", "angular2/router", "angular2/http"], true, function(require, exports, module) {
  var global = System.global,
      __define = global.define;
  global.define = undefined;
  var ng = require("angular2/angular2");   ★★これか！！！
  var router = require("angular2/router");
  var http = require("angular2/http");
  var _prevNg = window.ng;
  window.ng = ng;
  window.ngRouter = router;
  window.ngHttp = http;
  ng.noConflict = function() {
    window.ng = _prevNg;
    return ng;
  };
  global.define = __define;
  return module.exports;
});

ちなみに、angular2.sfx.dev.jsのファイルにしかないぽい。 angular2.jsにはなかった。

appをの起動コードを書く

このままだと、Componentは書いたものの、置いてあるだけで起動しないので、起動させます。

app.jsの末尾に下記を追記します。

document.addEventListener('DOMContentLoaded', function() {
  ng.bootstrap(AppComponent);
});

index.htmlの作成

みためみため。angularは 1.xからずっとテンプレートはHTML。そこは変わらずらしい。

インストールしたangular2のライブラリと、さっき書いたapp.jsを読み込むのと、

app.jsで定義した Componentの、my-appタグを入れて準備万端！

# index.html
<html>
  <head>
    <title>Angular 2 QuickStart</title>
    <script src="node_modules/angular2/bundles/angular2.sfx.dev.js"></script>
    <script src="app.js"></script>
  </head>
  <body>
    <my-app></my-app>
  </body>
</html>

実行

これで、ページのロードが終わったら、AppComponentが起動されます。

で、最後に、グローバル汚染しないように、ラッパーで囲って無名関数化。

# app.js

(function() {
var AppComponent = ng
  .Component({
    selector: 'my-app',                            # HTMLのmy-appタグにこのComponentを挿入するよ、ってこと
    template: '<h1>My First Angular 2 App</h1>'    # Componentの見た目定義
  })
  .Class({                                         # Componentのクラス
    constructor: function () { }                   # 今回はコンストラクタはなんもしない
  });

document.addEventListener('DOMContentLoaded', function() {
  ng.bootstrap(AppComponent);
});

})();

ではでは、まずは live-serverを実行しますぞ。

$ cd <WORKDIR>
$ npm start

これで、httpdが動いてるので、ブラウザを開いて、

http://127.0.0.1:8080/

にアクセス！

My First Angular 2 App

ってブラウザに表示されればOK ！！！

というわけで、5分クイックスタートは終了。

次回は、これまた公式チュートにある、"The Hero Editor"をそのまま実行してみる予定。

で、その記事の前半部分↓↓↓ angularjs2のtutorialをやってみた（その２） - xengineer’s diary

2015-10-28

グローバル変数の指定方法が変わったのね(capistrano)

すごく久しぶりに、capistranoを使ってるシステムを触ったときのこと。（昨日だけど）

確かこのシステムは、release tagを指定して、capistranoを実行するようにしてたんだけど・・・

そもそも、どんなコマンド叩いてデプロイするのかすら忘れていて、

そこまでたどり着くのが大変でした。

紆余曲折、実行コマンドを思い出して、いざ実行！

$ cap -S branch="UNKOBRANCH" development deploy
invalid option: -S

そして間髪入れずエラー。ナイスレスポンス。

ぐぐったらすぐ出てきた。環境変数に設定しろカス！とのことでした。

-S option gone? How do I pass a parameter now? · Issue #807 · capistrano/capistrano · GitHub

上のgithub上では、「ver3.0.0から」って書いてあるけど、、、

僕最初からver3.0.0使ってた気がするんだけどな・・・

なんか間違ってたのかな・・・

なんにせよ、修正。

これまでの記述方法と実行コマンド

記述方法

# config/deploy.rb
set :branch, fetch(:branch, 'master')

実行コマンド

$ cap -S branch="UNKOBRANCH" development deploy

capistrano ver.3.0.0以降の記述方法

記述方法

# config/deploy.rb
set :branch, ENV["REVISION"] || ENV["BRANCH_NAME"]

実行コマンド

$ REVISION='latest_revision_ver2.0_2ndEdition' cap development deploy

これでみんなはっぴー。

おしまい。

2015-10-07

branchのrename

git

よく間違う上に、よくやり方忘れるのでメモ。

$ git branch -m <oldbranch> <newbranch>

でいける。 current directory配下が、oldbranchの場合は、<oldbranch>は省略できる。

2015-10-01

migrationでnull制約をon/offする

railsで、null制約かけてたカラムの制約をはずしたくなったので。

$ rails g migrataion RemoveNoneNullRestrictionFromFoo
$ cat db/migrate/xxxxxxxxxxxxxx_remove_none_null_restriction_from_foo
class RemoveNoneNullRestrictionFromFoo < ActiveRecord::Migration
  def change
    change_column_null <table name>, :foo, true★
  end
end

★印の行を加えればOK。こんな感じ。

2015-10-01

rvmをupdateする

まだ自分の環境にrvmが残っていたか・・・と最近気づいたわけで。

updateしようとしたら、あっさり怒られました。

$ rvm update stable
Unrecognized command line argument: 'stable' ( see: 'rvm usage' )

あれ？通らない・・・まずは言われた通りにやってみる。

$ rvm usage

...
...
中略
...
...

== Action

(Note: for most actions, 'rvm help action-name' may provide more information.)

*usage*     :: show this usage information
version     :: show the rvm version installed in rvm_path
use         :: setup current shell to use a specific ruby version
reload      :: reload rvm source itself (useful after changing rvm source)
implode     :: (seppuku) removes the rvm installation completely.

               This means everything in $rvm_path (~/.rvm || /usr/local/rvm).

               This does not touch your profiles. However, this means that you
               must manually clean up your profiles and remove the lines which
               source RVM.
get         :: {head,stable} upgrades rvm to latest head or stable version.

               Check 'rvm help get' for more details.

               (If you experience bugs try this first with head version, then
               ask for help in #rvm on irc.freenode.net and hang around)
...
略
...

updateっていうのがそもそもなくなって、getになっているみたい。というわけで、getで実行。

$ rvm get stable
Downloading https://get.rvm.io
Downloading https://raw.githubusercontent.com/wayneeseguin/rvm/master/binscripts/rvm-installer.asc
Verifying /home/nemoto_hideaki/.rvm/archives/rvm-installer.asc
gpg: 2015年04月14日 09時05分41秒 JSTにRSA鍵ID BF04FF17で施された署名
gpg: "Michal Papis (RVM signing) <mpapis@gmail.com>"からの正しい署名
gpg: *警告*: この鍵は信用できる署名で証明されていません!
gpg:          この署名が所有者のものかどうかの検証手段がありません。
主鍵のフィンガー・プリント: 409B 6B17 96C2 7546 2A17  0311 3804 BB82 D39D C0E3
     副鍵のフィンガー・プリント: 62C9 E5F4 DA30 0D94 AC36  166B E206 C29F BF04 FF17
GPG verified '/home/nemoto_hideaki/.rvm/archives/rvm-installer'
Downloading https://github.com/rvm/rvm/archive/1.26.11.tar.gz
Downloading https://github.com/rvm/rvm/releases/download/1.26.11/1.26.11.tar.gz.asc
gpg: 2015年03月31日 06時52分13秒 JSTにRSA鍵ID BF04FF17で施された署名
gpg: "Michal Papis (RVM signing) <mpapis@gmail.com>"からの正しい署名
gpg: *警告*: この鍵は信用できる署名で証明されていません!
gpg:          この署名が所有者のものかどうかの検証手段がありません。
主鍵のフィンガー・プリント: 409B 6B17 96C2 7546 2A17  0311 3804 BB82 D39D C0E3
     副鍵のフィンガー・プリント: 62C9 E5F4 DA30 0D94 AC36  166B E206 C29F BF04 FF17
GPG verified '/home/nemoto_hideaki/.rvm/archives/rvm-1.26.11.tgz'

Upgrading the RVM installation in /home/nemoto_hideaki/.rvm/
    RVM PATH line found in /home/nemoto_hideaki/.zshrc.
    RVM PATH line not found for Bash, rerun this command with '--auto-dotfiles' flag to fix it.
    RVM sourcing line found in /home/nemoto_hideaki/.bashrc /home/nemoto_hideaki/.bash_login /home/nemoto_hideaki/.zlogin.
Upgrade of RVM in /home/nemoto_hideaki/.rvm/ is complete.

# hideaki nemoto,
#
#   Thank you for using RVM!
#   We sincerely hope that RVM helps to make your life easier and more enjoyable!!!
#
# ~Wayne, Michal & team.

In case of problems: http://rvm.io/help and https://twitter.com/rvm_io

Upgrade Notes:

  * No new notes to display.

RVM reloaded!

$ rvm --version
rvm 1.26.11 (latest) by Wayne E. Seguin <wayneeseguin@gmail.com>, Michal Papis <mpapis@gmail.com> [https://rvm.io/]

無事アップデートできた。ちゃんちゃん。

2015-08-25

VirtulBox vdiファイルのコピー

先日、VirtualBoxの、インスタンスのストレージとして指定している、

HDD用vdiファイルをコピーして、コピー先のファイルを再度HDDに指定しようと

したところ、こんなエラーが。

f:id:xengineer:20150825103755p:plain

Cannot register the hard disk 'F:\virtualbox\wolverin00\wolverin00.vdi'
{xxxxxx-xxx-xxxx-xxxx-xxxxxx} because a hard disk hogehogheoghoeghoehgoehogheoghe
with UUID {yyyyyy-yyy-yyyy-yyyy-yyyyyy} already exists.

調べてみた。

<a href="http://www.bradleyschacht.com/virtualbox-cannot-register-the-hard-drive-because-a-hard-drive-with-uuid-already-exists/">VirtualBox - Cannot Register the Hard Drive Because a Hard Drive with UUID Already Exists</a>www.bradleyschacht.com

どうやら、VirtualBoxでは、各仮想HDDに固有のUUIDを振って管理してるらしく、

重複しちゃあかん、ということみたい。

なので、コマンド打ってUUID変えましょう、と。

但し、これやる前に一旦、VirtualBoxを落とします。

インスタンスではなくて、VirtualBoxのアプリそのものを落としましょう。

で、下記コマンドを実行。

> cd <virtualboxのインストールパス>
> VBOXMANAGE.EXE internalcommands sethduuid <UUIDを変更したいvdiファイルのパス>

f:id:xengineer:20150825104451p:plain

そんで再起動すると、ちゃんと指定できるようになってる！はず。

そして無事インスタンスも起動できる！はず。

おしまい。

2015-07-14

BUNDLED WITH 1.10.XXX

Gemfile.lockに、これが入ってる・・・

しかも、自分でbundle installすると消える・・・

そして、git statusすると、Gemfile.lockが違う！！って怒られる・・・

そんなあなたに。

$ git checkout -- Gemfile.lock

で、一旦解決します。僕はしませんでした。。。

犯人は・・・おまえだ！！！

そう、spring。

殺してから再実行するとちゃんと消えます。

あとは、

$ gem update bundler
$ bundle install

すれば OK！！！

おしまい！アディオス！