JS

JavaScriptに関する記事をまとめています。

JS

React Component間の状態管理をContextで解決する方法を理解する #9

複数のComponents間に渡るような状態管理をする場合、Component間でpropsを渡していけば、状態管理はできるものの、props chainが長くなるほどコードをメンテするのが大変になります。本記事では、なぜContextが必要になるかを図を用いて解説した後、Contextを使った方法を見ていきます。
JS

React hook useReducerの使い方を理解する #8

useReducer Hookの使い方について紹介していきます。状態管理は、useStateを用いて行うことができますが、より複雑な状態管理を行う場合の選択肢としてuseReducerを利用することができます。
JS

React カスタムフック(Custom Hook)の使い方を理解する #7

React カスタムフック(Custom Hook)の使い方について解説します。Reactでは独自のhook(関数)を作ることができます。カスタムフックを作ることで、複数の箇所で再利用することができます。カスタムフックの作り方と、それを利用する方法を紹介し、利用前と後の違いを見ていきます。
JS

React hook useEffectの使い方を理解する #6

useEffectについて紹介していきます。副作用(side Effect)について触れた後、例を用いてどのように働くかを紹介していきます。useEffectを使用する前と後での挙動の違いを解説していきます。また依存関係がある場合とない場合についても触れていきます。
JS

React アプリ デバッグ方法を理解する #5

React アプリでデバッグする方法を紹介致します。コンソール上での確認方法やブレークポイントの設定、React Developer Toolを使ったデバッグ方法を簡単に解説しています。
JS

React 条件分岐によるComponent表示切り替え方法を理解する #4

Reactにて条件分岐による表示内容(component)の切り替え方法を紹介致します。条件分岐による切り替え方法には、三項演算子や関数定義を使う方法などがあります。本記事ではボタンによる画面表示内容の切り替えを例に紹介していきます。
JS

React hook useStateの使い方を理解する #3

Event HandlerとuseStateについて紹介していきます。ユーザーがボタンを押下する、何か画面に入力するなどの操作をトリガーとして、定義したイベントを実行する仕組みになります。useStateと組み合わせて使うことがあるため、一緒に紹介します。
JS

React propsを使ったデータの渡し方を理解する #2

Reactにてpropsの基本的な使い方を紹介致します。propsはcomponent間でデータを渡す上で必要な概念になります。propsを使うことで、文字列、数字、オブジェクトを渡すことができます。また関数(function)をポインターとして指し示すこともできます。
JS

React入門 React プロジェクトの始め方 #1

React プロジェクトを開始するにあたって、最初に知っておきたいことを簡潔にまとめました。ReactはJavaScriptライブラリであり、ユーザーインターフェースを構成することができます。ReactではComponentの概念が欠かせません。またJSXコードを理解しておく必要があります。
JS

Next.jsで複数画像をpreview表示してuploadする方法

本記事では、ファイルのstorage(保存先)として、Firebase storageを利用します。今回、複数のファイル(画像)をまず画面にpreview表示して、表示した複数の画像をFirebase storageへuploadする方法を紹介致します。