エディタ内でテスト結果が表示される開発体験を、エディタに依存せず実現するツールを作った

2024/10/16 15 users エディタ エディタ内 ツール テスト結果 動機

エディタ上でテストのエラーを表示することができるLSPサーバとその周辺ツールを作りました。 動機 以前、この記事を見かけました。 Wallaby.jsを使ってフロントエンド開発のテストを効率化しよう - Findy Tech Blog https://tech.findy.co.jp/entry/2024/04/15/100523 エディタ上でリアルタイムにテスト結果が反映され... 続きを読む

GoでKubernetesクラスター上にモックリソースをサクッと構築するOSSを開発しました - ZOZO TECH BLOG

2024/09/24 21 users OSS ZOZO ZOZO TECH BLOG ハッチー 事例

はじめに こんにちは。株式会社ZOZOのSRE部プラットフォームSREチームに所属しているはっちーと申します。 本記事では、Kubernetesクラスター上にモックリソースをサクッと構築する「モック構築ツール」を紹介します。ZOZOの事例をもとにした説明となりますが、Kubernetesクラスター上での負荷試験やフロントエンド開発... 続きを読む

Chrome DevToolsを使いこなしてフロントエンド開発を加速させる

2024/09/02 77 users Chrome DevTools Chrome 筆者 ブラウザ

Chrome DevTools（以下、開発者ツール）は開発者にとって欠かせないツールですが、改めて使い方を調べたことは少ないのではないでしょうか？ この記事では開発者ツールの便利な機能をまとめて紹介します！筆者はChromeをメインで使用しているのでChrome DevTools前提ですが、一部拡張機能や他のブラウザの便利な機能を含... 続きを読む

現代のVueとTypeScript - 型安全の活用術

2024/08/24 10 users プロポーザル 現代 活用術 見方 セッション

フロントエンドカンファレンス2024 発表資料 ▼ プロポーザル 現代のVueとTypeScript - 型安全の活用術 近年、VueとTypeScriptの組み合わせがフロントエンド開発において注目されていますが、かつてはこの組み合わせに対して懐疑的な見方も存在しました。このセッションで… 続きを読む

フロントエンド開発に役立つ Datadog 活用法 - LegalOn Technologies Engineering Blog

2024/08/05 58 users Datadog アプリケーション 監視 ロク 監視サービス

はじめに 本記事では、Datadog の設定方法を解説しながら、どのようにフロントエンド開発に活用できるかを話していきます。Datadog とは SaaS 型で提供されている監視サービスです。システムやアプリケーションの監視ができ、収集したログを分析するのに役立つ機能をたくさん提供しています。 こんにちは、株式会社Legal... 続きを読む

「第4のブラウザ言語」WebAssemblyが変えるフロントエンド開発 - レバテックラボ（レバテックLAB）

2024/07/23 23 users WebAssembly レバテックラボ レバテックLAB

執筆 山内 直 有限会社 WINGSプロジェクトが運営する、テクニカル執筆コミュニティ（代表 山田祥寛）に所属するテクニカルライター。出版社を経てフリーランスとして独立。ライター、エディター、デベロッパー、講師業に従事。屋号は「たまデジ。」。著書に『Bootstrap 5 フロントエンド開発の教科書』、『作って学べるH... 続きを読む

【JS体操】第2問「画像の横長具合を比較しよう」〜正攻法＆ハック部門の解説〜 - KAYAC engineers' blog

2024/06/17 10 users 受託案件 アプローチ KAYAC engineers 方々

こんにちは！ カヤック面白プロデュース事業部のおばらです。 普段は受託案件のデザイン・フロントエンド開発などを担当しています。 さて、『JS体操』第2問 いかがでしたでしょうか？ 今回初めての方々 第1問に引き続きの方々 複数のアプローチで何通りも回答してくださった方々 普段業務で JavaScript をバリバリ書い... 続きを読む

フロントエンド開発の効率化！Nx と Playwright でビジュアルリグレッションテストを賢く実施しよう - Techtouch Developers Blog

2024/05/27 20 users ビジュアルリグレッションテスト playwright ロク

はじめに なぜ VRT が必要なのか？ VRTとは？ Nx と Playwright で賢く VRT を実施する どう賢く実施したか 結果 まとめ 参考資料 はじめに 「食べログ ラーメン TOKYO 百名店」の全店舗訪問を目指してラーメン巡りを続けているフロントエンドエンジニアの kenshin です。 フロントエンド開発者の皆さん、新機能を追加し... 続きを読む

Wallaby.jsを使ってフロントエンド開発のテストを効率化しよう - Findy Tech Blog

2024/04/15 28 users テスト Findy Tech Blog 効率化

Findy Team+でフロントエンドエンジニアをしている 川村(@peijun333)です。 Findy では、フロントエンドのコード品質と安定性を確保するために Jest などのテストフレームワークを積極的に活用しています。通常、Jest は CLI から実行してテスト結果をコンソールで確認しますが、コマンドを用意する手間や、テスト経過の... 続きを読む

これからRustを勉強したいエンジニアにおすすめしたい参考書や教材を紹介します

2024/04/07 209 users rust PharmaX スクラムマスター 教材 エンジニア

こんにちは、加藤(@tomo_k09)です。 PharmaXではバックエンド・フロントエンド開発やスクラムマスターなどをやっています。 PharmaXが提供しているサービスでは、バックエンド開発に主にRuby on Railsが使われていますが、一部の機能はRustで開発されています。 このような理由からRustの経験が浅かった私もコツコツとRu... 続きを読む

フロントエンドのLinterやCIを改善した話

2023/12/21 13 users Linter リニューアルプロジェクト フロントエンド エム

この記事は 株式会社エス・エム・エス Advent Calendar 2023 の21日目の記事です。 介護事業者向けの経営支援サービス「カイポケ」のリニューアルプロジェクトでフロントエンド開発をしている @hush_in です。 今年の4月にエス・エム・エスに入社しました。 入社してからフロントエンドのLinterやCIを改善した話をします... 続きを読む

freee、デザインシステム「vibes」を公開　アクセシビリティをはじめとするフロントエンド開発のノウハウが満載 | プレスリリース | freee株式会社

2023/12/19 119 users freee アクセシビリティ プレスリリース ノウハウ 組織

freee、デザインシステム「vibes」を公開　アクセシビリティをはじめとするフロントエンド開発のノウハウが満載 ■マジ価値サマリー（このお知らせでお伝えしたいこと） ・freeeのアクセシビリティをはじめとするフロントエンド開発のノウハウが詰まったデザインシステム「vibes」を公開します ・あらゆる組織でシステム... 続きを読む

フロントエンド開発のためのテスト入門書評

2023/10/25 10 users テスト入門 メモ 後半 もと 感想

はじめに 2023/04/24に発売された「フロントエンド開発のためのテスト入門」を読了したので、読みながらとったメモをもとに感想や自分の考えと違ったところなどをまとめる。 全体的に非常に参考になる内容が多いが、特に後半にいくにつれて加速度的に参考になる内容が増え非常に良著であると感じた。 実践Node.js入門で... 続きを読む

Biome と ESLint の lint ルールの互換性

2023/10/10 8 users lint eslint Biome 既存 ルール

Biome では、現在約 150 個程度の JavaScript・TypeScript に関する lint ルールを実装しています。 これらのルール多くは既存の ESLint 関連で実装されているルールと同じものになっているのですが、ルールの名前が異なることもあり、その対応関係がわかりにくくなっています。 そこでこの記事では、フロントエンド開発... 続きを読む

スタートアップを「支える側」になる、という選択

2023/09/25 94 users スタートアップ 選択 Gaji-Labo 関根 受託

こんにちは。株式会社Gaji-Labo で DevHR をしている関根です。エンジニア採用や組織作りを担当しています。 Gaji-Labo は、フロントエンド開発と UI デザインの会社なのですが、急成長するスタートアップにチームメンバーの一員となって参画する支援をしています。 一般的な「受託」で働くのではなく、スタートアップで... 続きを読む

一休.com サイトパフォーマンス改善 - 2023年 夏の振り返り - 一休.com Developers Blog

2023/09/15 20 users 一休.com Developers Blog 兼務 本稿

ヤフー株式会社より出向しております、卯田と申します。 主務で、一休.comおよびYahoo!トラベルのフロントエンド開発を担当しています。 兼務で、ヤフー株式会社の全社横断組織でWebパフォーマンス改善の推進を行っております。 本稿では、直近半年弱(2023年2月〜8月)で、断続的に行っていた一休.comのパフォーマンス改... 続きを読む

長くなりがちだったコードレビューを改善した話 - 弁護士ドットコム株式会社 Creators’ blog

2023/09/08 152 users Creators’ blog 拡充 タスク 施策 エンジニア

弁護士ドットコム クラウドサイン事業本部でエンジニアをしている山田です。 主にフロントエンドを担当しています。 普段の業務でフロントエンド開発のコードレビューをすることが多く、今回は長い時間がかかりがちだったコードレビューを以下の施策で改善した話をします。 タスクへの認識合わせを拡充 タスクを小さく分... 続きを読む

GraphQL Gatewayはフロントエンド開発を幸せにする

2023/08/11 52 users アーキテクチャ フロントエンド マイクロサービス 弊社 周辺

はじめに マイクロサービスの開発では、サービスが増え続けるバックエンドに対して、フロントエンドは接続先が増えるため、開発効率を下げてしまいます。その対策として、さまざまな設計パターンが存在します。 弊社の開発ではGraphQL Gatewayを用いていますが、そこに至るまでや周辺の技術/アーキテクチャを解説します... 続きを読む

Denoのフロントエンド開発の動向【2023年夏】

2023/07/02 10 users deno import Deno本体 動向 半年程

半年程前に、以下のような記事を書きました。 この記事では、上記の記事から半年程の間で起きたDenoでのフロントエンド開発に関して影響がありそうな内容などをまとめていきます。 Deno本体のアップデート node:URLのサポート Deno v1.30でNode.js組み込みパッケージのimportがサポートされています。 import { EventEmi... 続きを読む

「フロントエンド開発のためのテスト入門」の感想

2023/05/02 7 users テスト入門 感想 Jest テスト 時期

同じ時期に Jest 本（Jest ではじめるテスト入門）を書いていたので、他の方はどのようにテストについて書くのか気になったので読んでみました。 Jest 本との比較 Jest 本と比較し、「フロントエンド開発のためのテスト入門（歯車本と呼ぶそうです）」は Jest の説明など重複している部分はありましたが、特徴が全く違う... 続きを読む

ANDPAD のデザインシステム「Tsukuri」の Web 向け実装について - 現状と今後 - ANDPAD Tech Blog

2023/04/27 10 users ANDPAD Tsukuri 寺島 アンドパッド 構築

1. はじめに Web フロントエンド開発を中心に行っている寺島です。 この記事はアンドパッドで開発しているデザインシステム 『Tsukuri』 の Web 向け実装である『Tsukuri for Web』の構築について紹介する最後の記事です。 tech.andpad.co.jp tech.andpad.co.jp tech.andpad.co.jp この記事では Tsukuri for Web の現状... 続きを読む

フロントエンド開発のためのテスト入門 - サンプルの紹介 -

2023/04/06 113 users テスト入門 サンプル 筆者 執筆 フロントエンドテスト

昨年から執筆を続けていた書籍が 4/24 に刊行します。「フロントエンド開発のためのテスト入門」という本です。 書籍ならではのテストコード解説を目指して 次の投票結果は、書籍企画時に持ち込んだ筆者のツイートです。フロントエンドテストに関していえば、8 割近くの方が何かしら不安や不足を感じている、という結果... 続きを読む

LINE NEWS フロントエンドの自動テストの改善

2023/02/24 16 users フロントエンド 自動テスト 改善 LINE NEWS UIT

この記事は UIT 新春 Tech blog 2023 4日目の記事です。 こんにちは。LINEフロントエンド開発センターの幾野(ikuno)です。普段は LINE NEWS のフロントエンド開発をしています。 LINE NEWS では昨年テストをたくさん書いた 昨年 LINE NEWS ではたくさんテストを書きました。当初 78 ファイルだったテストファイルは半年... 続きを読む

フロントエンド開発のためのセキュリティ入門

2023/02/10 352 users セキュリティ入門 XSS devsumi Cors ライブラリ

Developers Summit 2023 10-A-4 「フロントエンド開発のためのセキュリティ入門」の発表資料です。 https://event.shoeisha.jp/devsumi/20230209/session/4176/ 「HTTPS化」「CORS」「XSS」「脆弱なライブラリのチェック」について説明しています。 続きを読む

フロントエンド開発の準備

2023/01/16 21 users 準備

開発の前に決めておくこと 後から変更するのが難しいこと、大きな手戻りが発生する可能性のあることをできる限る開発のはじめに決めておきます。 多言語対応の有無 URLに依存する可能性が高い多言語対応は、後から対応すると制限がかかったり破壊的な変更が必要になる場合があるので、はじめに決めておきます。 多言語対... 続きを読む