個人的に気に入っているboilerplateを紹介します。
それは、iam4x/isomorphic-flux-boilerplate: ES7 Isomorphic Flux/ReactJS Boilerplateです。
Boilerplateとは
これはスターターキットと呼ばれたりするもので、必要な道具が一式揃った空っぽのプロジェクトのことです。
React.jsはRuby on Railsのような全部入りフレームワークではありませんので、適宜他のモジュールと組み合わせて使う必要があります。
「どれをどのように組み合わせればよいか」という悩みや失敗をあらかじめ解決しておきましたよ、というのがBoilerplateです。
例えば気になるライブラリを使って新しいプロジェクトを始めたいなと思ったら、とりあえず「< ライブラリ名> boilerplate」とか検索してみることをお薦めします。
4つのいいところ
スタックは主にreact, alt, postcss, koa, webpack, babelなどです。詳しくはREADMEを参照ください。
特に気に入っている点は以下の通りです：
- ES7のasync/awaitで組める
- サーバサイドレンダリングに対応している（Universalである）
- 国際化に対応している
- BrowserSyncに対応しているのでデザインしやすい
それぞれ説明していきます。
ES7のasync/awaitで組める
サーバサイドはkoa.jsですが、これはもともとgeneratorベースだったものがベータ版ではasync/awaitで書けるようになっています。
以下のような感じで非同期的な処理が同期的な文で書けます。
router.get('/api/user', async function (ctx, next) {
const { uid: userId } = ctx.query
const user = await db.users.get({ userId })
ctx.body = user
await next()
})
クライアントサイドでもbabelによって実現しています。
非同期的なfluxのアクションを以下のように書けます：
class SessionActions {
login({ username, maddr, password }) {
return (dispatch, alt) => {
alt.resolve(async () => {
dispatch()
try {
const result = await alt.request({
url: '/auth/login',
method: 'post',
data: {
userId: username, maddr, password
}
})
this.loginSuccess({ ...result })
} catch (error) {
this.loginFailure({ error })
}
})
}
}
}
alt.resolveについては次のセクションで説明します。
サーバサイドレンダリングに対応している（Universalである）
React.jsで組まれたウェブアプリはいわゆるSPA(Single Page Application)ですが、これについて回る悩みというのはボット対策です。
SPAはjsによって通常クライアントサイドでページをレンダリングして、コンテンツはajaxで取得します。
そのため、サーバサイドから吐かれるHTMLの中身はほぼ空っぽです。
Googleはこのようなサイトも正しくインデックスするように対応していますが、他のTwitterやfacebookなどのボットはまだ対応していません。
このboilerplateはクライアントサイドとサーバサイドの両方でのレンダリングに対応しています。これをユニバーサルと呼ぶそうです。
ページの読み込み時に非同期的にデータを取ってくるような仕組みにしても、ちゃんと読み込みが完了した後のHTMLを出力してくれます。すごい！
これは上記アクションの例中に出てきたalt.resolve(AltResolver)によって実現しています。
中身を見てみると、キュー構造になっていて全てのアクションが完了するのを待つ仕組みのようです。
これはnode.jsならではの機能ですね。
国際化に対応している
Railsなどでは当たり前に出来ますが、こちらも対応しています。
BrowserSyncに対応しているのでデザインしやすい
Reactコンポーネントを変更すると、ブラウザをリロードしなくても差分反映してくれます。
この機能によって、こまめに修正して結果を確認する作業の効率が結構変わります。
あと、複数のブラウザで開くとスクロール位置まで同期してくれます。別にそこまでは要らないけど。笑
Boilerplateは個人開発の味方
一人で作ってる人にとって効率性はいつも課題ですが、こういうテンプレートのようなプロジェクトが充実してくれるととてもありがたいです。
イチから組むのもいいけど、やっぱり全部やってられないというのが実情です。
特に他人のソースコードを読むいい機会にもなるので、知見を広げられます。
ぜひ活用してみてください！