-
Notifications
You must be signed in to change notification settings - Fork 11
/
05s-the-session.md.erb
194 lines (144 loc) · 9.85 KB
/
05s-the-session.md.erb
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
---
title: The Session
slug: the-session
date: 0005/01/02
number: 5.5
sidebar: true
contents: Learn about the Meteor Session|Learn about the autorun function|Learn about Hot Code Reload
paragraphs: 33
version: 1.7
---
Meteorはリアクティブなフレームワークです。
つまり、データが変化すると、何もしなくても確実にアプリケーション内のデータも変化するということです。 (???)
私たちはすでに作業を 見てきました。 どのようにテンプレートが変化するのか (??????)
これがどのように動いているのかは後の章でじっくり見ていきます。
ここでは、私たちは一般的なアプリでとても役立つ 基本的なリアクティブの特徴を 紹介したいと思います。
### The Meteor Session
現在のMicroscopeでは ユーザーのアプリケーションの現在の状態は(???) ユーザーが見ているURLが含まれています。(??データベース)
しかし、多くの場合、 一時的な状態を保存する必要があります。
現在のユーザーの アプリケーションの(???)にだけ関係しています。
(たとえば、要素が現れるか隠れるかどうか)。
セッションはこうするための便利な方法です。
セッションはグローバルのリアクティブデータストアです。(???)
グローバルシングルトンオブジェクトという意味のグローバルです。(???)1つのセッションはどこからでもアクセスできます。
グローバル変数はよく悪いものだと見られますが、この場合セッションはアプリケーションの違う部分への中央 コミュニケーションバスとして使われます。(???)
### Changing the Session
セッションは、Sessionでどこからでも使うことができます。セッションの値をセットするには、次のようにやります。(???)
~~~js
❯ Session.set('pageTitle', 'A different title');
~~~
<%= caption "Browser console" %>
Session.get('mySessionProperty');を使うことで、(???) データを読むことができます。
これはリアクティブなデータソースです。
つまり、ヘルパー内にこれを入れると セッション変数が変化した時に 反動的に ヘルパーの出力が変化するという意味です。(???)
これを試してみるために、レイアウトテンプレートに次のようなコードを追加しましょう。
~~~html
<header class="navbar">
<div class="navbar-inner">
<a class="brand" href="{{pathFor 'postsList'}}">{{pageTitle}}</a>
</div>
</header>
~~~
<%= caption "client/views/application/layout.html"%>
~~~js
Template.layout.helpers({
pageTitle: function() { return Session.get('pageTitle'); }
});
~~~
<%= caption "client/views/application/layout.js"%>
Meteorの自動リロード(つまり「ホットコードリロード」)はセッション変数を保存します。(???)
そのため、私たちは今「違ったタイトル」がナビゲーションバーに表示されているのがわかると思います。
そうでなかったら、もう一度先ほどのSession.set()コマンドを入力してください。
さらにもう一度、ブラウザーコンソール上で値が変化したら、また違ったタイトルが表示されます。
~~~js
❯ Session.set('pageTitle', 'A brand new title');
~~~
<%= caption "Browser console" %>
セッションはグローバルに使うことができるので、アプリケーション内のどこでもこうした変化をさせることができます。
こうすることで私たちは多くの力を得られますが(???)、使いすぎてしまうと罠にはまります。
<% note do %>
### Identical Changes
Session.set()でセッション変数を変更すると、全く同じ値をセットします。
Meteorは リアクティブチェーン(???)を回避できるほど頭が良いので、不必要なメソッドコールを回避します。
<% end %>
### Introducing Autorun
私たちはリアクティブデータストアの例で、テンプレートヘルパー内で(???)、を見てきました。
しかし、Meteorでのコンテキストの多く(テンプレートヘルパーなど)は本質的にリアクティブです。
Meteorのアプリのコードの多くはまだ素のリアクティブではないJavaScriptです。
次のようなコードをアプリのどこかにあるとします。
~~~js
helloWorld = function() {
alert(Session.get('message'));
}
~~~
私たちはセッション変数と呼んできましたが、このコンテキストはリアクティブではないと呼んでいないのは、
私たちが変数を変えるたびに新しいalertを取得しないという意味です。 (???)
ここでAutorunが登場します。その名前の通り、
autorunブロックの中に入れたコードは自動的に動きます。(???)
また、リアクティブデータストアが使われる度に変化します。動き続けます (???)
ブラウザーコンソールでこのようにタイピングしてみてください。
~~~js
❯ Deps.autorun( function() { console.log('Value is: ' + Session.get('pageTitle')); } );
Value is: A brand new title
~~~
<%= caption "Browser console" %>
ご推察の通り、このコードのブロックは autorunが一度動くと (???)
データをコンソールに出力します。 では、タイトルを変化させてみましょう。
~~~js
❯ Session.set('pageTitle', 'Yet another value');
Value is: Yet another value
~~~
<%= caption "Browser console" %>
魔法のようだ!セッションの値が変化すると、
コンソールに新しい値を再出力することで もう一度内容を動かす必要があると (???) autorunは 識別しました。
そこで、先ほどの例に戻りましょう。
私たちが セッション変数が変わる度に 新しいアラートを動作させたい場合に、
autorunブロックにコードをラップする必要があります。
~~~js
Deps.autorun(function() {
alert(Session.get('message'));
});
~~~
これまで見てきたように、autorunはリアクティブデータソースをトラッキング(???)して、(???)に反応することにとても役立ちます。
### Hot Code Reload
Microscopeの開発を通して、私たちはMeteorの時間節約する機能を利用してきていました:
ホットコードリロード(HCR)です。
私たちははソースコードファイルを保存する時はいつでも、
Meteorは変化を見つけて、各クライアントにページをリロードすることを伝えて瞬時に Meteorサーバーを動かすように再起動します。
これは自動的にページがリロードすることに似ていますが、重要な違いがあります。
どういうことか理解するために、私たちが使ってきたセッション変数を再設定することから始めます。
~~~js
❯ Session.set('pageTitle', 'A brand new title');
❯ Session.get('pageTitle');
'A brand new title'
~~~
<%= caption "Browser console" %>
ブラウザーウィンドウを手動でリロードすると、
セッショ変数は 当然ながらなくなります。(???) (これは新しいセッションが作られたからです。)
一方で、たとえば、ソースファイルを保存することでホットコードリロードを動作させると、ページはリロードしますが、
セッション変数もまだ設定されています。試してみましょう!
~~~js
❯ Session.get('pageTitle');
'A brand new title'
~~~
<%= caption "Browser console" %>
そのため、ユーザーが何をしているのか正確に把握するためにセッション変数を使います。
HCRは ユーザーに見えないところで実行されます。 全てのセッション変数の値を保存する
こうすることで、ユーザーの混乱を最小限にするという確証を得て Meteorアプリケーションの新製品のバージョン(???)をデプロイすることができます。
この点について少し考えてみましょう。
もし私たちが URLやセッションの全ての状態を保持できるとしたら、
私たちは 各クライアントのアプリケーションのソースコードの動作を混乱を最小限にしてユーザーが気づくことなく変えることができます。
では、ページを手動で更新した際にどんなことが起きているのかチェックしていきましょう。
~~~js
❯ Session.get('pageTitle');
null
~~~
<%= caption "Browser console" %>
ページをリロードすると、セッションがなくなります。
HCR(???)、Meteorは ブラウザー内のローカルストレージに セッションを保存します。そしてリロードした後に再び読み込みます。
しかし、交互に起こるリロードの動作は理に適っています:(???)
ユーザーがページをリロードすると、同じURLを再び見るようなものです。
いつユーザーがそのURLを訪れたのかを理解する 状態が始まることを リセットするべきです。(???)
重要なレッスンはこうしたことです:
1. ユーザーの状態を常にセッションやURLで保存しているので、ユーザーはホットコードリロード時に混乱を最小限にすることができます。
2. URLの(???)ユーザー間で共有したいどんな状態でも保存します。