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

# 趣旨目的

簡単に言うと

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

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

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

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

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

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

![IMG_1100.PNG](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/101034/203ea8a8-c64f-0c09-0678-8d2a94580efd.png)
(※[2019.9.29追記]最初掲出していた画像は間違いが多かったので、修正しました)

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

```
Action → Dispatcher → Store (→ View)
```

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

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

(補足)たまに聞く[ReactNative](https://facebook.github.io/react-native/)は、Flux思想を元に(Reactを使って)ネイティブアプリを実装できるものです

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

# とりあえずアプリを作る

## 前準備

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

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

```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](https://chrome.google.com/webstore/detail/react-developer-tools/fmkadmapgofadopljbjfkapdkoienihi)

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

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

```powershell
npm install -g create-react-app
```

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

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

## アプリの雛形を作る

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

```powershell
create-react-app hoge
```

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

```powershell
create-react-app hoge --typescript
```

## 雛形の状態で動かす

単純に```npm start```ですね

```powershell
cd hoge
npm start
```

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

## Reactについて理解を深める

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

* [5分で理解する React.js](https://qiita.com/tomzoh/items/7fabe7cb57dd96425867)

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

* [フロントエンドのコンポーネント設計に立ち向かう](https://qiita.com/seya/items/8814e905693f00cdade2)
* [Reactコンポーネントへの理解を深める](https://codezine.jp/article/detail/9928)

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

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

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

https://github.com/cyross/MySampleReactApp

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

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

https://github.com/cyross/MySampleReactApp

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

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

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

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

## リポジトリ

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

https://github.com/cyross/ReactStudyThreeDivs

## 実行イメージ

![result_three_div.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/101034/aa2420b0-0ce3-49e4-0c38-6f765fa6310b.png)

## Herokuに組み込んでみる

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

[参考1][Node.jsアプリケーションをHerokuにデプロイ](https://qiita.com/yfujii01/items/d675f654f1fcce3b9098)
[参考2][The Heroku CLI](https://devcenter.heroku.com/articles/heroku-cli)

```powershell
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 付き)](https://iktakahiro.hatenablog.com/entry/2018/05/28/123000)

# 補遺1:Flux/React/Reduxリンク集

* [React公式日本語サイト](https://ja.reactjs.org/)
* [基礎からはじめるReact入門 - アプリの状態管理を安全に行うためのFluxとRedux](https://codezine.jp/article/detail/10751)
* [React+Fluxで正しく設計するためのFlux見直しガイド](https://aloerina01.github.io/blog/2018-09-14-1)
* [React: Visual Studio Codeで開発環境を整える](https://qiita.com/gumiTECH/items/4b82e4e3757f226df6b0)
* [maesblog - Reactの単純なサンプルでFluxの実装を解説](https://mae.chab.in/archives/2747)
* [新しい React アプリを作る](https://ja.reactjs.org/docs/create-a-new-react-app.html)
* [create-react-app が裏で何をやっているか理解する](https://qiita.com/naohikowatanabe/items/71a8bf477216ef56a5b7)
* [create-react-appからの脱却 - TypeScript,Reduxの導入(RxJS6も](https://qiita.com/Statham/items/9f830dac5fee00deb9df)
* [ReactのRedux非同期処理がサルでも分かる超解説](https://qiita.com/jabba/items/5ebea8d19809a4e0f8c6)
* [5分で理解する React.js](https://qiita.com/tomzoh/items/7fabe7cb57dd96425867)
* [フロントエンドのコンポーネント設計に立ち向かう](https://qiita.com/seya/items/8814e905693f00cdade2)
* [今話題のReact.jsはどのようなWebアプリケーションに適しているか？ Introduction To React─ Frontrend Conference](https://html5experts.jp/hokaccha/13301/)
* [React.jsの特徴](https://qiita.com/jkr_2255/items/453dfefc8932a1a768b7)
* [出来る限り短く説明するReact.js入門](https://qiita.com/rgbkids/items/8ec309d1bf5e203d2b19)
* [Elemental UI](http://elemental-ui.com/)
* [Reactコンポーネントへの理解を深める](https://codezine.jp/article/detail/9928)

# 補遺2:ES6関連リンク集

* [ES6(ES2015)チートシート](https://qiita.com/morrr/items/883cb902ccda37e840bc)
* [ES6って初めて聞いたんですが… 文系学生がどこまで理解できるのかやってみた!!](https://qiita.com/Takumi_Kaibara/items/a6aa7b6248d4dc6a905d)
* [ES2015(ES6) 入門](https://qiita.com/soarflat/items/b251caf9cb59b72beb9b)