<h1 id="hf00cc2827d">改行なしで出力する</h1> 何かの処理をNode.JSで書いていて、途中の経過が知りたいときによく<code>console.log</code>を使いますが、これは改行込みで出力されてしまいます。 改行なしで出力する場合は<code>process.stdout.write</code>を使います。 <pre><code>[javascript:app.js]
process.stdout.write('something')</code></pre>``` 特に何かを<code>import</code>する必要もないので便利です。

改行なしで出力する

<h1 id="h03e846e60e">gatsbyのアップデートでエラーになった</h1> <code>gatsby-cli</code>をアップデートするためにrootで<code>npm i -g gatsby-cli</code>を実行したところ、<code>sh: 1: node: Permission denied</code>というエラーが出ました。 アップデート失敗どころか<code>gatsby</code>コマンドも使えなくなってしまったので解決法を探しました。 こちらにありました: <a href="https://codehex.hateblo.jp/entry/2017/04/18/000000" target="_blank" rel="noopener noreferrer">参考</a> <pre><code>[shell:shell]
# npm config set user 0
# npm config set unsafe-perm true</code></pre> <h2 id="h2d678e3e71">元に戻すには</h2> なにをやっているのかよくわからないけど、たぶんパーミッションを無視する設定でしょう。セキュリティ的に少し怖いので元に戻す方法も書いておきます。 この設定はホームディレクトリの<code>.npmrc</code>に記録されているので、これを編集します。 rootの場合は<code>/root/.npmrc</code>です。 <pre><code>[text:/root/.npmrc]
user=0
unsafe-perm=true</code></pre> この2行を削除すれば元通り。

nodeでパーミッションエラー

<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>などで判別する方法もあります。注意点はすべてのブラウザでキーのコードや名前が同じという保証はないので、実際に使用する場合は想定される環境で動作するか確認することをおすすめします。

ゆったりWeb手帳

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

nodeでパーミッションエラー

gatsbyのアップデートでエラーになった

元に戻すには