317 views
5

nodejsとwebpackとtypescriptとreactの構成

前回はfacebook製のreactについて記載しました。
実際使ってみると、良さそうとわかっていたけど、なかなかコツをつかむのが大変ですね(笑)
typscriptの型定義やtypinpsのバージョンではまったり、、、苦戦しますね。
開発の速度が早いようでどんどんバージョンが上がっていくため、google先生に聞いても古い記事は古いバージョンのことについて話していたり。。。
最初に始めるにはいろいろ詰め込みすぎた感はありますが、決めたからにはやってみようということで、
websocketを使ったチャット機能をつくってみました!!

これはまた次回に話します(^^)

そんなreactにはまっていた時に、「flux」と言う設計思想?とでもいう考え方に出会い!
これだ!って思いfluxに基づいて構成を考えてみました。

fluxとは?

Facebookが採用しているアーキテクチャです。アーキテクチャとは設計思想のことで、どういう考え方でプログラムを設計し、どういう制限をするかなどを決めているものです。
詳しい話はgoogle先生に聞いてくださいm(_ _)m

この辺りを参考にしてました。
Facebook の決断:MVCはスケールしない。ならば Flux だ。/
Facebook公式Fluxで始めるReact+Fluxアプリ開発まとめ
React.jsとFlux

構成

下記の構成で設計を行いました。思いっきりfluxの影響を受けての構成です。

config #webpackの環境毎の設定ファイル
 +—- entory.js #webpackのbuild対象ファイルの設定
 +—- develop.js #開発環境用の設定ファイル
 +—- production.js #商用環境用の設定ファイル
public #buid後のファイル出力先
src #自作のhtml、css、jsなどを保存するところ
+—- actions #ActionCreatorを保存
+—- components #コンポーネントを保存
+—- constants #定数を保存
+—- dispatcher #fluxのdispatcherを継承したクラス群
+—- stores #fluxのReduceStoreを継承したクラス群
+—- utils #他のプロジェクトでも使用できるクラス群。Log等。
node_modules #npm installで自動的にできるフォルダ
typings #typings installで自動でできるフォルダ
package.json #npmの設定ファイル
tsconfig.json #typescriptの設定ファイル
typings.json #typingsの設定ファイル
webpack.config.js #wabpackの設定ファイル

fluxのインストール

fluxはアーキテクチャなので考えを元に作ることも可能ですが、1から作るのは大変なので、facebookが公開しているものをインストールしちゃいます

※immutableは状態を変えないオブジェクトのこと。
constantsのstateの変更時に役に立ちます。
immutable.js

※keymirrorはkeyからvalueを複製して設定してくれるライブラリです。
constantsの設定時に役に立ちます。
keymirror.js

typescriptの型定義ファイルのインストール

ここでちょっとはまりました。。。
typingsのバージョンによってインストール方法が変わってました。 v1.0以上からambientの引数がglobalに変更されてます。

※keymirrorはnpmリポジトリではなく、dtのリポジトリにあるため、dt~を最初につけてインストールします。

まとめ

fluxという設計思想を見つけることができてすごく参考にすることができました。
フロントエンドの操作はユーザーの行動やUIの動作、通信など、非同期で複雑なため、クラス間の結合が強くなってしまったり、
イベントが複雑に飛び交ってしまい、わかりづらくなることが多々ありました。
そんな中fluxという考え方を取り入れることで流れができ、誰でも把握しやすくなるかと思います。

まだまだ複数のactionを発行するときどうするのかなど、見えていない部分も多々ありますが、流れを意識して設計できるのはわかりやすいのではないかと思います。

次回予告

次回はfluxを使用したwebsocketを使用したチャット機能についてお話できたらと思います。

シェアする

プロフィール

T K Lv 30

エンジニアに憧れる街人

HP : 10 /10

SP : 0 /0

最近、splatoonを買いました!(笑)

▼ おすすめ記事

  • 開発の謎

    PARTITIONでDBのデータをまるっと消しちゃおう

  • 会社のこと

    会社ご紹介資料つくりました。

  • クリエイティブ・オブ・ゴッド

    ダンボールをswitchに変える力!

  • クリエイティブ・オブ・ゴッド

    外国人のブログが続いています!