はじめに こんにちは！新卒入社6年目の添野です。@niftyトップページシステムの開発・運用を担当しています。 先日「レガシーシステムからの脱却」に登壇しましたので、その様子を紹介していきます！ イベント概要 NIFTY Tech Talk は、ニフティ株式会社の社員が主催するトークイベントです。 本イベントではニフティ社員が業務を通じて学んだことを発信しています。 第四回目となる今回は、「レガシーシステムからの脱却」に関するテーマで開催しました。 ニフティではさまざまなシステムの刷新やリプレースなどを行

こんにちは！ ラク ス入社１年目の koki _matsuraです。 本日は、Next.jsとVercel、Supabaseを用いて簡単なアプリを高速で開発する手順についてお話しできればと思います。 アジェンダ は以下の通りです。 Next.jsとは ReactとNext.jsの違い Next.jsの特徴 Vercelとは Supabaseとは ToDoアプリ作成 Supabaseにデータベースを用意 VercelでNext.jsプロジェクトを作成・デプロイ・GitHub連携 VercelとSupabas

社内でWebアプリケーションの要件についての話がされている際のことです。 画像の拡張子について要件があったんですが、そこには基本的にWebPで、表示できないブラウザはPNGにするという旨が記載されていました。 AVIF君かわいそう、その場での私の気持ちは一つです。 そんなわけで、不思議と話に上がらないAVIFフォーマットとそれへの変換、フロントエンド周りの話をしてゆこうかと思います。 AVIF とは AVIF (AV1 Image File Format) は、 AV1ビットストリームを HEIF (Hi

こんにちは。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の 特徴 としては以下になります。 セッションデータの保存をデータベースなしでも使用できる サーバーレス環境向けに設計され

[toc] はじめに はじめまして。CADDiの学生インターンとしてバックエンドエンジニアをしている渡邊です。 このたび、3ヶ月間のインターンを7月末に終えるにあたり、その成果発表として記事を書きたいと思います。 この記事では、私がインターンを始めるまでの経緯、インターンで行った実際の業務内容、そしてインターンを通しての感想、の3項目について書いていきます。 インターンまでの経緯 CADDiのインターンには、2022年3月のイベント 「Rust完全に理解した(嘘)」 を通じて、カジュアル面談・技術試験・面

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