かえるの井戸端雑記

開発日誌的な記事だったり備忘録だったり。まとめ記事と言うよりは、七転八倒の様子を小説みたいに読んで眺めてもらえればと。

React+Reduxにも触れてみる 2. 一から始める環境構築

前提

これの続き。

frogwell.hatenablog.jp

しかしやってみたけどこれ、本当に開発環境構築というか。webpackがgcc相当でjsx(es6)のcodeからjsというbinaryを生成している気分だもう。package.jsonのdevDependenciesにbuildに必要なものを定義していって、webpackのconfigにlinker的な設定を詰め込んでいくという。

react-redux環境を作るにはstarter kit的なものもいろいろあるけど、正直あわないので一から作る(端折った)。詳しくは前回参照

続きを読む

Foremanってなんだろ

きっかけ

oss-sec: CVE-2017-2672: Foreman image password disclosure in audit log で見かけたので。なんだろなあと。

話は違うけど、自分の知らないものを見つけるのって大体こういうのがきっかけ。CVEをばーっと眺めていたり、js界隈のtweetを見ていたりとか。

Foremanってなんぞ

github.com

Foreman is a free open source project that gives you the power to easily automate repetitive tasks, quickly deploy applications, and proactively manage your servers lifecyle, on-premises or in the cloud.

https://www.theforeman.org

Foreman is a complete lifecycle management tool for physical and virtual servers. We give system administrators the power to easily automate repetitive tasks, quickly deploy applications, and proactively manage servers, on-premise or in the cloud.

第3章 Foreman の概要およびインストール

Foreman OpenStack Manager は、リモートシステムのインストールおよび設定を管理するための Web ユーザーインターフェースを提供するデプロイメント管理ツールです。変更のデプロイは Puppet を使用して実行されます。また追加で、Dynamic Host Configuration Protocol (DHCP)、Domain Name System (DNS)、Preboot Execution Environment (PXE)、および Trivial File Transfer Protocol (TFTP) のサービスを提供することが可能です。これらのサービスを制御することにより、オペレーティングシステムがまだインストールされていない物理システムのプロビジョニングも可能となります。

ほう。infra管理と大量のhostの管理のguiとして使えるかなあ。

でもこういうの最近多いよね。googleはcontainerの粒度でkubernetesとか。HasiCorpはVMの粒度で回しているし

といってもこれらは管理だけじゃなくて開発から運用までの範囲だから運用だけをtargetにしているForemanの話と混ぜると混乱しそうだけど。こういう体系をDevOpsと言うんだったっけ。

使ってみたい気もするけど、僕が個人で使う環境ではいまいち使い勝手が見えきらないので手が出ないという。個人で大量のhostを管理してinfrastructureを気にしなきゃいけなくなるという状況になったら手を出すかも。

でもApplicationだけに専念するならDocker Containerとかにした方が取り回しはしやすそうだよなあ。そうなるとContainerの管理とかしたくなるわけで。ちょっとkubernetesについては今後調べてみても楽しいかもしれない。(本題からそれたぞ)

React+Reduxにも触れてみる 1. 予備調査

Angular2触れていたのではなかったか

frogwell.hatenablog.jp

うん、まあ、触れていたけれど元々これを作りたい、という目標があったわけじゃないので案の定触れただけになった感がある。気が向いたらまた進めると思う。

で、どうやって始めようか

実はstarter kit的なものがちゃんとあってそれを使えばあっという間に環境が整えられる。それがCreate React AppとReact Redux Starter Kit。

Create React AppはReactの製造元でもあるFacebookが整備しているものなのでこちらの方がたぶん安心して使える。React Redux Starter Kitにも触れてみたけどこっちは何故かdocumentが見えなくなっていたし(今だけなのかな?)。

Create React App

github.com

mae.chab.in

React Redux Starter Kit

qiita.com

github.com

僕の場合どうしたか

実際触れてみたのだけれど、でも実のところ僕は全部node環境下で進めていく、何もかもjsで解決するぜ、ヒャッハーという状況じゃなかったせいでちょっとこうじゃない感が強かった。

今時のWeb Interfaceの開発なら全部nodeで進めていくのが当然なのかもしれないけど、僕がserver daemon組んでweb application作る時ってdbにaccessするだけとかじゃすまない場合が多いので、そんな(なんかいろいろあるかもしれない)=>DB=>Web Server=>Web Interfaceというsimpleな構造じゃない場合、nodeだけで完結する、というのはちょっとかみ合わなかった。

逆に(なんかいろいろあるかもしれない)=>DB=>Web Server=>Web Interfaceというsimpleな構造で考えられる範囲なら、このstarter kitをとっかかりにしてInterfaceを組みながらbackendも組んで、という風にUIから落とし込んでいく作り方で進められるし、その要求に応えるだけの機能が今のjsにはあるっぽい感じなので、手軽でいいかな、と思った。

なんというかgccとかでのCの開発を経験する前にVCに触れたみたいな感覚になる。

とまあそこまで悩んだ結果学習コスト高いけど、一から自前で環境構築から始めていこう、ということになった。なんで結局こう要領が悪い方向に突き進むのか。

続きを読む

emacsの起動が遅いとき

起動が遅い場合の対処

いろいろmoduleをいれたら遅くなった。

起動にかかる時間の確認は、普通に起動させてからM-x emacs-init-timeで出てくる。

この時点で4.2sec。あんまり嬉しくない時間。

qiita.com

memo.sugyan.com

これらにあわせてreqiureの部分をautoloadに置き換えていったらそれだけで1.9secになった。R関係のmoduleがずいぶん喰っていたらしい。

python関係を削って1.8sec。js2-modeでは変わらず。web-modeを削ったら1.4sec。

とりあえずこのくらいあれば不満は消えたのでよしとする。もっと早く? いや別に作業者が不満を感じない程度になれば別にいいという主義なので……(ぬるい)。

Angular2を使ってみる 5. Counter作り

なにをやってみようか

一通り導入までの勉強はしたので自分でもいじってみようと思う。でも何をいじろうか。

考えたけど、以下の2つを実施することにする。

  1. fileの再配置(srcとdistの分離)
  2. buttonを押したらcount upするだけの簡単なcomponentの作成

これらが終わったらRxJSを使うような処理も入れてみたいなあ。今のところこれといって作りたいapplicationがあるわけではないので、どこにたどり着くのかは僕にもわからない。知らない技術の実験的な感じで終わるかも。あ、lessとかstylusと言われているものも使いたい。

続きを読む

Angular2を使ってみる 4. 書いたコードを理解する

まえおき

とりあえずは環境構築ができて動くことまでは確認できた。次は前に書いたTypeScriptのCodeとかも理解していくことにする。

といっても前に参考にしたpageを読み込むだけなんだけど。

しかしいつものpatternだとこれで満足して止まる気がする。次の課題も探さないとな。……何かserver daemonを用意してserverのstatusでもとってきてweb interfaceで描画でもできるようにしてみようか?

続きを読む