よし、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
次に、なんと無償で本日のセットアップをするにあたっての下記の書籍(教科書)を頂けることに！！！
- 作者: 當仲寛哲,岡田健,佐川夫美雄,大岩元,松浦智之,後藤大地,白羽玲子,水間丈博,濱口誠一,すずきひろのぶ,花川直己,しょっさん,法林浩之,熊野憲辰,桑原滝弥,USP研究所,ジーズバンク
- 出版社/メーカー: USP研究所
- 発売日: 2016/04/25
- メディア: 雑誌
- この商品を含むブログを見る
この時点で、ものすごくテンションが上がりました。
早速、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
インストールしたモジュールの説明なども記載してあり、この手順だけ実施して構築しても自分でカスタマイズできないと思うので。
- 作者: 當仲寛哲,岡田健,佐川夫美雄,大岩元,松浦智之,後藤大地,白羽玲子,水間丈博,濱口誠一,すずきひろのぶ,花川直己,しょっさん,法林浩之,熊野憲辰,桑原滝弥,USP研究所,ジーズバンク
- 出版社/メーカー: USP研究所
- 発売日: 2016/04/25
- メディア: 雑誌
- この商品を含むブログを見る
FW 導入において、環境構築ではまるというのはあるあるなので、今回のハンズオン勉強会はとても勉強になりました。
メインで説明されていた酒巻さんも書籍に書いていない話も補足でしてくれたりして、勉強になりました。
また、Typoで失敗しないようにng-japanのSlackにコードを載せたり、質問者に佐川さんが丁寧に答えてしてくださったりしたおかげで、全員がサンプルを動かして帰られたように見えました。
スタッフさんのおかげで、ハンズオン勉強会としてのクオリティが高かったのえ、次回もぜひ参加いただきたいと思いました。
早速今日から、Angular2をいじってみているところです。
おまけ:
佐川さんもng-japanのSlackでつぶやいていましたが、下記を使えば簡単に環境構築できそうです。
先ほど、私も試してみましたが、手順通り実施し動きました。
GitHub - angular/quickstart: Angular 2 QuickStart - source from the documentation
