Hello React!!
Ryoma Haraそろそろフロントエンドできるようになりたいので、趣味的にReactの勉強を初めて見る。
Ryoma Hara「できる」って言葉難しいよな。。
Ryoma Hara１つ目のチュートリアル。Counterアプリ。
型が欲しいのでTypeScriptを使う
Ryoma Hara最近、ちょっとPython触ったときも思ったけど、型が無い言語が少し書きづらい（慣れの問題説はある）。
Ryoma Hara２つ目のチュートリアル。三目並べ。
READMEにも書いたけど、ReactとTypeScriptの学習にGitHub Copilot ChatとColipot for Docsが大変便利。何書いてるか理解は必要だし適宜調べるけど、色々と壁打ち相手になってくれる。アシスタントとはこのこと。
親コンポーネントと子コンポーネント間での関数渡しの理解が怪しいけど、まぁ色々読んだり作ったりするうちに慣れるでしょう。useState()とかも気持ち悪いけど最初は慣れ、色々理解できるようになったタイミングで改めて深掘りすることがあるかもしれん。
Ryoma Haraとりあえずクイックスタートの記事は読んでいく
Ryoma HaraCreate React Appは役割を終えたらしい
Ryoma Hara次に以下のチュートリアルをやってみる。
Ryoma Hara今回からCreate React Appをやめてみる。
あとCat APIは知ってたけどDog APIってのもあるのね。。
Ryoma HarauseEffectについて読んでる。
こんなイメージ？（雑）
Ryoma Hara依存配列には複数の依存値を含めることができます。React は、指定したすべての依存値が前回のレンダー時とまったく同じ値である場合に限り、エフェクトの再実行をスキップします。React は、個々の依存値を Object.is を用いて比較します。
Ryoma Haraまだ良くわからんけどフロントおもろいな。。
Ryoma Haraひとまずデプロイまでした。まだ良く分かってないので引き続き。
Ryoma HaraToDoアプリをつくる。今回はバックエンドも用意したい
Nest.jsを触りたい気持ちもあるけどあまりモチベが湧かないのでKtorを使う（かもしれない）。
ユーザーができること（User Story）
- タスクのリストを読むこと
- マウスまたはキーボードを使用してタスクを追加すること
- マウスまたはキーボードを使用して、タスクに完了のマークを付けること
- マウスまたはキーボードを使用して、タスクを削除すること
- マウスまたはキーボードを使用して、タスクを編集すること
- タスクの特定の一部を表示する：すべてのタスク、アクティブなタスクのみ、完了したタスクのみ。
Ryoma Hara言ってることはざっくり分かったけど、まだピンと来ていない。
Ryoma HaraReactフレームワークのNext.jsを使ってみる（ブログサイトを作ってみる。Next.jsのチュートリアルのやつではない）。
以降はNext.js関連のメモ。
- 基本的にはServerComponentを利用（Next.jsでは
'use client'とファイル冒頭で宣言しない限りはデフォルトでServer Componentsになるらしい）。検索バーみたいにインタラクティブなComponentは小さく切り出してClientComponentにする。 - Clinet ComponentでServer Componentを使う場合はPropsで渡す（importはできない）
- App RouterではNetwork BoundaryはClient ComponentとServer Componentの間にある。Server->Clinetへと境界を超える場合はSerializeが必要。
参考資料
Ryoma HaraNext関係ないけど翻訳時にcodeブロック内も翻訳されるのを防ぐ方法（快適になった）。preタグにclass="notranslate"を追加するスクリプトを走らせる（DeepL Code Blockerという拡張機能を利用する方法もあるみたいだけど利用ユーザーが少なかったので、ScriptAutoRunnerを利用）。