Development

For one-off styles, you can always use the escape-hatch syntax [xxx] to use custom or raw CSS values without TypeScript errors.

システムは一つの全体であり、同時に、部分の集合

ソフトウェアシステムを設計する場合、文脈で考えるということは、ソフトウェアシステムの目的、利用可能な資源、作るうえでの制約を考えるということ。

他の要素との関係をまったく考えずに、部分に注目しているだけでは、全体を見ることができない。要素間のつながりを考えてみることで、全体が見る手がかりが増えてくる。

システムをこのスケールフリーネットワークとして捉えることが役に立つことが多い。特に、多数の要素がつながるごく少数の要素（ハブ）を特定することが、システムの特徴を捉え、構造を整理することにつながることが多い。

システムを捉える時には、時間とともに変化する進行過程で考えることが役に立つ。

誰かが見ることになると分かっていれば、より良いコードを誰しも書くようになる。 (p.109)

コードを書くなら、チーム内で共有された、標準的な抽象化やパターンを使うことだ。新しいものを発明しちゃいけない……新たに発明した抽象化やパターンが、チーム全体での標準になるくらい強力だという自信がない限りは。 (p.166)

最終的に、プロジェクトを殺すのは、複雑性だろう。

pipeline is a list of schemas and actions that synchronously passes through the input data.

A schema can be compared to a type definition in TypeScript. The big difference is that TypeScript types are "not executed" and are more or less a DX feature. A schema on the other hand, apart from the inferred type definition, can also be executed at runtime to guarantee type safety of unknown data.

Schema-driven development means that teams only take a dependency on the actual API definition.

Valibot's mental model is mainly divided between schemas, methods, and actions. Since each functionality is imported as its own function, it is crucial to understand this concept as it makes working with the modular API design much easier.

Schemas are the starting point for using Valibot. They allow you to validate a specific data type, like a string, object, or date. Each schema is independent. They can be reused or even nested to reflect more complex data structures.

Methods help you either modify or use a schema.

Actions help you to further validate or transform a specific data type. They are used exclusively in conjunction with the pipe method, which extends the functionality of a schema by adding additional validation and transformation rules.

hooks are not allowed in server components as they run only once and don't run on the client (where hooks are supposed to be executed).

サーバコンポーネントはブラウザに送信されないため、useState のようなインタラクティブな API を使用できません。

React Server Components の “server” とはこの別の環境を指しています。サーバコンポーネントは、CI サーバでビルド時に一度だけ実行することも、ウェブサーバを使用してリクエストごとに実行することもできます。

非同期コンポーネントはクライアントではサポートされていないため、プロミスの待機は use を使用して行います。

class MyError extends Error { constructor(message) { super(message); this.name = 'MyError'; } }

プログラミング言語に関係なく、メモリーのライフサイクルはほぼいつも同じです。 必要なメモリーを割り当てる 割り当てられたメモリーを使用する（読み込む, 書き込む） 必要なくなったら、割り当てられたメモリーを解放する

At a high level, React Server Components is the name for a brand-new paradigm. In this new world, we can create components that run exclusively on the server.

Server Components never re-render.

ファイルのトップに 'use client' を加えることで、当該モジュールとそれが連動してインポートしている依存モジュールがクライアントコードであるとマーク

クライアントコンポーネントとは、レンダーツリーの中の、クライアントでレンダーされるコンポーネントです。 サーバコンポーネントとは、レンダーツリーの中の、サーバでレンダーされるコンポーネントです。

サーバコンポーネントにより、クライアントに送信され実行されるコードの量を減らすことができます。バンドルされてクライアントで評価されるのはクライアントモジュールだけです。

サーバコンポーネントにはサーバ上で実行されることに伴う利点があります。ローカルファイルシステムにアクセスでき、データフェッチやネットワークリクエストのレイテンシが低い可能性があります。

サーバコンポーネントからクライアントコンポーネントに渡される props の値は、シリアライズ可能 (serializable) である必要があります。

サーバコンポーネントはユーザによるインタラクションをサポートできません。イベントハンドラはクライアントで登録されトリガされる必要があるためです。

クライアントコンポーネントとは、レンダーツリーの中の、クライアントでレンダーされるコンポーネントです。

コンポーネントモジュールに 'use client' ディレクティブが含まれている場合、そのコンポーネントは必ずクライアントコンポーネントであることが保証されます。