概要
みなさんこんにちはcandleです。今回はSemantic UIを使ってReactのデザイン開発をして見たいと思います。
Semantic UIはCSSフレームワークの1つで他に有名なところはTwitter Bootstrapなどがあります。
一方でSemantic UIは用意されているコンポーネントのシンプルさと使い勝手の良さが評価されています。
前提
create-react-app コマンドが入っている
react プロジェクトを作成
適当なフォルダで、以下のコマンドを時刻して、reactプロジェクトを作成します。
create-react-app hello_sematic cd hello_semantic
semantic-ui-cssライブラリのインストール
semantic-ui-cssはsematic-ui用のcssを提供するライブラリです。
semantic-ui-reactはreactのコンポーネントだけを提供するライブラリなので、スタイリングはこっちが請け負っています。
yarn add semantic-ui-css
cssをimportします。
src/index.jsを開いて、上の方に以下を記述します。
import 'semantic-ui-css/semantic.min.css'
semantic-uiで使用するcssの読み込みができました。
semantic-ui-reactライブラリのインストール
次に、react用のコンポーネントライブラリのsematic-ui-reactをインストールします。
このライブラリはReactのJSXで使えるコンポーネントをあらかじめ用意してくれています。
yarn add semantic-ui-react
以上です。
Semantic-ui-reactのコンポートを使ったサイト作成
詳しくは下記のドキュメントを参考にしてください。
src/App.jsを開いて、以下のように書き換えます。
import { Container, Divider, Header, Segment, Table } from 'semantic-ui-react' import React, { Component } from 'react' class App extends Component { render() { return ( <Container text style={{ marginTop: '7rem' }}> <Header as="h2">概要</Header> <Divider /> <Table basic="very"> <Table.Header> <Table.Row> <Table.HeaderCell>項目</Table.HeaderCell> <Table.HeaderCell>内容</Table.HeaderCell> </Table.Row> </Table.Header> <Table.Body> <Table.Row> <Table.Cell>Sematic-UIとは</Table.Cell> <Table.Cell>CSSフレームワークの1つである</Table.Cell> </Table.Row> <Table.Row> <Table.Cell>Reactとの相性は?</Table.Cell> <Table.Cell>公式がReactライブラリを提供しているので安定感がある</Table.Cell> </Table.Row> </Table.Body> </Table> <Header as="h2">公式サイト</Header> <Divider /> <Segment> <Header as="h3">公式ドキュメント</Header> <a href="https://react.semantic-ui.com"> https://react.semantic-ui.com</a> </Segment> <Segment> <Header as="h3">Github</Header> <a href="https://github.com/Semantic-Org/Semantic-UI-React"> https://github.com/Semantic-Org/Semantic-UI-React </a> </Segment> <Header as="h2">解説</Header> <Divider /> <p>このように、あらかじめ用意されているコンポーネントを利用して、綺麗なサイトを作成できる。</p> </Container> ) } } export default App
このように表示されます。
semantic-ui-reactを使ったreact開発
具体的に、どのように、Sematic-UIのコンポーネントを使って開発したら良いかはドキュメント見ることをオススメします。
例えば、Buttonコンポーネントの使い方を見て見ましょう
以下のサイトに移動して
https://react.semantic-ui.com/elements/button/
基本的なButtonコンポーネント使い方のサンプルが書かれています。
一番上の「Button」のセグメント見ますと、右端に「>」記号があります。これをクリックすると、ReactのJSXのコードが展開されます。
これを真似て自分のコードに書けば利用できます。
また、sematic-ui-reactのコンポーネントは多くのプロップスを受け取れます。
どのような値があるかはサイト上部の「Props」の「Button」をクリックすると表示されます。
Buttonコンポーネントは多くのプロップスがありますね。
それぞれのコンポーネントとプロップス、サンプルなどをみて、サイトを設計して見てください。
まとめ
cssフレームワークは大雑把なサイト制作の時には素早く作ることができます。
一方で、凝ったデザインを施したサイトを作りたい場合は融通が効かないことが多いです。
用途に合わせて適切に使っていきましょう。