<h4>bindそのものについて</h4> <p>JSのbindの用法を知り、「どういう時に使われるのか」が漠然とイメージできるようになりたかったため、概要と使われ方を調べた。</p> <p>とりあえず以下のサイトのデモコードを自分なりにいじってどういう挙動なのかは調べた。</p> <p><a href="https://developer.mozilla.org/ja/docs/Web/JavaScript/Reference/Global_Objects/Function/bind">Function.prototype.bind() - JavaScript | MDN</a></p>

<p>空文字を許容しない、というバリデーションを一部分だけ書きたい、しかしそのために本格的なバリデーションの機構を組むのはめんどくさくて死にそう、という時にその場しのぎで書いたもの。</p> <pre class="code lang-javascript" data-lang="javascript" data-unlink> &lt;TextField label=<span class="synConstant">&quot;名前&quot;</span>

<p>material-uiの<code>TextFiled</code>という<a class="keyword" href="http://d.hatena.ne.jp/keyword/API">API</a>の中で、<code>type="date"</code>のようにタイプを指定することでDate pickerのように使用することができる。</p> <p><a href="https://material-ui.com/components/pickers/#native-pickers">Date picker, Time picker React components - Material-UI</a></p>

<p><a class="keyword" href="http://d.hatena.ne.jp/keyword/github">github</a>からforkしてきたプロジェクトの<a class="keyword" href="http://d.hatena.ne.jp/keyword/ruby">ruby</a>のバージョン関連で問題が生じたので、経過とともにメモする。</p> <h4>経過&amp;メモ</h4>

<p>基本的なところだけど、少し悩んでしまったのでメモ。</p> <p>アプリのタイマー機能を実装しようとした際、setIntervalを使用しても時間が加算されない問題が発生した。 原因としては、<b>setStateにオブジェクトを渡した場合、stateを即座にアップデートすることを保証しない</b>というもの。</p> <p><a href="https://ja.reactjs.org/docs/faq-state.html#how-do-i-update-state-with-values-that-depend-on-the-current-state">&#x30B3;&#x30F3;&#x30DD;&#x30FC;&#x30CD;&#x30F3;&#x30C8;&#x306E; state &ndash; React</a></p>

<p>表題の通りだけど、個人的におすすめしない。</p> <p>refでDOM要素にも<a class="keyword" href="http://d.hatena.ne.jp/keyword/%A5%B3%A5%F3%A5%DD%A1%BC%A5%CD%A5%F3%A5%C8">コンポーネント</a>にも自由にアクセスできるようにはなるが、せっかくpropsで<a class="keyword" href="http://d.hatena.ne.jp/keyword/%A5%B3%A5%F3%A5%DD%A1%BC%A5%CD%A5%F3%A5%C8">コンポーネント</a>間のやり取りができるようになっているので、あまりそれを崩したくない。

<p>JS系で、時間・日時を取り扱うライブラリにdayjsというものがある。（他の有名どころだとMoment.js<sup id="fnref:1"><a href="#fn:1" rel="footnote">1</a></sup>とか）</p> <p><iframe src="https://hatenablog-parts.com/embed?url=https%3A%2F%2Fday.js.org%2F" title="Day.js · 2kB JavaScript date utility library" class="embed-card embed-webcard" scrolling="no" frameborder="0" style="display: block; width: 100%; height: 155px; max-width: 500px; margin: 10px 0px;"></iframe><cite class="hatena-citation"><a href="https://day.js.org/">day.js.org</a></cite>