こんにちは、JX通信社でシニアエンジニアをしているSirosuzumeです。 JX通信社の「FASTALERT」には、ユーザーが事前に設定した地域で発生した災害情報を、メールで受信する機能があります。 しかしテストする手順も複雑で、配信条件も多様化していったこともあって、手動でのテストを行うことに限界を感じていました。 設定画面の挙動確認など、ブラウザ上で完結するテストであればPlaywrightを使って自動化することもできていたのですが、実際にメールを受信するところのテストを自動化する方法についてのノウハウ不足が課題でした。 そこで、Amazon SESの機能を改めて確認していたところ、特定のメールアドレスで受信したメールをS3に保存する機能があることを知り、E2Eテスト内からS3にアクセスすることでメールの受信テストまで自動化でカバーできるのではないか、と考えたことが、今回のチャレンジ

こんにちは、JX通信社でシニアエンジニアをしているSirosuzumeです。 JX通信社の「FASTALERT」には、ユーザーが事前に設定した地域で発生した災害情報を、HTMLメールで受信する機能があります。 HTMLメールには以下のような特徴があり、普段のフロントエンド開発の知識が役に立たないことが多いです。 Gmail、Outlook、その他のメーラーでは、使用できるタグやCSSに違いがある CSS 自体が使えないクライアントも存在する ベストプラクティス的なものを探しても、「tableタグを使ってレイアウトを頑張って調整しよう！」といった辛い現実が待ち受けています。 今回、HTMLメールのコーディングを担当することになり、もっと簡単な方法はないかと探していたところReact Emailというライブラリと巡り合いました。 React Emailは、名前の通りReactを使ってHTMLメ

こんにちは。kimihiro_nです。 今回はアプリケーションの動作を保証するために不可欠なテストコードの書き方についてです。 特に外部依存要素のテストに焦点を当ててみていきたいと思います。 外部に依存するテストコード 皆さんはアプリケーションのテストコードを書いていますか？ 内部的な状態を持たず、入力と出力が常に変化しない関数であれば、テストコードを書くのは比較的容易です。実際に関数を呼び出ししてその出力と期待値が一致しているかをみればテストすることができます。 しかし実際にアプリケーションを開発する場合、データベースへの接続だったり外部へのAPI呼び出しだったりといった外部の状態に依存した処理が含まれることが多いです。このような場合、素直にテストを書くのが難しいです。 多くの場合モックを利用して実際のデータベース呼び出しを置き換えたり、テスト用のリソースをdockerなどで構築してダミ

こんにちは。スクラムマスターの@sakebookです。 今回は「象・死んだ魚・嘔吐」をチームでやってみたのでその振り返りをします。 「象・死んだ魚・嘔吐」とは 振り返り手法の一つです。Airbnb Story 大胆なアイデアを生み、困難を乗り越え、超人気サービスをつくる方法（原題: The Airbnb Story）の中で紹介されていたようです。 翻訳されてなかなかキャッチーなネーミングになっています。 それぞれ次のようなことを意味します。 象 凄く大きい、見えているけど、みんな見ないふりをしている課題・問題。表層化しているけど大きすぎてみようとしていない。これが何かをみんなで話していく。 死んだ魚 放っておくと腐っていく。そういう問題。放置しておくとまずいことになる問題ってなんだろう？ということを話し合う。 嘔吐 自分の胸の中に隠していて、吐き出せなかったこと。これをこの場で嘔吐する。

スクラムマスターの@sakebookです。今回は「リモートワークでもできる、気軽に始める勉強会のすすめ」です。 「勉強会」というと、想像するものが人によって異なるので、事前にどんなものかを書いておくと 「直接の業務ではないが何かのテーマについて一緒に学んでいる会」 のことを勉強会と、この記事では定義します。 そんなのは勉強会じゃない！という人は適宜読み替えて、こういうことをやったよ気になったらやってみてねくらいの温度感で読んでください。 この日は動画再生が上手くいかなかった リモートワークにより開催機会の減少 コロナ禍以前からリモートワークを取り入れていた弊社ですが、コロナ禍に伴い、地方へ移住した人や地方勤務にて採用したメンバーも増えています。そのため、なかなかオフサイトでのイベント開催が難しくなっていました。 勉強会も同様で、開催頻度が減少していました。 みんなで動画を見るみたいな体験を

JX通信社の CTO の小笠原(@yamitzky)です。本日は、最近社内で検証している API クライアントの「Insomnia」や、Insomnia を活用したチームでの API 開発の効率化についてご紹介します。 Insomnia とは Insomnia は、オープンソースの API クライアントです。API 通信を GUI で直感的に検証・保存できる、というのが最も基本的な機能です。似たようなツールだと Postman などが有名だと思います。 insomnia.rest Insomnia は一般的な REST API だけでなく、GraphQL や gRPC の API にも対応したツールです。JX通信社では、NewsDigest や FASTALERT などのサービスで GraphQL を活用しているため、GraphQL にネイティブ対応しているのは非常に便利です。 Insom

*1 こんにちは、サーバーサイドエンジニアの @kimihiro_n です。 今回はSentryというエラー集約管理システムをGo言語で扱う場合の知見を共有したいと思います。 Sentry とは Sentryはエラーの集約管理を行うためのシステムで、作成したアプリケーション内で発生したエラーを一括で収集して見やすく管理することができます。 sentry.io 類似のエラーをグルーピングして発生頻度を確認したり、エラーの発生状況をSlackのようなチャットツールに通知してくれたりします。 予期しないエラーが発生したとき、生のログを見なくてもSlackやWebのUIで確認出来るのはとても便利です。 バックエンドからフロントエンドまで幅広い言語に対応しているためシステムのエラーを一括で集約が可能です。 JX通信社ではエラー管理ツールとしてSentryを広く利用しており100を超えるシステムが登録

あけましておめでとうございます。 サーバーサイドエンジニアの @kimihiro_n です。 今日はAWSに載っているシステムの避難訓練を実施したことについて書いてみようと思います。 弊社が提供している FASTALERT というサービスでは、全国の災害や事件などを検知して報道機関や自治体、インフラを支える企業などにリスク情報として提供しています。 リスク情報を提供するという性質上、情報検知の素早さや網羅性に加えて「システムの可用性」も重要なサービスの要素となっています。 FASTALERT の多くのシステムは AWS の東京リージョンで動いており、複数データセンターを活用した冗長化(マルチAZ)がされています。 しかし、例えば大規模地震のような広域かつ被害の大きい災害の場合、東京リージョン全体にわたって問題が発生する可能性があります。 首都直下型の大きな地震は今後30年以内に70％の確率

こんにちは！JX通信社でMLエンジニアのファンヨンテです。私は自分だけでなくMLチームの成果を最大化するために日々全力を尽くしています！ JX通信社のMLチームでは人的リソースを最大限活用するため "力を使うべき所にのみ注力しよう！" をスローガンに徹底的に効率化しています。 今回はちゅらでーた様と弊社の共同勉強会で私が発表した内容をより掘り下げてお伝えできればと思います。 本内容については ちゅらデータさんとの共同勉強会にて発表しております！ speakerdeck.com 動画を見たい方はこちら を御覧ください〜 R&Dタスクの属人化について 図１ アプリ開発におけるチーム開発(左)とR&Dチームで発生しがちな属人化した、タスクの進め方 弊社はNewsDigestを始めとしたアプリを開発しており、アプリ開発の場ではチームの皆が一丸となり、アプリ開発という一つの目標に向かって協力し合いな

はじめまして。JX通信社でデータアナリストをしている @nrtaking です。 弊社では、7/23〜8/8に行われた東京オリンピック、8/25〜9/5に行われた東京パラリンピックにあわせて関連した日本語ツイートを全量収集し、Twitter Japanなど各社に提供していました。 内容に関する簡単な分析についてはプレスリリースでお伝えしているので、そちらもあわせてご覧ください。 prtimes.jp 実はこのツイート収集システムは、2週間ほどでほぼゼロから立ち上げたものでした。 今回は五輪関連のツイート収集を支えた技術について紹介します。 叶えたかった要件 五輪に関するツイートを、NTTデータの提供するAPIからストリームで受け取り続ける ツイート量などの統計情報やRTが多いツイート情報をダッシュボードの形で見ることができる 上記を（ほぼ）リアルタイムで実現できる 実はこの取り組みにあたり

はじめまして、新卒フロントエンドエンジニアのぺいです。 JX通信社でフロントエンドの開発はReactが主流になっており、React Hooksを使った開発が欠かせません。hooksは便利な反面、適材適所使い所を理解していないと逆にパフォーマンスが悪くなってしまう場合があります。そこで今回は普段フロントエンドを書かない人も勉強会に参加するのを考慮し簡単な改善から応用としてReactで書かれたFASTALERT *1の改善まで行ってもらいました。 前提条件 勉強会の内容 再レンダリングされているコンポーネントを見つける なぜ再レンダリングされてしまうのか 改善方法 コンポーネントのメモ化 関数のメモ化 最終的な変更箇所 毎回コンポーネントや関数をメモ化すべきなのか コストの高い計算 無駄なレンダリング カスタムhooks 最後に 参考 前提条件 react 17.0.1 勉強会の内容 最終的な

JX通信社シニアエンジニアの@shinyorkeです. 最近はチームの朝会でよく着ているTシャツにツッコミを受けてます.*1 JX通信社では, いい感じにデータを整備・運用しているデータ基盤を駆使して, BI（Business Intelligence）文脈でのデータ分析・可視化. ダッシュボード作ったり. 機械学習的なアプローチを使ったR&Dと機能開発（分類タスクなど） といった業務・タスクを社員・インターン問わず行っています. データ分析でSQLを書いたり, 「新しいアルゴリズム試すやで！」的なノリでPythonのコードをゴリゴリ書く・動かして結果を見て振り返ってまた臨む...って楽しいですよね. チームの皆さんも, もちろん私もモチベーション高くやってるわけですが！？ あれ, notebookどこ行ったんや...🤔 よくありますよねー（震え） 自分もチームメイトも, 前のめりになっ

※ 今はGitHub ActionsでOIDCが使えるので、本記事の内容は少し古いです。*1 現場のルール等で「インフラを触るワークロードはオンプレでしか動かしてはならない」みたいなルールがある場合には多少参考になるかと思います。 SREのたっち(@TatchNicolas)です。 JX通信社では「インフラチーム」のようなものは存在せず、開発したチームが運用までやるFull-cycleなスタイルを取っています。AWS・GCPリソースの管理も特定のメンバーが担当するのではなく、必要とする人が必要な時に作成・修正等を行います。すると、terraformなどIaCのツールを利用する場合に「今リポジトリにあるコードは実態を正しく反映しているのか」「誰かが矛盾する変更を加えていないか」という問題が発生します。 CIツール上でterraformを実行することで、問題の一部は回避できるかもしれませんが、

取締役の小笠原(@yamitzky)です。 JX通信社では、React 製のフロントエンドでも Clean Architecture で設計するなど、なるべく特定のバックエンドに依存しない設計を心がけたりもするのですが、一方で Firebase をラップした react-firebase-hooks などの「便利な Hooks」を使って開発スピードを加速したい、という課題を持っていました。 そして先日、次の記事が話題になっていました。まさに「どう Firebase を隠蔽するか」と「どう Firebase を活用するか」を両立する悩みです。 blog.ojisan.io 結論を言うと「Hooks そのものを注入する」のが筋が良いのではないか と思っています。個人的に「Hooks Injection パターン」と名付けたこの方法をご紹介したいと思います。 今回の記事の完成形はソースコードを公

JX通信社CDOの小笠原(@yamitzky)です。 AI 緊急情報サービスの「FASTALERT」は、報道機関や公共機関に導入いただいている(お堅めな) BtoB SaaS でありながら、 事業開始当初から React を使った Single Page Application(SPA) として作っています。 2017年には、より信頼性のあるフロントエンドを提供するため、 Facebook の Flow を導入しました。しかし、昨今の TypeScript の盛り上がりや、社内の他プロダクトで TypeScript を使っていることなどを受けて、フロントエンドのアーキテクチャを大幅に見直しました。 今回取り組んだ大きな変更は、 Flow から TypeScript への移行 (型チェックの移行) TypeScript 化に合わせた、 babel-plugin-proposal-*** の廃

JX通信社CDOの小笠原(@yamitzky)です。 JX通信社は「今起きていることを明らかにする報道機関」というミッションの元に、新型コロナリアルタイムダッシュボードを 2月16日 から提供し続けています。今回は、「新型コロナプロジェクト」の発足から現在に至るまでの、プロジェクトの進化についてご紹介します。 プロジェクト発足 そもそものプロジェクトの発足としては、2月14日の下記のツイートが発端でした。およそ 2 日でリリースしたことになります。 日本の感染者増えているので、もうそろそろ中国がやってる地域別まとめページ作っても良いのでは？https://t.co/6gSg3s16Nw pic.twitter.com/TyNeP44NbO— けろっと (@kerotto) 2020年2月14日 当時は、東京都のような自治体公式の特設サイトや、国内全体の動向をまとめたサイトはほぼありませんで

この記事は、Slack Advent Calendar＆JX 通信社 Advent Calendarの最終日です。 メリークリスマス！ 素敵なクリスマスをお過ごしでしょうか。取締役の小笠原(@yamitzky)です。 突然ですが、みなさん、ダークモードは好きですか？　ダークモードは昨今のソフトウェアのトレンドで、Slack のデスクトップ版も今年の 9 月にダークモードに対応しました。 slackhq.com しかし Slack をダークモードに設定すると、透過背景・黒文字なカスタム絵文字が見づらいという問題がありました。Slack が仕事のワークフローの中心にある JX 通信社にとって、これは死活問題です。 そこで、Slack の闇の魔術(ダークモード)に Python で対抗し、これらの絵文字が見えるようにしたいと思います！ 方針 基本方針は簡単です。黒背景に黒文字だと見づらいのが原因

はじめに インターンでお世話になっている、コウゲと申します。現在担当させていただいている仕事は業務で使用している管理画面のマイクロサービス化です。 マイクロサービス間をつなぐ認証機能が必要だったので、認証プラットフォームとして使いやすそうな 「Auth0」で どんなことができるのか、実現したいことは可能なのかを検証してみることになりました。 なぜAuth0なのか ダッシュボードの設定 + 少ないコード で認証機能が簡単に実装できる。 Auth0専用ライブラリやSDKが多数存在し、目的に応じてそれを利用することで 簡単にログイン機能を実装することができる。 実現したいこと 発表 ありがたいことに、調べた結果を社内で発表する場を設けていただきました。 ブログの内容より少し詳しく書いています。読んだら即実装できるようなスライドを心がけて作りました! speakerdeck.c

「JX通信社Advent Calendar 2019」7 日目の記事です。 こんにちは。2019年9月からJX通信社のエンジニアとなった鈴木（泰）です。趣味は映画観賞です。 はじめに JX通信社では AWS の Lambda Layer、Lambda 関数を使った Serverless なアプリケーションの開発に従事しています。 私が初めて Lambda 関数に触れたのは2019年の9月です。 3ヶ月のあいだ業務で扱ってきたこともあり、現在では Lambda 関数をサクサク作れるようになりました。 また、複数の Lambda 関数を連携させて1つのアプリケーションを組んでみたり、共通する処理を Layer として切り出したりと、少しずつ複雑なこともできるようになりました。 最近の問題は、増えてきた Lambda 関数の管理です。 特に、Lambda 関数のデプロイにかかる手間の大きさが問題

この記事はJX通信社 Advent Calendar 2019 2日目の記事です。 昨日は、たっちさんの「Kubernetes Admission Webhookでリソース作成を自在にコントロールする」でした。 こんにちは、サーバーサイドエンジニアの @kimihiro_n です。 今回は長年動かしてた Scala のマイクロサービスのリビルドを行った話をしようと思います。 TL;DR 新しい言語を投入するのにマイクロサービスは便利 Scala で感じていた問題点を解消しつつ Go へ移行できた 消費メモリが大きく減って安定稼働できるようになった 予防線を貼っておきますと、Scala より Go のほうがいいよね、といった本旨ではありません。 Scala で書いたマイクロサービス 弊社のマイクロサービスの一つにカテゴリ分類専用のサービスが存在します。 カテゴリやキーワードを登録しておくとル