ソースコードのハッシュ値を利用したCIの高速化 - Cybozu Inside Out | サイボウズエンジニアのブログ
こんにちは、kintoneチームの川向です。 ソースコードハッシュ値計算ツールであるsverを導入してCIの高速化を行ったので、その紹介をさせてください。 この仕組みにより、通常は1時間かかるCIの実行時間が最善のケースでは20分程度に短縮可能になりました。 導入前の課題 解決方法の検討 sverを使ったテストのスキップによるCI高速化 kintoneでのsverの利用方法 sver設定ファイルの書き方 キャッシュの保存先(GitHub Actions Cache、Amazon S3) sverを使ったジョブの書き方 sver情報生成ジョブ: ハッシュ生成とキャッシュの存在確認 ビルドジョブ: 依存ファイル以外に依存しないことの確認 テストジョブ: ジョブ成功後にキャッシュ保存 下流ジョブのifの書き方 結果 課題と今後の展開 まとめ 導入前の課題 kintoneのCIの大まかな構成は以下
こんにちは。決済プロダクトでQAエンジニアをしているrenです。freee QA Advent Calendar2024の23日目です。 今回は、決済プロダクト開発にテストアーキテクチャを設計した事例について紹介します。 テストアーキテクチャとは テストアーキテクチャによって解決したい課題 テストアーキテクチャ設計のステップ 1. この振る舞いを担保するためには、どのようなテストが必要だろうか？という問いを立てる 2. 抽象化して考えるための概念を学ぶ 3. テストアーキテクチャを描き、議論する テストアーキテクチャ設計のインパクト 実装改善に関する気づき テストの構造とソフトウェアの構造に関する気づき 自分たちのテスト活動の課題に関する気づき チーム開発の支援を通じた工数上のインパクト テストアーキテクチャがもたらす価値 今後の展望 [appendix]今回設計したテストアーキテクチャの
Next.jsを4年間使用してたどりついた、エンタープライズアプリケーションのフロントエンド開発・構築手法 はじめに 目まぐるしく進化するフロントエンド開発の世界では、常に最新の知識や技術をいち早く取り入れることが、エンタープライズアプリケーションの開発を成功させる上で欠かせません。Tailwind CSS、TypeScript、Turborepo、ESLint、React Queryなどを含む強力なツールキットとNext.jsを4年間使用してきた結果、開発に役立つさまざまな知見やベストプラクティスが得られました。この記事では、大企業向けフロントエンドアプリケーションのパフォーマンス、保守性、拡張性を最大限に高める設計・構築手法を紹介したいと思います。 注記：ここに記載する内容はあくまでも個人的な見解であり、筆者が推奨する手法が必ずしも適さない場合もあります。 効果的なエンタープライズ向け
アジャイル開発におけるユーザーストーリー分割実践 〜画面リニューアルの裏側〜 - BASEプロダクトチームブログ
こんにちは。BASE BANK 株式会社 Dev Division にて、 Software Developer をしている東口（@hgsgtk）です。 TL;DR バーティカルスライスでのデリバリーを可能な限り保つユーザーストーリーの分割はどうすればいいか ユーザーストーリーが 1 回のイテレーションで収まらないような場合に分割する ３つの分割軸「データ境界に沿って分割する」・「パフォーマンス制約をストーリーにする」・「アクターのモチベーションで分割する」をもって、ユーザーストーリーを分割する ビジネス価値の内訳要素に基づいて優先順位を考える 当記事の背景 BASE BANK Dev Division での開発プロジェクトでは、アジャイル開発の考え方・取り組みを取り入れています。その導入については、「少人数でのアジャイル開発への取り組み実例 （一歩目の踏みだし方） | 詳説 | July
社会人生活の半分をフリーランス、半分をIIJで過ごすエンジニア。元々はアプリケーション屋だったはずが、クラウドと出会ったばかりに半身をインフラ屋に売り渡す羽目に。現在はコンテナ技術に傾倒中だが語りだすと長いので割愛。タグをつけるならコンテナ、クラウド、ロードバイク、うどん。 皆さんがdocker, kubernetesを使う環境にはhttp proxyがありますか？ 多くのエンタープライズネットワークがそうであるように、IIJのオフィスでもProxyを通らないとInternetへアクセスすることはできません。今回はそんなProxy環境下でKubernetesを使う話です。 Proxyの存在がどれほど生産性を低下させていることか。多くのエンジニアが一度は思ったことがあるのではないでしょうか。昨今はリモートワークの機会が多く、VPNとの合わせ技で以前にも増してProxyに苦しめられる場面が増え
React 製アプリケーションのビルドシステムを webpack から Vite に移行して爆速な開発体験を手に入れよう | Recruit Tech Blog
React 製アプリケーションのビルドシステムを webpack から Vite に移行して爆速な開発体験を手に入れよう wakamsha Vite （ヴィート）とは Vue.js の作者である Evan You 氏が中心となって開発されているビルドツールです。 Vite - Next Generation Frontend Tooling ES Modules 形式のままブラウザからインポートする Dev サーバを搭載し、ソースコードをバンドルすることなく高速で動作させるのが特徴です。もちろん npm パッケージもブラウザから読み込み可能な ES Modules 形式に変換します。プロダクションビルド時は Rollup を使ってバンドルします。 Vue.js だけでなく React、Preact、Svelte のビルドもサポートしており、GitHub トレンドの上位にも頻繁に登場している
ファインディの4年にわたる技術的負債の返済 / Repaying 4 Years of Technical Debt at Findy
Findy CTOの佐藤です。2020年、開発生産性の低下に直面していた私たちは、Backend/Frontendの密結合や古いライブラリ、テスト不足など、多くの技術的負債を抱えていました。週1回のリリース、PR滞留、障害の頻発など、開発プロセスにも課題が山積みでした。 この状況を改善するため、私…
この記事ははてなエンジニア Advent Calendar 2020 5日目の記事です。4日目は id:syou6162 さんで、数字のバラ付きを考慮して意思決定する技術でした。 qiita.com developer.hatenastaff.com こんにちは、id:mizdra です。今年新卒としてはてなに入社し、WebアプリケーションエンジニアとしてGigaViewerというマンガビューワーを作っています。 最近のはてな社内では「tech-future」という、様々な技術を見つめ直すワーキンググループを運営しています。この会では、ある技術についての要点をまとめるだけでなく、その技術にまつわる歴史を紐解いて整理し、その上で全体を俯瞰して将来その技術がどういう方向に向かうのかを議論し、未来を予測する手がかりを作る、といった挑戦的な取り組みをしています。既に弊社のエンジニアから「tech-
LX Web Frontend Night: Unleash Next.js 録画 https://www.youtube.com/watch?v=uc-GgjE_G4g&t=216s https://github.com/LayerXcom/next-navigation-guard …
Clean Architectureを採用したBackend For Frontendの開発とこれまでの所感 - LIFULL Creators Blog
こんにちは。テクノロジー本部のyoshikawaです。好きなLinux DistributionはManjaro Linuxです。 今回はレガシー化が進むLIFULLのメインサービスの開発効率の向上とコードベースの健全性の確保をすべく、Clean Architectureを採用しバックエンドを刷新している取り組みについて紹介させていただきます。 なお、Clean Architecture自体の説明および解説は本記事では行いません。 背景：歴史あるバックエンドの刷新 アプローチ：新たなアーキテクチャと共創 採用したアーキテクチャ・技術 Clean Architectureを採用した理由 TypeScriptを採用した理由 LoopBackを採用した理由 Clean Architectureの実践 レイヤー分け：例の図と新BFFアーキテクチャのレイヤーとのマッピング レイヤー内・レイヤー間：独
ViteConf 2025The Build Tool for the Web Vite is a blazing fast frontend build tool powering the next generation of web applications.
The new wave of React state managementUnderstand the core problems state management libraries need to solve. And how the proliferation of modern libraries address them in new ways. IntroductionAs React applications grow in size and complexity, managing shared global state is challenging. The general advice is to only reach for global state management solutions when needed. This post will flesh out
98.css
A design system for building faithful recreations of old UIs. Intro 98.css is a CSS library for building interfaces that look like Windows 98. See more on GitHub. This library relies on the usage of semantic HTML. To make a button, you'll need to use a <button>. Input elements require labels. Icon buttons rely on aria-label. This page will guide you through that process, but accessibility is a pri
フロントエンド開発に役立つ Datadog 活用法 - LegalOn Technologies Engineering Blog
はじめに 本記事では、Datadog の設定方法を解説しながら、どのようにフロントエンド開発に活用できるかを話していきます。Datadog とは SaaS 型で提供されている監視サービスです。システムやアプリケーションの監視ができ、収集したログを分析するのに役立つ機能をたくさん提供しています。 こんにちは、株式会社LegalOn Technologiesで Software Engineer（Frontend）をしている山越 ( @yukishinonomeIT ) です。弊社では2024年4月に『LegalOn Cloud』というプロダクトを提供開始しました。Datadog は既存のプロダクトでも使っていたので、この新しいプロダクトでも活用することになりました。そこで、『LegalOn Cloud』における Datadog の運用を担当することになったので、実際にどのような活用をしている
Alex Bespoyasov Posted on Sep 1, 2021 • Updated on May 12, 2022 • Originally published at bespoyasov.me Not very long ago I gave a talk about the clean architecture on frontend. In this post I'm outlining that talk and expanding it a bit. I'll put links here to all sorts of useful stuff that will come in handy as you read: The Public Talk Slides for the Talk The source code for the application we'
Easily the biggest question we get asked is something like: How is Remix different from Next.js? It appears we have to answer this question! We'd like to address it directly and without drama. If you're a fan of Remix and want to start tweeting smug reactions to this article, we kindly ask that you drop the smugness before hitting the tweet button 🤗. A rising tide lifts all boats. We've been frie
Next.js に対する Kent C. Dodds の批判と、Lee Robinson のアンサーの要約
Next.js に対する Kent C. Dodds の批判と、Lee Robinson のアンサーの要約 はじめに 10 月 26 日に Next.js Conf が開催されましたが、それと前後して Kent C. Dodds (以下 kentcdodds と呼びます) と Lee Robinson (以下 leerob と呼びます) がそれぞれ という記事を公開しました。前者はタイトルの通り、Testing Library の作者であり、Remix の共同創業者の一人でもある開発者兼教育者 kentcdodds が、Next.js を使わない理由について述べたものです。そして後者は、Vercel の VP of Developer Experience である leerob が、主に前者に対する反論を述べたものです。筆者は両方の記事を公開後すぐに面白く読み、そしてどちらにも頷けるところ
どうも。 普段フロントエンド周りの開発をやっている者です🐶 今回は普段自分がやっている情報収集と学習で使ってるサイトや手法を紹介します。 過去にも何度かこの類の話をしているのですが、2020年版という感じです。 誰かの参考になればいいなと思います。 情報収集 まずは情報収集についてです。 自分の場合は、毎日見るものと週に1度見るものがあります。 daily.dev 普段はこのdaily.devのブラウザ拡張機能を入れて、Chromeのトップ画面で情報を見ています。 新しいタブを開くたびに表示されるので、いつも目に入るのがいいところです。 2021/05/26 追記 Chrome拡張だけではなく、Web アプリケーションもリリースされました🎉 PWAにも対応しているので、デスクトップやモバイルでインストールも可能です！ daily.devは簡単に説明するとさまざまなサイトのRSSリーダー
AWS and Docker collaborate to simplify the developer experience | Amazon Web Services
Containers AWS and Docker collaborate to simplify the developer experience Developers can now use Docker Compose and Docker Desktop to deploy applications to Amazon ECS If you were to ask any developer who has worked with containers, you find out they have used or are aware of Docker Desktop and the Docker CLI for building applications on their desktop. They’ve also most likely used Docker Compose
はじめに マイクロサービスの開発では、サービスが増え続けるバックエンドに対して、フロントエンドは接続先が増えるため、開発効率を下げてしまいます。その対策として、さまざまな設計パターンが存在します。 弊社の開発ではGraphQL Gatewayを用いていますが、そこに至るまでや周辺の技術/アーキテクチャを解説します。 マイクロサービスとフロントエンド マイクロサービスを採用する場合、フロントエンド（ウェブアプリケーション、モバイルアプリケーションなど）は複数のサービスとの連携が必要になることが多いです。各マイクロサービスは通常、API（REST、gRPCなど）を提供し、フロントエンドはこれらのAPIを通じてデータの取得や操作を行います。 API Gateway API Gatewayは、フロントエンドとマイクロサービス間の中間に位置するコンポーネントとして機能し、マイクロサービスアーキテクチ
自動テスト速度改善 - 自動テストが品質のボトルネックとならないために - freee Developers Hub
freee人事労務の品質改善を専任で活動している keik です。 freee人事労務ではアプリケーション開発の自動テスト環境として CircleCI を利用しています。すべてのコードの変更は GitHub 上の Pull Request を経由して行われますが、Pull Request のマージ条件の一つとして自動テストをパスすることを求めるようにしています。 つまり、どんな些細な変更であっても、急ぎの変更であっても、リリースするためには基本的には自動テストの結果を待つ必要があります。一方で、コードベースは日々成長しており、それに比例して自動テストの実行時間も長くなっています。 ここに、ゆっくりと、ジレンマが生じはじめます。 品質を高める目的の自動テストだが、実行時間が長いと品質のボトルネックになりうる。 具体的には以下のようなシナリオが考えられます。 些細な改善が億劫になる（自動テスト
モバイルとの相性最強と言われるgRPCをFlutter x NestJSで実装し、Stream通信や認証、複数言語実装に使えるか試す
まとめ 相性バツグンといわれる、モバイル x gRPCは思ったよりずっと簡単に実装可能 複数言語間でもProtocol Buffersの恩恵により型変換を意識することなくスムーズに開発が進められる。 メソッド、引数の型、引数の返り値の型が自動生成されるのでとても良い RESTful APIにおけるheaderを、表現力の高いMetaDataとして利用し、認証認可等にも使えそう Streamをうまく使いこなせば、ユーザー体験をめっちゃ高くできそう。チャットやゲームなどの双方向通信が比較的楽に実装できるかも どんな人向きでない記事？ NestJSの詳しい実装を知りたい方 Bidirectional streaming, Client streamの詳細実装を知りたい方 モバイル向け通信技術の本格的な選択肢、gRPCを実際に試してみたい 現在、私の働いているMinediaで開発しているサービス群
This guide is open source, please go ⭐️ it on GitHub and make suggestions/edits there! https://github.com/FrontendMasters/front-end-handbook-2024 1. Overview of Field of Work This section provides an overview of the field of front-end development/engineering. 1.1 — What is a (Frontend||UI||UX) Developer/Engineer? A front-end developer/engineer uses Web Platform Technologies —namely HTML, CSS, and
Jonathan Amsterdam 22 August 2023 The new log/slog package in Go 1.21 brings structured logging to the standard library. Structured logs use key-value pairs so they can be parsed, filtered, searched, and analyzed quickly and reliably. For servers, logging is an important way for developers to observe the detailed behavior of the system, and often the first place they go to debug it. Logs therefore
GitHub Actionsのローカル実行ツール「act」を使う事でCI/CDコンフィグとローカルでのタスクランナーを1つにする | DevelopersIO
GitHub Actionsのローカル実行ツール「act」を使う事でCI/CDコンフィグとローカルでのタスクランナーを1つにする actというローカル端末でのタスクランナーとしても使える、GitHub Actionsのローカル実行ツールを紹介します。 合わせて私のCI/CDのローカル実行ツールが必要だと思う理由、タスクランナーに対して感じている課題を紹介します。 はじめに おはようございます、加藤です。CI/CDツールとしてGitHub Actionsが2019年11月にリリースされてから一気に広まり、私もファーストチョイスとしてGitHub Actionsを検討・提案する機会が最近増えてきました。 先日、下記のTweetでactというGitHub Actionsのローカル実行ツールがあり、タスクランナーとしても使えるという事を知りとても興味を持ったのでブログにまとめました。 Actってい
なぜSeleniumを選ばなかったのか～AutifyとMagicPodを選びました～ - スタディサプリ Product Team Blog
こんにちは。QA Engineerの@testtattoです。 今回はE2Eテストの自動化にあたって、どういった考えでツール選定を行ったのかを話したいと思います。 対象読者 以下に興味や関心を持つ方を対象読者として想定しています。 E2Eテスト自動化によって課題を解決したいが、どういった技術があるのか分からなくて困っている人 E2Eテストの自動化は実現できているが、継続に課題を抱えている人 テスト自動化なら何でも興味がある人 まえがき 読んでもらう前にいくつかの前提を共有します。 リリースサイクルについて 当社のwebプラットフォームのリリースサイクルは一部のマイクロサービスを除いて基本的には週次です。 決まった曜日で各プロダクトのプルリクエストを取り込んで、リグレッションテストを実施し、リリースブロッカーがなければリリースしています。 流れとしてはこんな感じです。 月 火 水 木 金 特
UIコンポーネントをCSSで実装する時に、何を考えながら実装するのか、どういうことに配慮して実装するのかを紹介します。 CSSの何を使用して配置するのかベストか、レスポンシブの対応方法をはじめ、グラデーションをより美しく実装する方法、clamp()によるフォントサイズの定義、論理プロパティの使用など、CSSの実践的なテクニックについても解説されています。 Inside the mind of a frontend developer: Hero section by Ahmad Shadeed 下記は各ポイントを意訳したものです。 ※当ブログでの翻訳記事は、元サイト様にライセンスを得て翻訳しています。 はじめに 実装するヒーローコンポーネント HTMLの構造を考える グラデーションの背景 疑似要素 スマホでの表示を考える ヒーローの最小高さ 配置のためのCSS Gridとその際の課題 コン
れこです。この記事はNode.js Advent Calendar 2020の 12 日目の記事です。今回は年の瀬ということで酒の肴になりそうな記事を書きたいと思います。 本記事では 2020 年に GitHub のトレンドに上がったリポジトリをいくつかの切り口で集計して、独断と偏見で感想を付け加えます。 この記事を酒の肴に 2020 年の JS/TS について懐かしんでもらえたら幸いです。 集計方法 GitHub のトレンドは過去の履歴が残っていないので非公式に集計されたデータを利用しています。 集計期間は 2020/01/01 から 2020/12/05 までの 341 日間 対象言語はJavaScriptとTypeScriptのみ トレンドの過去データのソースはxiaobaiha/github-trending-historyを参照 日ごとにまとめた markdown になっており、
変更に強いコンポーネント設計の方針と規約（Webフロントエンド） - Sansan Tech Blog
技術本部 データ戦略部 Newsグループの木田です。 最近、初めて自作キーボードに挑戦しました。ちょうど２枚目のモニターも買ったので、モニター２台と自作キーボードで快適に記事を書いています。 予めお断りしておきますが、この記事は元々、社内向けに設計方針や規約・ツールなどについて共有するために書いたものでした。最近、他チームの参考資料として役立ったこともあり、社外向けに手を加えて公開する運びとなりました。 はじめに 機構改革・人事異動情報(β) とは ⚛️ Atomic Design に従う ⚛️ Atomic Design とは ⚛️ Molecules と Organisms の分け方 ⚛️ コンポーネントの設計方法 📝 規約 📝 Component と Container を分ける 📝 データの繋ぎ込みは Organisms 以上で行う 💡 Tips 💡 Atoms はタグ本
AWS Amplify Studio – Figma to Fullstack React App With Minimal Programming | Amazon Web Services
Front-End Web & Mobile AWS Amplify Studio – Figma to Fullstack React App With Minimal Programming AWS Amplify announces AWS Amplify Studio, a visual development environment that offers frontend developers new features (public preview) to accelerate UI development with minimal coding, while integrating Amplify’s powerful backend configuration and management capabilities. Amplify Studio automaticall
サイボウズが行うフロントエンドの品質保証 / Frontend Quality Assurance at Cybozu
フロントエンドエキスパートを中心に開発支援チームによるサイボウズのフロントエンドの品質保証に対する活動を発表しました。 質問・感想など: https://twitter.com/shisama_ 発表したイベント: 【オンライン】SaaSを支える品質担保術/レガシーコード、アーキテクチャ…
ROUTE06 でソフトウェアエンジニアをしている @MH4GF です。 ROUTE06 ではエンタープライズ向けビジネスプラットフォーム「Plain」を開発しています。この記事では 2023 年 8 月に Plain クラウド EDI の Web フロントエンドで採用している技術について、その選定理由をまとめました。 現代の Web フロントエンド技術は領域ごとに選択肢が多く、プロダクトに最適な技術選定をする上で検討事項が多いと感じます。この記事がフロントエンド技術選定において参考になれば幸いです。 前提 プロダクトの特徴 技術選定に影響するプロダクトの特徴を箇条書きでまとめます。 エンタープライズ向け SaaS 現在開発中のプロダクトは商取引におけるクラウド EDI のドメインにフォーカス Plain が解決する課題は、元々フルスクラッチで開発すると 1 年かかるプロダクトの開発期間を
2022年、フロントエンドで注目されているJavaScriptやCSSのフレームワーク・ライブラリ・ツール・エディタ・機能などのまとめ
2022年、フロントエンドで注目されているJavaScriptやCSSのフレームワーク・ライブラリ・ツール・エディタ・機能などを紹介します。 今使用しているものはどんな感じか、これから勉強するならどれがよいか、知らない便利なツールや機能はないかなど、フロントエンドの制作で参考になる資料です。 State of frontend 2022 State of frontend 2022は、125か国のフロントエンドデベロッパーにアンケートをおこない、注目されているフレームワーク・ライブラリ・ツール・機能などをまとめたものです。 ここ2年のコロナ禍により、勤務形態が大きく変化しました。データは2022年と2020年の状態も比較できます。 あなたの勤務形態は？ 56%の人がリモートワークをしており、オフィスで働いている人はわずか5%でした。2020年の調査ではこのアンケートをおこなっていませんが、
buildkit/frontend/dockerfile/docs/syntax.md at dockerfile/1.4.3 · moby/buildkit
BuildKit supports loading frontends dynamically from container images. Images for Dockerfile frontends are available at docker/dockerfile repository. To use the external frontend, the first line of your Dockerfile needs to be # syntax=docker/dockerfile:1.3 pointing to the specific image you want to use. BuildKit also ships with Dockerfile frontend builtin but it is recommended to use an external i
こんにちは！スマートキャンプでWebアプリケーションエンジニアとして働いている中川です。 さて、唐突ですがみなさんは別の開発チームに異動した経験はありますか？ いくつかプロダクトを抱えていたり受託開発をしている会社では割とよくある現象なので、少なくない数の方が経験されたことがあるかなと思います。 と、この書き出しで察しの良い方はお気づきかと思いますが、かくいう自分もこの度チームを異動して、6月からBOXIL開発チームで働いています。 今回の記事では、自分が新しいチームに参加することになったときにどういうキャッチアップを行っているかについてご紹介していこうと思います！ また、今回の記事で前提としているのは異動のシーンですが、転職でも通ずるような内容は多いと思っています。 キャッチアップする目的を考える なにをキャッチアップしていくか考える プロダクトに慣れる ビジネスモデルを知る 使われてい
「自分が現場に関与しなくても開発組織が円滑に回る状態」が理想。花谷拓磨がフロントエンドエンジニアとして実現したいこと
LINE株式会社は、2023年10月1日にLINEヤフー株式会社になりました。LINEヤフー株式会社の新しいブログはこちらです。 LINEヤフー Tech Blog LINEで働くエンジニアにいろいろと話を聞く「LINE Engineer Insights」。LINEの技術組織で働く個々人に、何を重視して技術者としてのキャリアを歩んでいるのか、今LINEで何に取り組んでいるのか、今後実現したいことなどを聞いていきます。 今回登場するのは、フロントエンド開発センターに所属する、フロントエンド領域のスペシャリストでありエンジニアリングマネージャーを担う花谷拓磨です。花谷がLINEに入った理由や働くうえで大切にしていること、OSS活動にかける思いなどをインタビューし支える思想や行動指針を聞きました。 事業や組織の核心に迫る仕事に携わりたくて、LINEへ入社 ――花谷さんがLINEに入った理由につ
Announcing VoidZero - Next Generation Toolchain for JavaScript | VoidZero
October 1, 2024Announcing VoidZero - Next Generation Toolchain for JavaScript TL;DR: I have founded VoidZero Inc., a company dedicated to building an open-source, high-performance, and unified development toolchain for the JavaScript ecosystem. We have raised $4.6 million in seed funding, led by Accel. Fifteen years ago, when I started building apps with JavaScript, it was mostly a browser-based s
はじめに この記事はTSKaigi Advent Calendar 2024の記事です。(TSKaigiの運営メンバーとして最初の記事になりそうです。) みなさん、TypeScript書いてますか？最近、フロントエンドもバックエンドも（加えてインフラも）TypeScriptで統一する、Full-Stack TypeScriptを採用する事例が増えてきました。 Full-Stack TypeScriptの由来やメリットはこちらの記事から フロントもバックもTypeScriptだし、どうせならMonorepoで管理しようということで、TypeScript専用のMonorepo管理ツールであるTurborepoを導入し、T3-Turboというアーキテクチャを導入することになりました。 T3-Turboというアーキテクチャは、以前導入を考えた際に記事にしているので、こちらをご参照ください。 またT
こんにちは。LINEフィナンシャル開発センター フロントエンドエンジニアの峯です。 先日新卒としてLINE証券プロジェクトに配属となり、最初のタスクとしてRecoilによる状態管理の導入に取り組みました。 その際、なぜRecoilにしたのか、また本番開発にRecoilを使うにあたって設計に気をつけたことなどを本記事でご紹介しようと思います。 技術選定 いままでの状態と課題 LINE証券フロントエンドではReact+Typescriptによる開発を採用しており、いままでのグローバルな状態管理にはUnstated を用いていました。 Unstatedでは Container classを状態の単位とし、その内部の stateを setState によって更新します。状態を使用したいコンポーネント側では、<Subscribe> コンポーネントによって情報を読み出すことができます。 一方ご存知の通
本記事では2024-08-06にリリースされた Firefox 129をもって主要なブラウザすべてで利用可能になったアットルール @start-style について紹介します。 トランジション開始時のスタイルを指定できる @starting-style @starting-style はトランジションされる要素に対して、CSS プロパティの開始値を定義するためのプロパティです。 従来の CSS 記法では display: none; が指定されている要素にトランジションを使用した場合、トランジションが発生しませんでした。 そこで、@starting-style ルールを用いてトランジション開始時のスタイルをしているすることで元の要素に display: none; が指定されていたとしても正しくトランジションを発火させることができるようになります。 .open-content { disp
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
テストアーキテクチャの実践 - freee Developers Hub
Next.jsを4年間使用してたどりついた、エンタープライズアプリケーションのフロントエンド開発・構築手法 | POSTD
Proxy環境下で使うKubernetes | IIJ Engineers Blog
polyfill を深堀りする - mizdra's blog
Next.js のページ遷移を全力で止める
Vite | 次世代フロントエンドツール
The new wave of React state management
Clean Architecture on Frontend
Remix vs Next.js
普段やってる情報収集や学習について(フロントエンド寄り)
GraphQL Gatewayはフロントエンド開発を幸せにする
The Front End Developer/Engineer Handbook 2024
Structured Logging with slog - The Go Programming Language
CSSで実装する時、フロントエンドのデベロッパーは何を考え、どういうことに配慮して実装するのか
GitHubのトレンドで振り返る2020年のJavaScript
Plainのフロントエンドにおける技術選定(2023年8月版) - ROUTE06 Tech Blog
異動先の開発チームに高速で適応する技術 - SMARTCAMP Engineer Blog
Full-Stack TypeScriptの最終到達点、T3-Turboで新規開発した話
【LINE証券 FrontEnd】Recoilを使って安全快適な状態管理を手に入れた話
すべての主要ブラウザで利用可能になったアットルール@starting-styleとは