スタートアップなのにフロントエンドのテストカバレッジが90%を超えている話 | Resilire Tech Blog
はじめに サプライチェーンリスク管理クラウドサービスResilireでエンジニアをしている奥村@showkittie です。 Resilireでは、1歳の子の育児に悪戦苦闘しながら、フロントエンド、サーバサイドを問わずプロダクトエンジニアをやっています。 ResilireはシリーズAを迎えたばかりのアーリースタートアップでありながら、フロントエンドのテストカバレッジが90%を超えており、必要なケースについてはほぼテストが網羅されています。 私は今年の4月に入社したばかりですが、すでにテストカバレッジの高さに助けられ、不具合の混入をせずに済んだことが何度もあります。 今日は、Resilireのフロントエンドのテスト戦略とカバレッジの高さの理由についてお伝えしたいと思います。 スタートアップとテスト 冒頭にもお伝えした通りResilireはアーリースタートアップです。エンジニアリングに求められ
TypeScript 5.5で導入されたisolatedDeclarationsは、JavaScriptエコシステムを大きく変えるゲームチェンジャーかもしれない
7月7日、Denoの開発者マーヴィン・H氏が「JavaScriptエコシステムを加速する（Speeding up the JavaScript ecosystem）」と題した記事を公開した。この記事では、TypeScriptの新機能「isolatedDeclaration」が、JavaScript / TypeScriptエコシステムを変革する可能性について詳細に紹介されている。本記事ではその内容を簡単に紹介する。 本記事は、以下のエキスパートの皆様に監修していただきました: 古川陽介さん（Japan Node.js Association代表理事） うひょさん（株式会社カオナビ フロントエンドエンジニア） npmパッケージングの問題点 現在npmでのパッケージングプロセスは相当に複雑である。モジュールをnpmに公開しようとする開発者は、CommonJS対ESMの問題や、多くの設定調整を行
Node.jsでTypeScriptのコードを実行できるようになるかも - hiroppy's site
module: add --experimental-strip-types by marco-ippolito · Pull Request #53725 · nodejs/node It is possible to execute TypeScript files by setting the experimental flag --experimental-strip-typ... 💁♀️ まだマージされてない点に注意してください --experimental-strip-typesというフラグを実行時に付けることにより、Node.jsでTypeScriptのコードを実行できるようになるPRが出てきました。 背景 TC39でも型注釈の話題(議事録を読むとブラウザとの兼ね合いもあり道のりは長そう)が存在するほどJSのコードにおいて、型は当たり前となっています。 Node.jsと同
Webサービス公開前のチェックリスト
個人的に「Webサービスの公開前チェックリスト」を作っていたのですが、けっこう育ってきたので公開します。このリストは、過去に自分がミスしたときや、情報収集する中で「明日は我が身…」と思ったときなどに個人的にメモしてきたものをまとめた内容になります。 セキュリティ 認証に関わるCookieの属性 HttpOnly属性が設定されていること XSSの緩和策 SameSite属性がLaxもしくはStrictになっていること 主にCSRF対策のため。Laxの場合、GETリクエストで更新処理を行っているエンドポイントがないか合わせて確認 Secure属性が設定されていること HTTPS通信でのみCookieが送られるように Domain属性が適切に設定されていること サブドメインにもCookieが送られる設定の場合、他のサブドメインのサイトに脆弱性があるとそこからインシデントに繋がるリスクを理解してお
コードを書き始める前からテストをずっと考える ─ 継続的テストモデルとシフトレフトなテスト活動をアジャイルにどう取り入れるか - Agile Journey
読者の皆さんは、テストについてどのようなイメージをお持ちでしょうか。「開発の後に行う確認作業」といったイメージを持たれている方もいるかと思います。 しかし、開発しようとしているソフトウェアに不具合の混入を防ぐには、もっと早い段階でテストについて考えることが必要です。こういったテスト活動は、プログラムを1文字も書いていないときから始めることができるのです。 本記事では、2016年に提唱された継続的テストモデルを紹介しつつ、アジャイルとも親和性のあるシフトレフトなテスト活動について解説していきます。 DevOpsにおけるテストの考え方 DevOpsのループ図とは何か？ 継続的テストモデルとは何か 継続的テストモデルにおいてテストは「活動」である シフトレフトなテスト活動とシフトライトなテスト活動 シフトレフトなテスト活動としてのテスト駆動開発 コード実装を始める前から行うテスト活動 シフトレフ
<T, K extends keyof T> をちゃんと理解する
TL;DR TypeScriptでライブラリなどを覗いているとよく見かける<T, K extends keyof T>について、問題を分解してきちんと理解する試みです。 extends この場合のextendsの役割は継承ではなく、制約です。 例えば以下のようなイメージ。 type StringOrNumber<T extends string | number> = T type A = StringOrNumber<string> type B = StringOrNumber<number> // Type 'boolean' does not satisfy the constraint 'string | number' type C = StringOrNumber<boolean> type User = { id: number; name: string; }; cons
TypeScriptの型と値とバリデーション
TypeScript は本質的に自分に型が付与されていると思っているだけの JavaScript です。 いくら型を付与しようが、それが実行時に影響を与えることはありません。 コードレビューをしているとここを誤解している人が本当に多いです。何度も解説しているのですが、なかなか浸透しないので、TypeScript におけるバリデーションという視点で記事を書くことにしました。 あと TS でバリデータ使って色々作ろうとしている友人と、プログラミング始めたてで zod と openapi を使っいる友人がいたので、彼らが想定読者です。 型と値の名前空間 TypeScript 上での名前空間(スコープ)は2つに分類できます。 値: 実行時にランタイム上のメモリに存在するもの 型: 静的解析時にのみ参照可能なもの。コンパイル時に完全に消滅する。 TypeScript は基本的に JavaScript
Web制作者はダウンロードしておきたい！ CSS関連の最新版チートシートのまとめ
CSS GridやFlexboxで配置するプロパティ値は？ 先頭の3つだけを指定するセレクタは？ という「あれは何だっけ？」に役立つのが、チートシートです。 CSS GridやFlexboxの各プロパティ・値でどのように配置されるのか、セレクタやnth-child()やdisplayやposition、VS CodeやGitのコマンドがまとめられたチートシートを紹介します。 チートシートは高解像度版が用意されており、ダウンロードしておくと便利です。 CheatSheets -GitHub チートシートはすべて、「ご自由にダウンロードしてご利用してください」とのことです。チートシートは高解像度版を無料でダウンロードでき、モニターの壁紙や印刷して机の脇に貼っておいても便利です。 では、どんなチートシートがあるのか紹介します。 まずは、CSS Flexboxのチートシート。Flexboxの各プロ
ブラウザ JavaScript / Node.js の仕組みを知ろう！ ～トラブルに迅速に立ち向かえる様に - Link and Motivation Developers' Blog
こんにちは。リンクアンドモチベーション SRE グループの川津と申します！ 弊社ではフロントエンドは勿論、開発環境の様々な所で JavaScript (Node.js) を利用しています。 JavaScript は歴史的経緯上 様々なランタイム＆実行環境が存在し、仕組みが理解しづらいので書いてみました！ はじめに 近年 JavaScript の需要は増し、Web Application のほとんどは JavaScript を使って動いているのではないかと思います。 もともと JavaScript は DOM API (Document Object Model、HTML を JavaScript でから操作できる) の為にありました。DOM API を更に使いやすくした jQuery 等が流行りましたね。 しかし JavaScript の活用範囲は拡大し、現在では以下の様々な用途で利用され
Vue Fes Japan 2023の感想/Cloudflare WorkersとRemixが快適すぎた/Web Infraに注目してる【ep.26 #論より動くもの .fm】 - STORES Product Blog
CTO 藤村がホストするPodcast、論より動くもの.fmの第26回を公開しました。今回はフロントエンドエンジニアのうしろのことVue Fes Japan 2023の感想やCloudflare WorkersとRemix、最近注目している技術について話しました。 論より動くもの.fmはSpotifyとApple Podcastで配信しています。フォローしていただくと、新エピソード公開時には自動で配信されますので、ぜひフォローしてください。 podcasters.spotify.com テキストで読みたい方は下記からご覧ください。 Vue Fes Japan 2023 面白かったね 藤村：こんにちは、論より動くもの.fmです。論より動くもの.fmは、STORES のCTOである私、藤村が技術や技術じゃないことについてざっくばらんに話すPodcastです。今日はSTORES で活躍しているフ
【catnose】Zennを生んだ個人開発者に聞く、プロダクト開発の美学
個人開発者 catnose ソフトウェア開発者・デザイナー。 個人開発者として、Webデザイナー向けメディア「サルワカ」、ポートフォリオ作成サービス「RESUME」、技術情報共有サービス「Zenn」、簡単にAIサービスがつくれる「だれでもAIメーカー」など、数々のプロダクトを世に送り出す。家族は妻、娘、犬、猫。 個人開発者として、ポートフォリオ作成サービス「RESUME（レジュメ）」や技術情報共有サービス「Zenn（ゼン）」、入力欄や選択ボックスを組み合わせるだけで簡単にAIサービスがつくれる「だれでもAIメーカー」など、数々のプロダクトをヒットさせてきたcatnose（キャットノーズ）さん。現在も複数の開発案件に関わりながら、新たなプロダクトを開発中だといいます。 今回はそんなcatnoseさんのこれまでの作品を振り返りながら、個人開発者として培った開発哲学や、30代になるとともに起きた
【CSS】CSSの値と単位が新しくなっていますが、ついていけてますか？ - Qiita
はじめに 最近のCSSのアップデートは目覚ましいものがありますが、 みなさんは、CSSの値と単位がここ1年くらいで大きく変わっていることはご存知ですか？ Dynamic viewport が追加されたり、math 関数が追加されたりなどの大きな変更は、ご存知かもしれないですが、calc()で ネイピア数 e や 円周率 πなどが使えるようになったり、 フォントに相対的な長さ単位が追加されていたりと細かい変更も多くあります。 そのため、この記事では、CSS Values and Units Module Level 3 から CSS Values and Units Module Level 4の変更点を中心に紹介しようと思います。 Viewport単位 CSS Values and Units Module Level 3 から CSS Values and Units Module Le
最近のWeb制作に役立つ、CSSの便利ツール総まとめ
最近のWeb制作に役立つ、CSSの便利ツールをまとめました。 CSS Grid, Flexboxで実装するときに役立つレイアウトのツール、CSSやSVGでさまざまな背景・区切り線を生成するツール、美しいシャドウやグラデーションを生成するツール、色選びや配色に役立つツール、コピペで利用できるボタン、可変のフォントサイズ、CSSアニメーション、コードの管理・品質・デバッグに役立つツールなど、もりだくさんです。 CSS Layout Generator Webサイトでよく使用される「ヘッダ・メイン・フッタ」「ヘッダ・サイドバー・メイン・フッタ」「カード型」「サイドバー」などのレイアウトを確認しながら、CSSのコードを生成できる無料オンラインツール。以前紹介したときは、CSS Gridのみでしたが、Flexboxにも対応しました。
Web開発版「手が遅い」ことへの処方箋（手付け、手戻り編）
これを読んで欲しい人のターゲット像や前提について Web版開発の話をしています ITのソフトウェアエンジニアの話をしています ある程度チームのやり方に対して影響を与えられる権限がある人 マネージャーかメンバーかはあまり気にしないです 「発言するのは自由だが聞き流されるだけ」ならこの記事を読む意味はないです ある程度裁量権があり、ビジネスサイドとも話ができるチームのメンバーを想定しています 作業の流れの前提について チケットがあって 作業者がそれを取って（自分で取るのか他人にアサインされるのかは問わない） PullRequestの形でレビュー依頼をかけてレビュワーがレビューする OKならmergeしてそのうち本番デプロイ 間にQAが入るかもしれないけどそこは問わない 手が遅いとは何か？ ある作業者のサイクルタイムが他の作業者に比べて長いこと 100の大きさの作業があるチケットを渡した際に、ほ
2022年のモダンCSS改
7/27（水）開催の「TechFeed Experts Night#1 〜 Web標準 / CSS / Webアクセシビリティを語ろう」で発表した内容です https://techfeed.io/events/techfeed-experts-night-20220727 スライド内のリンクがクリックできるPDF版はこちら https://drive.google.com/file/d/1fc98v082exdGcCuxS73wEN_Qe2COvdTW/view?usp=sharing 各デモURL ■ 上下左右中央揃え https://codepen.io/tonkotsuboy/pen/qBbpYzj ■ スムーススクロール https://codepen.io/tonkotsuboy/pen/NWyNMOo ■ すりガラス https://codepen.io/tonkotsuboy
【2024年最新】Web制作周りを無料で学べる学習サービス集 - Qiita
はじめに 今回は無料でWeb制作周りの技術を学ぶことができるサービスをまとめました。 これからWeb制作の学習を始めていきたい人やプログラミングの基礎学習をしていきたい人におすすめのサービスなのでぜひ参考にしてみてください。 この記事の対象者 プログラミング初心者~中級者 Web制作を学びたい人 HTMLやCSSをより深めたい人 ポートフォリオを作りたい人 無料コーディング練習所 まずはじめに紹介するのはWebサイトを制作しながらコーディングスキルを身につけることができる無料コーディング練習所です。 こちらのサイトではデザインカンプが用意されており、基本的なコーディング方法から応用的な手法まで実際にWebサイトを制作しながら学ぶことができます。 準備編でがエディタの設定方法や拡張ツールといったコードを書くための基礎の基礎から丁寧に解説をしてくれています。 入門編~上級編ではWebサイトを作
とりあえずWebサービス作る時の私の技術選定ポイント@2022/02
はじめに inspired mogaさんのブラウザで動くサービスを作るときの技術選定が素晴らしい記事だったので、自分も書いてみる事にしました。 幸いにも技術選定からのお仕事をする機会が多くて、自分の中でパターンが大体決まってきているので言語化してみます。前提が同じサービスは無いので絶対的な正解は無いですが、なんかしらの参考になれば幸いです。 ※2022/02時点 私/よくあるお仕事について Web系のサービスなんかいい感じにするマンとして、フリーランスとして働いています。 準委任という形でスタートアップ企業をお手伝いする事が多いです。 MVPを作りたい、もしくはMVPは行けたのでちゃんと作り直したい、という要望があって参画して、まるっと作ってそのまま運用をします。作って終わりではなくて、運用や拡張性を考えてやってます（サービスに必要なのはもちろん、運用する自分が楽だから）。 前提 エンジニ
【検証】hey社CEO佐藤裕介氏の"経歴詐称疑惑"「元Google天才エンジニア？」 /STORES/佐俣奈緒子/佐俣アンリ/光本勇介/｜DJ AsadaAkira
ECプラットフォーム「STORES.jp」を運営するhey株式会社、現在のCEOは「Googleの天才エンジニア」とも賞賛される佐藤裕介氏である。今回の記事では佐藤裕介氏に向けられた「経歴詐称疑惑」を検証する。 ※10月10日 追記 ついに本人が経歴詐称について認めた続報 （←佐藤裕介氏・光本勇介氏→ https://www.wwdjapan.com/articles/978296） 関連人物と企業の説明はじめに、関連する人物と企業の説明をする。 hey株式会社 → 佐俣奈緒子氏・光本勇介氏・佐藤裕介氏が立ち上げた会社。「STORES.jp」（https://stores.jp/）を運営している。謎のカルチャーとして「お商売」という言葉をよく使っている。 佐藤裕介氏 → hey社の共同創業者であり現在の代表取締役社長。光本勇介氏と共にheyを創業。”詳細は後述” 光本勇介氏 → テキーラチ
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
Storybookを書くだけでリグレッションテストが 実行される世界へようこそ
デベロッパーツールがさらに便利に！Flexboxの実装と検証が簡単になるFlexboxエディタとオーバーレイが搭載
