Javascript
Next.js,Biome,Vim,ALE の開発環境構築メモ めちゃくちゃ参考になったサイト Biome の設定方法に関しては下記に全てが載っています。ありがとうございます！ zenn.dev Next.js セットアップ npx create-next-app@latest ESLint を使うかの問いだけNoを選択し…
NextAuth を使って認証処理を実装しているアプリで、ページアクセスからログイン状態になるまで少し時間がかかるのが気になっていた。 体感的にはアクセスから 2 秒ぐらい経ってからユーザーアイコンが表示される感じだった。 右上のユーザーアイコンが、ア…
Server Sent Events (SSE)は、サーバからクライアントにリアルタイムで情報をプッシュするための技術です。この記事では、そのフロントエンドでの実装方法をいくつか紹介します。 完成品 今回実装したものは下記に収めてます。Next.jsを使っています。 githu…
バーチャルオフィス「Gather」ではWebSocketAPIがあり、 プレイヤー入退出のイベント プレイヤーをテレポートさせる プレイヤーのアバターを着せ替える など自由度の高いAPIが多く用意されている。 これらのAPIを使って 紙吹雪でプレイヤー吹き飛ばし プレイ…
課題 jQuery, HTML, PHPで構成されているようなプロジェクトで、新たにnpmやcomposerの導入が難しく、巷のホットリロードのツールが利用できない場合を想定。 つまり既存のプロジェクトの構成は変えられないけど、ホットリロード機構は欲しかった。 作ったも…
iframeでPDFを表示すると、iPhoneやiPadでは1枚目しか表示されない問題がある。これはstackoverflowや他のサイトでも報告されているとおりブラウザのバグっぽい。 iPhoneだとPDFの1枚目しか表示されない PCだと1枚目以降も表示される 対応策 PDF.jsを利用す…
現象 Next.jsで画像アップロードすると、アップロード処理がpendingで止まってしまう。 アップロード処理がpendingになる コードは下記。エラー判定はなどは飛ばしているが、FormDataをPOSTするシンプルなやつ。 pages/Index.tsx export default function Ho…
にゅるっとした動きのものがなかったので作った。 Next.jsで動くのを目的に作ったので、styled-jsxを利用している。 SegmentControl.tsx import css from 'styled-jsx/css' import { useState, useEffect } from 'react' const styles = css` .controls { di…
Reactでアニメーションコンポーネントをサクッと作れるライブラリ「framer motion」。 非常に簡単にアニメーションをつけることができたので伝えたい。 www.framer.com インストール yarn add framer-motion かんたんアニメーション こんなdiv要素を用意して <div style={{ width: '100px', height: '100px', background: 'blue' }}></div>…
Twig, jQuery, Bootstrap で構成されていたシステムをNext.jsでリプレイスしたときにやったことを書く。 前提 IE対応必須 ディレクトリ設計 github.com を参考にした。 ユニットテスト用の__test__は基本的に作らず、format.tsとformat.test.tsは同じ階層に…
ajvはNode.jsとブラウザ用のバリデーションライブラリ。 Typescriptで利用できるバリデーションライブラリといえば、yup, zod, joiあたりが候補に上がるが、ajvを採用した。 理由はバックエンド・クライアント両方で使えること、スキーマファイルを使えるこ…
Docker イメージを軽くするための設定でoutputStandalone: trueにしていた。 module.exports = { experimental: { outputStandalone: true, }, しかしpages/_middleware.tsがあると下記のエラーが出てnext buildに失敗する。 > Build error occurred [Error:…
ソースマップが読み込まれなくて困ったときの解決方法を書いていくで。 ・releaseタグをinit時にも書いてないか ・urlPrefixをつけているか ...
死ぬほど参考にさせていただいたサイト 基本的には下記のサイトを参考に進めればいけます。(最高の記事ありがとうございます、大感謝祭) code-log.hatenablog.com 本記事では上記で紹介されていたホットリロードがエラーで動かなかったため、別の方法でホッ…
xterm.jsが楽しそう ブラウザにTerminalを設置できるxterm.jsというライブラリがある。VSCodeのTerminalやHyperなどに使われている。 xterm.jsが提供するのはざっくり言ってしまえばTerminalの形をしたテキストフィールドのみ。実際にTerminalに接続したりキ…
NestJSで@Controllerのような@を使った書き方をよくみる。よくわからず使っていたけど調べてみたらなんてことなかったので書き留めておく。 こういうやつ。 @Controller('app') export class AppController { @Post() create(@Body() dto: CreateAppDto) {} …
最近流行りのフレームワークたちをlernaを使ってモノレポ化する。 構成はこんな感じになる想定。 . ├── lerna.json ├── package.json └── packages ├── client <-------- Next.js │ └── package.json └── server <-------- NestJS └── package.json どこまで…
Typescriptで独自アクション作る 以前GithubActionsを使ってHomebrewのリリースを自動化し、一部のstepを独自アクションとして切り出した。 www.rasukarusan.com www.rasukarusan.com 前回のDockerで書き出したアクションを、Typescriptで書いてみる。 対象…
今まで業務ではPHP, MySQL, 素のJavascriptを触っていた、いわゆるサーバー側のWebエンジニアがオールJavascriptの開発をする上で困ったことをずらずら書いていく。 今回は誰かに見てもらうというより自分のメモを公開するに近いので、全くまとまっていない…
先日GoでInstagramぶっこ抜きというものを作った時、リクエスト方法について少し悩んだ。 個人開発で大規模なものじゃないから、リソースについてそんなにシビアにならなくてもいいのだが、一度考えてみた。 rasukarusan.github.io 全体の動き サーバーにaja…
WordPressを使わずにやりたい 自作HPにコメント欄をつけようと色々探していたが、どれもWordPress用のプラグインばかりでHTMLでコードを追加して実装するという方法がなく、どうしようかと悩んでいたところ、HTML Comment Boxというものを見つけた。 海外の…
