🐷
React 初心者にやさしいプロジェクトの実装方針を考えてみた
はじめに
地図パズル製作所の都島です。現在 Laravel + React で中規模のウェブサービスを構築中で、フロントエンドの基礎部分の構築をさせてもらいました。私も React を勉強中なのですが、大人数のプロジェクトになると困るのが、スキルレベルが人によってバラバラ、ということかと思います。それで、React 初心者にもやさしいプロジェクトの実装方針、利用するライブラリを考えてみました。
方針
全体方針
React 初心者の方でも参加しやすいプロジェクトを目指します。ベストプラクティスと言われるものでも、難しいものは使いません。ルーティングについては React Router を利用します。API への接続については、OpenAPIのYAML で API を定義し、Orval でクライアント側のコードを生成して、利用します。
はじめて React を使う方にお願いしたいこと
忙しくてドキュメントを読む暇などないと思われる方も多いと思いますが、以下のチュートリアルはぜひお読みください。一日あれば読み通せると思います。
利用するライブラリ
React に加えて、以下のライブラリを使いますので、必要になったときはドキュメントをお読みください。
- React Router（ルーティング）
- React Hook Form（フォームのバリデーションに利用）
- Yup（フォームのバリデーションに利用）
- Orval（OpenAPI の YAML からクライアントサイドのコードを生成するのに利用）
- Prism（OpenAPI の YAML からモックサーバーを起動します。）
詳細な方針
- TypeScript のスタイルガイドに従ってコーディングしてください。
https://typescript-jp.gitbook.io/deep-dive/styleguide - コンポーネントは関数コンポーネントで作成します。
- React が提供しているフックは useState、useEffect、useRef を使えばたいていのことは実現できると思いますので、これ以外のものはなるべく利用しないでください。
- カスタムフックは積極的に作成してください。
- ページ間でステートを保持しないといけないような状況はあまりないので、状態管理用のライブラリは入れません。
- css はグローバルスタイルという方法を用います。React ではあまりいい方法ではありませんが、はじめての方にはわかりやすいと思います。
- jQuery を入れたくなると思いますが、jQuery は入れないようにしてください。
- document.getElmentById などを使いたくなることもあると思いますが、なるべく避けてください。DOM の情報を取得したい場合は、useRef を用いてください。
- バックエンドが出来上がるのを待たず、モックサーバーを利用してフロントエンドの実装をどんどん進めてください。
終わりに
ということで、今日は React 初心者もいるプロジェクトの実装方針を考えてみました。個人的な意見もたくさん入ってしまっていますが、すみません！間違っている点などありましたら、ぜひコメントで教えてください！
ということで、最後に私が以前 React で作った地図パズル製作所の URL を載せておきます。ぜひ、やってみてください！！
Discussion