ハイパーマッスルエンジニア

Vim、ShellScriptについてよく書く

Javascript

Reactでセグメントコントロール作る

にゅるっとした動きのものがなかったので作った。 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」がすこぶるいい

Reactでアニメーションコンポーネントをサクッと作れるライブラリ「framer motion」。 非常に簡単にアニメーションをつけることができたので伝えたい。 www.framer.com インストール yarn add framer-motion かんたんアニメーション こんなdiv要素を用意して <div style={{ width: '100px', height: '100px', background: 'blue' }}></div>…

10年もののシステムをPHP・Twig・jQuery・BootstrapからNext.jsにリプレイスするときにやったこと

Twig, jQuery, Bootstrap で構成されていたシステムをNext.jsでリプレイスしたときにやったことを書く。 前提 IE対応必須 ディレクトリ設計 github.com を参考にした。 ユニットテスト用の__test__は基本的に作らず、format.tsとformat.test.tsは同じ階層に…

Next.jsでバリデーションするなら「Ajv」がいい感じ

ajvはNode.jsとブラウザ用のバリデーションライブラリ。 Typescriptで利用できるバリデーションライブラリといえば、yup, zod, joiあたりが候補に上がるが、ajvを採用した。 理由はバックエンド・クライアント両方で使えること、スキーマファイルを使えるこ…

Next.jsのoutputStandalone:trueで、pages/_middleware.ts があるとビルドに失敗するのはnext@12.0.10に上げたら直る

Docker イメージを軽くするための設定でoutputStandalone: trueにしていた。 module.exports = { experimental: { outputStandalone: true, }, しかしpages/_middleware.tsがあると下記のエラーが出てnext buildに失敗する。 > Build error occurred [Error:…

webpack × SentryでSourceMapが読み込まれないときの解決法

ソースマップが読み込まれなくて困ったときの解決方法を書いていくで。 ・releaseタグをinit時にも書いてないか ・urlPrefixをつけているか ...

React, TypescriptでChrome Extensionを開発する(ホットリロード対応)

死ぬほど参考にさせていただいたサイト 基本的には下記のサイトを参考に進めればいけます。(最高の記事ありがとうございます、大感謝祭) code-log.hatenablog.com 本記事では上記で紹介されていたホットリロードがエラーで動かなかったため、別の方法でホッ…

ブラウザからTemrinalに接続するxterm.jsをNext.jsとNestJSで構築する

xterm.jsが楽しそう ブラウザにTerminalを設置できるxterm.jsというライブラリがある。VSCodeのTerminalやHyperなどに使われている。 xterm.jsが提供するのはざっくり言ってしまえばTerminalの形をしたテキストフィールドのみ。実際にTerminalに接続したりキ…

NestJSでよく見る@Decoratorって何なのかわからなかったからサクッと試してみた

NestJSで@Controllerのような@を使った書き方をよくみる。よくわからず使っていたけど調べてみたらなんてことなかったので書き留めておく。 こういうやつ。 @Controller('app') export class AppController { @Post() create(@Body() dto: CreateAppDto) {} …

NestJSとNext.jsをlernaでモノレポ化する

最近流行りのフレームワークたちをlernaを使ってモノレポ化する。 構成はこんな感じになる想定。 . ├── lerna.json ├── package.json └── packages ├── client <-------- Next.js │ └── package.json └── server <-------- NestJS └── package.json どこまで…

Github Actionsのアクション作ってみる(Typescript編)

Typescriptで独自アクション作る 以前GithubActionsを使ってHomebrewのリリースを自動化し、一部のstepを独自アクションとして切り出した。 www.rasukarusan.com www.rasukarusan.com 前回のDockerで書き出したアクションを、Typescriptで書いてみる。 対象…

Express, MonogoDB, React, TypeScriptの開発を始めるときに困ったこと、参考になったサイト

今まで業務ではPHP, MySQL, 素のJavascriptを触っていた、いわゆるサーバー側のWebエンジニアがオールJavascriptの開発をする上で困ったことをずらずら書いていく。 今回は誰かに見てもらうというより自分のメモを公開するに近いので、全くまとまっていない…

Webのリクエスト方法についてやんわりと考えてみる

先日GoでInstagramぶっこ抜きというものを作った時、リクエスト方法について少し悩んだ。 個人開発で大規模なものじゃないから、リソースについてそんなにシビアにならなくてもいいのだが、一度考えてみた。 rasukarusan.github.io 全体の動き サーバーにaja…

自作HPにコメントボックスを追加する

WordPressを使わずにやりたい 自作HPにコメント欄をつけようと色々探していたが、どれもWordPress用のプラグインばかりでHTMLでコードを追加して実装するという方法がなく、どうしようかと悩んでいたところ、HTML Comment Boxというものを見つけた。 海外の…