🗂

無理なく始めるゆるっとReact #26 TODOアプリの作成① ローカルサーバーと用意したサーバーと通信できるようにする

3 min read

TODOアプリの作成

これまで学んできたことを応用してTODOアプリを作成していきます。
少し長くなると思うので、1日で軽くできるTODOごとに記事にしていきます。

開発環境の準備

まずは開発環境を準備します。

npx create-react-app 任意のディレクトリ名

で環境を構築しましょう。
次に不要なファイルやコードを消していきます。

不要ファイル一覧

  • App.css
  • App.text.js
  • index.css
  • logo.svg
  • reportWebVitals.js
  • setupTests.js

不要な記述削除

削除したファイルが読み込んでいる記述も削除していきます。

App.js
 //修正前-----------------------------------------------------------
import logo from './logo.svg';
import './App.css';

function App() {
  return (
    <div className="App">
      <header className="App-header">
        <img src={logo} className="App-logo" alt="logo" />
        <p>
          Edit <code>src/App.js</code> and save to reload.
        </p>
        <a
          className="App-link"
          href="https://reactjs.org"
          target="_blank"
          rel="noopener noreferrer"
        >
          Learn React
        </a>
      </header>
    </div>
  );
}

//修正後-----------------------------------------------------------
function App() {
  return (
    <p>適当な文字列を入れます</p>
  );
}

export default App;
index.js
//修正前-----------------------------------------------------------
import React from 'react';
import ReactDOM from 'react-dom';
import './index.css';
import App from './App';
import reportWebVitals from './reportWebVitals';

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

// If you want to start measuring performance in your app, pass a function
// to log results (for example: reportWebVitals(console.log))
// or send to an analytics endpoint. Learn more: https://bit.ly/CRA-vitals
reportWebVitals();

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

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

これでファイル側の準備はOKです。

ローカルサーバーのセッティング

Node.jsのライブラリJSON Serverを使います。

yarn add json-server --dev

package.jsonと同じ階層にdb.jsonを作成します。

db.json
{
  "todos":[
    {
      "id": 1,
      "content": "ローカルで使えるサーバーを用意する",
      "done": true
    },
    {
      "id": 2,
      "content": "サーバーで利用するデータを作成する",
      "done": false
    },
    {
      "id": 3,
      "content": "用意したデータの表示を確認する",
      "done": false
    }
  ]
}

データができたらyarn startで起動させます。
次にサーバーを起動させます。

npx json-server --watch db.json --port 3100

--watchをつけるとdb.jsonの更新を監視してくれます。
--port 3100で任意のポート番号を指定できます。

http://localhost:3100/todosに接続することでdb.jsonに作成したJSONデータがブラウザに表示されると思います。

サーバーと通信できるようにする

HTTP通信を行うためのNode.jsのライブラリaxiosをインストールします。
GETやPOSTのHTTPリクエストを使ってデータの取得や更新ができます。

yarn add axios

インストールが終わったあと下記のように記述することで利用できます。
定義したtodoDataUrlを利用してデータの取得や更新追加を行います。

App.js
import axios from 'axios';

const todoDataUrl = 'http://localhost:3100/todos';

Discussion

ログインするとコメントできます