ここ数年、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インストール
1 2 3 4 | $ sudo apt-get update $ sudo apt-get -y install software-properties-common $ sudo add-apt-repository -y ppa:webupd8team/atom && sudo apt-get update $ sudo apt-get -y install atom |
Ubuntuのアプリケーションから「Atom」を起動します。
初回の起動は少し時間がかかります。起動すればOKです。一旦閉じます。
■ nvmインストール
そこで、複数のバージョンのnodeを切り替え可能な「nvm」を使用すると便利です。
nvmで、nodeのインストール、指定バージョンへのnodeの切り替えが可能となります。
1 | $ git clone https://github.com/creationix/nvm.git ~/.nvm && cd ~/.nvm && git checkout `git describe --abbrev=0 --tags` |
起動時に読込むよう、~/.bashrc 等に以下を追記します。
1 2 | export NVM_DIR="$HOME/.nvm" [ -s "$NVM_DIR/nvm.sh" ] && . "$NVM_DIR/nvm.sh" # This loads nvm |
コマンドプロンプトを再起動し、バージョンを確認します。
1 2 | $ nvm --version 0.32.1 |
■ nodeインストール
nvmをインストールしたら、nodeをインストールします。
以下でnodeのバージョンを確認し、どのバージョンをインストールするかを決定します。
1 2 3 4 5 6 | $ nvm ls-remote v0.1.14 ... v6.2.1 v6.2.2 v6.3.0 |
ここでは、node6.2.2をインストールします。
インストールしたら、バージョンを確認します。
1 2 3 4 5 | $ nvm install 6.2.2 $ node -v v6.2.2 $ npm -v 3.9.5 |
nvmインストールは、以下のページを参考にさせていただきました。
他のnodeバージョンへの切り替え方法等も記載されています。
「nvm で作る Node.js の環境構築（+ Hello world）」<http://arfyasu.hatenablog.com/entry/2016/01/26/212543>
■ antd-initインストール
1 | $ npm install -g antd-init@1.1.2 |
次に、boilerplateを作成します。
1 2 | $ mkdir work/antdinitSample && cd work/antdinitSample $ antd-init --type redux |
nodeモジュールがインストールされるため、少し時間がかかります。
作成されたら、boilerplateアプリを起動します。
1 | $ npm start |
webpack: bundle build is now finished.が表示されたら、http://localhost:8989/ にアクセスします。
以下の画面が表示されればOKです。
■ boilerplateを編集
1 2 3 | アプリケーション -> Atom -> File -> Open Folder で開く。 または cd ~/work/antdinitSample/ && atom . |
▼ タイトルを変更
「Todo App」 を「タスク管理」に変更し、ファイルを保存します。
webpackのビルドが実行され、livereloadがファイルの変更を検知し、ブラウザをリロードします。
そのため、ファイルを変更するだけで、ブラウザの表示が更新されます。
▼ リストのタイトルを追加
1 | <h3>タスク</h3> |
▼ タスクを追加
proxy.config.js 23行目に以下を追加します。
1 2 3 4 | { id: 4, text: 'タスク１', }, |
このファイルは変更検知対象外であるため、ブラウザをリロードして確認します。
▼ cssを追加
1 2 3 4 5 6 | .list { h3 { border-bottom: 1px solid cadetblue; margin-bottom: 10px; } } |
こちらもブラウザをリロードします。
（再ビルドは実行されますが、リロードされないため）
以下の画面に変更されました。
このboilerplateを作成すれば、React、Reduxの開発環境を簡単に整えることができます。
redux-sagaやfetch、reducerもすぐに使用できるようになっているため、Todo Appを参考に、React,Reduxアプリを作成しやすくなります。