uttk's blog

Timeline

投稿した記事を時系列でまとめています

Zenn をやめることになったので、やったことを振り返ってみる

2023/09 いっぱいで Zenn もといクラスメソッドをやめることになったので、この機会に私がやってきたことをまとめたいと思います。

uttk.dev
1日前

Axios 使うのやめたらビルドサイズが 10 KB 減って、なんか知らんがパフォーマンスも良くなった話

この記事について Zenn では長らく通信処理に Axios を使っていました。 https://github.com/axios/axios しかし、Fetch API が多くのモダンブラウザなどで普通に使えるようになった今、使う必要性があまり無くなったため、Axios を使っている処理を全て Fetch API に置き換えることになりました。 この記事では、その置き換え作業をどう進めていったのか、その結果どう良くなったのかを解説していこうと思います 🗽 解説より置き換えた結果を知りたいのよ私は！！！ って方が居るかと思いますので、最初に置き換えたことで良くなった部分を紹介しよ...

zenn.dev
10日前

Zenn に Content Security Policy を段階的に導入した話

この記事について 先日、Zenn では Content Security Policy を導入しました。 https://info.zenn.dev/2023-07-18-csp この記事では Content Security Policy を Next.js ( Pages Router ) で導入する方法を解説するともに、Zenn の実例を紹介したいと思います。 Content Security Policy とは？ そもそも Content Security Policy を知らない人が居るかもしれません。 Content Security Policy ( 以後 CSP ...

zenn.dev
19日前

もしも React Hooks がコンポーネントの外に羽ばたいたら

この記事について 開発していて、「 この API はこうだったらいいな～ 」って思うことはありますか？ 私はよく思っちゃうほうで、最近の開発でも使っている API について考えてしまって、夜も寝れなくなっちゃうことがあります（嘘）。 普段ならそんなくだらないことは自分の頭の中だけで食い散らかすだけなんですが、たまには私の頭の中のアイディアを文章にして、少しでも文章力を上げようかな～と思い、 「 もしも React Hooks がコンポーネントの外に書けるようになったら？ 」 というテーマで今回記事を書いていこうかなと思います🪀 別に記事のネタが思い浮かばなかったってわけじゃないよ ...

zenn.dev
3ヶ月前

葉桜の季節に君へルーティングライブラリ wouter を紹介するということ

この記事について みなさん、こんにちは。 最近覚えた言葉は「ペトリコール」、uttk です。 ここ数日 Electron + React の環境を触っていて、その過程で久しぶりに自前でルーティング処理を実装することになり、色々とライブラリを探していると wouter というライブラリがシンプルで使いやすかったので、今回は wouter について紹介したいと思います。 ! この記事は上記のリポジトリの README の情報を参考に書いています。 そのため、記事の情報やコードなどには引用などが含まれますので予めご了承ください 🙏 また、この記事の内容は時間とともに古くなる可能性があります...

zenn.dev
4ヶ月前

良い子の諸君！VSCode 拡張のサイドバーは WebView も表示できるぞ！

どゆこと？ VSCode 拡張では、サイドバーをカスタマイズできます（以下の画像の Ⓑ の部分） https://code.visualstudio.com/docs/getstarted/userinterface より引用 通常サイドバーにはファイルをツリー表示する TreeView ぐらいしか表示できませんが、実は WebView も表示することができます。[1] しかし、この機能についての公式ドキュメントがあんまり無くて、参考になる情報が公式サンプルぐらいしか無いので、この場を借りてサイドバーに WebView を表示する方法を紹介しようかなと思います 🐲 基本的な実装...

zenn.dev
5ヶ月前

Next.js で Props をソートすると gzip 時のビルドサイズを少しだけ減らせる

どういうこと？ 少し前に、CSS プロパティを自動ソートすると gzip 時のビルドサイズを減らせる記事を見ました 👇 https://zenn.dev/ubie_dev/articles/c2cdbf76f4d432 これにならい、JSX の Props もソートしたら同じようになるんじゃね？って思って試したら、ビルドサイズを減らすことができたので、この場を借りてその知見を共有したいと思います 💪 検証環境 パッケージ名 バージョン next 13.2.4 react 18.2.0 react-dom 18.2.0 typescript 4.9.5 ...

zenn.dev
6ヶ月前

GitHub Actions を使ってラベルで package.json の version を更新する

この記事について みなさん、こんにちは。 ”狸” か ”穴熊” なら、私は ”貉” 派。uttk です。 リリースローの構築って、すごく悩みますよね。自動化しつつ柔軟性も持たせるとなると、要件にもよりますが、大体は妥協する感じになると思います。 特にバージョニングのところが個人的に苦労していて、前々から色々と試していたんですが、今回、 ﾁｮｯﾄｲｲ 感じのバージョニングフローを構築ができたので、この場を借りて共有していこうかなと思います 💪 ちなみに、今回紹介するバージョニングフローは以下のリポジトリで活用しています 👇 https://github.com/zenn-dev/zen...

zenn.dev
7ヶ月前

もはや pnpm と Turborepo で Monorepo 環境作れるから

この記事について みなさん、こんにちは。 先日、pnpm + Turborepo + lerna-lite で作った Monorepo 環境の解説記事を書きました 👇 https://zenn.dev/team_zenn/articles/new-monorepo-env 今回は簡易的な Monorepo 環境を作って上記の構成を解説して行こうかと思います 💪 ( 最低限の Monorepo 機能しかないので需要はあるかは分かりませんが... ) ! 注意として、pnpm や node.js などのインストールは済ませてあることを前提に解説してきます。あらかじめご了承ください 🙏 ...

zenn.dev
8ヶ月前

zenn-editor の Monorepo 環境を pnpm + Turborepo + lerna-lite で構築した話

この記事について みなさん、こんちにちは。 好きな絶滅動物はアルゲンタヴィス。uttk です。 先日、zenn-editor の Monorepo 構成を Lerna から pnpm + Turborepo + lerna-lite に変えたので、この記事でその構成について解説していこうと思います 💪 https://github.com/zenn-dev/zenn-editor/pull/410 なんで、その構成？ zenn-editor では Lerna を使って Monorepo 環境を構築していましたが、実際に Lerna を使っている部分はビルド時とリリース時のみで、ほ...

zenn.dev
8ヶ月前

Zenn の VSCode 拡張（ 簡易版 ）を作って VSCode Web Extension に入門してみよう！

💬 この記事について どうも皆さん、こんにちは。 Zenn でお手伝いさせてもらっています uttk です。 今回は、先日公開された github.dev で Zenn のコンテンツを表示するための VSCode 拡張（β）の簡易版を作って VSCode Web Extension に入門してみようと思います 💪 https://info.zenn.dev/release-vscode-extension ! 全ての機能を作ると冗長になってしまうため、この記事では記事コンテンツのみを扱う機能に絞って実装します。あらかじめご留意ください 🙏 あと、参考までに使用する環境は以下の通りで...

zenn.dev
9ヶ月前

Next.jsの環境変数(ステージング)は気をつけたほうが、いいよ。

結論 Next.js では組み込みで環境変数を実行環境ごとに定義することができます[1] が、正しく設定しないと環境変数が正しく埋め込まれず、Tree Shaking などが有効に働かない可能性があります。 具体例を挙げると、以下のように一方のファイルのみに環境変数が定義されているとします 👇 .env.development NEXT_PUBLIC_HOGE="hoge-development" NEXT_PUBLIC_IS_DEV=true .env.production NEXT_PUBLIC_HOGE="hoge-production" # 本番では`NEXT_PUBL...

zenn.dev
1年前

Tree Shaking に対応してないライブラリを使っている場合は re-export はやめたほうがいいかも

この記事では TypeScript かつフロントエンドで動作する環境を想定しています。 そのため、この記事の内容は主にフロントエンドからの視点として見て頂ければ幸いです。 結論 Tree Shaking に対応してないライブラリを使っているソースコードで re-export を使用していると、不用意にファイルサイズを大きくしてしまう可能性があります。そのため、対応してないライブラリを使用している状況下である場合 ( またはそのような状況になりそうな場合 ) には、re-export などを使用せずに 信頼できる唯一の情報源 に従った方が良いと思います。 どうしても re-expo...

zenn.dev
2年前

無駄に話が長い人を無駄に邪魔する無駄なChrome拡張

この記事について https://twitter.com/uttk_dev/status/1468491788465803264 この記事では上記の Chrome 拡張で使用している技術や知見について解説していきたいと思います。 記事中のソースコードは TypeScript を用いて開発していきますので、予めご了承ください。 また拡張のソースコードは以下のリポジトリに公開していますので、参考にして下さい 👇 https://github.com/uttk/ojaman さて、それでは解説に行きましょう 🚀 MediaStream と Track について この解説には簡略化のた...

zenn.dev
2年前

画面キャプチャを仮想カメラとして扱えるようにするChrome拡張を作ってみる

この記事について https://twitter.com/catnose99/status/1445612717356638212 先日、@catnoseさんがカメラ映像の代わりに絵文字(Emoji)を配信するためのサービスを公開されました。凄く完成度が高くて良いサービスだと思ったので、さっそく使ってみたのですが、仮想カメラとして使用するためには OBS Studio が必要でした。[1] サービスを使うには全然申し分無いのですが、「 もっと簡単にできたらなぁ～ 」と思ってしまうのが私の悪い所で、すぐさまブラウザのみでどうにかできないかと調べてみると、色々な制約はありますが、Chro...

zenn.dev
2年前

Next.jsとFirebaseでCookieを使った認証処理を実装する

この記事について Firebase Authenticationと Next.js のgetServerSideProps()を使って、Cookie を使ったセッション管理方法を、この場を借りて共有したいと思います 💪 また、この記事の内容は基本的に以下の記事の内容を踏襲したものとなっています。そのため、内容やソースコードに引用などが含まれますので、予めご了承ください 🙇‍♂️ https://firebase.google.com/docs/auth/admin/manage-cookies?hl=ja それでは行きましょう 🛴 環境構築 ! この記事では Firebase の...

zenn.dev
2年前

なぜWebpackの設定はTypeScriptで書けるのか？

この記事について webpack の設定ファイルであるwebpack.config.jsは、TypeScript で書いて Node.js 上で実行できます。しかし、本来であれば TypeScript のソースコードは Node.js では実行できないはずです。 この事が気になった私は、今回その仕組みを調べてみたので、この場を借りてその調査結果を共有したいと思います 💪 参照 https://webpack.js.org/configuration/configuration-languages/ 記事の概要 概要のみ知りたい人に向けて、以下にこの記事で解説する内容をまとめておき...

zenn.dev
2年前

Next.jsでリダイレクトを行う方法をまとめてみた

この記事について この記事は、Next.jsのリダイレクト処理をまとめた記事になります。 Next.jsの基本的な理解がある事を前提に解説してきますので、予めご了承ください。 想定する環境 package.json "dependencies": { "next": "10.2.0", "react": "17.0.2", "react-dom": "17.0.2" }, getStaticProps・getServerSideProps を使う場合 getStaticProps・getServerSidePropsのリダイレクトは、両方...

zenn.dev
2年前

TypeScriptのゾッとする話 ~ Zodの紹介 ~

! 現在( 2021/09/13 )、この記事の情報は古くなっている可能性があります！ そのため、なるべくは公式ドキュメントを参照してください。 参照: 公式ドキュメント ! この記事の冒頭と末尾には茶番が含まれます！予めご留意ください 🙇‍♂️🙇‍♀️ この記事について 先日、「 エンジニアとして一番怖いモノは何？ 」と知人に尋ねると、 「 実は、TypeScript が一番怖い 」 と言ってきました。 そんな訳ないだろうと思っていたのですが、どうやら知人は本気の様子。 「 TypeScript が嫌いならまだしも、TypeScript が怖いとは、これはナニかあるな 🤔 」 ...

zenn.dev
2年前

TailwindCSSの重複したクラス名を上書き出来るようにする

! この記事の情報は古くなっている可能性があります！ 2023/04 現在では tailwind-merge などのライブラリがあるので、そちらを使用した方が良いかもしれません。 Thanks @nap5 結論 以下のような関数を作成して、クラス名を作成する際に使うと良いです 🏄‍♀️🏄‍♂️ twcx()を定義 import clsx, { ClassValue } from "clsx"; // tailwindで使える色配列 const colors = ["red","gray","yellow","green","blue","indigo","purple","pi...

zenn.dev
2年前

React Hooksのみでドラッグ＆ドロップの並び替えを実装する

この記事について 上記のようなドラッグ&ドロップを使った並び替えの処理を自作したは良いものの、使うことが無くなってしまったので、供養の意味を込めて、その時に得た知見をこの記事で共有したいと思います 💪 ! React Hooksについて基礎的な理解がある事を前提に解説していきます。 実装する条件 この記事で実装する処理は以下の条件のもと実装してきます。 サードパーティ製のライブラリを使用しない React Hooks を使って実装する 並び替えするときにアニメーションさせる 簡単に扱えるようにする！ アニメーションは CSS を使って行いますが、今回は簡略化の為に...

zenn.dev
2年前

Docker Alpine Linuxで、nvmを使えるようにする

以下の解決方法には致命的な問題点があります！詳細は 最後に の節を参照してください 🙏 解決方法 以下のような Dockerfile で、nvmを alpine linux で扱えるようになります。 Dockerfile(alpine) FROM alpine # nvmのインストールに必要なモノとnodeのコンパイルに必要なモノをインストール RUN apk add -U curl bash ca-certificates\ openssl ncurses coreutils python2\ make gcc g++ libgcc linux-headers\ gr...

zenn.dev
3年前

Next.jsの/pages内でページ以外のコンポーネントを配置する方法

結論 next.config.js の pageExtensions オプションを設定すると良いです 💪 next.config.js module.exports = { // ページコンポーネントの拡張子を変更する // 以下の設定の場合、ページコンポーネントは pages/index.page.tsx などのようになる pageExtensions: ['page.tsx', 'page.ts'] } 上記の設定をしたら、ページコンポーネントの拡張子を変更する事を忘れないようにしてください！そうしないと、404 Not Foundになります。( API Rou...

zenn.dev
3年前

そうです。わたしがReactをシンプルにするSWRです。

! SWR 2.0 がリリースされました🎉 それに伴いこの記事の内容は古くなっています！ そのため、なるべくは 公式ドキュメント ( 日本語版もあります！ ) を参照してください！ この記事について SWR について色々と学んだので、その知見をここで共有したいと思います 💪 ※ 基本的に以下の公式サイトの情報を参考にしています 📖 https://swr.vercel.app/ そのため、この記事で出すサンプルコードなどは主に上記の公式サイトから引用させてもらっています。予めご了承ください 🙏 SWR とは何か？ SWR は、Next.js を作っているVercel 社が開発し...

zenn.dev
3年前

NestJSでステージング環境を作る

この記事について NestJSでステージング環境を作っていきます 💪 NestJS のひな型が既に作成されている事を想定しています 必要なモジュールをインストール $ npm i --save @nestjs/config cross-env yarn を使っている場合は、以下のようになります。 $ yarn add @nestjs/config cross-env @nestjs/config の使い方やオプションについては、以下の記事を参照してください。 https://docs.nestjs.com/techniques/configuration https:/...

zenn.dev
3年前

standard-versionとgit-czを使って、CHANGELOGやバージョンを日本語で管理しよう！

この記事について standard-version と git-cz を使った、バージョン・CHANGELOG 管理環境がある程度まとまってきたので、備忘録も兼ねてその環境の構築方法をまとめていきたいと思います 🏋️‍♀️ 解決したい問題 簡単にバージョン管理したい コミットを簡単にしたい CHANGELOG.md を日本語で作成したい！ コミットメッセージは日本語で！ standard-version とは？ Conventional Commitsに則ったコミットメッセージから、バージョンを更新したり CHANGELOG.md を作成することが出来ます。 カスタマイズ...

zenn.dev
3年前

NestJSでJWTを使った認証を実装する

この記事について NestJSで、JWTを使った認証機能を実装して行きます 💪 ※ 基本的に以下の公式ドキュメントを参考にしていますが、一部実用的なモノに近づけた形で内容を変更しています。 https://docs.nestjs.com/security/authentication 必要な npm モジュールをインストール 既にnestコマンドなどで、プロジェクトのひな型を生成している事を想定しています。 $ npm i --save @nestjs/passport passport passport-local @nestjs/jwt passport-jwt $ np...

zenn.dev
3年前

プログラミングでの検索テクニック集

この記事について プログラミングする際には必ずと言っていいほど、エラーやツールの使い方について検索すると思います。しかし、検索すると言っても「 どういう単語を使えばいいか分からない 」、「 サイトから必要な情報を見つけられない 」など、検索に困ったことのある人は結構いると思います。 この記事では、筆者がやっている検索テクニックを少しだけご紹介したいと思います。 あくまで筆者の解決方法なので、必ず解決できるようになるわけではありませんが、参考になるとは思います。 もし間違いや、他のテクニックを知っているい人が居ましたら、コメントで教えて頂けると嬉しいです 🙏 検索テクニック 1 :...

zenn.dev
3年前

もう複雑なState管理や非同期処理に悩まない。そう、Trelaならね

この記事について この記事は、筆者が現在製作しているフレームワークについて解説した記事です。 紹介するフレームワークはJavaScriptで使う事が出来ますが、TypeScriptを使う事で最大のメリットを受けれるフレームワークであるため、この記事で紹介するソースコードはTypeScriptを用いて解説します。そのため、JavaScriptの知識に加えてTypeScriptの理解もあるとより理解できます。 この記事で紹介するフレームワークは、まだ開発中です( 2020/09 時点 ) 概要について知ることが出来る。そう、Trela ならね。 Trelaは、現在開発している非...

zenn.dev
3年前

なぜnpmjs.comのdownloadsの数が増えているのだ？

この記事について この記事は、npmjs.comで自作ライブラリを公開した時に、なぜだか最初からdownloads の数が増える問題を解説した記事になります。 問題となる場所 赤枠で囲ったdownloadsの部分ですが、一時的に downloads の数が伸びているのがグラフから分かります。 npmjs のブログにそのことが書いてあった 「 なんでだろう？🤔 」と思って調べてみたら、npmjs のブログにその事の記載がありました。 numeric precision matters: how npm download counts work 以下、上記の記事の内容を引用した内容...

zenn.dev
3年前