はてなブックマーク

JavaScript型チェッカーflowを使って、React+Reduxで簡単なカウンターのサンプルアプリケーションを組んでみたので、その際のいくつかのポイントなどをまとめておきます。 サンプルアプリについて ボタンを押したら数字がインクリメントされるタイプのよくあるサンプルプログラム。 GitHub: namikingsoft/react-redux-using-flow-example https://github.com/namikingsoft/react-redux-using-flow-example ソース周りのファイル構成 react-redux-using-flow-example |-- src | |-- actions | | `-- counter.js # カウンターアクションの定義 | |-- components | | `-- Button.js # ボタ

flowはJavaScriptの静的型チェックツールの一つ。 同じような静的型関連ツールであるTypeScriptと比較して、ESLintやBabelとの併用がしやすかったり、型付けが強めだったり(初期からnon-nullableに対応)と、受ける恩恵も多い。 が、使っていて「おやっ？」っと思う点もいくつかあったので、まとめてみた。 気になったこと４つ ESLintとの併用でめんどうな事が多かった babel-eslintというBabelパーサーを用いれば、概ねのESLintルールがflow文法でも適応できるが、例外もあった。 例えば、インターフェイスの定義の場合、 interface I { field: number; method(): string; } ESLintのno-undefルールを有効にしていると、以下のエラーが発生する。 error| 'I' is not defin

サンプルデータ： 身体情報から結婚時期を予測する CSV形式のダウンロード データの傾向 ただ無差別にデータを作っても、予測が合ってるかどうかの判断がつかないため、 以下の様な事実無根な法則で値をでっちあげてみた。 B型は早婚 O型は晩婚 AB型はとても早婚 女性は早婚 肥満とモヤシは晩婚 男性の高身長はとても晩婚 コーディング前の準備 Apache Zeppelinのインストール Spark(ScalaやPython)の記述やその他細かいシェルスクリプトなどの操作をWeb上でインタラクティブに行えるノートブック系OSS1。この記事では、Sparkの操作は基本的にこのソフトを用いてコーディングを行っている。Sparkも一緒に含まれているので、これをローカルにインストールするだけで概ね動くはず。 Apache Zeppelin (incubating) https://zeppelin.in

サーバーサイドのReactに触れたことがなかったので、React+Express+webpackで試してみた。今回試行した手順をチュートリアル的にまとめておく。まずは、シンプルにできそうなECMAScript6で試して、後半にTypeScriptで組んだソースも、おまけ的に載せておきます。 この記事の方針 クライアント -> サーバーサイド -> 結びつける。の順に実装を行う なるべくシンプルにするために、実用構成というよりは、最小構成で動かす。 コンポーネントのプリレンダやState遷移の確認までを行う。 サーバーAPIとの通信や画面遷移は、今回扱わない。 実装するサンプルアプリの内容 チュートリアルでよくありそうな、シンプルなカウンターアプリを動かす。 事前に必要なソフトウェア node.js (v5.6.0) npm (v3.6.0) 現時点の安定版を使ってみたが、そこまで新しくなく

前回の記事でSwarmクラスタを構築したので、Apache Sparkのクラスタを載せてみる。 本来ならオンプレでクラスタを組んだり、AmazonのEMRを使うのが一般的かもだが、安めのクラウドでもできないかなーという試み。 まずはシンプルに、Standaloneモードから動かしてみたい。 事前準備 マルチホスト同士の通信が可能なSwarmクラスタを構築しておく Sparkのクラスタ同士は、一方通行な通信ではなく、割りと親密な双方向通信をするため、オーバーレイ・ネットワーク上に構築しないとうまく動作しない。 オーバーレイ・ネットワーク構築するには、Consul, etcd, Zookeeperのようなキーストアを自身で導入する必要があるので、 DigitalOceanでマルチホストなDockerSwarmクラスタを構築を参考に、以下の様なSwarmクラスタを構築しておいた。 Sparkクラ

webpackのTestingを眺めてたら、 ブラウザ上でアプリを動作させながらMochaのSpecを走らせて、 クライアントサイドのテストをする、 みたいなことが手軽に出来そうだったので、やってみた。 webpack-dev-serverを利用すれば、 ソースやテストを修正直後に自動リロードされるので、 継続的テストみたいな手法もとりやすい。 動作サンプル ひと通り動くサンプルを作ったので、以下のGitHubに上げておきます。 nodeやnpmがインストールされていれば、動作すると思われます。 “Greetingボタンを押したら、その下に挨拶が追加される” みたいな動作のサンプルアプリとそのSpecをjQueryでシンプルに組んであります。 GitHub: sample-webpack-test https://github.com/namikingsoft/sample-webpack

長めのansible-playbookをRUNしてる途中でエラーが出た時に役立ったので、まとめておく。 どういう時に使う？ 例えば、docker build途中によくわからない理由でエラー落ちした時、 直前状態のコンテナに入ってデバッグしたい事がある。 ビルドに失敗した後、docker ps -aすると、 Exitedしたビルド作業用のコンテナが消されずに残っているので、 このコンテナの中にシェルで入れれば、エラーの詳細を調べられる。 コンテナだけでなく、直近のイメージも残っているが、 Dockerコマンド単位でコミットされるため、 数珠つなぎのRUNとか、ansibleやchefなどのプロビジョニングツールを併用した時に、 大幅にロールバックしていることがある。 ビルド途中にエラーで落ちるDockerfileの例 FROM busybox RUN touch /step1 RUN tou

備考 swarm-node0はマスターノードとして使う ホスト名(hostname)は別になんでもよい プライベートネットワークは無効にしておく VPNのIPについては、VPN接続後に割り当てる。 SoftEther VPN Serverを動かす swarm-node0にSSHなどでログインして、作業を行う。 Linux版については、SoftEther VPNのサイトからソースコードをダウンロードして、コンパイルする。後で自動化しやすいように、GUIやインタラクティブCUIを使わないように書いておく。 ダウンロード # 必要なパッケージのインストール apt-get install -y curl gcc make # SoftEther VPN ソースのダウンロード cd /usr/local/src curl -LO http://jp.softether-download.com/f

備考 swarm-node0はマスターノードとして使う ホスト名(hostname)は別になんでもよい プライベートネットワークを有効にしておく eth0はグローバルネットワークに繋がるインタフェース eth1はプライベートネットワークに繋がるインタフェース 各ノードでConsulを動かす Swarmクラスタのサービスディスカバリー(分散KVS)であるConsulを各ノードにインストールする。使わないでもSwarmクラスタは構築できるが、マルチホスト間でオーバーレイ・ネットワークを作れるようになったりと色々利点が多いので。(etcdやZookeeperでも構築可能) swarm-node0にてConsulをサーバーモードで動かす SSHでログインして作業を行う。 インストール # 必要なパッケージのインストール apt-get install -y curl zip # Consulインス

かんばん式管理ツールWekanはTrelloクローンの一つ。 ちょっと前まで、LibreBoardという名前のTrelloクローンでしたが、 最近、Wekanという名前に変わったようです。 必要最低限の機能がコンパクトにまとまっていて非常に扱いやすい。 少し触ってみたところ、機能的にはLibreBoardのままで、 以前より見栄えにオリジナリティが増したように感じます。 Wekan (旧LibreBoard) http://newui.libreboard.com Dockerを利用した導入手順 公式のGitHubに置いてあったDockerfileを参考にさせていただく。 GitHub: wekan/wekan https://github.com/wekan/wekan 00. 事前準備 Dockerとdocker-compose1をインストールしておく。 01. docker-comp

TAIGAは、やたらデザインがきれいなアジャイルプロジェクト管理ツール。 Trelloクローンという感じはなく、Redmine拡張のAlminiumに似ている。 ストーリーカードの重み付けやタスクボード、バーンダウンチャートなども備えており、 しっかりとアジャイル開発をやりたい場合はおすすめ。 Taiga.Io | Agile, Open Source, Free Project Management System https://taiga.io/ Dockerを利用した導入手順 以下のdocker-compose.ymlとイメージを参考/利用させていただきました。 GitHub: htdvisser/taiga-docker https://github.com/htdvisser/taiga-docker 00. 事前準備 Dockerとdocker-compose1をインストールし