ブレーンアシストオンライン

「React.js」「Next.js」を使ってみる

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を使用していて、便利だなぁと思う上記の3つを紹介しました。他にもパワフルで、簡単に実装が可能なものがたくさんありますので、試してみてはいかがでしょうか。