Daisuke Inoue

はじめにみなさんはReactでの開発する中で、どのようにSVGを扱っていますでしょうか？CSSStyleの当てやすさから私たちのプロダクトではSVGをReactコンポーネント内で定義していましたが、パフォーマンスが良くないという問題にぶちあたりました。今回はその問題への対処方法を共有したいと思います。前提条件として弊社は以下の環境となっています。next : 14.2.7react : 18.3.1react-dom : 18.3.1typescript : 5.5.4Node.js : 20.17.0デプロイ環境 : Vercel 問題トップページのサ...

インラインSVGのReactコンポーネントを撲滅したらファイルサイズが94%削減された

はじめにNext.js(AppRouter)をみなさん上手く扱えていますでしょうか？弊社では現在新規プロダクトで使っているのですが、パフォーマンスが良くないという問題にぶちあたっていました。今回はその解決方法を一部共有したいと思います。前提条件として弊社は以下の環境となっています。next : 14.1.0react : 18.2.0react-dom : 18.2.0typescript : 5.3.3Node.js : 18.17.1デプロイ環境 : Vercel!「一部」という表現は、問題の要因としてsearchParamsもあるのですが、今回はD...

Next.js(AppRouter)でDynamicFunctionを使ってもCacheHitさせる

はじめにみなさんはHTMLをどんなサイト・書籍で学んできましたか?私はというと、10年前に当初全て無料で閲覧できていたドットインストールで少しかじり、7年前にWebアプリケーションの開発をする中でプロダクトコードから学んだという具合でした。現在の会社に転職してきて再度フロントエンドの開発もすることになり、思い返してみるとHTMLを体系的に学んでこなかったと思ったので、MDNが公開している「ウェブ開発を学ぶ」をやってみました。この記事ではなるほどなと思った部分を抜粋して紹介したいと思います。 前提知識基本的なことから理解を進めようと思っていたので、まずは「ウェブ入門」から...

MDNでHTMLを体系的に学んでみた備忘録

!この記事は モニクル Advent Calendar 2023 ５日目の記事です。 Introduction私が今回構築したwezterm,zsh,starship,neovim環境を紹介します。設定したconfigは以下のリポジトリにあります。今回構築するきっかけは以下の動画を見て、Vim使いこなしてるのかっこいいな〜、Terminal上で全て完結したら便利だよな〜、という単純な動機から始まりました。LazyVimでいきなりどーん！っと構築しても何が何だかわからないので、coralpinkさんのサイトを参考に構築させていただきました。構築時の環境は以下となって...

インラインSVGのReactコンポーネントを撲滅したらファイルサイズが94%削減された

Next.js(AppRouter)でDynamicFunctionを使ってもCacheHitさせる

MDNでHTMLを体系的に学んでみた備忘録

君もイカしたTerminal環境で開発してみなイカ？(wezterm, zsh, starship, neovim)