原点回帰でreact-reduxでカウンターを作った #29
今日やったこと
原点回帰のつもりでもう一回イチからreact-reduxを使ってカウンターを作った
以前の記事で、後輩が作ったカウンターにReset機能を追加した…みたいな話がありましたが、やっぱりいろいろとわからないところが出てきたので、イチから作ってみました。
まずはcreate-react-appコマンドを使って雛形を作成し、npm install -S redux react-reduxで必要なライブラリをインストール。
後輩に習ったとおり以下の手順で進めました。
- actionsを書いて必要な機能を考える
- reducerを実装
- componentを実装
実際コレがわかりやすい気がします。
出来上がったコードはほぼ後輩の作ったものとおなじになってしまったので特に見なくて大丈夫ですが、一応置いておきます。
mapStateToPropsの部分
const mapStateToProps = (state) => { num: getNum(state) }
まぁ慣れていればなんてことはないんですが、誤ってこう書いていました。
mapStateToProps() in Connect(render) must return a plain object. Instead received undefined.などと言われて怒られます。当然ですね。mapを返さないといけないので正しくは
const mapStateToProps = (state) => { return { num: getNum(state) }; }
こうです。ArrowFunctionの波括弧とmapの波括弧を見誤りました(言い訳)
とりあえず基礎的なところはなんとか分かるようになってきてる気がします。実践投入されたら即死しそうではありますが…。
雑談
aboutページを作成しました。もしよろしければご覧ください。
今日もひたすらJavaScript #27
今日やったこと
今日もひたすらJavaScriptを書いてました。
ただひたすら昨日の続きをやってました。
Reduxで作るTodo、とりあえずわからないところは飛ばして、初期値で与えたデータを表示するところだけ作りました。(いや、動いてないけど)
ReactのDevelopperToolで確認したら渡されてる値がなんかおかしいことになってたので、明日はそれを直したいと思います。
ただ、データの流れがやっとつかめてきた気がします。ちょっとだけ。
あとは投稿機能もちゃんとつけたい。道程は長い…。
雑談
ちゃんと成長できてるのかな…自分。
Redux、なんか分かりそうな気がする。 #26
今日やったこと
Reduxがわかってきた(気がする)
昨日は、わからんところをまとめたりしてました。
Reduxでわけがわからんところ個人的メモ #25 - ゆるふわ技術日誌
一晩寝たら、親切な後輩からコメントがついていたりしたので、へこたれず頑張ろうと思います。
とりあえず、完璧を目指さずゴリゴリ書いてたらなんとなく分かるようになってきました。
(またTodoかよ…というツッコミはご遠慮ください笑)
いまのところ、Action creatorとreducerは書きました。
Componentを今書いてます。inputの値をactionに渡してreducerで処理すればいいってことなんだと思います。(inputの値を取り出す方法がわからないけどこれはきっとReactのオハナシ…。)
まぁそんなわけで、やっと一筋の光が見え始めました…!
雑談
金曜と言えば、おなじみ実習だったのですが、やっと指定課題が終わりまして、来週からは自由課題です。
TAに聞いたら、使用技術も言語も自由みたいなのでReact使ってイキり倒したいなと思います!嘘です!!!!
AirPodsを買いました。何故かヨドバシに在庫があったので…つい。
ちっちゃい箱。
ケースをパカっと開けるとあっという間につながる。
すごい。
Reduxでわけがわからんところ個人的メモ #25
※今日はやったことというよりは、今何がわからなくなっているのが個人的にメモして頭のなかを整理しておく、という趣旨の記事です。
Reduxわけわからんポイント
- 調べるサイトによって微妙に違うファイルの命名規則。スタンダードなのはどれ。(こういうことを最初から気にしてしまうのは良くない癖)
- React側から何らかのアクションを起こす→ActionCreater→reducerで処理→storeを書き換える→storeの内容にあわせてReact側が更新される…？あってるか？
mapStateToPropsとmapDispatchToPropsのはたらき。mapStateToPropsはたぶん、コンポーネント側に渡したい値をpropsに格納(？)するみたいな感じだと思う。たぶん。
connectのやってること
今日は学校から帰って、ずっとReduxでTodo的なものを見よう見まねで作ったりしてはみたんですが、何もわからない。
そもそも、ちょっと焦りすぎたのかもしれないという気がしてきました。Reactの基礎的な知識や、設計手法的なモノを知らないと厳しいかもしれない。
僕は、そんなにプログラミング得意じゃないですが、それでもここまでドツボにはまるのは珍しく、結構精神的に参ってます笑(苦しい)
正直今すぐぶん投げてやめてしまいたい。
ちゃんと理解できるようになったら、わかりやすい解説記事を書いてみたいなんて…夢のまた夢かもしれない(´・ω・｀)
SlackBotを作ってみたい(Hubotやってみた) #24
今日やったこと
SlackBotを作ってみたい
ひとりSlackをはじめました。
ひとりSlack、一部の界隈では流行っているようで、RSSとか天気予報とかメールとかそういったものを一個のツールに集約できて便利とか。
とりあえず時間がなかったので、私は簡易Todoとでんぱ組Twitter通知チャンネルしかないでが、いずれはあんなことやこんなことをしたいのでHubotを使ったSlackBot作成にチャレンジしようかと思います。
参考はこちら。
yeomanって雛形を作ってくれるコマンドラインツールを使います。
コマンドはyo hubot。完全に簡易SNSのYoが頭をよぎりましたが気のせいです。
こんなかわいらしいジェネレーターが走っていろいろ聞いてくれますが今回はテストなのでEnter連打で飛ばしました。
で、プロジェクト直下のbin以下にあるhubotというファイルを実行することでhubotを起動できるのですが、注意しないといけないのはワーキングディレクトリはプロジェクト直下のままhubotを起動しないと正しくライブラリを読んでくれないみたいで起動しませんでした。
ハマった方が居たらお試しあれ。
というわけでとりあえず、コンソール上で応答をもらうことには成功しました。
hubot-practice> ping hubot-practice> hubot-practice ping hubot-practice> PONG
明日は何か実装できるといいな。
雑談
忙しくて完全に手抜きになっていることを深く反省しております。
焼肉もそう遠くない…
はじめてのSQLインジェクション #23
今日やったこと
まいにちRedux
今日もやりました。毎日同じこと言い続けてもつまらないのでテキトウに書くと、とある講義中に某ｽｺﾞｲ後輩が10分位でちゃちゃっとカウンター作ってくれたので僕はリセット機能を実装してみました。
う〜ん、わかってきたようなわからないような。
はじめてのSQLインジェクション
サークルで遊んでみました。
攻撃されたのは私の講義中に作っている住所録です。
全部出てるw
一応なにをやっているかというと、GETリクエストのURLクエリに1=1--と渡すことで1=1、つまり常にtrueとなり全レコードが抽出されたというわけですね。
--はSQLのコメントアウトらしく、コレ以降の命令を無視してるわけですね。なるほど。
まぁ、サーバー側で非常に不適切な実装をしているのが原因です。気が向いたら(TAにツッコまれたら)直します…。
雑談
あたまがいたいです。
でも、おべんきょうもしたい。
あと、ハンドスピナークルクルしてます。ハマるアレ。
