MegaBlackLabel

# コミケカタログビューア(案)

## 概要
WEBカタログではネットワーク状況が悪いコミケ会場では使いにくい。
会場でも使いやすくするために以下の改善をする

- sql.jsとIndexedDBを使ってローカルにデータを保存する
- PWAアプリ化してサーバへのアクセスを最小限にする
- データをGoogle driveにバックアップできるようにする

MegaBlackLabel

# See https://github.com/golangci/golangci-lint/blob/master/.golangci.example.yml
run:
linters-settings:
  govet:
    enable-all: true
    disable:
      - shadow
  unused:
    check-exported: true
  unparam:

MegaBlackLabel

実装から学ぶクリーンアーキテクチャ

クリーンアーキテクチャはRobert C. Martin(Uncle Bob)が2012年に提唱した、DBやフレークワークからの独立性を確保するためのアーキテクチャであり、以下の図が大変有名です。

最初にクリーンアーキテクチャについて言及されたブログが書かれてからは既に7年が経過しており、書籍Clean Architecture 達人に学ぶソフトウェアの構造と設計をはじめ、日本語での情報も十分存在します。 しかし私が学び始めた時、以下の理由で理解が難しいと感じました。

• DDDの概念や用語を流用しているが、レイヤーに関する考え方はDDDとは異なる

MegaBlackLabel

#!/bin/sh

if [ $# != 2 ]
then
	echo 'Usage: upload_dropbox.sh <file> <token>'
	exit 1
fi

filename=XXXXX.pdf

MegaBlackLabel

{
  "extends": [
    "tslint:latest",
    "tslint-config-airbnb",
    "tslint-config-prettier",
    "tslint-eslint-rules",
    "tslint-react"
  ],
  "rulesDirectory": [
    "tslint-plugin-prettier"

MegaBlackLabel

import { Context } from 'next'
import Head from 'next/head'
import * as React from 'react'
import { compose, lifecycle, pure, wrapDisplayName } from 'recompose'

function withInitialProps<Props>(provider: (context: Context) => object) {
  return (BaseComponent: React.ComponentType<Props>) => {
    return class extends React.Component<Props> {
      public static displayName = wrapDisplayName(BaseComponent, 'withInitialProps')
      public static async getInitialProps(context: Context) {

MegaBlackLabel

import StoreProvider from './StoreProvider';

const increment = { type: '@counter/increment' };
const decrement = { type: '@counter/decrement' };

const initialState = { count: 0 };

const reducer = (state = initialState, action) => {
    switch (action.type) {
        case increment.type:

MegaBlackLabel

import * as React from 'react';
import { compose, lifecycle, pure, StateHandler, StateHandlerMap, withStateHandlers } from 'recompose';
import { Message, Transition } from 'semantic-ui-react';

import './FlashMessage.css';

export interface FlashMessageProps {
  message: string;
  isWarning?: boolean;
}

MegaBlackLabel

import React, { PureComponent } from 'react';
import Animate from 'react-move/Animate';
import { easeExpOut, easeExpIn, easeCircleOut, easeSinIn, easeSinOut, easeCubicInOut } from 'd3-ease';
import styled from 'styled-components';
import { compose, lifecycle, pure, withHandlers, withStateHandlers } from 'recompose';

const Rect = styled.div.attrs({
  opacity: props => {
    const width = props.x - (props.order - 1) * 60;
    return props.order === "1" ? 0.7 : props.opacity;

MegaBlackLabel

import { emptyObject } from 'fbjs/lib/emptyObject';
import { connect } from 'react-redux';
import { pushState } from 'redux-router';
import pure from 'recompose/pure';
import defaultProps from 'recompose/defaultProps';
import doOnReceiveProps from 'recompose/doOnReceiveProps';
import renderNothing from 'recompose/renderNothing';
import renderComponent from 'recompose/renderComponent';
import branch from 'recompose/branch';
import compose from 'recompose/compose';