はてなブックマーク

ニジボックスの研修を何個か企画して実施したので、その内容を紹介します。 JavaScript 研修 JavaScript の研修です。古川が担当しました。研修の内容としては JavaScript の基本文法から文法内容を使って簡単な関数を書くパートが前半、後半は小さいアプリケーションを何のフレームワークも使わずに書いてみるところまで、ほぼ丸一日かかる6時間の研修です。 リクルートの JavaScript Bootcamp の内容がベースですね。 かなりインタラクティブな講義で、参加者がただ座学的に受けるというよりは、聞いた内容に対して質問してもらい、受けた質問から展開して、色々説明します。 イベントループの話みたいな若干マニアックな話から、ページネーションをどうやって実装するかという実践的な話もしてました。 この画像はページネーションをどうやって実装するかを解説してるところですね。 ページ

ある日のニジボックスメンバーの times にて。 で、これを見た時に「おや？」となったんですよね。 まぁ単純に上のif文を消し忘れただけだと思うんですが、このままだとどうあがいても4行目以降の三項演算子まで到達しません。 ただ、ちょろっと変えると4行目以降の三項演算子部分に到達させることができます。 そこで、以下のチャレンジを思いつきました。 問題 以下の関数に何かを渡して、 "申込書到達" って出せる applicationProgressValue の引数の値を示しなさい。 const applicationProgressValue = (num) => { if (num != 0 || num != 1 || num != 2) { return ""; } return num == 0 ? "申込書到達" : num == 1 ? "申込手続中" : num == 2 ?

ニジボックスの技術顧問 この記事は NIJIBOX Advent Calendar 2019 の14日目の記事です。 ニジボックスはリクルートグループの１つで開発機能会社の１つです。 自分自身はリクルートテクノロジーズで Application Solution Group (以下ASG) というグループのマネージャー兼シニアソフトウェアエンジニアをしつつ、今新しい試みとして同じ機能会社のニジボックスで技術顧問としても活動を始めています。 ASG は事業の問題を技術で解決するグループです。最近は主に画面がリッチになるに従い、フロントエンドの課題解決がメインになっています。一方で、フロントエンドはどんどん高度化しています。新しいウェブアプリケーションを作ってもその技術スタックを継続的に成長させる必要があります。 ASG だけで賄えれば良いですが、リクルートグループには大小合わせて数百を超える

これは PROGLOVE Advent Calendar 2019 の7日目の記事です。 はじめに 式のメタファーを利用することで、複雑なものを単純なものの組み合わせで表現できるようになります。それにより、複雑なものを作るときの考え方が変わります。まずは単純なものから作り始めよう、という思考になるのです。もし式のメタファーを使わなければ、そもそもスタート地点がわからないので作り始めることすらできないかもしれません。そうでないにしても、無理に作って複雑になりすぎてしまい、手に負えなくなって途中で作るのを諦めてしまうかもしれません。 考え方が変わるだけではありません。式のメタファーを使うことで、自然と関心の分離の恩恵も得られます。関心の分離の利点は色々ありますが、式のメタファーにより得られる最も大きな利点は「集中したいことに集中できる」ことです。具体的な例については記事後半で説明します。 「式

Deleted articles cannot be recovered. Draft of this article would be also deleted. Are you sure you want to delete this article?

通常は何らか、有り物のツールを使ったほうが絶対いいのですが、どうしても特殊要件があって既存のツールが使えないことがあったりします。カスタムツールを作るのに、すごい工数かけるのもだるいので、さっくり作りたいときにGAEとSpreadsheetsを使ってみてはどうでしょうか？ 下が今回作ったものの全体図ですが、このような仕組みのツールが200行も書かないアプリケーションで実現できます。半日かけた日曜大工的プログラミングでだいたい作れました。 サンプル・アプリケーションは https://github.com/yosukesuzuki/monitoring-tool で公開していますので、よろしければ参考にしてください。とあるbasic認証のかかっているサイトの情報とspreadsheetsの内容を比較して差分があれば問題があるので、SlackやSendgrid経由のメールで通知できるようにして

はじめに Qiita初投稿です。 今回は入社一年目の会社でiOSのIn-App Purchaseの継続課金の実装、テストを任されました。その際に調べながら進めていったのですが、なかなかまとまっているものもなく、中にはとても探しずらかったり、たまたま方法を発見したり、調べても解決せずに問い合わせたものもあったので、この機会に詰まった部分や気をつけたことをまとめました。もっといい方法などもあると思うのでその際は気軽にコメントして頂けると助かります。 書くこと firebaseとstorekitの競合によって起こった課金障害（storekitはiOSが提供しているIn-App Purchaseを行うためのフレームワークです）やstorekitで困ったこと、テストで用いるAppleのsandbox環境に悩まされたことについて書きました。 同じようにIn-App Purchaseで苦しんでいる人がこ

Node.js Advent Calendar が埋まってなかったので、代わりに細かすぎて伝わりにくいTips入れていきます。 util.isObject は既に deprecated util パッケージには isObject　、 isFunction といった引数に渡した値が何なのかをチェックする便利関数がありますが、既に Node v4 から deprecated です。 deprecated になっている util.isXXX 系一覧 util.isObject util.isFunction util.isArray util.isBuffer util.isDate util.isNull util.isNullOrUndefined util.isError util.isNumber util.isPrimitive util.isRegExp util.isString

Node.js Advent Calendar が埋まってなかったので、代わりに細かすぎて伝わりにくいTips入れていきます。 util.inspect object の文字列化をするための関数です。まぁまぁ便利なのですが、あまり使われてないシリーズです。先日公開した %o 便利という記事でも若干出しましたが、もうちょい詳しく解説してみます。 %o 便利 記事でも触れましたが、 util.inspect は %o フォーマッターを使った時に内部で呼ばれている関数です。 const util = require('util') const obj = { foo: 'bar', bar: 123, baz: true } obj.hoge = obj const str = util.inspect(obj) console.log(str) // '{ foo: 'bar', bar: 1

Node.js Advent Calendar が埋まってなかったので、代わりに細かすぎて伝わりにくいTips入れていきます。 util.format あんまり単体では使ってないかもしれませんが、所謂%s や %d といった formatter を渡して文字列を出力する、 printf のような振る舞いをする関数です。 const util = require('util') const foo = 'Hello World' const str = util.format('Test String %s', foo)　// Test String Hello World 「単体では」と銘打ったのは理由があって、 console.log や console.warn といった console のメソッドが内部的に利用しているのがこの util.format だからです。 Template

この記事は CrowdWorks Advent Calendar 2017 20日目の記事です。 はじめに クラウドワークスでエンジニアをしている @yosu と @ToruIwashita です。 普段は主にCrowdWorksのアプリケーション基盤に関わる開発を行っています。 そんな中で最近、短期間で大量なデータを対象に複雑なデータ分析を行う必要がありました。 その際、普段のデータ分析では行わないような試行錯誤を経験したため、この記事ではそのとき起きたことを書いていきたいと思います。 背景 CrowdWorksではデータベースとしてMySQLを利用し、そのテーブル数は400超、総レコード数は数億あります。 このうち一部のデータはRedshiftに同期されていて、普段カジュアルにデータ分析したい場合はRedashを通してクエリを実行し、グラフ化、ダッシュボードの作成を行っています。 クラ

誰しもお世話になっているが目立たない、あの「関」 「今年もアドベントカレンダーの季節だなぁ。こういうの苦手だから先に何書くか考えておこう。よし、最近ChromebookでElectron開発したときの開発環境構築についてでも書こう！手順をちゃんとメモっておいて、OK完璧！」 そして月日は流れ.... 今年のリブセンスの Advent Calendar はカレンダーごとに漢字1字のテーマがあります。 なん....だと.....？ 閑話休題。 株式会社リブセンスで転職ナビというサービスを担当している佐藤です。 このカレンダーは「関」にまつわる何かを書いていきます。 ということで関なんですが、真っ先に思い浮かぶのは関数だと思うんですよ。 しかしどうせなら他の人と被らなくて、かつみんなにとって身近な関をテーマとして取り上げたい。 ということで、”関係モデル”について書いていこうかなと思います。 関

jest はデフォルトコンテキストが browser になる。 そのため axios とかだと内部に使われるhttp requestライブラリがデフォルトで XHR になる。 XHR になると、Nodeのhttpモジュールとは違い、CORSの制約などの細々した制約を受けてしまう。 受けた結果、 jestでだけNetwork Error になる、CORSのエラーとしてわかりやすいエラーが出てくれたら良いが、 Network Error とだけ返ってくる事になり、意味不明の状態で半日デバッグしていたら、jsdom/xmlhttprequest で変な問題を見つけた。 どうも origin が "null" (string の null) のときと access-control-allow-origin のヘッダに何も指定しないと null (普通のnull) になり、同一性チェックに失敗するよ

たまたまTwitterを見てたら以下のようなツイートを見かけました。 つまり、 isNumber っていう関数を作るなら一旦Numberでキャストした値と同一かどうかを比較すれば良いと。おそらく NaN を省いた number 型を true にしたいのかなという感じがする (NaN === NaN は必ず false)。 ただこれには問題があるらしく、 V8 のOptimizerリーダーである bmeurer から下記のようなレスが付いてました。 「 Number() では意図しない副作用があるかもしれない」という意味のレス。最初意味がわからなくて、「おや？」と思ったんですけど、その後で補足が。 「ToPrimitive関数が呼ばれてしまい、意図しないJSの動きをするかも。」とのこと。 つまり、

仕事でQiita:Teamを使っていて、年末だし今年の投稿データを集計しようと思い立ちました。Qiitaには公式なAPIあるし、それをたたいておけばデータをいい感じに集められるのかと思ったのですが、調べてみると正直かなり不十分・不完全でした。 Qiita API v2ドキュメント APIへの不満 投稿(items)取得のデータで取れないものが多い DBの設計がすけてみえるようなAPIの設計ですが、取得する方としては以下のようなものは一気に取りたいですね 閲覧数 コメント数 いいね数 1000リクエスト／時間しかたたけない 上記のように一気に取れないデータがあって、ループの中で個別にリクエストしないといけないのにこのリクエスト制限はきついと思いました これ普通のqiitaのほうと一緒のAPIだからそういう制限だと思うんですが、1人あたり700円近く支払っている有料サービスとしては少なくなくな

IE 11で babel-plugin-transform-react-inline-elements の最適化を入れると画面に何も表示されないIE11Reactbabel IE でだけ、画面に何も表示されないんですけど？ いきなりこの知らせを受けたので、調査することに。フロントエンジニアにはよくある事なので落ち着いて IE 環境を modern.IE でセットアップしつつ状況を漁っていた。 結論 babel plugin で production ビルドのみ以下のoptimizationがロードされていて、それをオフにしたら動作した。 原因 IE には Symbol が実装されていない、かつ、 React の JSX は内部的に Symbol が使われている。基本的に React が createElement で生成したObjectであれば、そのタイミングで polyfill 化された

この記事はCrowdWorks Advent Calendar 2016、15日目の記事です。 今回はCrowdWorksにおけるElasticsearch利用について紹介したいと思います。 はじめに CrowdWorksはRailsで作られた仕事のマッチングサービスです。 働くワーカーさんがお仕事を探す場合や、お仕事を依頼したいクライアントさんがワーカーさんを探すための検索にElasticsearchを利用しています。 検索対象のデータはMySQL（Amazon RDS）に永続化されており、これをElasticsearchに同期する形で利用しています。 Elasticsearchの運用 Elasticsearchの運用はElastic Cloudを利用しています。 クラスタのスケールアップやバージョンアップ、プラグインの管理やセキュリティ設定がブラウザから簡単に設定できて便利です。 El

Deleted articles cannot be recovered. Draft of this article would be also deleted. Are you sure you want to delete this article?

Goto Definition は deprecated なパッケージになってしまいました。 GitHub のリポジトリもアーカイブ済みなので、今後メンテナンスされることはもうありません。 お気をつけください Atomでもコードジャンプしたいと思って調べてたら、symbols-viewというパッケージが最初から入っていることが分かって使おうと思ったのですが、これctagsが必要なんですね。 出来ればパッケージの機能はそれだけで完結させたい...。ということで何かないかなーと探していたところ、ありました。 https://atom.io/packages/goto-definition https://github.com/faceair/atom-goto-definition Atom上ではgoto-definitionで検索すれば出てきます。 これを入れるだけでメソッドの定義元にジャン

Node.js で server の random port を取りたい時 server を使った test をしたい時、 その環境で使われていなさそうな port をあれこれ確かめたりしていた時代が僕にもありました。んで、それはさすがに無駄なので random port を取るためのモジュール を作っちゃったりしてたんですが、こんなことをしなくても server.listen(0) にするだけでrandom port とれます。 const http = require('http'); const server = http.createServer((req, res) => { res.end('hello'); }); server.listen(0); server.on('listening', () => { // ここで random port が取れる const po

npm module の検索するのに使っているサイト ※ぶっちゃけただ qiita slide mode を使ってみたかっただけである npmjs.com npmjs.com 言わずと知れた公式サイト 公式なのでユーザーは一番多い（と思う） 自分は割りと　npm star をよく見る npmjs.com 検索は多分 couchdb package.json に書かれている description, keywords, name などがindex されているっぽい 検索時の sort 順は star 数とか検索の一致度合いで sort されている...? npmsearch.com npmsearch.com elasticsearch に食わせてそこから検索 npmsearch.com rating という独特の重み付けがあり、それが dependent 数、 ユーザー数、リリース頻度、テ

これまで、MartiniとかBeegoとかでGoogle App Engine/Goのアプリケーションを作ってきましたが、Goでのテストを書けていませんでした。CasperJSのe2eテストでごまかしていましたが、今回Gojiでアプリケーションを作るにあたってちゃんとテストまわりを整備しました。 Goji Go Web Frameworks 比較で紹介されていますが、かなり薄めの実装です。Goだとおそらくそういうのがスタンダードですね。実質的に、ルーティングの部分を楽にかけるぐらいですね。以下のようにREST APIを生やす時に便利です。 package main import ( "net/http" "github.com/zenazn/goji" ) func init() { http.Handle("/", goji.DefaultMux) goji.Get("/", index

SharedMemory と Atomic API について このエントリは JavaScript stage 0,1,2,3 Advent Calendar 2015 の 19日目の記事です。 ちなみに stage 1 です。 SharedMemory は SharedArrayBuffer と呼ばれる特殊な ArrayBuffer をインタフェースにして提供されます。さらに、 Atomic API というのはこの SharedArrayBuffer を操作するための Atomic という built-in Object です。 ちなみに Node.js v4.0 以降なら --harmony-sharedarraybuffer と --harmony-atomics で有効になります。 (Worker がないので無意味ですが) 背景 基本的に WebWorker に代表される Work

Deleted articles cannot be recovered. Draft of this article would be also deleted. Are you sure you want to delete this article? 2019.12.27追記 この記事は4年前に書いたものをメンテしていて、これまでたくさん読まれたようですが、平成時代のものだと思えてきました。最近、アプリのバックエンドに使い始めたFirebaseのほうが今の時代にあったPaaSだと思います。Google App Engineは2nd generationからはIaaSよりになっていると思うので、高速に開発することを求めるPaaSならFirebaseでしょうということで、この記事は飛ばしてFirebaseの紹介記事を適宜探してお読みください。 クラウドブームの初期にはそこそこ存在感のあっ

Deleted articles cannot be recovered. Draft of this article would be also deleted. Are you sure you want to delete this article?

smart newsのレビューをslackに通知したサンプル まだ、実際のAppStoreのレビューと見比べるとちゃんと全部拾えてないとか変なところありますが、そこそこできたので晒します。 リポジトリ 使い方とかはこちらで解説。アプリ3つ分ぐらいの処理であれば、GAEの無料分で十分運用できます。 https://github.com/yosukesuzuki/goisky-tools フレームワークの選定 go言語の強者達はフレームワークなんていりません、net/httpでいいんじゃんて方が多いようなのですが、そんなに強者じゃないので、フレームワークがほしいです。 これまで、MartiniとGorilla/Muxを使ったりしてましたが、Martiniは作者があまりやる気なくしていたり、Gorilla/Muxはフレームワークではなくtoolkitだと言っている通りフレームワークとしてのタガが

Deleted articles cannot be recovered. Draft of this article would be also deleted. Are you sure you want to delete this article?

http2confにいるんだが、nghttp2くらいはbuildしてくるべきだった、とかつぶやいたら色々とソリューションを教えてもらった。 自動化させたら世界一の @deeeet さんからDockerfileとかももらったんだけど、Dockerよりももうちょっと手軽にお願いしたかった。nghttp2がmacでビルドできればベスト。 色々試したけど、最終的に夏風さんに頼んでbrewでinstallできるようにしてもらった。 install nghttp2 by brew var net = require('net'), hpack = require('./hpack'); var FRAME_HEADER_LEN = 9; function createSettingsFrame(ack) { var flag = ack ? 0x1 : 0x0; var frameHeader = n