サイト構築からデプロイまで。AIが変えるフロントエンド開発 | レバテックラボ（レバテックLAB）

2025/02/13 119 users レバテックラボ デプロイ レバテックLAB サイト構築

ほとんどのサービスとアプリケーションには、制限の大きなお試し版とも言える無料プランと、制限の緩和された有償プランがあります。さらに、有償プランのトライアルや、グループ開発向けのEnterpriseプランが用意されていることがあります。個々のサービスおよびアプリケーションについての料金体系の掲示は省くので、... 続きを読む

Bun がフロントエンド開発でかなり便利になりそう

2025/02/07 63 users Bun コマンド 現時点 皆さんご存知 以下

皆さんご存知の JavaScript ランタイム兼開発ツールの Bun が、v1.2.3 でフロントエンド開発のための便利な機能が使えるようになったので取り急ぎ。 現時点(2025/02/06)では Canary build なので試す方は以下のコマンドを実行してください。 続きを読む

【レンダリング大全】CSR, SSR, SPA, MPA, PPRの意味、そもそもレンダリングとは【2025年始】

2025/01/12 244 users Single-page Application 議論 用語

はじめに フロントエンド開発 においてレンダリングという言葉はさまざまな場面で登場します。さらに、Server-Side Rendering(SSR)のように「レンダリング」という言葉が名前に含まれているものを含め、Single-Page Application(SPA)など、レンダリングに関連した議論でよく使われる用語も数多く存在します。 そして、こ... 続きを読む

フロントエンド開発で使える開発環境をおさらい。スタンドアロンからクラウドIDEまでの注目機能や特徴を紹介 | レバテックラボ（レバテックLAB）

2024/12/05 14 users スタンドアロン レバテックラボ レバテックLAB 難点 特定

ここからフロントエンド開発で利用できる具体的な開発環境を紹介していきますが、まずはスタンドアロンで使用できる定番的な開発環境を紹介します。これらの開発環境は多機能で幅広い用途に対応しますが、特定の目的に対応させようとすると、ライブラリの入手とインストールなど、相応の準備を必要とするのが難点といえ... 続きを読む

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

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 Vibes アクセシビリティ プレスリリース 組織

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 の現状... 続きを読む