筋肉とエンジニアリングで すべてを解決するブログ

筋トレ、JavaScript、Ruby で世界を変えてやります。

【2016年】美味そうなプロテイン6種類を飲んでレビューしてみマッスル！

f:id:ma3tk:20161114230331p:plain

家賃補助とプロテイン

こんにちは、東大に入学する女性に対して 3万円の家賃補助が出るという件で炎上しているのを見ながらプロテインを飲んでいる @ma3tk です。

でも、家賃補助より福利厚生で無限に好きなプロテインが飲める会社がいいなぁ。

とも思っている始末に最近プロテインを飲みまくっています。

ちょっと今日はそろそろ12月も近いので、今年に注文して飲んでみたプロテインについてまとめておこうと思います。

たぶん今飲んでるプロテイン飲みきるペースじゃないし、今飲んでるので今年最後の注文かもってところなので。

うん、結構飲食物って好みが分かれますよね。

飲んでみないと味や食感がわからないですし、溶けやすさも比較しにくいですよね。

というわけで、個人的な感想になりますが今年のんだものを一覧化してみました。

その前に

プロテイン ≒ タンパク質 が摂取できてるかどうかについて去年まとめてましたので、もし事前にプロテインについて知りたい場合は以下を。

ma3tk.hateblo.jp

さて、上記の知識を持った上でお話を進めます。

評価軸

評価軸ですが、プロテインを選ぶ上で判断材料が色々あると思いますが僕は以下で評価してみます。

  • 内容量と価格のコスパ
  • 甘さやおいしさなどの味
  • 水への溶けやすさ
  • 発送やリピートしやすさ
  • 付属品や栄養などその他
  • 総合

色んなサイトで上3つは書いてあるところが多いですが、発送についてや付属品などはあんまり書かれてないので、そこも評価軸に。

2016年に飲んだプロテイン一覧と総合評価

6種類ほどのリスティングと総合評価。基本★5が最高です。※一部例外あり

  • ビーレジェンド 激うまチョコ風味 1kg ★★☆☆☆
  • ザバス ウェイトダウン ヨーグルト風味 1.05kg ★★☆☆☆
  • DNS プロエックス マンゴー風味 350ml ★★★☆☆
  • チャンピオン ピュアホエイスタック プロテイン チョコレート 2.27Kg ★★★★☆
  • バルクスポーツ ビッグホエイ 5kg ストロベリーショートケーキ ★★★★★
  • 『筋』B-STハイグレードプロテイン ★★★★★

順に紹介していきます。結構厳し目に書いてるので悪しからず。

ビーレジェンド 激うまチョコ風味 1kg

ビーレジェンド -be LEGEND- 激うまチョコ風味 (1Kg) [高品質ホエイプロテイン]

ビーレジェンド -be LEGEND- 激うまチョコ風味 (1Kg) [高品質ホエイプロテイン]

内容量と価格のコスパ　★★★★☆
甘さやおいしさなどの味　★★☆☆☆
水への溶けやすさ　★★☆☆☆
発送やリピートしやすさ　★★★★☆
付属品や栄養などその他　★☆☆☆☆
総合　★★☆☆☆

安めで Amazon からすぐに手に入るのでいい。しかし、空けた時にパラパラ舞うくらいに粉っぽさがあり、水に溶かしても若干溶けにくいなぁという印象。

美味しさを謳っているが、過熱しているプロテイン市場からすると激うまチョコ風味の味感はもうビーレジェンドの味がデフォルトくらいになっている気がする。

Amazon から買うと軽量スプーンが入っていないので初期の選択肢に上げにくかった。でも、もらったら嬉しいな。

他の味はもしかしたら美味しいかもしれないので、いつも飲んでるプロテインに飽きたらチェックしてみると良いかも。

ザバス ウェイトダウン ヨーグルト風味【50食分】 1,050g

ザバス ウェイトダウン ヨーグルト風味【50食分】 1,050g

ザバス ウェイトダウン ヨーグルト風味【50食分】 1,050g

内容量と価格のコスパ　★★☆☆☆
甘さやおいしさなどの味　★☆☆☆☆
水への溶けやすさ　★☆☆☆☆
発送やリピートしやすさ　★★★★☆
付属品や栄養などその他　★★★☆☆
総合　★★☆☆☆

The ソイプロテイン。

ソイプロテインは溶けにくくて、美味しくなくて、粉っぽいというところがあります。

ただ、ソイプロテインの中では比較的飲みやすくて、牛乳や豆乳と割ると割といける商品ですね。

Amazon からも若干安く買えるけど、ホエイプロテインと比べるとやはり割高かな。

安定してゲットできるし、付属してるスプーンもちょうどいいのが魅力的。

減量用、比較的女性向きって感じです。ちなみに会社に一袋置いてます。

DNS プロエックス マンゴー風味 350ml×24本

DNS プロエックス マンゴー風味 350ml×24本

DNS プロエックス マンゴー風味 350ml×24本

内容量と価格のコスパ　★☆☆☆☆
甘さやおいしさなどの味　★★★★★
水への溶けやすさ　★★★★★
発送やリピートしやすさ　★☆☆☆☆
付属品や栄養などその他　★★★☆☆
総合　★★★☆☆

うまい。これはうまい。

紹介している中では唯一のドリンクタイプ。

でも、ぶっちゃけ高いのが少し痛いところ。栄養素的にもタンパク質はあるけど、マルチビタミンとかってわけでもなく、糖質脂質もやや多めなのでつらみがあるかなーというところ。

とは言ってもそれを凌駕するほど圧倒的な事が、この溶かす行為のなさ、容器洗浄の不要性、携帯性、十分なタンパク質量！これは他のものにはない！

それを考えると、★3というところですね。

常用にはちょっと向かないかな。でも、遠征する時とか、プロテイン忘れて自動販売機に売ってるときとかだと手っ取り早くていい。

めちゃくちゃ美味いから最後の一滴まで飲み干したくなる一品ですね。

チャンピオン ピュアホエイスタック プロテイン チョコレート 2.27Kg

海外直送品 Pure Whey Plus Supplements, Chocolate Brownie 2.18kg

海外直送品 Pure Whey Plus Supplements, Chocolate Brownie 2.18kg

内容量と価格のコスパ　★★★★★
甘さやおいしさなどの味　★★★★☆
水への溶けやすさ　★★★★★
発送やリピートしやすさ　★☆☆☆☆
付属品や栄養などその他　★★★★☆
総合　★★★★☆

あまあああああい！！おいしいい！！！！プロテインってこんなにうまいんだ！！！！！って思える素晴らしい一品。

甘党の僕には最高です。でもちょっと甘味料感強めで後味が海外っぽいなーってところです。

しかし、水にもすごい溶けるし、もし溶けなくて塊になってもチョコブラウニー食べてる感じだし、毎日おやつ食べてる感じです。

海外直送なので注文から到着まで大体10日〜14日くらいかかってしまうので、飲みきるかな、って時に注文するとプロテイン切れが起こります。

また、栄養も海外の製品なので少しBCAAの比率に偏りがあるっぽくて、嘆いてる方も見受けられます。

容器もプラスチックのボトルなので、ごみ捨ての時にかさばるのが少しネックですが、それを差し置いても理想に近い甘々プロテインですね。

コスパもいいので、チョコレート感欲しくなったらこれ飲んでみると世界がさらに変わると思います。

バルクスポーツ ビッグホエイ 5kg ストロベリーショートケーキ

バルクスポーツ ビッグホエイ 5kg ストロベリーショートケーキ

バルクスポーツ ビッグホエイ 5kg ストロベリーショートケーキ

内容量と価格のコスパ　★★★★★
甘さやおいしさなどの味　★★★★★
水への溶けやすさ　★★★★★
発送やリピートしやすさ　★★★★★
付属品や栄養などその他　★★★★☆
総合　★★★★★

いや、僕はもうこの商品に恋をしました。

うめえええ！っとなる感覚よりも、ナチュラルにずっと飲めるって感じです。彼女にしたいというより、嫁にしたい。

もちろん好みはあると思いますが、1kg頼んですぐになくなったので、5kg も入ってるこれをリピートして絶賛ごくごくしてます。

価格もコスパもいいし、味も甘みの後にスッキリがあるし、水にも溶けるし、Amazonで頼んでもすぐ来るし。

非の打ち所がない最強の商品だなと感じています。

一番甘いと言われているストロベリーショートケーキですらスッキリしているのでリピートしやすい一品かなと思います。

これを年末まで飲み続けるかと思います。

『筋』B-STハイグレードプロテイン

内容量と価格のコスパ　★★☆☆☆
甘さやおいしさなどの味　★★★★★★★★(限界突破)
水への溶けやすさ　★★★★★
発送やリピートしやすさ　★★★☆☆
付属品や栄養などその他　★★★★★
総合　★★★★★

「俺は今一体何といううまいものを飲んでるのか」と思うくらいに激うま、甘くて美味しいプロテインです。

この美味さを味わったら、他のプロテインが全部激マ○って言ってもいいくらいに美味いです。やばいです。他のプロテインさんごめんなさい。

このプロテイン、わざとクッキーのかけらみたいなものが入っています。ただ飲んでも美味しいのに、このチップも同時に食べれて満足感も相当に得られる。最高じゃないですか？

美味いだけじゃなくて、栄養もすごいリッチで、カルシウムHMBとか入っているので本当に筋肉に特化したプロテインなんだなというのがわかります。

値段が比較的高いところがウッってなりますが、サプリメント買ったらそれ以上出費するけども、プロテインの栄養価が高いので、価格に見合った商品かなと思います。

Amazonには売っていないので、他の商品と比べると注文から到着まで時間がかかるのと、送料が500円/1個しますが、3個まとめ買いすると送料無料になるので、最初からまとめ買い推奨です。

そろそろ飲みたいなぁ。

まとめ

というところで、今年飲んだ6つのプロテインを紹介しました。

色々厳し目に書いたのですが、もちろんどれも10年前の高校時代から考えると全て美味しいです。

特に『筋』B-STハイグレードプロテイン、バルクスポーツ ビッグホエイはどちらもおすすめなので、両方買って試してみると良いかなと思います。

というわけで、みなさんも Muscle Happy！

Redux + Rails4.2 のベースを作ってみた

前回に続き

一ヶ月前以下のような記事を書きました。

ma3tk.hateblo.jp

Redux の考え方を自分なりの言葉で落としてみたんですが、実際コードがないとわからんよね、ってところで React + Rails なコードをちょうど友人がサンプルで上げていたのでそこからフォークして Redux 組み込んでみました。

ベース

github.com

詳しくはこの Qiita の記事 に書いてあるので、大前提はこちらを参考に。

Redux を組み込んでみる

Redux を組み込んでみるサンプルとして、

  • 入力可能な input box (update_box) の設置
  • 入力した文字を送信するための Update Info Button の設置
  • 入力した文字を適当な場所に表示する

事を考えます。

やること

上記のような内容ですが、もっと具体的に書くと、

  • 入力可能な input box (update_box) の設置
    • input box を設置
    • ref 属性をつけて値を取得できるようにする
  • 入力した文字を送信するための Update Info Button の設置
    • button の設置
    • onClick した時の動作 ( Action の updateArticleInfo を呼び出すための関数、ref からの値取得) の記述
    • updateArticleInfo 内で Action 内の updateArticleInfo(update_text) を呼び出す
    • Action 内の updateArticleInfo(update_text) では Reducer へ渡すための object を記載
    • Reducer 内で Article の article_info を更新する
  • 入力した文字を適当な場所に表示する
    • Article という state の article_info を表示するよう記載する

こんなところでしょうか。

ディレクトリ構成と main.js

前回の記事にあるようなつくりにします。

$ tree frontend/src/javascripts
frontend/src/javascripts
├── actions
├── components
├── constants
├── main.js
├── reducers
├── store
└── utils

で、実際に変更した diff

github.com

上記のコミットになります。

詳しいことはコメントしてあるので Github 上を見てください。

ルーティングもしてみる

色々不要なのも実は上記のコミットに入っちゃってるのですが、React-Router を導入し、一部ちょこちょこ変更して、新しい component ファイルを入れて呼び出すとページ遷移も可能になります。

github.com

Link という機能が React-Router に入っていますので、それを使うと勝手に遷移してくれます。

また、Router にはいろんなものがあるのですが、 React-Router がデファクトスタンダードだという情報を見たのでこれにしてます。

Ajax でデータを取得する

もちろん、ネットワーク関係ない簡単なものであればそれはそれで楽なのですが、大体の場合 API を介してやり取りする必要が出てくるかと思います。

https://github.com/ma3tk/react-test/pull/2/files#diff-c1e153d5c761452afbe856e869f84099R12

上記のような形で fetch() し、 then() に取得時の処理を記載しておけば非同期通信が可能になります。

非同期通信後は 別な function で定義した Action を Dispatch してあげて state を更新するとうまくいくかと思います。

github.com

まとめ

コードベースではありますが、実際に React と Redux をコードに落としていけば良いのかをまとめてみました。

上記の 3つ (ベース部分、ルーティング、非同期通信) 周りの理解が進めばだいたい Redux の記述がしやすくなると思います。

ベースの部分の理解も少々大変なところはあると思いますが、大規模になればなるほどこの Redux の良さが効いてきますので、是非うまく使いこなしてみてください。

React-Redux をわかりやすく解説しつつ実践的に一部実装してみる

全くわからない

こんにちは。

ここ1〜2週間くらい React と Redux 触ってるんですが、あまりにもまともなドキュメントがなく、どう動かして良いのかわからなかった状態でした。

しかし、色々仕組みを追っているうちに「こんな感じで書けばいいのでは」というのがわかってきたので僕の言葉&コードでまとめてみようと思います。

独自の解釈かも知れない部分があるので、変なところはコメントいただけると助かります。

まず React について

React についてはたくさん書かれてるのと、ふぅん〜くらいに流してもだいたいなんとかなるので端折ります。

qiita.com

上記の基本〜コンポーネントの使用くらいまで読んだらだいたいOKです。

重要なのは、

（MVCで言うところの）Viewのみを担当する。
JavaScriptのコード中に（PHPの様に）「HTMLタグ(っぽいもの)」を書ける。

ここらへん。

実践的に重要となるのは、render() 中の JSX の書き方くらいでしょうか。

結局僕は「Facebook製の優秀なテンプレートエンジン」くらいのレベルで解釈して後は調べるのをやめました。今度もうちょっと深追いします。

Redux について

React だけでも フロントエンド開発はできるっちゃできるんですが、フロントエンドでは結局状態管理が必要ですよね。

例えば、

  • ページングがある一覧に対して、現在のページ数を保持したり、「次へ」を押して読み込んでる最中は読み込んでいるという状態を管理したり
  • チェックボタンが3つあって、3つチェックされたら送信ボタンが ON になるための状態を管理したり

といった状態管理するためのフレームワークです。

もちろん、React と独自実装でも状態管理はできるけど、いい感じに状態管理周りをまとめてくれるフレームワークの一つが Redux です。

Redux のアーキテクチャ

Redux は 5つの要素からなります

  • State
    • 重要なやつ
    • 状態を保持してるところ
    • この State の状態を常に監視して、View 部分である React でレンダリングを行う
  • Action
    • type をキーとして、State を更新するための定義を書く
    • 更新する時は dispatch 関数を実行することで状態更新する
    • dispatch(definedFuncInActionCreator()) というような形
    • しかし！！！更新したい状態の定義はここではしない、それは ActionCreatorでやる
    • 関数のdispatchを行う場所、的なイメージ
    • その他、ajax 通信するならここ
  • ActionCreator
    • Action では書かなかった、更新したい状態(新しいState)の定義を書く
    • 直接 State をいじるのではなく、上書き更新したい部分だけ書く
    • ファイル的には Action と同じファイル上で書いてるようだし、ほぼほぼセット
    • テストしやすくしてるため分離してるみたい
  • Store
    • 一回書いたらほとんど変更しないところ
    • State を使うよーとか、redux のミドルウェア(Logger とか Thunk とか)を定義するみたいな部分
    • 状態管理部分の実装中はあんまり触らない
  • Reducer
    • state の状態を更新するためのロジックを書く部分
    • 基本的に Switch 文中に Action で定義した State の type で分岐しロジックを書く
    • return するものは必ず新しい Object というルールが有る(Object.assign({}, state, {変更したいプロパティ}) という関数をよく書く)

ばっと説明しましたが、たぶん上記を読んだだけではよくわからない

ので、いちから設計等を考慮して実装してみたいと思います

1. まず、作りたいものの検討

今回は以下の様なものにします

  • 最初の段階では div 要素に「入力してください」と表示される
  • input ボックスにデータを入力して submit ボタンを押したら、 input ボックスの値を取得し、特定の div 要素のテキストが更新される
  • input ボックスに入力した文字数が表示される
  • show ボタンを押すと div 要素の表示が表示される
  • hide ボタンを押すと div 要素の表示が消える

ものを作ってみたいと思います。

簡単すぎず若干複雑さがあるものにしてみました。

2. State の設計

State は以下のような Object で考えます

{
    text: "更新される内容",
    number: 0,
    flag: trueかfalse
}

状態管理したいのは div 要素のテキスト、文字数、表示するしないのフラグあたりですね。

この状態が変更されたときに「どう表示を変更するか」を別途実装します。

そして、状態が変更されたならば View 側に通知するために「store.subscribe() という関数を実行する」のですが、 React-Redux のライブラリの @connect 関数(後述)を使うと勝手に通知してくれるので、View への通知はあんまり気にしなくても大丈夫です。

3. Action の設計と実装

Action で State がどう変わるか設計します。

State が変更されるのはどういうときかを考えると、

  • submit が押されたとき
  • show が押されたとき
  • hide が押されたとき

今回はこの 3パターンですね。

submit が押された時

{
    type: "SUBMIT",
    text: "inputから取得した文字列",
    number: inputのvalueのlength
}

show が押された時

{
    type: "SHOW",
    flag: true
}

hide が押された時

{
    type: "HIDE",
    flag: false
}

上記のような更新を State にかけるといい感じに差分が変更されるでしょう。

更新したい部分のプロパティだけが入ったオブジェクトを定義します。

./frontend/javascripts/actions/Text.js

export function submitText(text) {
    return {
        type: "SUBMIT",
        text: text,
        number: text.length
    };
}

export function showText(text) {
    return {
        type: "SHOW"
        // flag は可変ではなく true 固定のため、 Reducer 側で書く
    };
}

export function hideText(text) {
    return {
        type: "HIDE"
        // flag は可変ではなく false 固定のため、 Reducer 側で書く
    };
}

4. Component (というか React 部分の HTML)

簡単にベースの HTML を考えます。以下のようなHTMLで表示するとします。

            <div>
                <div class="(hide)">
                    文章文章
                </div>
                <div>
                    <span>100</span> 文字
                </div>
                <input type="text" ref="inputText">
                <button>submit</button>
                <button>show</button>
                <button>hide</button>
            </div>

ただし、 HTML のようなもの ( jsx ) であるだけで、

  • jsx は HTML ではないため、class の設定が className になっていたりするので少し注意が必要なこと
  • 既存の HTML のタグやテキスト以外にも、{this.hogehoge()} とかもできちゃう
  • js のクラスも Render 内で解釈が可能 {HogeClass}
    • import したライブラリとか読み込みたい場合に使ったりする
    • 同一ファイル内でクラスを定義してあればそれでも良い
  • 属性の書き方が以下のように少し違う(単独の文字列の時はダブルクオーテーションで良く、それ以外の時は { } で囲む)
    • 文字列を設定する場合 class="moji"
    • 数字を設定する場合 class={123}
    • インスタンス等 class={Instance}
    • 要素の結合がある場合 class={"btn " + (flag ? "hide" : "" )}
  • <p 要素名=値 要素名=値>hoge</p> というようにイコールの前後はスペースを空けない
  • <input>等の単独の要素は /> で終わらせ、 <input type="input" /> といった形で閉じる

などなど、結構直感的にわかるかと思います。

5. Component のイベントの設計と実装

さらに Component でのイベントの登録(EventListener)も考えておきます。

DOM上に onClick={dispatch(hoge(flag))} みたいにも書けますが、見通しをよく・共通化するためにも function 化します

今回の関数は以下の通り

  • submitButtonClicked()
    • submit が押されたときの挙動を書く
  • showButtonClicked()
    • show が押されたときの挙動を書く
  • hideButtonClicked()
    • hide が押されたときの挙動を書く

僕の中でまだわかりきっていませんが、ActionCreator と Component の function での役割の差分は、

  • Component のみで dispatch できるなら dispatch する
  • Component では、dispatch 前にパラメータの取得、要素の設定など可変なものを準備する
  • ActionCreator では動的な取得は必要以上に行わず、引数で済ます

といったところを考えています。ココらへん詳しい人教えてください。

今回の Component を具体化すると

./frontend/javascripts/components/Text.js

import React, { Component } from "react"
import { connect } from 'react-redux'

// 使うアクションを import する
import { submitText, showText, hideText } from "../actions/Text"

class Text extends Component {
    render() {
        // mapStateToProps で紐付けしていることに注意
        const { flag, text, number } = this.props;
        // ココらへんは Redux じゃなくて React (JSX) の書き方
        return (
            <div>
                <div className={(flag ? "" : "hide")}>
                    {text}
                </div>
                <div>
                    <span>{number}</span> 文字
                </div>
                <input type="text" ref="inputText" />
                <button onClick={e => this.submitButtonClicked(e)}>submit</button>
                <button onClick={e => this.showButtonClicked(e)}>show</button>
                <button onClick={e => this.hideButtonClicked(e)}>hide</button>
            </div>
        )
    }

    submitButtonClicked(e) {
        // input の値を取得
        // action 内ではできない事をここで処理する
        const inputText = this.refs.inputText.getDOMNode().value;
        dispatch(submitText(inputText));
    }

    showButtonClicked(e) {
        dispatch(showText());
    }

    hideButtonClicked(e) {
        dispatch(hideText());
    }
}

function mapStateToProps(state) {
    const { flag, text, number } = state;
    return {
        flag,
        text,
        number
    }
}

// react-redux にある connect 関数を使うと state と Text の this.props をひも付けできる
// 前述したとおり、 store.subscribe() を呼ばなくても良くなる
export default connect(mapStateToProps)(Text)

上記のようになります。

6. Reducer の設計と実装

Reducer は先程出たように、State の更新処理を行う部分。

どういうパラメータの更新かは Action で定義されているが、具体的に State のどの部分の更新なのかをひも付けてあげる部分。

Index.js

まず、 ./frontend/javascripts/reducers/Index.js を作る

import {combineReducers} from "redux"
import text from "./Text"

const reducer = combineReducers({
    text
});

export default reducer;

これは Reducers が肥大化するため、 reducers/Index.js では複数の Reducer を結合できる仕組みを作っている。

他にも処理したい Reducer が増える場合、

  • import する
  • combineReducersのオブジェクトに追記してあげる
import {combineReducers} from "redux"
import text from "./Text"
import form from "./Form"

const reducer = combineReducers({
    text,
    form
});

export default reducer;

といったように。(今回は上記は必要ないですが)

Text.js

さらに、 ./frontend/javascripts/reducers/Text.js を作ります。

ここが実際に今回の状態変更の処理をする部分になっています。

// 初期値の設定をしてあげる
const initialState = {
    flag: true,
    text: "入力してください",
    number: 0
}

// action で受け取った値を state に適用して更新する
export default function text(state = initialState, action) {
    const { flag, text, number } = action;
    switch (action.type) {
        case "SUBMIT":
            // 今回ここでは状態の更新だけだが、action の値によってさらに別な値も変えたりするなど
            return Object.assign({}, state, {
                text: text,
                number: number
            });
        case "SHOW":
            return Object.assign({}, state, {
                flag: true
            });
        case "HIDE":
            return Object.assign({}, state, {
                flag: false
            });
        default: 
           return state;
    }
}

上記の状態の更新以外の部分では、例えば以下のような処理もできる

      case "SUBMIT2":
            let newFlag;
            // 一例ですが、文字数によって他のパラメータも更新する、などの場合
            if (number > 10) {
                newFlag = true;
            } else {
                newFlag = false;
            } 

            return Object.assign({}, state, {
                text: text,
                number: number,
                flag: newFlag
            });

7. Store の設定

つなぎこみの設定するだけです。

ここも色々な書き方ができるみたいですが、

をしてあげています。

./frontend/javascripts/store/ConfigureStore.js

import thunkMiddleware from 'redux-thunk';
import createLogger from 'redux-logger';
import { createStore, applyMiddleware } from 'redux';
import rootReducer from '../reducers/Index';

const loggerMiddleware = createLogger();

export default function createStoreWithMiddleware() {
    const store = applyMiddleware(
        thunkMiddleware, // lets us dispatch() functions
        loggerMiddleware // neat middleware that logs actions
    )(createStore);
    return store(rootReducer);
}

一回書いたらそんなに変更することはないです。

redux-thunk というライブラリを使って複数の dispatch ができるようになる部分、 redux-logger というライブラリを使って開発中のデバッグができるようになるライブラリ(ミドルウェア)を組み込んで、 rootReducer である reducers/Index.js を読み込んでいる事が理解できるでしょうか。

上記の2つのミドルウェアは必須ではないので、自分の好みに合わせてつけてみるといいと思います。

8. エントリーポイントである index.js の作成

上記まででほぼほぼ完成です。

最後にエントリーポイントを作ります。

./frontend/javascripts/index.js

import React from "react"
import ReactDOM from "react-dom"
import {Provider} from "react-redux"
import createStoreWithMiddleware from "./store/ConfigureStore"
import Text from "./components/Text"

const store = createStoreWithMiddleware();

ReactDOM.render(
    <Provider store={store}>
        <Text />
    </Provider>,
    document.getElementById('content')
);

上記の import 文でわかるかと思いますが、 const store は 7. で前述した rootReducer の読み込みとミドルウェアの読み込み部分です。

で囲んであげると Store のデータがやり取りできるようになります。

9. トランスパイル

browserify 等を使って ./frontend/javascripts/index.js を元に、 ./index.js としてトランスパイルした結果を出力します。

ココらへんも書くと結構長くなるので今回は端折りますが、次回の記事で実例とともに書こうと思います。

ちなみに、この index.js には npm install した react や redux 等も含まれている状態とします。

10. index.html の作成

外部からアクセスできるディレクトリに

と書いたHTMLを準備すると、 React の DOM が描画されます。

./index.html

<html>
<body>
<div id="content"></div>
<script src="./index.js"></script>
</body>
</html>

もちろん上記の HTML の index.js は色々すっ飛ばして書いていますが、

これらについて今後別途サンプルのリポジトリを作成します。

11. 完成

内容としては以上です。

./index.js を読み込むと1〜7までに書いた react と redux の部分が処理されていることがわかるかと思います。

ブラウザのコンソール等を見て動きをチェックしてみてください。

終わりに

こんな形でだいたいの作り方は理解はできたでしょうか？

実際の完成形のコードや概念は理解できても、どこからどう作れば良いのかのノウハウが足りなかったので参考にしてもらえればと思います。

今後実際の動くコードや gulp を使ったトランスパイル例、また非同期通信等の実装などもかければと思っていますので応援よろしくお願いいたします！