背景
- フロントエンド開発でモダンなフレームワークとして有名なReactがあります。
React
のプロジェクトを作成&起動する際にはパッケージマネージャーであるnpmかyarnを使用することが多くあります。- パッケージマネージャーごとに起動コマンドは異なりますが、記事によってはコマンドがごちゃ混ぜで紹介されている記事も散見されました。
- また、
Docker
でReact
の環境構築方法を紹介している記事もたくさんありましたが、Dockerfile
にReact
のプロジェクトの起動コマンドが記載されており、初見ではよくわからない記事が多くありました。 - そこで、
React
プロジェクトの起動&作成はDocekr
の内部に入ってから行う方法をベースに、それぞれのパッケージマネージャーごとのReact
の起動方法を整理して紹介したいと思います。 - 記事の文章量が多くなりすぎるので、実際のやり方は別記事を作成していますので、そちらを参照してください。この記事は、
React
の起動方法について整理して理解することを目的に執筆しています。
目標
npm
とyarn
でReact
でのプロジェクトを作成&起動の種類を知る。
Reactのプロジェクトの起動&作成方法について
React
のプロジェクトを作成する際には、create-react-appというコマンドを使用するのが一般的です。- この
create-react-app
コマンドを使用して、React
のプロジェクトを作成する際に、雛形としてプログラムの言語をJavaScript
かTypeScript
に設定することができます。 - 正確には、デフォルトでは
JavaScript
でプロジェクトが作成され、コマンドにオプションをつけることで、TypeScript
でプロジェクトを作成することができます。 - 以上を踏まえると、「
React
のプロジェクトの起動&作成方法」は以下の4パターンになります。npm
を使用するパターンyarn
を使用するパターンyarn
でJavaScript
を使用してReact
プロジェクトを作成する方法yarn
でTypeScript
を使用してReact
プロジェクトを作成する方法
- 上記の実際の構築方法については、リンク先の別記事を参考ください。(リンクがない記事は現在作成中です)
結局一番使用する方法は何か?
React
のプロジェクトの方法を4つ紹介しましたが、実際に使用するのはTypeScript
でプロジェクトを作成する2つの方法だと思います。TypeScript
とJavaScript
の大きな違いは、静的型付けの有無(JavaScript
に静的型付け機能を追加したのがTypeScript
)ですが、基本的に型が決まっている方が、スクリプトは安定して挙動しますし、複数人で開発する時にも間違いが少なくなります。- 上記のような背景から、基本的に現状新しくフロントの開発を行う際は、
TypeScript
を使用するのが無難であるため、TypeScript
を使用する方法しか使わないようにした方が良いと考えています。
参考資料
![](https://takuma-tech.com/wp-content/uploads/cocoon-resources/blog-card-cache/33e97d6ae659d17ac017e6bb210395a9.png)
React – ユーザインターフェース構築のための JavaScript ライブラリ
ユーザインターフェース構築のための JavaScript ライブラリ
![](https://takuma-tech.com/wp-content/uploads/cocoon-resources/blog-card-cache/13b44a77bc1d6983ae57464406c45b68.png)
npm | Home
![](https://takuma-tech.com/wp-content/uploads/cocoon-resources/blog-card-cache/284e55aa14f994afb4c9eef5861cab5d.jpg)
【React】create-react-appで新規プロジェクトを作成
![](https://upload.wikimedia.org/wikipedia/commons/thumb/4/4c/Typescript_logo_2020.svg/640px-Typescript_logo_2020.svg.png)
TypeScript - Wikipedia
Qiita記事
![](https://qiita-user-contents.imgix.net/https%3A%2F%2Fcdn.qiita.com%2Fassets%2Fpublic%2Farticle-ogp-background-412672c5f0600ab9a64263b751f1bc81.png?ixlib=rb-4.0.0&w=1200&mark64=aHR0cHM6Ly9xaWl0YS11c2VyLWNvbnRlbnRzLmltZ2l4Lm5ldC9-dGV4dD9peGxpYj1yYi00LjAuMCZ3PTk3MiZoPTM3OCZ0eHQ9JTIwJUUzJTgwJTkwJUU3JTkyJUIwJUU1JUEyJTgzJUU2JUE3JThCJUU3JUFGJTg5JUUzJTgwJTkxUmVhY3QlRTMlODElQUUlRTMlODMlOTclRTMlODMlQUQlRTMlODIlQjglRTMlODIlQTclRTMlODIlQUYlRTMlODMlODglRTQlQkQlOUMlRTYlODglOTAlMjYlRTglQjUlQjclRTUlOEIlOTUlRTYlOTYlQjklRTYlQjMlOTUlRTMlODElQUIlRTMlODElQTQlRTMlODElODQlRTMlODElQTYlMjAlRTMlODAlOUNucG0lRTMlODMlQkJ5YXJuJTIwJTI2JTIwSmF2YVNjcmlwdCVFMyU4MyVCQlR5cGVTY3JpcHQlRTMlODAlOUMmdHh0LWNvbG9yPSUyMzIxMjEyMSZ0eHQtZm9udD1IaXJhZ2lubyUyMFNhbnMlMjBXNiZ0eHQtc2l6ZT01NiZ0eHQtYWxpZ249bGVmdCUyQ3RvcCZzPWYzMDIyODAwNGY1MDU1YmUxNTIwNDE0MmUwMjAzNzhl&mark-x=142&mark-y=57&blend64=aHR0cHM6Ly9xaWl0YS11c2VyLWNvbnRlbnRzLmltZ2l4Lm5ldC9-dGV4dD9peGxpYj1yYi00LjAuMCZoPTc2Jnc9NzcwJnR4dD0lNDB0YWt1bWEtMTIzNCZ0eHQtY29sb3I9JTIzMjEyMTIxJnR4dC1mb250PUhpcmFnaW5vJTIwU2FucyUyMFc2JnR4dC1zaXplPTM2JnR4dC1hbGlnbj1sZWZ0JTJDdG9wJnM9YTVkMTYzMDdjYjFlZmIwODlmZmY2YjRkMDVkYjZjNDk&blend-x=142&blend-y=486&blend-mode=normal&s=da0c2b9453c5f9f5693be0de1961516f)
【環境構築】Reactのプロジェクト作成&起動方法について 〜npm・yarn & JavaScript・TypeScript〜 - Qiita
背景フロントエンド開発でモダンなフレームワークとして有名なReactがあります。Reactのプロジェクトを作成&起動する際にはパッケージマネージャーであるnpmかyarnを使用することが多くあり…