本記事は、リクルートライフスタイルアドベントカレンダー10日目の記事です。 リクルートテクノロジーズ兼リクルートライフスタイルのASGチームに所属している渡邉です。 最近は新規開発をやっていて、日々プロジェクトの package.json の更新に追われています。本記事ではその更新タスクを大いに助けてくれた Renovate について紹介します。 Renovate とは Renovate はプロジェクトの依存関係 (Dependency) の更新を自動化するツールです。似たようなツールとしては、Dependabot や Greenkeeper があります。プロダクションレベルのプロジェクトでは、明示している Dependency だけでも 20~30 程度あるのではないでしょうか。それらの Dependency は日々更新されており、最新版に追従していくだけでも時間と手間がかかります。Re

モダンなWebフロントエンドの技術とAMP モダンなWebフロントエンドのフワームワークやツールとAMPについて紹介します。 リクルートテクノロジーズ兼リクルートライフスタイルのASGチームに所属しているフロントエンドエンジニアの可児です。本記事は、リクルートライフスタイルアドベントカレンダー４日目の記事です。 本記事では、リクルートライフスタイルで取り組んでいる新規Webサービスのモダンなフロントエンド開発に関することとして、Next.jsやAMPについて紹介します。 目次 はじめに モダンなWebフレームワーク React/Next.js TypeScript styled-components AMP AMPとは AMPの開発パターン Next.jsとAMP AMPキャッシュ AMP と 非AMP の共存 検索結果カルーセルとSEO AMPの開発における注意点 まとめ はじめに リク

Recruit Engineers Advent Calendar 2019 本記事は Recruit Engineers Advent Calendar 2019 6日目の記事です。 adventar.org 昨日の記事はPoohSunnyさんの、 poohsunny.hatenablog.com でした。 もくじ Recruit Engineers Advent Calendar 2019 もくじ Amazon SESとは Amazon SESでできること / できないこと できること できないこと ベストプラクティス&アンチパターン メールを送るとき 上限値・サンドボックス制限 送信方法 SendRawEmailの挙動 専用IPアドレス 送信ログ取得 メールを受け取るとき 受信設定 受信ルール / 受信ルールセットについて 受信ルール 受信ルールセット Eメール受信イベントのハンドリ

こんにちは！リクルートライフスタイルの共通クラウド基盤でリードクラウドアーキテクトをしている須藤です。 この記事は Terraform Advent Calendar 2019 の2日目の記事です！( リクルートライフスタイル Advent Calendar 2019 2日目の記事でもあります) 2019.06.14 AWS Summit Tokyo 2019 でのセッション 本題に入る前に、我々のチームの新卒2年目、天野がAWS Summit Tokyo 2019で発表したセッションを紹介します。 我々のクラウド基盤では、攻めのインフラであり続けることをひとつの理念として掲げ、サービスレベルの向上・運用の省力化につながるよう積極的にマネージドサービスを活用しています。AWSの新機能の利用も積極的にしており、たとえば6月のセキュリティにフォーカスしたAWSのイベント re:Inforce

コンパイル時計算完全に理解したリクルートテクノロジーズの竹迫です。 この記事はRecruit Engineers Advent Calendar 2019の4日目(12/4)のエントリーです。先月、社内のTGIFで飛び入り発表したスライドを記事にまとめなおしました。 adventar.org 皆さんは素数を数えることが好きでしょうか？私は大好きです。 問題：MAX以下の素数の個数を数えよ。 与えられた数以下の素数の個数を予測する「ガウスの素数階段」を作る簡単な問題です。素数かどうかを判別するにはどんな数字でも割り切れないことを確認する必要があるため、ナイーブに素数判別を計算するとどうしても時間がかかってしまいます。（※厳密に素数の個数を予測する魔法の「リーマンの素数公式」はとても面白いのですが、今回の記事では解説対象外です。） 引用元：http://tsujimotter.hatenabl

【追記】タイトルを盛大に間違えてたのでさっそく訂正 誤：思ったよりも夫婦別姓に抵抗があった話 正:思ったよりも夫婦同姓に抵抗があった話 とんでもない間違いだぁ…こんなの零点だ零点 【また追記】 すっごいブコメが伸びてておののいています… すべてのコメントや言及エントリにお返事はできないけれど、少し追記したいです。 同じように結婚後の姓に馴染めない、みたいな既婚者先輩の声も多数聞けて、私だけじゃないんだー、と思えてよかった(小並感)。 n年経っても慣れない、みたいなのを読んで、逆に覚悟が決まったのかむしろ気が楽になりました。ありがとうございます。 あとこれは是非言いたいんだけど、ちらほら夫を責めるというか、夫が悪いみたいなコメントが見えましたが、それは違います。やめていただきたい。 世間体は、そりゃありますよ… 現状は女性側が姓を改めるのが「一般的」とされていて、よって私がエントリで書いたよ

CETチーム兼ホットペッパービューティーコスメ開発チームの寺下です。 先日 ホットペッパービューティーコスメ という新サービスをローンチしました。 コンセプトは「『似合う』が見つかるコスメ投稿・検索アプリ」で、現在はiOS版のみ配信を行っています。 本記事ではホットペッパービューティーコスメ（以下HPBコスメ）のアーキテクチャ・開発チームについて簡単に紹介していきます。 なお、iOSアプリの開発については今回は割愛します。 アーキテクチャ インフラはGCPを利用しています。 GCPを採用した理由としては主に以下の点が挙げられます。 Kubernetes(GKE)を利用して高可用・スケーラブルなインフラを手軽に構築・運用できる点 分析環境(BigQuery)との統合が強力な点 弊社内で運用実績が多くあり、運用のノウハウが確立されている点 また、原則として運用負荷を下げるために可能な限りマネー

ペアプロ・モブプロ、スキルマップ、1-on-1等々… チーム開発にまつわる各論・方法論・話題をよく見る昨今、関心の高まりは歓迎さるべきことながら つまるところそれらが現実のどのような問題を解決していくのか？ どのように相互作用するのか？ これらが有機的に結びつくことで現実のどのような問題を解決していくか？ こうした疑問に答えたり、具体例とともに記した記事はさほど多くないのではと思います。 本記事では昨年度に筆者のチームが約7ヶ月携わったプロジェクトにて、プロジェクト特性に起因する不確実性と我々がいかに戦ったかを記します。チーム開発を行う方にとってこの記事が実りあるケーススタディとなれば幸いです。*1 なお、本記事では以下のことは本旨とは逸れるため割愛させていただきます。 プロジェクトの機能的側面 技術的不確実性 各取り組み単体の詳細 はじめに / プロジェクトの雰囲気を伝える図 この記事で

こんにちは、Recruit-CSIRTのきっかわです。 「ウィルスオタクの若手エース」と呼ばれるようになったから、というわけではないでしょうが（笑）、このたび、話にはよく聞くが見かけたことのなかった「クレジットカード情報を盗むJavscript」を見つけたので、そのマルウェアと周辺の攻撃について情報を共有します。みなさんにとって本ブログが有益な情報になれば幸いです。 忙しい方へ 今回発見されたJavaScriptの概要 クレジットカードのチェックディジットの計算とクレジットカード番号の構成をチェックする チェックが通ると、外部サイトへ入力情報を全て送信する Javascriptコードの仕込まれ方 Webサイトのjsファイルを改ざんして動作 元のサイトの動きに対して、見た目上の動きは変わらない IOC https://ww1-filecloud[.]com/img 攻撃の流れ 今回観測した攻

5年エンジニアとして務めた富士通を一昨年退職した。そろそろほとぼりも冷めたと思うので、書く。 真面目に書いている増田もいるが、僕は自分の半径5m以内で起こった幼稚な理由にフォーカスを当てる。 開発環境がだめまずこれがトップにくる。 本当にだめだった。多分開発させる気なんてなかったんだろうなあ。ニートでももうちょっといい環境を使っていると思う。 メモリ4GBのセレロン使ってた。もちろんSSDじゃなくてHDD。PCは富士通製のミドルクラスのノートPCしか支給されなかった。 Macなんか認めん！iOSアプリも富士通PCで作れ！（本当にあった話）。 机上環境もだめいろんな環境にいたが、その中でもひどかったのは、もともと生産ラインがあった場所に机を置いて事務所として使っていた場所だ。机もせまかったし、気温も暑いか寒いかのどちらかだった。 そこに協力会社を大量に押し込んで、ソフトウェアの生産ラインを作

hooks が発表されてから趣味でも現場でもずっと hooks を使っています。おかげでだいぶこなれてきて、だいたいなんのライフサイクルでも表現できるようになってきました。 最初は単に useState が state を、 useEffect が componentDidMount/componentDidUpdate を置き換えるもの、と説明を済ますつもりでしたが、 useEffect についてはライフサイクルのモデルがぜんぜん違うので、別の説明をする必要があるように感じていました。 で、その結果 React Hooks を理解するには、関数のメモ化を理解するのが最も簡単だと思ったので、その説明をしつつ、イディオムを解説していこうと思います。 最初に: React Hooks は何であり、何ではないか 関数コンポーネントが状態を持てるようにするもので、関数のメモ化のテクニックを多用しま

はじめに リクルートテクノロジーズに4月に新卒入社した 辻 健人です．GitHubではmaxmellonで活動しています． 7月より，やりとりも作成もラクになるシフト管理サービス「Airシフト」 のエンハンス開発を担当しています． 以前は，React製SPAのパフォーマンスチューニング実例という内容で記事を書きました． 今回は同じSPAにおいて，いかにwebpackが生成するJavaScriptのバンドルサイズを減らすかについて紹介していきます． webpackが，そもそも何のためのツールか，バンドルする理由などについては割愛させていただきます． そういった話は，こちらの記事 (Webpack の考え方について – mizchi’s blog) がわかりやすいと思います． Airシフトのアーキテクチャ Airシフトは，React-Reduxで開発されており，かつSSRを行っておりコードの大

衛星が夜間に地上を観測した結果である「夜間光」データに焦点を当てた本記事。夜間光と経済活動には相関があると言われいます。果たしてどのように見えるのか、実際にデータを載せながらご紹介します。 筆者が昔撮影した長崎の夜景。山に向かうの手に行くほど暗くなっている様子や、橋がある場所、なんとなく道があることが分かります Credit : sorabatake 高い場所から夜の街を眺めると、街がどう作られているのか、どのぐらいの人がいそうなのか、どれぐらい活発な街なのか知ることができます。 これをもっと高いところから見ると、さまざまな土地の状況を広範囲に見ることができます。そうです、衛星データです。本記事では衛星データのなかでも「夜間光」に焦点を当てて紹介します。 ※本記事は宙畑メンバーが気になったヒト・モノ・コトを衛星画像から探す不定期連載「宇宙データ使ってみた-Space Data Utiliz

サービス終了のお知らせ 技術ブログサービス Qrunch（クランチ）は、10月31日を持ちましてサービスを終了いたしました。 11月30日 午後23時59分までは、以下からログインすることにより過去に投稿したコンテンツをエクスポートすることが可能です。 詳細はこちらをご覧ください。

Webパフォーマンス向上施策のために、今更ながら超速本1を読んだので、今までの自分の知見と合わせてまとめてみます。 なるべく柔らかく、改善施策ってまず何をどうすればいいの？という疑問を持った人に向けて書いています。 ▪️格言 そもそもWebは速い。遅くしているのは我々です。大抵は技術の問題ではなくて、人の問題。 引用元： テクニックではなく、今、本気で取り組むべきWebパフォーマンス （html5jパフォーマンス部 部長 竹洞さん） 心得 パフォーマンス向上に対する施策は大別すると以下の２通り 軽量化 （単純にやりとりするデータ容量を小さくすること） 圧縮 削除 最適化 （その時に最も適している実装・実行をとること） 経路・順番の変更 非同期 もっとも遅くしている原因を探して、それを対策するのが原則。「対効果」が絶対的正義である。手段から入るのは愚策。まず先に原因を知ることが重要。 ▪️1

1. はじめに 最近わけあってNodeのセキュリティ調査をしているのですが、今年の5月に開催された North Sec 2018 でセキュリティ研究者の Olivier Arteau 氏による 「Prototype pollution attacks in NodeJS applications」という面白い発表を見つけました。 この発表の論文や発表資料、デモ動画などもgithubで公開されていますし、ちょうどタイミングよくセッション動画も最近公開されました。 github.com Olivier Arteau -- Prototype pollution attacks in NodeJS applications この発表で解説されているのは、悪意のある攻撃者が、JavaScript言語固有のプロトタイプチェーンの挙動を利用して、Webサーバを攻撃する方法です。 発表者は、npmからダ

今まで自分で作ったものが十数個、仕事で5社ぐらいの redux を見てきたので、その結果思うところを書く。 前提として、自分はエコシステムに乗るという意味で今では redux 肯定派だが、redux それ自身が過剰に抱えている複雑さはもっと分解されるべきだ、という立場。 Redux がうまく設計されているとどうなるか 一貫した一つの設計論に従うので、考えることがなくなる 難しさが廃されるのではなく、難しい部分が一箇所に集中する。React Component の末端では、何も考えることがなくなる。状態管理という難しい部分を作る人と、末端のコンポーネントのデザインに注力する人を分けられる。 大規模になっても設計が破綻しにくい、というエンタープライズ向きな特性を持つ。が、その技術基盤は(静的)関数型由来の考えが多く、基礎設計や基盤理解にはハイスキルが要求され、需要と適用対象のミスマッチを感じる

某社で自分が React/Redux + TypeScript などの講習をやってみた結果、TypeScript 入門用資料が必要だと思って書いたやつです。 このドキュメントのターゲット TypeScript で書かれたプロジェクトに参加する人 TypeScript を導入するために、その事前知識が必要な人 このドキュメントの読み方 ES2015 for Beginners ES2015 for ES5 Programmers ES Modules 非同期表現: Promise と async/await TypeScript エコシステム編 自分が React/Redux などの講習でいろいろやってみた結果、 ES2015 と TypeScript を同時に教えると、初学者は何がどの概念に由来するかの区別が出来ずに混乱します。なので、ES5 -> ES2015, ES2015 -> Ty