Frontend Meetup vol.1 - SPAを語り尽くす会! LT 2016/09/16

1. AngularJS2でつまづいたこと
Frontend Meetup vol.1 - SPAを語り尽くす会! LT 2016/09/16
Takehiro Takahashi

2. 作ったもの

3. SNS(未完)

4. 構想4年

5. 何人かのメンバーと議論

6. 今はほぼ一人。

7. OSS

8. フロントエンドだけ完成
 使っているライブラリ等
 AngujarJS2 2.0.0-beta17 （ちょっと古いです）
 TypeScript
 Webpack
 node
 systemjs

9. package.json
{
"name": "mintsns",
"version": "1.0.0",
"scripts": {
"start": "npm run serve",
"serve": "node_modules/lite-server/bin/lite-server",
"webpack": "node_modules/webpack/bin/webpack.js --watch",
"build": "node_modules/webpack/bin/webpack.js"
},
"contributors": [
"info@mintsns.com <info@mintsns.com>"
],
"license": "MIT",
"dependencies": {
"angular2": "2.0.0-beta.17",
"css-loader": "^0.23.1",
"es6-shim": "^0.35.0",
"extract-text-webpack-plugin": "^1.0.1",
"jquery": "^2.2.3",
"lodash": "^4.11.2",
"node-sass": "^3.6.0",
"reflect-metadata": "0.1.2",
"rxjs": "5.0.0-beta.6",
"sass-loader": "^3.2.0",
"style-loader": "^0.13.1",
"systemjs": "0.19.26",
"typescript": "^1.8.9",
"zone.js": "0.6.12"
},
"devDependencies": {
"concurrently": "^2.0.0",
"lite-server": "^2.2.0",
"tsd": "^0.6.5",
"typescript": "^1.8.10",
"typings": "^0.8.1",
"webpack": "latest"
}
}

10. 出来たもの

12. つまずいた部分

13. 認証機能

14. 認証機能をどこに持たせる？
 AngularJS2では「状態」を Component が持つ
 Serviceに状態はなるべく持たないようにしたい
 つまり、Componentが認証情報を持っている？
 形のないものにComponentを使うのに抵抗があった
 これが当たり前・・？

15. 認証機能をどこに持たせる？
悩みに悩んだ末こうなりました。
#main.ts
bootstrap(AppComponent, [
AuthSharedService
]);

16. SharedService
 SharedServiceは、名前の通りインジェクションされた
Componentの子や子孫のComponentであれば、アクセスす
ることが出来るService
 データを持ってOK(ということにしました...)
 今回はAppComponentにインジェクションされているので事
実上どこでもアクセス出来ます

17. ログインユーザーの管理が楽に
@Injectable()
export class AuthSharedService {
// ログインユーザー
// ログインしている場合はここにユーザーデータが入る
loginUser: User;
constructor() {
this.loginUser = {
id: 1,
name: "mintsns",
iconUrl: "../images/samples/icons/niconico_seiga_im3861359.jpeg",
iconUrlLarge: "../images/samples/icons/niconico_seiga_im3861359.jpeg",
iconUrlMedium: "../images/samples/icons/niconico_seiga_im3861359.jpeg",
iconUrlSmall: "../images/samples/icons/niconico_seiga_im3861359.jpeg",
isMe: true,
email: "",
password: ""
};
}
// ログインしているか
isLogin() {
return !!this.loginUser;
}
// ログインユーザーの取得
getLoginUser() {
return this.loginUser;
}
}

18. 最後に
https://github.com/mintsns/mintsns

19. ご清聴ありがとうございました。