お手軽React開発のテンプレを作りました
SPAを最速で作り始めたい！
結果的にはこちらを作りました。 よければ使ってください。
react-template
セールスポイント
- 取り込んで2コマンドで動きます。
npm i npm run start
- typescript / eslint / prettier とオススメの作法を詰めておきました。
- importパスのエイリアスがすでに設定してあります。
- CSSも読めるようにしておきました。
- キャッシュバスターも入れておきました。
なぜ作ったか？
前回に続き、初学者向けの内容です。
▼前回はこちら
Reactと言えば、SPA（だと思っている）
静的アセットのホスティングのみで動作しPWAへの展開も迅速におこなえる、何より開発がシンプルで、BFFによる債務分割でUI/UXに集中できるフロントエンドエンジニアとして最高の開発環境がSPAではないでしょうか？
開発着手に時間がかかるReact SPA
前述の通り、SPA自体は作業が始まれば非常に手が早く動く開発手法かと思いますが、Reactにおけるその環境構築はなかなか手がかかります。
よいフレームワークが見当たらない
React自体はレンダリング部に注力したパッケージであることが利点ですが、書き始めにWebpack等トランスパイルの環境を整えていく必要があるため、初学者はまずここで心が折れます。
最近ではNext.jsなども流行っており、もはやReact公式のチュートリアルもこちらに頼ってきているのですが、こちらはSPAを書くのには正直適していませんでした。
Next.jsの強みはSPAではない
- 静的コンテンツの生成が可能
- 例えばブログなど、ビルドタイミングでAPIを実行し、JSファイルにコンテンツごと書き出すことができます。
- SSRに向いている
- Amazon Amplifyでも動きますが、Next.jsだと「サーバーサイドレンダリング」というオプションが勝手に付きます。
Amplify Hosting を使用したサーバーサイドレンダリングアプリをデプロイ - AWS Amplifyホスティング
今回のテンプレについて
今回は書き始めるときの作法だけ統一できればと思い、React開発でよく使う多くのパッケージを割愛しました。なので、おまけとしてこちらでいくつかのパッケージを紹介しておこうと思います。
今回含まれないメジャーどころ
自身がReact開発をおこなう際、ほぼ以下のようなパッケージを用いています。用途次第ですが、知れば開発しやすさが変わるものばかりなので、列挙しておきます。
styled-components
導入難易度: 低
ReactのJSX構文でのスタイル指定はlowerCamel化したオブジェクト書式に書き換えが必要です。こちらを取り込むと、コンポーネント内にCSS表記をそのままおこなえるので、ブラウザやデザインツールからのCSSコピーが捗ります。
// style="color: #333333; font-size: 16px; font-weight: bold"
const style = {
color: '#333333',
fontSize: 16,
fontWeight: 'bold',
}
react-router
導入難易度: 中
画面遷移を再現するパッケージです。 内部的にはコンポーネントの表示・非表示をURLと紐つけて管理してくれるような仕組みになっており、ブラウザヒストリーの管理も併せて行ってくれます。
react-redux / redux-saga
導入難易度: 高
Reactのstateはコンポーネント内で完結してしまいますが、react-reduxは横断で参照できるstoreを用意し、ページを跨いで状態管理を可能にすることができます。
グローバルなstateを持てる、くらいの感覚です。
上記とredux-sagaを併せて用いることで、state更新に関わるアクションを非同期、または並列に実行します。
例えば、以下のような連続的な作業を簡単に書くことができます。
- ローダーを表示する - API①を実行する - API②を実行する - API①、②ともに成功したらstoreを更新する - ローダーを閉じる
総括
Reactはフレームワークではありません。Next.jsのような一揃いのフレームワークに比べて初期導入が困難になりがちではあると思います。
ただし債務が明瞭なおかげで、ルーティングやグローバルの状態管理、それぞれのアップデートやテストについても個別で検討することができ、慣れれば技術追従が非常に楽になってくると思います。
今回は最低限の雛形を用意することで唯一の難点であった導入ハードルを下げることができれば、と思い記事を書きました。
またアップデート要望や記事への指摘などあれば、コメントいただければと思います。
