JSのDate型について気になったので改めて確認した。 JSのDateはTimezoneを持っている。 const date = new Date() このdateをコンソールで確認すると以下になる。 Wed May 01 2024 21:53:33 GMT+0900 (日本標準時) Dateインスタンスをシリアライズする場合は…

SVGを最近よく活用している。CanvasよりReactとの相性はよいし、ベクターなのも好み。 （Three.jsを使えると面白いけど、、その機会はなかなかない。） だいたいの場合は、HTMLに埋め込んで使えばいいので、特別なことをする必要はない。 ただ、たまに画像と…

APIを試してみたのでメモ。 import 'dotenv/config' const API_KEY = process.env.DEEPL_API_KEY; const API_DOMAIN = process.env.DEEPL_API_DOMAIN; if (API_KEY == null || API_DOMAIN == null) { throw new Error(); } const API_ENDPOINT = `https://${…

Azure Static Web Appではstaticなファイルにはmiddlewareが機能しないっぽいので、 画像にも認証をかけたい場合はAPIで画像を返すようにする必要がある。 Static Web Appってそういうものだよなーと思っているので仕方ない気がするし、 そもそも認証が必要…

以前にAzure Web App Serviceへのデプロイについての記事を書きました。 ma38su.hatenablog.com 今回はこのデプロイをブラッシュアップして、Azure Pipelineからstatic web appへもデプロイできるようにしました。 2024/2/10 追記 Next.JSのmiddlewareうまく…

NextJsの認証を簡単に実現するモジュールのひとつであるNextAuth.jsについて、Autodeskアカウントを使ってみようということで、 今回はカスタムプロバイダーとしてAutodesk Platform ServicesのOAuthを試してみたので、その結果を残しておきます。 いまauth.…

新しい技術を試すにあたって、面倒ではあるが、認証までは一通り使いこなせる必要があると感じている。ただ、認証は結構めんどくさいし、すぐ忘れてしまいがちなので、メモを残しておく。 GraphQLサーバに、認証機能を付与するにあたって、Contextを定義する…

GraphQL、型定義をスキーマから自動生成するところまで試してみた。 やってみて気づいたこととして、自動生成する型定義はサーバとクライアントの2種類があるということ。それぞれ必要。 サーバ サーバの方はschema.graphqlというようなスキーマ定義ファイル…

GraphQLの理解のため、まずはライブラリなど使わずfetchでGraphQLのクエリを発行してみる。 const query = gql`{ books { id } }`; async function queryByFetch() { const res = await fetch('http://localhost:4000/graphql', { method: 'POST', headers: …

expressを使うと楽に実装できた。 まだ試行錯誤しているので、とりあえずvite.config.tsにべた書き。 import { ViteDevServer, PluginOption, defineConfig } from 'vite' import react from '@vitejs/plugin-react-swc' import express from 'express'; imp…

追記：NextJS(AppRouter)でSuspenseを使うときはCSRにしようと書いたのだが、CSRだとNextJSのRouter Cacheと相性がわるそう。というか、最近NextJSはオーバースペックだなぁと感じている。 Viteで作っていたReactのプロトをNextjsに移植したところ、Suspense…

最近、新しいアプリを作ってみたらデプロイに苦労したのでメモを残しておく。 2023.9.13時点で、Next.JSのアプリは、VSCodeの拡張機能や、Web App Serviceから自動設定できるGitHub連携のデフォルトのGitHub Actionでは、Next.JSのデプロイに時間がかかりす…

いくつかのPJで共通した処理があり、それぞれで書き直すのもめんどくさいので、packageを作りたくなったのだが、そこでふと、packageってどうつくればいいのか？と思い調べてみた。 publicに運用したい場合 npmやgithub packageなどが選択肢になる。 ただし…

少し前に話題になっていたReact自体の自作をやってみた。 一日かからないくらいの時間で、実装できるし、Reactの動作をかなりこまかく理解できるようになったので、React書く人にはお勧めしたい。 zenn.dev 自分が書いたのは以下。ほぼ写経。 github.com 気…

Typescriptをビルドせずに実行するために、久々にts-nodeを使ってみたらエラーが出た。 $ npx ts-node script.ts TypeError [ERR_UNKNOWN_FILE_EXTENSION]: Unknown file extension ".ts" for /home/xxxx/.../script.ts ... 以下の2点を対処したら解決した。…

Javascriptが標準のプロジェクトにおいて、Typescriptに移行したいとする。 一気に移行するのはリスクも大きいし、成功する気がしない。 なので、現実的には、Javascriptをできるだけ小さくTypescriptに切り出すのを繰り返して、段階的に移行していくのがよ…

距離を考慮した計算が必要なときは、XY座標系に直してから計算しないと多分だめなので、 現在表示している地図上のXY座標系と、Lat, Lng（緯度経度）とを相互変換する方法を調べてみました。 緯度経度からXY座標へ import * as webMercatorUtils from "@arcg…

環境変数の扱いが変わる。 process.env ではなく、 import.meta.env で定義する。 また、Prefixは、VITE_APP_になる。 vitejs.dev

Viteはthreejsで使うときも、基本、そのまま使えますが、 多少のご作法は理解しておく必要がありましたので、メモを残しておきます。 JSのコード中で読み込むアセットの取り扱い jsでimportなどせずにパスやURLを指定して読み込むテクスチャやフォントなどで…

RDS ProxyでTLS接続を試した。 TLSを有効にすると、証明書を設定する必要がある。 Lambdaの場合は以下のようなコードになるかな。 const fs = require('fs'); const mysql('mysql2/promise'); exports.handler = async (event) => { let con; try { con = aw…

軽量なコンテナを作るにはdistrolessのイメージをベースにするのがよいらしい。 distrolessは、Googleが管理しているイメージで、Google Container Registryで管理されているっぽい。 github.com 当たり前だけどdockerhubで検索してもでてこない。 とりあえ…

express-generatorは、パッケージ名とコマンド名が異なるので、npxでインストールせずに使うのがちょっとめんどくさい。 npx --package express-generator -- express -h ただ、インストールするか？と確認されるので、どこかにはインストールされているのか…

インターネットへのアクセスにプロキシが必要な社内ネットに、Webサーバを立てて、Auth Code FlowでOIDCの認証を利用しようとすると、 Webサーバ(OIDCのクライアント)とOIDCプロバイダーの間にもProxyを通しておく必要がある。 例えば、expressでAzureADのOI…

変数名が重複する場合とか変数名を変えて分割代入したいときは以下でできる。 const data = { month: '10', year: '2020' } const { month: thisMonth, year: thisYear } = data; console.log({ thisMonth, thisYear }); さらに初期値も設定できる。 const r…

Sequelizeはnode用のORマッパー。expressでWebアプリを組むときには選択肢に上がってくる。 このSequelize（に限らないが）、手を動かさないとよくわからないところがあったりするので、お手軽に試せる環境を作った。 github.com docker-composeを使って、my…

ちょっとした動作を手元で試したいときに。 nodeとかyarnはインストール済みの前提です。 環境構築 Yarn mkdir ts-study cd ts-study yarn init -y yarn add -D typescript ts-node @types/node npmの場合 mkdir ts-study cd ts-study npm init -y npm insta…

Typescriptの型関連の演算子、?とか!とかググらビリティがあまりよくないので、ちょっとメモしておく。 Type Assertion asは型アノテーション。キャストと違うのはコンパイラ向けの情報のみで、それ自体は実行環境に影響を与えないことが違いのよう。 型アノ…

とりあえず実装すると以下のような形か。 import React from 'react'; const Counter = () => { const [count, setCount] = React.useState(0); const handleClick = React.useCallback((e: React.MouseEvent<HTMLInputElement, MouseEvent>) => { setCount(c => c + 1); }, []); return ( <div> <p></p></div></htmlinputelement,>…

状態が頻繁に更新されるコンポーネントということで、タイマーを実装してみる。とりあえず、実装すると以下のようになる。 import React from 'react'; const Timer = () => { const [time, setTime] = React.useState(0); React.useEffect(() => { const id…

threejsで大規模なモデル操作とか始めるとTypescriptの型サポートはとても助かる。 以前にも書いていたことがあったが、古かったので消して、代わりに2020年度時点の環境設定を残しておく。 package.json { "name": "threejs-tutorial", "version": "0.0.1",…