react入門7
ツールの紹介
良い家を作るには、用途やコスト、コンセプトに合った建材、家具を利用する必要があります。良いサービスを作るには、用途や用途やコスト、コンセプトに合ったツールを利用する必要があります。
フレームワーク、ツールチェーン
reactを使ってweb開発する人は、ツールチェーン(フレームワーク)を使っていることが多いです。フレームワークはreactで書いたソースコードを実際にリリースする際に、裏でいろいろなこと(例えば最適化)をしたり、それぞれのフレームワーク上のエコシステム(いろいろな機能のライブラリを簡単に導入できるなど)を提供します。
reactのフレームワークは下記が有名です。Next.js
gatsby
gatsbyはブログなど静的サイトに特化、Next.jsは全方位対応といったイメージです。
ツールチェーンとは良くいったもので、下記のツールを使うときは、フレームワーク名もセットでググることをお勧めします。
見た目を簡単に綺麗に
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は避けたい気持ちになります。グローバルな状態管理は避けるべきことなのに、ツールとして大きくなりすぎている気がします。
外部リソース(http通信)の取得
ブラウザ標準のFetch API以外に、下記が有名です。
axios
道具を理解しましょう。
こんなにたくさんのツールがあって、どうすれば良いのでしょうか。答えとしては、何に使うものなのか、どのような場合に他のツールより有効なのかを理解することだと思います。公式のドキュメントを読んだり、”仕組み”、”メリットデメリット”などと共に検索した後、チュートリアルを実行してみることだと思います。
キーワードや細かな関数名などは覚える必要はありません。どうせツールは3年くらい経つと別のものに変わります。公式サイトからコピペできますし、プロジェクトは数ヶ月以上続くので、使っている言語やライブラリの文法は馴染んできます。
基礎を大事にしましょう。
その代わり、原理や概念をしっかり理解することをお勧めします。例えば、関数型プログラミングの概念があれば、Reactは比較的早く理解できると思います。またHTMLやCSSの基礎、DOMの概念がそもそもないと、JSXなどは応用が効かなくなります。最後はHTMLとCSSにコンパイルされ、ブラウザのエンジンが実行します。規格化されている仕様は長持ちします。
この記事が気に入ったらサポートをしてみませんか?