The Qiita Advent Calendar 2022 is supported by the following companies, organizations, and services.

STORES フロントエンドエンジニアの wattanx です。 2022/11/16、ついに Nuxt 3 が正式リリースされましたね。 nuxt.com 私たちのプロダクトである STORES でも Nuxt を利用しており、絶賛 Nuxt 3 への移行中です。 本記事では、私たちのプロダクトにおいてどのようにNuxt 3 に移行しようとしているのか紹介します。 また、これは STORES Advent Calendar 2022 の 11日目の記事です。 移行の基本方針 Nuxt 2 を利用しているプロダクトを Nuxt 3 に移行する場合、以下の2とおりの方法が一般的だと思っています。 Nuxt 2 から Nuxt 3 に直接移行する。 Nuxt 2 から Nuxt Bridge に移行する。その後 Nuxt Bridge から Nuxt 3 に移行する。 Nuxt Bridge

iA Presenter Trial for Mac Enter your email to get iA Presenter trial, receive product updates, announcements, and a look behind the scenes. Write it iA Presenter’s text interface puts the focus on the story, saving time and nerves. What’s the story? In Presenter you just start by writing. Turbostart: paste what you already have. Come as you are: Start by writing down what you want to say. Paste y

こんにちは、フロントエンドエキスパートチームの @mugi_unoです！ kintone では フロントエンドの刷新プロジェクト（通称フロリア）が進行中です。 blog.cybozu.io kintone の開発では E2E 主体の自動テストを整備していましたが、 フロントエンドの刷新に合わせて、新たにフロントエンド側でのテストコードを積極的に書いています。 テストを書くことに不慣れなメンバーもいるため、日々 Pull Request 上でのレビューやペア・モブ作業を通じて、知見の共有が行われています。今回はフロントエンド刷新のテストを書いてきた中から、筆者が有用だと感じた知見やノウハウを紹介したいと思います。 目次 💡「実はそれ最初からパスしてるかもしれない」 期待する操作で期待する結果になることを厳密に検証する 他のテストケースによって前提条件を担保する 💡「テストコード上のロジッ

1.1~1.2 ダークパターンとアンチパターンは区別する必要がある ダーク：正しく機能して、意図的に、オンラインサービスの運営者が利益を得るために行われる、ユーザーを騙したり欺いたりして、望まない方向に誘導するためのデザイン アンチ：正しく機能せず、意図的ではなく、一方が利益を得る訳でもなく、ただユーザーにとって使い勝手の悪いデザインになっていること ただ最近はダークではなくディセプティブデザインと呼んでる（ダークが黒人系の方々を指す言葉として使われているからと思われる） ダークパターンの事例 https://www.deceptive.design/hall-of-shame/ ダークパターンが発生した3つの要因 小売における欺瞞的慣行 小売でも購入を増やすために様々な手法が見られる。これ自体が悪いわけではないけど、小売の習慣がより巧妙にデジタルの世界に紛れ込んでいる 198,298とか

日々いろんな npm パッケージに依存してるわけですが、その作者が気になるときがある。 単純に気になるときもあるけど、調査が必要になるときもある。 たとえば最近 substack の GitHub アカウントが削除された。npm から消えたわけじゃないから、すぐに困るってことはないけど、誰にも移譲されていないリポジトリがあっとして、もし自分がそれに依存してしまっていたら代替を探したくなる。 また、自分が関わっている OSS プロジェクトでは過去のメンテナーが作ったたくさんのライブラリに依存していて、その人がすでにアクティブでなくなったいるため、やや悪い影響が出始めていたりする。 そのため、自分の依存している npm パッケージの作者をシュッと調べて、フォークするか移管してもらうか色々判断できると便利である。 ということでそれに役に立つツールを作った。 npm に publish してあるの

数多くの 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

こんにちは。シニアスクラムマスター（初めて名乗った！）の天野 @ama_ch です。開発本部に所属するアジャイルコーチとして、組織内を横断的に支援しています。最近は、 kintone フロントエンドリアーキテクチャ（フロリア）プロジェクトの支援に注力しています。 フロリアプロジェクトの概要はこちらの記事をご覧ください。 blog.cybozu.io 現在、フロリアには約30人のメンバーが参加して日々活動しています。チームの規模が大きくなると、コミュニケーションが難しくなり、効果的なチームワークを発揮するのがどんどん難しくなっていきます。フロリアでは、昨年後半頃からだいぶチームの規模が膨らんできたため、今年からチームを再編し4チーム体制に切り替えました。 今回は、フロリアが数十人規模でもチームワークを発揮するために、チームの設計や運用で意識しているポイントを紹介します。 目指している状態 最

Chrome99に新機能として CSS Cascade Layers が実装され、Firefox、Edge、Safari といった主要ブラウザで CSS Cascade Layers が使えるようになりました。 CSS Cascade Layers とは CSS の仕様において、要素にどのスタイルを適用するかはざっくりと次のような優先順位で決定されていました。(カスケード順を省いて簡略的に記述しています) !important インラインスタイル セレクターの詳細度 同じ詳細度であれば最後に宣言されたもの ここに CSS Cascade Layers が導入されると次のように変わります。 !important インラインスタイル Cascade Layers セレクターの詳細度 同じ詳細度であれば最後に宣言されたもの 従来の CSS が抱える複雑な詳細度の管理 どのスタイルを適用するか判断

kintone フロントエンドリアーキテクチャプロジェクトリーダーの @koba04です。 昨年末から、kintone フロントエンドリアーキテクチャをプロジェクト（フロリア）として再構成してスタートさせました。フロリアという名前は社内での公募により決定しました。 今回はプロジェクトで目指していることについて紹介します。本プロジェクトの開始前に Cybozu Meetup で話したスライドや動画も公開されているのでよければ見てください。 speakerdeck.com www.youtube.com これまでの取り組みについては下記の記事にて紹介しています。 blog.cybozu.io 3 行まとめ フロリアのゴール 全てのページが React によって表示されている​ 現状 今後 フロントエンドが技術的にもチーム的にも分割されている​ モノリスな構成からの脱却 アーキテクチャとチーム（

LINE株式会社は、2023年10月1日にLINEヤフー株式会社になりました。LINEヤフー株式会社の新しいブログはこちらです。 LINEヤフー Tech Blog フロントエンド開発センター(通称: UIT) Front-End Dev.9 チームの花谷(@potato4d)です。 『UIT 新春 Tech Blog』 1/27 の今回は、UIT が主体となって行っているフロントエンド領域の OSS のスポンサー活動についてご紹介します。 LINE のフロントエンド領域関連の OSS スポンサリング状況 LINE では、2022年1月現在以下のフロントエンドに関する OSS の支援実績があります。 Vue.js 2021年4月より支援開始し、継続中 毎月500ドルを Evan You 個人の Patreon アカウント経由で支払い Husky 2021年3月より支援開始し、継続中 毎月1

LINE株式会社は、2023年10月1日にLINEヤフー株式会社になりました。LINEヤフー株式会社の新しいブログはこちらです。 LINEヤフー Tech Blog この記事は UIT 新春 Tech blog 4 日目の記事です。 こんにちは。LINE フロントエンド開発センターの前川です。主にフロントエンド開発センターで働く方々のDX改善や、社内サービスの運用を行なっています。 私の所属しているチームは、フロントエンドと名前はついているものの、実際はフロントエンドとそれ以外の業務の割合が2:8程度という珍しいチームです。そのため、技術記事というカテゴリからはやや外れてしまいますが、その業務内容をご紹介したいと思います。 LINEを支えるプラットフォーム 本題に入る前に、まずはLINEのプロダクトがどのようなプラットフォームの上で動作しているか説明します。 LINEでは、Verdaという

Immersed + Meta Quest(Oculus Quest) + Macbook Proで、文章やコードを書く 最近は、ImmersedというMeta Quest(Oculus Quest)で動くアプリを使ってプログラミングをしたり文章を書いたりしています。 ImmersedはOculus QuestなどのVR機器で動くアプリです。 リモートデスクトップ的にOculus QuestとPCを接続して、Oculus QuestをPCのディスプレイとして使えます。 必要な道具 Oculus Quest 2 Oculus Questでも問題ないそうです Windows or macOS or Linuxが動くPC macOSだと自動で物理的なディスプレイが暗くなったり、macOSの方がサポートは良いのかも MacBook Pro (13-inch, 2020, Four Thunderb

サイバーエージェントでは今年、CA PoCMOCK CONTEST 2021というコンテストが開催されました。PoCMOCKは造語でそれぞれPoC(検証)・MOCK(モックアップ)を表し、エンジニア・クリエイターのアイディアやスキルを駆使して技術的・品質的・社会的な何かしらの課題を解決したプロダクトの一部を制作し披露する場になりました。 私自身は運営チームとしてコンテストに関わっていたのですが、社員賞を決めるための投票システムを作るためにクリエイター・PMとともに参加することにしました。 投票システムの前提として、2日間の開発期間で作りきること、また作ったプロダクトはその後すぐに社員が利用できる状態であることが求められていました。 本記事ではその制作を通じて発見できたことや工夫したところを紹介します。 NOTE: 本記事の内容はアプリケーション制作時(2021年8月)の情報に基づいています

この記事はサイボウズアドベントカレンダー17日目の記事になります。 こんにちは。サイボウズで働いているエンジニアのもやし丸 です。 エンジニアとして働き始めて今年で3年目になります。 入社1年目のときは自分の3年目の姿なんて全く想像できませんでした。どんなエンジニアに成長しているかなー。そもそも仕事続けられているのかなー。と期待と不安が入り交じる感情を抱きながら仕事をしていたことを覚えています。 今はどうでしょう？いざ3年目になってみたら転職を考えていました。 ちなみに1年目の活動はブログに書いてあるので、もしよければ読んでみてください。 dev-moyashi.hatenablog.com 仕事では kintone のフロントエンド刷新プロジェクトに携わっています。プロジェクトの概要はkintoneのフロントエンド刷新に向けた取り組みに記載しています。 blog.cybozu.io 20

この記事はCybozu Advent Calendar 2021の 18 日目の記事です（業務なので前日に出してます 🍀）。 サイボウズには 10 年以上運用が続いているプロダクトがいくつかあります。フロントエンドエキスパートチームは、そんなプロダクトや開発メンバーへの支援を横断的に行うチームです。 フロントエンドエキスパートチームの今年の取り組みを紹介します。 フロントエンドエキスパートチームの立ち位置とミッション フロントエンドエキスパートチームは特定のプロダクトなどに属さない、独立した横断的な支援チームです。活動内容についてはすべてチームに裁量があり、何をどうしていくかは自律的に決めて動く必要があります。 フロントエンドエキスパートチームでは「サイボウズのフロントエンドを最高にする」というミッションを掲げています。このミッションを達成するための活動を日々考えながら活動しています。

こんにちは、Garoon 開発の杉山(@oogFranz)です。サイボウズは、インフィニットループ社のいがらし様のブログ記事「インフィニットループは PHP の継続的な発展を目指す The PHP Foundation に寄付をしました」に賛同し、The PHP Foundation に寄付を行うことにしました。来年度以降も継続的に寄付を行おうと考えています。 サイボウズと OSS 現在のソフトウェア開発において、OSS を利用せずに開発を進めることはまず不可能と言って良いでしょう。Garoon も例外ではなく、PHP をはじめとして多くの OSS を利用し開発を進めています。 サイボウズでは、 OSS を利用したおかげで事業が成長できたと考え、事業成長のフィードバックとして、OSS へ寄付しています。OSS への寄付は OSS 推進チームが中心となって行なっており、過去にもいくつかの O

11 月 11 日に、以前から一部で注目されていたある Pull Request が tc39/ecma262 にマージされました。 この Pull Request がマージされたことで、識別子ではなく文字列リテラルを使った import/export が可能になりました。 この仕様変更はプロポーザルという形で扱われてはいませんが、構文上の影響があるので、JavaScript ユーザーとして知っておくに越したことはないものになります。 概要 まず具体例を示します。 今回の変更によって、次のように import/export する際の名前として文字列リテラルを使えるようになります。 基本的にはこれだけです。 詳解 ここからは仕様上の用語を使って解説をします。 この変更が入る前の ECMAScript では ImportSpecifier で as を使う場合 as の左側は Identifi