2019-08-01

[React]Hooks

はじめに

Hooksを勉強していきたいと思います。

ちなみに、コードはReactの公式サイト(?)から引用しています。

Hooks

import React, { useState } from 'react';

function Example() {
  // Declare a new state variable, which we'll call "count"
  const [count, setCount] = useState(0);

  return (
    <div>
      <p>You clicked {count} times</p>
      <button onClick={() => setCount(count + 1)}>
        Click me
      </button>
    </div>
  );
}

使ってみた感想としては、すごく使いやすいなと思いました。
[count]がstateで、[setCount]がcountを扱う関数の認識です。
setCountについては、classコンポーネントのsetStateと同じ感覚ですね。

まとめ

Hooksを使えば、コンポーネント分けがすごく楽になりますし、CSS in JSも書きやすいなと思います。

2019-07-27

[Github]色々なルールを考えてみる

はじめに

最近commitのコメントやタイミングが曖昧になってきてる気がするので
ここでルールを決めようと思います。

Writing good commit messages

以下を参考にしています。
github.com

基本

最初のコミットメッセージは"initial commit"で統一する。
コミットメッセージは1文で書く。(無理な場合は、コミットを分ける。)
ファイルに変更があれば、その都度コミットをする。

メッセージ

コミットメッセージは、以下の動詞と共に書き始めてください。

Add, Change, Fix

簡潔に書く。

2019-07-23

[サイト紹介]お世話になっているサイト

はじめに

画面レイアウトの設計をしていて、お世話になっているサイトを紹介します。

画像

RGBと16進数カラーコードの相互変換ツール

www.peko-step.com

指定した色を透明にすることができます。

色

RGBと16進数カラーコードの相互変換ツール

www.peko-step.com

RGBを指定して、そのカラーコードを取得できます。

2019-07-23

[CSS]文字を折り返す。

はじめに

CSSを使って文字を折り返してみます。

「word-wrap: break-word;」を使えば解決します。

word-wrap: break-word; なし

word-wrap: break-word; あり

2019-07-22

[React]propTypesとは。

はじめに

PropTypesとは、コンポーネントが受け取るプロパティ(props)の型を宣言することができます。

使い方

記述中

2019-07-19

[React]Material-UI

React

はじめに

Material-UIは、文字通りUIに関するもので、Reactのフレームワークです。
今回は、Material-UIを使ってボタンを描画していきます。

英語のサイトですが、特に英語がわかる必要はありません。

■Material-UI
material-ui.com

■Material-UI Installation
material-ui.com

Material-UIの導入

今回は、Material-UIを使って、ボタンをカッコよくしてみます。

HTMLのタグでボタンを導入した場合

<button>
  {'Normal button'}
</button>

■描画結果

Material-UIのコンポーネントでボタンを導入した場合

<Button variant="contained" color="primary">
  {'Material-UI button1'}
</Button>

■描画結果

colorの部分をsecondaryに変更することによって、色が変わります。
■描画結果

Button APIのPropsとCSSについては、以下を参考にしてください。
material-ui.com

■ソースコード

▶ソースコードを表示する。

/* React */
import React, { Component } from 'react'
import ReactDOM from 'react-dom'

/* Material-UI */
import MuiThemeProvider from 'material-ui/styles/MuiThemeProvider'
import Button from '@material-ui/core/Button'

class Buttons extends Component {

  render() {
    return (
      <div>
        <button>
          {'Normal button'}
        </button>

        {/* Material-UIを使う場合、MuiThemeProviderで囲ってください。 */}
        <MuiThemeProvider>
          <Button variant="contained" color="primary">
            {'Material-UI button1'}
          </Button>

          <Button variant="contained" color="secondary">
            {'Material-UI button'}
          </Button>
        </MuiThemeProvider>
      </div>
    )
  }
}

ReactDOM.render(
  <Buttons />,
  document.getElementById('app')
)

Githubにソースコードがあります。
GitHub - thomasJs8/react_samples: Sample codes are here.
∟03-material-ui.js

まとめ

簡単に見やすくてカッコよいUIができますね。
どのコンポーネントでも簡単に使えるため、是非活用したいと思います。

2019-07-15

[React]map()を使ってみる。

React

はじめに

Reactでmap()を使ってみました。
今回は、連想配列の内容を描画したいと思います。

連想配列の要素とmap()による描画

連想配列の要素

this.state = {
  associativeArray: [
    { number: 0, content: 'Hello' },
    { number: 1, content: 'Bye' }
  ],
}

今回は、コンポーネントのstateに連想配列[associativeArray]を定義しました。
要素は以下の通りです。

number	content
0	'Hello'
1	'Bye'

map()による描画

実際にmap()を使って、連想配列[associateveArray]の要素を描画します。
今回は、テーブルを使います。

<table>
  {this.state.associativeArray.map((array) =>
    <tr key={array.number}>
      <td>{array.number}</td>
      <td>{array.content}</td>
    </tr>
  )}
</table>

map()の中でタグ[tr]と[td]を使って描画をしています。
1つだけ注意点があります。
それは key の存在です。
map()を使って要素を描画する場合
各要素のkeyを一意になるように指定しなければなりません。

■ソースコード

▶ソースコードを表示する。

/* React */
import React, { Component } from 'react'
import ReactDOM from 'react-dom'

class ReactMap extends Component {
  constructor(props) {
    super(props)
    this.state = {
      associativeArray: [
        { number: 0, content: 'Hello' },
        { number: 1, content: 'Bye' }
      ],
    }
  }

  render() {
    return (
      <table>
        {this.state.associativeArray.map((array) =>
            <tr key={array.number}>
              <td>{array.number}</td>
              <td>{array.content}</td>
            </tr>
        )}
      </table>
    )
  }
}

ReactDOM.render(
  <ReactMap />,
  document.getElementById('app')
)

Githubにソースコードがあります。
GitHub - thomasJs8/react_samples: Sample codes are here.
∟02-react-map.js

まとめ

javascriptのmap()と特に使い方は変わらないので(当たり前ですが)
簡単でした。(keyだけ注意です。)