今回は TypeScript を使用しない
First, run the development server:
npm run dev
# or
yarn devOpen http://localhost:3000 with your browser to see the result.
You can start editing the page by modifying pages/index.js. The page auto-updates as you edit the file.
API routes can be accessed on http://localhost:3000/api/hello. This endpoint can be edited in pages/api/hello.js.
The pages/api directory is mapped to /api/*. Files in this directory are treated as API routes instead of React pages.
This project uses next/font to automatically optimize and load Inter, a custom Google Font.
To learn more about Next.js, take a look at the following resources:
- Next.js Documentation - learn about Next.js features and API.
- Learn Next.js - an interactive Next.js tutorial.
You can check out the Next.js GitHub repository - your feedback and contributions are welcome!
The easiest way to deploy your Next.js app is to use the Vercel Platform from the creators of Next.js.
Check out our Next.js deployment documentation for more details.
- データと処理（ロジック）を分けるのがリファクタリングの基本。これを守るだけである程度読みやすくて使いやすいコードになる
- クラスの管理が楽、コードが簡潔
- BEM は大変、コードが長い
- 解決方法としていかのものもある
- CSS in JS、styled-components や Emotion などのライブラリを使用
- TailWindCSS のフレームワークなどを使用する
[好きな名前].module.css- クラスのみ使える（id などは使えない）
- グローバル css は
_app.jsでのみ読み込む（他のファイルで読み込み厳禁）
- ユーザー体験がより高速に
- 逆に a タグを使用すると状態が初期化されてしまう
map を使う
- コード量が少なくて済む
- component を修正するときに 1 箇所を修正するだけで良い
>アンドで始まり、セミコロンで終わるコード- jsx ではエスケープしてくれる
- HTML Entities をただしく表示させるには
【React】HTML 文字列を HTML に変換して表示する方法｜ Web エンジニア研究室
リファクタリング
VS Code が jsx に関する構文の補完を出してくれる
- components, pages, styles ディレクトリを移動する（したほうが見やすい、人によって好みあり）
- VS Code の場合は自動で import のパスを変更してくれる（してくれないときもあるのでその時は手動で変更する）
Xxx.jsxとXxx.module.cssが同一階層にたくさんあると管理が大変Xxx.jsxとXxx.module.cssをXxxというフォルダーを作成しそこに移動する- そのままだと
Caused by: No such file or directory (os error 2)というエラーが発生する。解決するためにはXxx.jsxをindex.jsxに変更することでエラーが解決する。 indexという名前は js において非常に重要な名前。 名前をindexに置き換えることでディレクトリ名を参照したときにまずはindexを探してくれる。- このエコシステムを使用することでパスが長くなってしまうのを防いでくれる
-
相対パスより絶対パスの方が良さげ
-
変更方法は
next.js absolute pathで調べる -
VS Code の基本設定では自動インポート補完は相対パスで補完されるので、絶対パスにしたい場合わざわざ修正しなければならず手間がかかる。
- 絶対パスに変更する場合は VS Code の
.vscode/settings.jsonに"javascript.preferences.importModuleSpecifier": "non-relative"を追記する
- 絶対パスに変更する場合は VS Code の
第二引数に値を入れることで、値が変更したことを検知して関数を実行して表示などを更新する。cleanupfunction が先行して実行されることに注意
HTML タグでの値の変化による表示の制御は{}で囲い、三項演算子を使用する(jsx による制限)。
何も表示させたくない場合は null を代入する
export default function Home() {
return (
<>
<button onClick={handleDisplay}>{isShow ? "ひひょうじ" : "ひょうじ"}</button>
<button onClick={handleDisplay}>{isShow ? "表示する" : null }</button>
</>
);
}JavaScript は現在破壊的メソッドが推奨されていない。 そのためスプレッド構文などを用いて対応する。
カスタムフックとは、名前が ”use” で始まり、ほかのフックを呼び出せる JavaScript の関数のことです。 独自フックの作成 – React
- コードを共通化できる
- return 文までの記述が短くなる
- 関心ごとを分離させることができる
- カスタムフックスは共通化（コードの再利用）に使える
- カスタムフックスは
useXxxという名前で関数を作成する hooksディレクトリを作成してそこにコードを記述することができる。ディレクトリ名はutilsなどいろいろあるのでチームの決まりに合わせる- フックスを使用する場合のルールがあるフックのルール – React
- フックを呼び出すのはトップレベルのみ
- フックを呼び出すのは React の関数内のみ
- フックを通常の JavaScript 関数から呼び出さないでください
- ファイルの拡張子は jsx のほうがわかりやすい（かも）
- カスタムフックスとコンポーネントの使い分け
- コンポーネントとロジックを一緒にしたいのであればコンポーネントとして作成する
- コンポーネントとロジックを分けたい（UI は自由度を持たせたい）のであればカスタムフックとして作成する
状態共通化といってる 大きく 2 通り
- ページ間での状態を共通化する方法(Next.js 可、React.js 不可 - 【Next.js で学ぶ React 講座 #16】State のリフトアップでページ間やコンポーネント間で値を共通化しよう！ - YouTube)
- コンポーネント間での状態を共通化する方法(Next.js 可、React.js 可)
- 親からは props, 子で引数に値を分割代入する
useMemo は必要なタイミングで値の評価、再生成させるために使用する。 パフォーマンスの向上につながる可能性が高い。
useRouter で使用できるプロパティは以下 next/router | Next.js
React
Typescript
Django
Laravel
Facebook
Microsoft
Google
Alibaba
D3
Tencent