はてなブックマーク

最近は ECMAScript 自身の機能も豊富になってきて lodash のユーティリティ関数の出番はだいぶ少なってきたけど、debounce と throttle だけは未だに使う機会がまあまあある。 しかし、lodash は何も考えずに使うとバンドルサイズが肥大化するのでいい感じに Tree Shaking するために lodash-es を使う必用があったり、自分が使っている機能とは全然関係ないアップデートが Dependabot から大量に降ってきたりしてしんどかったりする。 lodash は lodash.debounce のように個別のモジュールも提供されているけど、Last Published が 5 years ago になっていたりして、あまり継続的にメンテされてない様子が伺える。これに関する Issue は探すといっぱいあって、対応したいけど手が回ってないみたいな様子ら

Adventarを支える技術 Advent Calendar 2019 の23日目です。 今年から Adventar はオープンソースにしました。 ツールやライブラリ、言語などのソフトウェアであれば今の時代オープンソースというのは山程ありますが、サービスがオープンソースというのはそんなに多くないと思うので今回はそうした理由や、いい点、悪い点などについて書こうと思います。 オープンソースにする理由 特にクローズドである意味もないので、オープンソースにしたいとは前々から思っていて、昔のコードはオープンにしづらい履歴もあるし、システムリニューアルのタイミングでちょうどいいので、このタイミングでオープンにしました。 オープンソースにして誰かの役に立てば嬉しいし、誰かが勝手にバグを直したり機能改善をしてくれるかもしれないし、Fastly や AWS などはオープンソース支援で料金を補助してくれたりす

Adventarを支える技術 Advent Calendar 2019 の19日目です。 今日は Server Side Redering (以下 SSR) した結果を CDN でキャッシュする戦略について書きます。SSR の概要については以下にも概要を書いたので一読しておくとよりわかりやすいと思います。 上記に書いてありますが、今回は SSR を Lambda で行っていて、Lambda の実行はそんなに速くないし、実行回数での課金になるので、前段の CDN でキャッシュすることで、パフォーマンスとコストを最適化することができます。 その設計について書こうと思いますが、、先に書いておくと今回は SSR の結果をキャッシュせずに毎回リクエストのたびに Lambda を実行しています。そのあたりの理由も含めて書いていきます。 キャッシュのパージ キャッシュはやれば速くなるのは確実ですが、コン

Adventarを支える技術 Advent Calendar 2019 の10日目です。 今日は Adventar の Server Side Rendering（以下 SSR）している技術構成について書きます。 インフラ構成 まず、先日の記事に書いたように、Adventar ではすべてのページを SSR しているのではなく、カレンダーの詳細ページだけを SSR しています。SSR するカレンダー詳細は API Gateway で受けて Lambda でレンダリングしており、そうでない静的なアセットは S3 で配信しています。その前段のルーティングは CloufFront でおこなっています。 S3 で捌いているのは、JS や CSS などの静的ファイルは当然ですが、例えばトップページなどの HTML も S3 が返します。ただしこの HTML は SSR されていない、JS と CSS

Adventarを支える技術 Advent Calendar 2019 の8日目です。 今日は Firebase Authentication で苦労した点や工夫した点について書きます。 ログインの判定が遅い問題 Firebase Authentication を使って、現在のセッションがログインしているかどうかを検出するには、firebase.auth().onAuthStateChanged ()を呼び出します。 https://firebase.google.com/docs/auth/web/manage-users firebase.auth().onAuthStateChanged(function(user) { if (user) { // User is signed in. } else { // No user is signed in. } }); しかし、この処理

Adventarを支える技術 Advent Calendar 2019 の6日目です。 今日は envoy の gRPC に関する便利機能について紹介しようと思います。 gRPC-Web proxy 4日目の記事でも書きましたが、今回は gRPC-Web の proxy レイヤーとして envoy を利用しています。envoy で gRPC-Web の機能を有効するのは簡単で、HTTP filters に envoy.grpc_web を書いて、ヘッダの設定をするだけです。 https://github.com/adventar/adventar/blob/f580de20510f9debe6356a5ad193c4532d8f6a0d/api-server/envoy/envoy-prod.yaml#L44 https://github.com/adventar/adventar/blo

Adventar を支える技術 Advent Calendar 2019 の1日目です。 Adventar はサービスを開始した2012年以来、Rails を利用してサービスを提供してきました。今年はそのシステムを一から設計し直し、以下のような技術要素を使って実装しました。 Nuxt.js による SPA なフロントエンド Go で gRPC の API サーバー gRPC-web によるクライアント/サーバー間通信 Firebase Authentication による認証 envoy で gRPC の proxy AWS Lambda による Nuxt.js の Server Side Rendering Terraform による AWS リソースの管理 Serverless Framework による AWS Lambda, API Gateway のデプロイ Amazon ECS

package.jsonに "scripts": { "lint": "eslint src/**/*.{js,jsx}" } と書いた場合、npm run lintやyarn run lintは、このコマンドをシェルを通して実行する。このときデフォルトではshが使われる。例えばmacOSだとshはbashなので、bashがsrc/**/*.{js,jsx}を展開することになる。しかしbashは**/*の展開に対応してないので思ったとおりにうごかない。 $ tree . └ src ├ a │   └ bar.js └── foo.js $ zsh -c 'echo src/**/*.js' src/a/bar.js src/foo.js $ bash -c 'echo src/**/*.js' src/a/bar.js この場合はeslintがglobを展開してくれるので、クオートしてそ

こんな感じのコードがあったとして # app/models/user.rb class User end # app/models/admin/user.rb module Admin class User end end # app/controllers/admin/first_controller.rb class Admin::FirstController def index p User end end # app/controllers/admin/second_controller.rb module Admin class SecondController def index p User end end end FirstControllerとSecondControllerの違いはモジュールのネストのシンタックスの違いだけ。このときRubyはUser定数の探索を次の順

tech.smarthr.jp 人事制度として興味あるし、他の会社で働いてみることにも興味があったので発表された直後に反射的に応募したところ、きていいよ（意訳）と返事をもらったのでほいほいと行ってきた。 一日のコースで、こんな感じのことをやってきた。 午前中 30分ぐらいで環境構築 エディタとかシェルの設定を好きなようにする 必要そうなソフトウェアとかミドルウェアとかはあらかじめインストールしてあった リポジトリをクローンしてきてドキュメントに沿ってbundle installとかbin/rails db:migrateとかをやるだけ 開発環境はRails以外（DBとか）はDockerだった（RailsはDocker for Macが遅くて諦めたらしい） さくっとできるチケットを消化してマージまでのプロセスを体験する CSSを2行追加しただけ チケット管理はJiraでやられていてGitHu

JavaScriptもTypeScriptも混じっているプロジェクトで、Lintのルールをなるべく共通化して運用したいというモチベーションがある。 JavaScriptのLinterはESLintを使いたい。TypeScriptのLinterはTSLintがデファクトだが、TSLintはESLintと比べて実装されているルールがだいぶ少なかったり、同じルールでも名前が違ったりする。 解決するアプローチは以下の二つがある。 typescript-eslint-parser https://github.com/eslint/typescript-eslint-parser ESLintのパーサーにTypeScriptを使うことでTypeScriptのLintをESLintで行う。JSもTSも同じ設定でいけるので最高便利。なんだけどREADMEに Important: This parser

BdashというアプリケーションをElectronで作りました。 bdash-app/bdash: A simple business intelligence application. 以下からダウンロードしてインストールできます（現状まだMac版だけ）。 https://github.com/bdash-app/bdash/releases ざっくりとこんな感じのことができる。 SQLを書いて保存＆実行できる 結果を元にグラフを書ける gistで共有できる 現状で対応しているデータソースはMySQL、PostgreSQL（Redshift含む）、BigQuery 仕事でRedshiftを使って分析SQLを書くことが増えて、手元ではJupyter Notebookを使ってたんだけど、SQL書いてグラフを書くだけの用途には若干オーバースペックでもうちょっと簡単にできるといいなと思ったのがき

会社の同僚の@wata_devと@osadake212とISUCON6本戦に出場して4位でした。チームメンバー全員普段アプリケーション書いてるエンジニアでインフラ寄りのメンバーがいなくて複数台構成の本戦はきついだろうなと思ってたので、4位という結果はかなり健闘したほうだと思うけどやはり悔しい・・。 本戦での役割的にはざっくり @hokaccha: 方針たて @wata_dev: インフラ @osadake212: アプリケーション という感じでした。 どんなアプリケーションだったか リアルタイムお絵かきアプリ Reactでサーバーサイドレンダリング 裏にAPIサーバー SSEで変更をpush 全部Docker 序盤 itamaeでMySQL, Nginx, Ruby, Redisあたりのレシピを作っといて複数サーバーでも必要なミドルウェアといい感じの設定をすぐに入れられるようにしといたんだ

ISUCON6にしましまスペシャルというチーム名で会社の同僚と参加して最終スコア147,028で予選通過できました。言語はRubyです。コードはここに公開してます。 https://github.com/hokaccha/isucon2016_qualifying 以下やったこととかのメモ。 10時-11時 下準備を整える どういうアプリケーションか確認 コードをざっと読む サーバーのスペックとか動いてるプロセスを確認 ベンチ流してみてリクエストの傾向を把握する nginxのログから集計してブラウザから見れるような雑なやつを用意しといた 11時-12時 作戦をたてる とりあえず/と/keywordが遅いのでそこを改善することにする htmlifyの改善、isutarの統合、インフラ・ミドルウェア周りの設定の3つに作業を分けてそれぞれ取り掛かる isupamもどうにかしたほうがいいかと思った

Array.prototype.keysはIteratorを返すのでArray.fromに食わせる Array.from(Array(5).keys()); //=> [0, 1, 2, 3, 4] もしくは Array.from({ length: 5 }).map((v, k) => k); //=> [0, 1, 2, 3, 4] Array.fromの第二引数はmap的な役割があるので Array.from({ length: 5 }, (v, k) => k); //=> [0, 1, 2, 3, 4] こんな感じ。 [追記] 便利。 ES6でN個の配列 - hokaccha hamalog v3[es2015][js] これでも行ける -> [...Array(5).keys()];2016/04/18 11:42 b.hatena.ne.jp

jQueryの$.whenみたいに複数のdeferredを同時に処理するみたいのはAngularJSだと$q.allでできる。 var d1 = $q.defer(); var d2 = $q.defer(); var d3 = $q.defer(); $timeout(function() { console.log('d1'); d1.resolve('d1'); }, 10); $timeout(function() { console.log('d2'); d2.resolve('d2'); }, 1000); $timeout(function() { console.log('d3'); d3.resolve('d3'); }, 200); $q.all([ d1.promise, d2.promise, d3.promise ]).then(function(result)

以前はAndroidのChrome側にWebデバッグを有効にするみたいなのがあって、PC側ではADB立ち上げたりする必要があったんだけど、最近はもっと簡単になってるっぽくて、 1. AndroidのUSBデバッグを有効にする 2. USBでつなぐ 3. AndroidのChromeで適当なページ開く 4. PCのChromeで「ツール」→「デバイスの検証」を開く 5. Androidで開いてるページをPC側で開いてデバッグできる という簡単なステップで済むようになってる。 PCのChromeのバージョンは32以上が必要（現時点でのstableは31なのでCanaryとかBetaを使う必要ある）。

AngularJSでHTTP Requestする際に、1.1.1より前まではX-Requested-Withをつけてたらしいんだけど、CORSのpreflightを飛ばさないためにデフォルトでは削除したらしい。 https://github.com/angular/angular.js/issues/1004 X-Requested-Withをつけたい場合は以下のようにする。 myModule.config(function($httpProvider) { $httpProvider.defaults.headers.common['X-Requested-With'] = 'XMLHttpRequest'; }); このヘッダでXHRかどうか判断する場合がある（Railsとかも）ので注意。

Railsはprotect_from_forgeryって書くだけでCSRF対策が有効になってマジ便利なわけだけど、セッションで認証するんじゃなくてiOSから呼ぶAPIとかでトークン使って認証する場合はCSRFの対策いらないので無効にしたい。 その場合は protect_from_forgery with: :null_session ってすればいいらしい。これはCSRF Tokenが一致しなかった場合に例外を投げるんじゃなくてセッションを空にするという動作になる。 ちなみにprotect_from_forgeryのデフォルトは:null_sessionなので protect_from_forgery でもよさそう（Rails 4.0.0現在） ただし最初は以下のようになってるので明示的に変更する必要はある。 class ApplicationController < ActionContr

OAuth1.0をJavaScriptだけでやろうとすると、consumer keyやconsumer secretが漏れちゃってよろしくない。それはすぐわかる。ではなんでこれらが漏れるとよくないのか。そしてなぜOAuth2.0ではJavaScriptのみでOAuthができるのか。 OAuth1.0はcallback URLを指定するときに、アプリケーション登録時に設定したcallback URLと別のURLを指定しても、認証後そのURLにリダイレクトする。これだとconsumer keyとconsumer secretが漏れた場合に、アプリを偽装してアクセストークンを取得される可能性がある。 で、OAuth2.0はそれを許さない。callback URLがアプリケーション登録に設定したcallback URLと前方一致しないとダメなので、自分が管理している範囲のURLにしかリダイレクトし

npmにアップするときは.npmignoreに書いたファイルは除外される。書くの忘れててconfyに.vimrc.projectとかいう恥ずかしいファイルが上がってた。 内容どうするかだけど、他の人の見てみると.git*とかtest/とかが多いかな。testをnpmignoreするかどうかが迷いどころかなと思った。個人的にはモジュールのソース読むときtest参考にしたりするのであると嬉しいかも（リポジトリ見ろって話しではあるが）。

その昔はrequire.pathsというのがあってプログラム内からロードパスを設定できたんだけど、いつしかrequire.pathsは廃止され、NODE_PATHで設定するしかなくなった。 でもNODE_PATHだとプログラムの中からロードパスを変更することができない。 // libにパスを通して./lib/foo.jsをrequire('foo')で読み込みたい process.env['NODE_PATH'] = __dirname + '/lib'; require('foo'); // Error とやっても ./lib/foo.js は読み込めない。でも環境変数いちいち指定するのめんどいよ！ってこともある。 そこでソース読んでたらModule._initPathsってのを呼べばNODE_PATHを見てパスを再設定してくれそうだなーと思ってやってみたらできた。 process.en

例えば入力ファイルの行数をカウントするlinecount.jsっていうのがあったとして $ node linecount.js foo.txtっていう使い方と $ cat foo.txt | linecount.jsって両方に対応したいときNode.jsではprocess.stdin.isTTYを使えば判定できる。 if (process.stdin.isTTY) { // $ node linecount.js foo.txt // みたいに実行した時の処理 } else { // $ cat foo.txt | linecount.js // みたいに実行した時の処理 }

<a href="http://example.com/" rel="noreferrer">link</a> のように rel="noreferrer" をつければリンク先のリクエストに対してリファラを付与しないらしい。Chromeでしか確認してないからブラウザ対応はよくわからん。 仕様もある。 http://www.whatwg.org/specs/web-apps/current-work/multipage/links.html#link-type-noreferrer 開発中にリファラがあるとどうしても不便な状況になって見つけた。

ruby-buildをアップデートしたら $ brew update $ brew upgrade ruby-build2.0.0-p0がきてたので $ rbenv install ... 2.0.0-p0 ...インストールしようとしたらエラった。 $ rbenv install 2.0.0-p0 Downloading openssl-1.0.1e.tar.gz... -> https://www.openssl.org/source/openssl-1.0.1e.tar.gz Installing openssl-1.0.1e... Installed openssl-1.0.1e to /Users/xxx/.rbenv/versions/2.0.0-p0 Downloading ruby-2.0.0-p0.tar.gz... -> http://ftp.ruby-lang.org