仕事を前に進めるためのコツ - 判断と決断と共有 / Aim for the goal# 参考資料 - https://gist.github.com/voluntas/9c1d9d51e86a853fed6889f743a12145 - https://amzn.to/4ewrbw7 - https://amzn.to/3XzYYh4 - https://www.ipa.go.…
フロントエンドテストにおける知見の宝庫を発見！「javascript-testing-best-practices」
はじめに JavaScriptにおけるテストのベストプラクティスをまとめた「javascript-testing-best-practices」というGitHubレポジトリが大変勉強になったため、特に参考になった内容をまとめて共有したいと思います。 （補足）本レポジトリにはfrontendのみならずbackendのテストに関する情報もありますが、今回はfrontendに焦点を当てて共有します。そのため扱うSectionは以下の4つです。 Section 0: The Golden Rule Section 1: The Test Anatomy Section 3: Frontend Section 4: Measuring Tests Effectiveness 想定読者 フロントエンドの実装はできるが、テスト経験はない方 テストに対して解像度が低い方 これからテストを学びたいと思ってい
TypeScript 5.6の更新点など: Cybozu Frontend Weekly (2024-09-03号)
こんにちは！サイボウズ株式会社フロントエンドエンジニアのおぐえもん（@oguemon_com）です。 はじめに サイボウズでは毎週火曜日にFrontend Weeklyという「一週間にあったフロントエンドニュースを共有する会」を社内で開催しています。 今回は、2024年9月3日のFrontend Weeklyで取り上げた記事や話題を紹介します。 取り上げた記事・話題 Nuxt Bridge を活用して Nuxt 3 へ移行しました STORESがNuxt 3への移行を完了した旨を報告する記事です。2022年12月の報告の続編になります。 刷新における工夫点や、移行により得られた恩恵などが紹介されています。 Announcing TypeScript 5.6 RC TypeScript 5.6でリリース予定の新機能が紹介されています。 例えば、if文の条件文が常にtrue/falseのときに
2024-09-09のJS: Vue 3.5、jsprimer v6、a11y-visualizer
JSer.info #706 - Vue 3.5がリリースされました。 Announcing Vue 3.5 | The Vue Point パフォーマンス改善、definePropsの返り値をDestructureできるようになっています。 また、useId()の追加、data-allow-mismatch属性の追加、defineCustomElement() APIを追加しCustom Elementの対応を改善、useTemplateRef()、onWatcherCleanup()の追加なども行われています。 JavaScriptの入門書であるjsprimer v6.0.0がリリースされました。 JavaScript Primer v6.0.0リリース: ES2024の対応とNode.jsのユースケースを刷新 | Web Scratch ES2024の対応とNode.jsのユースケー
SaaS 認証: Amazon Cognito ユーザープールを使ったアイデンティティ管理 | Amazon Web Services
Amazon Web Services ブログ SaaS 認証: Amazon Cognito ユーザープールを使ったアイデンティティ管理 この記事は、SaaS authentication: Identity management with Amazon Cognito user pools を翻訳したものです。 Amazon Cognito は、数百万人のユーザーにスケールできるカスタマーアイデンティティおよびアクセス管理 (CIAM) サービスです。Cognito 開発者ガイドでは利用可能なマルチテナンシーモデルについて詳しく説明されていますが、どのモデルを使うべきかを判断するのは時に難しい場合があります。このブログ記事では、各モデルを使う際のガイダンスを提供し、お客様の意思決定に役立つよう、長所と短所を確認します。 Cognito の概要 Amazon Cognito は、Web
ESLint v8のEOLなど: Cybozu Frontend Weekly (2024-09-10号)
こんにちは! サイボウズ株式会社フロントエンドエンジニアの Saji (@sajikix) です。 はじめに サイボウズでは毎週火曜日に Frontend Weekly という「一週間にあったフロントエンドニュースを共有する会」を社内で開催しています。 今回は、2024/9/10 の Frontend Weekly で取り上げた記事や話題を紹介します。 取り上げた記事・話題 Paragraphs | scottohara.me HTML における「段落（paragraph）」の概念と、その適切な使用について解説した記事です。 HTML の paragraph は、<p> 要素だけでなく他の要素も含む広い概念で、スクリーンリーダーは <p> 要素だけでなく、<span>, <div>,<li> なども段落として認識します。そのため role=paragraph のような ARIA ロールは、
2024-09-01のJS: Rspack 1.0、Safari Technology Preview 202、Material UI v6
JSer.info #705 - webpackとの互換性を持つようにRustで書かれたbundlerであるRspack 1.0がリリースされました。 Announcing Rspack 1.0 - Rspack 0.7からの破壊的な変更もいくつか含まれているため、マイグレーションガイドも公開されています。 Migrating from Rspack 0.x - Rspack Safari Technology Preview 202がリリースされました。 Release Notes for Safari Technology Preview 202 CSSのbackground-clip: border-area/ruby-align、shape() function/@pageでjis-b4とjis-b5のサポートなどが追加されています。 また、ECMAScript Proposal
package by feature なファイルの依存関係をルールで守る（eslint-plugin-boundaries）
package by feature と呼ばれるディレクトリ構成が一般的になってきました。[1] キカガクでも、新規に作成するプロジェクトでは package by feature なディレクトリ構成を採用したり、既存のプロジェクトを段階的に移行させたりしています。 今回は、この package by feature のディレクトリ分割を ESLint でルール化する方法を紹介します。 package by feature とは 詳しい説明は他の記事に譲りますが、ざっくり言うと、ファイルの種別ではなく機能を基準にディレクトリを分けていくようなディレクトリ構成の方法です。 これにより、1 つの機能に関わるファイルがまとまる（＝コロケーション）ため、読むのも書くのも楽になります。 import ルールを設けたい package by feature でディレクトリを構成する場合、基本的に同じ機
Web Developer Conference 2024 開催後記 #wdc2024 | blog.jxck.io
Intro 2024/9/7 に、 Web Developer Conference を開催した。 Web Developer Conference 2024 開催告知 #wdc2024 | blog.jxck.io https://blog.jxck.io/entries/2024-06-12/web-dev-conf-2024.html Connpass https://web-study.connpass.com/event/321711/ Togetter https://togetter.com/li/2430964 WDC2024 「Web 開発に関わることならなんでも可」という 40 分セッションと、「1 人 1 分 1 枚で Web 標準を紹介する」という 1 分 LT のカンファレンスとして開催した。 それ以外の余計なことを全くしない、いつも通りの省力開催で行った。 配信
フルリモートでも高い生産性とチーム学習を実現！Figma/FigJamを活用したペアデザイン・モブデザイン法とは
FigmaやFigJamを活用するDMM.comが、その効果的な活用や実践法について解説する本連載。初回は、「Figmaを活用したペアデザイン・モブデザイン」についてです。 こんにちは。DMM.com VPoE室のエクスペリエンスデザイナー・河西です。VPoE室のデザインチームは、DMMの多岐にわたるサービス／チームのプロトタイプ作成や情報設計のエキスパートとして活動しています。 本記事ではコロナ禍を経て多くの組織が移行したフルリモート体制でも、高い生産性とチーム学習を実現するために実践している、Figma/FigJamを活用したペアデザイン・モブデザインについて紹介します。 デザイナーを取り巻く業務上の課題と解決策 2018年ごろより、DMMではアジャイル開発やスクラム開発を導入するプロジェクトが急増し、開発チームに所属するデザイナーや企画職は、会議室のホワイトボードやワイドディスプレイ
機能リリース後のカオス！荒れたSentryのアラート通知をどう立て直したか - inSmartBank
はじめに こんにちは、業務委託でサーバーサイドエンジニアとしてスマートバンクにジョインしているakshimoといいます！ ソフトウェア開発は「作って終わり」という訳にはいかず、その後の運用も重要かと思います。その中でもエラーの監視とその通知システムは不可欠です。この記事では、私たちのチームのエラー監視にて起こった問題とその対策、そして普段行っている運用業務の流れについて書きたいと思います！ 前提・課題 リリースに伴いエラーが多発 私たちのチームでは、機能改善の一環としてある外部サービスを新しいものに移行するプロジェクトを進めていました。しかし、移行後に予期しない問題が多数発生してしまいました… 具体的には以下のような問題が発生していました。 外部サービスの各エンドポイントでのタイムアウト サプライズ的な想定外の仕様 実装の不備によるバグ これらのエラーには放置するとユーザー体験を大きく損な
何が変わる？akfmさん、Quramyさんに聞く Next.js v15アップデート解説 (2024/09/25 12:00〜)
お知らせ 2024年9月1日より、connpassではスクレイピングを禁止し、利用規約に明記しました。以降の情報取得にはconnpass APIをご利用ください。APIご利用についてはヘルプページをご確認ください。 新機能 「QRコード読み取りによる出席機能」をリリースしました。事前に入場受付が必要な場合や、受付時に参加枠などによって個別の誘導が必要な場合にご利用ください。詳しくは こちら をご覧ください。 新機能 connpass APIに新しく、ユーザーのプロフィールを取得できるユーザーAPIを追加しました。APIリファレンスは こちら を、またAPI利用希望の方は こちら をご覧ください。 9月 25 何が変わる？akfmさん、Quramyさんに聞く Next.js v15アップデート解説 #Offers_フロントエンドの未来 最終章！
Announcing TypeScript 5.6 - TypeScript
Today we’re excited to announce the release of TypeScript 5.6! If you’re not familiar with TypeScript, it’s a language that builds on top of JavaScript by adding syntax for types. Types describe the shapes we expect of our variables, parameters, and functions, and the TypeScript type-checker can help catch issues like typos, missing properties, and bad function calls before we even run our code. T
Version support policy and ESLint v8.x end of life - ESLint - Pluggable JavaScript Linter
For ESLint’s entire 11 year existence, we’ve only maintained one major release line at a time. This was both for practical reasons (limited team bandwidth) and technical reasons (our infrastructure was built to assume just one branch). Unfortunately, we haven’t been good at communicating our version support policy, which has led to confusion and frustration when we do a major release. Adopting a f
Chrome DevToolsを使いこなしてフロントエンド開発を加速させる
Chrome DevTools（以下、開発者ツール）は開発者にとって欠かせないツールですが、改めて使い方を調べたことは少ないのではないでしょうか？ この記事では開発者ツールの便利な機能をまとめて紹介します！筆者はChromeをメインで使用しているのでChrome DevTools前提ですが、一部拡張機能や他のブラウザの便利な機能を含みます。 スクリーンショットをキャプチャする 端末の機能でもスクリーンショットをキャプチャすることはできますが、開発者ツールではより便利なスクリーンショットの機能が提供されています。 特定のノードのスクリーンショットをキャプチャする Elementsパネルからスクリーンショットをキャプチャしたいノードを選択します ノードを右クリックして「Capture node screenshot」をクリックします 選択したノードのスクリーンショットがダウンロードフォルダに保
SmartHRのフロントエンドの技術的変遷 ── 技術顧問のkoba04と語るこれまでとこれから - SmartHR Tech Blog
マルチプロダクト戦略を掲げてプロダクトを急速に増やし続けている SmartHR のフロントエンド領域について、2018年から SmartHR に参加しているフロントエンドエンジニアの nabeliwo と技術顧問の koba04 が、これまでの振り返りと今後の展望を話しました。 SmartHR のフロントエンドでどんな技術が使われてきてどんな課題と向き合ってきたのか、そして今現在取り組んでいる課題や SmartHR ではどんなフロントエンドエンジニアが求められるのかなど、幅広いテーマが出てきました。 この記事ではその模様をお届けします。 目次 フロントエンドの Rails からの脱却とフロントエンド領域の確立 SmartHR UI の誕生 プロダクトの急増 複雑化する技術課題 テストの整備とロジック共通化の取り組み Next.js の導入 新たな技術的挑戦 フロントエンドミーティングの見直
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
Next.js のページ遷移を全力で止める
持続可能なソフトウェア開発を支える『GitHub CI/CD実践ガイド』
GitHub - 47ng/nuqs: Type-safe search params state manager for Next.js - Like React.useState, but stored in the URL query string.
React 19 Cheat Sheet
