概要
Web アプリを作成するとき、皆さんは何のプログラミング言語、何のライブラリ、何のフレームワークを利用していますか?
私の場合、プログラミング言語は TypeScript で、ライブラリだと React、フレームワークだと Next.js といった、もっぱら React 関係を触っています。
React はとても人気のあるライブラリで、とても汎用性がある一方、エンジニアの方次第で何でも自由にできてしまうので、アプリ管理や運用周りはしっかり考えて行う必要があります。
今回は簡単なプロトを作る予定だが、本番環境を意識した構成にしておきたいけど一から考えると大変…といった場合もあるかと思います。
今回はあらかじめ構成などきっちり決められていたり、自動テストを見越した構成がすでにあったほうが嬉しいという方にとっては、今回の記事は朗報かもしれません。
今回は React アプリで本番環境を意識した構成をはじめから提供してくれる OSS「Bulletproof React」を紹介します。
こちらは GitHub からリポジトリをクローンしてくるだけで、本番環境を意識した React の構成が用意されています。
それではさっそく利用手順など見ていきましょう!
利用手順
利用するにあたり、要件を満たしていることが必要です。
- Node 14+
- Yarn 1.22+
利用方法は README をなぞるだけですが、以下のコマンドを打って GitHub からリポジトリをクローンしてくるだけです。
git clone https://github.com/alan2207/bulletproof-react.git
リポジトリをクローンし終えたら、bulletproof-react
ディレクトリへ移動し、.env.example
を .env
という名前でコピーし、必要な Node モジュールをインストールします。
cd bulletproof-react cp .env.example .env yarn install
Node モジュールのインストールが完了したら、以下のコマンドで動作確認してみましょう!図のような画面が表示されれば成功です!
yarn start
使用感
実際に自分も試してみました!
リポジトリをクローンしてみてフォルダ構成を見てみたのですが、本番環境を意識したと謡っているいるだけあって、とても整理整頓されている感じがしました。
また、リポジトリ内にはデフォルトで Storybook が用意されていたり、jest の用意がされていたりと、まさに React で Web アプリ開発を行う際に入れておきたいライブラリがたくさんあります。
これまで私は React で Web アプリを作成するときは、いちいち自分でライブラリ選定して導入して動作確認して…という手順を行っていたのですが、こちらの OSS を利用すればそのような煩わしい作業がいらなくなりますね!
そのほかにも、API の扱い方が整理されていたり、エラーハンドリングの設定まで初めから用意されているようなので、しっかり React で Web アプリ開発を行っていきたい方たちにとって、とてもうれしい OSS かと思います。
まとめ
今回は React アプリで本番環境を意識した構成をはじめから提供してくれる OSS「Bulletproof React」を紹介しました。
しっかり本番環境を見据え、React で Web アプリを始めたい方たちにとっては、とても参考になり嬉しい OSS かと思いました。
また、こちらの OSS の構成やどのようなライブラリを利用しているのかを見てみるだけでも、今後の React アプリの開発や運用においてとても役立つと思いました。
自分もまだまだ React を勉強する実ですので、こちらの OSS の構成やライブラリ情報を参考にしながら、さらなる知識を身に着け、よりよいソフトウェアエンジニアとして成長していきたいと思いました。
React で Web アプリを開発しようとしている方にとっても、React のフォルダ構成をどのようにしようか参考にしたい方にとっても、とても有益な OSS かと思いますので、ぜひ一度ご覧になってみてはいかがでしょうか。