はじめに 少し癖のあるReact DnDを古いバージョンで使わなければならない案件を対応しました 3 つくらい古いメジャーバージョンだったので、公式ドキュメントの Examples が動かず、かつ、ネット上にドキュメントが少なかったので、一応実装をこの記事に残し…

はじめに ユニオン型（|）とインターセクション型（&）の違いを簡単な例でおさらいしておこうと思います 以下の型定義を利用して、実装します type A = { a: string } type B = { b: number } type U = A | B type I = A & B すべてのプロパティを実装する c…

はじめに Svelte+SvelteKit の環境がコマンド 1 つで構築できるので、その構成を軽く見てみようと思います Web フレームワークのSvelteKitはSapperの後継で将来的にこちらに置き換わります この記事の@sveltejs/kitのバージョンは1.0.0-next.151です まだ β …

はじめに この記事の内容は、以下のサイトと同じことをやってます この記事は自分用のメモです https://colinhacks.com/essays/building-a-spa-with-nextjs https://blog.hey3.dev/posts/nextjs-spa 概要 Next.js アプリを静的ファイルにビルドし、S3 にデプ…

はじめに トラブルシューティングなどで、ECS Fargate のコンテナーに入ってコマンドを実行する手順です コンテナーの実行環境が EC2 であれば、普通に SSH でログインして、docker execすればよいのですが、Fargate の場合はこれが使えません ECS Exec + AW…

Digdag から Amazon SNS 経由で Slack にエラーを通知するやつを今までは AWS Lambda を使ってやっていたが、Lambda を使うとコード管理どうするとか色々考えると面倒なので、今年使えるようになった AWS Chatbot が使えたら、いいなーって思ったので調査し…

Vuex を使うのに慣れすぎて、Vuex を使わないパターンを考えた時に色々考えたのでメモ 方針 比較的規模が小さいシステムでは、Vuex の利用をまずは避けたい Nuxt.js を使用 Composition API を使用 コンポーネント間のデータ受け渡しパターン 親から子 普通…

CoffeeScript で書かれた hubot が ECS + Fargate 上で稼働中なのですが、これに Datadog の監視を入れてみます ChatWork 経由で hubot に命令しているのですが、ChatWork のメンテナンス等があるとメンテナンス後も hubot がエラーで落ちたままになったこと…

JS/TS のユニットテストで axios をモックするのになんとなくmoxiosを使っていたが、やめようかなという話 理由は moxios が 3 年以上更新されていない Issues の返信や Dependabot のプルリクも放置されているっぽい moxios.stubRequestした axios のリクエ…

概要 来月 Vue3 がリリース予定です！ 先日ステータスが RC となりました https://github.com/vuejs/rfcs/issues/189 ただし、Vue3 にバージョンアップするのは、Vuex や Vue Router などの主要なエコシステムが Vue3 対応を正式にリリースしてからになると…

やることになった経緯 Python で重い関数 A と重い関数 B がある A の結果が B の引数になっている CircleCI 上で A と B を実行するのだが、諸事情で A と B のジョブを分けたい ジョブを分けると CircleCI 上のジョブ A とジョブ B のコンテナー間でどうに…

あるシステムで以下のような処理を行っている Firebase の Storage にファイルをアップロード そのファイルを Functions でダウンロードして色々処理 加工した情報を Firestore に保存 Firestore への保存処理は Functions でadmin.firestore().collection('…

はじめに インストール環境 Mac fish 参考サイト https://flutter.dev/docs/get-started/install/macos Flutter SDK のインストール ※ 以下の手順を行うより、追記した Homebrew でのインストールが1番楽 cd ~/Dev/Native-Apps git clone https://github.com…

Vuex の型定義を拡張して、@nuxtjs/moment の型を追加してあげようっていうだけの記事です まずは前提として、Nuxt.js では store ディレクトリ配下が Vuex になっており、 store 配下にファイルを作成して、そのファイル内で actions オブジェクトを export…

以下の React で作ったアプリに Firebase Authentication を導入してみようと思う Glossary 今回実装したコードはこちら GitHub - kurosame/glossary: Glossary App using React Firebase 側の設定 Firebase の Authentication からログイン方法を設定をクリ…

2023/06追記 パッケージ管理は、Ryeが良さそう Rye は Flask の作者が開発している brew install rye プロジェクト初期化 rye init . 依存パッケージ追加 rye add [パッケージ名] rye sync 実行 rye run python main.py 最近 Go の開発環境を VSCode で構築…

2022-05-23 以下の GOPATH と dep を使ったパッケージ管理は古いので更新 Go をインストールもしくは、最新にする brew install go # Go 1.18 他の依存管理ツールは不要 cd bots/rss go mod init github.com/kurosame/bots-go/bots/rss go.modが作成される i…

会社の webpack が遅くなってきたので、TypeScript 周りでバンドル速度が改善できるか調べてみました そして、以下の記述に見つけて、バンドル速度改善をする上で割と重要なオプションな気がしたので実装してみようと思います GitHub - TypeStrong/ts-loader…

はじめに 機械学習も Python もまともに触ったことないし、数式にも馴染みがないけど 時代に取り残されないために勉強がてら scikit-learn を使ってロト6 の当選番号を予測してみます 一応この本の 8 章までは読んでます www.oreilly.co.jp ロト6 を選んだの…

Vue.js で変数や関数を定義する時に data と methods と computed のどのオプションを使って書くのか たまに迷うことがあるので、現状の理解の簡単なメモです data と methods と computed の違い data はコンポーネントの（編集可能な）ローカル変数 method…

はじめに Jest + Puppeteer で E2E テストを書いてて、使いやすかったのだけど、CircleCI 上で（コード変えてないのに）ちょいちょい落ちるので Cypress を試してみることにした Cypress にした理由は、Twitter とかで最近名前をよく聞いて、評判も良さそう…

計測ツールの選定 調べると以下の 3 つが良さそうだった WebPageTest PageSpeed Insights Lighthouse 今回は、「CI 上で定期的に計測ツールの API を叩いて、結果を Slack に通知する」ということがやりたい WebPageTest は非同期的に計測が行われるため、テ…

はじめに なんとなく React と Vue.js と Angular の比較メモを残したいと思った （今年は新規プロジェクトの立ち上げが多く、会社でフロントエンドのフレームワークをどれ使ったらいいか聞かれることが多かったため） 私は React 歴半年、Vue.js 歴 1 年半…

今やっていること Digdagのキューを効率良く処理させたいため、digdag serverを動かすEC2のAuto Scaling Groupを構築し、その上でDigdagを動かしてみた この時にキューの処理状況を見たいので、データベースを見たのだが、けっこうテーブルが多い。。 でもた…

reactjs.org こちら公式サイトで Basic Hooks と呼ばれてる useState と useEffect と useContext のみ実装してみます Additional Hooks については、また今度にしますが、useReducer など Redux の reducer のような機能もあって面白そうです まだ Hooks は…

ContextAPI v16.3 から追加された機能 React のみでいい感じの State 管理ができる Redux とは別の選択肢ができただけと思って良い認識 従来の State 受け渡し class Parent extends React.Component { constructor(props) { super(props) this.state = { co…

チューニングした所 EMR クラスターを作ってる所 aws emr create-clusterしてる所で、渡すオプションを変えてみる maximizeResourceAllocation を変えたりは、あまり効果なし maximizeResourceAllocation は maximizeResourceAllocation オプションを true …