【React＆TypeScript入門】TypeScript, Next.js,MUIで爆速環境構築

この記事の狙い

本記事では、下記のあたりをターゲットに爆速で環境構築しています！
アプリ開発の環境を作って一緒に動かして見ましょう〜

Reactの概要理解
TypeScriptも一緒に使ってみる
アプリ開発現場でよく使うフレームワークやライブラリの把握
アプリ開発がスタートできる環境

エンジニア１

アプリを自分で作って見たいけど、なんだか難しそうだよね？〜

エンジニア２

そうそう、難しいと途端に眠なってしまうんだよ〜

３丁目オーナー

そうじゃな！では今日は緑男に説明してもらおうじゃ♬

緑男

ふむふむ、一緒にReact＆TypeScriptの爆速環境構築を見ていこうか♪

本記事では、VSCodeや他のエディターが入っている前提となっております。
もし入れていない場合は、下記の記事が参考になりそうです。

【プログラミング完全入門】必ず使う最低限必要なツール紹介！

エンジニアが必ず使っている！プログラミングに必要な必須ツールを紹介します！効率的な開発を行うための必ず必要です。これで基礎的な環境と費やす時間が大幅に短縮されます。ツールの選択と使い方によって、プログラミングの品質と効率を大きく向上させることに期待できます

Reactについて
1. 概要
2. 実際どのくらい使われているの？
Reactとの相性の良い組み合わせ
React（TypeScript, Next.js）の導入
Material UIの導入
1. 導入手順
2. 使い方
さいごに

Reactについて

筆者がReactに出会ったのは数年前（2018年頃）
その頃は、まだあまり案件も少なくVue.jsと二分していた時期と思います。

概要

モダンなWebアプリケーションの構築において非常に人気のあるライブラリ。
Reactの主な目的は、UIを効率的かつ簡潔に構築することであり、コンポーネントベースのアーキテクチャと仮想DOMの利用により、開発者は再利用可能なコンポーネントを作成し、コンポーネント間のデータフローをシンプルに管理することができます。

コンポーネントベース
- Reactでは、UIを独立した再利用可能なコンポーネントとして構築し
  これにより、UIを機能ごとに分割し、効率的な開発と保守が可能になる
仮想DOM
- React仮想DOM（Virtual DOM）を使用して高速かつ効率的なUIの更新を実現する
  仮想DOMは、ブラウザの実際のDOMと同期し、必要な箇所のみを効率的に更新することでパフォーマンスを向上させることができる
単方向データフロー
- データの流れが一方向であるという考え方を採用している
  コンポーネントの状態が変更されると、自動的にUIが再レンダリングされる

実際どのくらい使われているの？

トレンドやGitHubの比較を見てもわかるようにめちゃくちゃ使われています！！
もうフロントは、React一強と言っても良いでしょう

トレンド比較
https://npmtrends.com/angular-vs-react-vs-vue

Reactとの相性の良い組み合わせ

相性の良いフレームワークやライブラリになります。
このあたりはよく見る組み合わせに含まれていることが多いです！

TypeScript

もはや鉄板です！これはどこの開発現場でも入っています。

後でと言わずに一緒に慣れていった方がより実用的です！

導入は、React＆TypeScript一緒に行っていきましょう！

【React＆TypeScript入門】.js .jsx .ts .tsxの違いと使い分けの話

なんとなく使っているけど、.js .jsx .ts .tsxの違いが分からない～使い分けがよくわからない～を解決しよう！React開発でJavaScriptやTypeScriptのどちらを使うべきかそれぞれメリット・デメリットを把握しよう！

Next.js

こちらももはや鉄板です！ほぼほぼ使っています。
色々メリットはありますが、最初に実感する部分としては、ルーティングが簡単にできるので使いやすいです！
src/pages配下にファイルを用意するだけで、URLと紐付けることができます。

Material UI

数あるUIライブラリの中でよく使われるライブラリの一つです。
ほかにもAntやMantineUIなどがあります。

とにかく爆速でありそうなそれっぽい画面が作れます！
使用することで統一感のあるデザインが保たれるため、とても良いです。
個性は、UIの組み合わせや処理で出していきましょう！

ReactのおすすめUIライブラリ-絶対使うべきTOP5【技術選定】

JavaScript・TypeScriptで現在大人気もはや一強敵なしReactのおすすめ人気UIライブラリトップ5 – 選び方と特徴〜絶対使ったほうがよいおすすめライブラリを厳選して選定！もはやUIライブラリの技術選定はここから選べばOKか

需要の高い人気プログラミング言語＆フレームワーク【将来性】

数多くの種類の言語からプログラミング初心者にもエンジニアのキャリアアップにも最適な将来性の高い人気のプログラミング言語とおすすめフレームワークを紹介！特に需要の把握はスキルアップと年収に直結です。ガチで必要な全ての選択肢の答えがここに

React（TypeScript, Next.js）の導入

環境構築手順

下記のコマンド一つでテンプレートアプリのプロジェクトが作られる

# インストール ({ProjectName}フォルダーが作成される )
npx create-next-app {ProjectName} --typescript

～インストールが始まり、下記のようなフォルダができたら成功～

./{ProjectName}/
├─ .git
├─ .gitignore
├─ README.md
├─ node_modules
├─ package.json
├─ tsconfig.json
├─ public
│  ├─ favicon.ico
│  └─ vercel.svg
└─ src
   ├─ pages
   │  ├─ api
   │  │  └─ hello.ts
   │  └─ index.tsx
   ├─ styles
   │  └─ Home.module.css
   └─ utils

※ 補足

Nest.jsを使わないReact＋TypeScriptの場合は、こちら

# インストール ({ProjectName}フォルダーが作成される )
npx create-react-app {ProjectName} --template typescript 

～インストールが始まり、下記のようなフォルダができたら成功～

./{ProjectName} /
├─ README.md
├─ node_modules
├─ package-lock.json
├─ package.json
├─ public
├─ src
└─ tsconfig.json

さっそく開発モードで表示してみる

これだけで、ローカルのアプリを画面表示できるようになります。

npm run dev

TypeScriptの設定ファイル

最初はそのままでも十分ですが

TypeScript用の設定ファイル(tsconfig.json)が生成されるので、必要に応じて設定していきましょう！

Material UIの導入

導入手順

npm install @mui/material @emotion/react @emotion/styled

使い方

公式サイトを見て使いたいUIやアイコンを選び importして使用する

import Button from '@mui/material/Button';

・・・
 <Button color="primary">
        ボタン
 </Button>
・・・

さいごに

アプリ開発を始めるとパッケージ構成に悩んだりすると思います！そのあたりは、こちらで比較しながら伝授していきます！

続きはこちら

【React＆TypeScript入門】パッケージ、ESLintなどの解決方針

目次アプリ開発直後のお困り事パッケージ構成どうする問題Atomic デザインぽく作ってみる機能で分けて作ってみるESLintの導入方法ビルドとExport方法次に気になるポイントごあいさつアプリ開発直後のお困り事パ

【React＆TypeScript入門】簡単にSSRとSSGの違い使い分けの話

SSRとSSGの違い要約するとこれです！簡単にSSRとSSGの違い使い分けの話！SSRとSSGってなんとなく分かっているけど〜聞かれたらなんとなく答えるけど〜実際何がどう違って、何ができるのかわからない〜調べてもよくわからない〜こんな方におすすめ

【完全入門】ESモジュールとCommonJSの違いと使い分けの話

【初心者向け解説】importの違いはあるけれど・・ESモジュールとCommonJSの違ってなに？結局どっちを使えば良いのか分かる話