barontommy/doc

doc's Issues

ディレクトリ構成

https://qiita.com/taneba/items/4547830b461d11a69a20

• 命名ルール

コンポーネントのラッパー：Wrapper, Box, Containerなど
個-集合の関係にあるコンポーネント：Item-ItemList、Item-Items、Item-ItemGroupなど
レイアウト用途のもの：Flex, Fixed等

• 簡単なやつ

src
├── App
│   ├── Header
│   │   ├── Logo.js    
│   │   ├── Title.js   
│   │   ├── Subtitle.js
│   │   └── index.js
│   └── Footer
│       ├── List.js
│       ├── ListItem.js
│       ├── Wrapper.js
│       └── index.js
├── shared
│   ├── Button.js
│   ├── Card.js
│   ├── InfiniteList.js
│   ├── EmojiPicker
│   └── Icons
└── index.js

• 重厚なやつ

src
├── Atoms
│   ├── button
│   │   ├── button.js
│   │   ├── index.js
│   │   └── extended-button.js
│   ├── heading
│   │   ├── h1.js
│   │   ├── h2.js
│   │   ├── h3.js
│   │   ├── index.js
│   ├── icons
│   │   ├── icons.js
│   │   ├── index.js
│   ├── input
│   └── ├── checkbox.js
│       ├── index.js
│       ├── text-input.js
│       └── textarea.js
├── Molecules
│   ├── calendar
│   │   ├── calendar.js
│   │   ├── index.js
│   │   └── week.js
│   ├── modal
│   └── ├── index.js
│       └── modal.js
├── Organisms
│   ├── footer
│   └── ├── footer.js
│       └── index.js
├── Ecosystems
│   ├── users
│   │   ├── users.js
│   │   ├── friend.js
│   │   └── index.js
│   ├── books
│   │   ├── books.js
│   │   ├── index.js
│   │   └── book.js
│   └── login
│       ├── login.js
│       └── index.js
└── Environments
    ├── default-template
    │   └── index.js
    └── specific-template
        └── index.js

ちゃーはん 大盛りで

https://qiita.com/kahirokunn/items/b599d2cf04d2580c412c

DDD

https://github.com/almin/almin

giffffff

brew install ffmpeg
brew install imagemagick

cd 動画のあるディレクトリ
ffmpeg -i sample.mp4 -an -r 10 %04d.png  // 10frames/secでpng作成
convert *.png -resize 40% output_%04d.png  // 作成したpngを40%にリサイズ
convert output_*.png result.gif  //  gifに変換

Single File Component

Vue.js の文脈にある「Single File Component」

// これだけ
export default Container


// (1) import層
import React from 'react'
import styled from 'styled-components'

// (2) Types層
type ContainerProps = {...}
type Props = {...} & ContainerProps

// (3) DOM層
const Component: FC<Props> = props => (
  <div className={props.className}>
    <button onClick={props.handleClick}>
      {props.flag ? "click me" : "CLICK ME"}
    </button>
  </div>
);

// (4) Style層
const StyledComponent = styled(Component)`
  > button {
    ...;
  }
`;

// (5) Container層
const Container: FC<ContainerProps> = props => {
  const [flag, setFlag] = useState(false);
  const handleClick = useCallback(() => {
    setFlag(!flag);
  }, [flag]);
  return <StyledComponent {...props} flag={flag} handleClick={handleClick} />;
};

x

機能追加をしたい

• issueを立てる
• clickイベントの処理実装
• ブラウザで動作確認
• 機能追加のフィードバック
• ドラッグアンドドロップ

x

model パターン

https://blog.yuhiisk.com/archive/2017/07/10/frontend-spa-with-model.html

const postsState = new PostsModel();

function reducer(state = postsState, action) {
  switch (action.type) {
    // データの追加
    case ActionTypes.GET_POSTS:
      return state.add(action.posts);

    // データの削除
    case ActionTypes.REMOVE_POST:
      return state.remove(action.index);

    // データの更新
    case ActionTypes.UPDATE_POST:
      return state.update(action.data);

    // チェックボックスのトグル
    case ActionTypes.TOGGLE_CHECK:
      return state.toggleCheck(action.id);

    default:
      return state;
  }
}

import { Record } from 'immutable';

const PostsRecord = Record({
  posts: [], // 取得データ
});

class Posts extends PostsRecord {

  /**
   * データの追加
   * @param {array} data - 取得したデータ配列
   */
  add(data) {
    return this.set('entries', this.get('posts').concat(data));
  }

  /**
   * データの削除
   * @param {number} id - postのid
   */
  remove(id) {
    const _posts = this.get('posts').filter((post) => post.id !== id);
    return this.set('posts', _posts);
  }

  /**
   * データの更新
   * @param {object} data - postオブジェクト
   */
  update(data) {
    const _posts = this.get('posts').map((post) => {
      if (post.id === data.id) {
        return data;
      }
      return post;
    });
    return this.set('posts', _posts);
  }

  /**
   * チェックのトグル
   * @param {number} id - postのid
   */
  toggleCheck(id) {
    const _posts = this.get('posts').map((post) => {
      if (post.id === id) {
        post.checked = !post.checked;
      }
      return post;
    });
    return this.set('posts', _posts);
  }

}

export default Posts;