悩んでいる人ライブラリってよく聞くけどよくわからない・・・。
悩んでいる人ReactでのCSSの書き方ってどんなのがあるのかな？
悩んでいる人Reactでのページ移動させるときのやり方がわからない。
本記事では、上記3点についてまとめています。
僕もまだ学習中の部分もあるので自分の理解を深めるために記事を書いている部分もありますのでそのあたりはご了承くださいませ〜。
本記事は、Raise Techのフロントエンドエンジニアコースの受講記でもあります。
こちらの記事は、第7回の講義のまとめとなります。
ライブラリを使ってみよう
まずは、ライブラリについてまとめていきます。
ライブラリを日本語にすると、図書館という意味です。図書館には色々な本が置かれていますよね。
Reactでのライブラリも同様の考え方で、Reactについての便利な機能がまとめられているものという理解で問題ないです。
世界中の開発者がライブラリを開発しており、それをまとめている場所がNPMになります。
https://www.npmjs.com/
▼イメージ
・図書館 ・・・ NPM
・本 ・・・ ライブラリ
といった感じかと。
トップページ
NPMから自分が使いたい機能を探して、開発中のアプリに導入していくといった流れになります。
考える人なんでライブラリを使うのかな？
エンジニアなら自分で作ればいいのでは、、、？
といった意見を言う人もいるかもしれませんが、エンジニア業界では「車輪の再発明」といった言葉あります。
既にある機能を、また作るのは無駄ということです。
なので、基本的には世界中の優秀なエンジニアが作ったライブラリを使ってアプリを開発していくのが一般的となります。
- 開発工数・コストが下がる。
- コードがシンプルになる。
- バージョンアップを任せられる。
とはいえ、なんでもかんでもライブラリを使えばいいといったわけではありません。
ライブラリによっては、バグが多くあるものや、開発がとまってしまっているものもあります。
また、カスタマイズ性が低くやりたいことができない可能性も、、、。
ということでライブラリを使用するときには、慎重にならないといけません。
下記、ライブラリ選定時のポイントの一部となります。
・必要な機能を備えているか
・GithubのStarsの数(1000を超えていたら良いライブラリ)
・公式ドキュメントの見やすさ
・最終更新日
オカでは、どんなライブラリがあるのか見ていきましょー！
CSS系ライブラリ
CSS系のライブラリはReact開発を行う上で基本的に導入されます。
Web制作で有名なBootstrapのような使い方ができるもののあるのでWeb制作経験者であれば比較的理解するのに時間はかからないかと思います。
Tailwind CSS
Bootstrapに近く、スタイリングを行うためのクラスが既に用意されています。
めっちゃ流行っているけど、個人的にはあまり好きではない、、。
公式サイト（https://tailwindcss.com/）
Chakra UI
こちらは、RaiseTechフロントエンドコースのじぇけぇさんのUdemyのコースで初めて触りましたが割と使いやすい印象でした。
汎用的に使えるので結構おすすめっぽいです。
公式サイト（https://chakra-ui.com/）
Material UI
昔から人気があるみたいです。GoogleのMaterialデザインをベースに開発されたUIコンポーネントライブラリ。
公式ドキュメント（https://material-ui.com/）
styled-components
個人的に一番好きなライブラリです。コードがきれいに見えるので好き。
公式ドキュメント（https://styled-components.com/）
メッセージ表示系ライブラリ
処理が成功したときや、失敗したときにメッセージを表示できるようにするライブラリです。
react-hot-toast
今回初めて使いましたが、非常に簡単に実装できました。
公式ドキュメント（https://react-hot-toast.com/）
react-alert
使ったこと無いけど、こんなのもあります。
公式ドキュメント（https://github.com/schiehll/react-alert）
State管理系
React内の状態を管理するライブラリです。
Recoil
Facebookによって開発された状態管理ライブラリ。
公式ドキュメント（https://recoiljs.org/）
Redux
公式ドキュメント（https://redux.js.org/）
オカこのあたりについてはゆくゆく解説を充実させていきますね〜
ルーティングについて
ルーティングとは、URLを指定することで画面を遷移させることを指します。
Reactでルーティングを実装する方法については下記の2つとなります。（もしかしたら他にもあるかもですが、一般的な2つです。）
○react-router-domによる画面遷移
○Next.jsなどのフレームワークによる画面遷移
今回は、react-router-domを使った実装方法についてみていきます。
react-router-domをインストール
今回は、codesandboxを使って画面遷移の方法をみていきましょう！
Reactを選択してプロジェクトを作成します。
react-router-domをインストールします。
インストールが完了したら、package.jsonを確認して、dependenciesにreact-router-domが追加されているのを確認しておきましょう。
ページ遷移を確認するために、複数ページを作成しておきます。
Home.jsx Page1.jsx Page2.jsxを作成します。中身は下記のように非常にシンプルなもので問題ありません。
次に、Linkの設定を行います。今回は、componentsフォルダを作成してheader.jsxを中に作りました。
実際の案件でもヘッダーにリンクを設置することが多いので。
今回書いたコードになります。
Homeを押したら、/にURLに飛ばす。
Page1を押したら、/Page1にURLに飛ばす。
Page2を押したら、/Page2にURLに飛ばす。
import { Link } from "react-router-dom";
export const Header = () => {
return (
<ul>
<Link to="/">Home</Link>
<Link to="/page1">Page1</Link>
<Link to="/page2">Page2</Link>
</ul>
);
};次に、上記で作成したLinkのpathと結びつけたいコンポーネントを結びつけるためにRouterとRouteを使用していきます。
routerフォルダのなかにRouter.jsxを作成します。
遷移させたいページを<Route>でラップして、なかにpath="/hoge"のように記述します。
import { Route, Switch } from "react-router-dom";
import { Home } from "../Home";
import { Page1 } from "../Page1";
import { Page2 } from "../Page2";
export const Router = () => {
return (
<Switch>
<Route exact path="/">
<Home />
</Route>
<Route path="/page1">
<Page1 />
</Route>
<Route>
<Page2 path="/page2" />
</Route>
</Switch>
);
};あとは、Brower Routerはrouterを導入するためのコンポーネントとなります。
下記のように、ラップさせることで内包されているコンポーネントでrouterを使用することができるようになります。
import { BrowserRouter, Link } from "react-router-dom";
import { Router } from "./router/Router";
import "./styles.css";
export default function App() {
return (
<BrowserRouter>
<div className="App">
<Link to="/">Home</Link>
<br />
<Link to="/page1">Page1</Link>
<br />
<Link to="/page2">Page2</Link>
</div>
<Router />
</BrowserRouter>
);
}一応これで、画面遷移ができるようになりました。
▼最終的なファイル構成はこのような形にしました。
まとめ
ライブラリについては今後React開発の経験をもっと積んで色々ご紹介していけたらと思っていますー！
画面遷移についてはもう少し詳しく解説する予定なので、いつかの日までお待ち下さいませ〜。
