ぼくのかんがえたさいきょうのお手軽Reactディレクトリ構成

プログラミング 2016年6月19日

はじめに

ある程度プログラミングをやっていると、一番悩むのはディレクトリ構成と命名の部分（僕だけかもしれない）。

作るものによってベストな構成は変わってくるけど、とりあえず簡単に叩き台を作りたいって時にはあまり時間を掛けたくないので、テンプレートを作ってみました。

インストール

$ git clone git@github.com:slont/react-sample1.git
$ cd react-sample1
$ npm install
$ gulp build
$ npm start

これでhttp://localhost:3000/top/にアクセスすれば、ページが見られる（はず）。

こんな感じ。

ディレクトリ構成

react-sample1
  ├─ dist
  ├─ node_modules
  ├─ src ┬─ styles ┬─ components ┬─ footer.scss
  │       │          │              └─ header
  │       │          └─ layouts ┬─ top - index.scss
  │       │                       ├─ page1
  │       │                       ├─ page2
  │       │                       └─ base.scss
  │       │
  │       └─ views  ┬─ components ┬─ footer.jsx
  │                   │              └─ header.jsx
  │                   └─ layouts ┬─ top ┬─ index.html
  │                                │       ├─ index.js
  │                                │       └─ top.jsx
  │                                ├─ page1
  │                                └─ page2
  ├─ .gitignore
  ├─ gulpfile.js
  ├─ package.json
  └─ webpack.config.js

dist

srcからコンパイル＆コピーされたファイルが入る。実際にクライアントからアクセスされる場所。

ビルドされると下みたいになる。

dist ┬─ top ┬─ index.html
     │       ├─ index.js
     │       └─ index.css
     ├─ page1
     └─ page2

それぞれのページでCSSとJSを呼ぶから、ページ毎にスコープが切られてて、まあ静的ページデモ作る時なんかに良いんじゃないかと思ってる。

node_modules

npm installするとここに入る。

components

Reactの共通コンポーネントを管理する。あくまで一例。

styles

スタイルシートはここで管理したい。後のviewsディレクトリと構成が一緒。

views

HTMLとJS, JSXファイル等のViewにあたるファイルはここで管理すると簡単に管理できそう。もちろん、ルーターを導入すると全然違うと思うけど、あくまでいch(ry

.gitignore

とても大事。

gulpfile.js

var gulp = require('gulp');
var sass = require('gulp-sass');
var webpack = require('gulp-webpack');
var webpack_config = require('./webpack.config.js');

// コピータスク
gulp.task('copy', function() {
  gulp.src(['./src/views/layouts/**/*.html'])
      .pipe(gulp.dest('dist'));
});

// sass(scss)コンパイルタスク
gulp.task('sass', function() {
  gulp.src(['./src/styles/layouts/**/*.scss'])
      .pipe(sass())
      .pipe(gulp.dest('dist'));
});

// js, jsxバンドルタスク
gulp.task('webpack', function() {
  gulp.src(['./src/views/**/*.js', './src/views/**/*.jsx'])
      .pipe(webpack(webpack_config))
      .pipe(gulp.dest('dist'));
});

// ビルドタスク
gulp.task('build', ['copy', 'sass', 'webpack']);

// watchタスク
gulp.task('watch', function() {
  gulp.watch(['./src/views/**/*.html'], ['copy']);
  gulp.watch(['./src/styles/**/*.scss'], ['sass']);
  gulp.watch(['./src/views/**/*.js', './src/views/**/*.jsx'], ['webpack']);
});

ビルドとWatch標準装備。

package.json

react-router入ってるけど気にしてはいけない。

webpack.config.js

var path = require('path');

module.exports = {
  context: __dirname + '/src',
  entry: {
    'top/index': './views/layouts/top/index.js',
    'page1/index': './views/layouts/page1/index.js',
    'page2/index': './views/layouts/page2/index.js'
  },
  output: {
    path: __dirname + '/dist',
    filename: '[name].js'
  },
  resolve: {
    root: [
      path.resolve('./src')
    ]
  },
  devServer: {
    contentBase: 'dist',
    port: 3000
  },
  module: {
    loaders: [
      {
        test: /.jsx?$/,
        loader: 'babel-loader',
        exclude: /node_modules/,
        query: {
          presets: ['es2015', 'react']
        }
      }
    ]
  }
};

後で解説を付け足す。