2023年1月から9月にかけて弊社 BtoB web アプリケーションのリアーキテクチャリングプロジェクトにフロントエンドのシステムアーキテクトとして参画し、技術選定から開発メンバーのスキルトランスファー（育成）、果ては包括的な開発プロセスの改善までと幅広く支援してきました（2023年11月現在も進行中）。そこでの奮闘で得た学びと新たに浮き彫りとなった課題についてご紹介します。

https://offers.connpass.com/event/299909/ 登壇資料

こんにちは、SmartHR でプロダクトエンジニアをしている @nabeliwo です。 今年の9月に SmartHR のログイン後のホーム画面がリニューアルされました。 【9/21更新】新しいホーム画面を公開しました | SmartHR｜シェアNo.1のクラウド人事労務ソフト この記事では、新しいホーム画面の実装の中で、開発者体験を損なうことなく多言語化対応を進められるよう、TypeScript の型定義を工夫した話をします。 まだまだ改善の余地がある状態ではあるのですが、私達のチームでの試行錯誤が読んでくれた方の参考になれば幸いです。 SmartHR の多言語化対応 SmartHR の既存のページではすでに WOVN.io というツールを使った多言語化対応が行われていました。 ただ諸々の理由があり1、新しいプロダクトでは自前で翻訳の仕組みを用意していこうとしています。 実際に、Smar

Next.js に対する Kent C. Dodds の批判と、Lee Robinson のアンサーの要約 はじめに 10 月 26 日に Next.js Conf が開催されましたが、それと前後して Kent C. Dodds (以下 kentcdodds と呼びます) と Lee Robinson (以下 leerob と呼びます) がそれぞれ という記事を公開しました。前者はタイトルの通り、Testing Library の作者であり、Remix の共同創業者の一人でもある開発者兼教育者 kentcdodds が、Next.js を使わない理由について述べたものです。そして後者は、Vercel の VP of Developer Experience である leerob が、主に前者に対する反論を述べたものです。筆者は両方の記事を公開後すぐに面白く読み、そしてどちらにも頷けるところ

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

We want the default build output of Next.js to work well when self hosting, and also well on Vercel. And guess what? They're the same output. Well, almost. Let me clarify. It took us a while at Vercel to figure out the correct format and boundary between open source framework and infrastructure platform. Our philosophy is called framework defined infrastructure. And critically, the specification t

You’ve got a new project to work on. Or you’ve got an existing project you’re motivated to upgrade to a more modern approach. Or perhaps you’re dissatisfied with your current modern framework or second-guessing yourself and you’re investigating alternatives. In any case, you’ve got a decision to make. There are lots of “modern” frameworks to choose from. Even if you’re not facing this choice right

Back to BlogMonday, October 23rd 2023 How to Think About Security in Next.jsPosted by React Server Components (RSC) in App Router is a novel paradigm that eliminates much of the redundancy and potential risks linked with conventional methods. Given the newness, developers and subsequently security teams may find it challenging to align their existing security protocols with this model. This docume

Next.js で開発しているときに、getInitialProps・getStaticProps・getStaticPaths・getServerSideProps について、いつ、どのように使うべきか、きちんと整理できておらず、自分なりの整理をしてみた。 今回整理する API は、どれもページコンポーネントで、プリレンダリングをしてデータを取得（フェッチ）する際に使用するものである。getInitialProps は「リクエスト時」にデータを取得する。そして、v9.3 から用途に応じて、より宣言的に書くことができるよう、以下の3つが追加された。 SSG用のAPI getStaticProps（「ビルド時」にデータを取得する） getStaticPaths（データに基づいて動的ルーティングを指定する） SSR用のAPI getServerSideProps（「リクエスト時」にデータを取得

2つの違い 新しい関数の作成 onClick= () => openDialog() onClick={openDialog}

App Router への移行は「改善」となり得るのか？/ Can migration to App Router be an improvement

📢イベント概要 フロントエンド開発において、コンポーネント設計における考え方は日々進化し続けています。ライブラリのバージョンアップや新しい方法論が登場し、最適な設計手法もそれに応じて目まぐるしく変わっています。しかし、常に最新のコンポーネント設計手法をキャッチアップし取り入れていくことは難しくどこまで追いつけば良いのか、と感じたり、現在の設計方法が最適なのか不安に感じている方も多いのではないでしょうか。 そこで本イベントでは、フロントエンドの第一線で活躍するよしこ氏（@yoshiko_pg）、うひょ氏（@uhyo_）をお招きし、お二人が考える今のReactコンポーネント設計について深掘ります。ディスカッションの中では、「分割粒度」「構造」「スタイリング」「テスト」「パフォーマンス」の5つのテーマに分け、それぞれのテーマに対してお二人がどう考えているのか、実際の取組みや効果的だったアプロー

はじめに 今回の記事では、類似しているWeb技術であるReactとNext.jsをコードベースで比較する。 対象とする読者 ReactとNext.jsの違いがわからない人 技術選定で、ReactとNext.jsのどちらにしようか悩んでいる人 Reactとは React（リアクト）は、Meta(旧Facebook)が開発しオープンソースとして公開しているJavaScriptライブラリで、ユーザインターフェースの構築に特化している。 Reactの特徴は以下の通りだ。 コンポーネントベース：Reactの中核となる考え方は、UIを再利用可能なコンポーネントに分割することにある。これにより、大規模なアプリケーションでも管理を簡単にできる。 仮想DOM：Reactは仮想DOMを使ってページの更新やレンダリングを行う。 宣言的UI：Reactは宣言的UIを採用しており、アプリケーションの各状態に対してU

きっかけ State of CSSの CSS フレームワークで Tailwind を抑えて今年から「Open Props」が一位になっていて、気になったので調べてみました。 Open Props とは カスタムプロパティベース CSS フレームワークとのことですが、簡単に言っちゃうと CSS 変数の寄せ集めです。 ぶっちゃけこれだけ笑 color, gradients, shadows, aspect ratios, typography, easings, animations, sizes, borders, z-indexes, media-queries などが用意されていて、あとは CSS でのスタイリング時に使うだけです。 例えばボタンだったらこんな感じでスタイルできます。 button.blue { color: var(--blue-6); background-color

最近ちらほら React.memo について勘違いしているプログラマーと出会うことが何度かあったので、改めて書いていこうと思います。 公式サイトの記述 そもそも公式サイトの記述をきちんと読まず、正しく理解できていない状態で使用しているプログラマーが非常に多い印象があります。 ということで React.memo に関する公式サイト の引用です。 もしあるコンポーネントが同じ props を与えられたときに同じ結果をレンダーするなら、結果を記憶してパフォーマンスを向上させるためにそれを React.memo でラップすることができます。つまり、React はコンポーネントのレンダーをスキップし、最後のレンダー結果を再利用します。 React.memo は props の変更のみをチェックします。React.memo でラップしているあなたのコンポーネントがその実装内で useState、use

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

こんにちは。助太刀開発部にてフロントエンドを担当している木下です。 今回は、弊社が提供しているサービスの１つである助太刀社員という求人プラットフォームにて、企業側が利用する管理画面のフロントエンドをVue 2(Nuxt)からReact(Next)へと一から書き直したことについて、所感などをまとめていきたいと思います。 フルリライトに至った経緯私がプロジェクトに参画した時には、すでに大方の開発が完了している状態ではあったものの、その時点のコードはリファクタリングではどうにもならないくらいの設計上の問題が多々ありました。 認証方法も異なる、求職者側が利用する画面と同じリポジトリで開発されていた グローバルステートが全部１ファイルにぶちこまれている（当然求職者側のものも含む） コンポーネントが１ミリも分割されていない（ページコンポーネントに大量のdivとpとspanと全てのロジック） CSSが全

はじめに こんにちは、株式会社マイベストでフロントエンドのテックリードをしているteppeitaです。 弊社が運営している mybest の技術スタックをVueからReactに移行したので、その時の話を共有したいと思います💪 mybestのフロントエンド紹介 まずはイメージしやすくするために、簡単にmybestのフロントエンドについてご紹介します。 フロントエンドの技術構成 - TypeScript - React - ApolloClient（APIがGraphQLです） - Storybook（VRTやinteraction testsを実行しています） - Jest - Cypress ↑少し前まで、ReactのところがVueでしたが、リプレイスしました。今回はその話です。 画面構成 mybestには、大きく分けて、フロント画面（一般ユーザーが見る画面）と管理画面が有ります。 その

仕事でフロントエンドの技術選定をおこなうことになり、その情報収集としてIT企業の先例を調査しました。 jQueryなどのレガシーな技術スタックからモダンなフレームワーク（ライブラリ）への移行をした企業のリプレイス記事をまとめます。 一休.com、Yahoo!トラベル【Nuxt2 -> Nuxt3】 比較的少ない印象のVue/Nuxt系の移行記事です。 Nuxtのバージョンを上げたとのことですが、Vueのマイグレーションガイドをチームで読み合わせたとの記述があるので、Vueも2→3へアプデないし実装の移行をしたのでしょうか。 どちらかというとReactを採用している事例を多く見かける中、Vue/Nuxtの貴重な例ではないでしょうか！ MonotaRO【JavaScript->React/Next.js】 言わずとしれたECサイト「モノタロウ」。モノから産まれたモノタロウ。 主にVueとRea

メドピアグループがCTOを中心とする開発組織体制から「VPoE＋テックリーダー体制*」に移行してから約1年。この節目に、Vice President of Engineering（以下、VPoE）の平川に「新体制で挑んだ開発組織の1年」を振り返ってもらいました。 今回は「技術編」として、メドピアグループのエンジニアリングにおける10のテックイシューにどう挑んだのか、新たに発見した課題などについても語っています。