Next.jsがゴリ押してきたReact Server Componentが広まってきて使われてはじめている.
↓
ServerとClientでレンダリングされているHTMLが異なる場合にでるHydrationErrorによく遭遇するようになった.
↓
とはいえ,LocalStorageとかをliteに使用してアプリを開発したいよね.
↓
"use client";

import dynamic from "next/dynamic";

const CheckPlayerName = dynamic(
  () =&gt; import("@/features/CheckPlayer...

Next.jsがゴリ押してきたReact Server Componentが広まってきて使われてはじめている.
↓
ServerとClientでレンダリングされているHTMLが異なる場合にでるHydrationErrorによく遭遇するようになった.
↓
とはいえ,LocalStorageとかをliteに使用してアプリを開発したいよね.
↓
"use client";

import dynamic from "next/dynamic";

const CheckPlayerName = dynamic(
  () => import("@/features/CheckPlayer...

Next.jsでComponentをClientでだけレンダリングさせたいときのメモ


 事象（※2024/04/14時点での出来事です）
動かないと言うか, StorybookでTailwind CSSのスタイルが当たらない現象が発生しました.
通常は.storybook/preview.tsに
import "../src/app/globals.css";
のように書くことでStorybookのUIにもTailwind CSSが反映されるはずです.（以下のリンク参考）
https://storybook.js.org/recipes/tailwindcss
しかし, 反映されないのです.
厳密には,globals.cssは読み込んでいることは確認できたので,tail...

Next.js, Tailwind, Storybookが動かない人を救いたい


 Biomeを使ってみる

 Biomeとは
これ
https://biomejs.dev/ja/
サイトが日本語対応している！
簡単に言うと,ESLintとPrettierの代わりとなるやつ
Rustでできていてくそはやい
ちな,開発終了したRomeを作った人が,あらたに作っているらしい.
というわけで最低限のハンズオンをやる.

 はじめるよ
インストール
yarn add --dev --exact @biomejs/biome
初期設定とか
yarn biome init
biome.jsonが作られる.ようは.eslintrcと.prettierrc
{
	"$schema"...

今さらBiomeを使ってみる


 filterメソッドから吐き出される型を制御する方法
TypeScriptで開発していると,配列の中身がundefinedになるケースがたまにあって,
['hoge', undefined, 'huga', undefined, 'hige']
// このときこの型は (string | undefined)[]
みたいな配列が生まれてしまうことがやむなし.みたいな状況になることがある.
このときこの型は(string | undefined)[]だが,
それをfilterメソッドを使って,
['hoge', undefined, 'huga', undefined, 'hige']...

filterメソッドから吐き出されるデータからundefinedを取り除きたい


 Server Actionsがかなりキツイという話
さて,相も変わらぬフロントエンドは発展途上なわけでありますが,Next.jsのServer ActionsがStableになってしばらく経ちましたが,みなさまはいかがお過ごしでしょうか.
Server Actionsを本格的に使ってみたので例を上げながら所感を述べたいと思います.
タイトルに,「キツイ」という曖昧な表現をしましたが,ネガティブな意味はなく,概ねはServer Actionsの使用感には満足しています.ただ,今のところ手が届かないことが多いように感じました.

 Server Actionsのベースとなる書き方
一般的...

Server Actionsがかなりキツイという話

解決したので事実だけ共有
2023/10/06現在の話
next/headerのcookiesを使うとDynamicServerErrorで怒られる
ServerComponentでSupabaseのclientを呼ぶときは公式にはこのように書くように記されている.
import { cookies } from 'next/headers'
import { createServerComponentClient } from '@supabase/auth-helpers-nextjs'

import type { Database } from '@/lib/database.t...

Next.js App RouterでSupabaseを使うときに困った


 JavaScriptでSTREAM DECKのプラグインを作った
最近STREAM DECKというデバイスを買いました.
https://amzn.to/3OA6gNi
よくある設定したマクロををボタンで起動する的なやつです.
当初は物理ボタンやダイヤルで音量調節できたらいいなーって感じで買ったのですが,他にもできることを模索したりいろいろカスタマイズしていくうちに既存のプラグインでは物足りなさを感じた（Macに対応しているプラグインが少ない😡）ので自作しました.
調べているとそれなりにしっかりした開発用ドキュメントが見つかりました.
https://docs.elgato.com/...

JavaScriptでSTREAM DECKのプラグインを作った


 TypeScript4.9のsatisfiesをﾁｮｯﾄ理解した
TypeScript4.9くらいから追加されたsatisfiesの使い方と意味をﾁｮｯﾄ理解できたので,コードで直感的にわかるように説明してみます.

 やりたいこと
const signals = [
  'red',
  'yellow',
  'green',
  'orange', // type errorにしたい
];  // 特定の色しかこの配列には入れたくないので

const color: string = 'red'; // 任意の色が入りたい

const isSignalColor = sign...

TypeScript4.9のsatisfiesをﾁｮｯﾄ理解した


 ChatGPTが応えてくれるSlackのbot作ったけどまじ簡単
ChatGPT.もともとOpen AIからAPIが提供されていたけどReference読んでも使うのめっちゃ難しかったけど,今回簡単に使えるAPIがリリースされたので使ってみた.まじ簡単🤩
https://platform.openai.com/docs/api-reference/chat/create

 使った技術
TypeScript, Node.js, Bolt（SlackのイベントをListenしてくれるSDK）
TypeScriptじゃなくても平気です.
また,今回の記事ではSlackのbotってそもそも...

ChatGPTが応えてくれるSlackのbot作ったけどまじ簡単


 完全に理解してオレオレFileListControlComponentを作ってみたので解説します
JavaScriptのFileListの操作ってちょっと厄介ですよね.
Reactが絡むともっと厄介ですよね（本当は絡んでいないんですが）
今回は&lt;input type="file" multiple /&gt;においてアップロードされたファイルを管理するコンポーネントを作ったので理解を深めながら解決していきます.
React, TypeScriptでやります.
!
今回はevent.targetとevent.currentTargetの違いに関してあまり考慮しておりません.その性...

完全に理解してオレオレFileListControlComponentを作ってみたので解説します
JavaScriptのFileListの操作ってちょっと厄介ですよね.
Reactが絡むともっと厄介ですよね（本当は絡んでいないんですが）
今回は<input type="file" multiple />においてアップロードされたファイルを管理するコンポーネントを作ったので理解を深めながら解決していきます.
React, TypeScriptでやります.
!
今回はevent.targetとevent.currentTargetの違いに関してあまり考慮しておりません.その性...

Reactで複数ファイルアップロードを実装するときに考えること


 2023年に誰よりも早くに本気のBlogを作ったよ
どーも,Notionは3年前くらいから大好きなのですが,最近使ってきている人があまりに増えていてちょっと好きじゃなくなっています.（本当はすごく嬉しい）というわけで,普通の人にはできないNotion APIを使って,NotionのDatabaseにPageを保存してStatus PropertyをPUBLISHにした記事を自動で公開してくれるNotion Blog（3度目）を作りました.
我ながらかなり完成度が高いので,この満足感をおすそ分けします.
Web開発全般の話をするので,Notionに関する話は多分4割くらいになるかなと....

日本一本気で作ったNotion Blog  2023年決定版

TypeScript中級者になるために,習得した奥義を公開します.

 object→type
JavaScriptのオブジェクトや配列から型エイリアスを作成する便利なテクニック一覧

 オブジェクトを型に
みんな大好きtypof
const user = {
  id: 1,
  name: 'Steve Nobs',
  isAuth: true,
};

type User = typeof user; // 以下と同義

type User = {
    id: number;
    name: string;
    isAuth: boolean;
};

 オブジェクト...

型パズルがたのしくなるための技法リスト

!
【2023/03/20追記】
この記事の方法ではSafariでは改行されないことがわかりました.
p {
  white-space: pre-wrap;
  word-break: keep-all;
}

を指定するとChromeでもSafariでも動きました 🎉

HTMLで改行する場所を指定する方法を紹介します.

 エンジニアには今日も悪魔がささやく
こんなデザインを見ると実装に困るのは私だけだろうか？

もちろんHTMLは想像に容易くこんなところだろう.
&lt;div&gt;
  &lt;h2&gt;お願い&lt;/h2&gt;
  &lt;p&gt;
    こちらの...

!
【2023/03/20追記】
この記事の方法ではSafariでは改行されないことがわかりました.
p {
  white-space: pre-wrap;
  word-break: keep-all;
}

を指定するとChromeでもSafariでも動きました 🎉

HTMLで改行する場所を指定する方法を紹介します.

 エンジニアには今日も悪魔がささやく
こんなデザインを見ると実装に困るのは私だけだろうか？

もちろんHTMLは想像に容易くこんなところだろう.
<div>
  <h2>お願い</h2>
  <p>
    こちらの...

<wbr>を知っているか

超ざっくり書く.
CSF3.0で書き方が変わるらしい.
TypeScriptでは,こうなる.
import type { Meta, StoryObj } from '@storybook/react';
import { Heading1 as Component } from '.';

export default {
  component: Component,
  argTypes: {},
  },
} as Meta&lt;typeof Component&gt;;

export const Default: StoryObj&lt;typeof Component&g...

超ざっくり書く.
CSF3.0で書き方が変わるらしい.
TypeScriptでは,こうなる.
import type { Meta, StoryObj } from '@storybook/react';
import { Heading1 as Component } from '.';

export default {
  component: Component,
  argTypes: {},
  },
} as Meta<typeof Component>;

export const Default: StoryObj<typeof Component&g...

Storybook7.0のCSF3.0の書き方はこれだけ(TypeScript)

2022年3月から主要ブラウザ(Chrome, Edge, Firefox, Safari)で dialog要素が利用できるようになったそうなのでそれを使ってDialogすなわりModalのコンポーネントを作ったらどんな感じになるかを試してみました.説明少なめですが記事にします.
また,今回はできるだけ最小限のコードで作成することを意識しています.

 dialog要素ってなに？
https://developer.mozilla.org/ja/docs/Web/HTML/Element/dialog

eventで表示/非表示を切り替えることができる
backdropという疑似要素があ...

HTMLのdialog要素でDialogComponentを作る（React）


 はじめに
Tailwind CSSに関する技術の難しい話はしないです.できないです.
しかし,ある程度は一般の人の思考のメカニズムや脳処理の工程は理解しているつもりです.
なので今回は,単にclassをつけてCSSファイルを別に作成しスタイリングする方法はどうも凡人の脳の処理能力では困難なのではなかろうかという話です.
決してTailwind CSSを推奨するためのものではございません.

 まずは実装例から
以下の3つの例を参考にお話をします.

 ①）通常のHTML/CSSで
.html
&lt;div class="section__discription"&gt;
  &lt...

はじめに
Tailwind CSSに関する技術の難しい話はしないです.できないです.
しかし,ある程度は一般の人の思考のメカニズムや脳処理の工程は理解しているつもりです.
なので今回は,単にclassをつけてCSSファイルを別に作成しスタイリングする方法はどうも凡人の脳の処理能力では困難なのではなかろうかという話です.
決してTailwind CSSを推奨するためのものではございません.

 まずは実装例から
以下の3つの例を参考にお話をします.

 ①）通常のHTML/CSSで
.html
<div class="section__discription">
  <...

Inline StyleであるTailwind CSSの利点は脳のコスパ↑

開発を進めていく中で,TypeScriptで空を許容しない配列型の書き方が必要になることがありました.
知らなかったので共有がてら簡潔に書く.
（最近流行りの自動コード生成で出てきてほえー😳ってなった）
JavaScriptでは
const array: string[] = [];
こんなふうに配列を使用するときの初期値は空の配列であることがほとんどなので,あんまり使わなかった.
const array: [string, ...string[]] = []; // Type Error

const array: [string, ...string[]] = ['string'];...

TypeScriptで空を許容しない配列型の書き方

今日ではインターネットなしでは生活できないのと同様に、TypeScriptなしではフロントエンドの開発ができない世の中になっています。
そんなTypeScriptに囲まれた生活をしていると度々extendsを見ることになるでしょう。
今回はこのextendsの理解を深めるために記事を書きました。

 Genericsのおさらい
まずはじめに本記事ではGenericsを用いたコードが出てきますので、おさらいします。
以下は最もシンプルなGenericsを用いた記法です。
type A&lt;T&gt; = T
const moji:A&lt;string&gt; = 'moji';
con...

今日ではインターネットなしでは生活できないのと同様に、TypeScriptなしではフロントエンドの開発ができない世の中になっています。
そんなTypeScriptに囲まれた生活をしていると度々extendsを見ることになるでしょう。
今回はこのextendsの理解を深めるために記事を書きました。

 Genericsのおさらい
まずはじめに本記事ではGenericsを用いたコードが出てきますので、おさらいします。
以下は最もシンプルなGenericsを用いた記法です。
type A<T> = T
const moji:A<string> = 'moji';
con...

TypeScriptのextendsってなんなん？


 Axiosのinterceptorsを使うだけ
フロントエンドのエラーハンドリングで悩んでいた時期もありましたが、APIのエラーハンドリングに関してはこの記事で紹介する内容が最も良さそうだと思いました。
一応、フロントエンドがJavaScriptのプロジェクトでAPIの接続にAxiosを使っているという前提になります。
Axiosがなんなのかはふれません🫠
AxiosではRequestとResponseの前に処理を差し込めるinterceptorsというAPIが用意されています。
https://axios-http.com/docs/interceptors
これをimportした...

Axiosしているならエラーハンドリングはinterceptors一択

!
こちらNotion APIの2022/08/31の変更で再び含まれるようになりました 🎉
LGTM！！
https://developers.notion.com/changelog/changes-for-august-31-2022

どうしてもタイトルが短くなりませんでしたこんにちは。
以前まではNotionのSDKなどでQuery a databaseを叩くとそのデータベース内のPageのPropertiesの内容を全て含めて返していたのですが、2022/6/28のUpdateを受けてパフォーマンスの低下などの理由からこれが含まれなくなりました。

While conveni...

noblog

- My Zenn articles -