https://jsconf.jp/2023/talk/wakamsha-1/ https://www.youtube.com/live/N1lhkH33fwY?si=Ytihy_yTzuAdbd5L&t=8774 2023年1月から9月にかけて弊社 BtoB web アプリケーションのリアーキ…

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（「リクエスト時」にデータを取得

Deleted articles cannot be recovered. Draft of this article would be also deleted. Are you sure you want to delete this article?

PHPとAPI Platformで作る本格的なWeb APIアプリケーション（入門編） / phpcon 2024 Intro to API Platform

お知らせ 運営会社の年末年始休業につき、2023年12月27日(金)13時以降のconnpass機能のお問い合わせにつきましては2024年1月6日(月)より順次ご案内させていただきます。あらかじめご了承ください。 お知らせ イベントページ内のフィードコメント投稿仕様を変更しました。今後、コメントの投稿は、イベントに参加登録（補欠・抽選を含む）しているユーザー、またはイベント開催関係者（管理者・発表者）のみ可能となります。参加登録をしていないユーザーで、イベントページに関する連絡や質問がある場合は、「イベントへのお問い合わせ」機能をご利用ください。 お知らせ 2024年9月1日より、connpassではスクレイピングを禁止し、利用規約に明記しました。以降の情報取得にはconnpass APIをご利用ください。APIご利用についてはヘルプページをご確認ください。

はじめに 今回の記事では、類似している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のテックイシューにどう挑んだのか、新たに発見した課題などについても語っています。