KDE BLOG

バイブス

bindActionCreators を使うと何がいいのか実際コードを書いて理解する

前回の記事で触れた bindActionCreators ですが、今まで使ったことがないので簡単なカウンターアプリを作って、実際に使ってみて一体何がいいのかを確認してみました。

  • カウンターアプリ ver.1
    • コード(ファイル名押下でコード展開)
      • redux
      • container component
      • presentational component
      • エントリーポイント
    • Action Creators だけのオブジェクトを渡す
    • dispatch を引数に取った関数を定義
    • bindActionCreatorsを使った方法
  • カウンターアプリ ver.2
  • まとめ
続きを読む

【React Redux】mapStateToProps の公式ドキュメント訳

React-reduxの公式ドキュメントを久しぶりに見てみると、いろいろと更新されていたので、ちゃんと読みこむことをしています。 今回、connect を使って store とコンポーネントを接続する際に使用する mapStateToProps についての下記ドキュメントを google 翻訳の力で訳したので、自分用にメモ。

react-redux.js.org

続きを読む

【Node.js】cookieを使ったクライアント ~ サーバー間のデータのやりとりサンプル

ブラウザにデータを保存するという役割でいうと、localStoragecookie が代表的かと思いますが、localStorage はクライアント側のみで使える機能で、サーバからは扱えません。
そのためクライアントとサーバ間のデータのやり取りではcookieを使うことで手軽に行えます。

というわけで理解を深めるために書籍のサンプルデータを参考に簡単なサンプルを作ってみました。

  • 仕様
  • コード
    • index.ejs(クライアント側)
    • app.js(サーバ側)
  • 解説・まとめ
  • 参考
続きを読む

【Node.js】POST後にページリロードすると再度POSTされる問題

2019年はプレイベートでサービスを作りたいので、Node.jsの勉強を始めました。
サーバーサイドプログラミングの経験はほとんどないので、まずは入門書から始めているのですが、そのサンプルアプリケーション(掲示板)の中で問題が発生しました。
その内容は、ググっていると全く同じことを書いていた記事がqiitaにありました(しかも同じ入門書)。

qiita.com

  • コードを修正
    • 修正前
    • 修正後
  • 参考
続きを読む

【JavaScript】オブジェクト指向を意識したカルーセルスライダーの実装

これまでオブジェクト指向という言葉は知っていましたが、ほとんどその詳細について考えたり、勉強したりしたことがありませんでした。
しかしそれではいかんと思いいくつか入門記事を読んでみて、なんとなくオブジェクト指向がどういったものなのか、少し掴めてきたように感じました。

そのイメージを形にしてみようと、久しぶりに vanila.js でベーシックなカルーセルスライダーを実装してみました。
オブジェクト指向のプロの方たちから見たら全然かと思いますが、一応備忘録と、自分の頭の中の整理として。

  • 完成物
  • ルーセルの仕様
  • 実装の考え方
    • プロパティとメソッドをちゃんと意識して考えると簡単かもしれない
  • アプリケーションをオブジェクトの集合として考える
  • 実装ハマりポイント
続きを読む

【ハマログ】親要素に設定したmouseover / mouseoutのイベントリスナーが子要素で発生する件

表題の件でハマってしまい、解決に苦労したのでハマログとして残しておきます。

  • 事象
  • 原因
  • 最初のコード
  • 怪しいところを探る
  • 親要素に設定したmouseover / mouseoutのイベントリスナーが子要素で発生しないようにする
    • マウスイベントを扱う場合は要素の領域はその直下の部分になる
    • 今起きているイベントと対になるイベントが起こった要素を示すrelatedTarget プロパティ
    • e.relatedTarget が null になる
    • .btn の mouseout、mouseoverを制御する
  • リファクタリング
  • 参考
続きを読む