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の導入について解説します。