Next.js 14.1など: Cybozu Frontend Weekly (2024-01-30号)
はじめに こんにちは！サイボウズ株式会社フロントエンドエキスパートチームの BaHo です。 サイボウズでは毎週火曜日にFrontend Weeklyという「1週間の間にあったフロントエンドニュースを共有する会」を社内で開催しています。 今回は、2024/01/30のFrontend Weeklyで取り上げた記事や話題を紹介します。 取り上げた記事・話題 TSKaigi 2024 TypeScriptをテーマとした新しい技術カンファレンスです。 Next.js 14.1 Next.js 14.1がリリースされました。 主にセルフホスティング周りの対応が盛り込まれています。 Build a Next.js app in Storybook with React Server Components and Mock Service Worker MSWを使ってRSCをStorybook上で動か
技術的負債解消への取り組み｜レガシーコード改善t-wadaさんワークショップを開催！｜「はたらく」を楽しくするnote / from Works Human Intelligence
こんにちは。Developer Relations (技術広報）担当の波多野です。 弊社では、約1,200法人グループへの導入実績を持ち、月間400万人以上の給与計算を回している大手法人および公共・公益法人向け統合人事システム「COMPANY」を開発しています。 2023年12月4日、日本のテスト駆動開発の第一人者である和田卓人さん（以下t-wadaさん）をお招きし、実際の「COMPANY」製品ソースコードを利用したレガシーコード改善ワークショップの第2回を開催いただきました！ ワークショップ開催の背景WHIが抱える技術的負債について長期にわたるサービス提供のためには技術的負債への取り組みが重要です。20年以上サービスを提供してきた我々の製品「COMPANY」も技術的負債に直面しており、サポート対象のソースコードの複雑化や開発の課題が見えています。これらの課題への取り組みとして開発文化を少
テストの学習へようこそ！ | web.dev
テストの学習へようこそ！ コレクションでコンテンツを整理 必要に応じて、コンテンツの保存と分類を行います。 このコースでは、ウェブ用のテストの概要と探索について説明します。 このコースで学習する内容は次のとおりです。 テストの基礎 自動テストと手動テスト テストを実施する場所と方法 ベスト プラクティス 何をテストすべきか、誰に責任があるのか、目的そのものとしてではなく、目的を達成するために手段をテストすることを検討する方法など、テストの理念。 このコースには、学習に役立つ簡潔で実用的なサンプルコードも含まれています。 コースのスコープには、Node.js などの環境で実行される、フロントエンドの JavaScript とドキュメント モデル、バックエンドでのライブラリ テストが含まれます。テストの経験はありませんが、JavaScript の基礎知識と Node.js などに関する経験が必
まだ日本ではWebアクセシビリティが義務化されません（2024年4月から6月の時点では）
筆者は、より多くのWebサイトやWebサービスが、より高いアクセシビリティをもつものになることを強く願っています。 （2024/02/04追記）もう少しわかりやすく書き直したものを投稿しました Webアクセシビリティと合理的配慮 「2024年からWebアクセシビリティ対応が義務化される」というようなことが書かれたWeb上の記事が増えているようです。 しかし、2024年1月現在、日本で「Webアクセシビリティ」について法的な義務が発生している・または2024年内に発生するようになる法的な根拠はおそらくありません。法律の改正が施行され、「やったほうがいい」度合いは高まっていると解釈できますが、「Webアクセシビリティは義務です」とまでは明言できないはずです。 ところが、「アクセシビリティ 義務化」などでWebを検索すると、「2024年にアクセシビリティが義務化します」と説明していたり、あるいは
SameSite属性とCSRFとHSTS - Cookieの基礎知識からブラウザごとのエッジケースまでおさらいする - Flatt Security Blog
こんにちは、 @okazu_dm です。 この記事は、CookieのSameSite属性についての解説と、その中でも例外的な挙動についての解説記事です。 サードパーティCookieやCSRF対策の文脈でCookieのSameSite属性に関してはご存知の方も多いと思います。本記事でCookieの基礎から最近のブラウザ上でのSameSite属性の扱いについて触れつつ、最終的にHSTS(HTTP Strict Transport Security)のような注意点を含めて振り返るのに役立てていただければと思います。 前提条件 Cookieについて Cookieの属性について SameSite属性について SameSite属性に関する落とし穴 SameSite属性を指定しなかった場合の挙動 SameSite: Strictでも攻撃が成功するケース 例1: スキームだけ違うケース 例2: サブドメイ
Interop 2024の取り組みスタートなど : Cybozu Frontend Weekly (2024-02-06号)
Interop 2024の取り組みスタートなど : Cybozu Frontend Weekly (2024-02-06号) こんにちは! サイボウズ株式会社フロントエンドエンジニアの Saji (@sajikix) です。 はじめに サイボウズでは毎週火曜日に Frontend Weekly という「一週間にあったフロントエンドニュースを共有する会」を社内で開催しています。 今回は、2024/02/06 の Frontend Weekly で取り上げた記事や話題を紹介します。 取り上げた記事・話題 テストの学習へようこそ！ | web.dev web.dev が公開している学習コンテンツのシリーズにテストのコンテンツが追加されました。 web アプリケーションのテストに不慣れな初学者が一通り学ぶ際などに適していそうです。一部のコンテンツは近日提供予定になっており今後の更新も楽しみな内容と
TC39 に新設された Stage 2.7 について | blog.jxck.io
Intro TC39 の Stage 2 と Stage 3 の間に、新たに Stage 2.7 が追加された。 これはなんだろうと思った人が、検索で辿りつけるよう、その経緯と目的をまとめる。 TC39 Stages TC39 は、 ECMAScript (つまりまあ JS) の新機能を議論する Task Group だ。 ここでは、比較的自由に新機能の提案がなされ、定期的に行われるミーティングでの議論や、実装からのフィードバックを経て、 Stage が上がっていく仕組みをとっている。 旧来の Stage は 0~4 まであった。ざっくり言うと以下のようなものだ。
開発モード(Dev Mode)に関するよくある質問 | Figma Community
2月1日に正式リリースされた開発モード(Dev Mode)についてのよくある質問や、関連するリソースを集めたFigJamです。
エンジニア向けFigmaの使い方を徹底解説 | 株式会社LIG(リグ)｜DX支援・システム開発・Web制作
続いてそれぞれのユースケースについて、具体的な使い方を解説します。 Figmaの使い方・操作方法 デザインをもとにコーディングする場合 ‐ Dev mode Dev modeの利用がおすすめです。現在ベータ版で公開されており、2024年中に有料プランのみ使用可能となります。 主な機能として、作成したデザインをもとにコードを自動で生成させることができます。CSS、iOSのSwiftUI、AndroidのXMLなどに対応しています。 具体的な使い方は次のとおりです。今回はログイン画面を例にしています。 画面をセクションで囲む セクション名の右横のコードアイコンをクリック Open in Dev modeでDev modeに切り替える コード化したいコンポーネントを選択すると、右側のInspectでコードを参照できる ワイヤーフレームを作成する場合 ‐ コンポーネント機能 コンポーネント機能を利
デザインの公共性 | Figma Blog
デジタル技術をユーザーフレンドリーにするためには、デザインの力が欠かせません。表層的な部分のみならず、サービス全体のデザインから携わり、さらにそのナレッジを共有していくことでよりスマートな課題解決に結びつけられます。 デジタル庁では、Figmaのデザインプラットフォームなどの各種ツールを導入し、誰一人残されない、人にやさしいデジタル化に取り組んでいます。ここでは、Figmaが主催「デザイン経営2023」カンファレンスから、デジタル庁 サービスデザインユニットのマネジャーを務める鈴木伸緒氏講演内容を抜粋し、行政におけるデザインの役割についてご紹介します。 イントロダクション日本の行政サービスのデジタル化を推進する組織として、2022年に発足した『デジタル庁』。そのミッション「誰一人取り残されない、人に優しいデジタル化を。」のもとに、省庁や自治体をまたいだデータ連携や、デジタル技術を用いた安全
愛してやまないAWSで展開するセキュリティ対策戦略
TL;DR セキュリティ対策には予防的統制と発見的統制の2つの観点が欠かせない AWSが提供するセキュリティサービスが予防的・発見的統制にどう寄与するかを解説 セキュリティ対策は、リスクの特定と可視化、リスク分析と優先度付け、施策費用の算出、経営層への報告とサポートの獲得で進めるべし セキュリティは、単に技術やツールを導入するだけではなく、組織全体の意識や文化、そして継続的な改善が求められる はじめに レバテック開発部レバテックプラットフォーム開発チームに所属している内藤です。 普段は、バックエンドの設計や実装、さらにインフラの構築まで幅広く担当しています。 最近、私は弊社開発部を代表して（色々な方面から怒られそう笑）、AWSセキュリティインシデント擬似体験GameDayに参加する機会に恵まれました。このイベントでは、セキュリティインシデントへの対応方法や予防策など、実際のインシデント調査
2024-02-05のJS: TypeScript 5.4 Beta、Learn Testing/Performance、Interop 2024
JSer.info #679 - TypeScript 5.4 Betaがリリースされました。 Announcing TypeScript 5.4 Beta - TypeScript クロージャーにおけるNarrowing結果の改善、NoInfer Utility Typeが追加されています。 また、ES2024のObject.groupBy/Map.groupByをサポート、Import Attributesのサポートが追加されています。 そのほかには、target: "ES3"やoutオプションなどを非推奨として、次のTypeScript 5.5で削除されることがアナウンスされています。TypeScript 5.5で削除されるオプションは、次のIssueにまとめられています。 Feedback: 5.0 deprecations · Issue #51909 · microsoft/T
Storybook 8 Beta
🚀Update March 12: Storybook 8 is out now!Storybook 8 is now available to try in beta! This latest release continues Storybook’s quest of giving you an instant-on, seamless environment for frontend development. Check out the release highlights and try the beta release today! 🚀 Major performance improvements 🆕 Visual tests workflow 📱 Polished mobile UI 🔬 Improved test utilities ⚛️ React Server
GitHubのMerge Queueとは何か？それと、認識しておきたいこと - Mitsuyuki.Shiiba
同僚に「GitHubのMerge Queueってあんまり知らないんだけど、どう思う？」って聞かれて「あー。僕もあれよく分かってないんだよね」って返事をして、ちょうどいい機会なので見てみた 見てみた感想としては、いくつか気をつけておきたい点があるけど、チームの開発の進め方にうまくはまれば便利な機能だな、という感じ（なんでもそうか・・・） Merge Queueって? 2023年の7月にGAになったGitHubの機能 プルリクエストをマージするときに「マージ先のブランチ（ベースブランチ）の最新の変更を取り込んでからChecks（つまりCI）を実行して、それが成功したらマージしといて！」ってお願いできる便利機能。名前のとおりQueueになっているので複数のプルリクエストからenqueueできて前から順番に処理してくれる そうは言われても最初に説明を見た僕は「？？？」状態だった。「なんでこんな機能
新任エンジニアリングマネージャーのための「ぼうけんのしょ」
2024/02/10に行われたYAPC::Hiroshima 2024で発表した内容です。 ■リンク LayerXにおけるEM実践例のご紹介 https://tech.layerx.co.jp/entry/2023/12/20/115724 カジュアル面談 https://jobs.layerx.co.jp/7b31f370acc0411994174700fe212287 LayerX Casual Night（2024/02/13, 2024/02/26） https://jobs.layerx.co.jp/casual-night EMゆるミートアップ vol.6（2024/03/01@ビットキー） https://em-yuru-meetup.connpass.com/event/308552/ ■参考・出典 アンドリュー・S・グローブ「HIGH OUTPUT MANAGEMENT」
エンジニアが今日から始める英語学習の継続方法 - Uzabase for Engineers
1. はじめに こんにちは。ソーシャル経済メディア「NewsPicks」でエンジニアをしております小林です！ 皆さんは英語学習に取り組んでいらっしゃいますか？エンジニアとして技術ドキュメントや国際カンファレンスの動画等で英語に触れる機会があると思います。また、技術的なスキルはあるが、英語を話すことが苦手な場合、将来的に市場でどう評価されているかの動向も気になるところです。 最新の2023年度の報告によると、世界的にITエンジニアの給与が上昇している一方、日本では前年比USドルベースで5.9%減少、現地通貨（円）ベースでもわずか0.4%増加に留まっています。残念ながら、世界と比較した時に日本の給与の優位性がなかった一年となりました。今後もこの差が開く一方であれば、個人や企業が国際市場で競争力を保つために、英語能力の向上も必要になる機会が高まっていくことを示唆しています。 しかし、「英語力を伸
業務でAWSを利用する時に知っておくべきポイント10選 - Qiita
2024年1月時点のAWSベストプラクティスに従って作成しました 好評でしたら続編も検討します 1. 環境ごとにアカウントを分離する 本番、検証、開発ごとにアカウントを分割しましょう ✕良くない例 ◎良い例 最初にアカウント分割しておかないと、後で分割するのはとても大変です アカウントを分割することで「検証と思って作業したら、実は本番だった」のような事故を減らすことができます コストがアカウント単位で集計されるため、環境ごとのコストを簡単に算出することができます AWS Organizationsを使用することで、各環境に応じた権限設定が簡単にでき、ガバナンスを強化することができます AWSアカウントはAWS Control TowerのAccount Factoryを使用することで、クレジットカード情報を都度入力することなく簡単にアカウントの払い出しが可能です また、AWS Contro
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
変更容易性と理解容易性を支える自動テスト（2024/02版） / Automated Test Knowledge from Savanna 202402 YAPC::Hiroshima edition
キャリア理論をもとに考えるエンジニアのキャリア/Engineer's careers based on career theory
非同期開発体制を支えるドキュメント文化 / YAPC::Hiroshima 2024
VISAカードの裏側と “手が掛かる” 決済システムの育て方
経営・意思・エンジニアリング