<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="ha9b688b393">ファイルやディレクトリのサイズを確認する</h1> Windowsでは右クリック→プロパティでサイズの確認ができますが、CUIではコマンドを使って確認します。 <pre><code>[shell]
du -sh ./*</code></pre> こんな感じで出力されます。 <pre><code>[shell]
8.0K ./app.js
4.7M ./client
103M ./node_modules
4.0K ./package.json
324K ./package-lock.json
4.0K ./README.md
48K ./server
4.0K ./webpack.js</code></pre> コマンドの構成はこんな感じ。 <pre><code>[shell]
du -[option] [directory || file]</code></pre> <h2 id="h32a67f9128">オプション</h2> <code>-s</code>はサブディレクトリを表示しないオプションです。これをつけないとサブディレクトリの内容もずらずら出てきます。 <code>-h</code>はサイズに合わせて読みやすく単位を変えて表示してくれます。 <code>-k</code>をつけると、1KBを単位として計算します。

ファイルやディレクトリのサイズを確認するコマンド

<h1 id="h0ab0e9f747">コミットした直後にキャンセルしたい</h1> コミットした直後に取り消したいときのコマンドです。 <pre><code>[shell]
git reset --soft HEAD^</code></pre> Gitを操作していると、よくコミットした後にファイルを追加し忘れたり、メッセージを間違えてたり、修正漏れが見つかったりして、コミットキャンセルしたいときってありますよね。 <h2 id="h32a67f9128">オプション</h2> <code>--soft</code>はコミットのみ取り消しを意味し、これを<code>--hard</code>にするとワークディレクトリの内容も戻ります。 <code>HEAD^</code>は直前のコミットを意味し、<code>HEAD~{n}</code>で<code>n</code>個前のコミットを指定することができます。 直前のコミットの修正であれば<code>--amend</code>を使って上書き修正もできます。

ゆったりWeb手帳

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

ファイルやディレクトリのサイズを確認するコマンド

ファイルやディレクトリのサイズを確認する

オプション