react入門7

ツールの紹介

良い家を作るには、用途やコスト、コンセプトに合った建材、家具を利用する必要があります。良いサービスを作るには、用途や用途やコスト、コンセプトに合ったツールを利用する必要があります。

フレームワーク、ツールチェーン

• reactを使ってweb開発する人は、ツールチェーン（フレームワーク）を使っていることが多いです。フレームワークはreactで書いたソースコードを実際にリリースする際に、裏でいろいろなこと（例えば最適化）をしたり、それぞれのフレームワーク上のエコシステム（いろいろな機能のライブラリを簡単に導入できるなど）を提供します。
  reactのフレームワークは下記が有名です。

• Next.js

• gatsby

gatsbyはブログなど静的サイトに特化、Next.jsは全方位対応といったイメージです。

Next.js と Gatsby の比較

ツールチェーンとは良くいったもので、下記のツールを使うときは、フレームワーク名もセットでググることをお勧めします。

見た目を簡単に綺麗に

1からCSSを書くのはしんどいので、多くの人が有名な見た目に関するライブラリを使います。HTMLの部品を提供するライブラリと、CSSの使い勝手を良くしたものがあります。

部品を提供するライブラリは下記がメジャーです。よく見かけるUIなので、使う人が戸惑わないというメリットがあります。

• MUI(Material UI)

• bootstrap

また、ユーザー入力を受け付けるFormには、データをまとめたり、検証したりする機能が必要になり、コードが肥大化します。そこで下記のライブラリがあります。

• Formik

• react-hook-form

• yup(検証用）

CSSの使い勝手を上げるライブラリは下記がメジャーです。

• CCS modules

• CCS in JS

• tailwindCSS

グローバルな状態管理

useContext以外にもたくさんあります。メジャーな状態管理として下記があります。

• Redux

• Recoil

個人的にはReduxは避けたい気持ちになります。グローバルな状態管理は避けるべきことなのに、ツールとして大きくなりすぎている気がします。

React HooksはReduxよりも便利ですか？

useContext + useReducer の使いどころ - パンダのプログラミングブログ

Recoilの仕組みと使い方

外部リソース（http通信）の取得

ブラウザ標準のFetch API以外に、下記が有名です。

• axios

道具を理解しましょう。

こんなにたくさんのツールがあって、どうすれば良いのでしょうか。答えとしては、何に使うものなのか、どのような場合に他のツールより有効なのかを理解することだと思います。公式のドキュメントを読んだり、”仕組み”、”メリットデメリット”などと共に検索した後、チュートリアルを実行してみることだと思います。
キーワードや細かな関数名などは覚える必要はありません。どうせツールは3年くらい経つと別のものに変わります。公式サイトからコピペできますし、プロジェクトは数ヶ月以上続くので、使っている言語やライブラリの文法は馴染んできます。

基礎を大事にしましょう。

その代わり、原理や概念をしっかり理解することをお勧めします。例えば、関数型プログラミングの概念があれば、Reactは比較的早く理解できると思います。またHTMLやCSSの基礎、DOMの概念がそもそもないと、JSXなどは応用が効かなくなります。最後はHTMLとCSSにコンパイルされ、ブラウザのエンジンが実行します。規格化されている仕様は長持ちします。