kakakakakku blog

Weekly Tech Blog: Keep on Learning!

React-Admin を1時間で速習できる!React-Admin Tutorial

React-Admin を使うことになるかもしれず,今まで使ったことがなかったので,まずは「React-Admin Tutorial」を試してみた❗️React-Admin を使ったフロントエンドの実装と基本的な仕組みを速習できて良かった💡おすすめ \( 'ω')/

ちなみに 30 minutes tutorial って書いてあるのは速すぎると思う😅コードを読みながら進めたり,気になった部分をドキュメントで調べながらだと普通に1時間以上かかった〜

marmelab.com

React-Admin Tutorial 実施ログ

React-Admin Tutorial の実施ログを抜粋してまとめておく📝

まず,npm init react-admin test-admin コマンドを実行してプロジェクトをセットアップする.そして npm run dev コマンドを実行すると,すぐに React-Admin の初期画面が表示できる👌

React-Admin 初期画面

React-Admin Tutorial ではバックエンド API として JSONPlaceholder/users API と /posts API を使う.

jsonplaceholder.typicode.com

セットアップ時にデータプロバイダーも作られていて,すぐに API を呼び出せる.そして動作確認用の ListGuesser コンポーネントを追加したら,すぐに Users 一覧画面を実装できた.その後は Datagrid コンポーネントなどを使って一覧画面をカスタマイズしていく❗️

marmelab.com

marmelab.com

Users 一覧画面

次に Posts 一覧画面を実装するときに ReferenceField コンポーネントが出てくる📝簡単に言うとリソース間の参照をしてくれて,今回だと Posts.user_idUsers.id に紐付けてくれる🔗 便利だ〜

marmelab.com

そして Create コンポーネントと SimpleForm コンポーネントを使って Posts 登録画面も簡単に実装できた.ちなみに React-Admin では「楽観的アップデート (optimistic updates)」という仕組みがあって,Save ボタンを押してから数秒後に API が呼び出されると書いてあった💡そして数秒以内であれば取り消すこともできる.Gmail の 元に戻す に似てる〜

marmelab.com

marmelab.com

Posts 登録画面

後半では Posts 一覧画面に検索とフィルタを実装したりもする🔎

Posts 一覧画面(検索とフィルタ)

終盤ではログイン画面も作る🔑今回は localStorage に設定する超簡易的な仕組みだけど,React-Admin には Auth0 / Amazon Cognito などの Auth Provider もあるから柔軟に実装できそう.

marmelab.com

ログイン画面

まとめ

「React-Admin Tutorial」は1時間ぐらいで React-Admin を速習できる素晴らしいコンテンツだった❗️基本は理解できたので,あとは他のドキュメントも読みつつ実装していこうと思う.ちなみにドキュメントに Beginner Mode というトグルがあるのもよく考えられていて良いな〜と思った👏