reactの<code>useState</code>がそうですが、配列で返り値を返す関数ってありますよね<pre><code>[javascript]
const [state, setState] = useState()</code></pre> これの2番目の値のみ受け取りたい場合、これまで<code>_</code>を使ってよくこんな感じで受け取ってました<pre><code>[javascript]
const [_, setState] = useState()</code></pre> でもこうするとlintがエラーを返すんですよね<pre><code>[shell]
'_' is assigned a value but never used&nbsp; @typescript-eslint/no-unused-vars</code></pre> 実はこれ何も変数置く必要なかったんですね<pre><code>[javascript]
const [, setState] = useState()</code></pre> これで受け取れます こんな感じ<pre><code>[javascript]
const sample = () =&gt; {
 return [1, 2, 3]
}

const [, , c] = sample()
console.log(c) // 3</code></pre>

配列を返す関数から特定の返り値を受け取るには

<h1 id="hcb3a1f0cdd">ふたりでつけるおさいふアプリ</h1> おさいふアプリは2人で使うためのアプリです。 <a href="https://osaifu.zatsuzen.com" target="_blank" rel="noopener noreferrer">https://osaifu.zatsuzen.com</a>

おさいふというサービスを作った

<h1 id="heb7bfe0621">オブジェクトのコピー</h1> JavaScriptではオブジェクトのコピーに気をつかいます。 変数をコピーする場合は書いた通りですが、オブジェクトではそう簡単ではないのです。 <pre><code>[javascript:JavaScript]
let a = 0
console.log(a) // 0
let b = a
b = 1
console.log(a) // 0</code></pre> <code>b</code>という変数に<code>a</code>を代入し、<code>b</code>を書き換えても、<code>a</code>の中身は変わりません。 これをオブジェクトでやってみます。 <pre><code>[javascript:JavaScript]
let obj1 = { a: 0 }
console.log(obj1.a) // 0
let obj2 = obj1
obj2.a = 1
console.log(obj1.a) // 1</code></pre> このように、オブジェクトのコピー先でプロパティの値を変更するとコピー元のオブジェクトのプロパティの値も変更されます。 これは、オブジェクトの場合はコピーではなく、オブジェクトへのリンクを共有しているだけだからです。 上記の例では<code>{ a: 0 }</code>というオブジェクトの位置を<code>obj1</code>が保持し、それを<code>obj2</code>にコピーしているので、<code>obj1.a</code>も<code>obj2.a</code>も同じオブジェクトを指します。 <blockquote>ちなみにオブジェクトは<code>let</code>だろうと<code>const</code>だろうとプロパティの書き換えはできます笑</blockquote> <h2 id="h84c0fe690c">Object.assign()を使う方法</h2> オブジェクトを変数と同じようにコピーするには<code>Object.assign()</code>を使ってオブジェクトを新しく作成する必要があります。<code>Object.assign()</code>はES6以降で使用できます。 <pre><code>[javascript:JavaScript]
let obj1 = { a: 0 }
console.log(obj1.a) // 0
let obj2 = Object.assign({}, obj1)
obj2.a = 1
console.log(obj1.a) // 0</code></pre> <a href="https://developer.mozilla.org/ja/docs/Web/JavaScript/Reference/Global_Objects/Object/assign" target="_blank" rel="noopener noreferrer">Object.assign() - JavaScript | MDN</a> ただ、<code>Object.assign()</code>にも問題があって、コピー元のオブジェクトを展開してはくれないのです。プロパティに配列やオブジェクトを含む多層のオブジェクトだと、2層目以下はまたメモリ位置のみのコピーになります。 <pre><code>[javascript:JavaScript]
let obj1 = { a: [0] }
console.log(obj1.a[0]) // 0
let obj2 = Object.assign({}, obj1)
obj2.a[0] = 1
console.log(obj1.a[0]) // 1</code></pre> こうなってしまいます。 これをシャローコピーというそうです。 調べてみるとJavaScriptにディープコピーしてくれる関数はまだ用意されていないようです。 <h2 id="hac84b937d8">JSON.parseとJSON.stringifyを使う方法</h2> <pre><code>[javascript:JavaScript]
let obj1 = { a: [0] }
console.log(obj1.a[0]) // 0
let obj2 = JSON.parse(JSON.stringify(obj1))
obj2.a[0] = 1
console.log(obj1.a[0]) // 0</code></pre> <code>JSON.parse</code>と<code>JSON.stringify</code>は一度jsonに展開してまたオブジェクトに戻す関数です。ただ、プロパティの値にfunctionやundefinedがあるとそのプロパティそのものが消えてしまうので注意してください。 <h2 id="h1afc276a9d">Object.freeze()について</h2> ちなみにオブジェクトは<code>let</code>だろうと<code>const</code>だろうとプロパティの書き換えはできます笑 あとからコピー先でプロパティの書き換えをされても変更しないようにするには<code>Object.freeze()</code>を使います。 <pre><code>[javascript:JavaScript]
let obj1 = { a: 0 }
Object.freeze(obj1)</code></pre> <a href="https://developer.mozilla.org/ja/docs/Web/JavaScript/Reference/Global_Objects/Object/freeze" target="_blank" rel="noopener noreferrer">Object.freeze() - JavaScript | MDN</a>

オブジェクトのコピーのやっかいなところ

<h1 id="ha02c2d7083">ファイル転送サービスを作った</h1> ブラウザ間でファイルのやりとりを行えるアプリを作りました。 WebRTCのdataChannelを利用したブラウザ間でのファイルの双方交換ができます。 <a href="https://rts.zatsuzen.com" target="_blank" rel="noopener noreferrer">Real-Time File Transfer</a> <h2 id="h8a3b422e27">できること</h2> ネットワークにつながったPC間でブラウザのみを使ってファイルのやりとりができます。 WebRTCを使うことにより、インターネットやLAN内など、場所を問わず接続できます。 <h2 id="h4e68307198">対応ブラウザ</h2> 現在 WebRTC DataChannel に対応しているブラウザはPC版の Chrome, Firefox, Opera, Safari です。また、Android や iOS の Safari でも使えるはず(未確認)です。 <h2 id="h4d849f4362">使い方</h2> 使い方はとてもシンプルです。 1. トップページから「はじめる」をクリックします。 <img src="https://images.microcms-assets.io/assets/46451451db5840579d91a662a1bdaf8e/e73a6640dea74bf5b57b4d526b306ffb/blog_rts_rts_start.png" alt=""> 2. サーバからIDが発行されます。 <blockquote>https\://rts.zatsuzen.com/ あなたのID が受信側のURLです。 共有URLをクリックするとクリップボードにコピーします。</blockquote> 3. 表示されている共有URLに他のPC/ブラウザからアクセスします。 <img src="https://images.microcms-assets.io/assets/46451451db5840579d91a662a1bdaf8e/8a676e8878bc44918c00341917ac1151/blog_rts_rts_share.png" alt=""> これで自動的に接続が試されます。接続がうまくいくと、dataChannelのラベルが赤から青に変わります。 <img src="https://images.microcms-assets.io/assets/46451451db5840579d91a662a1bdaf8e/bc550bc2caa548afac136a3750ed797a/blog_rts_datachannel_ng.png" alt=""><img src="https://images.microcms-assets.io/assets/46451451db5840579d91a662a1bdaf8e/5fc0333ce38740ed826e79f8e625b756/blog_rts_datachannel_ok.png" alt=""> 一度接続されると、共有URLは無効になります。 これ以降はブラウザ同士のみで通信が行われます。 一方のブラウザを閉じると接続は終了します。 3. ファイルを追加、もしくはブラウザへファイルをドラッグ &amp; ドロップします。4. 送信ボタンを押します。 これで相手側のブラウザからダウンロードできます。 相手側のページからも同様にファイルの追加と送信ができます。

ファイル転送サービスを作った

<h1 id="h1838533116">再生時間を表示する</h1> <code>&lt;audio&gt;</code>や<code>&lt;video&gt;</code>を使うと再生時間を表示したいときがあります。でもだいたい単位が秒なので、時と分は計算しなくてはいけません。 簡単ですが時間データから文字列に変換するスクリプトを書きました。 <h3 id="hd0767d8049">ソースコード</h3> <pre><code>[javascript:JavaScript]
function playTime (t) {
 let hms = ''
 const h = t / 3600 | 0
 const m = t % 3600 / 60 | 0
 const s = t % 60
 const z2 = (v) =&gt; {
 const s = '00' + v
 return s.substr(s.length - 2, 2)
 }
 if (h != 0) {
 hms = h + ':' + z2(m) + ':' + z2(s)
 } else if (m != 0) {
 hms = z2(m) + ':' + z2(s)
 } else {
 hms = '00:' + z2(s)
 }
 return hms
}</code></pre> こんな感じ。

再生時間を表示する

<h1 id="h90742858a8">ファイルサイズを取得する</h1> <code>&lt;input type="file"&gt;</code>などで取得したファイルリストには<code>size</code>というプロパティがあり、ファイルサイズが取得できます。しかし単位がバイトなのでそのまま表示するとユーザにとってはわかりにくくなってしまいます。 ファイルサイズは他の単位とは異なり103ごとにSI接頭辞が変わるわけではなく、1KB = 1024byteを元に計算するので少しやっかいです。1024nごとにひとつ大きなSI接頭辞になります。 <h3 id="hd0767d8049">ソースコード</h3> 関数にするとこんな感じ。各SI接頭辞ごとの単位サイズを計算し、それをもとに振り分けるだけですけど。 小数点以下2桁以下は四捨五入していますが、関数<code>round</code>を書き換えていろいろ使えます。 <pre><code>[javascript:JavaScript]
function fileSizeUnit (size) {

 // 1 KB = 1024 Byte
 const kb = 1024
 const mb = Math.pow(kb, 2)
 const gb = Math.pow(kb, 3)
 const tb = Math.pow(kb, 4)
 const pb = Math.pow(kb, 5)
 const round = (size, unit) =&gt; {
 return Math.round(size / unit * 100.0) / 100.0
 }

 if (size &gt;= pb) {
 return round(size, pb) + 'PB'
 } else if (size &gt;= tb) {
 return round(size, tb) + 'TB'
 } else if (size &gt;= gb) {
 return round(size, gb) + 'GB'
 } else if (size &gt;= mb) {
 return round(size, mb) + 'MB'
 } else if (size &gt;= kb) {
 return round(size, kb) + 'KB'
 }
 return size + 'バイト'
}</code></pre>

ファイルサイズを取得する

<h1 id="h214c899e60">data channel</h1>一般的に WebRTC といえば音声や映像を Peer to Peer で接続することでサーバを介さずに通話ができるというプロトコルですが、 media stream を送るだけが WebRTC ではありません。 RTCDataChannel API を使えば、ピア同士でデータのやりとりを行うことができます。 <h2 id="h33ae2bc092">Chromeでデータが送れなくなる</h2>前置きはこんなもんで、本題です。チャットや軽いデータならば一度の<code>send</code>で送信できるのですが、今回は重いデータの送信を試していました。 <pre><code>dataChannel.send(contents)</code></pre> RTCDataChannel API の<code>send</code>メソッドでは一度に送信できるサイズに制約があり、困ったことにブラウザごとに異なり、さらに受信側も挙動がまちまちなようです。ブラウザー間の差異を吸収するには、16キロバイト以下になるように分割し送信する必要があります。 ここでは分割するスクリプトはここでは省略しますが、だいたい50MBで3000個くらいになります。 これを<code>while</code>や<code>for</code>などを使って連続的に送るのですが、Chromeで試してみたところなぜか途中でぱったりと送信が止まるのです。Connectionも正常なままで謎でしたが、<code>RTCDataChannel.bufferedAmount</code>をみてみると 16384 になると止まるようです。 そこで、<code>RTCDataChannel.bufferedAmount</code>が0以上になったら送信を待機するようにしたら最後まで送信できるようになりました。 Firefoxでは<code>bufferedAmount</code>がいくつになっても大丈夫でした。 ちなみに<code>while</code>や<code>for</code>を使うとタスクを占有してしまってレンダリングされなくなるので、最終的に<code>setTimeout</code>を使って末尾回帰するような関数を書きました笑 <blockquote>2019年2月1日追記 これ再現しなくなりました...。バグだったのかな？</blockquote>

Chromeでdata channelを使って大量にデータを送ると途中で止まる

<h1 id="hce8e0f4909">Blobを使うとChromeがエラーになる</h1> 5MB程度のファイルを<code>Blob</code>を使ってChromeからファイルとして出力しようと思ったが、Chromeがクラッシュしてしまい、うまくいかない。 <img src="https://images.microcms-assets.io/assets/46451451db5840579d91a662a1bdaf8e/7ef4457d8e9c4d28978b92205e1686f2/javascript_blob-error_blob-chrome-error.png" alt=""><img src="https://images.microcms-assets.io/assets/46451451db5840579d91a662a1bdaf8e/bdf41c08c1be4ba380b009c9ad7fcee8/javascript_blob-error_blob-dev-error.png" alt=""> というか小さなサイズのファイルでも正しい形式にならない。 データをUint8Array型からファイルに変換するときの失敗例 <pre><code>[javascript:JavaScript]
const data = new Uint8Array(fileObject)
const blob = new Blob(data, {type: 'text/plain'})</code></pre> <h2 id="h26b83d0ec1">配列でないとダメ</h2> Uint8Array型は配列だと思ってたのですが、さらに配列に入れてやらないとダメらしい。 <code>[]</code>で囲むだけでうまくいきました。 <pre><code>[javascript:JavaScript]
const blob = new Blob([data], {type: 'text/plain'})</code></pre> <h2 id="h20606edc3d">ファイルのダウンロード</h2> ちなみに、これをブラウザからダウンロードさせるときは、以下のようにして、URLを作成します。 <pre><code>[javascript:JavaScript]
const url = window.URL.createObjectURL(blob)</code></pre> これを<code>&lt;a&gt;</code>タグの<code>href</code>に指定してあげればOK。 ていうかよく見たらMDNにちゃんと書いてあった。 <a href="https://developer.mozilla.org/ja/docs/Web/API/Blob" target="_blank" rel="noopener noreferrer">Blob | MDN</a>

Blobエラーで困った

<h1 id="h336eacfc41">socket.id-clientを使っていてsocket接続後IDが取得できない</h1> socket.ioを使ってクライアントとサーバの接続状態を確認するコードを書いていた。<code>console.log</code>にて<code>socket</code>を出力していて、こちらの<code>connected</code>プロパティは<code>true</code>になっているが、<code>socket.id</code>を出力すると<code>undefined</code>になってしまう。 <pre><code>[javascript:JavaScript]
import socketio from 'socket.io-client'

const socket = await socketio.connect('https://192.168.1.2:3000/', {secure: true})
console.log(socket, socket.id)</code></pre> <h2 id="h379ab7cace">よくわからないが接続できていない</h2> 詳しく調べていないのでよくわからないままだが、<code>connect</code>イベントをひろってやると取得できた。 <pre><code>[javascript:JavaScript]
import socketio from 'socket.io-client'

const socket = await socketio.connect('https://192.168.1.2:3000/', {secure: true})
socket.on('connect', () =&gt; {
 console.log(socket, socket.id)
})</code></pre> <code>connected</code>プロパティが<code>true</code>でも繋がっていないことがあるのだろうか。

socket.ioでidが取得できない

<h1 id="h0aa4eee83f">Reactとは</h1> ReactはJavaScriptのフレームワークのひとつで、もともとはFacebookで利用するためにFacebookが開発したものです。最近ではjQueryに代わるフレームワークとして注目を集め、Reactに置き換えるWebサイトも多くあります。 Reactはいまでは様々なホームページで使われていますが、見ただけではわかりません。 今回はホームページにReactが使われているか確認する方法を紹介します。 <h2 id="h19047066cc">Reactが使われているか確認する</h2> <h3 id="hcd75268028">React Developer ToolsをChrome拡張に追加する</h3> WebサイトにReactが使われているか確認するにはChromeにReact Developer Toolsを追加します。 <a href="https://chrome.google.com/webstore/detail/react-developer-tools/fmkadmapgofadopljbjfkapdkoienihi?hl=ja" target="_blank" rel="noopener noreferrer">React Developer Tools - Chrome ウェブストア</a> <img src="https://images.microcms-assets.io/assets/46451451db5840579d91a662a1bdaf8e/4c472d3f31ca4f2b867c10c42081fcd7/react_check-react_chrome-webstore.png" alt=""> 「Chromeに追加」をクリックします。 <img src="https://images.microcms-assets.io/assets/46451451db5840579d91a662a1bdaf8e/095bd37d995d41ae93b864d3babdfcc3/react_check-react_add-chrome.png" alt=""> 「拡張機能を追加」をクリックします。 これだけ。 アドレスバーの横にアイコンが追加されます。 <img src="https://images.microcms-assets.io/assets/46451451db5840579d91a662a1bdaf8e/e15bb26f26d04653b6f525c80379ac1f/react_check-react_icon-not.png" alt=""> <h3 id="hb989abdf8d">表示されるアイコンの種類</h3> Reactが使用されているページは以下のアイコン。 <img src="https://images.microcms-assets.io/assets/46451451db5840579d91a662a1bdaf8e/8afc6494808c431cbd042970bfffafff/react_check-react_icon-prod.png" alt=""> <blockquote>This page is using the production build of React.</blockquote> 使われていないページだとグレーアウトします。 <img src="https://images.microcms-assets.io/assets/46451451db5840579d91a662a1bdaf8e/e15bb26f26d04653b6f525c80379ac1f/react_check-react_icon-not.png" alt=""> <blockquote>This page doesn't appear to be using React.</blockquote> Reactには<code>develop build</code>と<code>production build</code>があって、developの状態だとこのアイコンになります。 <img src="https://images.microcms-assets.io/assets/46451451db5840579d91a662a1bdaf8e/a66f5ef378e24713baf62537f2b44d60/react_check-react_icon-dev.png" alt=""> <blockquote>This page is using the development build of React.</blockquote> 古いバージョンのReactを使っているサイトは以下のアイコンになります。 <img src="https://images.microcms-assets.io/assets/46451451db5840579d91a662a1bdaf8e/b4f413d9ede94a7ca2feeb638b0618fb/react_check-react_icon-old.png" alt=""> <blockquote>This page is using an outdated version of React.</blockquote> <h2 id="h9683392855">React Developer Toolsについて</h2> React Developer Toolsは、もともとReactの開発補助のためのChrome拡張機能です。 Reactの開発に便利なStateやコンポーネントの状態の確認などができ、かなり高機能な拡張機能です。 <h3 id="hf50973b858">Development Build と Production Build</h3> Development Buildのままだとmapファイルが作成され、セキュリティも弱くなるので、デプロイするときはかならずProduction Buildにしましょう。 <h4 id="he0625ed872">Create React App</h4> <code>Create React App</code>を使用しているプロジェクトは以下のコマンドを使用します。 <pre><code>[shell:shell]
# npm run build</code></pre> <h4 id="h0123682dfe">webpack</h4> <code>webpack</code>を使用してbuildする場合は設定ファイルで<code>mode: 'production'</code>を指定しましょう。 <pre><code>[javascript:webpack.js]
module.exports = {
 mode: 'production'
}</code></pre> 参考: <a href="https://github.com/facebook/react-devtools/blob/master/README.md#the-react-tab-doesnt-show-up" target="_blank" rel="noopener noreferrer">react-devtools | GitHub</a>

ゆったりWeb手帳

気になったことをのんびり書くよ