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に依存する可能性が高い多言語対応は、後から対応すると制限がかかったり破壊的な変更が必要になる場合があるので、はじめに決めておきます。 多言語対... 続きを読む

フロントエンド開発のためのセキュリティ入門 知らなかったでは済まされない脆弱性対策の必須知識 | 翔泳社

2022/12/23 186 users 翔泳社 セキュリティ入門 脆弱性対策 必須知識

Webアプリケーションの堅牢化に欠かせない知識を凝縮！ セキュリティ学習のスタートに最適の一冊！本書は、安全なWebアプリケーションを開発するための基本知識を、フロントエンドエンジニア向けに解説したセキュリティの入門書です。 これまでWebアプリケーションの開発で、セキュリティは「バックエンドの仕事」という... 続きを読む

書いた JavaScript をそのまま動かすフロントエンド開発の未来のために必要なもの

2022/12/06 79 users 未来 JavaScript エンジニア ブラウザ web

大きめのテーマです。もしかしたら「うちでは書いた JS をそのまま配信してるぜ〜」って人もいるかもしれないでが。 最近の Web フロントエンド開発では、書いた JavaScript をそのまま動かさないことが多い 最近のフロントエンド開発ではエンジニアが書いた JavaScript をそのままブラウザで動かすことはほとんどないか... 続きを読む

今すぐにNext.jsでフロントエンド開発 or Web制作を快適に始めたい方におすすめの簡単セットアップを紹介する🔥

2022/12/03 109 users Next.js フレームワーク セットアップ フロントエンド

この記事はLCL Advent Calendar 2022 - 2日目です。 はじめに 株式会社LCLでフロントエンドエンジニアとして働いている「おとの」と申します。 今回は、今をときめくフロントエンドのフレームワーク「Next.js」を使って、個人もしくは複数人のチームで快適にフロントエンド開発を行いたい方にオススメのセットアップを紹... 続きを読む

採用時に見ているのは技術と、経歴よりもコミュニケーション能力　LINE・メルペイ・一休の入社前後の評価のポイント

2022/11/16 29 users 経歴 メルペイ コミュニケーション能力 役員 エンジニア

LINE、メルペイ、一休が合同で開催したオンライン採用説明会では、各社の技術領域の役員が登壇し、フロントエンド開発の組織や体制、現在そして今後注力していることや解決したい技術・組織課題、求める人物像（マインド・スキル要件）などをそれぞれ紹介しました。まずはそれぞれの事業の課題から、エンジニアの育成・... 続きを読む

横断的組織だからこそ、全社に対して影響を与えられる　長所を最大限に活かしてユーザー体験を高める、フロントエンド組織の取り組み

2022/11/15 5 users メルペイ 全社 役員 各社 長所

LINE、メルペイ、一休が合同で開催したオンライン採用説明会では、各社の技術領域の役員が登壇し、フロントエンド開発の組織や体制、現在そして今後注力していることや解決したい技術・組織課題、求める人物像（マインド・スキル要件）などをそれぞれ紹介しました。LINE株式会社からは、フロントエンド開発センター・セ... 続きを読む

Denoのフロントエンド開発の動向【2022年秋】

2022/11/04 15 users npmパッケージ Deno本体 deno 半年 半年程前

半年程前に以下のような記事を書きました。 この半年の間に、Deno本体でnpmパッケージサポートが入るなどいくつか大きな動きがあったため、この記事ではそれらの動向について紹介いたします。 Deno本体でnpmパッケージの読み込みがサポート Deno v1.25でDeno本体にnpmパッケージのサポートが入りました。 以下のように、... 続きを読む

Next.jsにおけるSVGファイルの表示方法を考える

2022/10/16 9 users SVGファイル Next.js Zenn src SVG

はじめに フロントエンド開発を進める際に、Next.jsでのSVGでの扱い方について考える機会があったので、Zennで共有しようと思った次第です。 本来、Webサイト内でSVGファイルを表示させる方法は、大きく分けて以下3点だと思われます。 imgタグのsrcにSVGファイルへのパスを設定して読み込ませる。 CSSファイル内のbackgr... 続きを読む

OpenAPI からなるべく生成するフロントエンド開発

2022/10/10 59 users OpenApi seya スキーマ スクリプト 一挙大

こんにちは。 スキーマから何かを生成するのが大好きな seya と申します。 今の会社では REST API のスキーマを OpenAPI で記述しているのですが、それを活用して何かしらを生成するスクリプトをよく書いています。 そんなネタがそれなりに溜まってきたので一挙大放出しようというのがこの記事です。 具体的には次のよう... 続きを読む