13
6

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

More than 3 years have passed since last update.

React素人がいきなりMaterial-UIを使いこなそうとした

Posted at

####私について
Laravelを使ってアプリを作り、そのポートフォリオ作成後にエンジニアとして転職。
なんとなくコードはかけるけど、基礎は全く分かってない。
そんな状態で2019-11-18 エンジニアとしてデビュー。現在Laravel,React.jsを使っています。
2019-12月までReact.jsに関しては全くの無知でした。
そんな素人だけどアウトプットが大事ということで、とにかくやってみます。

#Material-UI
Material-UIとは、マテリアルデザインをReactで可能にするためのUIコンポーネント
初心者の僕にはまずマテリアルデザインとUIコンポーネントが分からない。
・マテリアルデザイン:影などアニメーションで動きをつけ視覚的変化があり、ユーザーにとって分かりやすいデザイン。
・UIコンポーネント:UIはユーザーが見える部分や使用する部分。コンポーネントは、要素。例...ボタンやナビゲーションなど。
つまり、Material-UIを使えば、視覚的に分かりやすく使いやすい画面を簡単に作ることができるのです。

##実際に使ってみたが、、、
React学習2週間ほどの、僕には使うことが難しい!
なぜかというと、Reactには書き方が大きく分けて2つあるからだ!なんで2つもあんの??

qiita.jsx
function Welcome(props) {
  return <h1>Hello, {props.name}</h1>;
}
qiita.jsx
class Welcome extends React.Component {
  render() {
    return <h1>Hello, {this.props.name}</h1>;
  }
}

この2つの書き方にまず混乱してしまいます。基本的にコンポーネントを使う際は上の書き方が普通とされています。
Material-UIでは全て上の書き方(JavaScript の関数)で書かれている。
するとここで、下の書き方(ES6 クラス)の時にどう使えばいいか分からない!

#Material-UIをESクラスに書き込んでみた。
Material-UIのButtonのコンポーネントは以下のように書かれている。

qiita.jsx
import React from 'react';
import { makeStyles } from '@material-ui/core/styles';
import Button from '@material-ui/core/Button';

const useStyles = makeStyles({
  root: {
    background: 'linear-gradient(45deg, #FE6B8B 30%, #FF8E53 90%)',
    border: 0,
    borderRadius: 3,
    boxShadow: '0 3px 5px 2px rgba(255, 105, 135, .3)',
    color: 'white',
    height: 48,
    padding: '0 30px',
  },
});

export default function Hook() {
  const classes = useStyles();
  return <Button className={classes.root}>Hook</Button>;
}

ES6クラスにこのコードを書き込もうとすると、うまくいかない!
以下のコードが書き込めない!!2つの書き方の違いを気づくのに2時間かかりました。。

qiita.rb
   const classes = useStyle();

そこで、、、、
#スタイル付きコンポーネントAPIを使う。

qiita.jsx
import React from 'react';
import { styled } from '@material-ui/core/styles';
import Button from '@material-ui/core/Button';

const MyButton = styled(Button)({
  background: 'linear-gradient(45deg, #FE6B8B 30%, #FF8E53 90%)',
  border: 0,
  borderRadius: 3,
  boxShadow: '0 3px 5px 2px rgba(255, 105, 135, .3)',
  color: 'white',
  height: 48,
  padding: '0 30px',
});

class Book extends Component{
  return <MyButton>Styled Components</MyButton>;
}

この書き方でMaterial-UIのcomponentsを使うことができた。
という解釈でいいのか分からないけど、これで使えた。
なにか他にいいのがあれば教えてください。

13
6
2

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
13
6

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?