slontが2016年6月19日に投稿(2016年6月22日更新)

はじめに

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

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

インストール

$ 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']
        }
      }
    ]
  }
};

後で解説を付け足す。


おわりに

静的ページのデモなんかをさくっと作るのに良さそうな構成だと思う。てかReactあればjqueryほとんどいらなくねえ?って思ったけど、どうなんだろ。

↑気に入ったらシェアしてね↑
プロフィール
slont

slont

元金融エンジニア。メイン言語はJava, HTML, JavaScript, Python, Kotlinあたり。SECCONやCTF、NLP、機械学習に興味あり。金融日記購読4年。巷で話題の変態紳士。美女ソムリエ始めてました。 お仕事の依頼はTwitterからお願いします。

comments powered by Disqus
Back to top