Modern React with Redux #4
- reducerはアプリケーションのstateを返す関数
- keyは任意のもの。valueはhogeReducer(state)
- reducerの役割は2STEP
- STEP1: Reducerをつくること
- STEP2: 実際にアプリケーションと接続すること
- combineReducersがアプリケーションのstateをマッピングする
- Containerはreduxが生成したstateに直接アクセスのできるreact component
- connectはreactとreduxを繋ぐmiddlewareの関数
- mapStateToPropsはstateを引数に持つ関数で、この関数でreturnしたpropsをConatainer内で参照できるのりみたいなモノ
- containersでmapStateToPropsする場合は、componentそれ自身をexport defaultしない。なぜならstateも一緒に渡したいから(export defalut connect(mapStateToProps)(CoponentName)のような書き方をする)
- connect(function)(container)
- mapStateToPropsで返されたpropsはContainer内で使える
- mapDispatchToPropsで定義されたものが呼び出されると、その結果はすべてのReducerに渡される
- actionCreatorはtypeとpayloadの2つのvalueをもつ
- reducerではfreshなオブジェクトを返さなければならない。state.hogeなどをreturnするのはだめ
Section2はReact内でstateを使う、Section3はReduxの公式ドキュメントを解説って感じでしたー(下書き保存していなかった)
CentOS6系にJenkinsを入れてBitbucketと連携した
土日でCI環境を作ったので備忘録を残しておきます。
色々わからず作業した箇所もあるので、TODOとして後々記事にしたいと思います。
modern react with redux やらなきゃ。
初期設定
まずはさくらのVPSに登録し、下記+αを参考にセキュリティ関連の初期設定を構築。
【さくらのVPS】サーバの初期設定ガイド – さくらのサポート情報
STEP2の一般ユーザ追加については、今後rootユーザでのログインを許容したくなかったため下記オプションをつけて追加。
#useradd -G wheel
iptablesの設定
port80(http),443(https)はACCEPTにしておくのと、Jenkinsの初期設定portは8080なのでこちらもACCEPTに。
あとは初期のssh接続だとport22がACCEPTになっていますが、セキュリティ観点で任意の数字に変えたほうがいいとのこと。
nginxの導入
apacheサーバの導入は実績があったため、今回は練習がてらwebサーバにはnginxを採用。
CentOS6.xにてnginxの最新版をインストールする手順 - Qiita
上記で特に問題なくいけます。
リバースプロキシとかのテクニックは後々ですね。
Jenkinsの導入
こちらも特に問題なくインストール。
javaのインストールだけ忘れないように。
あと、今回はCIでhtmlモックとして使いたかったためhtml publisher pluginを導入。
あとNodeJSplugin。
JenkinsとBitbucketの連携
jenkinsとbitbucketの連携 – 出来損ないエンジニアの備忘録
上記を参考にさせていただきましたが、公開鍵などの知識が薄っぺらすぎたのでちゃんと勉強します。
Bitbucketのプロフィール→設定からssh keyの設定(VPSにjenkinsユーザとしてログインしssh-keygenする。generateしたら公開鍵をBitbucketにコピペ)
Jenkinsのジョブ登録→設定から、ソースコード管理をgitにしリポジトリURL(こちらはsshのURL)、認証情報は「追加」から「sshユーザ名と秘密鍵」で上記で生成した鍵をコピペ。
これでbitbucketにソースコードがpushされたタイミングでJenkinsが自動ビルドします。
HTML reportからmockを確認できます。
Modern React with Redux #1
Modern React with Redux | Udemy
↑を経費でｗ買ってもらったので勉強中です。
全英語で多少誤字幕もありますが、丁寧すぎるくらい丁寧な内容になっています。
ひとまずSection1まで終わったのでまとめようかと思います。
(Section毎に記事更新できたらいいなぁとか思いつつ)
Section1
- まずはReact onlyで作ってみる
- ReactやES2015をトランスパイルするための環境を丁寧に説明
- Vanila JSってよく聞くけどそういう意味だったんだ笑
- stateはclassベースのcomponentに存在するplaneなobjectである
- stateは常にsetState()を用いて操作する
Section1に関しては特に詰まるところもなかったので、ある程度流し聞きしました。
StateはReactを使っていて詰まりそうだなーという関所的な箇所であると言及されていたので、復習の意味も兼ねてある程度しっかり聞きました。
今日からSection2をやっていきたいと思います。
webpackで複数ディレクトリにoutputする
The need for multiple output paths? · Issue #1189 · webpack/webpack · GitHub
上記を参考に。
ポイントはざっと↓かなぁと。
- entryオブジェクトのキーにパスを指定する(できる)
- 同じファイルでも複数ディレクトリにoutputできる(common.jsなど)
あとwebpack@^2.6.1だと output.path に './' と書くと絶対パスじゃないぞ！！と怒られるので、 __dirname + '/path/to/output' とやるとうまくいきました。
hubotで定例会議のcronとおやすみ週を設定した
hubotとは
github製のチャットbotで、Node.jsを実行環境に動作します。
使い方は至ってシンプルで、hubot用のAPIを取得し、あとはscripts/配下のディレクトリにファイルを作って好きなようにコーディングしていくだけです。公式の推奨はCoffeeScriptですがCoffeeじゃなくても書けます。
導入手順の詳細は↓の記事を参考にしました。
qiita.com
やったこと
1. 定例会議を隔週(グループがAとBに分かれているため)でお知らせしてくれる
2. おやすみ週を設定してくれる
3. 任意のタイミングでA,Bを設定してくれる
今回は公式推奨のCoffeeScriptを使って社内チャットツールであるslackに導入しました。
1から順に説明します。
1. 定例会議を隔週でお知らせ
module.exports = (robot) -> cronJob = require("cron").CronJob MEETING_CNT = 1 STORE_MEETING_CNT = 1 CALLED_OFF_FLG = false NOTICE = ''
まずは必要なmoduleとstateを宣言しておきます。
基本的な方針として、ここのstate値を出し分けの判定に使います。
cronというnode moduleは定期タスクの実行を行います。
MEETING_CNT = 1 STORE_MEETING_CNT = 1
ここで同じようなstateを宣言していますが、理由は2.で後述します。
module.exports = (robot) ->
Meeting =
sendMsg: (channel) ->
this.sendMsgType()
robot.send(room: channel, NOTICE)
sendMsgType: ->
switch MEETING_CNT
when 1
notice = "今週の定例はAグループだよ。メンバーは\n#{ Meeting.memberList.A.members } だよ"
MEETING_CNT = 2
when 2
notice = "今週の定例はBグループだよ。メンバーは\n#{ Meeting.memberList.B.members } だよ"
MEETING_CNT = 1
NOTICE = notice
Meetingというオブジェクトを生成し、ここのオブジェクトに関数をもたせます(Meeting.memberList.A.membersは同じオブジェクト内で記述していますが、個人情報入っているので割愛)。
ここでは、MEETING_CNTというstateを元に、送信するメッセージの出し分けを行い、処理の最後にはMEETING_CNTを1(もしくは2)にしてAとBがループするようにします(※課題1)。
メッセージはNOTICEのstateに渡し、実際にメッセージを送信する関数は sendMsg: (channel) -> に記述します。
ここで、第一引数のchannelは発信先のチャンネル名を指定します。
上記で出し分けのロジックは完了です。
あとは、cronの設定をします。
cronJobの第一引数で送信する時間の設定ができ、下記のように*/10とすると10秒毎に定期cronします。
new cronJob('*/10 * * * * *', () -> Meeting.sendMsg("random") ).start()
2. おやすみ週の設定
おやすみは突発的なものです。
なので、hubotにリプライを飛ばしたらその週をおやすみにしてくれるような仕組みにしたいです。
ソースに下記を追加します。
sendMsgType: ->
switch MEETING_CNT
when 0
notice = "今週の定例はお休みです。"
MEETING_CNT = STORE_MEETING_CNT
when 1
notice = "今週の定例はAグループだよ。メンバーは\n#{ Meeting.memberList.A.members } だよ"
MEETING_CNT = 2
STORE_MEETING_CNT = 2
when 2
notice = "今週の定例はBグループだよ。メンバーは\n#{ Meeting.memberList.B.members } だよ"
MEETING_CNT = 1
STORE_MEETING_CNT = 1
NOTICE = notice
checkCalledOff: ->
if CALLED_OFF_FLG
MEETING_CNT = 0
CALLED_OFF_FLG = false
#ここまでがMeeting object
new cronJob('*/10 * * * * *', () ->
Meeting.checkCalledOff()
Meeting.sendMsg("random")
).start()
robot.respond /つぎおやすみ/i, (msg) ->
CALLED_OFF_FLG = true
msg.send "OK わかった 次回の定例はお休みにするね"
Meeting object内にcheckCalledOff という関数を用意しました。
この関数をcronJob内で呼び出し、中止のフラグ判定を行います。
robot object内のrespond関数を使い、hubotに「つぎおやすみ」とリプライを飛ばすとフラグがtrueになり、一度おやすみになると、直ちにフラグはfalseに戻ります。
ここで、STORE_MEETING_CNT というstateを用意した理由として、「おやすみ後のグループ設定は、以前の状態を保持したい」という意図がありました。
たとえば、前回の会議がBグループで終わっていたら、次はAにしたい、逆も然りという具合です。
つまり、MEETING_CNTは実際(現在)の状態で、STORE_MEETING_CNTは前回までの状態という役割ですね(※課題2)。
3. 任意のタイミングでA,Bを設定
1. 2.で基本的なロジックは出来ているので、あとはrobot.respondでリプライ飛ばすだけです。
robot.respond /つぎA/i, (msg) -> MEETING_CNT = 1 STORE_MEETING_CNT = 1 msg.send "次回の定例をAグループに設定したよ" robot.respond /つぎB/i, (msg) -> MEETING_CNT = 2 STORE_MEETING_CNT = 2 msg.send "次回の定例をBグループに設定したよ"
※課題1: A,B以外の変則的なループが発生した際に拡張性がないようにみえる。
※課題2: グローバル変数の濫用にみえる。実際にはmodule内の変数なので問題なし？わからん。
以上です( ･ิϖ･ิ)
開設しました
sincと申しますどうぞよろしくお願いします。
日々疑問に思う技術的な内容を備忘録がてら記していく予定です。基本的に書く内容は個人的な理解を咀嚼したものなので、一般的な解釈とは異なる場合があります。あまりにも曲解している場合にはコメントでご指摘いただけると幸いです。
簡単に自己紹介
普段はweb系の仕事をしていて、いわゆるフロントエンジニアまがいのことをやっています。歴は1年経たないくらいです。初学者です。
仕事では主に、HTML,CSS,JavaScriptを用いたLP、キャンペーンページの新規作成、改修などを行っています。
業務効率改善として開発環境の自動化や、Botの作成なども行っています。
JavasScriptが好きなのでそれ系の記事が多くなるかもしれません。
よろしくおねがいします〜＾〜＾
