Go to Qiita Advent Calendar 2024 Top
LoginSignup
2
1

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

More than 1 year has passed since last update.

@taiki-nd

railsとreactでtodoアプリを作る！（part2）

Last updated at Posted at 2021-11-03

作成するアプリについて

railsとreactを用いたtodoアプリになります。
https://todo-app-rails-react.herokuapp.com/todoes

（part1）

（part3）

（part4）

（part5）

開発環境

  • ruby3.0
  • rails6.1(rails6以上必須)
  • react17.0.2
  • vscode

アプリの作成手順

  1. サーバーサイドの実装
    1. アプリの作成
    2. turbolinksの無効化
    3. モデル＆テーブルの作成
    4. 初期データの作成
    5. top#indexの作成
    6. todoes_controllerの作成
    7. ルーティングの設定
    8. application_controllerの設定
    9. application.html.erbに追記(part1でここまで完了済み)
  2. フロントサイドの実装
    1. componentsフォルダの作成
    2. リセットcssと共通cssの設定
    3. index.jsxの記述
    4. フロントの実装準備
    5. App.jsの記述
    6. TodoList.jsの記述
    7. NewTodo.jsの記述
    8. EditTodo.jsの記述

早速ですが進めていきましょう！

アプリ作成

2. フロントサイドの実装

2.1 componentsフォルダの作成

この章では必要なcomponentsフォルダを作成していきます。
componentsフォルダの作成場所はapp/javascript内で作成するcomponentsフォルダは以下の通りです。

  • App.js
  • EditTodo.js
  • NewTodo.js
  • TodoList.js
  • App.css
    スクリーンショット 2021-11-01 12.09.36.png

2.2 リセットcssと共通cssの設定

リセットcssに関しては超簡易版です。必要に応じて変更してください。

javascript/components/App.css
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

body {
  min-height: 100vh;
  color: rgb(1, 1, 1);
}

h1 {
  text-align: center;
  margin-top: 30px;
  margin-bottom: 15px;
}

h2 {
  text-align: center;
  margin-top: 30px;
  margin-bottom: 15px;
}

a {
  text-decoration: none;
  color: rgb(1, 1, 1);
}

input:focus {
  outline: 0;
}

2.3 index.jsxの記述

以下のように記述していきます。

app/javascript/packs/index.jsx
import React from 'react'
import ReactDOM from 'react-dom'
import { BrowserRouter } from 'react-router-dom';
import { App } from '../components/App'

document.addEventListener('DOMContentLoaded', () => {
  ReactDOM.render(
    <BrowserRouter>
      <App />
    </BrowserRouter>,    // <App />を<BrowserRouter>で囲むことで、<App />とその子要素でBrowserRouterを使えるようにしている
    document.querySelector('#root'),
    // app/views/top/index.html.erbからid="root"を選択肢そこに<App />を描画している。
  );
});

2.4 フロントの実装準備

まずですが、以下の準備作業をしていきます。

app/javascript/components/App.js
import React from 'react'

export const App = () => {
  return (
    <div>
      App
    </div>
  )
}
app/javascript/components/EditTodo.js
import React from 'react'

export const EditTodo = () => {
  return (
    <div>
      EditTodo
    </div>
  )
}
app/javascript/components/NewTodo.js
import React from 'react'

export const NewTodo = () => {
  return (
    <div>
      NewTodo
    </div>
  )
}
app/javascript/components/TodoList.js
import React from 'react'

export const TodoList = () => {
  return (
    <div>
      TodoList
    </div>
  )
}

http://localhost:3000/todoesを確認してみましょう。
スクリーンショット 2021-11-01 12.38.01.png
これまた隠れてますけどAppと出力されてますね！

Appと出力される流れを確認します。

app/views/layouts/application.html.erb
<%= javascript_pack_tag 'index' %>

ここで以下が呼び出され

javascript/packs/index.jsx
document.addEventListener('DOMContentLoaded', () => {
  ReactDOM.render(
    <BrowserRouter>
      <App />
    </BrowserRouter>,
    document.querySelector('#root'),
  );
});,

この記述で、<App />をdocument.querySelector('#root')で取得した以下のファイルに描画し

app/views/top/index.html.erb
<div id="root"></div>

出力されます。

2.5 App.jsの記述

App.jsxでは全てのページに共通するヘッダー部分とルーティングの記述をしていきます。完成形は以下の通りです。

では実装していきましょう！

app/javascript/components/App.js
import React from 'react'
import { Link } from 'react-router-dom'
import styled from 'styled-components'
import './App.css'

export const App = () => {
  return (
    <div>
      <div>
        TODO
      </div>
      <ul>
        <li>
          <Link to="/todoes">
            Todoes
          </Link>
        </li>
        <li>
          <Link to="/todoes/new">
            NewTodo
          </Link>
        </li>
      </ul>
    </div>
  )
}

以下のインポートを忘れずに...
・　import { Link } from 'react-router-dom'
・　import styled from 'styled-components'
・　import './App.css'

ここにstyleをあてていきます。

app/javascript/components/App.js
import React from 'react'
import { Link } from 'react-router-dom'
import styled from 'styled-components'
import './App.css'

export const App = () => {
  return (
    <Header>
      <Title>
        TODO
      </Title>
      <Actions>
        <Action>
          <Link to="/todoes">
            Todoes
          </Link>
        </Action>
        <Action>
          <Link to="/todoes/new">
            NewTodo
          </Link>
        </Action>
      </Actions>
    </Header>
  )
}

const Header = styled.div`
  background: #ccffcc;
  min-height: 8vh;
  display: flex;
  justify-content: space-around;
  align-items: center;
`

const Title = styled.div`
  font-weight: bold;
  font-size: 24px;
  letter-spacing: 4px;
`

const Actions = styled.ul`
  display: flex;
  width: 400px;
  max-width: 40%;
  justify-content: space-around;
  list-style: none;
`

const Action = styled.li`
  font-size: 20px;
  font-weight: bold;
  opacity: 0.7;
  &:hover {
    opacity: 1;
  }
`

デザインはお好みでどうぞ！この通りならば以下のようになっていると思います！
スクリーンショット 2021-11-01 13.14.18.png

続いてルーティングの実装です。

app/javascript/components/App.js
import React from 'react'
import { Link, Route, Switch } from 'react-router-dom'
import styled from 'styled-components'
import './App.css'
import { EditTodo } from './EditTodo'
import { NewTodo } from './NewTodo'
import { TodoList } from './TodoList'

export const App = () => {
  return (
    <>
      <Header>
        <Title>
          TODO
        </Title>
        <Actions>
          <Action>
            <Link to="/todoes">
              Todoes
            </Link>
          </Action>
          <Action>
            <Link to="/todoes/new">
              NewTodo
            </Link>
          </Action>
        </Actions>
      </Header>
      <Body>
        <Switch>
          <Route exact path="/todoes" component={TodoList} />
          <Route exact path="/todoes/new" component={NewTodo} />
          <Route path="/todoes/:id/edit" component={EditTodo} />
        </Switch>
      </Body>
    </>
  )
}

const Header = styled.div`
  background: #ccffcc;
  min-height: 8vh;
  display: flex;
  justify-content: space-around;
  align-items: center;
`

const Title = styled.div`
  font-weight: bold;
  font-size: 24px;
  letter-spacing: 4px;
`

const Actions = styled.ul`
  display: flex;
  width: 400px;
  max-width: 40%;
  justify-content: space-around;
  list-style: none;
`

const Action = styled.li`
  font-size: 20px;
  font-weight: bold;
  opacity: 0.7;
  &:hover {
    opacity: 1;
  }
`

const Body = styled.div`
  width: 700px;
  max-width: 85%;
  margin: 20px auto;
`

import { Link } from 'react-router-dom'が以下のように編集されてます。
import { Link, Route, Switch } from 'react-router-dom'

・　import { EditTodo } from './EditTodo'
・　import { NewTodo } from './NewTodo'
・　import { TodoList } from './TodoList'
の追記を忘れないようにしてください。

<>
< />
でHeaderタグとBodyタグがかこまれています。

以上でルーティング処理ができているのでTodoes、NewTodoをクリックすると表示が変わるはずです。
スクリーンショット 2021-11-01 13.35.22.png
スクリーンショット 2021-11-01 13.36.31.png

このパートはここまでとしましょう！

2
1
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
Sign upLogin
2
1

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?