「Angularハンズオン#11 〜 Angular2を初めて触る人向け 〜」に参加させていただきました。 #ng_jp

よし、GWに時間確保できそうだし、Webサービス作ろう。
さて、何を使おうか。

Angular1は下記の書評の時に、そこそこ触った。
dke-msy-node.hatenablog.com

ReactやVue.jsなどもよく聞く。
ただ、実際自分でアプリケーション作るなら、TypeScriptだよね。
（´-`）.｡oO(型は偉大、型がないのは辛い。。)

TypeScriptも下記のブログを書いたり、触ったことあるしいけるかな。
dke-msy-node.hatenablog.com

うん、今やるなら、TypeScriptベースのAngular2だよね。

ということで、入門者向けの下記の　ハンズオンセミナーに参加させていただきました。
angularjs-jp.doorkeeper.jp

どんなことを聞けるか楽しみにしながら、まずは最初に会場を紹介してくださった21カフェのご紹介。
geechs-magazine.com

次に、なんと無償で本日のセットアップをするにあたっての下記の書籍(教科書)を頂けることに！！！

シェルスクリプトマガジン vol.37

この時点で、ものすごくテンションが上がりました。

早速、nodeのインストールから開始。
MBPを最近購入したので、中身がまっさらな子ともいうこともあり、ここでは躓かず。
今回は手順ではnodebrewを使用してインストール。
nodeはv5.9.1を使用。
（´-`）.｡oO(nvmって今はあまり使われてないのか。こっちが今主流なのか。質問するまでもないか)

AngularJSを動かすにあたり、モジュールがたくさん必要ということ。
まずは下記コマンドでpackage.jsonを作成。

npm init -y

下記コマンドでnpmのモジュールをインストール。
（´-`）.｡oO(9個もあるのかw 後でlodashのインストールしておこ)

# Angularを動かすのに最低限必要なモジュールをインストール
npm install es6-shim@0.35.0 --save
npm install systemjs@0.19.24 --save
npm install zone.js@0.6.6 --save
npm install reflect-metadata@0.1.2 --save
npm install rxjs@5.0.0-beta.2 --save
npm install angular2@2.0.0-beta.12 --save
# Angularを開発するのに必要なモジュール
npm install concurrently@2.0.0 --save-dev
npm install lite-server@2.1.0 --save-dev
npm install typescript@1.8.9 --save-dev
npm install typings@0.7.9 --save-dev

ここで、開発中に使用するコマンドをpackage.jsonに下記を追記。
（´-`）.｡oO(package.jsonにコマンド定義できるのかー、へえー)

  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1",
    "start": "concurrently \"npm run tsc:w\" \"npm run lite\" ",
    "tsc": "tsc",
    "tsc:w": "tsc -w",
    "lite": "lite-server",
    "typings": "typings",
    "postinstall": "typings install"
  },
  ...

なお、tscコマンドはTypeScriptのコンパイルコマンドだけど、ターミナルから使うにはnode_modules/bin以下をPATHに通さなければいけないとのこと。

ここから、TypeScript用の設定が開始。
typings.jsonを作成。

node_modules/.bin/typings init
node_modules/.bin/typings install -AS es6-shim jasmine

（´-`）.｡oO(lodashとか使いたい時はここに型定義ファイルをインストール忘れずに)

tsconfig.jsonを新規作成。

node_modules/.bin/tsc --init

tsconfig.jsonを下記のように書き換える。

{
  "compilerOptions": {
    "target": "es5",
    "module": "system",
    "moduleResolution": "node",
    "sourceMap": true,
    "emitDecoratorMetadata": true,
    "experimentalDecorators": true,
    "removeComments": false,
    "noImplicitAny": false
  },
  "exclude": [
    "node_modules",
    "typings/main",
    "typings/main.d.ts"
  ] 
}

ここで大まかに環境設定は終了。
以下を実行し、cannot Get..みたいなものが出ればOK。

npm strat

ここからは、実際にindex.html、main.ts、home.ts ファイルを作成し、アプリケーション作成に取り掛かっていきました。

続きは、下記の書籍をご覧くださいw
インストールしたモジュールの説明なども記載してあり、この手順だけ実施して構築しても自分でカスタマイズできないと思うので。

シェルスクリプトマガジン vol.37

FW 導入において、環境構築ではまるというのはあるあるなので、今回のハンズオン勉強会はとても勉強になりました。
メインで説明されていた酒巻さんも書籍に書いていない話も補足でしてくれたりして、勉強になりました。
また、Typoで失敗しないようにng-japanのSlackにコードを載せたり、質問者に佐川さんが丁寧に答えてしてくださったりしたおかげで、全員がサンプルを動かして帰られたように見えました。
スタッフさんのおかげで、ハンズオン勉強会としてのクオリティが高かったのえ、次回もぜひ参加いただきたいと思いました。
早速今日から、Angular2をいじってみているところです。

おまけ:
佐川さんもng-japanのSlackでつぶやいていましたが、下記を使えば簡単に環境構築できそうです。
先ほど、私も試してみましたが、手順通り実施し動きました。
GitHub - angular/quickstart: Angular 2 QuickStart - source from the documentation