React で作るゆっくり解説 feat. Remotion
export const FirstVideoConfig: VideoConfig = { sections: [ { title: 'イントロダクション', bgmSrc: '/audio/bgm/honobono-wartz.wav', backgroundVideo: '/video/cyber-bg.mp4', afterMovie: '/video/yukkuri-opening.mp4', talks: [ { text: 'ねえねえ魔理沙', speaker: 'reimu', id: '59f8c2cd81334be5ab5cdc7899fad286', audioDurationFrames: 25, }, { text: 'なんだ霊夢', speaker: 'marisa', id: '0ba332a465c3404a870de15cad021407', audioD
OpenAPI からなるべく生成するフロントエンド開発
こんにちは。 スキーマから何かを生成するのが大好きな seya と申します。 追記 今後は基本お手製スクリプトは書かないで ChatGPT にお願いした方がいいと思います。 ------------- 追記 終わり ------------ 今の会社では REST API のスキーマを OpenAPI で記述しているのですが、それを活用して何かしらを生成するスクリプトをよく書いています。 そんなネタがそれなりに溜まってきたので一挙大放出しようというのがこの記事です。 具体的には次のようなものを作りました。 TypeScript の型と API の生成 by aspida テストのための Factory 関数の生成 msw handlers の生成 API スキーマから生成のデメリット まず初めに、"生成"というのはとても生産的に感じますが、デメリットも存在するので触れておきます。 一番大き
OpenAPI のスキーマが変わった時に通知して型など諸々を自動で生成する GitHub Actions
昨今では API のスキーマから型を生成することはフロントエンド界での基本的エンジニア権とされていますが、これはバックエンドとフロントエンドでレポジトリが分かれている場合にややワークフローが煩雑になります。 これを楽にするための GitHub Actions の設定を書いてみたのでご紹介します。 何もない時のワークフロー OpenAPI スキーマを生成する 中身をコピって別レポジトリにはっつける npm run generate:all を実行して諸々を生成する PR 作ってマージ というのをアップデートする度にやる必要があり地味に面倒です。 ので GitHub Actions で 2〜4 を自動化しちゃいましょう。 スキーマから生成して PR を作る Actions を作成 まずはフロント側のレポジトリで実行する Action を作ります。 やっていることは npm run genera
Google Form でフォーム送信時に関数を実行する方法
Google Form を送信時に何かしたいこと、あると思います。 ステップ1: Form を作る Form を作ってスクリプトエディタというのを開いてください。 ステップ２: 関数を作る こんな感じでメールを送るテスト関数を作ってみます。保存して「実行」を押してちゃんとメールが届くか試してみてください。 function onSubmit(event) { MailApp.sendEmail("hoge@gmail.com", "Subject", "テストの送信", {name:"From Name"}); } ステップ3: Google Form 送信時に関数を実行するようにする まず左のメニューから「トリガー」を選びます。 「トリガーを追加」を押すと次のようなダイアログが出てくるので、先程の関数(onSubmit)を「フォーム送信時」に実行するようにします。 Extra ステップ:
Prisma で始める快適テストデータ生活
以前こんな記事を書きまして、こちらではいわゆる Rails とかである Factory Bot みたいな感覚で使えるものが欲しいなと思い作りました。 ただ、実際にこれを使ってテストを書き始めてみたものの、すぐにまだ足りないものを見つけました。 それは relation を持つもののデータを作るのがめんどくさい default のデータを書くのがめんどくさい の2点です。これらが解ければユニットテストのデータ準備周りで困ることはなさそうだと思い、ソリューションを考えてきたのでご紹介します！ relation を持つもののデータを作るのがめんどくさい まずこちらですが、relation の持ち方については次の二つがあるのでそれぞれ個別に考えます。 foreign key を持っているパターン 中間テーブルで紐づけているパターン foreign key を持っているパターン こちらに関しては P
TypeScript で type と interface どっち使うのか問題
はじめに あくまで一個人の意見なので絶対的な解ではないというのと、どっちをデフォルトに選んでも普通にアプリケーション開発してて困ることはほぼほぼないと思うので、そこまで気を揉むことでもない、ということだけ最初に述べておいて意見をしたためます。 TL;DR アプリケーション開発では基本的に type でおk Declaration merging したい時だけ interface ライブラリ開発のような使う側で拡張したい(Declaration merging したい)時は interface とりあえずチームでどっちをデフォルトにするかは統一しといた方が気持ちいい type と interface の違い 機能的にはそんなに大きな違いはなく、個人的に判断に関わるのは次の3つかなと思います。 interface では Declaration merging がされる。type ではされない
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
Prism を使って OpenAPI の定義を元に値を返してくれるモックサーバーを建てる