KDE BLOG

バイブス

【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を制御する
  • リファクタリング
  • 参考
続きを読む

【ES2017】async/await の基礎(後編)

前回に続き、Async Function(async/await)の使い方について学びます。
今回はおもにAsync Functionを使う上での注意点にフォーカスを当てていきたいと思います。

  • Async Functionとコールバック関数の問題
    • Promiseだけ使ったケース
    • Async Functionとコールバック関数を使ったケース
    • 不具合の理由
    • 解決方法
  • 非同期のコールバック関数内のエラーをキャッチできない
    • 理由
    • 解決方法
  • まとめ
  • 参考
続きを読む

【ES2017】async/await の基礎(前編)

Promiseの理解はできたので async/await について基礎から学んでいきたいと思います。

  • async/await とは
    • 簡単なサンプル
      • Promiseを使った例
      • Async Functionを使った例
  • Async Functionの定義方法
  • Async Function の役割
  • await 式について
    • Async Functionでのエラーハンドリング
      • Async Function呼び出し元をcatch メソッドでつなぐ
      • try-catch を使う
      • エラー処理は呼び出し元に記述するべきか、呼び出し先に記述すべきか
    • awaitは常にPromiseを受け取る
    • awaitはAsync Functionの直下のみ使用可能
  • Async Function 利用パターン
    • 非同期の逐次処理
      • 1. then をつなぐ
      • 2. Array.prototype.reduce() を使う
      • 3. Async Fuction を使う
    • 非同期の並列処理
    • Promiseの結果を再利用したい場合
  • ここまでのまとめ
  • 参考
続きを読む

【JavaScript 小ネタ】JSXなどのテンプレート上でクラス名に入る無駄な空白(スペース)をよしなに削除する方法

ちょっとした小ネタを思いついたので書いておきたいと思います。

JSX上などで、クラス名の出し分けとかによくある下記のような記述をすると、場合によっては無駄な空白(スペース)が開発者ツール上で見えたりして気になったりしないでしょうか?

<a href="#" className={`foo ${isActive ? "is-active" : ""} ${isHidden ? "is-hidden" : ""}`}>test</a>

Chromeの開発者ツールでの見え方

f:id:jinseirestart:20181104163937p:plain

foo の後ろに、無駄な空白が入ってしまっています。

こういう時皆さんはどうしていますか?

自分の場合は今まで、挙動には問題ないのでそのまま無視するか、下記のように空白が入ることを想定した書き方をしていました。

<a href="#" className={`foo${isActive ? " is-active" : ""}${isHidden ? " is-hidden" : ""}`}>test</a>

${...} の前に空けていた空白を削除して詰めれば、無駄な空白は生まれなくなります。
しかし 可読性が低下 してしまうので良い方法とは言えません。
何かスマートに解決できる方法があればいいなーとなんとなく思っていました。

続きを読む