Markdwonメモアプリ作成（TypeScript）（第ニ回）

16:43

前回環境を構築しました。

今回からMarkdwonメモアプリのコーディングを行います。トップページを作って全てのマークダウンデータを出力できるようにします。

前回の内容は以下を参照してください。

今回の手順は以下のとおりです。

ディレクトリ作成

ディレクトリを作成します。

    
project/
　┣ front/
　┃　┣ Dockerfile
　┃　┗ src/
　┃　　　┗ markdown-app/
　┃　　　　　┗ src/
  ┃　　　　　　　┣ components/
  ┃　　　　　　　┃　┣ pages/
  ┃　　　　　　　┃　┣ templates/
  ┃　　　　　　　┃　┣ types
  ┃　　　　　　　┃　┗ uilibs/
  ┃　　　　　　　┃　　　┣ organisms/
  ┃　　　　　　　┃　　　┣ molecules/
  ┃　　　　　　　┃　　　┣ atoms/
  ┃　　　　　　　┃　　　┗ theme/
　┃　　　　　　　┗ setupTests.ts
・・・略・・・

src配下にcomponentsのフォルダを作成します。

componentsのフォルダ配下にpages、templates、uilibs、typesを配置します。

uilibsフォルダ配下には、organisms、molecules、atoms、themeフォルダを配置します。

今回はふたつのページ用意します。

トップページ
マークダウンページ

App.tsx更新

App.tsxファイルを更新します。

トップページとマークダウンページを切り替えます。

    
import { FC } from "react";
import { BrowserRouter, Route, Routes } from "react-router-dom";
import { Markdown } from "./components/pages/Markdown";
import { Top } from "./components/pages/Top";

export const App: FC = () => {
  return (
    <BrowserRouter>
      <Routes>
        <Route path="/" element={<Top />} />
        <Route path="*" element={<Markdown />} />
      </Routes>
    </BrowserRouter>
  );
};

URLとページの関係は以下の通りです。

/	トップページ	Top.tsx
*	マークダウンページ	Markdown.tsx

トップページの作成

トップページ(Top.tsx)を作成します。

「pages/」配下にTop.tsxファイルを配置します。

    
project/
　┣ front/
　┃　┣ Dockerfile
　┃　┗ src/
　┃　　　┗ markdown-app/
　┃　　　　　┗ src/
  ┃　　　　　　　┣ components/
  ┃　　　　　　　┃　┣ pages/
  ┃　　　　　　　┃　┃　┣ Top.tsx
  ┃　　　　　　　┃　┃　┗ Markdown.tsx
  ┃　　　　　　　┃　┣ templates/
・・・略・・・

ページの内容は以下の通りです。

    
import { FC, useEffect, useState } from "react";
import axios from "axios";
import { MarkdownType } from "../../types/MarkdownType.type";
import { TopTemplate } from "../templates/TopTemplate";

export const Top: FC = () => {

  const [markdowns, setMarkdowns] = useState<Array<MarkdownType>>([]);

  useEffect(() => {
    axios.get<Array<MarkdownType>>("http://localhost:5000/markdown")
      .then(res => { setMarkdowns(res.data) })
  }, []);

  return (
    <TopTemplate markdowns={markdowns} />
  );
};

このページは、トップページのテンプレート(TopTemplate)のコンポーネントを呼び出します。

APIの取得はこのコンポーネントで行います。

APIから取得するデータはMarkdownTypeとして定義します。

MarkdownType作成

MarkdownType.type.tsファイルを作成します。

    
project/
　┣ front/
　┃　┣ Dockerfile
　┃　┗ src/
　┃　　　┗ markdown-app/
　┃　　　　　┗ src/
  ┃　　　　　　　┣ components/
  ┃　　　　　　　┣ theme/
  ┃　　　　　　　┃　┗ MarkdownType.type.ts
・・・略・・・

ページの内容は以下の通りです。

    
export type MarkdownType = {
    url: string
    title: string
    body: string;
};

Markdownテーブルのカラムと同じ構成です。

マークダウンページの作成

マークダウンのページ(Markdown.tsx)を作成します。

「pages/」配下にMarkdown.tsxファイルを配置します。

    
project/
　┣ front/
　┃　┣ Dockerfile
　┃　┗ src/
　┃　　　┗ markdown-app/
　┃　　　　　┗ src/
  ┃　　　　　　　┣ components/
  ┃　　　　　　　┃　┣ pages/
  ┃　　　　　　　┃　┃　┣ Top.tsx
  ┃　　　　　　　┃　┃　┗ Markdown.tsx
  ┃　　　　　　　┃　┣ templates/
・・・略・・・

ページの内容は以下の通りです。

    
import { FC } from "react";

export const Markdown: FC = () => {
  return (
    <h1>マークダウンページ</h1>
  )
}

今回はコーディングを省略します。H1タグでマークダウンページと表示します。

トップテンプレートの作成

トップテンプレート(TopTemplate.tsx)ファイルを作成します。

「templates/」配下に配置します。

    
project/
　┣ front/
　┃　┣ Dockerfile
　┃　┗ src/
　┃　　　┗ markdown-app/
　┃　　　　　┗ src/
  ┃　　　　　　　┣ components/
  ┃　　　　　　　┃　┗  templates/
  ┃　　　　　　　┃　　　　┗ TopTemplates.tsx
・・・略・・・

トップテンプレートは、ヘッダとメインのコンテンツを構成します。

ヘッダ

メイン

ページの内容は以下の通りです。

    
import { FC, useEffect, useState } from "react"
import { Link } from "react-router-dom";

import { Container, ThemeProvider } from "@mui/material";
import { Box } from "@mui/system";

import { MarkdownType } from "../../types/MarkdownType.type"

import { HeaderNavigation } from "../uilibs/organisms/HeaderNavigation";
import { Theme } from "../uilibs/theme/Theme";

interface MarkdownProps {
  markdowns: Array<MarkdownType>
};

export const TopTemplate: FC<MarkdownProps> = (props) => {

  const { markdowns } = props;
  const theme = Theme;
  const styleContainer = { display: "flex", flexDirection: "column" };

  return (
    <ThemeProvider theme={theme}>
      <Box component="main" >
        <HeaderNavigation />
        <Container maxWidth="xl" sx={styleContainer}>
          {markdowns.map((markdown) => { return <Link to={markdown.url} key={markdown.url}>{markdown.title}</Link> })}
        </Container>
      </Box>
    </ThemeProvider>
  )
}

MUIのテーマをつくります。Themeクラスを呼び出します。

HeaderNavigationのコンポーネントを呼び出します。

Topページからの値を受け取ってmapでひとつづつタイトルを出力します。

テーマの作成

Theme.tsファイルを作成します。

    
project/
　┣ front/
　┃　┣ Dockerfile
　┃　┗ src/
　┃　　　┗ markdown-app/
　┃　　　　　┗ src/
  ┃　　　　　　　┣ components/
  ┃　　　　　　　┃　┗ uilibs/
  ┃　　　　　　　┃　　　┗ theme/
  ┃　　　　　　　┃　　　　　┗ Theme.ts
  
・・・略・・・

ページの内容は以下の通りです。

    
import { createTheme } from "@mui/material/styles";

export const Theme = createTheme({
  palette: {
    mode: "dark",
    primary: {
      main: "#1976d2"
    }
  }
});

ヘッダーナビゲーション部品の作成

ヘッダーナビゲーション部品(HeaderNavigation.tsx)ファイルを作成します。

「organisms/」ディレクトリ配下に配置します。

    
project/
　┣ front/
　┃　┣ Dockerfile
　┃　┗ src/
　┃　　　┗ markdown-app/
　┃　　　　　┗ src/
  ┃　　　　　　　┣ components/
  ┃　　　　　　　┃　┗ uilibs/
  ┃　　　　　　　┃　　　┗ organisms/
  ┃　　　　　　　┃　　　　　┗ HeaderNavigation.tsx

・・・略・・・

ページの内容は以下の通りです。

    
import { FC } from "react";

import {
  AppBar,
  Toolbar,
  Typography
} from "@mui/material";

import { HomeNavigation } from "../molecules/HomeNavi";

export const HeaderNavigation: FC = () => {

  const StyleToolBar = {
    display: "flex", justifyContent: "space-between"
  }

  return (
    <AppBar position="relative">
      <Toolbar sx={StyleToolBar}>
        <Typography>markdown</Typography>
        <HomeNavigation />
      </Toolbar>
    </AppBar>
  );
};

MUIのTypographyで「markdown」と表示します。

ホームアイコン(HomeNavigation)を呼び出します。

ホームアイコンの作成

ホームアイコンを作成します。

「molecules/」ディレクトリ配下に(HomeNavi.tsx)を配置します。

    
project/
　┣ front/
　┃　┣ Dockerfile
　┃　┗ src/
　┃　　　┗ markdown-app/
　┃　　　　　┗ src/
  ┃　　　　　　　┣ components/
  ┃　　　　　　　┃　┗ uilibs/
  ┃　　　　　　　┃　　　┗ molecules/
  ┃　　　　　　　┃　　　　　┗ HomeNavi.tsx
・・・略・・・

ページの内容は以下の通りです。

    
import { useNavigate } from "react-router-dom";

import { FC } from "react";

import {
  BottomNavigation,
  BottomNavigationAction,
} from "@mui/material";

import HomeIcon from '@mui/icons-material/Home';

export const HomeNavigation: FC = () => {

  const navigate = useNavigate();

  const onClickHome = () => { navigate('/') };

  return (
    <BottomNavigation showLabels>
      <BottomNavigationAction label="ホーム" icon={<HomeIcon />} onClick={onClickHome} />
    </BottomNavigation>
  );
};