The Session

コラム 5.5

翻訳の進捗

本章で学ぶこと:

  • Learn about the Meteor Session
  • Learn about the autorun function
  • Learn about Hot Code Reload
  • Meteorはリアクティブなフレームワークです。 つまり、データが変化すると、何もしなくても確実にアプリケーション内のデータも変化するということです。 (???)

    私たちはすでに作業を 見てきました。  どのようにテンプレートが変化するのか (??????)

    これがどのように動いているのかは後の章でじっくり見ていきます。 ここでは、私たちは一般的なアプリでとても役立つ 基本的なリアクティブの特徴を 紹介したいと思います。 

    The Meteor Session

    現在のMicroscopeでは ユーザーのアプリケーションの現在の状態は(???) ユーザーが見ているURLが含まれています。(??データベース)

    しかし、多くの場合、 一時的な状態を保存する必要があります。  現在のユーザーの アプリケーションの(???)にだけ関係しています。 (たとえば、要素が現れるか隠れるかどうか)。 セッションはこうするための便利な方法です。

    セッションはグローバルのリアクティブデータストアです。(???) グローバルシングルトンオブジェクトという意味のグローバルです。(???)1つのセッションはどこからでもアクセスできます。 グローバル変数はよく悪いものだと見られますが、この場合セッションはアプリケーションの違う部分への中央 コミュニケーションバスとして使われます。(???)

    Changing the Session

    セッションは、Sessionでどこからでも使うことができます。セッションの値をセットするには、次のようにやります。(???)

     Session.set('pageTitle', 'A different title');
    
    Browser console

    Session.get(‘mySessionProperty’);を使うことで、(???)  データを読むことができます。 これはリアクティブなデータソースです。 つまり、ヘルパー内にこれを入れると セッション変数が変化した時に 反動的に ヘルパーの出力が変化するという意味です。(???)

    これを試してみるために、レイアウトテンプレートに次のようなコードを追加しましょう。

    <header class="navbar">
      <div class="navbar-inner">
        <a class="brand" href="{{pathFor 'postsList'}}">{{pageTitle}}</a>
      </div>
    </header>
    
    client/views/application/layout.html
    Template.layout.helpers({
      pageTitle: function() { return Session.get('pageTitle'); }
    });
    
    client/views/application/layout.js

    Meteorの自動リロード(つまり「ホットコードリロード」)はセッション変数を保存します。(???) そのため、私たちは今「違ったタイトル」がナビゲーションバーに表示されているのがわかると思います。 そうでなかったら、もう一度先ほどのSession.set()コマンドを入力してください。

    さらにもう一度、ブラウザーコンソール上で値が変化したら、また違ったタイトルが表示されます。

     Session.set('pageTitle', 'A brand new title');
    
    Browser console

    セッションはグローバルに使うことができるので、アプリケーション内のどこでもこうした変化をさせることができます。 こうすることで私たちは多くの力を得られますが(???)、使いすぎてしまうと罠にはまります。

    Identical Changes

    Session.set()でセッション変数を変更すると、全く同じ値をセットします。 Meteorは リアクティブチェーン(???)を回避できるほど頭が良いので、不必要なメソッドコールを回避します。

    Introducing Autorun

    私たちはリアクティブデータストアの例で、テンプレートヘルパー内で(???)、を見てきました。 しかし、Meteorでのコンテキストの多く(テンプレートヘルパーなど)は本質的にリアクティブです。 Meteorのアプリのコードの多くはまだ素のリアクティブではないJavaScriptです。

    次のようなコードをアプリのどこかにあるとします。

    helloWorld = function() {
      alert(Session.get('message'));
    }
    

    私たちはセッション変数と呼んできましたが、このコンテキストはリアクティブではないと呼んでいないのは、 私たちが変数を変えるたびに新しいalertを取得しないという意味です。 (???)

    ここでAutorunが登場します。その名前の通り、 autorunブロックの中に入れたコードは自動的に動きます。(???)  また、リアクティブデータストアが使われる度に変化します。動き続けます (???)

    ブラウザーコンソールでこのようにタイピングしてみてください。

     Deps.autorun( function() { console.log('Value is: ' + Session.get('pageTitle')); } );
    Value is: A brand new title
    
    Browser console

    ご推察の通り、このコードのブロックは autorunが一度動くと  (???)  データをコンソールに出力します。 では、タイトルを変化させてみましょう。

     Session.set('pageTitle', 'Yet another value');
    Value is: Yet another value
    
    Browser console

    魔法のようだ!セッションの値が変化すると、   コンソールに新しい値を再出力することで もう一度内容を動かす必要があると (???)  autorunは 識別しました。 

    そこで、先ほどの例に戻りましょう。 私たちが セッション変数が変わる度に 新しいアラートを動作させたい場合に、 autorunブロックにコードをラップする必要があります。

    Deps.autorun(function() {
      alert(Session.get('message'));
    });
    

    これまで見てきたように、autorunはリアクティブデータソースをトラッキング(???)して、(???)に反応することにとても役立ちます。 

    Hot Code Reload

    Microscopeの開発を通して、私たちはMeteorの時間節約する機能を利用してきていました: ホットコードリロード(HCR)です。 私たちははソースコードファイルを保存する時はいつでも、 Meteorは変化を見つけて、各クライアントにページをリロードすることを伝えて瞬時に Meteorサーバーを動かすように再起動します。

    これは自動的にページがリロードすることに似ていますが、重要な違いがあります。

    どういうことか理解するために、私たちが使ってきたセッション変数を再設定することから始めます。

     Session.set('pageTitle', 'A brand new title');
     Session.get('pageTitle');
    'A brand new title'
    
    Browser console

    ブラウザーウィンドウを手動でリロードすると、 セッショ変数は 当然ながらなくなります。(???) (これは新しいセッションが作られたからです。) 一方で、たとえば、ソースファイルを保存することでホットコードリロードを動作させると、ページはリロードしますが、 セッション変数もまだ設定されています。試してみましょう!

     Session.get('pageTitle');
    'A brand new title'
    
    Browser console

    そのため、ユーザーが何をしているのか正確に把握するためにセッション変数を使います。 HCRは ユーザーに見えないところで実行されます。 全てのセッション変数の値を保存する こうすることで、ユーザーの混乱を最小限にするという確証を得て Meteorアプリケーションの新製品のバージョン(???)をデプロイすることができます。

    この点について少し考えてみましょう。 もし私たちが URLやセッションの全ての状態を保持できるとしたら、 私たちは 各クライアントのアプリケーションのソースコードの動作を混乱を最小限にしてユーザーが気づくことなく変えることができます。

    では、ページを手動で更新した際にどんなことが起きているのかチェックしていきましょう。

     Session.get('pageTitle');
    null
    
    Browser console

    ページをリロードすると、セッションがなくなります。 HCR(???)、Meteorは ブラウザー内のローカルストレージに セッションを保存します。そしてリロードした後に再び読み込みます。 しかし、交互に起こるリロードの動作は理に適っています:(???) ユーザーがページをリロードすると、同じURLを再び見るようなものです。 いつユーザーがそのURLを訪れたのかを理解する  状態が始まることを リセットするべきです。(???)

    重要なレッスンはこうしたことです:

    1. ユーザーの状態を常にセッションやURLで保存しているので、ユーザーはホットコードリロード時に混乱を最小限にすることができます。
    2. URLの(???)ユーザー間で共有したいどんな状態でも保存します。