常連

注目の的

拍手喝采

自己紹介

#解決したいこと
現在React×Typescript×styled-components×material-uiでポートフォリオサイトを作ろうと考えています。
matterial-uiのTab,Tabs,AppBarを用いてヘッダーをを作成できたのですが、サイトのホームから他のタブに移る際の動作がおかしいです。
この問題に関連していそうなソースを一応載せておきます

```App.tsx
import { ComponentRouter } from "./router/ComponentRouter";
import { StylesProvider } from '@material-ui/styles';
import {MuiThemeProvider} from '@material-ui/core/styles'

import {theme} from './assets/styles/theme'

export function App (){
  return (
    <StylesProvider injectFirst>
      <MuiThemeProvider theme={theme}>
        <ComponentRouter />
      </MuiThemeProvider>
    </StylesProvider>
  );
};

```

```ComponentRouter.tsx
import { BrowserRouter, Route, Switch } from "react-router-dom";
import { FC } from "react";
import { DefaultLayout } from "../components/templates/DefaultLayout";
import { HeaderOnly } from "../components/templates/HeaderOnly";
import { Home } from "../components/pages/Home";
import { Profile } from "../components/pages/Profile";
import { Skill } from "../components/pages/Skill";
import { Product } from "../components/pages/Product";
import { Book } from "../components/pages/study/Book";
import { Contact } from "../components/pages/Contact";

export const Path = {
    home: "/",
    profile: "/profile",
    skill: "/skill",
    product: "/product",
    study: "/book",
    contact: "/contact",
  };


export const ComponentRouter:FC = () =>{
    return (
      <BrowserRouter basename={process.env.PUBLIC_URL}>
        <Switch>
          <Route exact path={Path.home}>
            <DefaultLayout>
              <Home />
            </DefaultLayout>
          </Route>
          <Route path={Path.profile}>
            <HeaderOnly>
              <Profile />
            </HeaderOnly>
          </Route>
          <Route path={Path.skill}>
            <HeaderOnly>
              <Skill />
            </HeaderOnly>
          </Route>
          <Route path={Path.product}>
            <HeaderOnly>
              <Product />
            </HeaderOnly>
          </Route>
          <Route path={Path.study}>
            <HeaderOnly>
              <Book />
            </HeaderOnly>
          </Route>
          <Route path={Path.contact}>
            <HeaderOnly>
              <Contact />
            </HeaderOnly>
          </Route>
        </Switch>
      </BrowserRouter>
    );
}
```

```Header.tsx
import styled from "styled-components";
import {VFC, } from "react";
import { Link, useHistory} from "react-router-dom";

import { Tab, Tabs, AppBar } from "@material-ui/core";

interface headerItemPropsType{
  id: number; 
  route: string; 
  label: string 
}
const headerItem: headerItemPropsType[] = [
  {
    id: 1,
    route: "/",
    label: "HOME",
  },
  {
    id: 2,
    route: "/profile",
    label: "PROFILE",
  },
  {
    id: 3,
    route: "/skill",
    label: "SKILL",
  },
  {
    id: 4,
    route: "/product",
    label: "PRODUCT",
  },
  {
    id: 5,
    route: "/book",
    label: "STUDY",
  },
  {
    id: 6,
    route: "/contact",
    label: "CONTACT",
  },
];

export const Header: VFC = () => {
  const history = useHistory();
  return (
      <SAppBar position="static" color="inherit">
        <Tabs
          value={history.location.pathname}
          variant="fullWidth"
          indicatorColor="secondary"
          centered
          aria-label="simple tabs example"
        >
          {headerItem.map((val) => {
            return (
              <Tab
                label={val.label}
                value={val.route}
                key={val.id}
                component={Link}
                to={val.route}
              />
            );
          })}
        </Tabs>
      </SAppBar>
  );
};
const SAppBar = styled(AppBar)`
  background: #193278;
  color: #fff;
  padding: 8px 0;
`;
```


#質問内容

公開しているサイトのHOMEから他のタブに移動（書き換え）する際のみ、インジケータが滑らかに移動しません。
これがなぜなのか分かる方がいらっしゃれば回答いただけるとありがたいです。

#やったこと
material-uiのドキュメントも見たのですが、分かりませんでした。
stateを用いて書いてみたり、useLocationをしたりしたのですが変わりませんでした。
そもそもなぜインジケータが滑らかに移動しているのかがmaterial-uiにブラックボックス化されているので原因が全く分かりません。
よろしくお願いします。

React×Typescriptにおけるmaterial-uiのtabの挙動がおかしい

line="aaa bbb ccc"
というように区切り文字をから最初のaaaを取得するbashのシェルがあるのですが、以下の③で記述されていました。
調べたところ②で最初の文字列を取得できることがわかりました。
・なぜ②では区切り文字の最初の文字列が取得できるのでしょうか？
・③の「//""/」この部分は置換しているようなのですがどのような意味があるのでしょうか？

①
$ work=${line}
$ echo $work
aaa bbb ccc

②
$ work=(${line})
$ echo $work
aaa

③
$ work=(${line//""/})
$ echo $work
aaa

シェル変数に格納された区切り文字から最初の文字列を取得する

Next.js×Electronで開発をしている方がいますが、なぜNext.jsを使うのでしょうか。

Next.jsでは、SSR,SSG,ISRといったサーバー側でページを作成する機能があるのが特徴だと思っています。

Electron等のデスクトップアプリでは、最初からソースコードがPC内にあるため、SSRやSSG等をする必要がないまたはそのようなコードのせいでエラーが発生するのではないでしょうか。
そのためReact×Electronとできることは変わらないのではないでしょうか。

React×Electronでの開発と、Next.js×Electronの違いはあるのでしょうか。

どこか勘違いしているためこのような考えに至っていると思うですが、どなたかご教授いただければ幸いです。
よろしくお願いいたします。