Storybook(CSF3.0)でdefault exportではないコンポーネントを追加したいっ！(React)
サンプルが雑ですが、hoge.tsxにはHogeとFooがあって、Hogeはexport defaultです。 export default Hoge = () => { render <>Hoge</>; } export Foo = () => { rende…
JavaScript
Javascript(ES6)でrangeのArrayを作りたいっ！
タイトルの通りですが、0~4のArrayを作りたいなーって話です。 これが例えば、0~100とかだと羅列するのは現実的じゃないですし。 const hoge = ; であればお手軽に書けば const hoge = ; ですが、 const hoge = ; の場合はどうでしょうか？ const h…
componentDidMount / componentWillUnmount を useEffectで書き換えたいっ！
そもそもjsで書いてたコードをTypescriptにしないと行けないところですが、とりあえずHooksへの書き換えをメモ程度に。 componentDidMount componentDidMount() { console.log('mount!!'); } マウントされた時に何かしたいやつですが…
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…