観賞魚のWikiを自作する日記シリーズ 〜Reactの準備とメニューバーの作成〜

はじめに

今日はReact+TypeScriptの環境構築とメニューバーの作成まで行こうと思う。

今後使うRailsのWebAPI（アカウント作成）

既に適当に作っているのでRailsでのWebAPI作成の記録は割愛。
現在以下のような仕様のAPIがある。

POST http://localhost:3000/api/v1/users

リクエストに必要なパラメーター

• name
  • 30文字まで
  • 英数字とハイフンのみ使える。
• email
  • 255文字まで
• password
  • 6-50文字

example

{
  "name": "takashi",
  "email": "takashi@example.com",
  "password": "hogefugapiyo"
}

レスポンス

SUCCESS http response 200 ok

メールがメアドに送られる。

{
    "message": "activation mail has been sent"
}

FAILED http response 400 bad request

エラーの配列が返ってくる

[
    {
        "messages": [
            "has already been taken"
        ],
        "key": "name"
    },
    {
        "messages": [
            "has already been taken"
        ],
        "key": "email"
    }
]

まずは後数回の記事でこのAPIを使うフロントを作ろうと思う。

Reactの準備

> create-react-app aquariumpedia-front --template typescript

以上のコマンドでtypescript+Reactなプロジェクトを作成した。

とりあえず動かしてみる

> yarn start

動いた。

生成されたファイルを確認してみる。

Reactはそこまで詳しくないのでわからないのだが、とりあえずはこれで良さそうである。動いているからヨシ！Webpackとか何も入ってないけどいまのところはヨシ！

src配下を全部消して、とりあえず動くものを作っていこうと思う。

今回はなうでヤングなアローファンクションとHOOKSを使ってコンポーネントを作っていく。

最初の一歩

とりあえずいつもの通りにエントリーポイントを作っていく。

index.tsx

import React from 'react';
import ReactDOM from 'react-dom';
import { App } from './App';

ReactDOM.render(<App></App>, document.getElementById("root"));

index.htmlにはrootというIDのついたDOMがあるので、そこにAppというコンポーネントを表示する。

つぎにApp.tsxと言うファイルを作り、そこに最初の単純なコンポーネントを作っていく。

App.tsx

import React from "react";


export const App: React.FC<{}> = () => {
  return <div>hello, world</div>;
}

表示できたかな・・・？

無事にハローワールドしている。

DOMの中身もOK。

拡張していこう。

メニューバーのコンポーネント

かっこいいメニューバーを作っていこうと思う。

イメージとしてはこうだ

雑さには目を瞑って欲しい。伝わればいいのだ。

真ん中に検索、右側に鉛筆マークとアカウントマーク、左にロゴ。

アカウントマークにマウスオーバーするとウィンドウが出てきてログインか新規登録を選ばせるようにしたい。
ログイン後はマイページを司る。

鉛筆マークは投稿ボタンだ。

とりあえずcomponentsと言うフォルダを作り、その中にMenuBar.tsxと言うファイルを作る。

その中身を編集し、とりあえず表示したいものを並べてみる。

MenuBar.tsx

import React from "react";

export const MenuBar: React.FC = () => {
  return (
  <div>
    <div>logo</div>
    <div>search</div>
    <div>account</div>
    <div>write</div>
  </div>
  );
}

とりあえず縦に並んだ。横にして色をつけてあげよう。

色々と変なところはあるが、とりあえずはモックとしてはこれでいいだろう。
ボタンを画像などに差し替えてあげればそれらしくなりそうだ。

今日の作業をGitに保存しておく。

> git add -A
> git commit -m"add: menu bar mock"

我ながら雑なコミットだが許して欲しい。
masterブランチに直接コミットしている時点で神の怒りを買う恐れがあるので、次からはトピックブランチを切っていく。
また、ESLintやPrittierなどの設定もどうなっているかわからないので、次回で設定してしまいたい。

いちおうGitHubへプッシュしておいた。

GitHub - kotarou1192/aquariumpedia-front

今日はここまで。続く。