React

「基礎から学ぶ Next.js」の感想・備忘録

基礎から学ぶ Next.jsposted with ヨメレバ大島祐輝シーアンドアール研究所 2023年07月24日楽天ブックスで見る楽天koboで見るAmazonで見るKindleで見る ebookjapanで見る点数 86点感想第1章のJavaScript、TypeScript、React、Next.jsの解説がとてもわかりやすかった。第2章と第4章のハンズオンはそれぞれNotion...

2023.09.04

React(書評)

「Reactハンズオンラーニング」の感想・備忘録6

Reactハンズオンラーニング第2版posted with ヨメレバAlex Banks/Eve Porcello オライリー・ジャパン 2021年08月06日頃楽天ブックスで見るAmazonで見るKindleで見る「Reactハンズオンラーニング」の感想・備忘録5の続きテスト 10.6.2 要素の検索 Create React Appを使うと@testing-libraryで始まるパッケ...

2023.09.01

React(書評)

「Reactハンズオンラーニング」の感想・備忘録5

Reactハンズオンラーニング第2版posted with ヨメレバAlex Banks/Eve Porcello オライリー・ジャパン 2021年08月06日頃楽天ブックスで見るAmazonで見るKindleで見る「Reactハンズオンラーニング」の感想・備忘録4の続きデータ 8.2 データの送信 const = useState("") const handleClick = () =...

2023.08.28

React(書評)

「Reactハンズオンラーニング」の感想・備忘録4

Reactハンズオンラーニング第2版posted with ヨメレバAlex Banks/Eve Porcello オライリー・ジャパン 2021年08月06日頃楽天ブックスで見るAmazonで見るKindleで見る「Reactハンズオンラーニング」の感想・備忘録3の続きフック 7.3 useReducer 以下のchecked => !checkedのように、現在のステート値を受け取って...

2023.08.25

React(書評)

「Reactハンズオンラーニング」の感想・備忘録3

Reactハンズオンラーニング第2版posted with ヨメレバAlex Banks/Eve Porcello オライリー・ジャパン 2021年08月06日頃楽天ブックスで見るAmazonで見るKindleで見る「Reactハンズオンラーニング」の感想・備忘録2の続きフック 7.1.1 依存配列 useEffectを使った処理をカスタムフックとして定義すると、利用する側にはuseEff...

2023.08.21

React(書評)

「Reactハンズオンラーニング」の感想・備忘録2

Reactハンズオンラーニング第2版posted with ヨメレバAlex Banks/Eve Porcello オライリー・ジャパン 2021年08月06日頃楽天ブックスで見るAmazonで見るKindleで見る「Reactハンズオンラーニング」の感想・備忘録1の続きステート管理 6.3.3 カスタムフック例えば、以下のテキストボックスの記述は重複してしまう。 <input type...

2023.08.18

React(書評)

「Reactハンズオンラーニング」の感想・備忘録1

Reactハンズオンラーニング第2版posted with ヨメレバAlex Banks/Eve Porcello オライリー・ジャパン 2021年08月06日頃楽天ブックスで見るAmazonで見るKindleで見る点数 87点感想 Reactの機能が一通り解説されていた。文章がわかりづらいところが多少あるが、全体的には丁寧に説明が書かれていた。本書の内容のうち、実際の開発には不要なもの...

2023.08.12

React(書評)

[Next.js] getStaticPaths関数とは

概要 .tsxのようなダイナミックルーティングを行うページでgetStaticProps関数を使用する場合は、getStaticPaths関数を使用して「生成されるパスのリスト」を定義する必要がある。 getStaticPaths関数はgetStaticProps関数の前にコールされ関数で、パスの組み合わせpathsとフォールバックfallbackをreturnする。例 import { Nex...

2023.06.28

React

[Next.js] getStaticProps関数とは

概要 Next.jsのページコンポーネントにて、「SSG（StaticSite Generator）させたい=ビルド時に実行したい」処理はgetStaticProps関数の中に記述する。例 import {useEffect, useState} from 'react' import {GetStaticProps, NextPage} from 'next' type SsgProps = ...

2023.06.24

React

[Next.js] レンダリング手法の決定方法

概要 Next.jsにはSSG、SSR、ISR、CSRの4種類のレンダリング手法がある。 SSGビルド時にgetStaticProps関数が呼ばれ、その中でAPIコールなどを行い必要なデータをpropsとして返す。ビルド結果は静的ファイルとして保存される。 SSRページへのアクセスがある度にgetServerSideProps関数が呼ばれ、関数内で生成されたpropsを元にページをサーバ側で描画し...

2023.06.21

React