「現場で役立つ！ React向けライブラリ詳説」連載一覧
-
2022/04/15ドラッグ＆ドロップで簡単にファイルが選択できる「react-dropzone」を解説
入力フォームを作成する中で、テキストや日付ほどではないものの頻出するパターンとして、ファイルアップロードのためのファイル選択があります。input要素を手作業で設定しても最低限のものは作れますが、ライブラリを使うことでドラッグ＆ドロップによるリッチなファイル選択UIも実装できます。今回はその一例として、react-dropzoneについて解説します。
-
2022/01/26React向けUIライブラリ「Chakra UI」で、より複雑なアプリケーションを作る際に必要なコントロール用のUI【後編】
前回はGUIの基本的な構成要素である、レイアウト、テキスト表示、画像表示に関するChakra UIのコンポーネントについて解説しました。今回はもう少し複雑なアプリケーションを作る際に必要となる、各種コントロール用のUIについて解説していきます。
-
2021/11/26カスタマイズ性と生産性を両立する、React向けのUIライブラリ「Chakra UI」の魅力的な部品【中編】
前回はChakra UIのどんな特性が生産性に寄与しているのかを解説しました。今回はReact向けのUIライブラリとしてのChakra UIに、どんな部品が用意されているのか見ていきます。実用的な多くのコンポーネントやHooksは、きっとWebアプリケーションを組み上げる際の助けとなることでしょう。
-
2021/10/08ReactのUIコンポーネントライブラリ「Chakra UI」とは？ カスタマイズ性と生産性を両立しよう【前編】
UIをコンポーネント化（画面部品化）して、再利用性を高められるのは、Reactの大きな特徴のひとつです。この特徴を活かして、統一されたデザインを持ち、カスタマイズ性にも優れたUIライブラリが、数多く提供されています。本記事では、特に生産性とカスタマイズ性にフォーカスして作られた、Chakra UIというライブラリについて解説します。
-
2021/08/17Reactで簡単にマテリアルデザインを実現できるライブラリ「Material-UI」を解説【後編】
UIをコンポーネント化（画面部品化）して、再利用性を高められるのは、Reactの大きな特徴のひとつです。この特長を活かして、統一されたデザインを持ち、カスタマイズ性にも優れたUIライブラリが、数多く提供されています。今回は、前回に引き続きMaterial-UIについて解説します。かゆいところに手が届く便利なコンポーネントを見ていきましょう。
-
2021/06/14綺麗なコンポーネントを容易に導入できるMaterial-UIを紹介【前編】
UIをコンポーネント化（画面部品化）して、再利用性を高められるのは、Reactの大きな特徴の1つです。この特徴を活かして、統一されたデザインを持ち、カスタマイズ性にも優れたUIライブラリが、数多く提供されています。本記事では、Googleが公開している「マテリアルデザイン」というガイドラインに従ってデザインされた、Material-UIというライブラリについて解説します。
-
2021/04/12React Hooks向けライブラリSWRとは？ 通信とキャッシュ管理を簡便に
Reactを使ってアプリケーション開発をしていく上で、JavaScriptによる通信の取り回しのよさや、通信結果のキャッシュをどう管理していくかは、重要な関心ごとです。今回は、通信とキャッシュ管理に特化したReact Hooks向けライブラリである「SWR」について解説します。
-
2021/02/12フォームのバリデーションに役立つYupとは？ React向けライブラリを解説
前回に続いて、ブラウザアプリケーションの基本にして王道であるフォームを題材にします。今回は入力値のバリデーションを担当するライブラリとして、Yupについて解説します。入力欄1つひとつにバリデーションルールを定義する作業は、通常であれば面倒なものですが、Yupを使うとスッキリと定義できます。
-
2020/12/07React向けライブラリを解説～フォームの状態管理を助けるFormikとは？
昨今、WebアプリケーションのフロントエンドをReactで作成する機会は少しずつ増えてきました。Reactそのものは状態管理とUIを効率的にひもづけるためのフレームワークですが、その周辺には、複雑な状態管理を効率化するライブラリやきれいなUIを提供してくれるライブラリなど、魅力的なライブラリが数多く存在しています。本連載では、そんなライブラリを1つずつ、実例を添えて解説することで、現場で課題に出会った際に適切なライブラリを選択できる力を養います。第1回となる今回は、入力フォームについて扱います...
