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

PR
【React&TypeScript入門】人気の組み合わせで爆速環境構築伝授
この記事は約6分で読めます。
この記事の狙い

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

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

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

エンジニア2
エンジニア2

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

3丁目オーナー
3丁目オーナー

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

緑男
緑男

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

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

Reactについて

Reactについて

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

概要

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

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

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

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

トレンド比較

https://npmtrends.com/angular-vs-react-vs-vue

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

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

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

TypeScript

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

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

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

Next.js

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

Material UI

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

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

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>
・・・

さいごに

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

続きはこちら

PR

PR
PR

コメント

タイトルとURLをコピーしました