const colors = ["赤","青"] as const; type Colors = typeof colors[number]; //"赤" | "青" typeof colors[number]･･･ってよォ～～～～～ typeofはわかる。スゲーよくわかる TypeScritの世界では、typeofで変数から型を作れるんだよなァ だがnumberってのはどういう事だああ～～～～っ!? 配列にnumberを渡せるかっつーのよ───────ッ!! ナメやがってこの型ァ!! 超イラつくぜぇ～～～～ッ!! 解説 これはよォ 「Lookup Type」ってやつらしいぜぇ たとえばよォ 👇みたいに書くとPerson型からプロパティの型を取り出せるよなァ～?? type Person = { name: string, age: number } type name = Person
Next.js 14 リリースなど: Cybozu Frontend Weekly (2023-10-31号)
はじめに こんにちは！サイボウズ株式会社フロントエンドエキスパートチームの BaHo です。 サイボウズでは毎週火曜日に Frontend Weekly という「1 週間の間にあったフロントエンドニュースを共有する会」を社内で開催しています。 今回は、2023/11/31 の Frontend Weekly で取り上げた記事や話題を紹介します。 取り上げた記事・話題 Rspress, the Rspack-based static site generator Rspack ベースの Static Site Generator である Rspress の v1 がリリースされました。 i18n 対応やコンポーネントのプレビューなど、様々な機能が盛り込まれているようです。 Faster TypeScript builds with --isolatedDeclarations TypeScr
サーバ不要でバックエンドAPIのモックを実現する「Mock Service Worker 2.0」正式リリース。Fetch API、ストリームAPI対応など新機能
サーバ不要でバックエンドAPIのモックを実現する「Mock Service Worker 2.0」正式リリース。Fetch API、ストリームAPI対応など新機能 Webアプリケーションのクライアントを開発する際に、本来ならばサーバ上で稼働するWebアプリケーションのバックエンドのAPIを呼び出してデータを受け取って表示するといった動作を作り込みたいけれども、まだバックエンドのAPIも開発中であったり、何らかの理由でバックエンドを稼働させる環境を用意できなかったりすることは、しばしば起こりえます。 そうしたときにサーバを立てることなく、バックエンドのAPIをモックとして簡単に設定し提供してくれるソフトウェア「Mock Service Worker」の最新版「Mock Service Worker 2.0」が正式にリリースされました。 Announcing MSW 2.0! Migratio
Intro こういうタイトルを付けるのはあまり好きではないが、あえてこのようにした。 「ブラウザでキャッシュがヒットしない」 以下は、 Web における Caching の FAQ だ。 サーバで Cache-Control を付与したのにキャッシュがヒットしない サーバで ETag を付与したのに If-None-Match が送られない サーバで Last-Modified-Since を付与したのに If-Modified-Since が送られない 先日も、筆者が書いた MDN の Cache セクションで「記述が間違っているのでは?」と同様の質問を受けた。 Issue about the Age response header and the term "Reload" · Issue #29294 · mdn/content https://github.com/mdn/cont
その例外、いつキャッチするの？
2023年11月24日紙版発売 株式会社ICS 池田泰延，西原翼，松本ゆき 著 A5判／344ページ 定価2,860円（本体2,600円＋税10%） ISBN 978-4-297-13871-4 Gihyo Direct Amazon 楽天ブックス honto ヨドバシ.com 電子版 Amazon Kindle この本の概要 フロントエンド開発の範囲は広く，習得すべき技術は多種多様です。 HTML・CSS・JavaScriptはフロントエンドエンジニアにとって共通言語ではあるものの，Webサイトを制作するのか，Webアプリケーションを開発するのか，その違いによって採用すべき技術は全く異なります。それは，Webの多様性に対して技術的な正解がひとつではないことを示しています。 本書はフロントエンドの技術を俯瞰し，「エンジニアが共通して知っておくべき技術はなにか」，「（多種多様なエンジニアにと
こんにちは。今回は、フロントエンドが超絶苦手な私が、スッキリ見やすい（と自分では思っている）プロフィールサイト作成サービスを作ったので、その過程や使ったものを紹介していきます。 作ったサービス 誰でも簡単に、個人のプロフィールサイトを作成できるprofioというサービスを作りました。 私の自己紹介ページはこちらです。 言語、使っているサービスなど フロントエンド: Next13（App Router) バックエンド: Go 1.20 画像ストレージ: cloudflare R2 BEホスティング: render FEホスティング: vercel DB: Postgres: render ドメイン: お名前.com DNS: cloudflare 認証: supabase 苦戦したこと やはりフロントエンドです。 元々バックエンドエンジニアなので、バックエンドのAPIを構築することはそれほど
2023/10/31 @ Barフロントえんどう で発表した「リアーキテクトと開発生産性について」です。
2023/10/28 Vue Fes Tokyo Vue.js プロジェクト設計のベストプラクティスを求めて
Kubernetesでアプリの安定稼働と高頻度のアップデートを両立するためのプラクティス / Best Practices for Applications on Kubernetes�to Achieve Both Frequent Updates and Stability
MSW 2.0やYarn 4.0のリリースなど : Cybozu Frontend Weekly (2023-10-24号)
MSW 2.0やYarn 4.0のリリースなど : Cybozu Frontend Weekly (2023-10-24号) はじめに こんにちは！サイボウズ株式会社フロントエンドエキスパートチームの@nakajmg です。 サイボウズでは毎週火曜日にFrontend Weeklyという「一週間の間にあったフロントエンドニュースを共有する会」を社内で開催しています。 今回は2023年10月24日のFrontend Weeklyで取り上げた記事や話題を紹介します。 Introduction to web sustainability | MDN Blog webの持続可能性についての概要。フォントの最適化や画像サイズの縮小、JavaScriptの使用量を減らすことなどが挙げられています。 ガイドラインの作成も進められています。 How we optimized package imports
WebAssemblyアプリ開発で最も使われている言語は3年連続で「Rust」、Webアプリ開発が最多、欲しい機能はスレッド。The State of WebAssembly 2023
回答者はWebAssembly関連の技術者303人。 最も使われているのはRust、2位のJavaScriptの使われ方とは？ WebAssemblyのアプリケーションのコードを記述するプログラミング言語として何を使っているかを尋ねた質問への回答では、3年連続でRustがトップ。しかも利用率は上昇中です。 2位に入ったのがJavaScriptです。WebAssemblyバイナリはソースコードをコンパイルしてバイナリに変換することで生成されますが、JavaScriptはWebAssemblyへのコンパイルに対応していません。 WebAssemblyアプリケーションのコードとしてJavaScriptを使う方法は、WebAssemblyで構築されたJavaScriptエンジンをWebAssemblyランタイム上で実行し、そこでJavaScriptコードを走らせることです。 この方法ではWebAs
フロントエンドのビルドツールが色々ありすぎて、何がどうなっているのかがわかりづらいため、 各ツールができること、特徴 ツール間がどのように依存しあっているか を一気に調べて整理した。(情報は2023/10時点) 概要 ツールの依存関係整理 上層: dev server付きのバンドラ/ビルドツール。アプリ開発者が直接configなどを書いて取り扱うのはここが多いと思われる。(Next.jsに関しては、ビルド機能に着目した場合) 下層: やや基盤的なdev serverなしのツール群。 矢印は、明示的な依存関係を表す。実際には、明示的な依存関係がなくても、下層のツール群は上層のバンドラ(やRollup)に対してプラグインを提供していることが多い。 各ツールのできること整理 ツールごとに、大まかな機能区分で、できることとできないことをまとめた。 各機能区分の定義は次セクションを参照。 ツールごと
フロントエンド開発のためのテスト入門書評
はじめにlink 2023/04/24に発売された「フロントエンド開発のためのテスト入門」を読了したので、読みながらとったメモをもとに感想や自分の考えと違ったところなどをまとめる。 Amazon 全体的に非常に参考になる内容が多いが、特に後半にいくにつれて加速度的に参考になる内容が増え非常に良著であると感じた。 実践Node.js入門でもテストはある程度量をとって記述しているが、テストそのものがメインではないため情報や考え方として落ちている内容の多くがこの本で補完されている。自著を読んだ人には同時に本書もおすすめしていこうと思っている。 Amazon 自分はフロントエンドのテストはバックエンドに比べて優先度が低くなる傾向にある。 これは自分が扱うサービスがtoB系が多く、表示崩れなどがサービス継続上致命的になりにくいため、気づいたベースで最速で直せる環境があればよいと考えているため。 また
Webアプリ版Photoshopを実現させた最新Web技術をGoogleが紹介。WebAssemblyのスレッドによる高速化、ストリーミングコンパイル、Web Componentsなど
Webアプリ版Photoshopを実現させた最新Web技術をGoogleが紹介。WebAssemblyのスレッドによる高速化、ストリーミングコンパイル、Web Componentsなど Photoshopは画像の作成や加工といった専門的な用途を目的に、長年にわたって作り込まれた代表的なデスクトップソフトウェアの1つと言えます。 プロフェッショナルな用途を満たす膨大な画像処理の機能を細かく作り込まれたユーザーインターフェイスから操作し、画像の変形や加工、フィルタリングなどの大量の複雑な演算処理が実行されるなど、Webアプリケーションへの移植を難しくする要素が満載です。 それらの困難を克服し、Photoshop Webではデスクトップ版Photoshopでよく使われる一般的な機能を、類似のユーザーインターフェイスでWebに実装し、商用サービスとして提供することに成功しました。 Photosho
This November marks five years since Mock Service Worker has been first added to a package.json. Over that time, I have learned a lot about building libraries, designing APIs, and cultivating communities, which makes today’s announcement all the more special. Version 2.0 marks a monumental chapter for MSW. A year in development, dozens of contributors, and thousands of lines changed, this update b
丁寧なDeno+JSX - laiso
*1 サーバーレスFunctionsぐらいの気軽さでサーバーアリのWebアプリをデプロイしたいという時がある。主に自分たちだけが使うようなツール系のやつ。 その時に今までのようにSPA+APIアーキテクチャではなく、モノリシックなサーバーサイドアーキテクチャにしつつもフロントエンド開発と同じツールチェインを使いたい、と前から思っていた。 これは単にReactメタフレームワークでも一気通貫に時短で作れそうだけど、個人の楽しみのための活動なので、一旦世間のトレンドからは離れて自分が本当に必要だと思った要素技術のみを最小限に使って理解しながら試行錯誤したい。 ※ただ第三者に提供するシステムとかは安全に作られた既存フレームワークに乗るのがいいというのもある しばらく考えてみたところ、私にとっては「TypeScriptでJSXをテンプレートエンジンに使ってHTMLを書けるだけでよい」という所に落ち着
About the release Version 2.0 brings the biggest API change to the library since its inception. Alongside the new API, it includes various features, such as ReadableStream support, ESM-compatibility, and countless bug fixes. This guide will help you migrate your application to version 2.0. We highly recommend you read it from start to finish. Make sure to read the official announcement for this re
Shizuoka.js #7
いまNext.jsで新規サービスを立ち上げるときの観点（Router・CSS・認証・監視など/2023年末）
免責事項 社内向けに展開するように雑にまとめました Next.jsの知見が深くない人がリードしてPoCを立ち上げなきゃいけなくなったが、社内的にはNext.jsを推奨しているみたいな場面を想定しています なので自信ないところも多いですが割と断言するように心がけて書いています PoCの立ち上げ想定なので、jest/Storybookなど内部品質面についてあまり深く書くことを避けています ほぼ自分の知識だけで書いており私見も多いですし、そもそも自分自身がトップクラスの知識や視座を有しているわけでもないので、まずは以下の話を理解はした上で、踏襲するかどうかは別途他記事やGitHub、公式ドキュメントなどを漁って判断することを推奨 App RouterかPages Routerか 2023年末現在まだApp Routerは技術記事が足りてきている印象ではないため、社内でノウハウを積極的に貯めていく
Sentry 活用のススメ こんにちは！ STORES のリテール事業部でソフトウェアエンジニアをしている @m0nch1 です。 エラー監視ツールとして Sentry を採用している企業・エンジニアは多いことと思います。 Sentry の welcome ページにも以下のように記載されており、人気が伺えますね。 Nearly 4M developers and 90K organizations rely on Sentry to see what actually matters, solve what's urgent faster, and learn continuously about their code. STORES も各プロダクトでの日々の開発・運用においてエラー監視ツールとして活用しています。 そんな Sentry ですが、実は今やエラー監視のみにとどまらず公式では
ソースコードのハッシュ値を利用した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の大まかな構成は以下の
App Router への移行は「改善」となり得るのか？/ Can migration to App Router be an improvement
Docker Compose Watchのすすめ - Hatena Developer Blog
TypeScript5.3 betaのリリースなど : Cybozu Frontend Weekly (2023-10-10号)
TypeScript5.3 betaのリリースなど : Cybozu Frontend Weekly (2023-10-10号) こんにちは! サイボウズ株式会社フロントエンドエンジニアの Saji (@sajikix) です。 はじめに サイボウズでは毎週火曜日に Frontend Weekly という「一週間にあったフロントエンドニュースを共有する会」を社内で開催しています。 今回は、2023/10/10 の Frontend Weekly で取り上げた記事や話題を紹介します。 取り上げた記事・話題 Announcing TypeScript 5.3 Beta - TypeScript TypeScript 5.3 Beta がアナウンスされました。 現在 Stage3 のプロポーザルである Import Attributes のサポートや switch(true) 内の各 case
デジタルコンテンツにおけるアクセシビリティ、特にコントラストの基準について解説する連載の第2回目です。前回の記事では、現在のWCAG2のコントラスト基準と課題について解説しました。今回はWCAG3で採用が検討されている新しいコントラスト基準、APCAについて解説します。 APCAとは WCAG 2.0でコントラストの基準が策定されて以降、ディスプレイやWebコンテンツ、CSSの機能、および視覚科学の進歩など様々な状況が変化しました。WCAGの基準についても、コントラストや視認性についてより知覚を正しくモデル化するガイドラインが求められるようになりました。 APCA（Advanced Perceptual Contrast Algorithm）はWCAG3にて現行のコントラストに代わる基準として開発・検討されている、新しいコントラスト基準です。前回紹介したようなWCAG2の基準の課題に応える
CodeZine編集部では、現場で活躍するデベロッパーをスターにするためのカンファレンス「Developers Summit」や、エンジニアの生きざまをブーストするためのイベント「Developers Boost」など、さまざまなカンファレンスを企画・運営しています。
Fresh 1.5: Partials, client side navigation and more Today, we’re happy to announce the 1.5 release of Fresh, the fast, Deno-native framework for building full stack web applications. This release contains a brand new approach to client-side navigation that we’re calling Partials. Using HTML attributes, you can configure your Fresh apps to replace HTML in an already-loaded page using server-render
はじめに サイオステクノロジーの伊藤と申します。今回から数回にわたりデジタルコンテンツのコントラストというテーマで、WCAG2のコントラスト基準とWCAG3で検討が進められている新しい基準APCAについて解説していきます。 対象読者としては、ウェブサイトやアプリケーションなどデジタルコンテンツの制作に携わるデザイナーやエンジニア、アクセシビリティに関心のある方を想定しています。 現在勧告されているWCAG2の達成基準では、テキストや視覚要素のコントラストが一定の基準を満たす必要があります。たとえば、レベルAAでは文字色と背景色のコントラスト比が4.5:1以上であることが要求されます。 図1 テキストとの視認性を確保するために、背景色とのコントラスト比を考える必要がある しかし、人間の目は明るい色と暗い色のコントラストを認識する際に、明るい色の相対輝度が高いほど視認性が高くなるという特性があ
https://hackers-champloo.org/2023/program.html のLT、「htmx is not a typo」のスライドです。 スライド内で紹介した情報やリンクは以下のとおりです。 https://htmx.org https://www.thoughtworks.com/radar/languages-and-frameworks/htmx https://github.com/kimihito/hcmpl23-htmx-demo https://hypermedia.systems/book/contents/ https://htmx.org/essays/#memes https://alpinejs.dev/
新規サービス「FAANS」における、立ち上げからReact+TypeScriptのSPA開発を2年間運用した際に取り組んだ組織的・技術的な課題 - ZOZO TECH BLOG
こんにちは、ブランドソリューション開発本部フロントエンド部の田中です。 普段はFAANSのWebフロントエンドの開発を行なっています。 FAANSとは「Fashion Advisors are Neighbors」がサービス名の由来で、ショップスタッフの効率的な販売をサポートするショップスタッフ専用ツールです。 ショップスタッフ向けにコーデ投稿・成果確認などの機能が存在し、2022年8月に正式ローンチしました。詳しくは以下のプレスリリースをご覧ください。 corp.zozo.com 現在FAANSは立ち上げから2年経過し、Webフロントエンドの開発現場において様々な組織的・技術的課題がありました。 今回はその課題と取り組みについて紹介したいと思います。 目次 目次 前提 FAANSの組織の特徴 FAANSのWebのプロダクトの特徴 変化の多い環境下で遭遇し続ける課題 組織的・技術的課題とそ
■イベント コンポーネント設計のすゝめ 〜ベストプラクティスを学ぶLunch LT〜 https://findy.connpass.com/event/296449/ ■登壇概要 タイトル：続・変更に強いコンポーネント設計の方針と規約（Webフロントエンド） 登壇者：技術本部 データ戦略部 木田 悠一郎 ■データ戦略部 エンジニア 採用情報 https://media.sansan-engineering.com/data-strategy
NGINX Unit、サーバサイドWebAssemblyにプレビュー対応。Webアプリケーション開発がWebAssemblyで可能に
NGINX Unit、サーバサイドWebAssemblyにプレビュー対応。Webアプリケーション開発がWebAssemblyで可能に オープンソースで開発されている軽量なアプリケーションサーバ「NGINX Unit」（エンジンエックス ユニット）が、最新のバージョンである「NGINX Unit 1.31」でサーバサイドWebAssemblyにテクノロジープレビューとして対応し、WebAssemblyランタイムを搭載したことを明らかにしました。 NGINX UnitはこれまでPHPやPython、ruby、Perl、Go言語などに対応し、Webアプリケーション構築が可能でした。今回この対応言語にWebAssemblyが加わったことになります。 Server-side #WebAssembly has immense potential. In a new blog post, @LiamCr
クックパッドのフロントエンド CSS in JS をゼロランタイムに切り替えました - クックパッド開発者ブログ
こんにちは。レシピ事業部のkaorun343です。我々のチームではレシピサービスのフロントエンドを Next.js と GraphQL のシステムに置き換えている話 - クックパッド開発者ブログにて紹介したとおり、レシピサービスを Next.js ベースの新システムへと移行しています。今回は、この新システムのCSS in JSをEmotionからゼロランタイムのvanilla-extractへ変更した話です。 vanilla-extract.style 背景 以前書いた レシピサービスのフロントエンドに CSS in JS を採用した話 - クックパッド開発者ブログでは、CSS in JSライブラリとして Emotion（@emotion/react）を採用した経緯と開発環境整備を紹介しました。採用理由としては以下の通りでした。 セレクタに一意なIDが割り振られるので、スタイルを適用した要
TypeScript のドキュメンタリーの公開など : Cybozu Frontend Weekly (2023/09/26号)
TypeScript のドキュメンタリーの公開など : Cybozu Frontend Weekly (2023/09/26号) こんにちは! サイボウズ株式会社フロントエンドエンジニアの nissy です。 はじめに サイボウズでは毎週火曜日に Frontend Weekly という「1 週間の間にあったフロントエンドニュースを共有する会」を社内で開催しています。 今回は、2023/09/26 の Frontend Weekly で取り上げた記事や話題を紹介します。 取り上げた記事・話題 Node v20.6.0 (Current) | Node.js Node.js v20.6.0 のリリースブログです。.env ファイルのビルトインサポートや import.meta.resolve がフラグなしで利用可能になる等の更新が行われています。 Chakra, Panda and Ark -
DevTools の 5つのTips
こんにちは、株式会社スマートショッピングでエンジニアをしているrobjamです。 デベロッパーツール（DevTools）には便利な機能が盛り沢山です。今回はその中から一部の機能をご紹介したいと思います。今回は主にChromeのDevToolsを使いますが、他のbrowserでも同じような機能が提供されております。 簡単な例文をローカルで試せるようにrepoを準備しました。 こちらをcloneしてセットアップいただければと思います。 1. タブの並べ替え タブの並び替えは、キラーフィチャーではないかもしれませんが、ご存知の方が少ないかもと思って共有します。タブの並び替えができます！動画をみていただければイメージがつかめると思います。 2. xhrリクエストの再送信 たまにプログラム的にリクエストを送信したい時があります。例えば、体験のrepoにあるcounterのエンドポイントを20回送信し
JavaScript入力コントロール「InputManJS」に待望のリッチテキストエディタが登場！ Webフォームで差を付けよう
CodeZine編集部では、現場で活躍するデベロッパーをスターにするためのカンファレンス「Developers Summit」や、エンジニアの生きざまをブーストするためのイベント「Developers Boost」など、さまざまなカンファレンスを企画・運営しています。
Like Next.js/Nuxt but as do-one-thing-do-it-well Vite plugin. 🔧 ControlUse any UI framework (React, Vue, Svelte, Solid, ...) and any tool you want (any frontend library, web technology, deploy environment, Vite plugin, ...). With Vike, you integrate tools manually and keep architectural control. 📦 Zero-configVike gives you control only where it matters. Everything else just works without the nee
サイボウズOfficeのフロントエンド刷新（DOGOプロジェクト) をやってます！ - Cybozu Inside Out | サイボウズエンジニアのブログ
DOGOプロジェクトのマスコット こんにちは。サイボウズOffice開発チームの西谷です。 昨年より、私たちは”DOGO”と銘打ち、サイボウズOfficeのフロントエンド部分をNext.js App Routerを用いて刷新しています。 本ブログではこの刷新プロジェクトの概要やこれまでの取り組みについてご紹介します。 プロジェクト発足の背景 刷新の方針 刷新後のサイボウズOfficeを支える技術 アプリケーションフレームワーク モニタリング テスト インフラ CI・CD これまでの取り組み Next.js側で画面のルーティングを制御する リリースパイプラインの構築 全画面共通部分の実装 今後の取り組み メンバー募集しています！ プロジェクト発足の背景 サイボウズOfficeはこれまで、パッケージソフトウェアとしていくつものバージョンを重ね、クラウドサービスへ転身し、時代に合わせて様々な形に
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
ナメやがってこの型ァ!!超イラつくぜぇ～～～～～ッ!!
ブラウザでリロードしながらキャッシュの挙動を確認してる全ての開発者へ | blog.jxck.io
フロントエンドの知識地図—— 一冊でHTML/CSS/JavaScriptの開発技術が学べる本
フロントエンド苦手だったけど、Tailwind UIを使って見やすいプロフィールサイトを作った話。
リアーキテクトと開発生産性について
JavaScriptビルドツールの整理 各ツールの機能と依存関係
Introducing MSW 2.0
1.x → 2.x
Storybookを書くだけでリグレッションテストが 実行される世界へようこそ
Sentry 活用のススメ - STORES Product Blog
フロントエンドのディレクトリ設計思想
第2回 WCAG3のコントラスト基準APCAの考え方と実例 | gihyo.jp
HTMLの現状を明らかにする調査「State of HTML」が実施中
Fresh 1.5: Partials, client side navigation and more
第1回 デジタルコンテンツの視認性とWCAG2のコントラスト比の課題 | gihyo.jp
htmx is not a typo
Fetch APIは「PATCH」だけ大文字と小文字の挙動が異なる
続・変更に強いコンポーネント設計の方針と規約（Webフロントエンド）
UIのチラつきを撲滅する：useLayoutEffect、ペインティング、ブラウザについて | POSTD
Vike