hey3.dev https://blog.hey3.dev/ hey3の技術ブログ。 Mon, 13 Jan 2025 05:18:54 GMT https://validator.w3.org/feed/docs/rss2.html https://github.com/jpmonette/feed ja hey3.dev https://blog.hey3.dev/images/ogp_140x140.png https://blog.hey3.dev/ All rights reserved 2021, @kou_hey3 <![CDATA[viteのlib modeを使ってnpmパッケージを公開する]]> https://blog.hey3.dev/posts/vite-lib-mode-to-publish-npm/ https://blog.hey3.dev/posts/vite-lib-mode-to-publish-npm/ Tue, 03 Jan 2023 16:45:00 GMT

先日 react-use-polling を公開したのですが、その際に使用した vite の lib mode が便利だったので記録。

はじめに

今回 library として作成した react-use-polling は、 React の custom hooks です。 本記事は custom hooks を公開する場合の lib mode の使用に関して記述しています。 言語は TypeScript を使用しているため、本記事では TypeScript での環境として記述していきます。

公開したライブラリのリポジトリは、 hey3/reac

]]> <![CDATA[ReactでPollingするcustom hooksを作った]]> https://blog.hey3.dev/posts/react-hooks-use-polling/ https://blog.hey3.dev/posts/react-hooks-use-polling/ Sat, 31 Dec 2022 05:00:00 GMT

React のポーリング用 hooks を作ったので、その詳細を記録しておきます。

はじめに

React でポーリングを行うための hooks 、 react-use-polling を作りました。

Web アプリケーションで定期的にデータを取得したい場面、たまにあると思います。 最近では SWR などのライブラリを使うことで簡単に対応することは可能です。 しかし、SWR を使っていないある程度成熟したアプリケーションの場合、 SWR を導入するほどではないけどポーリング対応したい時があります。（SWR に移行していく選択も状況によっては有ります

]]> <![CDATA[ブログのデザインリプレイスを通してデザインシステムを学んだ]]> https://blog.hey3.dev/posts/learn-design-system-through-blog-replacement/ https://blog.hey3.dev/posts/learn-design-system-through-blog-replacement/ Sat, 24 Sep 2022 08:30:00 GMT

当ブログの作成時は、デザインについての知見が浅く、なかなかに酷いデザインでした。。 今回ブログのデザインをリプレイスする際に取り組んだこと、考慮したことをまとめておきます。

はじめに

本記事では、サイトのデザインを見直すためにデザインシステムを構築し、その際に考慮した点をメインに記載します。 Web フロントエンドディベロッパーの目線で記載しています。

デザインを学ぶ

まずは最低限デザインについての知識をつけておく必要がありました。 Design Systems ―デジタルプロダクトのためのデザインシステム実践ガイド をベースにデザ

]]> <![CDATA[SolidJS + vite + tailwindcss な環境を作る（Storybook, vitest対応）]]> https://blog.hey3.dev/posts/create-solidjs-template/ https://blog.hey3.dev/posts/create-solidjs-template/ Tue, 29 Mar 2022 11:50:00 GMT

先日公開された State of JS 2021 を見ていて、 SolidJS という気になるフレームワークを見つけたので、少し齧ってみようと思いました。 まだ情報が少ない、かつ、 テストツールや Storybook などのツールを併用するにはまだひと工夫必要だったので、その対応方法と実際に作成したテンプレートについてサクッとまとめておきます。

SolidJS とは

SolidJS React や Vue などの Front-end フレームワークの 1 つです。

すごく雑にまとめると、 Svelte と React の融合みたいなものです...

]]> <![CDATA[AWS CDK で lambda のバージョンが上手く発行できない時の対処]]> https://blog.hey3.dev/posts/aws-cdk-lambda-version-persist-with-alias/ https://blog.hey3.dev/posts/aws-cdk-lambda-version-persist-with-alias/ Mon, 25 Jan 2021 16:00:00 GMT

AWS CDK を使っていて、 lambda のバージョン発行しているのに「バージョンが上手く発行されない！」、「古いバージョンが残らない！」となって結構困っていた時期がありました。 本記事は、その問題の解決方法を簡単に記述していきます。

検証環境

本記事では

で作成したものをベースに説明していきます。

サンプルコードはこちら サンプルコードは多少使いやすいように config をいじっています。

上手く行かない実装

最小限のコードで説明していきます。

最初はドキュメントもあまり読まずに、「

]]> <![CDATA[Next.js の zero-config の恩恵を受けて SPA を作る]]> https://blog.hey3.dev/posts/nextjs-spa/ https://blog.hey3.dev/posts/nextjs-spa/ Tue, 12 Jan 2021 14:30:00 GMT

Next.js の zero-config の恩恵を受けながら SPA だけのアプリケーション作成できないかなと試行錯誤し、あーこれでいけるんだとなった備忘録です。 SSG や SSR を使わなければ Cloudfront + S3 のような構成で静的サイトホスティングも出来るので、サクッと開発したい時に便利だなと思いました。

TL;DR

なぜ Next.js を使うのか

Dynamic import を使うことでバンドルを分割でき、これにより、大規模な SPA に関連するパフォーマンスの問題の１つを解決できるためです。 また、これが zero-

]]> <![CDATA[dotenv-webpack と DefinePlugin の関係を理解してみた]]> https://blog.hey3.dev/posts/dotenv-webpack-and-define-plugin/ https://blog.hey3.dev/posts/dotenv-webpack-and-define-plugin/ Tue, 05 Jan 2021 10:30:00 GMT

webpack で bundle する際の環境変数の扱いに対して曖昧な知識だったので、よく使っていた dotenv-webpack, DefinePlugin それぞれの動きを確認してみました。 自分用の React + typescript テンプレートを作成した際にも混乱した使い方をしてしまっていたので、その時の反省も含んでいます。

検証環境

dotenv-webpack とは

引用 - mrsteele/dotenv-webpack

dotenv-webpack は dotenv と webpack.DefinePlugin

]]> <![CDATA[oh-my-zsh + anyenv から fish + pure + asdf にした話]]> https://blog.hey3.dev/posts/zsh-to-fish/ https://blog.hey3.dev/posts/zsh-to-fish/ Mon, 04 Jan 2021 14:00:00 GMT

ずっと zsh + oh my zsh + anyenv で構成していたのですが、どうも起動が遅い。。 dotfiles の見直しを含めて fish + pure + asdf の構成にしました。 その背景、手順、乗り換えてみて良かった事を書いていきます。

今までどんな構成だったか

正直記事を書くより結構前に乗り換えていたのでうろ覚えです。。 git のコミットログから思い出して書いていきます。(dotfiles を git 管理しといて良かった。。。)

今までは zsh 入れて oh my zsh 入れて、 theme を agnoster に

]]> <![CDATA[Next.js で認証機能を実装する]]> https://blog.hey3.dev/posts/nextjs-auth-ssr-with-mongo/ https://blog.hey3.dev/posts/nextjs-auth-ssr-with-mongo/ Wed, 16 Dec 2020 17:45:00 GMT

Next.js を使用してログインが必要なページを実装したいなと思ったときに意外と手こずったので備忘録として書いてみます。 あまり記事がみつからなかったのもあり、原理から理解して実装してみました。(※正しくない内容が含まれているかもしれません。)

どんなことがしたいか

簡単に言うと管理画面のようなイメージです。 アカウントを持つユーザのみが閲覧できるページを Next.js で実装してみたかったのです。 作成したリポジトリは こちら です。

next-auth や firebase authentication を使っても良いのですが、理解を深め

]]> <![CDATA[Serverless Next.js Component が AWS に deploy するのに超便利だった]]> https://blog.hey3.dev/posts/deploy-nextjs-to-aws/ https://blog.hey3.dev/posts/deploy-nextjs-to-aws/ Tue, 08 Dec 2020 03:00:00 GMT

Next.js で作成したアプリケーションを AWS にデプロイする際に、 Serverless Next.js Component を使うと超絶楽ちんだったのでデプロイまでの手順を試す + α を記事にまとめます。

Serverless Next.js Component とは

Serverless Next.js Component は、 Serverless framework の関連機能の Serverless Component の１つです。 Serverless Component とは、

とあるように Serverless Fram

]]> <![CDATA[Next.js + TypeScript でブログを作った]]> https://blog.hey3.dev/posts/build-blog-nextjs/ https://blog.hey3.dev/posts/build-blog-nextjs/ Tue, 08 Dec 2020 15:45:00 GMT

ブログを作成しました！ 最初の記事として、ブログを作った経緯や作成するまでに考慮した点・躓いた点などについて記載します。

なぜブログを作ろうと思ったか

得た知識をラフにアウトプット出来る場が欲しかった事が大きいです。

普段は主に React + TypeScript での SPA 開発をメインで行っています。 web フロントエンドとして成長しようと思うと、学ぶべき事も多く、その過程としても自分のブログを作成することは通過点として考えていました。 アウトプットのみであれば Qiita や Zenn でのアウトプットでも良いのですが、スキルをつける

]]>