FujjimaBlog

JSのbind、及び`this`について理解を少し深める

2021/01/05 20:24

<h4>bindそのものについて</h4> JSのbindの用法を知り、「どういう時に使われるのか」が漠然とイメージできるようになりたかったため、概要と使われ方を調べた。 とりあえず以下のサイトのデモコードを自分なりにいじってどういう挙動なのかは調べた。 <a href="https://developer.mozilla.org/ja/docs/Web/JavaScript/Reference/Global_Objects/Function/bind">Function.prototype.bind() - JavaScript | MDN</a> <pre class="code lang-javascript" data-lang="javascript" data-unlink>const module = { a: 50, b: 30, text: 'this is test', showText: function(){ return this.text; }, }; const moduleShow = module.showText; console.log(moduleShow); // moduleから抜き出した関数にmodule自体をbindする // moduleShow内のthis = bindされたmoduleとなる // そのため、this.text = module.text、になる const boundGetX = moduleShow.bind(module); console.log(boundGetX()); </pre> その他、bindの概要、callとの違いについては下記の記事を見てイメージは出来た。 <a href="https://itsakura.com/js-bind">JavaScript thisの内容を指定する(bindメソッド) | ITSakura</a> ただ、こいつがどういう目的で使われるかは分からなかった。<a href="#f-81413229" name="fn-81413229" title="こういったサンプルを見て、「じゃあこういうものにも応用できるな」と考えつく能力もプログラマに必要不可欠な能力だよな、と最近感じている">*1</a> 単純に、関数内のthis（thisがない場合はbind内の第一引数にnullを指定する）を特定のものに設定する（=undefinedにしない）場合にbindを使う、という使い方でいいのだろうか。 <h4>アロー関数内でのthisの扱われ方とbindの比較</h4> ここまで調べて、そういえばJSの通常関数とアロー関数ではthisの指すものが異なる、という話しを思い出した。 <a href="https://qiita.com/mejileben/items/69e5facdb60781927929">【JavaScript】アロー関数式を学ぶついでにthisも復習する話 - Qiita</a> <a href="https://qiita.com/suin/items/a44825d253d023e31e4d">JavaScript: 通常の関数とアロー関数の違いは「書き方だけ」ではない。異なる性質が10個ほどある。 - Qiita</a> 両者の<code>this</code>に関する違いとしては、アロー関数は<code>this</code>を束縛し、通常関数は<code>this</code>を束縛しない（=関数呼び出し元（レシーバ）をthisとする）という点である。 下記のコードを例に比較する。 <ul> <li>通常関数</li> </ul> <pre class="code lang-javascript" data-lang="javascript" data-unlink> this.name = "globalName"; // 通常関数 function showName() { console.log(this.name); } let arrowFunc = { name: "john", func: showName, }; arrowFunc.func(); => john // bindを使った場合 showName.bind(arrowFunc)(); => john </pre> <code>arrowFunc.func()</code>の返り値が<code>john</code>となっており、これはarrowFunc.nameの値であることが分かる。このことから、<code>arrowFunc.func()</code>、つまりは<code>arrowFunc.showName()</code>のshowName内部のthisはarrowFunc（レシーバ）を指していたことが分かる。 <ul> <li>アロー関数</li> </ul> <pre class="code lang-javascript" data-lang="javascript" data-unlink> this.name = "globalName"; // アロー関数 const showName = () => { console.log(this.name); }; let arrowFunc = { name: "john", func: showName, }; arrowFunc.func(); => globalName </pre> <code>arrowFunc.func()</code>の返り値が「globalName」となっている。これは最初に定義した<code>this.name = "globalName"</code>のnameの値が表示されていることが分かる。ここで、アロー関数内のthisについてのリファレンスを見てみる。 <blockquote>アロー関数自身は this を持ちません。レキシカルスコープの this 値を使います。つまり、アロー関数内の this 値は通常の変数検索ルールに従います。このためスコープに this 値がない場合、その一つ外側のスコープで this 値を探します。</blockquote> <a href="https://developer.mozilla.org/ja/docs/Web/JavaScript/Reference/Functions/Arrow_functions#No_separate_this">アロー関数 - JavaScript | MDN</a> アロー関数である<code>showName</code>が定義された際、関数内のthisは更に外側のthisを見ていたことになる。今回Node上で上記コードを実行したため、thisとして定義されていたのは<code>{name: "globalName"}</code>だったため、<code>showName</code>関数内のconsole.logで表示されたthis.nameは、コードの最初に定義したthis.nameだった、ということになる。 ちなみにトッ<a class="keyword" href="http://d.hatena.ne.jp/keyword/%A5%D7%A5%EC%A5%D9">プレベ</a>ル、グロー<a class="keyword" href="http://d.hatena.ne.jp/keyword/%A5%D0%A5%EB%A5%B9">バルス</a>コープあたりはここを参考にした。 <a href="https://qiita.com/qeema/items/0b7e2ff4e33703a42a40">JavaScriptのトップレベルスコープは常にグローバルスコープではなかった - Qiita</a> <h4>まとめ</h4> 改めて<code>bind</code>、通常関数とアロー関数それぞれでのthisの使い方を確認した。通常関数とアロー関数の違いについては他にも色々あるが、一旦知りたいと思っていたことを確認することができた。 <div class="footnote"> <a href="#fn-81413229" name="f-81413229" class="footnote-number">*1</a>:こういったサンプルを見て、「じゃあこういうものにも応用できるな」と考えつく能力も<a class="keyword" href="http://d.hatena.ne.jp/keyword/%A5%D7%A5%ED%A5%B0%A5%E9%A5%DE">プログラマ</a>に必要不可欠な能力だよな、と最近感じている </div>

需要が薄いMaterial-UIのvalidationの一例

2021/01/04 12:54

空文字を許容しない、というバリデーションを一部分だけ書きたい、しかしそのために本格的なバリデーションの機構を組むのはめんどくさくて死にそう、という時にその場しのぎで書いたもの。 <pre class="code lang-javascript" data-lang="javascript" data-unlink> <TextField label="名前" variant="outlined" margin="normal" required // input.valueに入力された文字が入っているものとして、空文字の場合は input.value はfalseを返す // 上記の場合に{ error: true }を返すことで <TextField error /> と書いた時と同じようになる // { error: false } の場合はerrorは指定されていない状態になる {...(!input.value ? { error: true } : { error: false })} /> </pre>

Material-UIのTextFieldをtype="date"にした際のdefaultValueに指定する日付のフォーマットについて備忘録

2021/01/01 14:50

material-uiの<code>TextFiled</code>という<a class="keyword" href="http://d.hatena.ne.jp/keyword/API">API</a>の中で、<code>type="date"</code>のようにタイプを指定することでDate pickerのように使用することができる。 <a href="https://material-ui.com/components/pickers/#native-pickers">Date picker, Time picker React components - Material-UI</a> その際、デフォルトの日付を<code>defaultValue</code>というオプションで設定できるが、この部分で少し詰まったので備忘録として残す。 <h4>ダメだった例</h4> <pre class="code lang-javascript" data-lang="javascript" data-unlink> // 年、月、日の区切りがスラッシュになっているとdefaultValueとして認識されない const today = dayjs().format('YYYY/MM/DD') <TextField label="testDay" type="date" defaultValue={today} margin="normal" /> </pre> <img src="https://cdn-ak.f.st-hatena.com/images/fotolife/f/fujjima/20210101/20210101144435.png" alt="f:id:fujjima:20210101144435p:plain" title="" class="hatena-fotolife" itemprop="image"> <h4>良かった例</h4> <pre class="code lang-javascript" data-lang="javascript" data-unlink> // 年、月、日の区切りがハイフンだときちんとdefaultValueとして指定できる const today = dayjs().format('YYYY-MM-DD') <TextField label="testDay" type="date" defaultValue={today} margin="normal" /> </pre> <img src="https://cdn-ak.f.st-hatena.com/images/fotolife/f/fujjima/20210101/20210101144333.png" alt="f:id:fujjima:20210101144333p:plain" title="" class="hatena-fotolife" itemprop="image"> 詳細は調査中だが、同じようにdatapickerとして使用できる<code>KeyboardDatePicker</code>ではformatに<code>format="MM/dd/yyyy"</code>のように指定してもいける感じなので、どうしてこのような仕様にしているかはよく分からない。しかも表示される時には<code>YYYY/MM/DD</code>形式だし。スラッシュどこに行った。 <a href="https://material-ui.com/components/pickers/#material-ui-pickers">https://material-ui.com/components/pickers/#material-ui-pickers</a>

JSのbind、及び`this`について理解を少し深める

需要が薄いMaterial-UIのvalidationの一例

Material-UIのTextFieldをtype=&quot;date&quot;にした際のdefaultValueに指定する日付のフォーマットについて備忘録

Material-UIのTextFieldをtype="date"にした際のdefaultValueに指定する日付のフォーマットについて備忘録