GitHub PagesをReact + CSS Modulesで

3 min read

Contents
  1. 雑感
  2. 静的ページをReactで作ることについて
  3. CSS Modulesについて
  4. Atomic Designについて
  5. How to
  6. ディレクトリ構造
  7. セットアップ
  8. Webpack
  9. .babelrc
  10. index.html
  11. React / CSS Modules
  12. おわりに

個人用の名刺を作ったのでついでに ポートフォリオ を作ってみました 💪

その際 React + CSS Modules な感じで作ったので、その雑感とやり方です 📝

雑感

静的ページをReactで作ることについて

GitHub Pages なので静的ページです。なかなか良かったです 😊

生の HTML をそのまま書くのはだるいのであり得ない。けど Ruby 使ったり Jade も違うなーって感じで React でした。

ヌルヌル動かしたりするなら別かもしれませんが、

  • 部品をコンポーネントとして再利用できる
  • 繰り返しとか楽ちん
  • プログラミング楽しい

らへんがよかったです。

CSS Modulesについて

今回デザインは、Atomic Design を意識して CSS Modules を使って組みました。 CSS Modules よかったです ✨

  • 普通の CSS で書ける
  • コンポーネントで閉じている

っていうのがよかったです。わかりやすくてシンプルになるので、脳みその負担を減らせる感じでした。

ただもっと込み入ったもの作ろうとすると composes 使ったりしないといけないだろうし、コンポーネントの設計にもっと力入れないといけないんだろうと思います。

Atomic Designについて

React 使ってるとコンポーネントがどんどん増えていくので整理する方法として、Atomic Design の考え方を取り入れようとしました。 結論としては、Atomic Design の考え方そのままで React のコンポーネントをわけるのはやめた方がいい、ってのがわかりました 😞

Atomic Design は大雑把に言えば最小単位の Atoms から Molecules、Organisms を構成してそれを組み合わせて Templates を作り、コンテンツを流し込んで Pages を完成させる、って考え方です。 これで React を構成しようとすると次のような課題にぶつかりました。

  • Templates 以下の要素はコンテンツを持つべきではないので、すべてのコンテンツを Root コンポーネントに持たせる必要がある
  • Molecules と Organisms を分ける明確な基準がわからん 1

で、最終的にこんな感じに落ち着きました。

  • Atoms: それ以上分割できない再利用可能なコンポーネント
  • Organisms: コンテンツを持たない再利用可能なコンポーネント
  • Parts: コンテンツを持ち、Atoms や Organisms で構成されるコンポーネント

Parts の名前は気に入ってないんですが、いいのが思い浮かばず…。React で Atomic Design やってるとこのベストプラクティスが知りたいです。

How to

React + CSS Modules で静的ページを作るまで with Webpack です。 ボイラープレートを nownabe/skel-static_website に用意しました。

ディレクトリ構造

最終的なディレクトリ構造はこのようになります。

$ tree .
.
├── bundle.js
├── index.html
├── package.json
├── src
│   ├── index.css
│   └── index.js
└── webpack.config.js

ローカルでビルドして、直接 master ブランチに Push していく感じです。

セットアップ

まずは適当なディレクトリを作って npm init で package.json を作ります。

mkdir my-website
cd my-website
npm init

必要なパッケージをインストールします。

npm install --save react react-dom
npm install --save-dev webpack style-loader css-loader babel-loader babel-preset-es2015 babel-preset-react browser-sync-webpack-plugin browser-sync

Webpack

Webpack を設定します。

webpack.config.js
var BrowserSyncPlugin = require("browser-sync-webpack-plugin")

module.exports = {
  entry: {
    javascript: "./src/index.js"
  },
  output: {
    filename: "bundle.js"
  },
  devtool: "inline-source-map",
  module: {
    loaders: [
      { test: /\.js$/, exclude: /node_modules/, loader: "babel-loader" },
      { test: /\.css$/, loaders: ["style", "css?modules"] }
    ]
  },
  resolve: {
    extentions: ["", ".js"]
  },
  plugins: [
    new BrowserSyncPlugin({
      host: "localhost",
      port: 3000,
      server: { baseDir: ["."] }
    })
  ]
}

これで、webpack --watch コマンドでいい感じに開発できるようになります。 ついでに npm start で起動できるように package.json を修正しておきます。

package.json
  // ...
  "scripts": {
    "start": "node_modules/.bin/webpack --watch"
  },
  // ...

.babelrc

バベる設定。

.babelrc
{
  "presets": ["es2015", "react"]
}

index.html

index.html は何の変哲もない感じで。

index.html
<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>website</title>
  </head>
  <body>
    <div id="app"></div>
    <script src="bundle.js"></script>
  </body>
</html>

React / CSS Modules

最後に React と CSS Modules です。

こんな感じで、javascript 内で CSS を読み込んであげることで、適当なクラス名に変換されます。

src/index.js
import React from "react"
import { render } from "react-dom"

import styles from "./index.css"

render(
  <h1 className={styles.hello}>
    Hello, world!
  </h1>,
  document.getElementById("app")
)

CSS は普通に書きます。

src/index.css
.hello {
  font-size: 5rem;
}

おわりに

すぐに目で確認できるフロントのコーディングは楽しいですね ☺️

Footnotes

  1. ただ勉強不足なだけだと思います ↩