サクサク読めて、アプリ限定の機能も多数!
トップへ戻る
Pixel 9
cybozu.github.io
本企画は、その名の通りサイボウズによる夏のブログの祭典です。 「チームワークあふれる社会を創る」という存在意義のもと、こうした社会の実現に向けて技術的な側面から様々な試みを続ける私たちサイボウズのエンジニアとデザイナーが、日々の業務や自己研鑽のなかで培ってきた知見を技術記事として毎日発信します! 「夏フェス」になぞらえて設計された本企画は 9つの「Stage」 で構成され、それぞれのStageでは会期の一部または全部の間、Stageのテーマに沿った記事が連日投稿されます。つまり、日によっては同じ日に異なるステージから複数の記事が投稿されることもあります。 意欲的なエンジニアとデザイナーが数多く在籍しているおかげで、初めての試みながら 80名以上 が執筆することになりました!20DAYSの会期中に投稿される記事数は 約100本 にのぼる予定です! 様々な視点から怒涛のように発信されるサイボウ
2022/7/13に、フロントエンドツールである Vite のバージョン 3.0 がリリースされました 🎉 Vite 3.0 is out! | Vite CHANGELOG Migration from v2 | Vite このエントリーでは、リリース時に公開されたアナウンス(Release v3.0.0 · vitejs/vite)の内容をベースに、変更点を改めて1つずつ掘り下げて確認してみます。 New Documentation 公式ドキュメント(vitejs.dev)が VitePress のデフォルトテーマを利用した形で刷新されました。ダークテーマ表示などが可能になっています。 また、あわせて次のサブドメインでもドキュメントを閲覧できるようになっています。 v2.vitejs.dev - Vite 2.x 系のドキュメント main.vitejs.dev - Vite のメイ
数多くの Node.js ライブラリの作者として知られる Sindre Sorhus 氏が次のようなツイートをしていた。 Why is `import.meta.url` a string and not a `URL` instance? — Sindre Sorhus 💙💛 (@sindresorhus) July 24, 2022 これを見て私も理由が気になったので調査してみた。 先にまとめ URL の仕様にそうすべきと書いてあるから。 普通に考えると? まず最初に思いつくであろうものが「import.meta.urlはECMAScriptの仕様だが、URLオブジェクトはHTMLの仕様に含まれるため、仕様間のそういった参照はできない」という理由である。 実際 Twitter 上ではそのように考えている人もいた。 しかし、それは誤りである。 ECMAScriptのimport.me
サイボウズ フロントエンドエキスパートチームの 2022 年上期(1月〜6 月)の取り組みを紹介します。 プロダクトへの支援 プロダクト支援としておもに次の 2 つを行いました。 kintone のフロントエンドリアーキテクチャ サイボウズ製品の販売管理システムのフロントエンドリアーキテクチャ これらの支援活動は現在(2022 年 7 月〜)も継続中です。 kintone のフロントエンドリアーキテクチャ kintone のフロントエンドリアーキテクチャプロジェクト、通称フロリアへの支援を昨年から引き続いて行っています。メンバーはプロジェクトのチームに所属する形で支援活動をしています。 フロリアの詳細については次の記事を参照ください。 また、直接的な支援ではありませんが、フロリアプロジェクトでの社外アウトプット(社の技術ブログへの執筆)を支援する活動も行っています。 サイボウズ製品の販売管
この記事では2022年06月06日~09日に開催された TC39 meeting 90th で議題に上がったプロポーザルを紹介します。 For Stage 4 findLast / findLastIndex Stage 4 に到達しました findLast と findLastIndex は、Array.prototype.find と Array.prototype.findIndex の逆から走査するバージョンです。 const arr = [ { prop1: 1, prop2: "foo" }, { prop1: 1, props2: "bar" }, ]; const obj1 = arr.find((element) => element.prop1 === 1); console.log(obj1.prop2); // "foo" const obj2 = arr.find
この記事では2022年03月28日~31日に開催された TC39 meeting 89th で議題に上がったプロポーザルを紹介します。 For Stage 4 For Stage 4 の提案はありませんでした。 For Stage 3 RegExp set notation + Unicode properties of strings Stage 3 に到達しました このプロポーザルは正規表現に新しくvフラグを導入し、その中で set notation と Unicode properties of strings を使えるようにします。 (翻訳するとしたら set notation は「集合の表記」、properties of strings は「文字列プロパティ」でしょうか。定訳がわからないのでこの記事ではこれらの用語を英語のまま表記します。) まず、set notation とは次
Chrome99に新機能として CSS Cascade Layers が実装され、Firefox、Edge、Safari といった主要ブラウザで CSS Cascade Layers が使えるようになりました。 CSS Cascade Layers とは CSS の仕様において、要素にどのスタイルを適用するかはざっくりと次のような優先順位で決定されていました。(カスケード順を省いて簡略的に記述しています) !important インラインスタイル セレクターの詳細度 同じ詳細度であれば最後に宣言されたもの ここに CSS Cascade Layers が導入されると次のように変わります。 !important インラインスタイル Cascade Layers セレクターの詳細度 同じ詳細度であれば最後に宣言されたもの 従来の CSS が抱える複雑な詳細度の管理 どのスタイルを適用するか判断
それっぽいタイトルを付けましたが特に意味はないです。 workspace を使ったコマンドを最適化して実行する Turborepo についてのお話で Turborepo を軽く触ってみた際にnpx create-turbo@latestで作られる構成がとてもわかりやすく、プロダクトの初期段階からモノレポを採用するのは選択肢の 1 つとしていいのでは、と思い続編を書きました。 前回と同じくサンプルのリポジトリはこちらになります。 https://github.com/nus3/p-turborepo/tree/main/yarn 概要 モノレポを採用することで、同一リポジトリ内で自作した汎用的なライブラリやコンポーネントを複数のアプリケーションで使いまわせる モノレポの規模が大きくなってきた場合には、モノレポ内のパッケージを npm に公開することでアプリケーションとパッケージを非同期に開発
TC39 の 87 回目のミーティングが 12月14日 ~ 12月15日に開催されました。このミーティングで議題に上がった提案とそのステージの移動について紹介します。 For Stage 4 For Stage 4 の提案はありませんでした For Stage 3 Array Grouping Stage 3 になりました Array Grouping は Array.prototype.groupBy と Array.prototype.groupByToMap を追加するプロポーザルです。 2021 年 10 月のミーティングで Stage 2 になったばかりですが、今回のミーティングで Stage 3 になりました。 また、今回から Array.prototype.groupByToMap が追加されています。 これは groupBy の結果が Map になったものです。 const
今年からフロントエンドエキスパートチームでは活動内容の一つである探求の一環として、メンバーが気になった技術に対して、気軽に触ってみる会をしています。次の画像は筆者が Slack で、気軽に触ってみる会の開催を宣言してる時のものです。 今回は去年の 12 月に Vercel に買収されたニュースがあった Turborepo を気軽に触ってみました。 個人的には 1 人で調べるときよりも複数人でわいわい調べた方が、その技術や関連する周辺知識の話を色んな人の観点で深掘ってできて、とても有意義な時間でした。 概要 Turborepo はモノレポのためのビルドシステムで次のような特徴があります。 Yarn, npm, pnpm の workspaces に対応してるリポジトリに対して簡単に導入できる workspace 内のコマンドの依存関係をシンプルに設定してくれる Turborepo で実行する
この記事はCybozu Advent Calendar 2021の 18 日目の記事です(業務なので前日に出してます 🍀)。 サイボウズには 10 年以上運用が続いているプロダクトがいくつかあります。フロントエンドエキスパートチームは、そんなプロダクトや開発メンバーへの支援を横断的に行うチームです。 フロントエンドエキスパートチームの今年の取り組みを紹介します。 フロントエンドエキスパートチームの立ち位置とミッション フロントエンドエキスパートチームは特定のプロダクトなどに属さない、独立した横断的な支援チームです。活動内容についてはすべてチームに裁量があり、何をどうしていくかは自律的に決めて動く必要があります。 フロントエンドエキスパートチームでは「サイボウズのフロントエンドを最高にする」というミッションを掲げています。このミッションを達成するための活動を日々考えながら活動しています。
11 月 11 日に、以前から一部で注目されていたある Pull Request が tc39/ecma262 にマージされました。 この Pull Request がマージされたことで、識別子ではなく文字列リテラルを使った import/export が可能になりました。 この仕様変更はプロポーザルという形で扱われてはいませんが、構文上の影響があるので、JavaScript ユーザーとして知っておくに越したことはないものになります。 概要 まず具体例を示します。 今回の変更によって、次のように import/export する際の名前として文字列リテラルを使えるようになります。 基本的にはこれだけです。 詳解 ここからは仕様上の用語を使って解説をします。 この変更が入る前の ECMAScript では ImportSpecifier で as を使う場合 as の左側は Identifi
Storybook の 6.4.0 がリリースされ、Interactive storiesが新機能として追加されました。詳細はStorybook のブログでも記載されています。 概要 Interactive stories の Addon を追加すると、testing-library で定義した操作を Storybook 上で確認することができるようになります。 次の gif のようにユーザー操作に対するコンポーネントの状態を UI(Addon)からステップごとに確認できます。 導入手順 パッケージを追加する Storybook のmain.jsに設定を追加する Interactive stories 用の story をstories.tsxに追加する 1. パッケージを追加する Interactive addon を利用するには次のパッケージが必要です。 (今回は React のコンポ
先日 Safari 15 がリリースされました。 https://webkit.org/blog/11989/new-webkit-features-in-safari-15/ 影響の大きそうな箇所や、知っておいたほうが良さそうな箇所を中心に紹介します。 HTML theme-color meta タグ上での theme-color のサポートが追加されました。 指定することで、ブラウザのメニューバーやタブバーといった領域のカラーを変更することができます。 prefers-color-scheme と併用することで、ダークモード/ライトモードに応じた色の指定もできます。 Design for Safari 15 CSS aspect-ratio プロパティのサポート aspect-ratio - CSS: Cascading Style Sheets | MDN lab() lch() h
2021年7月に行われた TC39 ミーティングで Ergonomic brand checks for Private Fields というプロポーザルが Stage 4 になりました。 このプロポーザルは、ES2022 に含まれる予定です。また、TypeScript 4.5 にも含まれる予定です。 この記事では、Ergonomic brand checks for Private Fields について解説します。 概要 Ergonomic brand checks for Private Fields は、in 演算子を使ったプライベートフィールドの有無の判定を可能にするプロポーザルです。 現在の in 演算子 in 演算子は、オブジェクトが特定の名前のプロパティを持っているかどうかを判定するための二項演算子です。 左辺にプロパティの名前、右辺にオブジェクトを受け取ります。 新しい
TC39 の 86 回目のミーティングが 10/25 ~ 10/28 に開催されました。 このミーティングで議題に上がった提案と、そのステージの移動について紹介します。 agendas/10.md at master · tc39/agendas Oct 2021 · Issue #77 · babel/proposals for Stage 4 Error Cause Stage 4 になりました。ECMAScript 2022 に入ります Error Cause は、Error コンストラクタの第 2 引数に cause という値で原因となったエラーを渡すことができるようにする提案です。 キャッチする側では、error.cause で、そのエラーを取得できます。 例を示します。 doUploadJob 関数は fetch を実行して失敗したときに新しいエラーをスローします。そのエラーの
Chrome 95 がリリースされ、新機能として EyeDropper API が追加されました。(Edge 95 にも追加されました) EyeDropper API とは EyeDropper API は画面上から色情報を取得するスポイトツールをブラウザ上で実現する API です。スポイトツールはデザインツールなどに搭載されていることが多いかと思います。 Chrome の DevTools にも色選択をするときにスポイトアイコンをクリックするとスポイトツールが使えますが、この機能が単体の Web API として実装された形になります。 使い方 EyeDropper API の使い方は次のようになります。 const eyeDropper = new EyeDropper(); const result = await eyeDropper.open(); console.log(resu
こんにちは、サイボウズフロントエンドエキスパートチームの@__sosukesuzukiです。 サイボウズにはCybozu Inside Outという技術ブログがあります。 それとは別に、この度フロントエンドエキスパートチームとしてウェブサイトを開設することにしました。 この記事では、このウェブサイトを開設することになった経緯と目的、使用した技術について説明します。 経緯 フロントエンドエキスパートチームでは、チームでのコミュニケーションの促進を主な目的としてハッカソンを開催することがあります。 (チームでのハッカソンについてはCybozu Inside Out に投稿されている記事をご覧ください) そのようなハッカソンで、フリーテーマの回がありました。 そこで、SakitoさんとBaHoさんとsosukesuzuki(私)のチームでは、フロントエンドエキスパートチームのウェブサイトを作って
サイボウズのフロントエンドエキスパートチームが月イチでお届けするフロントエンド情報
コンテンツCompat2021: Eliminating five top compatibility pain points on the web 共有者: sakito Compat2021という取り組みの紹介記事になります。 同時にマイクロソフト、IgaliaからもCompat2021についての各社の取り組みについて記事が公開されています。 WebDNAなどを通して行われてきた調査で浮き彫りになった開発者が感じている問題について「ブラウザーの互換性」が多くあがっており、その問題について改善していくという内容になっています。 特にCSS関連でCSS Flexbox, CSS Grid, CSS position: sticky, CSS aspect-ratio property, CSS transformsが各ブラウザで微妙に挙動が異なることによる辛さが多く挙げられているので、ここ
コンテンツJavaScript アンケート周り 共有者: @__sakito__ State of JS 2020 日本語訳 2020 JavaScript Rising Stars 日本語訳 両方とも 2020 年の流れを把握するのに使えそうです。 State of JS は、ビルドが esbuild や sbowpack、フレームワークは引き続き svelte に興味持ってる人が多かったです。 しかし実際に使用してるものは、webpack などになっており、新しいものはまだプロダクションで使用するには踏み込めない印象。 各項目で色々な人が 2020 年の個人的ベストを紹介してるのが面白かった、changesets、Insomnia、Redwoodなど知らないものを知れました。 2020 JavaScript Rising Stars は、あくまでスター数なので State of JS
コンテンツWe rendered a million web pages to learn how the web breaks 共有者:b4h0_c4t Web ページがどのようにして壊れるかを学ぶため、実際に発生しているエラーを調査、考察した記事。 トップ 100 ドメインのルートページ 100 万件をレンダリングするスクリプトを使用して出力される未処理エラーを調査した結果、85%が ReferenceError TypeError SyntaxError 。 また、上記のエラーが実際に発生している理由として、そのほとんどがリソースの読み込み失敗に起因していると述べています。 How to resolve ReferenceError ReferenceError の多くはライブラリが生成したグローバル変数を読み込む時に発生している。 What causes TypeError on
この文書は「Kubernetes という名前ぐらいは知っているけど、実際には使ったことがない、何ができるのかよく知らない」という人を対象に、Kubernetes の最も基本的なリソースである Pod, Service, Deployment を解説します。この文書を読めば、Kubernetes 上に単純な Web アプリケーションをデプロイできるようになるはずです。 この文書は Docker コンテナの知識を仮定しています。Docker をよく知らない人は先に Docker について勉強しておくことをおすすめします。
この資料は「Kubernetes という名前ぐらいは知っているけど、実際には使ったことがない、何ができるのかよく知らない」という人を対象に、Kubernetes の基本的な使い方を説明しています。 この資料を読めば、Kubernetes 上に単純な Web アプリケーションをデプロイできるようになるはずです。
yrmcds memcached compatible KVS with master/slave replication View on GitHub Download .zip Download .tar.gz yrmcds is a memory object caching system with master/slave replication. Currently, yrmcds supports two protocols: the first is an enhanced memcached, and another is a protocol to implement distributed resource counters. Since the memcached protocol is perfectly compatible with the original i
このページを最初にブックマークしてみませんか?
『cybozu.github.io』の新着エントリーを見る
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く