本稿は Next.js で今試せる React canary の機能「useFormState」に関する記事です。Server Action を使用すると、API Client を使用せずにブラウザから直接サーバーサイドの関数を実行できます。Server Action のメリットは以下のものが挙がります。 API Client が不要になる ハイドレーションを待たずに反応できる Progressive Enhancement を維持できる useFormState の話の前に、Server Action について少し触れていきます。 Server Action だけではない「Client Action」とは？ 「Server Action」というワードを知っている方は多いと思いますが「Client Action」はまだ馴染みのないワードかもしれません。React、Next.js いずれも公

話題のAI画像生成で動画を変換してみました。Stable Diffusion(AUTOMATIC1111)を魔改造してmovie2movie（動画→動画）変換してます。不安定に見えますが、試行錯誤を経てだいぶ絵っぽく見えてきてます。ただ迫真空手部しか変換してみてないので、今後色々やってみようかと思います。元動画の解像度が低いからか元とかけ離れた画像を生成しまくって、調整すっげぇキツかったゾ...。▼実現方法1. 動画→フレーム出力2. フレームをSwinIRで4倍高解像度化3. ポスタリゼーションをかけて境界をくっきりさせてみました（階調は10弱、ですかね...）4. 画像を512px * 512px にリサイズ5. img2img変換（余力があればここでもう一回高解像度化してみても良いかも。）6. フレーム→動画出力※プロンプトはシーン毎に少しずつ変えてみてます。すべてpythonで自動

運用における成功1　プロジェクトに関わるリソースを可能な限りCDKで管理した 吉川幸弘氏（以下、吉川）：ではアジェンダの2点目、これまでの運用における成功と失敗について。 まず成功したこと。プロジェクトに関わるリソースを可能な限りCDKで管理したことです。 これはちょっと比較するにはズルいかもしれませんが、Excel手順書でリリースを作業していたプロジェクトと、CDKを用いた今回のプロジェクトで、リリースコストを比較してみました。 昔、Excel手順書を利用したプロジェクトに携わったことがありますが、レビュー対象は手順書のExcelで、実際の手順はレビュアーに判断基準を一任していたため、何が正しいかが文書化できなかったり、実際に行われる操作が手順書以外だったり、レビューコストがかなり高いという問題がありました。 また、リリース作業は手作業だったため、作業者が作業を誤る可能性も拭いきれません

はじめに サーバーレスに触れて数年が立ちました。 そろそろ人にある程度説明ができるレベルの知識と経験が備わったような気もするので、年末なのでまとめてみました。 サーバーレス気になっているけれども、という人に少しでもためになればいいなーと思います。 サーバーレス基礎 皆さん、サーバーレス設計という話を聞いたことはあるでしょうか？ まずサーバーレスについて説明しますが、世の中にはたくさん解説記事があるのでそちらも適宜参照ください。 サーバーレスでも実際にはサーバーは存在する サーバーレスとは開発者がサーバーのことを意識しなくてもよい、ということ Function as a serviceに代表されるように、あるプログラムの実行環境を提供するが、プログラムの動作環境は開発者は意識する必要はない、というイメージ 恐らく、AWS Lambdaが一番理解しやすいと思います。 AWS Lambdaではプ

イントロ MDN はもはや業界標準の JavaScript リファレンスサイトであるが、JavaScript の syntax (構文) や低レベルな動作については情報が載っていないことがある。このような場合は仕様に立ち返ってみる必要があるが、ECMAScript の仕様は非常に分かりにくい。この記事では、ECMAScript の仕様がどういうルールで書かれているか、どう読めばいいかを軽く説明する。 if 文の syntax の仕様ってどうなってるの？ if 文は statement1 であるから、"13 ECMAScript Language: Statements and Declarations" の中で説明されている。 早速最初の syntax1 のところを見てみると、下のように分かりにくい式のようなものが書かれている。 https://tc39.es/ecma262/#prod-

React v18 には多くの改善や新機能が盛り込まれる予定だが、そのなかでも特に注目を集めると思われるのが、Concurrent Features と呼ばれる一連の機能。 これらの機能を使うことで、コンポーネントのレンダリングについてより柔軟な設定が可能になり、上手く使えばパフォーマンスや UX の向上を実現できる。 この記事では Concurrent Features のひとつであるstartTransitionと、それを使いこなす上で重要な概念である「トランジション」について説明する。 この記事ではコンセプトの説明や具体例の提示のみを行う。詳細を知りたい場合は以下を参照。 一年前の記事であるため古くなっている部分もあるが、根幹は大きく変わっていないと認識している。 なお、上記の記事には「Concurrent Mode」という用語がタイトルに入っているが、これは今後は使われなくなってい