GatsbyプロジェクトにSemantic UIを組み込む
2019-07-22
GatsbyプロジェクトにSemantic UIを組み込みます。
SemanticUIは、UIパーツのフレームワークです。
因みに、このようなジャンルではTwitter製のBootstrapがよく使われています。
土台となるプロジェクトは、『TypeScript用のGatsbyプロジェクトを作成する』で作成していたプロジェクトを使用します。
また、特にカスタムのテーマなどは使用せず、デフォルトのままとします。
以下の手順で進めます。
- モジュールのインストール
- CSSファイルのインポート
- コンポーネントの置き換え
モジュールと型定義ファイルをインストールします。
yarn add semantic-ui-css semantic-ui-reactyarn add --dev @types/semantic-uiプロジェクトの全体に反映させるため、レイアウト定義部分に組み込みます。
// ./src/components/layout.tsx
import 'semantic-ui-css/semantic.min.css';いくつかのコンポーネントを Semantic UI のものへと置き換えます。
ただし、Semantic UI の Header コンポーネントと、本プロジェクトでの Header コンポーネントの名前が被っています。
そのため、Semantic UI の Header コンポーネントを SUHeader と名前を変えてインポートすることにします。
今回は以下の部分を変更します。
| 変更前 | SemanticUIコンポーネント |
|---|---|
| Nabvarに該当する部分(div) | Menuを用いる。 |
| h1 | Headerを用いるが、SUHeaderに変更する。 |
| コンテンツ幅を絞る | Containerを用いる。 |
コンポーネントを使用する場所にて以下のように組み込みます。 例えばメニューの場合は以下のようになります。
import { Menu } from 'semantic-ui-react';変更箇所はハイライトで記してあります。
// ./src/components/header.tsx
import { Menu, Header as SUHeader, Container } from 'semantic-ui-react';
...
const Header: React.FC<Props> = ({ siteTitle = '' }) => (
<Menu inverted size={"large"} > <Container > <SUHeader as="h2" inverted> <Link
to="/"
style={{
color: `white`,
textDecoration: `none`,
}}
>
{siteTitle}
</Link>
</SUHeader> </Container> </Menu>);コンテンツ部分は、Container に text プロパティを指定してより狭い表示領域にします。
// ./src/components/layout.tsx
import { Container } from "semantic-ui-react";
...
return (
<>
<Header siteTitle={data.site.siteMetadata.title} />
<Container text > <main>{children}</main>
<footer>
© {new Date().getFullYear()}, Built with
{` `}
<a href="https://www.gatsbyjs.org">Gatsby</a>
</footer>
</Container> </>
);最終的にはこのような見た目になりました。
これだけだと Semantic UI のメリットはあまり感じられませんが、UIパーツが増えてくると便利さを実感できると思います。