趣旨目的

簡単に言うと

実務で使いたくても設計思想とか頭に叩き込まにゃきゃいけないからここに書きだめしておこう

という他愛のないものですニャ

間違いがございましたらご指摘くださいませ

Fluxっちゅー設計思想について

超有名SNS・Facebookが「なぁなぁお前ら、これからはSPAだからSPA!　俺っちがそんために発明したチョー便利なSPAの設計思想見てくんね？　Fluxっつーんだけどさぁ」とかパリピっぽく言ったかどうかは知りませんが(ネタです。他意ございません)、SPA(Single Page Application)を設計・実装しやすくするために考案された思想がFluxというわけで、最近よく使わ割れているReactやReduxは、Fluxの思想を実現するためのJavascriptライブラリなわけです。

Fluxはどういうものかというと、SPAのページを実装する上で、データフローが一方向のみにまとまるように考案した実装…言葉だけでは「なるほどわからん」状態になりそうでしたので、1枚のイラストに起こしてみました。

(※[2019.9.29追記]最初掲出していた画像は間違いが多かったので、修正しました)

この設計により、データの流れが、

Action → Dispatcher → Store (→ View)

という、シンプルな一本道になっていることがわかります(ViewはReactの場合)
ActionはViewか、別の場所で作成することになります。ブラウザで最初に表示される内容は、ブラウザが最初にページの内容を読み込んだ際に、対応する Action が生成されます。

これにより、非常にシンプルな構成・ライフサイクルで設計・実装できるようにしたわけですね。

(補足)たまに聞くReactNativeは、Flux思想を元に(Reactを使って)ネイティブアプリを実装できるものです

…ところで、Fluxって何かの略語だろうか？　調べてみても全然それらしき情報にマッチしない…

とりあえずアプリを作る

前準備

現在、PC(Windows10 x64)にNode.jsが入ってるのを想定しています。

当方はVSCodeをエディタとして使用しているので、そこのコンソール(PowerShell使用)を利用します。

PS L:\NodeApps> node -v
v10.16.3
PS L:\NodeApps> npm -v
6.9.0

あと、念のためにReact Developer Toolsを入れていきます。当方はChrome使っているのでChrome用をインストールしています。

Chrome用React Developer Tools

まずはcreate-react-appとか入れてみる

ささっと create-react-app 入れていきます

npm install -g create-react-app

本当ならこれで十分だけど、ついでに後々必要になりそうなライブラリを入れます

npm install -g http-server redux react-redux @types/react-redux typescript-fsa typescript-fsa-reducers elemental next gatsby gatsby-cli

アプリの雛形を作る

適当なアプリ名を指定して作成

create-react-app hoge

Typescriptでやりたい！という方はこちら

create-react-app hoge --typescript

雛形の状態で動かす

単純にnpm startですね

cd hoge
npm start

当方の環境では、勝手に新しいタブが追加されてlocalhost:3000の内容が表示されます

Reactについて理解を深める

理解を深めるにあたって有用なリンクは２つ

5分で理解する React.js

Reactに関してどのような特色があるのかわかりやすく書かれている

コンポーネントに関する知識を深めるのに重要なドキュメント

もしものためにGithubにリポジトリ作成

リポジトリ作成して作成しているアプリを登録

現在の成果をGithubからも確認できるようになった

[20191002]コンポーネント内でコンポーネントを生成できるか実験してみた

現在のリポジトリの最新版には、「コンポーネント内にあるdivがコンポーネントとして認識するのか」という実験をしています。

結果、無事にコンポーネントが生成されていたので成功したと見ています。

[20191004]時間ごとに内容が変わるアプリを作ってみた(更にHerokuで動作させてみた)

一定時間(1秒)ごとにテキストと背景が変わる処理を実装してみました。
Reactのみ(Redux不使用)で動かしています。

リポジトリ

前のサンプルとは別のものとして管理したかったので新しくリポジトリを作っています。

実行イメージ

Herokuに組み込んでみる

Herokuのアカウントを持っているので、npmでheroku cliを組み込んでさくっと入れちゃいましょう

[参考1]Node.jsアプリケーションをHerokuにデプロイ
[参考2]The Heroku CLI

npm install -g heroku
heroku login
heroku create
git push heroku master
heroku open

問題なければ、Herokuでアプリが動作します。

HerokuでのURLを貼り付けておきます

https://limitless-temple-41648.herokuapp.com

ちなみに、思いついてからHerokuで動かすまで2時間足らず。すごいですねー！

[20191004]冗長化を考えてRedis検討したら頓挫した

ここまで作れたのでそろそろ冗長化を考えることにしました。
内部で使用しているカウントをセッションIDと紐付けるという非常に簡単な構成で。
DBは、今の世の中Redisでしょーという根拠の薄い理由でRedisを導入することに。

そこで、HerokuでRedis使えたっけなーと調べてみたら使えることがわかり、しかも無料コースもあるということでこれを使おうとしたわけです。
で、Redisサーバ作ってアプリと紐付けようとしたら…なんと蹴られた！

警告メッセージを読んでみると…

あんたのアカウントにクレジットカード情報入れてへんからRedis組み込まさしたらへん！

…どうやら無料枠でもアドオン(RedisもHerokuアプリのアドオンという考え)入れようとするにはクレジットカードの番号とか入力しないといけない。これ、無連絡でスケールアップされたらかわなんなー…

と考えた時点で萎えました…OTL

[20201130]Reactのライフサイクルがわかりやすいイメージ参照

以下のブログにあるReactのライフサイクル一覧画面が非常にわかりやすいので共有いたします。

React Component ライフサイクルひとめぐり (CodeSandbox 付き)

とりあえず、React+Reduxのアプリが作れるようになるまで淡々と書いていく(現在進行中)