Next.jsで最初のページを表示したいっ！
create TypeScriptで書きたいのでオプションを追加。 yarn create next-app --typescript プロジェクト名を入力 > hogehoge What is your project named? › hogehoge Would you like to use…
JavaScript
Node.jsのバージョン管理をVoltaでしたいっ！
別に何でバージョン管理をしてもいいんですが、Voltaが早いらしいので。 ローカルのOSはAlmaLinux 9.1です。 インストール curl https://get.volta.sh | bash 確認 volta -v > 1.1.1 Node.jsインストール バージョン指定(18.…
react-router-domでURLに含まれるidを取得したいっ！
Routerあんまり触ってなかったんですが、pathで指定した値(/archives/11111みたいなやつ)が取れるんですね😀 <Routes> <Route path="/archives/:id" element={<Archive />} /…
Reactでdefault exportではないコンポーネントをlazy importしたいっ！
タイトルの通りですが、 export default function Hoge() { return ( <h1>ほげほげ</h1> ); } 上記のようなコンポーネントを普通にimportすれば import Hoge from './hoge'; で、lazyを使ったと…
ESLintのno-constant-conditionを直したいっ！
no-constant-condition 条件文が固定値だと怒られる。 if (false) { console.log('ERROR!!'); } これデバッグ中にやりがち、、…
ApolloClientのuseLazyQueryでonCompletedが毎回動くようにしたいっ！
useLazyQueryを使うと任意のタイミングで、バシバシQueryを呼び出すことができるようになりますが、以下↓のように書いても思ったように動かなかったのでメモ。 const GET_USER = gql` query GetUser($id: Int!) { user(id: $id) { n…
useReducerでコンポーネントに渡すpropsをすっきりさせたいっ！[React/typescript]
機能追加を続けるとuseStateが乱立というかどんどん増えて行ってしまうので、useReducerでまとめて処理したいと思います。 useState import { useState } from 'react'; const = useState<number>(1); const…
連続して発火するイベントの処理を減らしたいっ！(React)
例えばscrollの位置を保存するような処理を書こうとすると、連続してイベントが発生してしまって処理が無駄に行われる場合があります。 const = useState(0); // heightが変更された時 useEffect(() => { // 保存する save(height); },…
Storybook(CSF3.0)でdefault exportではないコンポーネントを追加したいっ！(React)
サンプルが雑ですが、hoge.tsxにはHogeとFooがあって、Hogeはexport defaultです。 export default Hoge = () => { render <>Hoge</>; } export Foo = () => { rende…
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…