See the Elephant

1992生まれのプログラマが書くエンジニアブログ

Redux StateをAction駆動で変化させるReducerの仕組み

Redux

Reduxに関してはこちらがおすすめ. わかりやすい.

qiita.com

Reduxはイベントドリブンに似ている

状態をイベントドリブンで変化させる仕組みだと思えば良い.

関心ごとはひたすらに State を誰にどのように操作させるか である. では見ていこう.

Redux の大まかなイメージ

f:id:namu_r21:20181015191131p:plain

自分はReduxを勉強していて川と魚と釣り人の関係を思い浮かべた.

川に魚が泳いでいる. そしてそれを釣り上げる釣り人がいる.

川には魚が流れ続けている.

魚がEvent, その魚に対応して釣り人(関数)が魚を釣る．

Eventに対応して関数が動く. そんなイメージである.

イベントドリブンなアプリケーションは大体こんなイメージだと思う.

Reduxをシンプルに表したコードを読んで見る

numb86-tech.hatenablog.com

こちらからコードを参照.

import { createStore } from 'redux';

const myActionCreator = (num=1) => {
    return {
        type: "INC_COUNTER",
        num
    };
};

const myReducer = (state={counter:0}, action) => {
    switch(action.type){
        case 'INC_COUNTER':
            return Object.assign({}, state, {
                counter: state.counter + action.num
            });
        default:
            return state;
    };
};

const myStore = createStore(myReducer);

// この時点で、Reduxは機能している
// 以下は動作確認

console.log(myStore.getState());    // { counter: 0 }
myStore.dispatch(myActionCreator(1));
myStore.dispatch(myActionCreator(2));
console.log(myStore.getState());    // { counter: 3 }

このコードを見る限り

  • store を作るためには reducer を用意する必要がある.
  • reducer は, state と action を引数にとり, state を返す
  • reducer は action に応じた処理が実行される
  • 上記の場合だと, INC_COUNTER というアクションが来た場合は state に記録されているcountに対して actionに設定されている値を加算する.
  • 同じ store に対して action を送る(dispatch) することで state の中身が書き換わっていく.

イメージとしてはこんな感じ.

f:id:namu_r21:20181015184546p:plain

状態(state)は, store という囲いの中に覆われている． state を操作できるのはあらかじめ定義された reducer しかいない.

reducer は 発行されたaction に対応し実行される.

Action が Event で, reducer が Eventに紐づく関数 と思えばイベントドリブンのアプリとそう大きく変わらない

f:id:namu_r21:20181015191104p:plain

Reducerの役割

Reducerの役割はシンプルな関数で表される.

   reducer(state, action) => state

つまり, reducer は state と action を受け取り, state を返すのだ.

もう少し詳細に表すと以下のようになる.

   reducer(oldState, action) => newState

つまり, reducer は 古いstate を action に応じて 新しいstate に変換する.

Reduxは action をきっかけに reducer を通じて state を変化させる仕組みなのである.

Reduxはイベントドリブンに似ていた

Reduxはイベントドリブンに似ていた.

Action に紐づいて Reducer が発動する. Reducer によって Stateが変化する.

Reducer と Stateは Store によって隠蔽されており, 外部からの操作は Action しか受け付けない.

これによって, 状態変化のフローを一方向に制約している.

なるほど，そんな仕組みだったんだね.

今回はここまで．

react 事始めして見る.

環境設定して見る

https://www.to-r.net/media/react-tutorial12/

を見ながらやっていく.

# プロジェクトの作成

$ create-react-app start-react
Success! Created start-react at /Users/shuzon/work/tech/react/start-react
Inside that directory, you can run several commands:

  npm start
    Starts the development server.

  npm run build
    Bundles the app into static files for production.

  npm test
    Starts the test runner.

  npm run eject
    Removes this tool and copies build dependencies, configuration files
    and scripts into the app directory. If you do this, you can’t go back!

We suggest that you begin by typing:

  cd start-react
  npm start

Happy hacking!

プロジェクトが生成された.

サーバを立ち上げて見る

npm start を実行することでローカルサーバが立ち上がる.

f:id:namu_r21:20181014173600p:plain

スクショはこんな感じ

<h1 className="App-title">ようこそReactへ</h1>

試しに, <h1>を追加して見た.

f:id:namu_r21:20181014173835p:plain

追加された.

コンポーネントを忖度してみる

class App extends Component {
  render() {
    return (
      <div className="App">
        <header className="App-header">
          <img src={logo} className="App-logo" alt="logo" />
          <p>
            Edit <code>src/App.js</code> and save to reload.
            <h1 className="App-title">ようこそReactへ</h1>
          </p>
          <a
            className="App-link"
            href="https://reactjs.org"
            target="_blank"
            rel="noopener noreferrer"
          >
            Learn React
          </a>
        </header>
      </div>
    );
  }
}

Component は render 関数を持つ.
戻り値としてjsx記法でhtmlを書いていく.

jsx記法

jsxはjava scriptの中にHTMLタグをかけるようにする文法拡張である.

上記のサンプルコードでは <img src={logo} className="App-logo" alt="logo" />のうち,
{logo}がjsx記法に該当する.

javascriptのコード展開ができるため, 生成するhtmlを柔軟に変更できる.

今回はここまで.

webアプリを作りたいのでsymfony4をインストールする

webアプリ作りたいのでsymfony4をインストールする

symfony.com

公式ページから以下のコマンドをコピペ

composer create-project symfony/website-skeleton my_project

実行してみるとエラーが出た.

dyld: Library not loaded: /usr/local/opt/icu4c/lib/libicui18n.58.dylib
  Referenced from: /usr/local/bin/node
  Reason: image not found
zsh: abort      node

qiita.com

この記事の通り, nodeを再度インストール

PATH通せとお怒りなのでパスをセッティング

If you need to have this software first in your PATH run:
  echo 'export PATH="/usr/local/opt/sqlite/bin:$PATH"' >> ~/.zshrc

もう一回コマンドを実行

composer create-project symfony/website-skeleton my_project

動いた.

 What's next?


  * Run your application:
    1. Change to the project directory
    2. Create your code repository with the git init command
    3. Execute the php -S 127.0.0.1:8000 -t public command
    4. Browse to the http://localhost:8000/ URL.

       Quit the server with CTRL-C.
       Run composer require server --dev for a better web server.

  * Read the documentation at https://symfony.com/doc


 Database Configuration


  * Modify your DATABASE_URL config in .env

  * Configure the driver (mysql) and
    server_version (5.7) in config/packages/doctrine.yaml


 How to test?


  * Write test cases in the tests/ folder
  * Run php bin/phpunit

プロジェクトディレクトリに移動

$ cd my_project
$ git init
$ php -S 127.0.0.1:8000 -t public

これでサーバが立ち上がる

ブラウザで開く. http://localhost:8000/

ローカルでサーバが立つところまで来た. 今日はここまで

フィードバックの重要性 (output大全)

input, outputだけでは足りない

インプット, アウトプットをやるだけでは成長できない. そこにはフィードバックがなければいけない.

できることばかりやり, できないことを克服しないと成長は見込めない.

できたこととできなかったことを認識して克服する, 伸ばすことが必要.

短所克服と長所伸展

フィードバックには2つある.

  • できないことを克服する方法 = 短所克服
  • できることをより得意にすること = 長所伸展

アウトプットが習慣づいていない人は長所伸展から始めるといい.

自信がついて続くのだ.

短所克服は根気がいるのでインプットアウトプットフィードバックの習慣がついてから始めるといい.

学びの種類について

学びの種類は2種類ある.

深く狭く学ぶ方法と浅く広く学ぶ方法.

知識を広めたいのか深めたいのかによってやるべきことは変わってくる． これを認識するだけで行動の選択が変わる.

なぜを解決する

「なぜ」と思うことの先に「気づき」が存在する.

物事が上達する人間はこの「なぜ」を見捨てず解決する人である.

逆になぜを捨ててしまう人は上達していかない.

他人からのフィードバックをもらう

疑問や気づきを自分以外の人に意見してもらうことも大切である.

自分以上に対象の物事を知っている人間から教えてもらうことでより良質なinputが生まれる.

なぜを解決していくとステージが上がる

なぜを解決することで少しずつ見える世界が変わる.

これによって質問の内容も高度な内容になりそれに対する返答も少しずつ良質なものとなっていく　

なぜを捨てず, 疑問を着実に解決していこう.

これ自分の体験に当てはめると, できないことをできるようになった瞬間って

 - できないことであると認識する
 - なぜできていないのか原因を探す
 - 自分に不足している部分を定義する
 - 定義した範囲について調査, 手助けをもらう
 - 問題を解決する
 - 忘れないように記録 / 体得する
 - 録画, 録音, レビューなどによって他者や第三者的な意見を取り入れる
 - 最初に戻る
 - 以降, 繰り返す

のように問題の定義から解決, フィードバック, 繰り返しが一定のフローになっている. 
このように何かを上達したいと思った場合は一定時間を有するし，できない自分を認める必要がある. 

ブログを書くのも一定のフィードバックや客観的な視点をもらえるのでそういう意味でかなり有用だな

output大全を読み始めた

アウトプットが足りてないのでアウトプット大全を読んだ感想をアウトプットする

最近, インプットばかりでアウトプットできていない. 休みを利用してアウトプット大全を読む.

感想は囲って書く

現実世界はアウトプットによって変わる

インプットばかりでは現実世界は変わらない. 脳内世界ばかりが肥えていく.

行動する=アウトプットしていくことで現実世界が少しずつ変わる.

ここ1年ほど本ばかり読んでアウトプットしてこなかった.
あまり暮らしぶりや給料が変わっていないのでアウトプットしていこう

運動性記憶

運動性記憶とは運動神経と筋肉を利用した記憶である． 自転車を数年ぶりに乗った時に乗れるのは, 運動性記憶として記録されているから. 小脳や海馬を経由することで多くの脳内細胞を利用するから記憶に残りやすいそう.

話すや書くといったアウトプットすることによって運動神経が使われ記憶に残る.

確かに人に説明した時やブログに書いた時の方が記憶に残っていることが多い. 
人に説明するつもりで文章を書くのは理にかなっているらしい.

2週間に3回使った情報は長期記憶される

海馬に仮記憶された情報は2~4週しかもたない. 仮記憶中に3回 "アウトプット" すると長期記憶（側頭葉）に記憶される.

つまり, 短い期間にアウトプットを繰り返さないと記憶に定着しない.

よく使うものほどよく覚える. 当たり前だけど意識的にはできていないよなーと.

出力と入力のサイクル 成長の螺旋階段

インプットとアウトプットを繰り返すことで自己成長できる. これを筆者は成長の螺旋階段と呼んでいる. インプットとアウトプットの反復こそ知的生産活動の軸であると言える. 成長したければインプットとアウトプットを繰り返す. これしかない.

知る試す知る試すの繰り返し.
自分はドラムを趣味でやっているけども, 練習は同じフレーズの繰り返しで覚えていく.
そして次のフレーズに移り繰り返していく. 
徐々に上手くなっていく過程はやはり繰り返しの中にしかないのだろうな.

インプットとアウトプットの黄金比率は3:7

著者のセミナー参加者にアンケートを取ったところ, インプット:アウトプットの割合が7:3程度いた. しかし, コロンビア大学の研究によると6~7割程度をアウトプットの時間に当てる方が物事を覚えられたそう. インプットした2倍近くの時間をアウトプットに費やすくらいがもっとも効率が良い覚え方だそう.

つまりインプット過剰アウトプット不足なのである.

自分も本ばかり読んでしまい, あまり記事に起こしたりしない.
ところが書いてみると読んでいる時には気づけなかった疑問や気づきがある.
するともっと調べるためより詳しくなる.

また知人や著名人からのレスポンスもあり意外な方向に議論がいったりする.
知識を使う回数が増えるため記憶に残る.

やはり現実世界はアウトプットでしか変わらない.

若年性アルツハイマーが増えている

http://yoshiya-hasegawa.com/blog/brain-usage/no-words-come-out/

インプット以上にアウトプットを行わないと前頭葉が衰えていく. 物事を思い出す中で前頭葉を利用するそう.

アウトプットを使わない生活を送ると思い出すための力, 想起力が衰えてしまい物事を思い出せなくなるそう.

最近自分は漢字が書けなかったり, 人名が出てこなかったりしてきているのでちょっと注意が必要かも．

疲れたので今日はここまで

人に嫌われるのが怖い? 僕は好きな人に嫌われる方が怖いよ

はせおやさいさんのコラムを読んで共感があったので書こう.

hase0831.hatenablog.jp

相手と自分が対等な関係を保てているときにのみ、その献身は発揮されるべきである

相手と自分が対等な関係を保てているときにのみ、その献身は発揮されるべきである

この一文は強烈だな. どれだけ尽くそうと思いやろうと相手と自分の比重が対等でないと無視されてしまう.

自分を大切にしてくれない人は, 自分が発信したプラスなエネルギーを受け取ってはくれない. 対して, 大切にしてくれている人は些細なことであってもキャッチして気にかけてくれる.

誰にでも優しくするのではない. 自分が大切にしたい人, 自分を大切にしてくれる人にこそ, そのエネルギーを注ぐべきなのだ.

愚痴という負のコミュニケーション

女友達との友情の破綻は「自分が相手の痰壺になった」と感じるときに来ることが多い
お互いの辛みや汚い感情を吐き出しあって開陳を親愛や友情の証と捉える人が一定数いる

これも共感できることが多い. 自分もそうだが, 心を許していくと人に普段見せないマイナスの感情を許していく.

そして次第にそのエネルギーに引きずりこまれ, 愚痴ばかりを言う関係性になっていく.

最近僕は飲み会にあまり顔を出さないようにしているが, どうしても人間が集まり酒を飲み始めると愚痴が始まる.

そんなことに自分の人生を使いたくない.

愚痴が生むものは愚痴である. 他者から渡された愚痴が形を変えて自分の口からそのまま愚痴となって出ていく. 負のコミュニケーションが伝搬していく.

だけど, それをうまく吐き出すことができない人も一定数いる.

愚痴を言われてもその後にすぐに忘れてしまう人もいるだろうし, そうでない人もいる.

その事実を知った上で相手を選んでいるだろうか?

そもそも愚痴をいわずに済む方法はないのだろうか?

コミュニケーションにおいて, どうしても相手に負の感情を生んでしまうような場面はある.

その場合に, 影から伝わるのか, 正面切って本人に言うかで全然結果が変わる.

正面切って言った, 言われたとて変わるかどうかは本人次第, 自分次第なのでやはり結論は「言う」に限る.

嫌われることも2:6:2の法則

2:6:2の法則と言うものがある.

zuuonline.com

2：6：2の法則とは「働きアリの法則」とも呼ばれ、組織内において「上から２割の者が全体の数字の大部分を担っており、６割は普通、下の２割はあまり働かない」というふうに言われる。

これは対人関係においてもそうだと思う.

上から２割の者があなたが何をやっても好きでいてくれる人、６割は関心がない or あまり接点がない、下の２割は勝手に嫌ってくる人

そう思えばどうやったって2割の人に嫌われてしまうのである.

考えてみればそりゃそうだ. 学校の教室でもすごく仲が良くなる人もいれば, 1年間一緒に過ごしたにもかかわらず全く話したことがない人, なぜか馬が合わない人と分布する.

下の2割の人のことを考えるのではなく, あなたが好きな2割の人のためにあなたの人生を使ってほしいのだ.

好きな人のために生きること, それは自分も入る

あなたが好きな人は誰だろう. 色々思いつくと思うが, まずは自分を好きになってみてはどうだろうか.

愚痴ばかりのくだらない何も生まない飲み会をやめて, 本を読んだり, 好きな人とメッセージをやりとりしたり, 動画を見たり. そんな時間の過ごし方の方がよっぽど素敵である.

あなたの時間, つまりあなたの人生は自分のためにあるのである.

あなたの自己肯定感を下げるような人のためにあなたの脳を, 思考を, 時間を使うのはあまりに勿体無い.

あなたはあなた自身やあなたを大切に扱ってくれる人のためにあなたの献身を捧げるのだ.

それでいい, それくらい勝手なくらいが良い.

勝手に不幸せだと, 嫌いだと評価を下す人間に糞食らえと心の中で呟いて生きて行けば, あなたの世界は守られる.

怒りを感じた時の対処法と捉え方

namu-r21.hatenablog.com

アンガーマネンジメントについて続編.

最近とてもイライラしている.
このイライラの正体は何なのかわからない.

ただ，イライラしている時は一定の条件があるように思える.

  • 自分に対してやらねばならないことをやっていない, 目的に対して行動していない
  • 部屋や机が片付いていない
  • アウトプットする機会が作れていない
  • 人と話していない

これら4項目のうちどれかが該当する.

何かが引っかかった気持ちはどれに該当するのか考えてみよう.

人の悪い部分や自分ができていないことに対して人に期待してしまう時 あなたはちゃんと自分のことができているだろうか.

机の上やタスクは片づいているだろうか

人と笑う機会を作っているだろうか いつもと違う人と話す機会は作れているだろうか

インプットばっかりになっていないだろうか.

僕は最近4項目を全然できていない. 頭の整理も兼ねて掃除から始めてみよう.