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="h09b0e2e84f">onKeyPress を取得する</h1> onKeyPressはブラウザでキー入力されたときの動作を制御するために使います。 <h2 id="h3b3329eac0">input で onKeyPress を取得する</h2> 例えば、<code>input</code>タグで、入力後Enterを押して確定する動きをReactで実装すると以下のようになります。 <pre><code>[javascript:React]
const Component = ({text, changeText, sendText}) =&gt; {

 const keyPress = (e) =&gt; {
 if (e.which === 13) sendText()
 if (e.key === 'Enter') setChange()
 }

 return (
 &lt;React.Fragment&gt;
 &lt;input type='text' value={text} onChange={(e) =&gt; changeText(e)} onKeyPress={(e) =&gt; keyPress(e)}&gt;
 &lt;/React.Fragment&gt;
 )
}</code></pre> この例では、入力後Enterを入力すると入力された文字列が送信されます。IME変換確定時のEnterは無視されます。 <h2 id="h47871df9ba">div で onKeyPress を取得する</h2> 上記`input`のような場合は通常フォーカスされた状態で使用するので入力受付時も問題ないですが、そうではない場合は注意が必要です。 画面制御やメディアの再生、停止をキーボードでも操作できるようにするには親要素(`div`など)でイベントを拾わなければなりません。この場合は、<code>tabIndex</code>を指定してマウントされたときにフォーカスするようにします。 <pre><code>[javascript:React]
const Component = ({mediaControl}) =&gt; {

 const keyPress = (e) =&gt; {
 if (e.which === 32) mediaControl() // スペースの入力を拾う
 }

 return (
 &lt;React.Fragment&gt;
 &lt;div onKeyPress={(e) =&gt; keyPress(e)} tabIndex='0'&gt;
 &lt;AppComponent /&gt;
 &lt;/div&gt;
 &lt;/React.Fragment&gt;
 )
}</code></pre> 上記例では、スペースキーでメディアの再生を停止します。しかし、<code>AppComponent</code>内に<code>input</code>や<code>textarea</code>がある場合、イベントはバブリングするので文字列入力時のスペース入力も拾ってしまいます。 この場合は、フォーム要素での入力に<code>event.stopPropagation()</code>メソッドを使うか、<code>div</code>でイベントを拾ったときに除外します。 <pre><code>[javascript:React]
const keyPress = (e) =&gt; {
 e.stopPropagation()
}</code></pre> <pre><code>[javascript:React]
const keyPress = (e) =&gt; {
 if (e.target.tagName !== 'INPUT' &amp;&amp; e.target.tagName !== 'TEXTAREA') return false
 if (e.which === 32) mediaControl()
}</code></pre> <h2 id="h642cf9e467">TypeScriptを使う</h2> onKeyPressイベントのTypeScriptの型は<code>KeyboardEvent&lt;HTMLInputElement&gt;</code>です。最初の例をTypeScriptで書くと以下のようになります。 <pre><code>[javascript:React]
const Component = ({text, changeText, sendText}) =&gt; {

 const keyPress = (e: React.KeyboardEvent&lt;HTMLInputElement&gt;) =&gt; {
 if (e.which === 13) sendText()
 }

 return (
 &lt;React.Fragment&gt;
 &lt;input type='text' value={text} onChange={(e) =&gt; changeText(e)} onKeyPress={(e) =&gt; keyPress(e)}&gt;
 &lt;/React.Fragment&gt;
 )
}</code></pre> <h2 id="h923c78a9c9">キーの判別</h2> 上記の例はキーの<code>charCode</code>を用いて判別を行なっていますが、キーの<code>name</code>や<code>code</code>などで判別する方法もあります。注意点はすべてのブラウザでキーのコードや名前が同じという保証はないので、実際に使用する場合は想定される環境で動作するか確認することをおすすめします。

ReactでonKeyPressを取得する

<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サイトにReactが使われているか確認する

<h1 id="h0aa4eee83f">Reactとは</h1> ReactはJavaScriptのフレームワークのひとつで、もともとはFacebookで利用するためにFacebookが開発したものです。 Google製のAngularや、そこから分岐した(というと語弊があるけど)Vue.jsと並び、比較的新しい部類の三大フレームワークに数えられ、数あるJavaScriptのフレームワークの中でもよく使われる部類になると思います。 どのフレームワークにも向き不向きがあり適した用途など考察することもできますが、それぞれについて細かくはここでは触れません。 トレンドの移り変わりが激しいといわれるフロントエンドフレームワーク界隈ですが、2016年以降はわりとこの3つに落ち着いている感じもありますね。私はReactが一番気に入ってるので、Reactを使っています。 <h2 id="hbf58b86606">jQueryに代わるフレームワークReact</h2> JavaScriptのフレームワークといえば、jQueryが主流の時代がありました。 というか、jQueryは今でも根強い人気があり、未だに新規案件で採用されるなど注目を集めています。 しかし、問題点や課題が多く、いまどきをうたうプロジェクトなどはReactなど新しいフレームワークの採用事例も増えています。 例えば、<a href="https://qiita.com" target="_blank" rel="noopener noreferrer">Qiita</a>など。 置き換えられるのだから似てるのかな、と思いきやかなり別物です。特にふんわり触っているうちは全く別のものに見えると思います。 jQueryはピュアなJavaScriptを拡張するフレームワークというイメージで、アニメーションが得意分野でした。これがReactに置き換えようという流れは、JavaScriptの歴史の変遷と関連があります。 <h3 id="hbe9ef0117d">jQueryとJavaScriptの歴史</h3> かつてWebサイトといえばサーバからデータをダウンロードしてきて、そのまま表示するだけでした。 時代が変わり、必ずしも静的なWebサイトだけではなくなりました。各ユーザや状態に合わせて動的にWebサイトを書き換える必要が出てきます。 Cookieなどを駆使してサーバサイドでPHPなどを利用する手段もありますが、XMLHttpRequest(Ajax)の登場によってJavaScriptを介してWebサイトがサーバとやりとりすることができるようになりました。これにより、最初のアクセスではWebサイトの中身を受信せず、後からデータを取得する方法も普及していきました。 これを簡単に実装できたのもjQueryが普及した要因の一端だと思います。 <h3 id="hc9c9c46533">jQueryの課題</h3> しかし、Webサイト(Webアプリケーション)をjQueryで実装するには複雑になるほど読みにくくなるという難点があります。 サーバから取得したデータを対象のDOMに反映するのがjQueryの役目ですが、1つのデータについて、書き換える対象のDOM(HTML)とjQueryのスクリプトと、2か所に記述が必要になります。 1件の修正に対して2か所の変更が必要になり、複雑なアプリケーションになるともうわけがわからなくなります。 <h3 id="h248eb0c7f9">Reactの登場</h3> ReactはjQueryとはまったく異なるアプローチで、UIをばらばらの独立したパーツ(コンポーネント)として扱います。細かくコンポーネントを分けることで再利用したり、多層化したりすることができます。なによりReactによりコンポーネントのスクリプトを1か所にまとめることができ、可読性が格段に上がります。仮想DOMにより、データの変更したい部分のみ再レンダリングを行うことで、高速化も実現しました。 <h3 id="hbc784e2cde">Reactの煩雑面</h3> 素晴らしい面が多いReactですが、jQueryに対して面倒な部分もあります。jQueryは基本的にフレームワークのコードを読み込むことで利用可能で、テキストエディタとブラウザさえあれば開発可能です。Reactはnpmを導入したりWebpackやトランスパイラなど周辺環境を揃えるのがまず手間です。 しかもプロジェクトの構成には正解がなく、作っているうちにこれは正しいのかなど疑心暗鬼になります笑 <h3 id="h4d8d357b35">いまどきのReactプロジェクト</h3> 複数のファイルをHTMLで読み込むのではなく、webpackやBabelを使ってひとつのファイルにまとめる方法が主流です。 <h2 id="ha214098e44">まとめ</h2> 何がいいたいのかわからん記事になってしまいました。 とりとめのない記事なので後でまた書き直せるといいな。

ゆったりWeb手帳

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