#フレームワーク

129 件の記事

ReactでTodoアプリを作る #5 永続化と締めくくり
読了 9分

ReactでTodoアプリを作る #5 永続化と締めくくり

localStorageでデータを永続化してリロードしても維持されるように仕上げます。シリーズ全体を振り返りながら次のステップも案内します。

ReactでTodoアプリを作る #4 編集機能
読了 9分

ReactでTodoアプリを作る #4 編集機能

項目をダブルクリックするとインライン編集モードに入り、Enterで保存 / Escapeでキャンセルする編集機能を作りながらuseRefも初めて使ってみます。

ReactでTodoアプリを作る #3 フィルタリング
読了 6分

ReactでTodoアプリを作る #3 フィルタリング

全部 / 未完了 / 完了フィルタを追加し、完了項目の一括削除のような一括処理機能まで作ってみます。

ReactでTodoアプリを作る #2 完了トグルと統計
読了 6分

ReactでTodoアプリを作る #2 完了トグルと統計

各項目にチェックボックスをつけて完了をトグルし、視覚的に区別し、残り/全件数を表示する統計を追加します。

ReactでTodoアプリを作る #1 開始と追加/削除
読了 7分

ReactでTodoアプリを作る #1 開始と追加/削除

基礎講座で学んだReactで本物のTodoアプリを作ってみます。最初の記事は要件定義、コンポーネント設計、そして追加/削除機能までを作ってみます。

React基礎講座 #15 ルーティング概要 (React Router)
読了 11分

React基礎講座 #15 ルーティング概要 (React Router)

SPAのルーティング概念とReact Routerの基本的な使い方、動的経路/ナビゲーション/ネストルートまでを一度に見ていきます。

React基礎講座 #14 パフォーマンス最適化 (memo / useMemo / useCallback)
読了 9分

React基礎講座 #14 パフォーマンス最適化 (memo / useMemo / useCallback)

React.memo、useMemo、useCallbackを使ったパフォーマンス最適化の方法と、これらのツールをいつ使うべきで、いつ使うべきでないかを整理します。

React基礎講座 #13 カスタムフック
読了 8分

React基礎講座 #13 カスタムフック

コンポーネント間でロジックをエレガントに共有するツール、カスタムフックの作り方とよく使われる例を見ていきます。

React基礎講座 #12 useContext
読了 7分

React基礎講座 #12 useContext

prop drilling 問題を解決するツール、React Context API と useContext フックの使い方を学びます。

React基礎講座 #11 stateのリフトアップ (lifting state up)
読了 8分

React基礎講座 #11 stateのリフトアップ (lifting state up)

2つの兄弟コンポーネントが同じデータを共有する必要があるときに使う中核パターン、stateのリフトアップを学びます。

React基礎講座 #10 useEffect
読了 10分

React基礎講座 #10 useEffect

コンポーネントの外部とインタラクションするside effectを扱う標準ツール、useEffectフックの動作とよくあるパターンを見ていきます。

React基礎講座 #9 フォームの扱い (controlled inputs)
読了 9分

React基礎講座 #9 フォームの扱い (controlled inputs)

Reactでフォームを扱う定石パターンであるcontrolled component、そしてtextarea/select/checkbox/radioなど様々な入力要素の扱い方を整理します。