Rolldown + oxcによるビルド＆型生成の高速化など: Cybozu Frontend Weekly (2024-09-17号)
Rolldown + oxcによるビルド＆型生成の高速化など: Cybozu Frontend Weekly (2024-09-17号) こんにちは！サイボウズ株式会社フロントエンドエンジニアのsaku (@sakupi01)です。 はじめに サイボウズ社内では毎週火曜日にFrontend Weeklyと題し「一週間の間にあったフロントエンドニュースを共有する会」を開催しています。 今回は、2024/09/17のFrontend Weeklyで取り上げた記事や話題を紹介します。 取り上げた記事・話題 2024 WebKit Contributors Meeting WebKit Contributors Meeting 2024 の情報が公開されていました。 WebKit Contributor であれば参加できるようです。クパチーノで行われ、オンライン参加も可能とのことです。 Rolld
Cloudflareの大幅アップデートなど: Cybozu Frontend Weekly (2024-10-01号)
こんにちは！サイボウズ株式会社フロントエンドエンジニアのdaiki（@k1tikurisu）です。 はじめに サイボウズ社内では毎週火曜日にFrontend Weeklyと題し「一週間の間にあったフロントエンドニュースを共有する会」を開催しています。 今回は、2024/10/01のFrontend Weeklyで取り上げた記事や話題を紹介します。 取り上げた記事・話題 WebKit Features in Safari 18.0 Safari 18.0がリリースされました。一部機能を抜粋します。 新機能 Distraction Control ウェブブラウジング中の邪魔な要素を非表示にできる iPhone Mirroring and remote inspection MacからiPhoneをミラーリングし、リモートiOS上のWebサイトのテストやデバッグができる CSS View Tra
CSS新機能のWorking Draft公開など: Cybozu Frontend Weekly (2024-10-08号)
CSS新機能のWorking Draft公開など: Cybozu Frontend Weekly (2024-10-08号) こんにちは！サイボウズ株式会社フロントエンドエンジニアのsaku (@sakupi01)です。 はじめに サイボウズ社内では毎週火曜日にFrontend Weeklyと題し「一週間の間にあったフロントエンドニュースを共有する会」を開催しています。 今回は、2024/10/8のFrontend Weeklyで取り上げた記事や話題を紹介します。 取り上げた記事・話題 CSS Values and Units Module Level 5 CSS Values and Units Module Level 5のWorking Draftリリースの紹介記事です。 Level 5には多くの機能が追加・拡張されており、Level4との差分仕様としてまとめられています。 attr
なんとなくから脱却する GitHub Actionsグッドプラクティス11選 | gihyo.jp
本記事のテーマはGitHub Actionsです。個人的に「もっと早く知りたかった！」と考えているグッドプラクティスを、厳選してお届けします。想定読者は次のとおりです。 普段GitHub Actionsを雰囲気で運用している人 GitHub Actionsをコピペや生成AIで乗り切っている人 他者が書いたコードの意味をより深く理解したい人 本記事でGitHub Actionsの基本は説明しません。グッドプラクティスを含めて基礎から学びたい人は、拙著『GitHub CI/CD実践ガイド』を読んでみてください。GitHub Actionsの基本構文から運用のコツまで、網羅的に解説しています。さて書籍紹介はこれぐらいにして、さっそく本題へ進みます。 GitHub Actionsの設計指針 GitHub ActionsはCI/CDや各種自動化で役立つ、汎用的なワークフローエンジンです。一般的に長期
Hotwire for Frontend devs
HotwireとNext.jsをちゃんと見て比較しよう#本サイトでは、React/Next.jsに詳しいフロントエンドエンジニアを対象に、実際に動くコードと実際に動くデモを体感しながら HotwireとReact/Next.jsを比較します。 各技術でのUIの作り方を伝えるだけでなく、さまざまな状況での動きを確認していただくために、仕組みや限界も紹介します。そのため、かなり細部の議論もしています。 HotwireでもNext.jsと同等か、それ以上のUI/UXが実現できます。「Hotwireは簡単だけど、React/Next.jsの方が優れたUI/UXが作れる」というのは、かなり特殊なものでない限りは誤解ですHotwireはバックエンド非依存です。Rails, Laravel, Django, Go, Nodeでも関係なく動きます。実際、本サイトのHotwireコードはNext.js AP
React Nativeがアーキテクチャを刷新 — React 18の機能を全て備え、大幅なパフォーマンスアップを実現
10月24日、React Nativeチームは、バージョン0.76をリリースした。 本バージョンではアーキテクチャが刷新されており、React Nativeの今後にとって重要なアップデートとなっている。 新しいアーキテクチャの主な改善点 今回のアップデートでは、以下の4つの重要な要素が導入されている。 新しいネイティブモジュールシステム JavaScriptとネイティブ層が直接通信できる「JSI（JavaScript Interface）」を利用することで、ブリッジを介さずに同期的な関数呼び出しが可能となった。この変更により、ネイティブモジュールとのやり取りがより効率的かつ高速になった。 const value = nativeModule.getValue(); nativeModule.doSomething(value); 旧アーキテクチャでは、ネイティブ関数の呼び出しに非同期のコー
Next.js 15 和訳
雑に翻訳しました。 意訳がめちゃくちゃ含まれているので注意です。 Next.js 15が正式に安定版としてリリースされました。 このリリースはRC1とRC2のアップデートをベースにしています。 安定性に重点を置きながら、気に入っていただけるようなエキサイティングなアップデートを追加しました。 今すぐNext.js 15をお試しください。 # 新しい自動アップグレードCLIを使用する npx @next/codemod@canary upgrade latest # もしくは手動でアップグレードする npm install next@latest react@rc react-dom@rc また、今週木曜日（10月24日）のNext.js Confでは、次の新機能についてもご紹介します。 Next.js 15の新機能は以下の通りです。 @next/codemod CLI: Next.jsとR
Next.js@15 の AppRouter で Client Component のみの SSR を行う
サンプルリポジトリ 実行確認 ServerComponents に疲れていませんか？ Next.js のバージョン 15 のリリースを迎えた昨今 AppRouter を中心に据えられるようになり、SSR を行うには ServerComponents が避けて通れません。しかし Pages Router を使っていた頃と比べると、大きく使い勝手が変わってしまったため、この変更に対応する対処に疲れてはいないでしょうか？ということで、余計なことを考えずに簡単に SSR を行う方法を紹介します。 作るのは ClientComponent のみで OK 非同期データの取得に ServerComponents の構造を必要としないため、全てを問答無用で Client Component にして問題ありません。 作り方 React 標準機能で SSR させる next-ssr パッケージを使用します。素
【Next.js 15】cache実装が大幅改良される話
はじめに 今、Next.js 15がホットな話題ですが、そのNext.js 15で導入された、use cahceにより、これまでのNext.jsのcache戦略が大きく改良されることになりました。 また、よりシンプルかつ柔軟なcache戦略を取り入れやすくなり、大幅に開発体験が改良されることになるであろうため、use cacheについて以下の記事を参考に解説しようと思います。 Next.js 14までの課題 1. fetch()について これまでNext.jsのfetch()といえば、デフォルトでcacheされるものでした。 しかしながら、これはfetch()を使用しない場合を、十分考慮したものではありませんでした。 そのため、ローカルデータベースアクセスに対する制御は十分に提供されていないといった課題がありました。 2. fetch()以外を使用する場合、エスケープハッチが必要だった エ
TypeScript の Type Branding をより便利に活用する方法のまとめ
概要 TypeScript で用いられることのある Type branding というハックと既存のいくつかのライブラリでのその実装例を説明し、次に、より安全かつ便利に Type branding を使うためのユーティリティの実装や ESLint 設定も紹介します。 最後に Type branding の活用例として、数値型を number より細かく使い分けられるように Branded Type を定義する実装例を載せています。 Branded Type のよくある実装に、筆者が最近思いついたちょっとした工夫を入れることで数値型の Branded Type を上手く実装できたので紹介してみました。 Type branding とは Structural Typing を採用している TypeScript では、例えば複数の異なる ID 文字列の型 （UserId, ProjectId,
Next.js 15 のリリースなど: Cybozu Frontend Weekly (2024-10-22号)
はじめまして！ サイボウズ株式会社 フロントエンドエンジニア（内定者バイト）の mehm8128 (@mehm8128) です。 はじめに サイボウズ社内では毎週火曜日に Frontend Weekly と題し「一週間の間にあったフロントエンドニュースを共有する会」を開催しています。 今回は、2024/10/22 の Frontend Weekly で取り上げた記事や話題を紹介します。 取り上げた記事・話題 Announcing Deno 2 Deno v2.0 がリリースされました。 v2.0 には次の内容が含まれます。 Node.js および npm との後方互換性 package.jsonとnode_modulesをネイティブでサポート Next.js、Astro、Remix、SvelteKit など多くのフレームワークをサポート deno fmtで HTML、CSS、YAML をフ
サイロ化した金融システムを、packwerk を利用して無事故でリファクタリングした話
私たちが提供している金融系のサービスでは、既存動作を最大限に担保しながら品質を向上させることが強く求められます。サービス開始以来10年以上運用されているRailsアプリケーションはモノリシックな構造となっており、サイロ化による弊害が顕在化していました。例えば、複雑なロジックがアプリケーションの各所に散在…
Rails: モジュール化強制ツール"Packwerk"の導入を振り返る（翻訳）｜TechRacho by BPS株式会社
概要 原著者Chris Salzbergさんの許諾を得て翻訳・公開いたします。 英語記事: A Packwerk Retrospective | Rails at Scale 原文公開日: 2024/01/26 原著者: Gannon McGibbon、Chris Salzberg 日本語タイトルは内容に即したものにしました。また、一部のパラグラフを分割しています。 CC BY-NC-SA 4.0 Deed | 表示 - 非営利 - 継承 4.0 国際 | Creative Commons Rails: モジュール化強制ツールPackwerkの導入を振り返る（翻訳） 2020年、ShopifyのチームはPackwerkという名前のRuby gemをリリースしました（関連記事）。Packwerkは、Railsアプリケーション内で境界を強制的に定めてモジュール化するツールです。Packwerk
Kaigi on Rails 2024で Sidekiq vs Solid Queueというタイトルで発表した - おもしろwebサービス開発日記
表題の通り、発表してきました。 Sidekiq vs Solid Queue | Kaigi on Rails 2024 スライドはこちら。 発表に至るまでの道のり イベントの懇親会などでエンジニアの人と話しているときに「最近気になっているgemあります？」のような質問に「Solid Queueですかねえ」と返すと「なんですかそれ？」と聞かれたりする イベントの懇親会などでSidekiqを使っている会社さんの中の人にProやEnterpriseつかってます？と聞くと「なんですかそれ？」と聞かれたりする 新しいRailsで標準になったが、既存のRailsアプリケーションには影響がないもの(例: importmaps)に対して「Railsアップグレードするならこれ対応しないといけないですか？」と聞かれたりする SidekiqとSolid Queueをお題にして話せばこの手の疑問を一気に解決でき
Next.jsと比較しながらHotwireを理解するサイト: "Hotwire for Frontend Developers"
ここ３ヶ月間ほど、"Hotwire for Frontend Developers"「フロントエンドエンジニアのためのHotwire入門」というウェブサイトを作っていました。（ベータ版として公開していました） HotwireとNext.jsをちゃんと見てから比較してもらいたいというのが最大の目的で、同じUIをHotwireのとNext.jsで作成し、デモを動かしたり、コードを見たりしながら比較してもらおうというのが主旨です。同じUIをNext.jsのPages RouterとApp Routerで作っているものもありますので、この比較もできます。 結構コンテンツが多いので、Zennではこれから少しずつ内容も紹介していきたいと思います。 まずはご覧ください！ "Hotwire for Frontend Developers"
RE: 光を超えるためのフロントエンドアーキテクチャ
Previous slideNext slideToggle fullscreenOpen presenter view RE: 光を超えるためのフロントエンドアーキテクチャ @mizchi Hack@DELTA 「わたし史上、最高のチューニング」 2024/10/29 About https://x.com/mizchi Node.js とフロントエンドの専門家 100万円*達成率で御社のフロントエンドの高速化をやります 最近やったチューニング ジャイアントパンダに注意 - Next.js のビルド改善 CSS最適化設定のミスで、ファイル変更のたびに **/*.{ts,tsx} を全探索 Next.js のトレーシングファイルから発見・修正 GraphQL BatchでクライアントN+1を無理矢理倒す 無限スクロール時で動的処理でクライアントN+1 クライアントバッチを導入してリクエスト
JavaScript Best Practices | The WebStorm Blog
JavaScript is undoubtedly the most used programming language in the world and is hugely influential on one of the largest technologies we have all come to rely on – the internet. With this power comes great responsibility, and the JavaScript ecosystem has been rapidly evolving, making it incredibly hard to keep up with the latest JavaScript best practices. In this blog post, we will cover several
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
Recap: Next.js Conf 2024 - Vercel
Honoの来た道とこれから
フロントエンドからバックエンドまで一貫してSentryを活用
