React練習問題 Q1. 素数かどうか判定する関数を作ってみよう！ 問題の取り組み方 1.Github右上部にあるForkをクリックして、以下のリポジトリをフォーク https://github.com/SatakeYusuke19920527/react-juku.git 2.git clone Codeと書いてあるボタンをクリックしてURLをコピー 3.git cloneでローカル環境へコードを持ってくる git clone https://github.com/SatakeYusuke19920527/react-juku.git 4.src/questions/Q1.tsxのjudgePrimeNumber()で素数を判定する関数のロジックを実装してください 5.実装できたらレビュアーに [SatakeYusuke19920527] を入れてプルリクエストを作成してください 6.レビューして合否を判定します！プルリクエストに合否を書くね。 みんなのコードを見れることを楽しみにしてます！ p.s　好評だったら第二弾もやるね

Typescript と React 18 の環境で、createRootにて Property 'createRoot' does not exist on type のエラーを取る方法がわからなかったので、いろいろ調べた結果、公式が一番良かった。 Typescript 初心者なので全然わからなかったが、ちょっと、かじった人ならすぐわかるんだろうなぁ。 Create React App: で Typescriptベースのテンプレートを作成する。 createRootを使うように修正する。 rootElement がnull になる対策だけを入れたが、createRoot でエラー発生。 対策前 index.tsx import React from 'react'; import ReactDOM from 'react-dom'; import './index.css'; import App from './App'; import reportWebVitals from './reportWebVitals'; const rootElement = document.getElementById('root'); // https://blog.logrocket.com/how-to-use-typescript-with-react-18-alpha/ if (!rootElement) throw new Error('Failed to find the root element'); const root = ReactDOM.createRoot(rootElement); root.render(<App/>); 対策後 index.tsx import React from 'react'; // https://reactjs.org/docs/react-dom-client.html import * as ReactDOM from 'react-dom/client'; import './index.css'; import App from './App'; import reportWebVitals from './reportWebVitals'; const rootElement = document.getElementById('root'); // https://blog.logrocket.com/how-to-use-typescript-with-react-18-alpha/ if (!rootElement) throw new Error('Failed to find the root element'); const root = ReactDOM.createRoot(rootElement); root.render(<App/>);

Docker composeを使ってNext.jsの開発を進めていたのですが、ある日JavaScriptから TypeSriptに切り替えてから、それまで使えていたホットリロードが効かなくなってしまいました。 JavaScriptのままでNext.jsの開発をしていた時には、docker-compose.yamlの中でCHOKIDAR_USEPOLLING=trueと設定をしていればホットリロードが効いていたのですが... 下記が使っていたdocker-compose.yamlの中身です。 frontend: build: ./frontend container_name: frontend_ultimate_timer hostname: frontend volumes: - ./frontend/ultimate_timer:/app tty: true environment: - CHOKIDAR_USEPOLLING=true ports: - "3000:3000" 解決策としては、environmentのところにWATCHPACK_POLLING=trueという記載をすることでホットリロードがTypeScriptでも効くようになりました。 frontend: build: ./frontend container_name: frontend_ultimate_timer hostname: frontend volumes: - ./frontend/ultimate_timer:/app tty: true environment: # - CHOKIDAR_USEPOLLING=true - WATCHPACK_POLLING=true ports: - "3000:3000" めでたしめでたし

なぜこの記事を書いたか reactに関するテストの勉強をしていて、useSelectorのモックの仕方で詰まりました。この経験からこの記事を残そうを思います。 useSelectorのモックの仕方はいくつか記事があるとは思うのですが、具体的に今回詰まったのは、一つのコンポーネント(or カスタムフック)で複数回useSelectorを呼び出す場合でした。この記事では、そんな複数回のuseSelectorの呼び出しにも対応させています。 ケース 早速ですが、複数回のuseSelectorの呼び出しとは何かというと、以下のようなケースです。 useMyCloset.js const useMyCloset = () => { const isThinkingTops = useSelector(state => state.tops.isThinking); const tShirts = useSelector(state => state.tops.tShirts); const loadMyTshirts = () => { if (isThinking) return null; return tShirts; } return { loadMyTshirts } } useSelectorによって値を取得する際は、一度のuseSelectorで、objectを取得して、その値を使用するのではなく、何度もuseSelectorを呼び出して一番小さい単位で取得することが推奨されています。(参考) よって、先述のコードは以下のように書くと、あまりよろしくないということになります。(なぜこのようにした方が良いかは、本記事では省きます。) useMyCloset.tsx.js const useMyCloset = () => { // ↓ 一度のuseSelector呼び出しで値を取得している const tops = useSelector(state => state.tops); const loadMyTshirts = () => { if (tops.isThinkingTops) return null return tops.tShirts } return { loadMyTshirts } } じゃあどうするのか さて、少し話題が逸れましたが、複数回のuseSelector呼び出しは、以下のように、mockImplementationを使った方法でモックできます。 useSelectorは、引数にrootStateを取るselector関数を受け取り、それを実行するだけです。 よって, useSelectorの振る舞いをモックした上で、selector関数でエラーが出ないように、dummyのRootStateをselector関数の引数に渡すようにします。 useMyCloset.test.js // 他import import {useSelector} from 'react-redux'; jest.mock('react-redux'); const useSelectorMock = useSelector as jest.Mock; const dummyStore = { tops: { isThinking: false, tShirts: ['tShirtsA', 'tShirtsB', 'tShirtsC'] } } beforeEach(() => { useSelectorMock.mockImplementation(selector => selector(dummyStore)) }); afterEach(() => { jest.resetAllMocks(); }); describe('useMyCloset', () => { it('testA', () => { // some test }); }); 他にも何かもっといい方法があれば教えてくださいませ〜〜！！

前書き 以前、個人アプリを開発した際にルーレット作ることがあったので今回は次回使う時用のメモとルーレットを作りたい人へのコード共有を兼ねて記事を作成します！ setIntervalを使えばできそうだなぁと思って実装したら副作用のせいでうまくできなかったのを覚えています。。笑 JavaScriptではルーレットを作れるけど、Reactでは副作用のせいでうまくできない。。！ という僕と同じ状況の方がいましたら是非ご覧ください 実装イメージは以下の通りです。 注意点 今回のコードはルーレットを動かす記述しか書いてありません。 そのため、実装イメージのようなスタイリングやアニメーションの記述は省かれております。 スタイリングやアニメーションは人によって異なると思いますので適宜お好みであててください。 コード import { useState, useEffect, useCallback, memo } from "react"; export const Roulette = memo(() => { const [start, setStart] = useState(false); const [index, setIndex] = useState(0); const rouletteContents = [ "カレー", "パスタ", "唐揚げ", "天ぷら", "中華", "ハンバーグ", "うどん", "肉じゃが" ]; //ボタンの文言を変更する処理 const startRoulette = useCallback(() => { setStart(!start); }, [start]); //ルーレットを回す処理 useEffect(() => { if (start) { const interval = setInterval(() => { setIndex((oldIndex) => { if (oldIndex < rouletteContents.length - 1) return oldIndex + 1; return 0; }); }, 50);//ルーレットの中身を切り替える速度 return () => clearInterval(interval); } else if (!start) { return () => clearInterval(); } }, [start]); return ( <> <div> <p>今日のメニューは・・・</p> <p>{rouletteContents[index]}</p> </div> <button type="button" onClick={startRoulette}> {start ? "ストップ" : "スタート"} </button> </> ); }); 最後に 参考になりましたでしょうか？ この他にもQiitaやTwitterでは文系大学生の僕がプログラミングについて発信してますのでフォローしていただけると嬉しいです！ おすすめ記事 【2022年版】駆け出しフロントエンドエンジニアが覚えたい用語一言メモ集 【React】本番環境にデプロイして画面が真っ白になった時の解決方法

Error: Failed to communicate with the Sanity API npm install -g @sanity/cli && sanity init を実行すると下記のようなエラーが発生 Error: Failed to communicate with the Sanity API: このエラーが起きたときの解決法をご紹介します！ CLI errorsこちらの公式ドキュメントからも確認できます。 解決法は簡単 ターミナルでsanity logoutとsanity login を実行するだけです。 Try to log out and log in again with the sanity logout and sanity login CLI commands. $ sanity logout //ログアウト 　Logged out $sanity login　//ログイン 　? Login type (Use arrow keys) 　> Google 　 GitHub 　 E-mail / password 　Login successful $sanity init　//初期設定 　Looks like you already have a Sanity-account. Sweet! 　? Select project to use (Use arrow keys) 　> Create new project 改めてログインをすれば、sanity initを実行することができます

React で画面遷移 Reactで画面遷移をさせるのに想像以上に時間がかかったので 単純化したものを備忘録的に記録 準備 Typescript 版の React プロジェクト作成 react-router-dom のインストール % npx create-react-app page-sample --template typescript % cd page-sample % npm install react-router-dom @types/react-router-dom コード index.tsx, App.tsx の２ファイルのみのコード記述で動くようにしました。 index.tsx <App /> を <BrowserRouter>で括る。 index.tsx import ReactDOM from "react-dom"; import App from "./App"; import {BrowserRouter} from "react-router-dom"; ReactDOM.render( <BrowserRouter> <App /> </BrowserRouter> , document.getElementById("root") ); App.tsx App.tsxは以下のコードに置き換える。 遷移先ページを別ファイルにするのが普通だが単純化してApp.tsx内に定義 App.tsx import { Routes, Route, Link } from "react-router-dom"; const Home = () => { return (<h2>Home </h2>) } const Page1 = () => { return (<h2>Page1</h2>) } const Page2 = () => { return (<h2>Page2</h2>) } const NotPG = () => { return (<h2>Error</h2>) } function App() { return ( <div className="App"> <h1> Page Sample </h1> <Link to="/"> [ Home ] </Link> <br/> <Link to="/page1"> [ Page 1 ] </Link> <br/> <Link to="/page2"> [ Page 2 ] </Link> <br/> <Routes> <Route index element={<Home/>}/> <Route path="/page1" element={<Page1/>}/> <Route path="/page2" element={<Page2/>}/> <Route path="*" element={<NotPG/>}/> </Routes> </div> ); } export default App; 最後に 最も単純化したものを備忘録として記録しました。 忘れた時はまずここからですね。

こちらの記事のメモです。 https://reactjs.org/docs/state-and-lifecycle.html 現在の時刻を表示するコードは、React.Componentの継承クラスを使って以下のようにカプセル化できる。ポイントは以下 constructorでpropsを引数として受け取る。 render()でJSXを返す 現在の時刻をクラス内で生成する場合はthis.stateを定義する。this.stateはローカルなステートと呼ばれる。 マウント時（最初にClockクラスがレンダリングされたとき）とアンマウント時（Clockが取り除かれるとき）にコードを実行したい場合はcomponentDidMount()とcomponentWillUnmount()を使う。 class Clock extends React.Component { constructor(props) { super(props); this.state = {date: new Date()}; } componentDidMount() { this.timerID = setInterval( () => this.tick(), 1000 ); } componentWillUnmount() { clearInterval(this.timerID); } tick() { this.setState({ date: new Date() }); } render() { return ( <div> <h1>Hello, world!</h1> <h2>It is {this.state.date.toLocaleTimeString()}.</h2> </div> ); } } ReactDOM.render( <Clock />, document.getElementById('root') ); CodePen ステートの値を変更する場合はsetStage()メソッドを使う。 // Wrong this.state.comment = 'Hello'; // Correct this.setState({comment: 'Hello'}); パフォーマンス上の理由で複数のsetState()がまとめて処理される場合がある。this.props とthis.stateの値が非同期に変更される可能性があるため（？ここはよくわからなかった）、setState()内で直接両者を参照するのではなく引数で渡すべし // Wrong this.setState({ counter: this.state.counter + this.props.increment, }); // Correct this.setState((state, props) => ({ counter: state.counter + props.increment })); Reactコンポーネントが通常のOOPのクラスと違う点 呼び出し側（JSX側）でコンポーネントがクラスか関数か知ることもできない 外部からプロパティを操作することができない