サクサク読めて、アプリ限定の機能も多数!
トップへ戻る
パリ五輪
joe-re.hatenablog.com
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月だったので
調べごとがあって、pumaのソースを読んだ。 そこでpumaの設定ファイルに書いてあるDSLの適用の処理が勉強になったので書く。 (puma: v2.11.0 時点) pumaのソース puma/dsl.rb at master · joe-re/puma · GitHub ここでやっている。 主要な処理だけ抜き出した 主要な処理だけ抜き出して、少しだけ修正して分かりやすくした。 pumaに学ぶRubyのDSLの作り方 これを実行すると以下になる。 [~/src/sandbox/ruby_dsl]$ ruby dsl.rb blockも渡せる #<DSL:0x007fc39a1fc740 @options={:foo=>"test", :boolean_value=>true}> config.rbで設定した値が適用されたのが分かる。 いいところ configファイルを間違って記述したとき
最近Vue/Vuexを触っている。 前々から欲しいと思っていたのもあって、習作としてelectronでYouTubeのデスクトップクライアントを作った。 github.com 僕は仕事中はだいたいYouTubeを再生している。映像を見ながらコードを書きたい欲求があった。とはいえ、そのために作業領域を侵食されるのはつらい。 ということで前面に固定する機能と透過率を設定できる機能をつけた。 こんな感じになって便利。 Vueにおいて、TypeScriptを選ぶかFlowを選ぶか Vueにおいて、楽をしたいならTypeScriptを選ぶ方が良い。Flowに比べて、公式のサポートが断然に厚い。 公式ページにもサポートについて1セクション割かれている。 TypeScript Support — Vue.js また、TypeScriptチームがVueとTypeScriptのStarter Kitを公開し
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もどんどん進化しているし、もっと良いパターンもありそうだなー、という感覚もあります。 ぜひ知見をお持ちの方はお話ししましょう。 主催のランサーズさん、登壇者の皆様、ご参加いただいた皆様、ありがとうございました。
この記事は 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!'); ^^^^^^^^^^^^^^^
SeleniumWebDriverを使ってつまらない作業を駆逐してやる!! from Masato Noguchi 会社のLT大会で発表した。 スクショ撮る作業つらすぎる!Selenium Web Driverって使い捨てのスクリプト的にも使えるんだよ!そんなクソみたいな作業自動化しようよ! という内容。 このLTのために簡単なデモアプリケーションを作った。 これを使うと、↓なことができる。 少し分かりづらいけど、shot.rbを実行するとfirefoxが起動が起動して4人のユーザでログインして、それぞれスクリーンショットを撮ってsnapshotsディレクトリに格納する。 スクリーンショットを撮るコード selenium-webdriverを使って、4人のユーザでそれぞれログインしてスナップショットを撮 ... 資料 ざっくりした例は↓を見るとわかりやすい。 RubyBindings -
nishinipporirb.doorkeeper.jp 西日暮里.rbでGraphQLのスキーマ定義をRubyでやって、動かしてみたというLTをしてきた。 発表資料はこちら speakerdeck.com 動かせるサンプルコードはこちらにあるので、興味がある方はお試しください。 github.com GraphQLは特定のストレージやFWに対応する実装ではないので、何のORMを使ってどのDBにつなぐかは関係しない。 今回は使い慣れているので、ActiveRecordを使った。 今回の発表ではGraphQLをRubyに理解させられるぞ以上のことは何もできていないのが残念。 次回までにGraphQLで何か作っておきたい。 あと西日暮里.rbのオーガナイザに前回から加わらせてもらっています。 微力ながらコミュニティ運営にお力添えしていきたいと思っていますので、今後ともよろしくお願いします。
Angular2を学ぶ目的から、最近はElectron + Angular2でプレゼンテーションツールを作っている。 とりあえず一通り動くところまでできたのでpublishした。 github.com 使い方はこんな感じ。 エレベーターの中の30秒でちゃんと相手に伝わるプレゼンをすることを意味するElevator Pitchという言葉があるんだけど、Cafe Pitchという名前はそこからきている。 素早くプレゼンを作るためのツールだけど、現実30秒でプレゼン作れないだろじゃあcafeかな、みたいな感じで、まとめるとそんなに深い意味はないです。 ちゃんと実行できるバイナリを用意しようとは思ってるけど、その辺の準備に必要なことがまだわかっていないのでnpmでglobalにinstallすれば使える、という感じ。 このあたりの記事を見ると分かりそうなので、追って対応していこうかなと思う。 あと
connpass.com 大学の先輩の @azipon_zzz と一緒に、フロントエンドの知見交換を目的に勉強会を開催しました。 来場者、登壇者の皆さんありがとうございました! 全体的な進行 前半はLT大会で、後半はそれぞれの会社からの代表者に前に出てもらって、座談会形式で意見交換する会を設けた。 LT Introduction to flux-util by @joe_re speakerdeck.com flux-utilsをざっくりと紹介。 Reduxとの共通点が多くあるので、その比較とか。 社内CSSフレームワークを作ったった by @azipon_zzz speakerdeck.com チーム開発において、cssの書き方を統一させ、似たような定義の氾濫を抑えていきたい。 そのための社内cssフレームワークを整備した話。 統一的な定義をしていくことで、デザイナーの工数の削減にもつな
jser.connpass.com jser.info #jserinfo すごく楽しかった— じょう (@joe_re) 2016, 1月 16 すごく楽しかったです!5周年、おめでとうございます! 尊敬 #jserinfo 5周年誠におめでとうございます。継続は力なり。本当に凄い事だと思います。尊敬しています。 https://t.co/o6fEeFLqvO— Takuto Wada (@t_wada) 2016, 1月 16 僕も尊敬しています。 僕がWebの技術者になって、2年ほど経ってしまいました。 その前にいた業界と比べてWebの変化は早くて、最初のキャッチアップは苦労しましたが、js界隈に関してはJSer.infoがあるおかげで継続的なキャッチアップができています。 azuさんの情報収集力凄すぎる。 内容 どれも面白かった。(内容はJSer.infoでまとめられているので、ご
明けましておめでとうございます! 正月中にswift覚えて、イケイケモバイルエンジニアに華麗な転身を遂げる予定でしたが結局swiftは1行も書きませんでした。 しかしswiftを代償に捧げた結果、Railsのrequest-specからレスポンスを抽出して、サーバのレスポンスをモックできるautomockというgemができました。 github.com automock is 何 WebAPIに対しては、極力中のロジックに関与せず(モックも極力使わずに)、特定のリクエストを投げたら決まったレスポンスが返ることをブラックボックスにテストするのがいいよね、というベストプラクティスがあり、この形式で書かれたものはrequest-specと呼ばれています。 これに関しては以下の記事が詳しいです。 RSpecでRequest Describer - Qiita このテストは実際にrequestを投げ
ザックが来ていて、写真を撮ってもらえて浮かれた。 instagram.com 資料 僕はどうしてもLibsassが使いたかったんだ! from Masato Noguchi www.slideshare.net 割りと赤裸々に、Libsass on Sprockets を実現するために苦しんだ話をさせてもらった。 これは西日暮里.rbでもLTさせてもらったsprocketsを捨てたい話の延長線の話で、gulpを使ってフロントエンドでビルドをした成果物(assets)をapp/assetsに配置する時の苦労話のstyle編。 具体的には 複数エントリーポイントの差分ビルドをどうやって実現するか asset_pathヘルパーをどうやって解決するか の2つの問題があった。 複数エントリーポイントの差分ビルドをどうやって実現するか これはproductionデプロイ時には関係なくて、開発時の
僕なりによく使うなー、って方法を書いてみる。 親ディレクティブと子ディレクティブ間で通信をしたい場合 tabset要素とtab要素は親と子の関係になると言えると思う。 そしてtabset要素は今選択している要素が何なのかを管理して、tab要素に適切に伝えられる必要がある。 そんな時には、子ディレクティブ(tab)から親ディレクティブ(tabset)のAPIを利用するようにできれば良い。 そんな時に使うと良いのが、directiveのrequireだ。 requireは'^ディレクティブ名'と指定すると、親のコントローラを参照できるようにしてくれる。 ^を付けない場合は同じ要素内の属性を探しにいく。 この記事がその辺の挙動がすごく分かりやすい。 AngularJS Directive なんてこわくない(その4) - AngularJS Ninja 例 あまり良い例じゃないかも知れないけど、「
明けましておめでとうございます! 設定ファイルの大掃除も兼ねて、自宅Macの環境セットアップをAnsibleで行うようにしてみました。 joe-re/dotfiles · GitHub Ansibleにした経緯 2台のMacの環境を揃えたい 昨年iMac5kディスプレイモデルを購入した。 それによって今までメインで使用していたMacBookAirは外出用にして、2台で運用している。 そうなるとどうやって環境を揃えようかなー、って悩みが発生する。 なるべく外出時も環境は変えずに開発できるようにしたい。 Ansibleに至るまで 当初はBoxen使ってた。 BoxenはPuppetでMacの環境構築を自動化してくれるツール。 PuppetのDSLを覚えなければいけないというハードルはあるものの、 かなり細かいところまで設定できて非常に高機能。 だけどチームならまだしも、個人で使うにはオーバース
このページを最初にブックマークしてみませんか?
『Please Drive Faster』の新着エントリーを見る
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く