最終形

• タブメニューで画面が切り替わる
• どの画面からでもアクセスできるスライドタイプのメニューを持つ
• イベントトリガーでポップアップ画面が差し込まれる

以下の動画のようになります。

このような複数の画面パターンを持ったアプリを実装していきます。

ナビゲーターの構成

今回の実装では、 React Navigation を使っています。
バージョンは v5 です。

スライドメニュー（Drawer）、ポップアップ画面はタブメニューに覆いかぶさる形で実装したいので、
DrawerNavigator > StackNavigator > TabNavigator となる構成で実装します。

それぞれの中身を見ていきます。

DrawerNavigator

const DrawerNavigator = () => {
  return (
    <Drawer.Navigator
      drawerContent={() => (
        <View style={styles.container}>
          <Text>Drawer</Text>
        </View>
      )}
    >
      <Drawer.Screen name="StackNavigator" component={StackNavigator} />
    </Drawer.Navigator>
  );
};

スクリーンは１つのみの定義で、StackNavigatorを呼び出しています。
これにより、自動的にStackNavigatorの内容が表示されます。

Drawer の表示内容は、drawerContentに定義します。

StackNavigator

const StackNavigator = () => {
  const navigation = useNavigation();
  return (
    <Stack.Navigator mode="modal" headerMode="screen">
      <Stack.Screen
        name="TabNavigator"
        component={TabNavigator}
        options={{ headerShown: false }}
      />
      <Stack.Screen
        name="ModalScreen"
        component={ModalScreen}
        options={{
          headerLeft: () => (
            <HeaderBackButton
              labelVisible={false}
              backImage={() => (
                <View style={{ paddingHorizontal: 8 }}>
                  <Icon name="md-close" style={{ fontSize: 18 }} />
                </View>
              )}
              onPress={() => navigation.goBack()}
            />
          ),
        }}
      />
    </Stack.Navigator>
  );
};

TabNavigatorとポップアップ画面を定義しています。
mode="modal"の場合は下から浮き上がる形で、mode="card"の場合は右から押し出すように画面が挿入されます。

TabNavigatorと同階層にModalScreenを配置することで、ポップアップ画面がタブに隠れないようにしています。

TabNavigator

const TabNavigator = () => {
  return (
    <Tab.Navigator>
      <Tab.Screen name="Tab1" component={TabScreen1} />
      <Tab.Screen name="Tab2" component={TabScreen2} />
      <Tab.Screen name="Tab3" component={TabScreen3} />
    </Tab.Navigator>
  );
};

アプリからの呼び出し

const App: React.FunctionComponent = () => {
  return (
    <NavigationContainer>
      <DrawerNavigator />
    </NavigationContainer>
  );
};

NavigationContainerの子要素として、DrawerNavigatorを呼び出します。
これで完成です。

おわりに

React Navigation では、どちらの Navigator を上位にするかで挙動が異なります。

今回紹介したように、覆いかぶさるポップアップ画面も実装できますし、一方で選択タブ内で詳細画面などの別画面を表示することも可能です。（その場合はタブメニューが隠れない）

どのような画面構成にしたいかを設計し、どのページをどのナビゲーターに配置するかを考える必要があります。

今回は、簡単ではありますがその実装方法について紹介しました。
不明点や間違いなどがありましたらコメントお願いします。

ここまで読んでいただき、ありがとうございました。

nanorouterでReactのルーティング処理を簡単に自作するの続き。
今度は前回作ったやつをHooks化して、さらにHistoryパッケージを統合して遷移イベントのフックも行う。

import React from 'react';
import nanorouter  from "nanorouter"
import { createBrowserHistory } from 'history'

export const useRouter = (routes) => {
  const history = React.useRef(createBrowserHistory())
  const [currentPath, setCurrentPath] = React.useState(history.current.location.pathname)

  React.useEffect(() => {
    history.current.listen((location, action) => {
      setCurrentPath(location.pathname)
    })
  }, [])

  const nextComponent = React.useRef(null)
  const router = nanorouter({ default: "/" })

  Object.keys(routes).forEach(path => {
    router.on(path, param => { nextComponent.current = routes[path] })
  })

  router.emit(currentPath)

  return [history.current, nextComponent.current]
}

使う側のインタフェースはこんな感じになる。

import React from 'react'
import { useRouter } from './Route'
import { PageA } from './PageA'
import { PageB } from './PageB'

function App() {
  const [history, router] = useRouter({
    '/hello': <PageA />,
    '/world': <PageB />,
  })

  return (
    <div className="container">
      {router}
      <button onClick={() => history.push("/world")}>world</button>
      <button onClick={() => history.push("/hello")}>hello</button>
    </div>
  )
}

export default App;

https://qiita.com/daga_0301/items/a7aa8bed488b13f5db64の続き

まずはファイル構成から

│  .babelrc
│  .eslintrc.json
│  package-lock.json
│  package.json
│  webpack.config.js
│
├─public
│      index.html
│
└─src
        index.css
        index.js

webpack

webpackは今回使うツールの中で最上位のツール
javaScriptのモジュールやらcssやらを一つのファイルにまとめてくれます。
だから、htmlでこのようなことをしなくてよくなる。

<link rel="stylesheet" href="./css/bootstrap.min.css">
<link rel="stylesheet" href="./add.css">
<script src="./js/jquery-3.4.1.min.js"></script>
<script src="./js/bootstrap.min.js"></script>

webpackはwebpack.config.jsファイルで設定をします。

module.exports = {
    entry: { //バンドルする元ファイルの場所を指定
        app : "./src/index.js" 
    },
    output: { //バンドルした成果物のファイル名と場所を指定
        filename: "bundle.js",
        path: __dirname + "/public"
    },
    devServer : {//サーバーを立ててwebpackを起動するときの設定
        historyApiFallback: true,
        contentBase : __dirname + '/public',
        port:8080,
        publicPath:'/'
    },
    devtool:"#inline-source-map",
    module:{ //モジュールの設定
        rules:[
            {
            test:/\.js$/, //.jsと付くファイルを対象にする
            enforce:"pre", //最初に実行することを指定
            exclude: /node_modules/, //node_modules/にあるファイルは除外
            loader:"eslint-loader" //eslint-loderを使う
        },
        {
            test:/\.css$/,　//.cssと付くファイルを対象にする
            loader:["style-loader","css-loader"]
        },{
            test:/\.js$/,
            exclude:/node_modules/,
            loader:'babel-loader'
        }]
    }
};

babel

babelはes6,es7で書いたjavascriptをes5に変換してくれます。
現在、javascriptはes6まで策定されていますが、ブラウザによってはes5しか対応していないものもあります。
import,class,letなどがes6になります。
この問題を解決してくれる素晴らしいツール、使わないわけにはいかない。
babelの設定ファイルは.babelrc
「.」から始まるファイルは設定によってはエクスプローラで表示されないので注意してください。

{
    "presets": ["env","react"]
}

eslint

eslintはタイプミスをチェックしたり、コードスタイルのルールを設定してくれます。
vsCodeにも組み込めるみたいなのでそっちで設定してもいいかも、
設定項目が馬鹿みたいに多いので動きさえすればいいのなら使わなくてもよい。
設定ファイルは.eslintrc.json

{
    "env":{
        "browser":true,
        "es6":true
    },
    "parserOptions":{
        "sourceType":"module",
        "ecmaFeatures":{
            "experimentalObjectResetSpread":true,
            "jsx": true
        }
    },
    "extends" : ["eslint:recommended","plugin:react/recommended"],
    "plugins" :["react"],
    "rules":{
        "no-console":"off"
    }
}

css-loader style-loader

css-loaderとstyle-loaderはwebpackでcssファイルをバンドルするときに必要
css-loaderはcssファイルを読み取って、style-loaderがstyleタグを出力するらしい（←よくわかってない
設定ファイルはありません。

終わり

今回はここまで
次はreactを動かしてみます。

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サイトは非常に面白い仕組みで、これからよく使われる技術のひとつだと思うので、勉強していきたいものですね。