Slide 1
Slide 1 text
Angular2+Electron
で
プレゼンツー
ルを
作っている
@joere
Slide 2
Slide 2 text
Who am I?
twitter: @joe_re
github: @joere
working in freee.K.K
Slide 3
Slide 3 text
今日話すこと
作ったものの紹介
Angular
のComponent
にReact
脳で触ってみた感触
Angular2
におけるComponent
の作り方を紹介
Slide 4
Slide 4 text
注意
React
おじさんです
石は死なない程度なら
投げてくれていいです
Slide 5
Slide 5 text
雑なmarkdown
から
いい感じのslide
が
生まれてほしいという
欲望
Slide 6
Slide 6 text
作ったもの
Slide 7
Slide 7 text
できること
Live preview
Presentation mode
Export PDF
Slide 8
Slide 8 text
DEMO
このスライドはCafe Pitch
を利用して作られています
Slide 9
Slide 9 text
アプリケー
ションの構成
Slide 10
Slide 10 text
なんでapplication3
つもあるの？？
presentation
機能は別window
で開きたかった
router
で判断するのと迷ったけど、
このアプリケー
ション
1
つのwindow
上でのペー
ジ遷移ないんだよなー
だったらアプリケー
ションごとに1
つのペー
ジをrender
する
構成にしちゃった方が状態管理楽じゃないかなー
FluxUtils
のContainer、Redux
のContainer Components
の
イメー
ジ
Slide 11
Slide 11 text
でもこれ
ウィンドウ開くたびに
1
からrender
するので遅い
Slide 12
Slide 12 text
お？
Slide 13
Slide 13 text
お？？？
Slide 14
Slide 14 text
こんな感じにできそう
Slide 15
Slide 15 text
少し試してみたけど
うまくいかなかったので
試行錯誤中です！！
今後にご期待ください
Slide 16
Slide 16 text
Angular
の
Component
にReact
脳で触ってみた感触
Slide 17
Slide 17 text
コンポー
ネント指向
やはり良い(
こなみ)
Slide 18
Slide 18 text
そもそもコンポー
ネント
とはなんであったか
Slide 19
Slide 19 text
DOM
及びその振る舞いが定義されたもの
Slide 20
Slide 20 text
コンポー
ネント指向における
コンポー
ネントは再利用可能で
なければならない
Slide 21
Slide 21 text
Remember Angular1
Angular1
はコンポー
ネント指向の魂を持っていた
実際にAngular1
はコンポー
ネント指向の流れを加速させた
だがtwoway binding
が状態管理を複雑にしてしまっていた
Slide 22
Slide 22 text
状態管理が複雑であると再利用可能な
コンポー
ネントは作りづらい
Slide 23
Slide 23 text
React's Answear
Component
は与えられた値に従ってDOM
構造を生成する
描画の元になる値の生成ロジックには決してコンポー
ネン
トに持ってはいけない
(
徹底的にstate
をcomponent
から排除する)
React
におけるConponent
とは与えられた値をそのまま
DOM
に変換する変換器である
Slide 24
Slide 24 text
Angular2's Component
e
x
p
o
r
t c
l
a
s
s E
d
i
t
o
r {
@
O
u
t
p
u
t
(
'
c
h
a
n
g
e
T
e
x
t
'
) c
h
a
n
g
e
T
e
x
t = n
e
w E
v
e
n
t
E
m
i
t
t
e
r
(
)
;
@
O
u
t
p
u
t
(
'
c
h
a
n
g
e
S
e
l
e
c
t
e
d
L
i
n
e
N
o
'
) c
h
a
n
g
e
S
e
l
e
c
t
e
d
L
i
n
e
N
o = n
e
w E
v
e
n
t
E
m
i
t
t
e
r
(
)
;
e
d
i
t
o
r
: A
c
e
A
j
a
x
.
E
d
i
t
o
r
;
n
g
O
n
C
h
a
n
g
e
s
(
c
h
a
n
g
e
s
: {
t
e
x
t
: S
i
m
p
l
e
C
h
a
n
g
e
}
) {
i
f (
t
h
i
s
.
e
d
i
t
o
r &
& t
h
i
s
.
e
d
i
t
o
r
.
g
e
t
S
e
s
s
i
o
n
(
)
.
g
e
t
V
a
l
u
e
(
) !
=
= c
h
a
n
g
e
s
.
t
e
x
t
.
c
u
r
r
e
n
t
V
a
l
u
e
) {
t
h
i
s
.
e
d
i
t
o
r
.
g
e
t
S
e
s
s
i
o
n
(
)
.
s
e
t
V
a
l
u
e
(
c
h
a
n
g
e
s
.
t
e
x
t
.
c
u
r
r
e
n
t
V
a
l
u
e
)
;
}
}
h
a
n
d
l
e
C
h
a
n
g
e
T
e
x
t
(
) {
t
h
i
s
.
c
h
a
n
g
e
T
e
x
t
.
e
m
i
t
(
t
h
i
s
.
e
d
i
t
o
r
.
g
e
t
S
e
s
s
i
o
n
(
)
.
g
e
t
V
a
l
u
e
(
)
)
;
}
h
a
n
d
l
e
C
h
a
n
g
e
L
i
n
e
N
o
(
) {
t
h
i
s
.
c
h
a
n
g
e
S
e
l
e
c
t
e
d
L
i
n
e
N
o
.
e
m
i
t
(
t
h
i
s
.
e
d
i
t
o
r
.
g
e
t
S
e
l
e
c
t
i
o
n
(
)
.
g
e
t
C
u
r
s
o
r
(
)
.
r
o
w + 1
)
;
}
}
※
説明のために簡略化しています
Slide 25
Slide 25 text
With React
脳
※
説明のために簡略化しています
Slide 26
Slide 26 text
親と共有する必要のない値は
自分のproperty
に持つ
親と共有する必要がある値は
親から受け取る
Slide 27
Slide 27 text
But Angular2's component has more approach...
https://angular.io/docs/ts/latest/cookbook/component
communication.html
Slide 28
Slide 28 text
※
これから紹介するコー
ドは説明のために
適当に省略してるので動きません
ご了承ください
Slide 29
Slide 29 text
ngOnChanges
を使わずに@input
でsetter
を使う
e
x
p
o
r
t c
l
a
s
s E
d
i
t
o
r {
@
O
u
t
p
u
t
(
'
c
h
a
n
g
e
T
e
x
t
'
) c
h
a
n
g
e
T
e
x
t = n
e
w E
v
e
n
t
E
m
i
t
t
e
r
(
)
;
@
O
u
t
p
u
t
(
'
c
h
a
n
g
e
S
e
l
e
c
t
e
d
L
i
n
e
N
o
'
) c
h
a
n
g
e
S
e
l
e
c
t
e
d
L
i
n
e
N
o = n
e
w E
v
e
n
t
E
m
i
t
t
e
r
(
)
;
@
i
n
p
u
t
(
)
s
e
t t
e
x
t
(
t
e
x
t
: s
t
r
i
n
g
) {
i
f (
t
h
i
s
.
e
d
i
t
o
r &
& t
h
i
s
.
e
d
i
t
o
r
.
g
e
t
S
e
s
s
i
o
n
(
)
.
g
e
t
V
a
l
u
e
(
) !
=
= t
e
x
t
) {
t
h
i
s
.
e
d
i
t
o
r
.
g
e
t
S
e
s
s
i
o
n
(
)
.
s
e
t
V
a
l
u
e
(
t
e
x
t
)
;
}
}
/
/ .
.
.
以下略
}
Slide 30
Slide 30 text
親のロー
カル変数にコンポー
ネントを持って操る
/
/ *
* c
h
i
l
d *
* /
/
@
C
o
m
p
o
n
e
n
t
(
{
s
e
l
e
c
t
o
r
:
'
c
o
u
n
t
d
o
w
n
-
t
i
m
e
r
'
, t
e
m
p
l
a
t
e
: '
<
p
>
{
{
m
e
s
s
a
g
e
}
}
<
/
p
>
' }
)
e
x
p
o
r
t c
l
a
s
s C
o
u
n
t
d
o
w
n
T
i
m
e
r
C
o
m
p
o
n
e
n
t i
m
p
l
e
m
e
n
t
s O
n
I
n
i
t
, O
n
D
e
s
t
r
o
y {
/
/
.
.
.
省略
c
l
e
a
r
T
i
m
e
r
(
) {
c
l
e
a
r
I
n
t
e
r
v
a
l
(
t
h
i
s
.
i
n
t
e
r
v
a
l
I
d
)
;
}
n
g
O
n
I
n
i
t
(
) { t
h
i
s
.
s
t
a
r
t
(
)
; }
n
g
O
n
D
e
s
t
r
o
y
(
) { t
h
i
s
.
c
l
e
a
r
T
i
m
e
r
(
)
; }
s
t
a
r
t
(
) { t
h
i
s
.
_
c
o
u
n
t
D
o
w
n
(
)
; }
s
t
o
p
(
) { t
h
i
s
.
c
l
e
a
r
T
i
m
e
r
(
)
; }
p
r
i
v
a
t
e _
c
o
u
n
t
D
o
w
n
(
) {
/
/
.
.
.
省略
}
}
/
/ *
* p
a
r
e
n
t *
*
/
/
@
C
o
m
p
o
n
e
n
t
(
{
s
e
l
e
c
t
o
r
:
'
c
o
u
n
t
d
o
w
n
-
p
a
r
e
n
t
-
l
v
'
,
t
e
m
p
l
a
t
e
: `
<
h
3
>
C
o
u
n
t
d
o
w
n t
o L
i
f
t
o
f
f (
v
i
a l
o
c
a
l v
a
r
i
a
b
l
e
)
<
/
h
3
>
<
b
u
t
t
o
n (
c
l
i
c
k
)
=
"
t
i
m
e
r
.
s
t
a
r
t
(
)
"
>
S
t
a
r
t
<
/
b
u
t
t
o
n
>
<
b
u
t
t
o
n (
c
l
i
c
k
)
=
"
t
i
m
e
r
.
s
t
o
p
(
)
"
>
S
t
o
p
<
/
b
u
t
t
o
n
>
<
d
i
v c
l
a
s
s
=
"
s
e
c
o
n
d
s
"
>
{
{
t
i
m
e
r
.
s
e
c
o
n
d
s
}
}
<
/
d
i
v
>
<
c
o
u
n
t
d
o
w
n
-
t
i
m
e
r #
t
i
m
e
r
>
<
/
c
o
u
n
t
d
o
w
n
-
t
i
m
e
r
>
`
,
d
i
r
e
c
t
i
v
e
s
: [
C
o
u
n
t
d
o
w
n
T
i
m
e
r
C
o
m
p
o
n
e
n
t
]
}
)
e
x
p
o
r
t c
l
a
s
s C
o
u
n
t
d
o
w
n
L
o
c
a
l
V
a
r
P
a
r
e
n
t
C
o
m
p
o
n
e
n
t { }
Slide 31
Slide 31 text
子を @ViewChild
経由で呼び出す
@
C
o
m
p
o
n
e
n
t
(
{
s
e
l
e
c
t
o
r
:
'
c
o
u
n
t
d
o
w
n
-
p
a
r
e
n
t
-
v
c
'
,
t
e
m
p
l
a
t
e
: `
<
h
3
>
C
o
u
n
t
d
o
w
n t
o L
i
f
t
o
f
f (
v
i
a V
i
e
w
C
h
i
l
d
)
<
/
h
3
>
<
b
u
t
t
o
n (
c
l
i
c
k
)
=
"
s
t
a
r
t
(
)
"
>
S
t
a
r
t
<
/
b
u
t
t
o
n
>
<
b
u
t
t
o
n (
c
l
i
c
k
)
=
"
s
t
o
p
(
)
"
>
S
t
o
p
<
/
b
u
t
t
o
n
>
<
d
i
v c
l
a
s
s
=
"
s
e
c
o
n
d
s
"
>
{
{ s
e
c
o
n
d
s
(
) }
}
<
/
d
i
v
>
<
c
o
u
n
t
d
o
w
n
-
t
i
m
e
r
>
<
/
c
o
u
n
t
d
o
w
n
-
t
i
m
e
r
>
`
,
d
i
r
e
c
t
i
v
e
s
: [
C
o
u
n
t
d
o
w
n
T
i
m
e
r
C
o
m
p
o
n
e
n
t
]
}
)
e
x
p
o
r
t c
l
a
s
s C
o
u
n
t
d
o
w
n
V
i
e
w
C
h
i
l
d
P
a
r
e
n
t
C
o
m
p
o
n
e
n
t i
m
p
l
e
m
e
n
t
s A
f
t
e
r
V
i
e
w
I
n
i
t {
@
V
i
e
w
C
h
i
l
d
(
C
o
u
n
t
d
o
w
n
T
i
m
e
r
C
o
m
p
o
n
e
n
t
)
p
r
i
v
a
t
e _
t
i
m
e
r
C
o
m
p
o
n
e
n
t
:
C
o
u
n
t
d
o
w
n
T
i
m
e
r
C
o
m
p
o
n
e
n
t
;
s
e
c
o
n
d
s
(
) { r
e
t
u
r
n 0
; }
n
g
A
f
t
e
r
V
i
e
w
I
n
i
t
(
) {
s
e
t
T
i
m
e
o
u
t
(
(
) =
> t
h
i
s
.
s
e
c
o
n
d
s = (
) =
> t
h
i
s
.
_
t
i
m
e
r
C
o
m
p
o
n
e
n
t
.
s
e
c
o
n
d
s
, 0
)
}
s
t
a
r
t
(
)
{ t
h
i
s
.
_
t
i
m
e
r
C
o
m
p
o
n
e
n
t
.
s
t
a
r
t
(
)
; }
s
t
o
p
(
) { t
h
i
s
.
_
t
i
m
e
r
C
o
m
p
o
n
e
n
t
.
s
t
o
p
(
)
; }
}
Slide 32
Slide 32 text
Service
経由でダイレクトに相互通信する
c
l
a
s
s M
i
s
s
i
o
n
S
e
r
v
i
c
e {
p
r
i
v
a
t
e _
m
i
s
s
i
o
n
A
n
n
o
u
n
c
e
d
S
o
u
r
c
e = n
e
w S
u
b
j
e
c
t
<
s
t
r
i
n
g
>
(
)
;
p
r
i
v
a
t
e _
m
i
s
s
i
o
n
C
o
n
f
i
r
m
e
d
S
o
u
r
c
e = n
e
w S
u
b
j
e
c
t
<
s
t
r
i
n
g
>
(
)
;
m
i
s
s
i
o
n
A
n
n
o
u
n
c
e
d
$ = t
h
i
s
.
_
m
i
s
s
i
o
n
A
n
n
o
u
n
c
e
d
S
o
u
r
c
e
.
a
s
O
b
s
e
r
v
a
b
l
e
(
)
;
m
i
s
s
i
o
n
C
o
n
f
i
r
m
e
d
$ = t
h
i
s
.
_
m
i
s
s
i
o
n
C
o
n
f
i
r
m
e
d
S
o
u
r
c
e
.
a
s
O
b
s
e
r
v
a
b
l
e
(
)
;
a
n
n
o
u
n
c
e
M
i
s
s
i
o
n
(
m
i
s
s
i
o
n
: s
t
r
i
n
g
) { t
h
i
s
.
_
m
i
s
s
i
o
n
A
n
n
o
u
n
c
e
d
S
o
u
r
c
e
.
n
e
x
t
(
m
i
s
s
i
o
n
)
; }
c
o
n
f
i
r
m
M
i
s
s
i
o
n
(
a
s
t
r
o
n
a
u
t
: s
t
r
i
n
g
) { t
h
i
s
.
_
m
i
s
s
i
o
n
C
o
n
f
i
r
m
e
d
S
o
u
r
c
e
.
n
e
x
t
(
a
s
t
r
o
n
a
u
t
)
; }
}
c
l
a
s
s M
i
s
s
i
o
n
C
o
n
t
r
o
l
C
o
m
p
o
n
e
n
t {
c
o
n
s
t
r
u
c
t
o
r
(
p
r
i
v
a
t
e m
i
s
s
i
o
n
S
e
r
v
i
c
e
: M
i
s
s
i
o
n
S
e
r
v
i
c
e
) {
m
i
s
s
i
o
n
S
e
r
v
i
c
e
.
m
i
s
s
i
o
n
C
o
n
f
i
r
m
e
d
$
.
s
u
b
s
c
r
i
b
e
(
/
/ s
o
m
e p
r
o
c
e
s
s
.
.
.
)
}
a
n
n
o
u
n
c
e
(
) { t
h
i
s
.
m
i
s
s
i
o
n
S
e
r
v
i
c
e
.
a
n
n
o
u
n
c
e
M
i
s
s
i
o
n
(
'
n
e
x
t m
i
s
s
i
o
n
'
)
; }
}
c
l
a
s
s A
s
t
r
o
n
a
u
t
C
o
m
p
o
n
e
n
t i
m
p
l
e
m
e
n
t
s O
n
D
e
s
t
r
o
y
{
s
u
b
s
c
r
i
p
t
i
o
n
:
S
u
b
s
c
r
i
p
t
i
o
n
;
c
o
n
s
t
r
u
c
t
o
r
(
p
r
i
v
a
t
e m
i
s
s
i
o
n
S
e
r
v
i
c
e
: M
i
s
s
i
o
n
S
e
r
v
i
c
e
) {
m
i
s
s
i
o
n
S
e
r
v
i
c
e
.
m
i
s
s
i
o
n
A
n
n
o
u
n
c
e
d
$
.
s
u
b
s
c
r
i
b
e
(
/
/ s
o
m
e p
r
o
c
e
s
s
.
.
.
)
}
c
o
n
f
i
r
m
(
) { t
h
i
s
.
m
i
s
s
i
o
n
S
e
r
v
i
c
e
.
c
o
n
f
i
r
m
M
i
s
s
i
o
n
(
t
h
i
s
.
a
s
t
r
o
n
a
u
t
)
; }
}
Slide 33
Slide 33 text
それぞれに適する場面は議論の
余地がありそう
是非この後話し合いたいです！
Slide 34
Slide 34 text
ありがとうございました！