akinogu

### npm
#### コマンド-install
このコマンドにより、node-modulesディレクトリが作成され、
ライブラリがインストールされる。
- current directory only
```
npm install [???]
```

- install global

akinogu

- install rbenv
```
anyenv install rbenv
```

- update fish config file
通常の記述だとエラーになってしまうため、↓のように記述。
```
# rbenv
set -x RBENV_ROOT "$HOME/.anyenv/envs/rbenv"

akinogu

## readline
```
> brew install readline
> brew link readline --force (= シンボリックリンクをつける)
> brew --prefix readline (= 場所を確認)

> set RUBY_CONFIGURE_OPTS "--with-deadline-dir=(brew —prefix readline)" (fishの場合)
> rbenv install 2.5.0
```

akinogu

## つまりどこ
### github pagesにdemo公開
https://akinogu.github.io/simple-react-slider/

#### 画像が表示されない
`file-loader`と`url-loader`をインストール。
file名を指定したいので、loaderにfile-loaderを指定し、`options.name`も追加。
outputPathも追加。

```js

akinogu

import styled, { ThemeProvider } from 'styled-components'

const Button = styled.button`
  color: ${p => p.theme.color}; // ← green
`
export const App = () => {
  return (
    <ThemeProvider theme={{ color: 'green' }}>
      <Button>Themed</Button>
    </ThemeProvider>

akinogu

import { createContext, useContext, useState } from 'react'
import { ThemeProvider as StyledThemeProvider } from 'styled-components'

const ThemeContext = createContext({
  setColor: (_: string) => {}
})

export const ThemeProvider: React.FC = ({ children }) => {
  // デフォルト値としてblueを指定
  const [color, setColor] = useState('blue')

akinogu

import { useEffect } from 'react'
import styled from 'styled-components'
import { useTheme } from './util/Theme'

const Text = styled.div`
  color: ${p => p.theme.color};
`
const App = () => {
  const { setColor } = useTheme()

akinogu

import 'styled-components'

declare module 'styled-components' {
  export interface DefaultTheme {
    // ここに今回設定する型を定義
    color: string
  }
}

akinogu

{
  "name": "Next.JS Progressive Web App Sample",
  "short_name": "next pwa sample",
  "theme_color": "#ffffff",
  "background_color": "#004740",
  "display": "standalone",
  "orientation": "portrait",
  "start_url": "/",
  "icons": [
    {

akinogu

// pages/_document.tsx
import Document, { Html, DocumentContext, Head, Main, NextScript } from 'next/document'

class MyDocument extends Document {
  static async getInitialProps(ctx: DocumentContext) {
    const initialProps = await Document.getInitialProps(ctx)
    return { ...initialProps }
  }

  render() {