o-gi

export class FetchUrlError extends Error {
  constructor(
    message: string,
    public status: number = 500,
    public body: any = null,
  ) {
    super(message);
    this.name = "FetchUrlError";
  }
}

o-gi

// Generated types from GraphQL Code Generator
import { Mutation, Query } from "@/gql/graphql";

export type QueryKeys = keyof Query;
export type MutationKeys = keyof Mutation;

interface FetcherOption {
  query: string;
  variable?: Record<string, any>;
  tags?: string[]; // TODO: It's prefer to use Union type of QueryKeys?

o-gi

@function pxToRem($value) {
  $remValue: ($value / 16) + rem;
  @return $remValue;
}

@mixin font-size() {
  $font-size-list: 10 11 12 14 16 20 24 28 32 40 64;
  
  @each $value in $font-size-list {
    .text-#{$value} {

o-gi

Failed to load resource: the server responded with a status of 404 ()

engine-a32392a848.js:24 Uncaught (in promise) TypeError: Cannot read properties of undefined (reading 'getAllPaths')
    at t.serializeTreeToStructureUpdate (engine-a32392a848.js:24:314541)
    at n.update (engine-a32392a848.js:9:578374)
    at n.update (engine-a32392a848.js:9:400840)
    at e.onUpdate (engine-a32392a848.js:20:399552)
    at t.onLoadCanvasUpdate (engine-a32392a848.js:20:867534)
    at t.<anonymous> (engine-a32392a848.js:20:870693)
    at engine-a32392a848.js:9:71600

o-gi

// 関数
function test (arg: string) {
  console.log(arg)
}

// 関数の別の書き方
const test = (arg: string) => {
  console.log(arg)
}

o-gi

ReactのStateとファイル/フォルダパターンについて

https://twitter.com/t4traw/status/1485750991844933633

今回のハンバーガーメニューボタンをタップしたあとにサイドバー（Drawer）を開閉したいというパターンについて 個人的に下記のやり方が良いんじゃないかなと思いました。

おすすめフォルダ構成

o-gi

/*
  with babel-plugin-import
  https://material-ui.com/guides/minimizing-bundle-size/
*/

/* eslint-disable react/jsx-props-no-spreading */
import { Box, BoxProps } from "@material-ui/core";
import { styled } from "@material-ui/core/styles";

type StyledAspectRatioProps = {

o-gi

/* eslint-disable react/jsx-props-no-spreading */
import { Button, ButtonProps, SvgIcon } from "@material-ui/core";
import { styled, Theme, withTheme } from "@material-ui/core/styles";
import { ComponentChildren, FunctionalComponent } from "preact";

type Size = "lg" | "md" | "sm" | undefined;
type Color = "primary" | "dark" | "white" |;

export interface AppButtonProps extends ButtonProps {
  children: ComponentChildren;

o-gi

import { Button, ButtonProps, withTheme } from "@material-ui/core";
import { Palette } from "@material-ui/core/styles/createPalette";
import React, { ComponentType } from "react";
import styled from "styled-components";

type StyledSize = "lg" | "md" | "sm" | undefined;
type StyledColor = "primary" | "dark" | "white";

export interface Props extends ButtonProps {
  children: React.ReactNode;

o-gi

$breakpoints: (
    'sm': 'screen and (max-width: 480px)',
    'md': 'screen and (min-width: 481px)',
    'lg': 'screen and (min-width: 1000px)',
    'xl': 'screen and (min-width: 1200px)',
    'all': 'screen and (min-width: 0px)',
) !default;

@mixin mq($breakpoint) {
    @if map-has-key($breakpoints, $breakpoint) {