シェア
この記事は「TSKaigiサブイベント #1 フロントエンド」にて登壇した内容の文字起こしです 本記事で紹介しているOSSはこちら👇️ 登壇者 TypeScriptでバックエンドのテストを書くときの課題早速なんですが、みなさんテストを書いてますでしょうか？ 昨今では、TypeScriptでバックエンドを書けるのが普通になってきました。バックエンドで利用できるORMやフレームワークも充実してきています。 バックエンドはフロントエンドに比べてデータベースを扱ったり、重要
こんにちは。フロントエンドエンジニアのiemongです。 noteで開発しているmonorepo環境のLinterをESLintからBiomeへほぼ移行しました。それについて共有します。 移行のモチベーションnoteではNuxtからNext.jsへのリプレイスを進めている最中で、monorepo環境で6個のアプリと22個のpackageがあります。TurborepoのRemote Cachingを使うなどしてタスクの実行速度の改善は既にやってたのですが、Componentの
開発チームの沼田です。 Next.jsを用いて、note内に簡単にページが作れるCMS『サイト作成機能』をリリースしました。以下のように、採用や広報に向けたページを作ることができます。 noteではNext.jsへ段階的に置き換えてるフェーズで、エディタや設定画面などはすでにNext.jsに移行しています。今回はApp Routerを使ったページとしては初機能リリースになりました。 App Routerを使用した開発のTipsや苦労について書いていきたいと思います。
noteの記事の画像拡大時のアップデートを実施しました。このアップデートにより、クリエイターに高品質な画像体験を提供できるようになりました。 この記事では、画質を向上させるために考慮した点をまとめていきたいと思います。画質向上は数値を上げるだけではなく、慎重に検討する必要があるのです。 主な改善点画像拡大時の画質を次のように改善しました。 圧縮品質を85から90に 最大解像度を2000×2000pxから4000×4000pxに 品質を85にしていたのは、Google
note のフロントエンドチームでは、これまで複数のリポジトリで管理していたアプリケーションと社内共通パッケージを単一のモノレポに統合し、開発効率の向上と品質の改善を目指しました。モノレポを採用することで、コードの共有や再利用が容易になり、プロジェクト間の連携が強化されます。 モノレポへの移行これまで note のフロントエンド開発では、複数のアプリケーションと社内パッケージをそれぞれ独立したリポジトリで管理していました。しかし、この方式では、リポジトリ間の依存関係の管理が
主な変更点React 19 RCのサポート キャッシュの動作変更 Partial Prerendering next/after create-next-appのアップデート 外部パッケージのバンドル React 19 RCのサポートActionsが使えるようになった Server Actionsだけじゃなく、ClientでもActionsも使えるようになる。 React Compilerの実験的サポート babel-plugin-react-compile
noteのサーバサイドとフロントエンドのリアーキテクチャについて サーバサイドはPackwerkを利用してモジュラモノリス化 フロントエンドはNext.jsによるリアーキテクチャ それぞれの実施理由や進捗具合 ▼Podcastをもっと聴く ▼番組に感想を送る ▼エンジニアの記事をもっと読みたい方はこちら ▼noteを一緒に作りませんか？
shadcn/uiはReact用のUIコンポーネントコレクション(ライブラリではないらしい)で、Radix UIを基に構築されています。また、shadcn/uiが提供するComponentはTailwindのutilsクラスを使って拡張することができます。 基本的な特徴コンポーネント 2024年1月時点で、40個以上のコンポーネントが提供されています。Accordion、Skeleton、Tableなどがあるようです。(ただし、サイトに載ってるChartとかはまだ無い。今は
この記事はnote株式会社 Advent Calendar 2023の6日目の記事です。 ぼくはUXエンジニアとして、デザインシステム構築やアクセシビリティ向上などなど、組織横断的なUX課題を頑張ろうということで活動しています🐈⬛ 最近（2020~）のCSSを知りたい最近（と言うか昨今というか20年代）CSSのキャッチアップをしっかりできてないなーということで、断片的に見かけた情報や、そういえばあれどうだったけ..というのを集めつつ、フロントエンドチームの勉強会に持ち込
前回はPlaywrightでスクリーンショットを撮ってアーカイブする話をしました。 今回はPlaywrightのスクショ撮影を、Storybookに登録したStoryにおこなって、ビジュアルリグレッションテスト（VRT）をPull Request（PR）に対して実行して、コメントとして変更を通知する話です。 はじめに新しい機能の追加や既存のコードのリファクタリングなど、開発の過程でUIに予期しない副作用が発生することがあります。VRTはそういった副作用のうち見た目上の変化
前回はFigmaでDesign Tokenを抽出する話を書きましたが、 今回は、UXエンジニアとしてプロダクトの課題解決に取り組んだ話です。 マスターデータがないnoteのデザインチームではFigmaでデザインデータを管理しています。デザイナーはそれぞれの施策をひとつのFigmaプロジェクトで作業して、４半期ごとに新しく作り変えています。施策ごとにそれぞれがページを作っていくので、手が入ったページやセクションのみがそのFigmaファイルに残されている状態になっています。
AstroのおさらいV3からの変更点この記事を素直に紹介していく。 View Transition APIサポート View Transition API is 何？って方はこちらを見てください。 View Transition APIはChromeのみサポートしてる。MPAのページ遷移はExperimental Astro V3ではそれをサポート。 MPA遷移でも使える。 View Transition APIをサポートしてないブラウザでも動く。 headにV
これは2023/7/3の社内勉強会の資料です。 Zagとはフレームワークに依存せずに、複雑でインタラクティブでアクセシブルなUI Componentを構築できるライブラリで、Chakra UIから出ています。 現時点(2023年7月)ではbeta版です。 Zagの推しポイントアダプターを使って、React, Vue, SolidなどのJSフレームワークを跨いで使える点や、必要なComponentのみをnpm パッケージからimportできる点などから、今使ってる環境で小さ
こんにちは noteのフロントエンドエンジニアのiemongです。 最近はメンバーシップの開発等をやっています。 同僚の天才から、なんか技術記事書いて🙏とお願いされたので、最近気になってるAstroってフレームワークについて書こうと思います。 実際に触ってみて、簡単にページを作るところまでやってみました。 Astroとはとあるように、オールインワンなWebフレームワークです。公式によると、Javascriptで開発できる MPAフレームワークという位置付けらしいですが、
