結論 useEffectの中でsetStateを使いたくなったときは、まずは他の方法がないかを確認しよう！ 概要 React で開発を行う際、（useState の）setStateと、useEffectはほぼ必ず使います。 しかし、これらを適切に組み合わせないと、コードの複雑さが増し、予期しないバグが発生する可能性があります。 特に、useEffectの中でsetStateを使用することはアンチパターンに繋がる目印になりやすいです。今回の記事では、コード例を紹介しながら図や動画を交えて解説していきます。 useEffectの中でsetStateを使うアンチパターン 1.無限ループの発生 useEffectの依存配列にsetStateで管理する状態を指定すると、その状態が更新されるたびにuseEffectが再度実行され、再度setStateが更新されるという無限ループに陥る可能性があります

はじめに 私ごとではありますが、現場でdynamodbをメインのデータベースとして採用してから約2ヶ月が経ちました。 たった2ヶ月いう期間で、何度も心身ともに崩壊し、そして粘り強く復活を遂げ、かろうじて奇跡的にレベルアップをしてきました。 今回の記事では、これからdynamodbの導入を検討しているエンジニアの皆様に向けて、わずかながら現場で(汗と血を流しながら)得た知見を共有したいと思います。 主にdynamodbを導入するときに楽できる部分、楽できない、苦労する部分がどんな感じか、この記事でなんとなく伝えられたら嬉しいです。 以下では、4つの項目(採用基準、設計、開発、運用)に分けて、知見を羅列していきますが、私もまだ駆け出しdynamodberの域を出ないので、誤りやアドバイス等ございましたら、是非コメントいただきたいです！ なお、ここで紹介する内容は基本的にはAWSの公式ドキュメン

はじめに アーキテクチャ・デザイン全般 ソフトウェアアーキテクチャの基礎 Clean Architecture　達人に学ぶソフトウェアの構造と設計 Design It! ソフトウェアシステムアーキテクチャ構築の原理 データ指向アプリケーションデザイン マイクロサービス マイクロサービスアーキテクチャ マイクロサービスパターン 実践的システムデザインのためのコード解説 ソフトウェアアーキテクチャ・ハードパーツ ドメイン駆動設計 エリック・エヴァンスのドメイン駆動設計 ドメイン駆動設計入門 ボトムアップでわかる！ドメイン駆動設計の基本 現場で役立つシステム設計の原則 要件定義 はじめよう！プロセス設計 ～要件定義のその前に はじめよう！ 要件定義 ～ビギナーからベテランまで はじめよう！システム設計 ～要件定義のその後に Web, Web API Webを支える技術 プロになるためのWeb技術

はじめに 最近、ソフトウェアアーキテクチャを改めて勉強しようと2冊の本「ソフトウェアアーキテクチャの基礎 ―エンジニアリングに基づく体系的アプローチ」と「アーキテクトの教科書 価値を生むソフトウェアのアーキテクチャ構築」を読んだので要点と感想を備忘としてまとめます。 ソフトウェアアーキテクチャの基礎 ―エンジニアリングに基づく体系的アプローチ アーキテクトの教科書 価値を生むソフトウェアのアーキテクチャ構築 概要とポイント ソフトウェアアーキテクチャの基礎 ―エンジニアリングに基づく体系的アプローチ アーキテクチャには正解も間違いもない。ただトレードオフがあるだけだ。 この本はアーキテクチャを考えるための思考から、代表的なアーキテクチャスタイルの紹介やアーキテクトとしてのソフトスキル（対人スキルやチーム運営、キャリアパス等）まで網羅的にまとめられているものとなります。 アーキテクチャの技術

カケハシのプラットフォームチームでソフトウェアエンジニアをしているすてにゃん (id:stefafafan) です。今回はチームに配属されて数ヶ月の私が、いかにして社内ドキュメンテーションの階層構造を整理し、情報の検索性を向上させたかについてお話します。 はじめに この記事の想定読者 課題意識 メンバーへの共有と相談 社外事例の調査 esa の階層整理 第 1・第 2 階層の整理 ストック情報とフロー情報を意識した階層の整理 esa の機能をフル活用する 効果や今後について はじめに カケハシでは全社的にドキュメンテーションツールとして esa - 自律的なチームのための情報共有サービス を利用しています。それぞれのチームやプロダクトごとに階層を切ってドキュメントを書いています。 プラットフォームチームでは認証基盤などの社内プラットフォームシステムを開発しているため、自チームが運用する各種

こんにちは、リファクタリング大好きなミノ駆動です。 2024/07/20に発売された『ドメイン駆動設計をはじめよう ―ソフトウェアの実装と事業戦略を結びつける実践技法』を、訳者の増田亨氏よりご恵贈賜りました。 この記事は、この書籍の感想です。 著者の許可を得た上でのだいたんな意訳総評等の前にいの一番で伝えたいポイントです。 エリック・エヴァンス氏の『ドメイン駆動設計』は大変価値の高い知見が網羅されている一方、「ユビキタス言語」や「境界づけられたコンテキスト」といった独特の用語が登場したり、難しい言い回しをしていたり、読解がかなり難しい書籍です。 独自用語が登場するたびに「ユビキタス言語？なんだこれ？」とつまづきを覚え、内容理解に集中できず、読む手が止まってしまったことがある人も少なくないのではないでしょうか。 本書『ドメイン駆動設計をはじめよう』は『Learning Domain-Driv

開発部全体を見てるあのすごい人が、ある1つのチームのマネージャだったらどんな感じなんだろうなぁ？仕事がやりやすいんだろうなぁ？って考えることがある。それが今、僕のいるチームで起こっている。 VPoEの経験もあるいくおさんと、カケハシの同じチームで仕事をしている。いくおさんが1つのチームのエンジニアリングマネージャとしてついてくれているのって、とても贅沢だなぁと思っている。実際に仕事はめちゃくちゃやりやすいし、それだけじゃなくて、僕やチームみんなの心の支えになってくれている。 いくおさんが書籍を出した そんないくおさんが書籍を出した。この本がとてもいい本なので、みんなに読んでほしい。どうしていくおさんと一緒だと仕事がやりやすいのか、なぜ自分の持ってる力が引き出されるのか、その理由がこの本には書かれている。 www.shoeisha.co.jp いやー目標って苦手なんだけど・・・ 目標って聞く

この記事は、静的解析とビルドサイズ面で興味深いテーマでした。記事として自分の考えを書きます。 注意。あくまでビルドパフォーマンス視点での最適化です。強い意図があって、自分のドメインモデリングの方法論ではこれが最適なんだ、というなら元コードの方法論を止めるつもりはありません。 元記事のコードを minify するとどうなるか 元コードを参考に、それにアクセスするサンプルコードを書いてみます。 const sortingOptions = { priceDesc: { id: "priceDesc", sort: "price", order: "desc", label: "価格が高い順", }, priceAsc: { id: "priceAsc", sort: "price", order: "asc", label: "価格が安い順", }, ratingDesc: { id: "ra

ソースコードの一行一行は、経営判断そのものだ。 どの部分を汎用的につくり、どの部分をやっつけで作るか、そして、どの部分をパフォーマンス優先でつくり、どの部分を可読性優先でつくるかは、そのソフトウェアステムを使って今後どのようなビジネス展開をするか、ということと一体不可分だ。プログラマーは、絶え間なく改変されていく部分と、財産として今後も使われつづけそうな部分を意識しながらコーディングする。そして、ここでいう財産とは、プログラマが財産とみなすものであるだけでなく、同時に経営的・財務的な意味においても財産であり、会社のバランスシートの「資産」の項目に登場するような性質のものだということは、多くのエンジニアが漠然としかいしきしていないように見える。 「このルーチンは、時間がかかっても、汎用的なライブラリやフレームワークにしておこう」、とエンジニアが「なんとなく」決めたとき、実は、そのエンジニアは

いわゆる「ソフトウェア設計書」が設計ではなく、ソースコードが設計であるという話。 随筆です。考えマトメ中なので、ツッコミはそのあたり踏まえていただければ。 追記：ブコメに「設計の定義は？」とあったので末尾に追加しています。 追記(2024/8/15)：設計書ってなんだろう？というのも書いておきました。 ソフトウェアの「設計書」とはなんなのか - きしだのHatena このエントリで書いたのですけど、もうすこしちゃんと。 建築では多重下請けでやれてるのに業務システムでだめなのはなぜ？ - きしだのHatena このエントリでは次のように書いています。まあ、これで全てではあるのだけど。 「建築などの施工図面に相当するのはソースコードで、建築現場で多重下請けでやってる作業は、ソフトウェアだと(でも？)ビルドです」 あと「継続的デリバリーのソフトウェア工学」からの抜粋。 「継続的デリバリーのソフト

ライフハッカー・ジャパン （著者：Jeff Haden、翻訳：長谷睦（ガリレオ）） Aug. 08, 2024, 03:00 PM キャリア 105,042 グーグル（正確にはその親会社のアルファベット）は2023年1月、約1万2000人をレイオフする長期計画を発表しました。これは、全従業員の6％に相当する数です。 グーグルの幹部が｢従業員は我が社のもっとも大切な財産です｣というようなことを言っているのを聞いたら、そのあまりの言行不一致ぶりに目を剥いても無理ないでしょう。 しかし、同社が従業員をもっとも大切な財産と考えていることは確かなのです。 グーグルの人事部門は長年にわたり、従業員の職場での生活に関してありとあらゆる側面を分析し、生産性やイノベーション、エンゲージメントの向上に取り組んでいます。 その一例が今回紹介する｢最高のチームをつくる方法｣の分析です。 グーグルも大半の企業と同様

概要 4年ほどProductionで使っていたリッチテキストエディタ（Quill on Nuxt.js v2）をTiptap on Next.jsに移行しました。 既存のQuillエディタの使い勝手をTiptapで再現しつつ、改善できるところは改善しつつ、既存の4年分のリッチテキストデータが正しく編集できるようにしなければいけませんでした。 本記事では移行の具体的なプロセスを解説しようと思っていたのですが、リッチテキストエディタは前提知識があまりに多いため、前提となる知識や考え方を解説しているだけでそこそこのボリュームになりました。そこで、一旦考え方や前提知識をまとめた、という体で公開します。 本記事を読んでから各ライブラリのDocsを読んだりカスタマイズを始めたら、少しハードルが下がっていることかと思います。 対象読者の例 リッチテキストエディタに興味がある リッチテキストエディタの開発

原書と兄弟で肩を並べて 島田浩二@snoozer05さん訳の、8月26日発売「スタッフエンジニアの道―優れた技術専門職になるためのガイド」の感想のような記事を書きます。 スタッフエンジニアの道 ―優れた技術専門職になるためのガイド 作者:Tanya Reillyオライリー・ジャパンAmazon 翻訳レビューに参加した流れと、簡単な感想 今回、個人的には初めてとなる翻訳レビューに参加させてもらった関係で、物理本をご恵贈いただいた流れです。 まず圧倒的に信頼している技術書翻訳者*1であること、自分としても一応「VPoE」というタイトルで働いていたし領域的にも興味があること、翻訳レビューってやってみたいな〜！という憧れ の100点+100点+100点の合計1000000点！！！って感じの参加動機です。 snoozer05.hatenablog.jp で、しかも、参加が決定して書籍名を聞いたら「も

「やりたいことが見つからない」と『Will の呪い』に悩む学生・若手の方はそれなりにいます。そうした人たちに向けた Will, Can, Must の使い方についてのスライドです。 2024年7月6日に実施した

はじめに 自分が何者なのかを示すことの重要性が高まっている こんにちは、Watanabe Jin (@Sicut_study)です。 最近フリーランスでは大きな問題が起きている フリーランスとして受け入れをしたが、いきなり「飛んで消えてしまう」などトラブルが相次いで発生している 最近はフリーランスをNGとする企業も増えてきている では、なぜフリーランスをNGとしているのか これには大きく2つあるように思える フリーランスのスキルが低いことが目立っている フリーランスを信じることが難しくなっている スキル不足のフリーランスが増えた背景には、フリーランス1000万円といった過大広告によって経験があまりない状態からフリーランスになってしまった人があふれていること フリーランスの信用をするための材料(例えば法人化している、知名度があるなど)がないことからいつ無責任になるかわからない このような理由

ソート順の選択プルダウンがある一覧系ページを実装するとき、選択肢たちの管理方法に頭を悩ませることが多いと思います。 商品一覧ページの概要 ソート順プルダウンの選択肢たち 上の画像に示したような場合だと、 《クエリパラメータ》と《選択肢》の間の相互変換 ?sort=price&order=desc <--> 「価格が高い順」 《select の状態に使うための文字列》と《選択肢》の間の相互変換 <option value={id}>{label}</option> クエリパラメータが sort order の2つあり、それらをそのまま流用できないので 最低限でも、これらの変換ロジックを用意しておく必要がありますね。 この記事では、このような「選択肢と、それにまつわる変換ロジック群」を整理する方法を、高凝集・SSoT (Single Source of Truth; 信頼できる唯一の情報源)

はじめに ウホウホ。 Rustを使い始めてちょうど2年くらい経って、すこしRustのことがわかってきたので、改めてGoとRustのそれぞれの違いを整理したいなと思いこの記事を書きました。 筆者はウェブ開発の経験しかないので、ウェブを中心にまとめています。 気づいたらかなりな量になってしまったのとGopher向けにRustを紹介するような記事になってしまいましたが、よければ読んでみてください。 筆者について Goを使い始めて7年ほど経っていて、これまでCLI/TUIツールをいくつか作ってきました。 スペシャリストではないですが、プロダクトでGoを書く分には特に問題ないレベルかなと思います。 Rustは2022年夏ころから使い始めてちょうど2年ほど経ちました。 なにかツールを作ったわけではないですが、勉強がてらにいくつか作ったもの・書いた本があります。 普通にRustを書く分には問題ないですが

はじめに Reactパッケージのコードは難しいらしいのですが、React を利用している人なら誰でも中身を読んでみたい！と思いますよね。 日々 React を使ってコードを書いていますが、function 関数でいい感じ HTML っぽい<p>Hello, World</p>コードを書いて、その後にyarn devしてみただけで、画面にHello, Worldが現れてしまう React なのですが、その動きはまるで魔法みたいだなと思っています。 ということで、React パッケージを読むことに挑戦したお話をさせてください。 本記事では以下について書いていきます。 React を読むにあたって取り組んだ流れ 今回の取り組みで学んだ React 内部の仕組みや API などの紹介やその所感 我々が普段 React を触っている時には全く意識しないけれど、よくよく考えたら魔法みたいに不思議なその

『手を動かしてわかるクリーンアーキテクチャ 』の第二章の冒頭に登場する話題に共感したので紹介。 従来の多層アーキテクチャでは、データベースを中心にアプリケーションの 開発が行なわれます。この場合、Web 層はドメイン層に依存し、ドメイン層は 永続化層、つまり、データベースに依存することになります。そうなると、す べてのものは永続化層上に構築されることになり、その結果、いくつかの要因 が絡まり合って、問題が起きやすくなります。 手を動かしてわかるクリーンアーキテクチャ　ヘキサゴナルアーキテクチャによるクリーンなアプリケーション開発 20p 手を動かしてわかるクリーンアーキテクチャ　ヘキサゴナルアーキテクチャによるクリーンなアプリケーション開発 作者:Tom Hombergs,須田 智之インプレスAmazon 著者によれば、機能開発をデータベース中心に設計すると、ドメイン層と永続化層の密結合が

2024年度リクルート エンジニアコース新人研修の講義資料です