はじめに タイトルはカッコよくしてみましたが、話はよくあるEC2で開発環境を作るってやつです。 ここ半年ぐらい運用しているのですが、大きなトラブルなく運用できています。 特に最近の外出できない事態において、本当に半年前にやっておいて良かったなぁと実感しています。 利点としては以下のようなことが挙げられます。 コンピューティングリソースはクラウドで割り当てるので、新規の開発者に物理マシンを支給する必要がない（少なくとも高価なものはないです。支給の必要がある場合にはうちの会社ではChromeOSを支給しています） 全てのソースコードはクラウド上で管理されるので、物理的な事故によるセキュリティの心配がなくなる 何かトラブルがあった時に熟練した開発者が物理的に隣にいなくても、リモートから調査できる おまけ tmuxセッションでペアプロもできる これについて書いていきますが、基本的にはWebアプリケ

ex freeeの@joe_reです。 裏freee developers Advent Calendar 2018の14日目の記事を書きます。 何を書こうか迷ったんですが、freeeをやめた後の近況報告も兼ねて、シンガポールでの生活を中心に書こうと思います。 (退職記事はこちら) いつから、どういう形態でシンガポールにいるの 今年の10/1から住んでいます。なのでまだ2ヶ月と少しという感じです。 会社としては本社をシンガポールに置いていて、支社が日本にあります。 僕は日本支社から出向している日本人駐在員という形で就労ビザを取っています。 どこに住んでいるの オーチャードとサマーセットの間に住んでいます。 ショッピングがしたい観光客向けの場所という感じで、日本で言うと銀座みたいな感じです。 これはサマーセット駅の駅ビルの入り口です。中に無数のお店があり、ウィンドウショッピングは無限に無料で

できる限りプロダクションのクラスタ設定をそのままローカルの開発にも使いたいなー、と思って色々と試行錯誤して、ようやく形になってきたので書いておく。 なぜローカルでkubernetesを動かしたいのか 最近ではInfrastructure as Code、Immutable Infrastructureの考え方と共に、コンテナの上でアプリケーションの環境の構築、運用、開発をすることが増えてきた。 少し前までは、Dockerでローカルの開発環境の構築は楽になったけど、本番にデプロイするのにはハードルがある印象が個人的にはあった。だけど、kubernetesの登場によってそのハードルは大きく下がった。 最近はマイクロサービスアーキテクチャへの注目と共に、様々なコンテナが協調してサービスを形作る構成が増えてきたように思う。kubernetesはこの全てのコンテナを管理する。 kubernetesは

という趣旨の内容で、先週のVue.js Tokyo v-meetupでLTさせてもらった。 vuejs-meetup.connpass.com 発表資料はこちら speakerdeck.com 背景 僕が今メインで担当しているプロダクトの性質上、ブラウザ上でのリアルタイムコミュニケーションが必要な機能を扱うことが多い。 そこでは、Socket.IOと一部でGraphQLのsubscriptionを主に使っている。 GraphQLのクライアントにはapolloを使っているので、何も考えずともある程度体制の整った（まぁこうなるよねという感じの）コードになるけど、Socket.IOとのコミュニケーションについては、タイムライン上に発生したイベントをいかにして可読性も担保しつつ、Viewで購読可能な状態のStateに落とすか、という所に課題があった。 ContainerComponentでObse

TypeScript + VueなプロジェクトでESLintを使ってみて、現状必要なモジュールが複数あって少し複雑だったのでまとめておきます。 サンプルは以下です。 github.com 内容はどうでも良いんですが、こんな感じのすごく簡単なTODO風のアプリケーションです。 なぜEslintを使うか JavaScriptのためのLintingツールはたくさんありますが、Vueのroadmapにもある通り、Vueの公式スタイルガイドをサポートするESLintプラグインがESLintのメンテナによる公式プラグインとして作られています。 GitHub - vuejs/roadmap: Roadmap for the Vue.js project これからもVueの公式としてサポートされていくと思うので、特にこだわりがなければESLintを使うのが良いかと思います。 ESLint for Type

この記事は退職者アドベントカレンダー2017(その2)の15日目です。 adventar.org 今年の10月いっぱいでfreee株式会社を退職しました。 どこか時間がある時に退職エントリー書くかーと思ってたのですが、そうこうしているうちにアドベントカレンダーの時期になってしまったので、この機会に書くことにします。 freee株式会社でやっていたこと Webアプリケーションエンジニアとして、サーバサイド、クライアントサイドを問わずアプリケーションの開発業務を中心に従事していました。ある機能の開発サイドのオーナーみたいなことをやっていたこともありました。これは自分の中でも特に良い経験でした。 言語的にはRubyとJavaScriptを書いている時間が長かったです。あと社内にボドゲが大量にあったので、暇な時にみんなで集まってやっていました。 振り返る 僕が入社したのは2015年の4月だったので

最近Vue/Vuexを触っている。 前々から欲しいと思っていたのもあって、習作としてelectronでYouTubeのデスクトップクライアントを作った。 github.com 僕は仕事中はだいたいYouTubeを再生している。映像を見ながらコードを書きたい欲求があった。とはいえ、そのために作業領域を侵食されるのはつらい。 ということで前面に固定する機能と透過率を設定できる機能をつけた。 こんな感じになって便利。 Vueにおいて、TypeScriptを選ぶかFlowを選ぶか Vueにおいて、楽をしたいならTypeScriptを選ぶ方が良い。Flowに比べて、公式のサポートが断然に厚い。 公式ページにもサポートについて1セクション割かれている。 TypeScript Support — Vue.js また、TypeScriptチームがVueとTypeScriptのStarter Kitを公開し

背景 ReactNativeにはAsyncStorageというkey-valueストレージシステムがある。 valueにはstringしか入れられない本当に簡素なものだけど、JavaScriptのプレーンなオブジェクトはJSONにシリアライズ可能であるので、さほど困らない。 クライアントサイドで永続化したい情報はAsyncStorageに突っ込んでおく。アプリケーションを作っている過程において、値を少しづつ変更しながら開発を進めたい場面が結構あった。 ところでRailsにはrails consoleというものがあり、railsアプリケーション内のinitialize処理を通した後のREPLを立ち上げることができる。このREPLでは、railsアプリ内のクラスはすでにロード済みであるため、その全てを呼び出すことができる。その中でデータベースアクセスを担うクラス群も呼び出せるため、rails

CafePitchはElectron製のMarkdownで書けるプレゼンテーションツールです。久々のアップデートです。 github.com 久々ということでAngularをrc versionから脱却してみたりとか、TypeScriptのバージョンを上げたりとか色々した。 Angularはbootstrap周りをごっそりと書き換えたけど、それ以外はあんまり変えなくても動いた。 しかしテスト周りは変わりすぎていて厳しかったので、ユニットテストは全部捨てた。もともとあまり書いていなかったし、僕の不勉強からかなりギリギリで動いている感じだったので、まぁいい機会だったかもしれない。 Spectronで書いているE2Eテストは無傷なので、そこで最低限は担保している。（はず） 今回のアップデートでは、以下のように設定用の吹き出しを出せるようにしていて、そこから区切り文字を設定できるようにした。 id

もう2週間ぐらい前になってしまいますが、ランサーズさん主催の勉強会で、Type-Safe Flux Using Flowtypeというタイトルで発表させてもらいました。 eventdots.jp 発表資料 speakerdeck.com ここ半年ぐらいReact + Flux + Flowtypeを使った環境で開発しているのですが、Fluxにおける型付けのパターンは自分の中では大分固まってきた感覚があります。 今年の弊社AdventCalendarでも、Qiitaの記事として書きました。 qiita.com 自分の中で固まってきたとはいえ、FlowtypeもTypeScriptもどんどん進化しているし、もっと良いパターンもありそうだなー、という感覚もあります。 ぜひ知見をお持ちの方はお話ししましょう。 主催のランサーズさん、登壇者の皆様、ご参加いただいた皆様、ありがとうございました。

この記事はNodeJS Adventcalendar 2016 の19日目の記事です。 もうクリスマスということで、大幅に遅れてしまって申し訳ございません。 色々とnodejsのCLIや、electronやwebなどを作っていく中で、僕の利用するスタックはだいたい同じなので、毎回package.jsonから書いていくのだるいなーというところから、YAML/JSONで定義ができる(Yet Another Yeoman的な)ツール作ろう、と思って書いて、それからずっと放置してました。 良い機会 & やる気を取り戻すためにもちょっと紹介します。 hiaというテンプレートジェネレータです。 github.com Getting Started github.com hiaを利用して、簡単なジェネレータを作ってみました。 これはreact + flux-util + flowtypeのテンプレートを

この記事は Electron Advent Calendar 2016 の12日目の記事です。 SpectronはElectronアプリケーションのためのE2Eテストツールです。 electron.atom.io SpectronはElectronのChrome Driverを通じてアプリケーションの操作を実行できるのですが、メニューの操作には現状対応していません。(詳しくは後述します。) そこでspectron-fake-menuというSpectronからメニューの操作ができるnpmを作成しました。 github.com 使い方 https://github.com/joe-re/spectron-fake-menu/tree/master/example にサンプルアプリケーションがあります。 ちょっと変なアプリですが、メニューからカウントのインクリメント、デクリメントをするカウンター

お題「エンジニア立ち居振舞い」 僕自身が普段から意識的にやっているのは発言にブレーキをかけないことだ。 具体的にはslackのpublicな部屋で騒ぐ。 作業中にハマってしまっていかんともし難い時や、クソコードを見つけて怒りが湧いてきた時、などなど。 ハマってる内容を呟いておくと、以前にも同じような経験をした人が反応してくれて一瞬で解決に導かれるかもしれない。 クソコードに対して怒りをぶつけていると、同じように共感した人が現れてやっていきをお互い高められて、いい感じにタスク化できるかもしれない。クソコードは見ているだけでイライラしてくるので、吐き出すだけでも気持ちが宥められる効果がある。 時には実は騒いでいた対象はクソコードではなくて、僕の実力が足りていないがゆえにそう見えてしまっていただけのこともある。それはそれで良くて、一時僕は恥をかくかもしれないけど、引き換えによって得られる学びは比

FiNCさん主催のFrontend Meetupというイベントで革命と秩序とSPAという発表をしてきた。 connpass.com 有志の方がまとめを書いてくださっているので、そちらもぜひ。 www.chirashiura.com qiita.com 僕の発表資料はこちら。 speakerdeck.com 主催のFiNCさん、ありがとうございました。 内容 フロントエンドのパラダイムシフトとfreeeの関わり方と、今のスタックであるReact + FluxUtils + Frowtypeについてのお話。 どちらかといえば後半のFlowtypeの適用についての方に力を入れてお話しした。 個人的な感覚もあるけど、Flowtypeはここ1年で大分扱いやすくなっている。当初はReactのAPIの型定義が揃っていなかったりしたけど、現状では型定義のないAPIは見当たらない。 意味のわからないエラーに

flowtype v0.32.0がリリースされました Release v0.32.0 · facebook/flow · GitHub この変更では待望のgen-flow-filesコマンドが追加されています。 これはflowtypeのシンタックスで書いたjsファイルから、型定義情報を生成するコマンドです。 これまではライブラリ作者が型定義情報を提供しようとした時に、外部提供用の.js.flowを別途用意する必要がありましたが、これによってその必要がなくなります。 まだalpha-levelなので、安心して使うにはもう少し待つ必要がありそうですが、これは非常に捗りますね。 その他何点か機能追加があったので試してみます。 gen-flow-files コマンドの追加 先ほども書きましたが、待望の機能です。 flowtypeのシンタックスで書いたjsファイルから、型定義情報を生成することができ

connpass.com WACULさんと共同で勉強会を開催しました。 登壇者、来場者の方々ありがとうございました！ 内容はとにかくLT大会という感じです。 LT flowtypeによるコンポーネント指向における型の入手 by @joe_re speakerdeck.com flowtypeによるjsの世界における静的型付けの導入について。React + Reduxに適用する例など。 NSQについて by @tutuming speakerdeck.com bit.ly製の分散型MQサービスのNSQの紹介。シンプルで扱いやすく、スケーラビリティが高いところが魅了に感じた。 Rails+webpackの落ち穂拾い by @kuy speakerdeck.com Sprocketsから脱却した後の残作業についてのお話。 具体的にはi18n対応のための定義やimageのasset pathなどを

今日こんなスライドを見かけた。 djcordhose.github.io これはtypescriptとflowtypeの違いがよく分かるすごく良いスライド。 このスライドの5ページ目に以下の1文がある。 FLOW SOUNDNESS, NO RUNTIME EXCEPTIONS AS GOAL スライドに刺激を受けたのと、最近flowtypeを触っていたのもあって、これが何を指しているか書きたくなった。 実行環境 flow: 0.26.0 typescript: 1.18.10 Flowtypeのきほん 以下のjavasciptのプログラムをflowにかけてみる。 function foo(x) { return x * 10; } foo('Hello, world!'); $ flow flow.js:5 5: foo('Hello, world!'); ^^^^^^^^^^^^^^^

nishinipporirb.doorkeeper.jp 西日暮里.rbでGraphQLのスキーマ定義をRubyでやって、動かしてみたというLTをしてきた。 発表資料はこちら speakerdeck.com 動かせるサンプルコードはこちらにあるので、興味がある方はお試しください。 github.com GraphQLは特定のストレージやFWに対応する実装ではないので、何のORMを使ってどのDBにつなぐかは関係しない。 今回は使い慣れているので、ActiveRecordを使った。 今回の発表ではGraphQLをRubyに理解させられるぞ以上のことは何もできていないのが残念。 次回までにGraphQLで何か作っておきたい。 あと西日暮里.rbのオーガナイザに前回から加わらせてもらっています。 微力ながらコミュニティ運営にお力添えしていきたいと思っていますので、今後ともよろしくお願いします。

ng-sake.connpass.com 今週あった ng-sake#2 でLTさせてもらいました。 Cafe PitchはElectron + Angular2を使って最近作っているプレゼンテーションツールです。 github.com 発表資料はこちら speakerdeck.com 資料に書いてある通りだけど、普通にReactでコンポーネント指向に慣れていればAngular2においてコンポーネントを作る際にも同じ感覚で作れる。 加えてAngular2のコンポーネント間通信には様々な方法があるので、それぞれ良き場面で取捨選択すると良さそう。 例は公式に用意してあるので、参考にすると良い。 Component Interaction - ts 慣れないうちはとりあえず@output、@inputが使えるようになればどうにかなる。 後半はディスカッション形式で、エキサイトし過ぎてめっちゃ飲ん

Angular2を学ぶ目的から、最近はElectron + Angular2でプレゼンテーションツールを作っている。 とりあえず一通り動くところまでできたのでpublishした。 github.com 使い方はこんな感じ。 エレベーターの中の30秒でちゃんと相手に伝わるプレゼンをすることを意味するElevator Pitchという言葉があるんだけど、Cafe Pitchという名前はそこからきている。 素早くプレゼンを作るためのツールだけど、現実30秒でプレゼン作れないだろじゃあcafeかな、みたいな感じで、まとめるとそんなに深い意味はないです。 ちゃんと実行できるバイナリを用意しようとは思ってるけど、その辺の準備に必要なことがまだわかっていないのでnpmでglobalにinstallすれば使える、という感じ。 このあたりの記事を見ると分かりそうなので、追って対応していこうかなと思う。 あと