記事

VagrantでCentOS6.7の開発環境を構築する

インフラストラクチャ

概要最近、Boxを再構築した際に、「Vagrant開発環境のワークフローをちゃんとまとめておきたい」と思ったのでまとめてみました。レポジトリにほぼ同じワークフローメモがあります。 github - bmf-san/vagrant-development-workflow 前提以下のアプリケーションがホストマシン(Mac)にインストールされていること Vagrant VirtualBox 環境ホ...

apache CentOS Vagrant

Vagrant+CentOS7.3+Ansible

インフラストラクチャ

概要AnsibleでVagrantの環境構築をする最初の一歩です。プロビジョニングができる環境を整えます。 環境 Vagrant1.9.1 CentOS7.3 Ansible2.2.1.0 CentOS7.3のVagrnat Boxを用意する任意のディレクトリ(例として今回はcentos7.3)にてVagrant環境を構築します。 vagrant box add https://atlas.ha...

Ansible CentOS Vagrant

Slack+hubot+cron(node-cron)+shell+logwatchでサーバーログを定時報告

インフラストラクチャ

以前、slackとhubotでShellScriptをSlackから実行しようという記事を書きました。さくらvps+hubot+Slackでslack botをつくる 今回は対話形式のコマンド実行ではなく、cronで定期的にShellScriptを実行、Slackに出力結果を報告しようという試みです。 意外とこの類いのコピペでパクれるリスペクトできる参考ソースが調べても出てこなかったので、途中で挫...

cron CentOS Slack さくらのVPS CoffeScript hubot logwatch shell

redux-formのサーバーサイドバリデーションでpromissをいじってたら「Uncaught (in promise) error」

アプリケーション

概要 redux-formでサーバーサイドのバリデーションを実装している時に、promissをいじってredux-formのSubmissionErrorを投げていたらUncaught (in promise) errorと怒られた話です。 解決策 returnがなかっただけでした。 修正前 class Categories extends Component { onSubmit(props...

React Redux redux-form Tips

ReactとReduxでSPAを構築するために参考にした記事

アプリケーション

雑メモです。ReactとReduxでSPAで作ろうとした時に参考にしたリポジトリや記事です。 Reduxというアーキテクチャの概念を理解するには、日本語情報がそこそこ充実していました。実際につくりたいモノの参考になりそうなソースを探すには少し手間がかかりました。js仕様の違い、コンパイラやタスクランナーなどビルド環境の違い、Reactそのもののバージョンの違い、関連パッケージのバージョンの違いなど...

React Redux SPA

Reactで複数のinputを扱うフォームを実装する

アプリケーション

Reactでフォームを実装するのはちょっと癖があります。 まずReactのフォームにはcontrolled formとuncontrolled formという2つのパターンがあることを先に理解しておくと良いかもしれません。参考:React ドキュメント 私はまだ理解が及んでいないところも多々ありますが、Reactの実装例が少ないので少しでも刺激になればという感じで記事を公開したいと思います。(もっ...

React

Reactでフォローボタンをつくってみる

アプリケーション

つくるものツ◯ッターのフォローボタンをパクったリスペクトしたものをつくります。仕様はだいたい同じだと思いますが、仕組みは異なります。クリックでフォロー/フォロー中とテキストが切り替わる、フォロー中の時にホバーした場合は解除というテキストを出す。これだけです。やや装飾にこだわって全体に無駄なCSSが設定されていますが、その辺は適宜スタイルシートを調整してください。 必要な知識 Reactの導入方法...

React

React+react-redux+react-router+ES6+webpackで作るSPAボイラープレート

アプリケーション

概要Reactで作るSPAの簡易的なボイラープレートをつくりました。最近のフロントエンドには何とかついていくだけで精一杯なため、ソースに自信はありませんが、一応形にはなっていると思いますと言い訳だけしておきます(_) 環境モジュール axios lodash react react-dom react-router react-redux redux redux-promise ビルド周り ba...

boilerplate ES6 React react-router Redux webpack

React+Reduxのディレクトリ構成検討

アプリケーション

React+Reduxをアプリケーションに導入しようとするときに、そのディレクトリ構成について悩んでいたのですが、良さ気な記事を見かけたのでまとめてみました。 A Better File Structure For React/Redux Applications Reduxの構成に従うパターンシンプルかつベタなパターンです。SPA開発ならこれが定番でしょうか。 actions/ Comm...

ES6 React Redux