タグ Webフロントエンド
人気順 10 users 50 users 100 users 500 users 1000 usersWebフロントエンドで脱SSRして料金を6割節約した話
このブログ記事では、ORICALのフロントエンドのインフラ構成を移行し、SSR（サーバーサイドレンダリング）をやめてCSR（クライアントサイドレンダリング）に一本化した際の話について、移行前と移行後の構成の違いに焦点を当ててご紹介します。移行にあたっては様々な苦労がありましたが、それはまた別のブログ記事で詳... 続きを読む
Webフロントエンドの脆弱性つまみ食い 2024年版
ReactJS: Keep Simple. Everything can be a component! 続きを読む
新しい擬似クラス:has()、:is()、:where()を使いこなそう ［CSS Modern Features no.1］ | gihyo.jp
2024/10/09
21 users
where
フロントエ
サイボウズ
Has
gihyo.jp
乗りこなせ！ モダンフロントエンド 新しい擬似クラス:has()、:is()、:where()を使いこなそう ［CSS Modern Features no.1］ 本連載について はじめまして！ サイボウズ フロントエンドエキスパートチームの麦島です。 本連載では、Webフロントエンドに関してもう一歩踏み込んだ知識について、サイボウズ フロントエ... 続きを読む
Webフロントエンドの複雑な状態同士の依存をzustandを使ってリアーキテクチャする - KAKEHASHI Tech Blog
2024/09/10
7 users
nokogiri
フロントエ
プラクティス
イントロ
カケハシ
この記事は秋の技術特集 2024の 7 記事目です。 カケハシのAI在庫管理チームでフロントエンドエンジニアをしているNokogiri です。今回はAI在庫の入庫ダイアログを zustand を使ってリアーキテクチャした事例を元に取り入れたプラクティスを紹介したいと思います。 イントロ AI在庫では、ユーザーの入力を伴うフロントエ... 続きを読む
テストを書く方針と原則の備忘録 - Qiita
2024/08/09
216 users
Qiita
サーバエンジニア
備忘録
iOS
原則
こんにちは。サーバエンジニアのnsym-mです。普段はGoでバックエンドの開発などをしています。 最近テストに関する書籍や記事などを色々読み漁ったので、現時点での自分のテストについての考え方を備忘録として残しておきます。 今回の話はWebフロントエンドやiOS/Androidなどでも適用できる汎用的な考え方として記載し... 続きを読む
VercelがPPRをNodeランタイムにした件からWebフロントエンドとエッジの動向に迫る
2024/06/15
17 users
エッジ
Twitter
Vercel
動向
イントロダクション
こんにちは。sumirenです。 イントロダクション 先日、Twitterで以下のポストが話題になっていました。 一部曖昧なところもありますが、推測と動作検証結果も交えて要約すると、以下のことを言っています。 VercelがホスティングしているWebサイトは、エッジでのサーバーサイド処理を行うことをやめた Next.jsに関して、... 続きを読む
メルカリ ハロ Webフロントエンドの開発スピードと品質両立の取り組み | メルカリエンジニアリング
2024/06/12
7 users
メルカリエンジニアリング
Mercari Hallo
前提
こんにちは。メルカリのSoftware Engineerの@tanashoです。連載：Mercari Hallo, world! -メルカリ ハロ 開発の裏側-の6回目を担当させていただきます。 メルカリ ハロのWebアプリケーションは複数存在し、Webフロントエンドチームが横断的に開発をしています。本記事では、その前提を踏まえ、スピードと品質をどのよう... 続きを読む
［入門］Webフロントエンド E2E テスト――PlaywrightによるWebアプリの自動テストから良いテストの書き方まで
2024/06/03
9 users
End-to-End
playwright
本書
視点
動作
この本の概要 E2Eテスト（End-to-End Testing）とは，システムの端から端（End-to-End）まで，全体を通して行うソフトウェアテストを指します。本書ではE2Eテストを「ユーザーの視点でWebシステムの動作を確認する自動テスト」として定義し，E2Eテストをこれからプロジェクトに導入しようとしている人，すでに導入してい... 続きを読む
Rust製Webレンダリングエンジン「Servo」、デスクトップアプリ作成フレームワーク「Tauri」を試験的に統合
2024/01/27
12 users
デスクトップアプリケーション
rust
Servo
統合
Linux Foundation Europe傘下のプロジェクトである、Rustで書かれたWebレンダリングエンジンServoの開発チームは、WebフロントエンドとRustによるバックエンドを組み合わせたデスクトップアプリケーションを構築するためのフレームワークである、Tauriとの統合に関する最新アップデートを1月19日（現地時間）に公開した... 続きを読む
console.log() の代わりにdevtoolsのLogpointsを使う - Qiita
2023/10/24
150 users
Qiita
DevTools
コンソール
出力
特定
Logpointsを使おう Webフロントエンドの開発をする際、デバッグ目的で「特定の処理が実行された」ということを確認するために console.log() を使うことは多いと思います。しかし、Google Chrome や Microsoft Edge で利用可能な Logpoints を利用することで、 console.log() を使わずともコンソールにメッセージを出力... 続きを読む
新規サービス「FAANS」における、立ち上げからReact+TypeScriptのSPA開発を2年間運用した際に取り組んだ組織的・技術的な課題 - ZOZO TECH BLOG
2023/10/06
11 users
FAANS
React+TypeScript
コーデ
由来
こんにちは、ブランドソリューション開発本部フロントエンド部の田中です。 普段はFAANSのWebフロントエンドの開発を行なっています。 FAANSとは「Fashion Advisors are Neighbors」がサービス名の由来で、ショップスタッフの効率的な販売をサポートするショップスタッフ専用ツールです。 ショップスタッフ向けにコーデ... 続きを読む
Webフロントエンドのための実践「テスト」手法 CodeZine Night #1
2023/05/10
192 users
手法
テスト
実践
DB外の副作用をトランザクションから分離しよう / Isolate out-of-DB side effects from transactions 続きを読む
Webフロントエンドにおける網羅的テストパターンガイド
2023/04/27
159 users
リグレッションテスト
ユニットテスト
パフォーマンステスト
こんにちは、テストが好きなsilverbirderと申します。Webフロントエンドのテストは実施していますか？ユニットテストやビジュアルリグレッションテストは広く知られていると思います。しかし、パフォーマンステストのためのテストコードはありますか？また、カオスエンジニアリングテストやアクセシビリティテストはあり... 続きを読む
microCMSのWebフロントエンドにクリーンアーキテクチャを採用した話【後編】
2023/01/30
14 users
microCMS
クリーンアーキテクチャ
後編
実装
浸透
はじめに こんにちは、森茂です。 先日公開したmicroCMSのWebフロントエンドにクリーンアーキテクチャを採用した話【前編】に引き続き、今回は後編として前編で紹介させていただいた構成にあわせて、実際にどのような実装とチームへの浸透を行っていったかについて紹介いたします。 なお、記事内に記載している仕様、ソ... 続きを読む
microCMSのWebフロントエンドにクリーンアーキテクチャを採用した話【前編】
2023/01/17
59 users
microCMS
クリーンアーキテクチャ
タスク
大西
前編
はじめにmicroCMSの大西です。microCMSには2022年の5月に入社しました。普段は開発本部長として組織的な業務、エンジニアのサポート、開発全体の大まかなタスクの方向性を決めといった業務を行なっています。 microCMSでは昨年中盤以降にWebフロントエンドの設計パターンを刷新しました。採用した設計パターンはクリーン... 続きを読む
Mirrativ のWebフロントエンドで使っているライブラリを紹介する！ - Mirrativ Tech Blog
2022/12/13
28 users
Mirrativ
React
TypeScript
8割以上
こんにちは、フロントエンドエンジニア 兼 バックエンドエンジニアの駒木です。 iOS / Android / バックエンドのライブラリ紹介に引き続き、MirrativのWebフロントエンドで使用しているライブラリをご紹介します！ JSフレームワーク: React with TypeScript / Vue.js 8割以上のアプリケーションはReact + TypeScriptで実... 続きを読む
会計PlusのWebフロントエンドパフォーマンス改善 | Money Forward Engineers' Blog
2022/10/19
14 users
Money Forward Engineers
Blog
大阪開発拠点でマネーフォワード会計Plus（以下、会計Plus）プロダクトのフロントエンドエンジニアをやってます、しばもとです。好きな食べ物は、ポンデリングです。 私が所属する会計PlusのWebフロントエンドで改善活動を行いました。その改善活動としてビルド時間の短縮、バンドルサイズの削減、Jestの実行時間短縮な... 続きを読む
10年越しの Web フロントエンドという職種界隈についての考 | Offers Tech Blog
2022/10/17
6 users
フロントエンド
Offers Tech Blog
web
Offers を運営している株式会社 overflow の あほむ でございます。 10年越しのWebフロントエンド 最近更新していない 自分のブログ を遡ると「フロントエンド」という語の初出は 2010 年であり、転職のタイミングで自らを「Web フロントエンドエンジニア」と定義したのは 2012 年の頃でした。 それから 10 年、自分語り... 続きを読む
Webフロントエンドとアーキテクチャ事情の持論を喋る
2022/10/17
18 users
持論
アーキテクチャ事情
アーキテク
セッション
本セッション
本記事は、TechFeed Experts Night#4 〜 フロントエンドアーキテクチャを語るのセッション書き起こし記事になります。 イベントページのタイムテーブルから、その他のセッションに関する記事もお読み頂けますので、一度アクセスしてみてください。 本セッションの登壇者 セッション動画 「Webフロントエンドとアーキテク... 続きを読む
リリースから5年、Webフロントエンドの経年劣化と向き合う
2022/10/11
234 users
経年劣化
リリース
@herablog さん、@shunke07 さんと共に Muddy Web #3 で発表した資料です。 https://cyberagent.connpass.com/event/261115/ news.ameba.jpは5年前にデスクトップ版ではReact化、モバイル版ではAMP化が行われました。当時は最先端の技術でしたが時が経つにつれて技術的なトレンドも変化しています。TypeScriptやTanStack... 続きを読む
Webフロントエンドと アーキテクチャ事情の持論を喋る
2022/09/21
13 users
持論
アーキテクチャ事情
PDF 版: https://s.aho.mu/220922-techfeed_expert_night_4.pdf TechFeed Experts Night#4 〜 フロントエンドアーキテクチャを語る https://techfeed.io/events/techfeed-experts-night-4 でフロントエンド設計をテーマとして使用したスライドです。本編5分。 ===== ▼ 元データで参考リンクとして張っていた URL たち SP... 続きを読む
ZOZOTOWN Webフロントエンドリプレイスにおける CSS in JS の技術選定で Emotion を選定した話 - ZOZO TECH BLOG
2022/09/13
14 users
ZOZOTOWN
リプレイス
Emotion
菊地
背景
はじめに こんにちは。ZOZOTOWN開発本部フロントエンドの菊地（@hiro0218）です。 現在、ZOZOTOWNではWebフロントエンド技術のリプレイスプロジェクトが進行しています1。本記事では、WebフロントエンドのリプレイスでCSS in JSの技術選定をした際の背景や課題についてご紹介します。 既存技術スタックの課題 リプレイス... 続きを読む
WebAssembly入門 ─ Webフロントエンドの現実的なユースケースを知り、Wasm製アプリケーションを体験してみよう！ - エンジニアHub｜Webエンジニアのキャリアを考える！
2022/07/04
165 users
エンジニアHub
プログラミン
ユースケース
wasm
エンジニアHub > 記事一覧 > WebAssembly入門 ─ Webフロントエンドの現実的なユースケースを知り、Wasm製アプリケーションを体験してみよう！ WebAssembly入門 ─ Webフロントエンドの現実的なユースケースを知り、Wasm製アプリケーションを体験してみよう！ WebAssembly（Wasm）は、ブラウザー上で直接動くプログラミン... 続きを読む
Google Apps Scriptで、社内プロダクトのnpmライブラリの利用状況をスプレッドシートに出力してみた話 - SmartHR Tech Blog
2022/07/01
6 users
スプレッドシート
npmライブラリ
SmartHR
GAS
こんにちは！SmartHRのプロダクトエンジニアの@diescakeです！ 今日は「Google Apps Scriptで、社内プロダクトのnpmライブラリの利用状況をスプレッドシートに出力してみた話」を題材にしつつ、主にGoogle Apps Script（以降GAS）の開発環境周りの話をします。技術の分野としてはWebフロントエンド（以下フロントエンド... 続きを読む