Web フロントエンドエンジニアの実態を現場から完全主観でお届けします。 現代のフロントエンドエンジニアについて理解したい方向けです。 #動機みんな（誰やねん）が思う「フロントエンドエンジニア」像と、私自身を含む実際の現場の「フロントエンドエンジニア」像に大きな乖離を感じることが増え、それについて説明する機会が増えてきたので、私が思う「フロントエンドエンジニア」像をまとめてみました。 みんなとは、IT企業の人事部・IT人材系エージェント・デザイナー・駆け出しエンジニア・MPAに固執するエンジニアなどです。 #定義Web フロントエンドエンジニアの定義は多岐に渡ります。 ここでは、以下条件を「全て」満たすエンジニアを Web フロントエンドエンジニアと定義して話を進めます。 Web ブラウザや Web ビューなどの Web プラットフォーム上で動作する UI/UX・機能を実現することを目的と
本記事ではNext.js+TypeScript+AWS Amplify+Recoilを使って、モダンなToDoリストを作る方法を紹介します。 Githubリポジトリを公開しますので、不具合や不適切な実装を見つけた場合はドシドシIssueかPull-Requestいただけると幸いです。 背景 私自身普段はRuby on Railsを使って開発しています。JavaScriptは正直まだ苦手です。 Railsは爆速でアプリを開発出来る点が魅力的ですが、一方でモバイルアプリとの連携やリッチなUIが求められる案件では、フロントエンドとバックエンドを分離した構成にせざるをえないケースがあります。 そのような構成だと、かえってRailsがリッチ過ぎるとも感じており、AWS Amplifyのようにバックエンドをスピーディーに構築してくれるサービスを一度使ってみたいと思っていました。 そのため、Next.j
September 14, 2022: Check out our new and improved cheat sheet for containerizing Node.js web applications with Docker! Are you looking for best practices on how to build Node.js Docker images for your web applications? Then you’ve come to the right place! The following article provides production-grade guidelines for building optimized and secure Node.js Docker images. You’ll find it helpful rega
This project is by Padraig Flood London based frontend developer, contactable via LinkedIn Likes films and stuff Letterboxd Is unwilling to link his Twitter because he can't remember whether anything he tweeted is embarrassing Is sorry about how this works weird on tablets
How Big Tech Runs Tech Projects and the Curious Absence of Scrum
Project management is a topic most people have strong opinions on, and I’m no exception. To answer the question of how different companies run engineering projects, I pulled in help from across the industry. In this issue we’ll cover: Project management approaches across the industry. An overview of a survey with over 100 companies represented, plus key takeaways.Project management at Big Tech. Ho
Xcode Previewsを用いたUIKitベースのプロジェクトの開発効率化 | メルカリエンジニアリング
こんにちは。メルペイのiOSチームの@kenmazです。 メルペイのiOSチームでは Xcode11 で導入された Xcode Previews 機能を用いて、UIKitベースのプロジェクトの開発効率向上に取り組んでいます。Xcode PreviewsといえばSwiftUI用の開発支援機能、というイメージがありますが、実は従来のUIKitベースのプロジェクトに対しても使用が可能です。 Xcode Previews を使うことでiOS Simualtor等を起動することなく、様々な状態のビューをリアルタイムにプレビューできるため、開発効率が大幅に向上します。 またXcode Previewsが提供する強力なプレビュー機能を使うことで、Interface Builderの支援も不要となったため、従来のxib/Storyboardを用いたビューの実装から、コードによるビューの実装への移行を試みる
こんにちは。ソウゾウのSoftware Engineerの@napoliです。連載：「メルカリShops」プレオープンまでの開発の裏側の3日目を担当させていただきます。 メルカリShopsではマイクロサービスアーキテクチャによる開発を採用しています。ここではメルカリShopsではどのようにマイクロサービスと向き合っているかを紹介させていただきます。 メルカリShopsのマイクロサービス群 メルカリShopsはざっくりと、図のような形でマイクロサービス群が構成されています。 Frontendがひとつ、Backend For Frontend(BFF)がひとつ、そして(執筆時点で)約40ほどのBackendサービスが、それぞれが独立した実行環境で稼働しています。 BackendはShop(ショップ)、Product(商品)、Order(注文)、Payment(決済)といったドメインごとに独立し
社内の人から、自分が以前書いた次の記事が「便利で助かった！書いた時から何かアップデートある？」ってメッセージがきた。 そんな便利だなんてどうもありがとうございますウフフ、と思いながら書いた日を見てみると 2022-08-09 だった。もうすぐ 2 年経とうとしてる。時の流れが早くて怖い。 この記事に書かれた実装例はリポジトリにまとめていたんだけど、当然、何かメンテをしていたわけもなく、2022 年当時の状態がそのまま残っていた。 せっかく便利に思ってくれる人がいたので、内容をアップデートする。 アップデートまとめ メジャーバージョンのリリースやビルドツールの統一の観点で Jest から Vitest に移行 useFakeTimers({ shouldAdvanceTime: true }) @testing-library/reactを v15 にバージョンアップ MSW を v2 にバ
GitHub Actionsで「OpenAPI の自動バージョニング」から「API Clientのnpmパッケージ生成」までを完全自動化 〜bypass機能を利用してみました〜 - BASEプロダクトチームブログ
Platformグループでマネージャーをしている松田（ @tadamatu ） です。 この記事に書いてあること GitHub Actions を利用し 「OpenAPI の自動バージョニング」から「API Clientのnpmパッケージ生成」までを完全自動化 したのですが、その際に ハマったこと、工夫したこと が結構あったので、シェアしておきたいと思い書かせていただいた記事になります。 具体的には以下のような内容について書いてあります。 Branch protection rulesを維持した状態で、workflowからだけはcommitをさせたい（bypass機能を利用） → 文中の(3-2) 別ブランチの GitHub packages に npm publish したい（通常は何もしなければGitHub Actionsからは同じリポジトリのGitHub packagesにしか np
はじめに 背景 やりたいこと Why MSW？ 導入手順 詰まったこと defaultのtimeout設定時間が短い CIで落ちた時の検証方法がわからない 認証後のストレージの状態が入ってこない 今後の展望 おわりに はじめに enechainでフロントエンドエンジニアをしている@Shunya078です！ 自分の所属するGXデスクでは『日本気候取引所 - Japan Climate Exchange』(以下JCEX)のサービス開発を行っており、その中でReactを使用したフロントエンドの開発を担当しています。 リグレッションテストは運用を考えると、設計から導入した後、どう管理していくかまで検討する点が多く存在します。 JCEXは去年の年末にリリースされたばかりのサービスで、まだブラウザまで含めたリグレッション相当になるテストレイヤーが導入できておらず、存在しませんでした。 今回は新たに自チ
こんにちは、@morishin127 です。クックパッドの在宅勤務環境 - クックパッド開発者ブログ でも書かれていた通り、クックパッドは2月18日から現在に至るまで全従業員が原則在宅勤務となっています。突然の在宅勤務体制の中でも社員がなるべくいつも通りの生産性を発揮できるように様々な取り組みを行っています。このような状況になる以前から Slack や Zoom、GitHub Issue などのコミュニケーションツールが職種を問わず日常的に利用されていたため、比較的物理的な制約を受けないコミュニケーションができていたと感じていますが、それでもやはり全員が在宅勤務になると色々な課題が生じました。従業員に向けたアンケートでは次のような課題が挙がっていました。 仕事とプライベートの切り替えが難しい 同僚や上司との気軽なコミュニケーションがしにくい いちいち Zoom をつなぐのはハードルが高い
プロトタイピング向けにペライチで最低限のフロントエンドスタックを動かす方法について。 注意: 本番で使わないでください。tailwind は CDN モードで動かしているし、 esm.sh はスクリプトを動的にビルドするのでパフォーマンスは良くないです。 前提 jsconf.jp で色々なツールを使えばそれっぽいバンドルレス実現できる(けどパフォーマンスに難)という話を書きました。 具体的には NativeESM + importmaps + esm.sh 等の組み合わせます。 <script type="importmap"> - HTML: ハイパーテキストマークアップ言語 | MDN ESM>CDN これに、 esm.sh の v135 の新機能を使って tsx をバンドルするのを組み合わせる話です。 esm.sh/run 使い方は簡単。 <!-- esm.sh からランナーをロード
フロントエンドのGitHub Actions実行時間を削減するために取り組んだこと | PR TIMES 開発者ブログ
こんにちは、フロントエンドエンジニアの小張です。GitHub Actionsの実行時間を削減するために取り組んだことについて紹介します。 経緯 PR TIMESではReactに関するコードを、monorepoとしてprtimes-frontendという1つのリポジトリで管理しています。 GitHub Enterprise Cloudプランでは月50,000分のGitHub Actionsを無料で実行することができますが、prtimes-frontendだけで7割近い時間を消費してしまっていました。またCIに時間がかかることで、Pull Requestを作成した後、10分近く待たないとコードレビューに回すことができず、開発効率が落ちてしまっていました。 そこで現状の使い方を見直して、billable timeの削減に取り組むことになりました。 billable time削減の改善点を探す b
フロントエンドの Monorepo をやめてリポジトリ分割したワケ / Why did we stop using Monorepo on the frontend and split the repository?
2024/06/25： モノレポは、令和のソフトウェア開発における銀の弾丸か？ https://hack-at-delta.connpass.com/event/319792/ フロントエンドの Monorepo をやめてリポジトリ分割したワケ 坂井 学 ソフトウェアエンジニア
GoでクロスプラットフォームGUI(2022)
andlabs/ui、lxn/walkは簡素なウィジェットセットだけをサポート。fyne、Qtベースは豊富なウィジェットセットを持つ。いずれも少人数でメンテしていることを考えると、コンパクトなツールキットで活発な活動中のものが品質面でおすすめです。 IMEサポートの有無は日本語圏でのGUI提供において重要なファクター 英語圏生まれのGUIライブラリの多くはIMEサポートをあまり考慮していない GLFWはIMEサポートのPRが何年も取り込まれない状況がつづいている HTMLベース（ChromeやWebView）ならIMEサポートを内包している 自作系はどうしてもギョッとする挙動や細かく期待しない挙動にちょくちょく出会ってしまう（例えば日本語のワードラップ未対応など） HTML系はUIを構築していく上でのほとんどのケースで細かい問題に対する解決策がちゃんとある クロス環境対応ということであれば
この記事は、ドワンゴもスポンサードしていた JSConf JP 2021 にて、「Web フロントエンドのリプレースを支えるテストの考え方」というタイトルで berlysia がトークした内容をもとに再構成したものです。トークのアーカイブもご覧いただけます。 この記事は ドワンゴ Advent Calendar 2021 の3日目の記事です。 speakerdeck.com 宣伝 『ドワンゴ EdTech Talk』と題した事業説明イベントを 12/8(水) に開催します。 ドワンゴの教育事業で提供するオンライン学習サービス「N予備校」のライブ配信の授業を体験いただきながら、教育事業での取り組みを知っていただくためのイベントです。 最後までご参加いただくと N 予備校の有料会員相当の教材を 3 か月間無料で利用できる ように用意をしております。 Web 開発を学ぶ教材として好評をいただいて
GitHub PR毎に独立環境を構築することにより開発効率を向上させました！ - JMDC TECH BLOG
株式会社JMDCに6月に入社しました @dtaniwakiこと谷脇です。 github.com 現在、Pep Up for WORKという企業向けヘルスケアプロダクトをフルスタックで開発しており、今回は開発プロセス改善の取り組みについて紹介させていただきます。 info.jmdc.co.jp Pep Up for WORKではtoBサービスとしての品質を担保するため、PdMによる動作確認を行っています。一方で、非同期で開発に参加しているメンバーが多いため、この動作確認の効率化が非常に重要となっています。 以前の動作確認フローと仕組み 私が入社する前は、ステージング環境とは別にdev環境というPdM確認用環境を１つ用意して、以下のようなフローでデプロイを行い、PdMが動作確認をしていました。 以前の動作確認環境の仕組み このフローでは以下の２通りのパターンのデプロイが行われます。 複数のGi
Sansan Technical Viewは「挑戦」をテーマにSansanエンジニア達の開発における取り組みや知見を発表するイベント。Bill One事業部のソフトウェアエンジニアである加藤氏がマイクロサービスへの取り組みを紹介しました。発表資料はこちら。 Bill Oneでのマイクロサービスの取り組み 加藤耕太氏：こんにちは。加藤です。今日は『新規事業でもマイクロサービスに挑戦する』というタイトルでお話しします。マイクロサービスアーキテクチャについてご存知の方は、新規サービスをマイクロサービスで作るのはアンチパターンである、という話を聞いたことがあるかもしれません。 チームが小さいにもかかわらず流行りに乗ってマイクロサービスに分割して作ってみたものの、開発の効率が落ちるだけでしたとか、独立してデプロイできない分散モノリスができあがってしまいました、のような失敗談を聞くことがあります。 新
Renovateを使ってフロントエンドのバージョンアップを改善した話 | PR TIMES 開発者ブログ
こんにちは、フロントエンドエンジニアの小張です。Renovateを使ってフロントエンドのパッケージやライブラリのバージョンアップを改善したことについて紹介します。 PR TIMESではReactに関するコードを、monorepoとしてprtimes-frontendという1つのリポジトリで管理しています。 このリポジトリは作成されてから2年ほどしか経っておらず、使っているライブラリも比較的新しいため、今までバージョンアップの仕組みを特に整備していませんでした。 ただフロントエンドのライブラリはバージョンアップの頻度が多く、異なるライブラリ間でバージョンの依存関係があることもあり、将来のことを考えればライブラリのバージョンを更新する仕組みを作ることはほぼ必須でした。 また、monorepoであるためライブラリのバージョンを大きくあげようとした際の対応コストも大きく、最新との差が小さいうちに細
はじめに この記事は、個人で作っているサービスをアプリとWebの両方に展開しいて感じたことを書いたものです。 作っているもの 著者は、個人でRabbytという、デジタルキャンバスサービスを作っています。 タブレットやスマホに全画面で絵を表示することで、「タブレットで絵を飾れる」サービスです。 壁にかけたりスタンドを使ったりすれば簡単に絵が飾れます。 アプリもリリースを重ね、今は1.0.8になり、最近のリリースではファイルをアップロード出来るようになりました。 使用している技術を図にすると上のようになります。 色々使っていますが、 Go (バックエンド) Flutter (アプリ) React (Web) GraphQL (API) を使っていることが、この記事での重要な点です。 モノレポ Rabbytは1人で作っていて、リポジトリを分けても楽にはなりません。 そのため、必要なものは全て１箇
GitHub - adobe/frontend-regression-validator: Visual regression tool used to compare baseline and updated instances of a website in a deployment pipeline.
FRED is an opensource visual regression tool used to compare two instances of a website. FRED is responsible for automatic visual regression testing, with the purpose of ensuring that functionality is not broken by comparing a current(baseline) and an updated version of a website. FRED compares the following: Console and network logs Visual: screenshot analysis Visual AI: screenshot analysis using
「リアクティブコントローラ」導入がもたらすかもしれないウェブフロントエンド設計の変化 | フューチャー技術ブログ
フロントエンド連載2日目のエントリーです。 あまり話題になっていないような気がしますが、Web Componentsを実装するためのフレームワークのLit-Element v3がバージョンアップして、ついでにリブランディングしてLit v2.0となりました。ロゴも変わり、ウェブサイトも新しくなりました。 Introducing “Lit” for Web Components 本当はこのLitの紹介をこの連載でしようとしたのですが、上記のウェブサイトがすごく詳しいので、単に紹介するだけの記事だとあまり価値がないので、この中のコントローラ機能のみをとりあげようと思いますが、まずはWeb Componentsとは、というところを説明します。 n回目のWeb Components元年以前次のような記事を書きました。最初のPolymerというフレームワークが推進していたころよりも、ブラウザ対応も進
Chrome DevToolsのRenderingタブを活用しよう | フロントエンドBlog | ミツエーリンクス
Chrome DevToolsにはさまざまな機能が搭載されています。そのうちの1つ「Rendering」には、ページのレンダリングパフォーマンスを視覚化する機能や、さまざまな見え方を疑似的に再現する機能が含まれています。 サイトのレンダリングパフォーマンス改善の取り組みに活用できる、こちらのRenderingタブ内の各機能についてご紹介します。 利用方法と各機能について Renderingタブはデフォルトだと非表示になっており、利用するにはまず次のいずれかの方法で表示する必要があります。 Chrome DevToolsを開いた状態でWindowsではCtrl+Shift+P、MacではCommand+Shift+Pを押して表示されるコマンドメニューに「Rendering」と入力し、「Show Rendering」を選択 Chrome DevTools内の三点ドットから「More tools
TL;DR React は単なる UI ライブラリにとどまらず Routing, Bundling, Server Technologies までを統合した技術になろうとしている React Server Components はパフォーマンスだけでなく、「PHP, Ruby on Rails のシンプルなサーバサイド HTML 描画の世界に戻しつつ、サーバサイドとクライアントサイドの実装を同じ技術でシームレスに実装できるようにする」ことができる それにより、開発者から見た複雑さを下げられ、かつエンドユーザは良いパフォーマンス・良い体験を得られる React Server Comonents （以下、RSC）について、インターネット上の記事では主にパフォーマンスについて語られることが多い印象です。しかし、RSC のもう1つ重要な点として、RSC は我々の Web アプリケーション開発の体験
こんにちは！2022年4月にペパボに新卒入社しました、新卒12期エンジニアズ（通称12th-dev)です。 今年は5月末から8月上旬にかけて新卒エンジニア研修が実施されています。 その中のフロントエンド研修では、ブラウザの仕組みやモダンな環境構築の方法などを学んだ上で、２チームに分かれて実際にWebサービスを作成しました。 この記事では、作ったサービスの概要や使用した技術スタックについてお伝えします。 オフィス内カフェのメニューサイト 新卒12期エンジニアのseiji, keigo, yukyan です。私たちのチームは社内カフェを便利にするサービスを作りました。 GMOインターネットグループには「シナジーカフェ GMO Yours」と呼ばれるカフェが福利厚生として用意されています。しかし、メニュー表がパソコンのみでしか見られず、列に並んでいる間などにメニューをみることができないという問題
Wantedly の UI デザインシステムは「WantedlyのUIをデザインする上での共通の考え方とツール＆アセット」でありエンジニアとデザイナが効率よくコミュニケーションするための共通言語となる デザインシステムを (Web) Frontend に持ち込む際は、単なるコンポーネントカタログではなく、システムが定義するものと同じレベルの抽象を持つライブラリ・フレームワークとして実装することで、より有効性を発揮する Wantedly におけるデザインシステムは、「プロダクト・デバイスをまたいでも・誰がデザインしても体験やブランドとしての一貫性を保つ」「デザインの生産性を向上させ、デザイナ - エンジニア 間コミュニケーションを改善することで、ユーザに価値を届ける速度を向上させる」といった目的のために作られたものです。 より詳しくは、デザインシステムが加速させるプロダクト開発 / Desi
On the origins of DS_store
arno.org If you are a Mac user, or if you have transferred files from Mac to Windows, you’re probably familiar with .DS_Store files. But where does this name come from? Back in 1999 I was the technical lead for the Mac OS X Finder at Apple. At that time the Finder code base was some 8 years old and had reached the end of its useful life. Making any changes to it require huge engineering effort, an
Worse Is Better の精神で Domain Specific なCADを作っている話 - CADDi Tech Blog
私（寺田 @u_1roh）が携わっているプロジェクトについて。 ここでは「金属加工品の多品種少量生産」という文脈の話をします。具体的には、例えば板金加工や旋盤やフライス盤による機械加工などの受注生産をイメージして下さい。 CAD/CAMの理想と現実 製造業では、CADやCAMといったソフトウェアが使われています。この2つは次の役割分担をしています。 CADは、製品の形状や仕様を定義する。 CAMは、製品仕様を満たす加工プログラムを生成する。 この役割分担の理想を突き詰めると、次のようになるでしょう。 CADは、どんな複雑な形状でも表現できる高い自由度を持ち、実際に用いられる加工法を仮定することなく、製品の仕様を表現する。 CAMは、どんな複雑な形状でも受け入れることができ、寸法公差や幾何公差を反映した加工プログラムを生成できる。 CAD界隈は、この理想に向かって進化を推し進めようとしている
はじめに おはようございます、加藤です。今回はフロントエンドエンジニア向けに静的なWebサイトをホスティングなどが出来るサービスであるAWS Amplify Consoleの使い方や出来る事を紹介します。 古の時代、ただの静的なコンテンツを表示する為だけだとしてもサーバーを建ててApache or nginxをインストールして...という事をやっていました。フロントエンドエンジニア or デザイナーが作成し、インフラエンジニアに依頼する必要がありました。古の時代といった通り現代では、NetlifyやFirebase hosting、そして本ブログで紹介するAmplify Consoleを使えば自分自身で簡単に簡単にリリースを行うことができます。より多くのエンジニアにそういった体験をして貰えれば良いなと思いこのブログを書きます。 AWS Amplifyとは AWS Amplify（以降、Am
なぜ ES2022 で文字列リテラルを使った import/export ができるようになるのか | サイボウズ フロントエンドエキスパートチーム
11 月 11 日に、以前から一部で注目されていたある Pull Request が tc39/ecma262 にマージされました。 この Pull Request がマージされたことで、識別子ではなく文字列リテラルを使った import/export が可能になりました。 この仕様変更はプロポーザルという形で扱われてはいませんが、構文上の影響があるので、JavaScript ユーザーとして知っておくに越したことはないものになります。 概要 まず具体例を示します。 今回の変更によって、次のように import/export する際の名前として文字列リテラルを使えるようになります。 基本的にはこれだけです。 詳解 ここからは仕様上の用語を使って解説をします。 この変更が入る前の ECMAScript では ImportSpecifier で as を使う場合 as の左側は Identifi
主要ブラウザで使える！CSS Cascade Layers で新しいCSS設計の手法を考える | サイボウズ フロントエンドエキスパートチーム
Chrome99に新機能として CSS Cascade Layers が実装され、Firefox、Edge、Safari といった主要ブラウザで CSS Cascade Layers が使えるようになりました。 CSS Cascade Layers とは CSS の仕様において、要素にどのスタイルを適用するかはざっくりと次のような優先順位で決定されていました。(カスケード順を省いて簡略的に記述しています) !important インラインスタイル セレクターの詳細度 同じ詳細度であれば最後に宣言されたもの ここに CSS Cascade Layers が導入されると次のように変わります。 !important インラインスタイル Cascade Layers セレクターの詳細度 同じ詳細度であれば最後に宣言されたもの 従来の CSS が抱える複雑な詳細度の管理 どのスタイルを適用するか判断
Build complete frontend features, even if your API doesn't exist. Mirage JS is an API mocking library that lets you build, test and share a complete working JavaScript application without having to rely on any backend services.
この記事は、Merpay Tech Openness Month 2020 の20日目の記事です。 こんにちは。メルペイのVP of Engineeringの木村（@hidek）です。 はじめに メルペイでは VP of Engineering と Engineering Manager (EM)が HR と連携をしながら、エンジニア組織のピープルマネジメントにコミットしています。ピープルマネジメントとは、 採用 → 育成 → 評価 → リテンション → 外へのアウトプット → より良い採用… というサイクルを好循環させながら、組織全体に貢献することと定義しています。 その中で、今回リテンションという観点で EM 間で議論を行い、「ローテーションプログラム」というものを作ったので、その紹介をしたいと思います。 「チャレンジ」のプロセス化 メルペイもプロダクトがリリースされて１年半以上が経ち
知っておくと便利！表現が広がる最新CSSテクニックや書き方30選 これまでの苦労が嘘のよう。新テクニックでデザインに差をつけよう 2022年は、CSSにとって過去最高の年になりました。 安定版ブラウザで、多くの新しいCSSプロパティやセレクタなどが対応となり、これまでは実装にJavaScriptなどが必要だったものも、CSSのみで表現できるようになっています。 ここでは、知っておくと便利な最新CSSテクニックや書き方をまとめてご紹介します。 「CSSって、こんなこともできるの?!」と思わず納得してしまう、驚きテクニックを習得して、ウェブデザインでできる表現の幅をぐっと広げましょう。 コンテンツ目次 1. コンテナクエリ @container が全ブラウザ対応 2. CSSスタイルクエリの基本と具体サンプル例 3. グラデーション付き影のつくり方 4. どんな背景でも美しい影のつくり方 5.
Amplify + Nx (React + Typescript) で爆速で monorepo 環境を構築する - Techtouch Developers Blog
この記事はテックタッチアドベントカレンダー9 日目の記事です。 8 日目は ポエマー masaru 氏による 少女に何が起ったか ～少女が他人のウェブサーバー構成を知るまでにやったいくつかのこと、そしてその結末～ でした。 ただのポエムかと思いきやかなりコアなセキュリティの話だったのでとても勉強になりました。 テックタッチのフロントエンドエンジニアの taka です。 最近テックタッチでは、品質を更に向上させるため、また今後開発を加速できるようにするためにコードを一新しました。 そこで Amplify と Nx を使って monorepo の開発環境を構築したので、その手順を記しておこうと思います。 ざっくり言うとこれらを使うことで、 monorepo の環境を簡単にセットアップしたい React + Typescript で開発したい ESLint や Jest などの開発ツールを使いた
安全安心の開発体験のために Visual Regression Testing はじめました。 - Uzabase for Engineers
NewsPicks Web Experience Unit でフロントエンドエンジニアをしているじゆんきち(@junkisai)です。 弊チームでは、ここ1年間くらいWeb 版のNewsPicksを新しい基盤に置き換えつつ、見ためも刷新するプロジェクト（以下リニューアルプロジェクト）を進めています。 今回は、弊プロダクトで Visual Regression Testing をはじめて、3ヶ月ほど運用してきたので、今回はその導入や運用にあたっての話をしたいと思います。 導入に至った背景と目的 使用したツールと構成 ツール 構成 導入の流れ ライブラリのインストール storycap の設定 reg-suit の準備 Amazon S3 の準備 Github Actions の設定 運用して出てきた課題と解消 日本語で表示されるはずの部分が□で表示されてしまっている 画像など外部リソースから
はじめに はじめまして、ホットペッパービューティーコスメ（以下HPBC）にてフロントエンドエンジニアとして学生アルバイトをしている柏です。 Webサービスで普遍的にもとめられる指標にパフォーマンスがあります。素早く表示されるWebサービスはユーザー体験が良く、コンバージョンや直帰率などにも関係があると言われています。HPBCでは、チーム一丸となってパフォーマンスの改善に継続的に取り組んでいます。 6週間のアルバイト期間で、HPBCのBFF(Backend for Frontend)の性能改善に取り組ませていただき、結果としてレスポンスタイムを200ミリ秒程度短縮することができました。本記事では、その取り組みをテーマに計測を通してパフォーマンスのボトルネックを発見する方法、そして開発の速度を落とさずそれらを解消することについて、ご紹介します。 目次 HPBCの構成と課題 Cloud Trac
ミツエーリンクスでは全社的にInterop 2022の重点分野について調査をしています。 今回はその中から「新しいビューポートの単位」について紹介します。 ビューポートとは ビューポートはWebページを表示するための領域で、ブラウザウィンドウからアドレスバーなどのUIを除いた部分になります。 ビューポートの単位とは ビューポートの単位は相対的な長さの単位で、ビューポートの長さに従って指定します。 ブラウザで表示したビューポートの長さが対象となるため、@pageで宣言した印刷用のスタイルでは無効になります。 なぜ新しいビューポートの単位が必要になったのか 従来のビューポートの単位はUIがスクロールによって拡大縮小するような機能を持つ前に作成されました。 そのため後発の動的にサイズが変わるUIに対応しておらず、画面をスクロールする前の初期表示時に決定されたビューポートサイズを維持し続けます。
なぜモダンフロントエンドを使いたいのか 宣言的な制御編｜食べログ フロントエンドエンジニアブログ
こんにちは。FEチームリーダーの辻です。 食べログには技術情報を発信する社内ブログがあります。エンジニアはもちろん企画やデザイナーなど技術者ではない職種の方とも、食べログを支える技術や今後食べログに取り入れたい技術について共有しています。 この記事はその社内ブログで投稿したものです。 エンジニアでなくても理解しやすいよう、わざと大雑把に説明している部分もありますが、ご容赦いただけると幸いです。 ----------------------- はじめに食べログでは、 モダンフロントエンド（React）へのリプレースプロジェクトが進行中です。 2014年頃以降、React,Angular,Vue.jsなどのフレームワークやライブラリが流行し、いまも続いています。これらフレームワークやライブラリとその周辺技術をモダンフロントエンドと呼んでいます。 この記事では、そもそもモダンフロントエンドとはな
GitHub - vitejs/vite: Next generation frontend tooling. It's fast!
You signed in with another tab or window. Reload to refresh your session. You signed out in another tab or window. Reload to refresh your session. You switched accounts on another tab or window. Reload to refresh your session. Dismiss alert
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
Webフロントエンドエンジニアのすゝめ | ATHLINGUAL
Next.js+TypeScript+AWS Amplify+RecoilでToDoリストを作る - Qiita
10 best practices to containerize Node.js web applications with Docker | Snyk Blog | Snyk
Packard Belle (W98 Desktop Clone)
メルカリShopsはマイクロサービスとどう向き合っているか | メルカリエンジニアリング
「実装例から見る React のテストの書き方」をアップデートする
Playwright+MSW でのリグレッションテスト事始 - enechain Tech Blog
在宅勤務でも雑談がしたい！在宅勤務の課題解決の取り組み - クックパッド開発者ブログ
インストール不要。ペライチHTMLでReact+TSX+Tailwind のフロントエンド一式を動かす
Web フロントエンドのレガシーコードを置き換えるためのテストの考え方 - ドワンゴ教育サービス開発者ブログ
Sansanの「Bill One」がマイクロサービス化に挑戦した理由 ある程度方向性が見えてきてからサービスは分割すべき
個人開発でReactとFlutterを同時に使うとどうなるか
React Server Components は Web アプリ開発にどのような変化をもたらすか
新卒研修で最高のWebサービスを作りました - Pepabo Tech Portal
Web アプリのデザインシステムライブラリ | Wantedly Engineering Handbook
フロントエンドエンジニアに捧げるAWS Amplify Console | DevelopersIO
Mirage JS • An API mocking library for frontend developers
エンジニアのローテーションプログラムを作った話 | メルカリエンジニアリング
知っておくと便利！表現が広がる最新CSSテクニックや書き方30選
計測・検討・対処のプロセスでWebサービスのパフォーマンスを改善する
新しいビューポートの単位（sv*、lv*、dv*） | フロントエンドBlog | ミツエーリンクス