入門
Preactで始める軽量コンポーネント指向開発
12

これまで解説してきたHooksのおさらいと、まだ紹介していないHooksをまとめて解説します。Hooksの使い方、ポイントを解説しますので、リファレンスとしても役立ちます。

杉浦 有右嗣
杉浦 有右嗣 | Jamstackエンジニア

複数のフックを組み合わせて新たにフックを定義するカスタムフックについて解説します。カスタムフックを作成する上での注意点も合わせて押さえましょう。

杉浦 有右嗣
杉浦 有右嗣 | Jamstackエンジニア

すべてのコンポーネントをまたいで利用するデータを定義することができるHooksを解説します。また野放図な設計にならないよう注意点についても述べます。

杉浦 有右嗣
杉浦 有右嗣 | Jamstackエンジニア

Preactの代表的なHooksのAPIのうち、さまざまな参照を取得するuseRef()の使い方と注意点について解説します。

杉浦 有右嗣
杉浦 有右嗣 | Jamstackエンジニア

コンポーネント自体をレンダリングする必要があるかどうか、いったん判断を挟むというコンポーネントのメモ化の実装について解説します。

杉浦 有右嗣
杉浦 有右嗣 | Jamstackエンジニア

Preactにおいて、コンポーネントを描画した結果、描画以外に起こることすべてを「副作用」と呼びます。この副作用を扱うuseEffect()というフックを解説します。

杉浦 有右嗣
杉浦 有右嗣 | Jamstackエンジニア

useState()関数を例に、Hooksという仕組みについて解説します。フックの仕方によっては、処理に無駄が生じる可能性もあるため、その最適化に役立つ「メモ化」という概念も解説します。

杉浦 有右嗣
杉浦 有右嗣 | Jamstackエンジニア

これまでのコンポーネント作成の知識を使って、実際にモックからアプリケーションを実装してみます。コンポーネントの切り分けから組み立てまでフローのポイントがわかります。

杉浦 有右嗣
杉浦 有右嗣 | Jamstackエンジニア

コンポーネントの描画とデータの更新を中心に、コンポーネントの組み立てをさらに深く解説します。

杉浦 有右嗣
杉浦 有右嗣 | Jamstackエンジニア

コンポーネントに対してCSSをどのように適用するかについては、さまざまな方法があります。ここでは4つの方法と、そのメリット・デメリットを解説します。

杉浦 有右嗣
杉浦 有右嗣 | Jamstackエンジニア

コンポーネントの記述の基本を解説します。コンポーネントを作るルールと、JSXの記述方法をしっかり押さえることがポイントになります。

杉浦 有右嗣
杉浦 有右嗣 | Jamstackエンジニア

PreactはReactとほぼ同等の機能を持ち、Reactよりもさらに軽い動作が期待できるUIライブラリです。第1回目はReactとの関係性とPreactの導入について解説します。

杉浦 有右嗣
杉浦 有右嗣 | Jamstackエンジニア