JavaScriptのフレームワーク「React.js」
React.jsのフレームワーク「Next.js」の機能
近年、WEB制作、アプリ制作においてHotで、様々なプロジェクトで柔軟に使用できるJavaScriptのフレームワーク「Angular」、「Vue」、そして「React」。その中でも今回は、「React.js」と、そのフレームワーク「Next.js」を使用してみての感想、ここがよかったポイント等を紹介します。各フレームワークの紹介自体は、公式サイトをご覧ください。
React.js
https://reactjs.org/
Next.js
https://nextjs.org/
「Router」の使い方の違い
簡単に解説するとRouterとは、他ページに移るときに必要不可欠な機能。静的サイトとは違い、Reactは、SPA(Single Page Application)なので、どうしても他ページに移動するための機能が必要です。
Reactの場合
Routerを使うには、別にRouterのPackageをインストールする必要があります。デフォルトの状態では、Routerは使えません。
まずは、インストール
$ npm i react-router-dom
App.js で、下記をインポート
import { BrowserRouter, Route, Switch } from ‘react-router-dom’;
function App() {
return (
<div className=”wrapper”>
<h1>Test Page</h1>
<BrowserRouter>
<Switch>
<Route path=”/”>
<TopPage />
</Route>
<Route path=”/about”>
<About />
</Route>
</Switch>
</BrowserRouter>
</div>
);
}
export default App;
このような作業が必要になってきます。
Nextの場合
一方のNextでは、上記の作業は一切必要なく、
pages/ この中に表示させたいページファイルを入れて、中身を作成することで、
例: pages/testPage.js
http://test-website/testPage (URL直打ち)
上記のページが表示されるようになります。
また、Routerといえば、Next.jsの場合 「useRouter()」があります。これは、function component内でrouter objectにアクセスできます。例えば、Redirectするとき、router.push(“href”) のような記述をします。その他に実に色々な使い方があるのでチェックしてみてください！ちなみに個人的に、便利だなと思った機能は、router.reload()です。
例えばこんな感じで routerをbutton tagで囲んであげると機能します。大変便利です！
<button type=”button” onClick={() => router.reload()}>
リロードします
</button>
Reactと比べても、私にとってこれはかなり画期的で、Nextを使う一番のメリットといえるでしょう。
jsconfig.json の活用
React.js、Next.jsに限らず、階層の奥底にある、ファイルを読み込む場合、例えば、「../../test.js」のような記述、「..」を使わないと該当のページを読み込めないというのがかなり面倒。「.」一つでも忘れてしまうと、該当のページに辿り着けないといったことがたまーにありませんか？そんなときには、jsconfig.jsonの活用がおすすめです！
react, nextのroute内にjsconfig.jsonファイルを作成。
{
“compilerOptions”: {
“baseUrl”: “.”,
“paths”: {
“@/components/*”: [“components/*”],
“@/styles/*”: [“styles/*”],
“@/images/*”: [“images/*”],
}
}
}
上記を設定したあとは一旦、Integrated terminal(Visual Studio Codeの場合)で「ctrl + C」コマンドでlocalserverをストップさせます。再度、「npm run dev」 で起動します。あとは、インポートする側で
import Test from ‘@/components/該当ファイル’
を記述するだけで、インポートできちゃいます。この方法を知ったときはまさに目からウロコでした。
React.toastify の活用
最後に、React、Nextとともに使える、React.toastifyをご紹介します。React.toastifyは、主にフォーム入力のエラー、サクセスなどを画面上にアニメーション付きでNotificationを表示してくれます。設定はかなり簡単でデフォルトのメッセージ内容も変更できるのがいいですね。下記が記述の例です。
まずは、Packageのインストール。Packageをインストールするときはかならず、localserverをストップさせます。Integrated terminal(Visual Studio Codeの場合)で「ctrl + C」コマンドでlocalserverをストップさせます。
$ npm i react-toastify
再度、「npm run dev」 で起動します。
例: login.jsファイルに適用
まずは、インポート
import { ToastContainer, toast } from ‘react-toastify’;
export default function loginPage() {
// useState の記述は省きます
const handleSubmit = (e) => {
e.preventDefault()
if(email === ” || password === ”) {
toast.error(‘入力してください’) // ← エラーの場合「error」を記述したあとに表示させたいメッセージを記述
} else {
// function 任意のサクセスのFunction もしくは、Redirect など
}
}
return (
<div className=”wrapper”>
<ToastContainer /> // ← ここにインポートさせたToastContainerを配置。これが実際の画面上で表示される
<form onSubmit={handleSubmit}>
// some form
<input type=”submit” value=”Submit” />
</form>
</div>
)
}
上記のように記述することによって、アニメーション付きのReact notificationが実装できます。
詳しくはこちらのサイトを参照ください。
https://fkhadra.github.io/react-toastify/introduction
まとめ
今回、私がReact、Nextを使用していて、便利だなぁと思う上記の３つを紹介しました。他にもパワフルで、簡単に実装が可能なものがたくさんありますので、試してみてはいかがでしょうか。