はじめに この記事は『Picture perfect images with the modern img element』という記事を参考に画像最適化に関しての重要な観点をまとめたものです。 画像はWEBにおいても重要な役割を担っており、2021年時点で1つ以上の画像を含むWEBサイトは95.9%、faviconなども含めて1回でも画像取得のリクエストを送信するWEBサイトは99.9%であるという調査もあります。 さらには、LCP要素の約70%が画像であるという調査が出ています。 Largest Contentful Paint（LCP）は、Googleが提唱するCore Web Vitalsの1つで、ウェブページのパフォーマンスを測る指標です。詳しくは次の章で解説します。 つまり、WEBのパフォーマンスにおいて画像の最適化は重要な観点でありユーザ体験に直結することがわかります。 画像最

はじめに 周りを見渡せば自分より優れたエンジニアは無限に存在します。 「自分よりも知識がある。」「自分よりも経験を積んでる。」「自分よりも・・・」 他人と比較をしている以上、自己肯定感の低下は否めないでしょう。 しかし、それは正しく自分を評価できているでしょうか？ この記事の目的は、目先の技術力ではなく自らの成長角度を基準に客観的な評価をすることで、本質的ではない比較から身を守る考え方を提案したいと思っています。 対象読者 若手エンジニア 未経験からスタートしたエンジニア 学生エンジニア 同期といえども経験年数は異なる 新卒で会社に入社して、まず意識する対象は「同期」でしょう。全体研修を終えてそれぞれ部署に配属をされ、すぐに圧倒的な結果を出す人が現れます。 すると大抵の人は焦りや遅れなどネガティブな感情を抱いてしまいます。 しかしそんな時は一度、GitHubの履歴を覗いてみてください。 も

はじめに この記事はDominikさんが執筆された「Thinking in React Query」を参考にReact Queryの考え方をまとめたものになります。DominikさんはTanStack Query（以下ではReact Queryと呼ぶ）のコアメンテナーであり、彼のブログからReact Queryについての知見を吸収することができます。 目次 React Queryはデータフェッチライブラリではない ではReact Queryとは何か？ Client StateとServer Stateの違い React Queryは非同期の状態（Server State）管理ライブラリである キャッシュを有効活用する React Queryのキャッシュについて staleTimeでキャッシュをコントロールする queryKeyを適切に設定する まとめ 🎆 React Queryはデータフ

はじめに 今回は私が勉強会を主催する中で得た学びとそのコツを紹介します。普段は毎週2回社内での勉強会（1時間） と プライベートでの勉強会（2時間） を主催して取り組んでいます。それぞれで取り組み方や扱う内容も意識して変えており、勉強会自体の目的が異なります。では以下の流れで整理をします。 勉強会の目的 社内での勉強会 プライベートでの勉強会 勉強会のトピック選定 社内での選定 プライベートでの選定 社内勉強会による副作用 ☘️ 勉強会の目的 冒頭で述べた通り、勉強会の目的は社内とプライベートで全く異なります。 社内での勉強会 コミュニケーションの活性化 社内勉強会における最たる目的は、同僚とのコミュニケーションにあると考えています。特に最近はリモートワークが増え、コミュニケーションの機会が減ってしまったのではないでしょうか？当然出社するよりも密な関係を築くことは難しく、距離を感じてしまう

はじめに 今回はECサイトを構築する開発において、Hydrogenというフレームワークが非常に強力だったため紹介します。HydrogenはRemixをベースとしたヘッドレスコマースのためのスタックです。「なぜRemix？」と思う方もいるかもしれませんが、2022年にShopifyがRemixを買収し、その連携を強固にしている背景からも今後Shopifyを用いたECサイトの開発ではRemixを使用する機会が多くなるのではないかと推測しています。 前提 今回はHydrogenで公式に提供されているdemo-storeというテンプレートを前提に解説します。というのも、このdemo-storeが非常に強力で、ECサイトの基盤をすでに構築してくれています。私もこのdemo-storeを拡張することで一つのECサイトを完成させることができました。その強みや、ディレクトリ構成については後に紹介します。

はじめに この記事は、Alan Alickovicさんの著書「React Application Architecture for Production」をまとめたものになります。Alanさんと言えばZennで最も人気のある記事「bulletproof-react」の作者であり、彼のprojectから学ぶことはとても多い印象です。 今回紹介する本は2023年1月に公開されたため、bulletproof-react以後のReactアプリケーションにおけるベストプラクティスの宝庫となっています。また、本で扱われているアプリケーションのProjectがGitHubで公開されていることから、Projectを眺めるだけでも勉強になる点があるかと思います。 想定読者 Reactのアーキテクチャを模索している方 テスト手法やCI/CDなどのアプリケーション設計に関心がある方 使用される技術と本の構成 言

はじめに ChatGPTをはじめとする昨今のAIの進化は凄まじいです。私たちの当たり前が変わる瞬間を感じています。しかしそんな中でも変化に向き合い、エンジニアとして成長したいと思っています。そこでPrompt Engineering Guideの翻訳記事を書き起こしました。私自身は生粋のフロントエンドエンジニアです。AIや機械学習についての理解はほとんどありません。そのため、翻訳の中でも間違った表現がありましたら暖かくご指摘いただけると幸いです。 本記事では、Prompt Engineering Guideの以下の章を扱っています。 Introduction Techniques Prompt Engineering プロンプトエンジニアリングは、様々なアプリケーションや研究テーマにおいて、言語モデル（LM）を効率的に使用するためのプロンプトを開発・最適化するための比較的新しい学問分野です

はじめに 本記事ではOpenAPIからclientコードを自動生成するライブラリ『Orval』を紹介します。そしてOrvalの強みを明らかにし、どのような場合に選定するべきかを提案できたらと考えます。 いきなりですが簡潔に結論を述べます。 これはOrvalの作者自身がswagger codegenといった他の自動生成ライブラリに物足りなさを感じ、特定の技術の上で最適なコード生成をしたいというモチベーションが根底にあります。 Orvalとは？ 改めてOrvalはOpenAPIからclientコードを自動生成するライブラリです。（公式によると）その特徴は、大きく3つ挙げられます。 Productivity Save time to drink a 🍺, get your api ready out of the box in a few seconds. Prevent human erro

フロントエンドテストにおける知見の宝庫を発見！「javascript-testing-best-practices」JavaScriptテストフロントエンド はじめに 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 Test

はじめに 本記事は、reactjs-interview-questionsを日本語に翻訳することを目的とします。そのため、筆者自身の意見や知見は扱いません。 reactjs-interview-questionsとは 技術面接などでReactに関して聞かれるであろう質問とその回答がまとめられています。「Reactとは？」というざっくりした質問だけでなく「Reactのデータフローについて」などコアな質問が用意されているため、転職活動をしていない方でも学びになる点が多くあります。 全部で333問の質問とその回答が用意されています。この記事では1〜111の問題を翻訳します。翻訳が不慣れな点がありましても暖かい目で見ていただけると幸いです<_> 1. What is React? React is an open-source front-end JavaScript library that i

はじめに こんにちは。株式会社HRBrainでインターンをしている安井です。 この記事では今業務で採用しているReact Queryの特性を生かした設計を考察してまとめていきます。 本記事はHRBrain Advent Calendar 2022の24日目の記事です。 前提 本記事で使用するライブラリ等のversion React: v18.2.0 TypeScript: v4.9.3 React Query（TanStack Query）: v4.19.1 axios: v1.2.1 vite: v4.0.0 React Queryはv4から名前が変更されTanStack Queryとなりましたが、記事の中ではReact Queryと呼ぶこととします。 使用するOpenAPIの定義 https://jsonplaceholder.typicode.com/posts また、本記事で使用す