Nuxt3で、piniaを使用して、情報をユーザ情報など一元管理することがあるかと思います。

開発環境では、devツールを使用できるが、デプロイしてリリースするとdevツールが使用できなくなる。

そんなときは、下記の方法で簡単にpinia情報をブラウザから確認でできる。

 
ブラウザのコンソールで下記を入力する（userInfoは任意で指定）
useNuxtApp().$pinia.state.value[…]

DBにmongoDBを使っている、mongo shellを利用することも多い[…]

JESTで予期しないタイムアウト発生した時の備忘録
 

エンジニアであらば、jestなどのユニットテストのモジュールを使用する方は多いかと思います。

その時につまずいた内容を備忘録として残します

 
問題
jestのeach関数を使用して、テストコードを書いたが、処理は正しそうだが、常にタイムアウトが発生してしまう。

 
結果
jestでeachを使用する場合は、必ず引数を合わせる必要がある。[…]

iDeCo(イデコ)の制度改正がされそう
まだ、決定ではありませんが、退職金所得控除の受け取りルールが変わろうとしている
（現状）5年ルール
（今後）10年ルール
 
個人事業主に影響ある？
フリーランスの退職金制度の小規模企業共済を掛けていると、会社員と同様のことが発生する。

iDeCoを65歳に受け取ると、退職金所得控除が使用できない。

 
今後
iDeCoが改悪される可能性がある。

ただ[…]

オブジェクトのreadonlyの仕方と動作
javascript
readonlyのobject内の値を変更しても、エラーにならず、値が更新されない。

※strict modeにするとエラーがでるかも

const obj = { prop: 42 };
Object.freeze(obj);
obj.prop = 33;[…]

最近セキュリティのインシデントが色々と発生している。

早急に対応が必要なものが多く、委託先でも即対応しました。

セキュリティ対策の一環として、特にインターネットの使用不可や制限のある現場では、
エンジニアが最新情報をもとれず、システムのセキュリティリスクが高まる可能性も示唆しているかと考えます。

最近のセキュリティニュース

トロイの木馬化された「jQuery」がnpmやGitHubで拡散[…]

今月、FE開発で、モーダルのキャンバスに絵を描けるようようなものを開発しました。

 
問題
「お絵描き中にアドレスバーが非表示→表示され、画面のリサイズが走り、絵が滑らかに書けなくなる事象が発生しました。

スマホのアドレスバー
・上にスクロールすると、アドレスバーが表示される

・下にスクロールすると、アドレスバーが消える

 
対応
モーダル表示時に、必ずアドレスバーを固定表示するように特殊な修[…]

スクロール位置の調整
 

FE開発するとスクロール位置が思ったところに行かないことがある。

その場合には、app/router.optionsでscrollBehaviorを使用して、スクロール位置をカスタマイズできる

import type { RouterOptions } from ‘@nuxt/schema
  export default {
    scrollBehavior([…]

nuxt2のサポートももう少しで終わるので、nuxt3への移行が必要なプロジェクトも増えていることでしょう。

簡単に移行できれば良いのですが、大きく変わっているので、画面ごとに移行が必要となっています。

今回は、移行時にエラーが出やすい箇所を記載していみました。

他にも色々なエラーが発生しますので、ある程度の期間をもって実施するべきかと思います。

ルートディレクトリの参照方法[…]

web画面で動画を視聴できるようにすると、動画URLを知っているユーザなら誰でも見えてしまうので
署名付で動画再生できるようにする。

やり方は２通り
・署名付URL
・署名付cookie

今回は、署名付動画URLの再生方法について説明します。

＜前提＞
hls動画ファイルは、複数ファイル（m3u8・ts）で構成されている。

（例）[…]

renderでscript内に動的パラメータを設定する場合、やり方が分からなかったので、調査結果を記載します。

Rener時の動的な設定方法を記載します。
■テンプレートファイルに動的パラメータ設定
app.get(‘/’, (req, res) => {
res.render(‘index.ejs’, { name: ‘hogehoge’ });
});
■テンプレートファイルのbody内の書き方[…]

仕様の振り返り

 
docker Composeのファイルバー[…]

openSearchを使用すれば、簡単に日本語の全文検索が可能となる。

なぜOpenSearchを使用するのか？

・全文検索のパフォーマンスが早い

インメモリのデータ構造で検索を行うため、高速に検索が可能となる

・トークンの検索が可能で、関連度の高いものが簡単に検索できる

・日本語検索の機能もある程度充実

kuromojiのプラグインを使用すれば、ある程度は日本語のトークン分割も想[…]

2025 年 8 月 25 日でFirebase Dynamic Links はご利用いただけなくなります。

Firebase Dynamic Links が提供するすべてのリンク（カスタム ドメインと page.link のサブドメインの両方）は機能しなくなり、新しいリンクを作成できなくなります。

ディープリンクの移行は、どのサービスを使用するのが良いのか、メリット[…]

今回業務でユーザ認証のセキュリティ強化の対応を行いました。ユーザに属性を追加して、API認証時にユーザの属性も認証する。
補足：属性というのは、ユーザのグループや部署などさす。

・APIコール時に下記を経由してサーバにアクセスする。
cloudFront → APIGateWay → lambda → APIサーバ

・ユーザ情報は、mongoDBで管理している

案

・APIGateWayで[…]

結果が下記となる。
年収で身に着ける言語を選ぶのではなく、ある程度ニーズのある言語にした方が長続きする技術になる。

・年収が高い：1位の「Scala」は平均年収が682.9万円。2位は「TypeScript」（667.1万円）、3位は「Go」（659.0万円）
・ニーズ　　：1位は「JavaScript」、2位は「Java」、3位は「PHP」

参考：https://www.itmedia.co.jp/busin[…]

kibanaとは
elastic Searchのデータを可視化できる

データの統計をとり、問題個所の洗い出しができて便利！！
システムの運用で活躍するで、ぜひ取り入れたいサービスの一つ。
・APIの平均使用回数/日
・遅いAPIの実行時間表示（遅い順に表示）
・エラーが頻発しているAPIを表示（エラー数順）

参考サイト

■linux環境でVSを使用した経緯
・windowsとlinuxでパスの形式が違うので、パス周りでエラーになる可能性が高い
・mac使用者が多いので、手順書がlinuxベースで記載されている

■WindowsのPC
linuxでvsを立ち上げる簡易な方法が、WSL。

■実施方法

初めてでも1時間もあれば、環境作成できる
■手順
①wsl インストール

PS C:> wsl –install[…]

gitを初めて使うと、何かしらトラブルになることがあるので、

すぐに解決できるようになっておくことは、すごく大事。

＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝

・gitで間違ってコミットした場合

・gitで他の人のコミットが間違っている場合

＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝

git revet

■概要

取り消しのコミットを作ること
– デ[…]

AWSデータベース資格の合格のための
勉強も終盤に入りました。

今月は資格勉強に15時間ほどあてました。
全体で30時間ほどで、模擬試験70%ほどの正答率となりました。

インフラエンジニアでないとあまり必要のない知識もありますが、
実務でDBに関する問題が発生したときは、何か役に立つかもしれないとう期待もあります。

さて、今月は、Amplify、APIGateWay、Lamda、cognitoを触ってお[…]