Render hooks とは、ReactにおいてカスタムフックからJSX式を返す設計パターンのことです。リンク先は私が当時在籍していた会社のテックブログに書いた記事で、当時の会社でこの設計パターンがハマる箇所に出会ったためアイデアを記事化したものです。ちなみに、Render hooksという命名は私ではなく当時の私の上司です。 私は当時から今までずっとこのパターンを推奨しているのですが、あまり流行る気配がありません。そこで、この記事では皆さんがこのパターンの考え方にもう少し納得できるように、render hooksパターンは普通のコンポーネントの拡張であるという見方をご紹介します。 Render hooksパターンの概要 Render hooksパターンは、UIの実装(JSX)と、そのUIに関連するロジック(たとえばステート)をまとめてカスタムフックから提供することを指します。簡単な例を
はじめに App Router はこれまでの React や Pages Router による書き方と大きく異なります。これは、React Server Components(RSC) というアーキテクチャが導入され、開発の考え方が大きく変化したからです。そのため、App Router を理解するためには RSC の理解が必要になります。 しかし、私は RSC の理解に苦戦しました。 この記事は、そんな私が RSC の理解を深めるために様々な記事から学んだ内容を言語化したものです。 まず初めに、CSR や SSR といったこれまでのレンダリング手法について復習し、これらが抱える問題を確認します。その後、その問題を解決する RSC が何者なのか?を理解します。 CSR の復習 React では CSR 戦略が用いられてきました。 CSR では、クライアントが受け取るのは次のような中身のない空
数値上はこうなるものの、意図的な短期的メンテナンスや、意図しない障害でも1回あたりの期間が短ければ、その期間に積まれるはずだった売上は、その復帰後に売り上がる場合も多いでしょう。その辺りは、ユーザーの信頼を損なわない方法や運用を心がけることで、十分に埋められる可能性を含む性質です。 しかしこれが、あまりに高頻度であったり長期間になると、その復帰後に停止期間分を含めた売り上げにならず、そのまま機会損失となる可能性が高まります。いわゆるユーザー離れというやつです。その損失だけで済めばまだマシで、普通に考えればその後に想定していた売上も減少し続け、元に戻すには相応の時間と労力を伴うでしょうから、数値以上の痛手となるはずです。 こう考えていくと、運用関係者が健全であれば、無理に100%の可用性を目指さず少なくとも合計99%以上となる停止猶予を持たせた運用とし、数日を跨ぐような連続した長期間の停止だ
ソフトウェアエンジニアは、どのように事業に貢献すべきか? 宿泊施設やレストランの予約サービスを提供する株式会社一休で執行役員CTOを務める伊藤直也さんは、2016年に入社しておよそ2年間、心の奥に抱えた悩みを解消できないまま仕事をしてきました。 伊藤さんは、2000年代から複数のWeb系テックカンパニーで技術部門のリーダーとして活躍し、現在でも利用される個人向けWebサービスのローンチをいくつか手掛けています。一休には入社以前からフリーランスで技術顧問を務めており、会社がヤフーグループ(当時)に入って経営陣が一新されるタイミングで、代表取締役CEOとなった榊淳さんの要請を受けて入社しました。 当時は全て.NETだったというサービス基盤の刷新や技術的負債の解消、開発組織の整備といったエンジニアリングにおいて重要な改善を進めてきましたが、あるとき自身が「事業に貢献していない」ことを明確に意識す
転職をしてはや10ヶ月ほど経ちました。業務で英語を使うようになったので、私もしくは同僚がよく使う英会話のフレーズを紹介します。自分のメモも兼ねています。 私のバックグラウンド エンジニアとして某会社に勤務しております。会社のメンバーは外国の方が多く、状況にもよりますが全体の40~50%くらいは英語でミーティング、Slackでも英語でやり取りすることが多々あります。そんな中で気付きとしてあったのが、同じ表現を使って会話をすることが多いなという点です。ある程度パターンとしていくつかのフレーズを覚えておけばそれなりに業務の会話ができるのでは?と思いこの記事を書いています。なお、以下私の環境については注意してください。 外国の方が多いといっても、ノンネイティブや日本人も多く、英語ができない人に対しても理解がある環境です。(ネイティブ90%以上といった環境とは違う) エンジニア同士の会話が多いので、
自走プログラマー 【抜粋版】¶ 2024年08月18日 更新 このサイトについて¶ 書籍『 自走プログラマー 』120の各トピックを抜粋して公開しています。 本書で扱っている問題やベストプラクティスを参照や引用しやすくすることが目的です。 ぜひ、blogやコードレビュー等で引用し、活用してもらえたら嬉しいです。 抜粋版は書籍版に比べて詳細なコードや解説を省いています。 要点は本開かなくても分かるようにしていますが、背景や考え方などについて詳しく知りたい方は、書籍をご参照ください。 ライセンスについて¶ 書籍および本サイトの著作権は 株式会社ビープラウド にあります。 掲載されているソースコードのライセンスは CC0 (パブリック・ドメイン)とします リンク¶ 正誤表 著者・関係者による紹介blog 目次¶
公開日 2024/06/19更新日 2024/07/25身近なBtoCサービスを支えるアーキテクチャ大解剖 技術選定のポイントと今後の展望 多くのIT企業では、ユーザーに対してより高品質で安定した体験を提供するために、システムアーキテクチャを進化させ続けています。 本特集では、日常生活の中で多くのユーザーに利用されているサービスのアーキテクチャ設計に携わるエンジニアの方々から、技術選定の背景や意図、そして現在のアーキテクチャの課題から未来への展望まで、詳しく伺いました。この記事を通じて、各企業のエンジニアたちがどのように技術的な課題を克服し、システムの柔軟性と効率を高めているのか、知見を得ていただければ幸いです。 ※ご紹介は企業名のアルファベット順となっております アソビュー株式会社 アソビュー株式会社では「遊び」という領域に対し、マーケットプレイス型EC「アソビュー!」やD2C型SaaS
こんにちは、株式会社FIXER@名古屋オフィスの村上です。 クラウドインフラのシステム基盤構築にTerraformを採用している組織は多いですね。村上自身は特別な要件がない限り、”どのクラウドを使う場合でも” システム基盤構築にはTerraformを使いたいと考えているインフラエンジニアです。 私は、Terraformを3年間使用する中で、6つの課題に直面してきました。 このブログでは、実際の開発現場でどのような問題が起こったのか、またその問題をどのように回避、あるいは対策すべきだったのかについて、綴ってみました。 【課題1】プロジェクト始動直後にTerraform開発を開始したため、後工程で改修タスクが多発 SI案件では、クライアントが提案する調達要件RFPをもとに、ITベンダーがヒアリングを行いながら要件定義を進めていきます。 要件定義の一例として以下のようなものがあります。 クラウド
こんにちは。検索基盤部の橘です。ZOZOTOWNでは、商品検索エンジンとしてElasticsearchを利用し、大規模なデータに対して高速な全文検索を実現しています。 Elasticsearchに関する取り組みは以下の記事をご覧ください。 techblog.zozo.com 検索基盤部では、ZOZOTOWNの検索結果の品質向上を目指し、新しい検索手法の導入を検討しています。本記事ではベクトル検索と呼ばれる検索手法に関して得た知見を紹介します。 ※本記事はElasticsearchバージョン8.9に関する内容となっています。 目次 目次 ベクトル検索とは ベクトル検索に期待すること Elasticsearchを使用したベクトル検索の導入 導入の簡略化 デプロイ可能な埋め込みモデル ベクトル検索のクエリ ハイブリッド検索とは Elasticsearchを用いたハイブリッド検索 RRF(Reci
公開日 2024/05/28更新日 2024/07/25注目のITサービスを支えるアーキテクチャ特集 技術選定のポイントと今後の展望 現代のITサービスは、ユーザーに高品質で安定した体験を提供するために、より効率的で柔軟な技術選定が不可欠です。 本特集では、注目企業のシステムアーキテクチャ設計に携わるエンジニアの方々より、それぞれの技術選定における工夫と、未来を見据えた展望についてご寄稿いただいています。 各企業がどのように課題を乗り越え、開発生産性や品質を向上させるためにどのようなアプローチを採用しているのか ー この記事を通じて、実際の現場で活用される最先端の技術や戦略を学び、皆さんのプロジェクトに役立つ洞察を得ていただければ幸いです。 ※ご紹介はサービス名のアルファベット順となっております airCloset - 株式会社エアークローゼット エアークローゼットは日本初・国内最大級、女
こちらのイベントの登壇発表資料です。 アーキテクチャを突き詰める Online Conference https://findy.connpass.com/event/314782/
全文検索エンジンも、事前に検索対象のデータを調べてこのような索引を作っておくことで、高速な検索を実現しています。 インターネット検索の例 たとえばインターネット検索の場合、まず各サイトからデータを収集して、その中から索引に載せる単語を選んで索引を作ります。索引のデータは下の図の右側のような表になっています。各単語と、それがどのサイトのどこにあったのかを記録しておく形です。 検索の時は、この索引データを調べます。例えば利用者が「理解」という言葉で検索したら、索引の「理解」のところを調べます。そうすると「サイトAの8文字目と18文字目、サイトGの……」と出現場所がわかるので、すぐに結果を返せます。 なお、この図では索引の単語の並び方が適当ですが、実際には本と同じように「あいうえお順」などに並べておいて、すぐに単語を見つけられるようにしてあります。 索引にない単語 この仕組みの場合、索引にある単
この記事はTSKaigi2024での以下の私の発表内容を書き下ろしたものです。 なぜAPIに型をつけたいのか 現代のWebのシステム開発において、クライアント・サーバーともに型のある言語で開発されることが増えてきました。静的な型検査はコードの堅牢性やよりよいメンテナンス性の向上をもたらします。 プログラミング内部だけで型検査をするだけでも十分メリットはありますが、外部I/Oに対する型付けが不十分だとそのメリットを最大限に発揮してるとは言えません。外部I/Oとは、例えばWebフロントエンドだとLocalStorageやDOMからの入力値、それからネットワーク通信(今回はこれをAPIと呼びます[1])などですね。サーバー側でいうとAPIからの入力・レスポンスやデータベースへの読み書きが該当します。 個人的な経験から言うと、Webシステムの開発におけるエラーの多くはAPIやデータベースとのやり取
プロダクトマネジメントを体系化したクライテリアです。企業がプロダクトを成功に導くために必要な要素を多角的かつ具体的に記載してあります。対象はプロダクトマネージャー個人ではなくプロダクトを取り巻くチームとし、プロダクトマネジメント全体をスコープにしています。 🎉 プロダクトの成功 プロダクトの成功には2つの要素があります。 ユーザー価値と事業収益がバランスを取りながら最大化している状態ビジョンが実現できている状態この2つを満たしたプロダクトの成功を実現するプロダクトマネジメントについて定義します。 🔄 プロダクトマネジメントのフロー 👆🏻2つのテーマ、5つのカテゴリプロダクトマネジメントには大きく2つのテーマがあります。 🎁 A. プロダクトをつくる仕事 👩👩👧👧 B. プロダクトチームをつくる仕事 そして、「🎁 A. プロダクトをつくる仕事」には大きく4つのカテゴ
はじめに はじめましてほしいもです。 今回は年収が600万円アップした転職の話をしたいと思います。 自己紹介 30代前半 既婚、子どもあり 大学卒 16Personalities:ENTJ-T(指揮官) 転職結果概要 利用した転職サイト:ビズリーチ、リクルートダイレクトスカウト 利用した転職エージェント:Geekly 転職活動期間:6週間 転職前後の業種:BtoBの自社開発企業 → BtoCの自社開発企業 年収変動:700万 → 1,300万 転職動機 「今転職しなければ手遅れになるかも」 という感覚が、転職活動を始めた主な理由でした。 現職での待遇に特に不満はなかったものの、新卒入社した企業で既に10年が経過し、このままでは40代で転職市場に出た時に不利になるのではと不安を感じていました。 他にも大規模なプロジェクトが終わってキリが良かったことや、 ベテランの退職者が少ないので上が詰まっ
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
処理を実行中です
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く