Preactで始める軽量コンポーネント指向開発
- カテゴリー
- JavaScript
- React/Preact
PreactはReactとほぼ同等の機能を持ち、Reactよりもさらに軽い動作が期待できるUIライブラリです。このシリーズではその基本が学べます。
最終回 Hooks総ざらい
これまで解説してきたHooksのおさらいと、まだ紹介していないHooksをまとめて解説します。Hooksの使い方、ポイントを解説しますので、リファレンスとしても役立ちます。
第11回 カスタムフック
複数のフックを組み合わせて新たにフックを定義するカスタムフックについて解説します。カスタムフックを作成する上での注意点も合わせて押さえましょう。
第10回 useContext()を利用する
すべてのコンポーネントをまたいで利用するデータを定義することができるHooksを解説します。また野放図な設計にならないよう注意点についても述べます。
第9回 useRef()で参照を取得する
Preactの代表的なHooksのAPIのうち、さまざまな参照を取得するuseRef()の使い方と注意点について解説します。
第8回 コンポーネントをメモ化する
コンポーネント自体をレンダリングする必要があるかどうか、いったん判断を挟むというコンポーネントのメモ化の実装について解説します。
第7回 副作用を扱うためのHooks
Preactにおいて、コンポーネントを描画した結果、描画以外に起こることすべてを「副作用」と呼びます。この副作用を扱うuseEffect()というフックを解説します。
第6回 Hooksの仕組みを知る
useState()関数を例に、Hooksという仕組みについて解説します。フックの仕方によっては、処理に無駄が生じる可能性もあるため、その最適化に役立つ「メモ化」という概念も解説します。
第5回 コンポーネントでアプリを組み立てる
これまでのコンポーネント作成の知識を使って、実際にモックからアプリケーションを実装してみます。コンポーネントの切り分けから組み立てまでフローのポイントがわかります。
第4回 コンポーネントの描画と更新
コンポーネントの描画とデータの更新を中心に、コンポーネントの組み立てをさらに深く解説します。
第3回 CSSとの付き合い方
コンポーネントに対してCSSをどのように適用するかについては、さまざまな方法があります。ここでは4つの方法と、そのメリット・デメリットを解説します。
第2回 コンポーネントの基本
コンポーネントの記述の基本を解説します。コンポーネントを作るルールと、JSXの記述方法をしっかり押さえることがポイントになります。
第1回 Preactの特徴
PreactはReactとほぼ同等の機能を持ち、Reactよりもさらに軽い動作が期待できるUIライブラリです。第1回目はReactとの関係性とPreactの導入について解説します。