React Hooksを活用してクリーンなコードを目指す

Reactに関するHooks系の記事を最近書いてなかったので書いておこうと思う。 Componentとmoduleの分離 Reactに処理を書く時、以下のようなかたちで書くことが多いと思う。(自分もそのうちの一人だった) Component.tsx import React, { useState } from…

Next.jsでHighChartsを使用する

チャート系のパッケージは多数存在しているが、やはりGoogleやMicrosoftが使用しているHighchartsが安定している。 近年ではUberのチャートreact-visなんかも存在しており、React Componentベースで実装されていてよいが、まだ公式がTypeScriptに対応しきれていない(有志で.d.tsファイルを提供してもいるが)ので無難にHighchartsを使用するのがよいという印象。 公式がReactをサポートしているのでnpmパッケージをプロジェクトにインストールして使用する highcharts-react-official $ npm install highcharts highcharts-react-official…

FowardRefを理解する

FowardRefとは 結論から言えば、FowardRefは親から子のコンポーネントのRef参照時に使用します。 よくあるパターンとして再利用可能なコンポーネントに対してRefを付与したい場合などに使います。 そもそもこのFowardRefとは何なのか? Fowardは「転送」という意味になっており、Fowarding、進行形で「転送する」という意味になります。 Reactにおいては、コンポーネントを通じてその子コンポーネントのひとつにrefを渡すテクニックになります。通常どおり、propsとしてrefを付与すれば参照できると思われますが、Reactの仕様上、親から子のfunctionコンポーネントをprops形式で渡してrefで参照することができないようになっています。そのため参照したい場合は子コンポーネント内でfowardRefを使用する必要があります。 実際、子コンポーネント内でfowardRefを使用せずに親から子のfunctionコンポーネントにrefを付与し、参照しようとすると以下のようなエラーがでます。 Warning: Function components…

ReactのRef属性でDOMをコントロールする

RefはDOM操作に役立つReactのAPIです。Hooksで追加されたのがuseRefになります。 基本的にReactでDOM操作を行おうと思ったとき、ピュアJavaScriptのdocument.getElementById、document.querySelector系のAPIは使用できません。というよりもidを使用すること自体がNGです。 idをもつということはReactが最終的なbundle.jsとして吐き出した際に、idが重複したものが出力される可能性があるためです。そういったことからidの使用はアンチパターンといえます。 そこでReactでは代替えとしてref属性からDOMを参照し、操作を行うことができます。 Ref属性とは そもそもこのRefとは何?という人のために解説。 reference a DOM リファレンス(参照)という名前から命名されており、…

ReactHooks + Context API によるReduxの実装

ContextAPIとReactHooksを使用することによってRedux同様にstateを一限管理することが可能です。 しかしながら、あくまでReduxに似せているだけであり、まったくの別物です。また、Reduxとのそのもそものコンセプトが違っています。Reduxを採用するのかReactHooks + Context APIを使用するのかはプロジェクトで適宜考えてください。 自身が使った所感としてはReactHooks + Context APIで実装するとコンポーネントが独立し、よりReactらしいコードを書くことができる、Reduxのように複数のファイルを管理する必要がないため少ないファイル数とコードで済ませたい場合などに向いているように思います。 実装…

Reactコンポーネントと上手に付き合うコツ

TypeScriptとFunctionComponentを使用する ファイル名ディレクトリ構成は明確にする コンポーネントは独立させる Importを絶対パスにする TypeScriptとFunctionComponentを使用する まずはじめに、Reactを使用する上でTypeScriptも使用することを推奨します。 その理由としてはReactとTypeScriptの相性がよく、コンポーネント設計の際にinterfaceを使った方がpropsの型が明確になるため、より見通しのよいコードを書くことができます。 tsxとtsxの比較を見てみましょう jsx const…
1 2 3 4