こんにちは。Pay ID Devの大木 ( @roothybrid7 )です。 今回外部スクリプトとして読み込み利用する外部SDKを、Reactに組み込むためのラッパーライブラリを作ったので、その開発事例を紹介します。 今回、 SWC(Speedy Web Compiler) や Release Please を利用して開発したので、主にそれらをどう使ったのかを紹介いたします。 背景 去年12/16に開催しましたオンラインイベント 「BASE Tech Talk #1 〜Next.jsを使ったカート大規模

はじめに こんにちは！ 株式会社マイナビの就業型インターンシップに参加した @soutaschool , @toshi-bp , @kajikentaro , @aya-se です！ 本記事では就業型インターンシップに参加するきっかけや、実際に参加して経験した業務などをざっくばらんに書いていきます。 環境について オフィスは新宿駅直結のミライナタワーです。席はフリーアドレスになっていて、出社の時は好きな席に座って作業します。オフィスには私たちの所属している開発課だけでなく、AIシステム課、RPA課、インフ

前置きと自己紹介 今回はKINTOテクノロジーズでフロントエンドを担当しているイケダがお送り致します。最近はKINTO ONEの開発運用や新規サービス・プロジェクトの立ち上げなどをしています。 自己紹介もそこそこに前置きへ。 前置き 昨今、React / Vue.js / AngularJS / Preact / Ember など様々なJSフレームワークが台頭しています。ここ最近ですとSvelteとSolidの勢いがありますね。(個人的にMithril.jsにもっと伸びてほしい)もっと知りたい方はこちらへ

Next.js 12.1よりBetaとなったOn-Demand ISRが、6/29にリリースされたNext.js 12.2より安定版となりました！ これでようやく外向けの環境で動作するサービスに使用できるようになったので、今回はこのOn-Demand ISRについて紹介しようと思います。 そもそもOn-Demand ISRとは On-Demand ISRを説明するには、まずSSGとISRについて説明する必要があります。 SSGとは SSGとは、Static Site Generationの略で、その名の通

こんにちは！株式会社 ラク スの@kzak_24と申します。 インフラ開発部 SRE課に所属しております。 さて今回は、 現在 アサイ ンされている新規システムの開発プロジェクトにて、フロントエンドの技術選定を担当した時の経験 をまとめようと思います。 フロントエンドは未経験だった為、色々と試行錯誤を行いました。 未経験なりにどのような基準を設けて技術選定を行なったか 、皆さまの意思決定の参考になれば幸いです。 目次 SREチームの紹介 前提 チームの背景 検討内容と採用理由 言語 / FW 状態管理 ス

イベント概要 NIFTY Tech Talkは、ニフティ株式会社の社員が主催するトークイベントです。 本イベントではニフティ社員が業務を通じて学んだことを発信しています！ 第4回目のテーマは「レガシーシステムからの脱却」。現在、ニフティではさまざまなシステムの刷新やリプレースなどを行っています。今までのレガシーなシステムからモダンなシステムにどんどん切り替えていこうという流れが全社的に強くなっています。 今回は、レガシーシステムから脱却したプロダクトに携わっている現場のエンジニアを中心に、パネルディスカッ

モノレポとは 複数のアプリケーションを同一のリポジトリで運用する構成のことを、Monorepo (以下モノレポ)と言います。 Turborepo Turborepoはこのモノレポ環境のうち、JavaScript系のモノレポ環境を対象としたビルドツールです。 昨今のJavaScript周りの発展は目覚ましく、フロントサイドとサーバーサイドどちらもJavaScriptなんて構成は珍しくありません。Turborepoもそうした流れで生まれたツールの一つで、JavaScriptのモノレポをよりシンプルに扱えるよう

こんにちは。AlphaDrive フロントエンドエンジニアの aku11i です。 Next.js で開発中のプロジェクトに New Relic APM / Browser を導入しました。 実は前にも対応したことがあったのでこれで2度目ですが、改めて調べ直したところ @newrelic/next というパッケージが新しく公開されていました。 Node.js エージェントをそのまま使う方法に比べて確認できる情報が増えるなどメリットがありましたので紹介したいと思います。

こんにちは。intdash グループ フロントエンドエンジニアの佐藤です。 Next.js を使った管理画面を作成するプロジェクトを担当する機会がありました。 管理画面は「 頻繁にデータが更新されることがない 」、「 同時アクセスはあまり起きない 」という前提の元に作成することが多いと考えています。 なのでサーバー、表示ともにパフォーマンス的に無駄なリクエストを投げたくはありません。 それを解決するため、プロジェクトに React Query を導入しました。 今回はその導入事例をご紹介したいと思います。

はじめに こんにちは。ニフティ株式会社に入社して新卒四年目の佐々木です。 今回は、業務で触れる機会のあった「NextAuth.js」について紹介したいと思います。 この記事の内容 NextAuth.jsの特徴 NextAuth.jsの実装方法 NextAuth.jsとは NextAuth.js とは、Next.jsで認証機能を実装するためのライブラリです。 特徴 NextAuth.jsの 特徴 としては以下になります。 セッションデータの保存をデータベースなしでも使用できる サーバーレス環境向けに設計され

はじめに はじめまして、KINTOテクノロジーズでモビリティマーケットの開発・運用を担当しているリナです。 普段はフロントエンジニアとして、Next.jsを用いて実装しています。 この度、KINTOテクノロジーズでテックブログを始めます！！ KINTOテクノロジーズ設立から約1年、弊社で取り扱うプロダクトや社員数も増え、ようやくテックブログを始めることができました👏 KINTOテクノロジーズは、年齢・性別・国籍問わず多様なメンバーが在籍しており、トヨタグループのモビリティサービスの世界展開を実現する技術集

Introduction Hello, my name is Rina and I’m involved in Mobility Market development and operation at KINTO Technologies. Usually I work as a front-end engineer implementing websites using Next.js. We are excited to announce that we are starting a KINTO Te

Apollo Client は複雑 Apollo Client が向いているケース 一休.com に Apollo Client は必要ないかもしれない では何を使えばいいの？ 複雑なアプリケーションには Apollo を使えばいい？ もう一つのリッチなクライアント、Relay の話 結局、何を使えばいいのか この記事は一休 × 出前館 Frontend Meetup でお話した内容をブログにまとめたものです。 user-first.ikyu.co.jp speakerdeck.com GraphQL ク

はじめまして、NewsPicks Web Product Unitのじゆんきち(@junkisai)です。 弊チームでは、ここ1年間くらいWeb 版のNewsPicksを新しい基盤に置き換えるプロジェクト（以降、リアーキプロジェクト）を進めています。 新 Web 基盤のフロントエンドはReact (Next.js)+TypeScriptを採用しており、バックエンドとの通信にはGraphQL(Apollo) を採用しています。 今回はFragment Colocationという考え方を導入したら、これまで抱

こんにちは!! スマートキャンプでエンジニアをしている吉永( @__GGEasy )です！ 自己紹介記事はこちら 前回の記事はこちら 私は現在、スマートキャンプの主力サービスであるBOXIL SaaSの開発にフロントエンド、バックエンド問わず携わっています。 今回は、弊社で新規サービスとしてリリースしたBOXIL SaaS質問箱(以下SaaS質問箱)にて、React.js(以下React)を私の主導で採用しました。 この記事では、フロントエンド整備に至った経緯や、今後のBOXIL SaaSにおけるフロント