山型なスキルをもったメンバーがあつまる山型クロスファンクショナルチームを作りデリバリスピードを安定させるというテーマのスライドです。 XP祭り2021での発表資料です。 山型クロスファンクショナルチームは造語ですが、定義としては「スペシャリティをもちつつ周辺分野でも基本的な価値を発揮できるメンバ…

Your shopping website is not an SPA. I repeat: your shopping website is not an SPA. Stop trying to sculpt David with a JS chainsaw and get yourself an HTML/CSS chisel.— Alex Russell (@slightlylate) 2021年8月10日 この主張、界隈（少なくとも自分の観測範囲）では割とよく見かけるし、なんか定期的に話題になるトピックなのかなーと。 まあ持論としてもコレには概ね同意しており、会社のスタンスとも相まって、常日頃からぼんやり考えてたりすることでもある。 で、そんな折にこのツイートを発見して、さらにそれに言及してる人々を見て、ふと自分でも現状を整理しておきたいなーという気持ちになったので筆を執った次第。

こんにちは。ソウゾウの Software Engineer (CTO) の @suguru です。連載：「メルカリShops」プレオープンまでの開発の裏側の1日目を担当させていただきます。 7月末にメルカリShopsという新しいサービスが公開されました。メルカリShops は、2021年1月にメルカリのグループ会社として設立したソウゾウが新たに立ち上げたサービスです。 この記事では、メルカリShops を作るにあたり、どういった技術、アーキテクチャを選定したのか、その背景と意思決定をまとめて共有したいと思います。 monorepo まず最初にプロジェクトをスタートしたときに、サービスのリポジトリを作るのですが、迷わず monorepo による構成を選択しました。monorepo は、システムを構成する複数のコンポーネントの独立性を保ちつつ、全ての構成を1つのリポジトリで管理する手法です。今

エンジニアとしてHERPに入社して2~3ヶ月ぐらい経ったころジョブチェンジをしてスクラムマスターとしてLeSSを導入してみて半年たったお話。 感じたこと、思ったこと、良かった点、悪かった点などを振り返りつつそんなにまとめずに書き連ねたものである。 サマる 実質この記事はエッセーみたいなものなのでサマれてないが、 ・目的志向で人を巻き込む ・LeSSの思想を目的として利用すると言語化されてて楽でいいぞ ・LeSS導入だけでは良いプロダクトは作れない 背景私の働いてる会社は日本の採用2.0を実現するというミッションを掲げていて、採用領域においてイノベーションを起こすことを狙っている、俗に言うスタートアップと呼ばれる企業である。 LeSS導入前の開発体制については入社してすぐにLeSSを導入したこともあり深く理解はしていないが、大雑把に表現すると プロジェクト制 × ウォーターフォール気味 であ

近年の Node.js は API のサーバとしてはもちろん、Nuxt.js や Next.js といった SSR や BFF などフロントエンドのためのバックエンド言語としての人気が高まっています。 フロントエンドエンジニアがコンテキストスイッチ少なくバックエンドの整備ができることは非常に大きな利点です。 ですが、フロントエンド（ブラウザ側）とバックエンド（サーバ側）ではパフォーマンスチューニングで見るべき点が大きく違います。 しかし Node.js アプリケーションのパフォーマンスイシューの見つけ方などがまとまっている資料は少ないです。 そこで、本記事ではフロントエンドエンジニアが Node.js でパフォーマンスイシューを見つけ、改善するため自分が普段パフォーマンスチューニングを依頼されているときにみている基礎的なポイトをまとめていきます。 1. 計測ステップlink Node.js

TL;DR PDF を画面に埋め込む方法は、iframe, object, embed, Viewer（3rd party library の利用）がある。 ブラウザネイティブの PDF 表示機能はブラウザ差異が大きいため、PDF を canvas や svg に変換して表示するライブラリやビューアーを利用した方が安定する。 しかし 3rd party library / service の利用はバンドルサイズやランタイムでの変換にコストがかかるため、なるべくブラウザネイティブなやり方で PDF を開きつつ、一部ブラウザ向けに対してのみ 3rd party library/service 経由で表示するように分岐させたい。 どのブラウザならブラウザネイティブの機能が使えるかを調べるために、サポート範囲の全端末・全ブラウザで PDF の描画結果を比較・調査した。 はじめに 業務委託エンジニア

フロントエンド開発にtextlintを導入して運用している話 2021.07.13 Tue. SaaSプロダクトのフロントエンド最前線@オンライン 近藤 大介 @diescake SmartHR プロダクトエンジニア ／年末調整チーム／主にWebフロントエンド（React + TypeScr…

プログラマがシステム開発において共通で必要となる、技術と業務の狭間の共通知識を解説します。連載第1回は文字コードの概要編です。 0. はじめに 業務システムを開発する場合、プログラミング言語、フレームワーク、ミドルウェア、業務知識など以外に、共通で必要となる知識があります。文字コード、国際化、日付・時刻の扱い、住所コード、郵便番号、電話番号などの各種コード、…。 本連載では、プログラマがシステム開発で必要となる、技術と業務の狭間の共通知識を解説して行きたいと思います。 連載第1回は文字コードの概要編です。コンピュータシステムにおいて、文字情報は文字コードを用いて処理されます。文字コードとは、各文字に対応付けられた数値 (符号) のことです。近年、新規に開発される業務システムでは Unicode が使われることが多いと思いますが、既存システムとの連携など他の文字コードが使用されることもまだま

GitHub Actions のワークフローを静的にチェックする actionlint というコマンドラインツールを最近つくっていて，概ね欲しい機能が揃って実装も安定してきたので紹介します． github.com なぜワークフローファイルの lint をすべきなのか GitHub Actions が正式リリースされてからだいぶ経ち，GitHub 上での CI は GitHub Actions が第一候補となってきているように感じます．僕も新規にリポジトリを作成して CI をセットアップする場合はほぼ GitHub Actions を使っています． ですが，GitHub Actions には下記のような問題があり，actionlint でそれらを解決・緩和したいというのが理由です． ワークフローを実装する時は，GitHub に push して CI が実行されるのを待って結果を確認するという

概要 最近退職に伴いTypeScriptプロジェクトのCI/CDの見直しを行っているので主にプルリクに対するCIを中心に何をやっているのか(やっていた＆やろうとしているもの含む)紹介します。 それぞれはさらっとした紹介のみです。 ちなみに書いてから気づいたんですが殆どTS以外でもできます。 tsc, prettier, eslint 基本です。恐らく殆どのプロジェクトでやっているかと思います。 tscは--noEmitオプションを付けて実行、eslintは--cacheと--quietオプションを付けて実行しています。 prettierは--list-differentオプションを付けると差分があった場合(=prettierが適用されていないファイルがあった場合)にエラーにしてくれます。 CIでWebpack等でバンドルしてる場合はこの辺を明示的に行わなくてもそこでコケるのでやってないケー

WEBサービス開発みたいな界隈でもう5年マネージャー業をしているので、おそらく人並みにはプロジェクトマネジメントの手法に触れてきている。実際やってきたこともあれば、やってはいないが事例やテクニックとして知っていることも含む。*1 そうやって過ごしてきたが、結局プロジェクトマネジメント手法よりも絶対にどうにかする覚悟、つまり精神論の方が重要だという個人的な結論に至っている。 どんなに精緻に工数とリスクを見積もって振り返りを繰り返しても、「まあ遅れてもいいや」という空気ではプロジェクトは遅延し続ける。逆に見積もりが雑でも「どうにかする覚悟」さえあればなんとか目標とした期日に間に合う。 もちろん覚悟と精神論でやっていると残業が常態化して炎上と言って差し支えない状態になるのだが、覚悟がなくて遅延したプロジェクトも最終的に炎上としか言いようのない状態になるので、同じ炎上なら期日に間に合っている方がマ

こんにちは、id:daiksy です。 今回はぼくがChatworkで取り組んでいるスケーリングスクラムについて書いてみようと思います。 先日開催された Chatwork DevDayでもお話したのですが、現在我々はChatworkのリアーキテクティングプロジェクトにおいて、Scrum@Scaleの導入を進めています。 www.youtube.com Scrum@Scaleとは？ Scrum@Scaleは、スクラムの作成者の1人でもあるジェフ・サザーランド氏によって考案されたスクラムをスケーリングするための考えかたです。 詳細は公式のガイドが各国語版の翻訳も含めて公開されているので、そちらをご参照ください。本稿では簡単な概要だけにとどめます。 www.scrumatscale.com 以下の図 *1 に示すように、Scrum@Scaleは単一のスクラムチームをそのままスケールすることにより

最近仕事でやっているプロジェクトの TypeScript のバージョンが 3.9。 そこそこ古くなっているのと、 TS は比較的気軽に上げて良くてバージョンアップの恩恵も高いパッケージなので、MTGが早く終わったスキマ時間で最新に上げてみることにした。 結果として tsc の設定を変えつつ $ diff -r ./before/ ./after/ を活用するとかなり楽に移行できたので、やりかたを残しておく。 手順 やり方を考える 一応社内に Renovate Bot が立っていて、かつそこから出ている Pull Request も存在したものの、流石にビルド成果物を比較しないままエイヤで上げるのは躊躇われる。 TypeScript のバージョンを上げて何かが壊れたことは経験としては一度もないが、一方でその経験則は根拠足り得ないので、一応アプリケーションへの影響を調査して、違いがないことを確

クイックサマリー ‐ 私たちは一連の短い記事で開発者とデザイナーにとって有用なツールやテクニックを紹介しており、直近の記事ではCSS監査ツールとCSSジェネレータを取り上げました。この記事ではタブやテーブルからトグルやツールチップまで、信頼性の高いアクセシブルなコンポーネントを見ていきます。 目次 以下にすべてのアクセシブルなコンポーネントをアルファベット順に記載しました。目次をスキップするか、スクロールして1つずつお読みください。 :focus styles autocomplete buttons carousels "close" buttons content sliders checkboxes color systems color palettes comics component libraries cookie consent prompts dark mode data

このツールは、全体的な傾向を把握するためのもので、意図的に不正確な指標になっている。そのため個人の仕事のパフォーマンスを評価するために使ってはいけない。

# 前回：当たり前にリリースしていくために必要なこと / Release safely https://speakerdeck.com/soudai/release-safely # UNIXという考え方 https://amzn.to/33QPAdv # 第1回 江崎玲於奈氏 (ノーベ…

You signed in with another tab or window. Reload to refresh your session. You signed out in another tab or window. Reload to refresh your session. You switched accounts on another tab or window. Reload to refresh your session. Dismiss alert

Eberhard Wolffさんのこのプレゼンの要約です https://www.youtube.com/watch?v=B3O-qYM-Kkw 共通のデータモデル 共通のデータモデルを通信に使う 各サービスで必要となるデータの内部モデルは異なるかもしれない データモデルが、共通ライブラリと同じ意味合いになる すべてのサービスが、最新のライブラリを使わなくてはならない 共通データモデルの変更は、す