Reactプロジェクトに簡単にドラッグ＆ドロップ機能を実装する方法をご紹介します。 近年ではスマホ、タブレットの普及によりドラッグ＆ドロップを使ったUIを実装する機会が増えています。 しかしながら０から実装するには座標の […]
Tips
Reactプロジェクトに最速でドラッグ＆ドロップ機能を実装する【react-beautiful-dnd】
React
Tips
TypeScriptとは？JavaScriptへの変換方法やReactへの導入を解説【tsconfig.json, コンパイル】
「JavaScriptはある程度使えるようになったけどTypeScriptも勉強しようか迷っている」「TypeScriptの基本は勉強したけど、結局何をしているかイメージしきれていない」「TypeScriptは玄人のエン […]
Tips
Reactでコンポーネントがレンダリングされない例を紹介【keyで解決できるよ】
「propsで違う値を渡しているはずなのにコンポーネントに更新が走らない」「Reactのレンダリングがイマイチ理解できていない状態で開発している」「mapでkeyを書き忘れると警告文が出ることがあるが、何のためにkeyが […]
Tips
Reactのchildrenが何のことかわからない時に見るやつ
Reactを使っていると「children」という言葉を見かけることがありますが、その意味や使い方が分からないことはありませんか？ この記事では、Reactのchildrenについて簡単に解説していきます。 childr […]
Tips
【TypeScript】Reactのchildren,propsに型を指定する方法
TypeScriptで型指定をすることで開発中に発生するエラーやバグを事前に防ぐことができ、より安全で信頼性の高いコードを作成することができます。 今回は、TypeScriptを使ってReactアプリケーションを開発する […]
Tips
React Emailを使ってメールのひな型(テンプレート)を作る方法
React Emailは、メールの作成を簡単かつ効率的に行うためのReactのライブラリです。 WebサイトやWebアプリで自動送信メールをつくるときにテキストのみの無機質な文面よりは、ＬＰのようなスタイルでユーザーの興 […]
Tips
Reactのカスタムフックとは？作り方や使い方を初心者向けに解説
「Reactを勉強し始めたけど全体の仕組みがイマイチわかっていない」「フックと言われても何のことか理解できずに学習を進めている」「カスタムフックについてはスクールや学習教材では習わないから困っている」 本日はそんな方に向 […]
Tips
なぜか効かない？ReactにおけるCSSの書き方の基本！module.cssが適用されない問題も解説
「普通にCSSを書いているのに何故かスタイルが適用されないことがある」「Reactって結局CSSをどのファイルに書くべきなのかがピンときていない」「〇〇.cssと〇〇.module.cssって何が違うのかわからない」 本 […]
Tips
react-draft-wysiwygを使ったエディタの作り方とカスタマイズの方法
Reactでリッチテキストエディタを実装する場合、react-draft-wysiwygという便利なライブラリがあります。 react-draft-wysiwygはDraft.jsというライブラリをベースに作られていてテ […]
Tips
【React】mapで配列データの中身がないときは非表示にする方法【length】
Reactでリスト表示をする際に、配列データが空であるならリスト自体を表示しない作り方をすることがあります。 しかし初学者向けの学習教材やYoutube動画で紹介されている方法の中には、実務では使えないものがあり今回は実 […]