componentDidMount / componentWillUnmount を useEffectで書き換えたいっ！
そもそもjsで書いてたコードをTypescriptにしないと行けないところですが、とりあえずHooksへの書き換えをメモ程度に。 componentDidMount componentDidMount() { console.log('mount!!'); } マウントされた時に何かしたいやつですが…
JavaScript
TypeSciprtのオプショナルチェーンをメモっ！
Optional Chaining rubyで書くと user&.id ですね。 (userがnilでなければidを呼び、userがnilの場合はnilが返るやつ) で、Typescriptで書くとこんな感じ const id = user?.id; ですね。 (userがnull / undefi…
React(TypeScript)でコンポーネントのtypeを別のコンポーネントで使いたいっ！[ComponentProps]
とあるコンポーネントのPropsで指定しているtypeを使いまわしたい時にComponentPropsを使うのを忘れそうなのでメモ。 const Hoge: React.FC<{ id: number }> = ({ id }) => { return <>{id}&l…
![propsで受け取った値をmountedで使いたいっ！[Vuejs]](https://blog.mitsuto.com/wp-content/webpc-passthru.php?src=https://blog.mitsuto.com/wp-content/uploads/2021/06/vuejs.png&nocache=1 "propsで受け取った値をmountedで使いたいっ！[Vuejs]")
propsで受け取った値をmountedで使いたいっ！[Vuejs]
ちょうどいいサンプルが無いですが、普通にthis.hogeでアクセスできるみたいです。 <script> export default { props: , mounted: function() { console.log(this.hoge) } } </script>…
vuejsのエラーをなんとかしたいっ！
Vuejsを触っていて表示されたエラーをメモっていきます。 Property or method "hoge" is not defined on the instance but referenced during render. Make sure that this property is r…
Vuejsでコンポーネントを読み込んで使いたいっ！
そもそもコンポーネントはそういうものだとは思いますが。 まずはHogeコンポーネントを追加しました。 <template> <div>Hoge!!</div> </template> <script></script> Hoge…
graphql-code-generatorでエラーがでたのでデバッグしたいっ！
graphql-code-generatorっていう、GraphQLからTypeScriptのTypeを生成してくれるライブラリがあるんですが、生成に失敗しても何か悪いのが全然わからないっていう Found 1 error Something went wrong error Command fai…
TypeScriptのよく使う型メモ
number const hoge: number = 3; Arrayの中に数値 const hoge: number[] = ; ネストしたArray const hoge = const hoge: Array<{foo: string}>; boolean const hoge:…
useEffectのよくやるパターンをメモっ！
componentDidMountの置き換え componentDidMount() { getHogeList(); } mount時にデータ取得するようなやつ。 useEffect(() => { getHogeList(); }, []); 二つ目の引数に空のArrayを渡すと最初のre…
vimでTypeScriptのSyntaxHighlightに対応したいっ！
Vimプラグインマネージャー 元々インストールしたままのvimで一部の設定は.vimrcに書いていましたが、とりあえずVundle(vimプラグインマネージャー)をインストールします。 Vundle.vimをclone git clone https://github.com/VundleVim/V…
ReactでonClickをネストにしたいっ！
やりたいことをコードで書いてみたけど、これ何の為に必要なのかよくわからんなｗ render ( <a onClick={e=>{ console.log('parent!!'); }}> 外側 <span onClick={e=>{ console.log('child…
react-i18nextのuseTranslationをTranslationコンポーネントに書き換えた話
ドキュメントを上から読んでいって、まずは普通に useTranslation(); で実装しようとしました。 (i18nextのinitは別のとこでやってるので省略) useTranslation(); まずは親になるMyComponentがこちら import React from 'react'…
S3(CloudFront)の画像をcanvasで使いたいっ！
タイトルのままですが、外部のサーバーにアップロードされている画像をcanvasに入れようと思ったら、色々と制限があるようなので調べてみました。 js実装 何も気にせずに書くとすれば、 const url = 'https:///example.com/test.jpg'; // s3(もしくはClo…
ReactのWarningをなんとかしたいっ！
Warningが気になったので修正していきます。 Warning: A component is changing a controlled input of type text to be uncontrolled. Input elements should not switch from co…
DOMに外部cssで適用されてるstyleが取りたいっ！
タイトルの通りですが、以下のようなhtmlがあった時に <div class="list" id="main_list"> <p>hogehoge</p> </div> このdivのstyleが取りたい時に、 c…