
 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...

Notion APIのDatabase objectにpropertiesの中身が含まれなくなったので対応する


 背景

Web開発において,DnD（ドラッグアンドドロップ）を実装したいときってあるよね
いろいろな理由があってライブラリを使わずに実装しなければならないときってあるよね
「「onDragイベント使えばできる」けどめんどくさい」ということは知っている


 drag関連のイベント多すぎ問題😇

drag
dragstart
dragend
dragenter
dragleave
dragover
drop

😇😇😇😇😇😇😇😇😇
はじめに,こいつらを平たく説明します.
JavaScriptのeventの説明は割愛します.一言でいうと〇〇が起きたとき（発火時）に関数が実行されるやつ.
ま...

ドラッグアンドドロップ完全に理解した


 やりたいこと
const fruits = ["apple", "banana", "cherry"]
この配列を参照して,
type Fruits = "apple" | "banana" | "cherry"
という型をも作りたい.

 どうやるの？

 まず配列をreadonlyにする
const fruits = ["apple", "banana", "cherry"] as const
as constをつけることで,配列の要素は全てreadonlyとなる.

 typeofを使って型を作成
そこで,こうする.
type FruitsType = typeof fruit...

配列の要素をリテラル型にする方法[TypeScript]

普段React（JavaScript）を使って開発している駆け出しエンジニアがweb3の技術に入門したときのノートを引用して本にしたものです.「JavaScriptでweb3の技術に入門する」というハンズオン形式のお話になります.わからないことが盛りだくさんになりがちなweb3の勉強をふわふわしたままでもいいよねというスタンスでアウトプットしていきます.

一般人がweb3やBlockchainの開発に入門してみる


 PlanetScaleをNext.jsとPrismaで始める
なんだか話題になっているPlanetScaleですが,以前は,英語できない,DBわからない,Prisma未経験な状態で,モダンと聞いただけでPlanetScaleを始めようとしたけど,結局わからないことが多く,実用に踏み出せなかったのですが,レベルが18から24くらいに上がったことでちょっと理解できることが増えたので,改めて始め方と使い方をわかりやすくまとめて見ようと思います.
名目としては,フロントエンド,バックエンドでのAPI開発,データベースの操作一貫して開発することでゆとりフルスタックエンジニアになることです.

...

PlanetScaleをNext.jsとPrismaで始める

おそらく原因はTypeScript v4.4以降では,catchの引数がunknownになるオプション（useUnknownInCatchVariables）がデフォルトでtrueに変更になったためである.
だから,落ち着いて,tsconfig.jsonのcompilerOptionsを以下のように編集するのだ.
{
  "compilerOptions": {
    "useUnknownInCatchVariables": false,
  }
}
これでcatchの引数はanyになる😝


TypeCcriptでcatchのerrorがunknownになる問題

以下のモダンな技術を含むライブラリをフル活用しながらWebアプリを作ってく工程を記録していきます。

暫定）Next.js / TypeScript / Stripe / Magic / PlanetScale / Prisma / Cookie / Slack API / TailwindCSS / Mantine

学習の大きな目的としては
- PlanetScaleによるサーバレスデータベースのお試し
- Magicによるパスワードレス認証のお試し
- Stripeによる決済機能の実装
- Slack API による自動化
- UI ライブラリ Mantine のお試し
となります。（これは多分ぶれない予定）

私はエンジニア歴1年目の小童ですが、プログラミング学習歴1〜2年くらいの人には刺さるのかなと思いながら書いていきます。
初学者の方は最小構成で学ぶことをおすすめしますので、間違ってもこの教材には手を出さないでください👯‍♀️

また、語り口調でダラダラ書いていきます点ご容赦ください。（指摘や意見は歓迎）

完成するまで無料で公開（完成できなかったらずっと無料）ですが、バッジを贈って応援していただけると嬉しいです🦑

noblog

- My Zenn articles -