Zenn
🐥

Reactとは？

2023/10/30に公開
React
TypeScript
SPA
tech

Reactってなに？

Reactについて

① WebアプリのUIを開発するJavaScriptライブラリである

② 2013年にFacebook社が開発しオープンソース化している

簡単にいってしますと、「Facebook社（現：meta）が作ったフロント開発用のライブラリ」です。

Reactの特徴

Reactの特徴をまとめてみると、下記のような3つがあります。
Webページだけでなく、スマホアプリも開発できるため、人気が高まってきています。
また、ReactをベースとしたNext.jsでバックエンドを開発もできるため、需要が伸びてきてます。

  1. コンポーネント指向
    • 再利⽤性が⾼い
    • 拡張性に優れいている
  2. 様々な分野に活⽤できる
    • スマホアプリの開発（React Native）
    • VRアプリの開発（React VR）
    • SPA開発（1ページで完結するようなアプリ 例：Googleマップ、Gamil）
  3. レンダリング速度が速い
    • 仮想DOMが採⽤されている

React⼊⾨の入門

まずは、導入から試してみてください。

導⼊（windowsの場合）

  • まずは、nvm-setup.zipをインストール
    インストール：nvm-setup.zip

  • インストール後にコンソールで実行!

C:\Users\user> nvm -v
Running version 1.1.9.
・・・
C:\Windows> nvm install v16.14.0
Downloading node.js version 16.14.0 (64-bit)...
Extracting...

Complete
nstallation complete. If you want to use this version, type 

C:¥Windows> nvm ls 16.14.0
16\.14.0

C:¥Windows> nvm use v16.14.0
Now using node v16.14.0 (64-bit)

C:¥Windows> node -v
v16.14.0

※ バージョンが表示できるようになっていればOK！

【参考】windowsのインストール ： https://zenn.dev/kagetugu/articles/eec07c364f9153

導⼊（Macの場合）

  • Homebrewでのインストール
→~ brew install nodebrew
・・・
→~ nodebrew install-binary stable 
・・・
→~ nodebrew ls
v7.1.0 

current: none
→~ nodebrew use v7.1.0
→~ echo 'export PATH=$HOME/.nodebrew/current/bin:$PATH' >> ~/.zshrc
→~ source ~/.zshrc

【参考】Mac ： https://zenn.dev/shohei_1010/articles/f1ef4454202da7

プロジェクトの作成

Reactプロジェクトは、簡単に作成することができます。
下記のコマンドをコンソール or ターミナルでうつだけ！！

→~(作業⽤フォルダ)> npx create-react-app プロジェクト名 --template typescript 
             例） npx create-react-app sample-app --template typescript

プロジェクトが正常に作成できたら、プロジェクトに移動して、アプリを起動できます！

→~(作業⽤フォルダ)> cd sample-app
→~(作業⽤)/sample-app > npm run start

***下記の画⾯が⽴ち上がっていたらOKです！ ***
http://localhost:3000

無事、最初のReactプロジェクトの起動がうまくできたら、次は具体的なコードの中身を確認して行きます。

プロジェクトの確認

デフォルトのプロジェクト構成は、下記になります。

はじめに、重要な3つのファイルがあるので、そちらから確認できます。
どんなコードが記載されているか確認してみましょう！

【主なファイル】
■public/配下

  • index.html
    ⼤本のhtmlファイル。 下記部分で、Reactで記述した部分表⽰。
<div id="root"></div>

■src/配下

  • index.tsx
    • Reactのエントリーファイル。 index.htmlにレンダリングする部分。
const root = ReactDOM.createRoot(
  // index.htmlからID指定でroot部分を取得している
  document.getElementById('root') as HTMLElement
);
root.render(
  <React.StrictMode>
  　　　　// メインの表示コンポーネント部分
    <App />
  </React.StrictMode>
);
  • App.tsx
    • メインのコンポーネントファイル。 メインで表⽰される部分。

次は、具体的に記載されているコードの内容を確認して行きます。

JSX(tsx)について

Reactでは、基本的にJSX(tsx)を使って、コードを書いて行きます。

JSX(tsx)とは、、、
ざっくり言うと、HTMLとJavascript(typescript)を混合したようなもの。
下記のように、HTMLの中に、Javascript(typescript)を記載することができます。

App.tsx

function App() {
  return (
    <div className="App">
      <header className="App-header">
        <img src={logo} className="App-logo" alt="logo" />
        <p>
          Edit <code>src/App.tsx</code> and save to reload.
        </p>
        <a
          className="App-link"
          href="https://reactjs.org"
          target="_blank"
          rel="noopener noreferrer"
        >
          Learn React
        </a>
      </header>
    </div>
  );
}

Jsx(tsx)の記載を理解するために、実際にコードを修正してみます。

表⽰を変えてみよう！

まずは、下記のようにコードを修正してみよう！

修正したコードがどう表示されるかは、起動して確認できます。
http://localhost:3000

Htmlとコードは似ているので、どんどんコードを書いていけば慣れていくかなと思います。

コンポーネントについて

次は、Reactで大事な概念のコンポーネントについてです。
「App.tsx」のメインのファイルにコードをひたすら書いていくようなことはもちろんありません！
基本的には、コンポーネント（部品）ごとにコードを分けて書きます。

コンポーネント（作成）

コンポーネントとは、画⾯に表⽰される部品として、表⽰に必要なデータや処理などを 1つのオブジェクトにまとめたもののことを言います。

まずは、コンポーネントを作成し、作成したコンポーネントをどう使っていくのかを確認してみます。

さっそく、コンポーネントを追加してみます！

  1. 【プロジェクト】/src/に「component」フォルダを作成

  2. componentフォルダに「Sample.tsx」ファイルを作成（下記参考）

  3. Sample.tsxに下記コードを記述
    「Sample.tsx」は下記のコードが参考になります。

ここまでで、コンポーネントの作成は以上です。
作成したコンポーネントを使いたい部分で、呼び出すことで使うことができます。

コンポーネント（import追加）

作成したコンポーネントを、他のコンポーネントに部品として取り込むことができます！
「App.tsx」を下記のように修正してみます！

JSXとコンポーネントの理解がまずは、大事です！

Reactの学習

⼊⾨後にやっていくこと

【基礎編】

  1. スタイルを記述してみる
  2. React Hooksを使ってみる
  3. 簡単なアプリケーションを作る

スタイルを記述してみる

スタイルの設定には、CSSで記述する方法もありますが、CSSフレームワークや、UIライブラリ、CSS in JSなど様々あります。
まずは、取り組みやすいCSSフレームワーク、UIライブラリから使っていくのが良いかと思います。

■CSSフレームワーク

  • Tailwind CSS

■UIライブラリ

  • Material UI

徐々に、慣れてきたら⾊々使ってみるのもありかなと！

参考：ReactにおけるCSSの利用はどうしたら？自分なりに結論出してみた

React Hooksを使ってみる

関数コンポーネントで利⽤できる便利な機能。
これらを使用することで、画面上に値を保持することができたり、状態を管理することができます。
アプリ開発では、必須になるのでまずは、どういった機能があるのか実装しながら学んでみてください。

  • 主なHooks：useState、useEffect、useCallback etc…

【参考】：React Hooks入門

【応⽤編】

  1. 状態管理をしてみる（ Redux Toolkitを使ってみる ）
  2. API連携を実装してみる
  3. 認証機能を実装してみる

ここら辺の応用編についても、随時記事を書いていく予定です。

【おまけ】

下記で、早速SPAアプリケーションを作成してみよう！
まずは、触ってみて理解を深めていきましょう！
■TODOアプリ
https://zenn.dev/grazie/articles/cfb43e4b81a152

■電卓アプリ
https://www.youtube.com/watch?v=YbsBQbqxy1I

Discussion