React19のRCが発表され数ヶ月が経ちました。Next.jsではReact19のExperimentalな機能を使った実装をいち早くしていたので、少し馴染みのあるアップデートが多かったように思います。 Next.js（特にApp Router）においてReact19のAPIやHooksをどのように使うべきかはNext.jsのドキュメントを見れば大体のベストプラクティスが見えてきます。ですが、実際の開発現場ではApp Routerを採用しているケース以外にもVite+ReactやPages Router, Remixなどと様々な実装があるのが現実です。 そこでこの記事では、特にVite+Reactのスタックを前提にReact19の新機能をいかに活用できるか整理したいと考えています。 また、React19の新機能を見た時にTanStack QueryやSWRのようなサードパーティの状態管理

プログラマ、テスト駆動開発者 和田卓人 学生時代にソフトウェア工学を学び、オブジェクト指向分析/設計に傾倒。執筆活動や講演、ハンズオンイベントなどを通じてテスト駆動開発を広めようと努力している。『プログラマが知るべき97のこと』（オライリージャパン、2010）監修。『SQLアンチパターン』（オライリージャパン、2013）監訳。『テスト駆動開発』（オーム社、2017）翻訳。『事業をエンジニアリングする技術者たち』（ラムダノート、2022）編者。テストライブラリ power-assert-js 作者。 講演や執筆などを通じ、日本におけるテスト駆動開発のエバンジェリストとして知られる和田卓人さん。 TDDとは何かを改めて言語化してもらった前回の記事では、「テストを書かずに進むのが合理的といえるときはある。でも、後からテストを書くのって難しいしつらい」とのお話がありました。 テストが書かれないまま

2024年7月14日に出版された新著「エンジニアリングマネジャー入門」を読んだ📕 本書は「人と向かい合う」ことにフォーカスしていて，エンジニアリングマネジャーがどんなことを日々考えて，どんなことに日々対処しているのかという実践的なノウハウがまとまっていた．著者が Google をはじめとした多くの組織で実践してきた体験談がベースになっているからこその説得力も感じられる一冊だった💡 エンジニアリングが好きな私たちのための　エンジニアリングマネジャー入門 作者:サラ・ドラスナー日本能率協会マネジメントセンターAmazon 本書は翻訳を担当された @iwashi86 さんに送っていただいた❗️活動量の多さと影響力の広さに驚きです🎉 出版おめでとうございます〜 ＼( 'ω')／ 7月14日に出版される「エンジニアリングマネジャー入門」を翻訳された iwashi-san に送っていただきました

Zli × サイバーエージェント 合同LT 2024/07/14 https://zli.connpass.com/event/319572/ ReactやSwiftUIのような宣言的UIの「原理」を、10分のLTになんとか詰め込んでみました。 Reactフックは名詞起点 = オブジェクト指向…

大吉祥寺PM 2024

useEffectはReactの中でも扱いの難しいフックとして知られています。Reactで開発を行う中でuseEffectを検討するタイミングや適切な使い方について悩んだ経験のある方も多いのではないでしょうか。 本記事では、useEffectの目的を把握し、どのような場合にuseEffectの使用を検討すべきかについて考えていきたいと思います。 コンポーネントの純粋性と副作用 まずuseEffectについて考える前に、コンポーネントの純粋性について理解する必要があります。Reactにおいて純粋性は重要な概念の1つです。 前提として、Reactではすべてのコンポーネントが純関数あることを仮定しています。 Reactは、あなたが書くすべてのコンポーネントが純関数であると仮定しています。 参照：https://ja.react.dev/learn/keeping-components-pure#

Django 開発の最新トレンドを知りたいですか？ PyCharm は Django Foundation と連携して世界中 4,000 人以上の Django 開発者を調査し、その回答を基にフレームワークの使用に関するトレンドを解析しました。 このブログ記事では、次のような主な結果をご紹介します。 Django 開発者の 3 人に 1 人が Flask または FastAPI も使用している。 ほとんどの開発者がフルスタック開発と API 開発の両方に Django を使用している。 Django 開発者の 61% が非同期テクノロジーを使用している。 その他にも多くのインサイトがあります！ これらの結果を詳しく確認し、インフォグラフィックによる図説も利用しながら Django 開発のその他のトレンドを発見しましょう。 バックエンド: Django 開発者 3 人に 1 人が Flask

はじめに こんにちは。サーバーサイドエンジニアの mokuo です。 最近、ミニマムな React アプリを実装する機会がありました。 社内のメンバーにアドバイスをもらいながら、今（2024年前半） React アプリをミニマムに作るならこんな感じかな、という構成になった気がするので、ご紹介したいと思います。 実例の1つとして参考にしていただけますと、幸いです。 はじめに 本文 📝 機能要件 ⚒️ 採用したツール (npm モジュール) 📁 ディレクトリ構成 👨‍💻 プロトタイピングの実施 🍩 おまけ コンポーネント設計について フロントエンドに DDD のエッセンスを取り入れてみたい おわりに 本文 📝 機能要件 社内の限られた CS メンバーのみが利用する、管理画面を開発しました。 バックエンドは Golang で実装される API サーバーで、認証機能以外だと、2つの機能

個人的に「Webサービスの公開前チェックリスト」を作っていたのですが、けっこう育ってきたので公開します。このリストは、過去に自分がミスしたときや、情報収集する中で「明日は我が身…」と思ったときなどに個人的にメモしてきたものをまとめた内容になります。 セキュリティ 認証に関わるCookieの属性 HttpOnly属性が設定されていること XSSの緩和策 SameSite属性がLaxもしくはStrictになっていること 主にCSRF対策のため。Laxの場合、GETリクエストで更新処理を行っているエンドポイントがないか合わせて確認 Secure属性が設定されていること HTTPS通信でのみCookieが送られるように Domain属性が適切に設定されていること サブドメインにもCookieが送られる設定の場合、他のサブドメインのサイトに脆弱性があるとそこからインシデントに繋がるリスクを理解してお

これはなに 自身のプロジェクトに適合した ESLint Config の設計および実装方法についてまとめたものです。 業務や趣味プロに関わらず、 JavaScript / TypeScript でコーディングする際に ESLint は非常に有用なツールであり、広く使われています。ほとんどの場合において ESLint 基盤はプロジェクトごとに必要なパッケージをインストールして設定ファイルを作成し、構築されます。しかしその設定内容がプロジェクト間で重複することは珍しくなく、プロジェクトの数が増えるにつれ冗長となりがちです。そこで、複数プロジェクト間で共通のルールセットを定義して単一の ESLint Config として再利用することで、メンテナンス性や再利用性の向上が期待できます。本稿では、そのような用途で使える自分だけの ESLint Config を設計・実装する方法を紹介します。 前提

javascripter です。ハローでは、プロダクトのローンチ前からAutoReserve の開発に関わっています。 今回は、筆者が社内で書いている技術ガイドラインについて紹介します。 はじめに ハローでは、高品質なコードを維持し、開発チームの技術レベル向上を図るため、社内で継続的に技術Tipsやガイドラインの整備・蓄積を行っています。 チーム横断的に、有用な技術Tips、ベストプラクティス・コーディングガイドラインなど情報をNotion上に集約し、自由にエンジニアが閲覧・編集できるようになっています。 この取り組みの目的は以下の通りです： コード品質の向上と統一 開発チームメンバーの技術スキル向上 「どう」直すかでではなく「なぜ」そう修正すべきかまで理解してる人を増やす 効率的な開発プロセスの確立 新メンバーのオンボーディング支援 今回紹介するドキュメント 今回は、その中から「reac

技術的負債を抱えたレガシーコード。変なメソッド名と入り組んだロジック、リファクタリングするならどちらが先？（前編） ソフトウェアの品質をテーマに研究をしている名古屋大学 森崎研究室は、ソフトウェアの技術的負債をなんらかの形で数値化する手法の研究の一環として、コードの読みにくさの原因となる要因などを分析した研究結果を発表するイベントをオンラインで開催しました。 今回発表された研究では、技術的負債を抱えたレガシーコードのリファクタリングで取り除かれた問題の90％以上が、メソッド名と実際の関数の動作が一致していない、あるいは関数名とコメントが矛盾しているなどの「命名的問題」、もしくは複雑で読みにくい多数の条件分岐や深いネストなどを抱えた「構造的問題」のいずれかであるという先行研究があることを踏まえ、どちらを優先してリファクタリングすると保守性や可読性が高くなるかを調査しています。 具体的には、命

2024年6月29日 Findy 開発生産性カンファレンス2024 Closing Keynote https://dev-productivity-con.findy-code.io/2024

useEffect を使って「初回以外の再レンダリング時に実行される処理」を書くにはどうすれば良いのか？ という疑問を、たまに目にします。 たとえば、以下のような仕様の、「商品価格を編集する画面」を作ることを考えてみましょう。 日本での販売価格入力 ページ読み込み時には初期値が入っている アメリカでの販売価格入力 ページ読み込み時には、初期値が入っている 日本での販売価格入力に入力するたび、その1/100の値が自動で入力される あくまで、入力の参考にするため、というイメージ この欄に入力すれば、上書きできる そもそも、こういった自動入力は「入力するたび」ではなく、「フォーカスを外したとき」にするのが定石だと思いますが、 useEffect の話がしたいので、あえてこのような仕様に設定しています。 ❌️ useEffect を使って変更検知しようとすると暴発する 《日本での販売価格 japa

はじめに エンジニアの皆様、テストコードはちゃんと書けておりますでしょうか？（挨拶） どんな開発言語や開発手法を導入していたとしても、アプリケーションの機能実装とテストは表裏一体であると言えます。場合によっては機能の作り込みよりも時間をかけるべきケースが多いくらい重要である（・・・と信じたい）反面、デッドラインが近づくにつれて真っ先に工数が削られやすく軽視されがちな工程でもあります。 時間に追われてテストコードを書いた結果、テストの体をなしていないコードになっていたり後で見返したときに記述が煩雑すぎてメンテ不能になっていたり・・・といった苦い経験は誰しもがあるかと思います。かくいう自分もそんなことは多々ありました。 そんな今までの経験則を基に「自分がテストコードを書くにあたってどんなことを意識しているのか？」をいくつかピックアップして備忘録も兼ねて紹介したいと思います。 一応注意なのですが

はじめに Insight EdgeのLead Engineerの日下です。 弊社ではフロントエンドのスクラッチ開発にReactを採用することが多いのですが、フロントエンドの保守性はしばしば課題となっています。 というのも、要求仕様が曖昧なPoC（Proof of Concept）の段階からMVP（Minimum Viable Product）として開発を進めることも多く、 ビジネス側ユーザの意見にも左右されながらアプリを改善していくため、画面のレイアウトやデザイン、画面遷移の変更が多発するためです。 こうした状況の中でスピードと品質を両立するためには良質なテストコードが不可欠なのはもちろん、 プロダクトコードとテストコードの双方とも、変化に対応しやすく作る必要があります。 過去にテスト駆動開発を挫折した要因 実は、筆者は過去にReactのテスト駆動開発の実践、および社内普及活動に挑戦したこ

誇り高き「マネージャー」を全うするために。“理想のEM”小田中氏を支えた珠玉の5冊 2024年6月20日 株式会社カケハシ EM 小田中 育生 筑波大学大学院修了後、外資系半導体企業を経て、2009年に株式会社ナビタイムジャパンに入社。2019年からはVPoEを務める。2023年10月に、EMとして株式会社カケハシに入社。薬局DXを支えるVertical SaaS「Musubi」をコアプロダクトに位置づけ、「しなやかな医療体験」を実現するべく新規事業のプロダクト開発にコミットしている。著書に『いちばんやさしいアジャイル開発の教本 人気講師が教えるDXを支える開発手法』（2020年、インプレス、共著）がある。 X note エンジニアがマネジメントに踏み出すとき、今まで向き合ってきた「技術やシステム」と、マネージャーとして向き合うべき「組織や人」の特性の違いに戸惑う人も少なくありません。 エ

はじめに StorybookとPlaywrightを連携してテストすることで、思っていた以上に良い開発体験が得られたので紹介します。 今回の記事で紹介するテストは以下のリポジトリで公開しています。 具体的には以下の点が最高でした。 独立したコンポーネント開発 Storybookを利用することで、UIコンポーネントを独立して開発・テストできます。これにより、コンポーネントの再利用性が向上し、効率的な開発が可能になります。 シナリオベースのテスト Playwrightを使ってシナリオベースのテストを実行できます。これにより、ユーザーの実際の操作に近い状況でのテストが可能となり、アプリケーションの品質を高めることができます。 クロスブラウザテストの容易さ Playwrightは、複数のブラウザでの自動テストをサポートしています。これにより、異なるブラウザでの動作検証が容易になり、互換性の問題を効

JaSST nano vol.37 (https://jasst-nano.connpass.com/event/319899/) で登壇した内容です。 「ユニットテストの定義はこうだよ」とか「うちのディレクトリ構成はこうね。DIの方針はこう」とHowだけ言われるより「良いユニットテストってこうだよ。だからプロダクションコード・テストコードはこうやって書いてこうね」の方が深みがでませんか？ ということで、名著を読んで「良いユニットテストの特徴とは？」みたいなものを整理していきました。