【REACT】カンタンなSPAサイトの仕組み

#JavaScript学習をはじめてから2ヶ月目でSPAに触れてみた所感
基本的なweb制作のスキルはすでに獲得していて、次のステップにJavaScriptを選択してみました。
理由をカンタンに説明すると、web制作をより深く学習していく中で、SPA（シングルページアプリケーション）という技術への興味が高ぶったからです。
そこで、実際にJavaScriptを本格的に学びはじめてからSPAに触れてみた所感を共有できればと思い記事を投稿しようと思います。
これからSPAを学ばれる方に少しでも参考になれば幸いです。

#今回使用する技術
・React Router
　→Routeコンポーネント、Linkコンポーネント

#1.ディレクトリの作成
※既に環境構築済みの想定
　→まだの方はこちらから
sample（好きなディレクトリ名）> src> App.jsとindex.js のみのシンプルな構造

App.js

import React from 'react';

function App() {
 return (
   <h1>hello</h1>
 );
}

export default App;

index.js

import React from 'react';
import ReactDOM from 'react-dom';
import App from './App';

ReactDOM.render(
    <App />, 
    document.getElementById('root')
);

#2.React Routerのインストール
・VSコード内のターミナルに"npm install react router-dom"とコマンドを入力してインストールを行います。
すると、package.jsonの"dependencies"内に"react-router-dom"がインストールされたことがわかります。

package.json

{
  "name": "sample",
  "version": "0.1.0",
  "private": true,
  "dependencies": {
    "gh-pages": "^2.2.0",
    "react": "^16.13.0",
    "react-dom": "^16.13.0",
    "react-router-dom": "^5.1.2",
    "react-scripts": "3.4.0"
  },

となれば問題ないかと思います。

#3.コンポーネントの追加
SPAサイトの特徴である複数のページを要せずとも、ページ遷移ができる仕組みはコンポーネントが支えています。
ということで、src> components> Top.jsxとAbout.jsxの2つの関数コンポーネントファイルを作成し、とりあえずh1要素のみ入力しておきます。

Top.jsx

import React from 'react';

function Top() {
    return(
        <h1>TOP</h1>
    );
}


export default Top;

About.jsx

import React from 'react';

function About() {
    return(
        <h1>ABOUT</h1>
    );
}


export default About;

#4.ルーティングの設定
実際の表示ページとなるApp.jsに以下の要領でルーティング設定を行います。

App.js

import React from 'react';
import {
  BrouserRouter as Router,
  Route
} from "react-router-dom";
import Top from './components/Top';
import About from './components/About';

function App() {
 return (
   <Router>
     <Route path="/" exact component={Top} />
     <Route path="/about/" exact component={About} />
   </Router>
 );
}

export default App;

package.jsonで読み込んだreact-router-domから①BrouserRouterをasキーでRouterとして②Routeの2つを読み込みます。

そして、function App内ではRouterを親要素。Routeをその中の子要素として記入します。

そのRoute内の“path”にURLセット。
“exact”の役割はpathが完全一致した時のみ表示できるようにします。
“component”はpathにセットしたURLをクリックする時に表示したいコンポーネントを指定できます。

#5.いざ、表示の切り替え

最後の仕上げです。
通常、ページの切り替えはaタグで行われますが、Linkタグを使うことで、非同期処理が実現できます。

App.js

import React from 'react';
import {
  BrouserRouter as Router,
  Route、
　Link
} from "react-router-dom";
import Top from './components/Top';
import About from './components/About';

function App() {
 return (
   <Router>
     <ul>
       <li><Link to="/">トップ</Link></li>
       <li><Link to="/about/">アバウト</Link></li>
     </ul>
     <Route path="/" exact component={Top} />
     <Route path="/about/" exact component={About} />
   </Router>
 );
}

export default App;

Router,Routeのならびに“Link”を読み込みます。

そして、Routerタグ内にLinkタグをセットすることで、クリックすると非同期でのページ遷移、夢のSPAサイト（超簡易版）を実現することができます。

#まとめ
まだまだ自分は勉強中の身ですが、SPAサイトは非常に面白い仕組みで、これからよく使われる技術のひとつだと思うので、勉強していきたいものですね。