React/Reduxでカレンダーアプリケーションを作って学んだことなど #JavaScript

React/ReduxでGoogleカレンダー風カレンダーアプリケーションを作ろうというチュートリアルを完走しました。

まだ完全に理解はできていませんが、学んだことをつらつらと書いて行こうと思います。

このチュートリアル、かなりおすすめです。

学んだこと

ディレクトリ構成

src
  - components
    - hoge
      - presentation.jsx
      - container.jsx
  - redux
    - foo
      - actions.js
      - reducer.js
    - rootReducer.js
  - services
    - api.js
    - calendar.js
  - index.jsx

コンポーネントは見た目とロジックでファイルを分ける

絶対のルールじゃないけど、そうした方が無難っぽい。Reactはディレクトリの構造にいくつかの流派があるみたい。Railsが恋しい。

src
  - components
    - Navigation
      - presentation.jsx (見た目)
      - container.jsx (ロジック)

Redux

以下のような構成をとった。reducerをいくつか作って対応するactionと同じディレクトリに格納して、rootReducerで全てを束ねる。

index.js
component
redux
  - foo
    - actions.js
    - reducer.js
  - bar
    - actions.js
    - reducer.js
  - rootReducer.js

複数のコンポーネントで汎用的に使えそうなメソッドは`services`においた

servicesって名前はプロジェクトによってまちまちらしいけど、同じような目的のディレクトリを作る場合が多いっぽい

import

import React from "react" // export defaultを受け取る場合は直接変数に
import { Provider } from "react-redux" // exportを受け取る時はオブジェクトに;

Arrow functionでただオブジェクトを返す時は()で囲む

const mapStateToProps = (state) => ({
  calendar: state.calendar,
  schedules: state.schedules,
});

mapの後にHTML要素がくる時は`{}`ではなく`()`で囲む

{days.map((d) => (
  <li key={d}>
    {d}        
  </li>
))}

スプレッド演算子で展開後、カンマで区切って部分的に値を更新できる

{ ...state, isStartEdit: true }; //isStartEditの値だけ上書きされる

material-uiを使うといい感じのコンポーネントやアイコンを簡単に実装できる

npm i @material-ui/core @material-ui/icons

import React from "react";
import { Tooltip, IconButton } from "@material-ui/core";
import { Close } from "@material-ui/icons";

const close = () => {
  return (
    <Tooltip title="閉じる" placement="bottom">
      <IconButton>
        <Close />
      </IconButton>
    </Tooltip>
  );
};

material-ui
Tooltip、TextFieldなどのフォーム要素全般、Snackbar、Pagination、Progress、Table、Buttonあたりはかなり使えそう。

逆に、レイアウトを整えたりするのは自分でCSSで整えた方が小回りがきくし、コードの見通しもよくなる気がする。Bootstrapがそうであったように。

クラスを大量につけるのとかも、見通し悪くなるし保守性下がるからやらないだろうな。

疑問点

src/redux/schedules/effects.jsとかいうファイルがいきなり出てきたけどこれは何?actionとreducerだけを格納すると思っていたディレクトリにいきなり変なファイルが出てきてびびる。

感じたこと

importをたくさん書かなくちゃ行けなくてめんどくさい。Railsが恋しい。
ファイルが色々分割されてめんどくさい。特にreducer関連とコンポーネントが離れる感じ。
長めのチュートリアルは途中から何をしようとしてるのかわからなくなって、楽しくなくなる。書かされてる感じ。でも全体の流れはつかめたし、答えのコードもあるので、これをベースに自分で実装していくと楽しく力がつくだろう。
似たような名前のオブジェクトとか変数とかがたくさんあって、どれを使ってるのかがわからなくなった

React/Reduxでカレンダーアプリケーションを作って学んだことなど