はてなブックマーク

はじめに リアクティブに関してのPinia Storeの動きが、Vue3のComposition APIの中でどうなるのか？Options APIの時はどう実装すべきか？混乱してしまい、良く分からなくなってしまったので、自身の整理メモとして備忘録を残しておこうと思う。 試したパターンは以下。 storeのstateはプリミティブな値 Piniaを Composition API で実装 コンポーネント側もComposition API 番外編　コンポーネント側はOptions API Piniaを Options API で実装 コンポーネント側もOptions API 番外編　コンポーネント側はComposition API storeのstateはオブジェクト Piniaを Composition API で実装 コンポーネント側もComposition API 番外編　コンポーネント

Deleted articles cannot be recovered. Draft of this article would be also deleted. Are you sure you want to delete this article?

はじめに Node.jsでStripeを操作する際には、Stripe Node.js Libraryを利用する事になる。ただ、このライブラリのインターフェースはsnake_caseであり、JavaScriptのcameCaseと乖離があり利用しにくいと感じていた。 そこで今回は、インターフェース（入出力）をcameCaseで行えるようにするために、ライブラリに対しカスタムの拡張を行う実装をやってみたいと思う。 ソースコード全体は以下。 実際にやってみる import Stripe from 'stripe'; import { strict as assert } from 'assert'; import snakecaseKeys from 'snakecase-keys'; import camelcaseKeys from 'camelcase-keys'; export defa

はじめに JavaScript(Node.js)でHTTP通信をする上で便利なライブラリであるaxiosであるが、そのエラーハンドリングで躓いた。 また、axiosのエラーハンドリング（axios error handling）でググってもconsole.log()で出力させているようなものばかりで実際にプロダクトでは（個人開発のちょっとしたやつでも）使えなさそう1なものが多くヒットしたので、自身で開発する中で学んだ事を備忘録として残しておく。 ※中にはerror.resposeをすればよいというものもあり、その覚え方ではマズいのでそこもちゃんと整理したい。 ※axiosの関連ライブラリとして、request/responseのオブジェクトのキーのケース変換を行うライブラリを公開したので、そちらも見ていただけると嬉しいです。 axiosとは axiosの仕組みを少し見てみる事で、axios

はじめに dynamonodb-localのDockerイメージを使用する際に、データの永続化のためにvolumesを指定したが、以下のようにwarningが出てホスト側のマウント先に書き込みができずに困った。今回はその解決策について備忘録を残す。 dynamodb-local | WARNING: [sqlite] cannot open DB[1]: com.almworks.sqlite4java.SQLiteException: [14] unable to open database file dynamodb-local | Apr 30, 2022 12:02:35 PM com.almworks.sqlite4java.Internal log dynamodb-local | SEVERE: [sqlite] SQLiteQueue[shared-local-instan

※watchはFlagsの--watchを使っても実現でき、その場合はwebpack --watch --mode=developmentとなる。Flagsの説明の通り、watchも--watchも全く同じのよう。 webpackの設定 以下のように設定した。設定した内容の概要としては、 modeでdevelopmentとproductionの切り替えの設定 webpackを実行（buildを実行）した後に出力されるファイルの出力先の設定 node_modulesのバンドルをしないように設定 webpackでbuildする時にESLintを実行し、エラーがあればbuildを止める webpack.config.jsの全体は以下。 const path = require('path'); const nodeExternals = require('webpack-node-externa

はじめに WindowsでLinux環境が欲しい時にはWSL2のUbuntu等を構築する事があると思うが、そのWSL2のUbuntuにSSH接続する部分で躓いた。 （ググって色々出てきたが、それぞれやらなくてもいい事ややらないといけない事が抜けたりしていたので）その解決した部分について備忘録を残しておく。 WSL2でUbuntuを使えるようにする 公式のWSL のインストールを参照。 インストールに成功すると、以下のようなlogが出るが、eth0がUbuntuのホスト（IP）になるのでメモしておく（ip a show dev eth0コマンドでも確認できる）。 Installation successful! # 省略 Welcome to Ubuntu 20.04 LTS (GNU/Linux 5.4.72-microsoft-standard-WSL2 x86_64) # 省略 Mem

はじめに レプリケーションの設定をしている時に、IAMロール・AWSサービスロールという2つが出てきてそれぞれのロールの違いって何？となったので色々調べて自分なりに理解したのでそれを備忘録として残す IAMロール（単に「ロール」）とは 公式の説明の通り、IAMロール（単に「ロール」）とは、一時的な権限としてユーザとかサービスに権限を付与するのに使うもの このロールは同一AWSアカウント内のユーザの権限を制御するためにあるものではなく、 AWSのサービスに対して権限を付与する 他のAWSアカウントのユーザに一時的に使ってもらうための権限を付与する WebサービスからAWSのアクセスしたりするための権限を付与する という事をするために存在する そのため、AWSアカウントに属するユーザに対して権限を制御をするのにロールをアタッチして・・・という事は行わない （AWSアカウントに属するユーザに対す

import Vue from 'vue'; import Router from 'vue-router'; import Home from './views/Home.vue'; import Users from './views/User.vue'; Vue.use(Router); export default new Router({ mode: 'history', routes: [ { path: '/', component: Home }, { path: '/users/:id', component: Users } ] });

Jest・Supertestを使用したnode.js(Express)のAPIテスト　app.listen()はエラーになるJavaScriptNode.jsExpressテストJest はじめに Jest・SupertestでAPIテストを作成した際に躓いたので、その実装の備忘録を残しておく。 この記事ではnode.js(Express)のAPIテストを実行できるようになる部分までを記載した。より実践的にはAPIテストのエンドポイントのメソッドでWeb APIをcallしているような場合は、それをmock化してWeb APIがcallされないようにすべきであるが、それについてはmockを使ったNode.js(Express)のAPIテストを参照。 （実際にテストを作る中でトラブって困った事もトラブった事として残した。） どうやってExpressのAPI(End Point)テストをjes