antd-initでReact,Reduxのboilerplate作成

ここ数年、Single Page ApplicationはSencha ExtJS、Sencha Architect を使用して構築していました。
ですが、ライセンス費用をかけずにオープンソースで構築できるようにしたいね、ということで、現在、React、Reduxに取り組み中です。
React、Reduxを始めるにあたり、簡単にboilerplateを作成してくれるantd-initが便利だったので、ここでご紹介したいと思います。
このboilerplateは、react, redux, redux-saga, react-router, webpack, babel, css-modules、LiveReload等、React、Reduxの開発に必要なライブラリがひと通り揃っています。
また、UIフレームワークはAnt Designを使用しています。

今回は、Ubuntu14.04に、antd-initのインストールと、boilerplateの作成を行ってみます。
node6系を使用できる環境であれば、antd-initのインストールから開始できます。
エディタはAtomを使用します。

Atomインストール

PPA経由でインストールします。

Ubuntuのアプリケーションから「Atom」を起動します。
初回の起動は少し時間がかかります。起動すればOKです。一旦閉じます。

nvmインストール 

nodeはバージョンによってアプリが動作しない場合もあるため、複数のバージョンを切り替えて使用したくなります。
そこで、複数のバージョンのnodeを切り替え可能な「nvm」を使用すると便利です。
nvmで、nodeのインストール、指定バージョンへのnodeの切り替えが可能となります。
以下でnvmをインストールします。

起動時に読込むよう、~/.bashrc 等に以下を追記します。


コマンドプロンプトを再起動し、バージョンを確認します。


■ nodeインストール
nvmをインストールしたら、nodeをインストールします。
以下でnodeのバージョンを確認し、どのバージョンをインストールするかを決定します。


ここでは、node6.2.2をインストールします。
インストールしたら、バージョンを確認します。


nvmインストールは、以下のページを参考にさせていただきました。
他のnodeバージョンへの切り替え方法等も記載されています。

「nvm で作る Node.js の環境構築(+ Hello world)」<http://arfyasu.hatenablog.com/entry/2016/01/26/212543>

■ antd-initインストール

現在は2系ですが、1系を使用したいため、バージョンを指定してantd-initをインストールします。

次に、boilerplateを作成します。


nodeモジュールがインストールされるため、少し時間がかかります。
作成されたら、boilerplateアプリを起動します。


webpack: bundle build is now finished.が表示されたら、http://localhost:8989/ にアクセスします。
以下の画面が表示されればOKです。

screenshot-from-2016-10-27-160710


■ boilerplateを編集

Todo App を編集してみます。
AtomでantdinitSampleディレクトリを開きます。

▼ タイトルを変更

src/layouts/MainLayout/MainLayout.jsx 9行目
「Todo App」 を「タスク管理」に変更し、ファイルを保存します。
webpackのビルドが実行され、livereloadがファイルの変更を検知し、ブラウザをリロードします。

そのため、ファイルを変更するだけで、ブラウザの表示が更新されます。

 リストのタイトルを追加

src/components/Todos/Todos.jsx 23行目に以下を追加します。

▼ タスクを追加

タスクは、ajaxで取得しています。boilerplateではMockで動作しています。
proxy.config.js 23行目に以下を追加します。

このファイルは変更検知対象外であるため、ブラウザをリロードして確認します。

▼ cssを追加

先程追加したリストタイトルに下線を引いてみます。
src/components/Todos/Todos.less 4行目に以下を追加します。

こちらもブラウザをリロードします。
(再ビルドは実行されますが、リロードされないため)

以下の画面に変更されました。
screenshot-from-2016-10-27-173327

このboilerplateを作成すれば、React、Reduxの開発環境を簡単に整えることができます。
redux-sagaやfetch、reducerもすぐに使用できるようになっているため、Todo Appを参考に、React,Reduxアプリを作成しやすくなります。

タイムスタンプ付き大量データのリアルタイム可視化(1)

はじめまして。シーマークの中村です。
人生初ブログです。

私は最初のブログのテーマとして、大量データの蓄積と可視化について取り上げてみたいと思います。
私が開発案件でよく遭遇する要件の一つに、リクエスト回数や重要ビジネスロジックの実行回数等をリアルタイムに視覚化する、というものがあります。本番の利用状況をリアルタイムに監視することで、運用対策や経営判断を早急に行いたいというのがお客様の要望です。

この場合、要件のポイントは、
大量データを
リアルタイムに
グラフ化して
検索条件で絞り込みもしたい
というものになります。

データを蓄積して取り出すという点ではシンプルな要件ですが、
単調増加するデータをいかに蓄積するか、
しかも本番サービスへの性能に影響を与えずにデータを蓄積し、
大量に蓄積されたデータを検索してグラフ化する
しかも高速に!
となると、結構悩ましい課題となります。。。

そこで、「そんなときにはこれを!」と取り出せるソリューションを導き出すべく、オープンソースを中心に技術調査及び実現方法を検討していきたいと思います。

次回は、調査対象の要件をもう少し明確にしていきます。

はじめまして。シーマークの中村です。
人生初ブログです。 

私は最初のブログのテーマとして、大量データの蓄積と可視化について取り上げてみたいと思います。
私が開発案件でよく遭遇する要件の一つに、リクエスト回数や重要ビジネスロジックの実行回数等をリアルタイムに視覚化する、というものがあります。本番の利用状況をリアルタイムに監視することで、運用対策や経営判断を早急に行いたいというのがお客様の要望です。

この場合、要件のポイントは、
大量データを
リアルタイムに
グラフ化して
検索条件で絞り込みもしたい
というものになります。

データを蓄積して取り出すという点ではシンプルな要件ですが、
単調増加するデータをいかに蓄積するか、
しかも本番サービスへの性能に影響を与えずにデータを蓄積し、
大量に蓄積されたデータを検索してグラフ化する
しかも高速に!
となると、結構悩ましい課題となります。

そこで、そんなときにはこれを!と取り出せるソリューションを導き出すべく、オープンソースを中心に技術調査及び実現方法を検討していきたいと思います。

次回は、もう少し要件を明確にしていきます。