結論
Concurrentlyというツールを使ってサクッと並列で実行することができました。
まずはインストール。
$ npm install --save-dev concurrently
あとは下記のようにconcurrentlyキーワードで複数の処理を実行できます。
"scripts": { "dev": "concurrently 'tcm --watch src' 'next src/'" }
てな感じで本日も以上となります🍺
【TypeScript】配列からundefinedを取り除く
結論
undefinedを許容した配列型のまま取り除きたい場合は下記のようにシンプルに記述できます。
items .filter(item => item.documentSnapshot !== undefined) // (number | undefined)[]
undefinedを許容しない配列型にしたい場合は、タイプガードを使ってfilterする必要があります。
items.filter((item): item is number => typeof item == 'string') // number[]
てな感じで本日も以上となります🍺
参考
その他の記事
【React】props. children を簡単に使う
結論
Functional Componentを実装する際に、下記のように定義するのではなく、
const Ex = (props: Props) => { return ( <div> hoge </div> ) }
React.FCを使って実装すれば、呼び出しからchildrenプロパティを参照できるようになります。
const Section: React.FC<SectionProps> = props => {
return (
<div>
hoge
</div>
)
}
参考
その他の記事
【TypeScript】スプレッド演算子って便利
結論
元のオブジェクトに変更を加えることなく、新しいオブジェクトを作成したい場合などに便利です。例えば、下記のようなaとbをプロパティに持つオブジェクトにcを追加する時など。
const hoge1 = {a: 1, b: 2} const hoge2 = {...hoge1, c: 3}
ちなみに、プロパティが同じ場合は、後に追加したプロパティの値で上書きされます。
また、配列では下記のように使用でき、追加した順序で配列が展開されます。
var list = [1, 2]; list = [...list, 3, 4]; console.log(list); // [1,2,3,4]
てな感じで本日も以上となります🍺
参考
その他の記事
ECMAScriptとはなんなのか？
最近Webフロントを入門したことで、JavaScriptを勉強する機会が増えたが、ECMAScriptについての理解が曖昧だったので軽くメモ👷♀️
ブラウザでのJavaScript
JavaScriptのコードをプログラムとして動作させるには、JavaScriptエンジンでコードをコンパイルして実行させる必要があります。ChromeやSafariを始めとしたブラウザは、それぞれJavaScriptエンジンがあり、これにより同じJavaScriptでもブラウザによって挙動が変わっています。
ちなみに、JavaScriptエンジンには下記のようなものがあります。
| エンジン | 内容 |
|---|---|
| V8 | Googleによって開発されたエンジンで、Chromeなどで使用されている |
| SpiderMonkey | Mozillaによって開発されたエンジンで、Firefoxなどで使用されている |
| JavaScriptCore | AppleのSafari向けのエンジン |
| Chakra | Microsoft Edge向けのエンジン |
| Hermes | Facebookが開発したエンジンで、React Native向けに最適化されている |
ECMAScriptとは？
先ほど紹介したような各JavaScriptエンジンで、JavaScriptのコードがどのように動くかが決まっていなっかたら、それぞれのブラウザごとにJavaScriptを逐次書くようになり大変です。そのようなことが内容に、JavaScriptのコードがどのように動くべきかを決めた仕様書がECMAScriptになります。
ECMAScriptの種類がいっぱいある？
ECMAScriptは、JavaScriptエンジンの仕様書なので、時間とともに当然新しくなっていきます。それぞれのバージョンで使えるJavaScriptの構文やブラウザが対応しているECMAScriptのバージョンも異なります。
ちなみに、エンジニアなら誰しも新しいECMAScriptでコードを書きたいと思うでしょう。そんな時に使えるのがbabelというコンパイラです。babelはECMAScriptのバージョンの違いを吸収して、新しいECMAScriptを古いバージョンに変えてくれたりします。
てな感じで本日も以上となります🍺
その他の記事
【TypeScript】Objectの配列をスマートにDictionaryに変換したい
オブジェクトの配列をDictionaryに変換する際に、下記のようにObject.assignで変換していましたが、もっとスマートな書き方があったのでメモしておきます。
const params = [ { key: 'hoge', value: 'value' }, { key: 'hoge2', value: 'value' } ] const dicParams: { [index: string]: string } = Object.assign( {}, ...params.map(x => ({ [x.key]: x.value })) )
結論
下記のようにObject.fromEntries関数で、スマートに変換することができました。Object.fromEntriesはキーと値の配列の組み合わせをDictionaryに変換できるメソッドで、今回の場合は、オブジェクトの配列を、キーと値の配列に変換して渡すことで、Object.fromEntriesを使えるようにしています。
const params = [ { key: 'hoge', value: 'value' }, { key: 'hoge2', value: 'value' } ] const dicParams = Object.fromEntries(params.map(obj => [obj.key, obj.value]))
ちなみに、Object.fromEntriesはes2019で利用可能なので、tsconfig.jsonのcompilerOptions > libに、es2019をよしなに追加する必要があります。
参考
- https://developer.mozilla.org/ja/docs/Web/JavaScript/Reference/Global_Objects/Object/fromEntries
- https://zenn.dev/terrierscript/articles/2021-04-02-java-script-object-entities
その他の記事
【TypeScript】A required parameter cannot follow an optional parameter. の対処法
TypeScriptで下記のようなコードを書いていたら A required parameter cannot follow an optional parameter.というErrorに遭遇して、若干ハマったのでメモします。
function hoge(a?: string, b: string) { console.log(a) console.log(b) }
結論
結論、エラーメッセージの通りで、TypeScriptでは省略可能な引数の後に、省略不可能な引数を記述することはできません。ですので、今回のような場合は、省略不可能な引数を最初に記述する必要があります。
function hoge(b: string, a?: string) { console.log(a) console.log(b) }
てな感じで本日も以上となります🍺
