kurosame’s diary

フロントエンドが少しできます

moxios を廃止して Jest.Mock に移行する

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

Vue3の事前調査まとめ

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

CircleCI のコンテナー間のファイル受け渡し

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

Firebase の Functions から Firestore への連携が(たまに)失敗する件の対応

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

Flutter の環境構築

はじめに インストール環境 Mac fish 参考サイト https://flutter.dev/docs/get-started/install/macos Flutter SDK のインストール cd ~/Dev/Native-Apps git clone https://github.com/flutter/flutter.git -b stable config.fishに以下を追記 set -x PATH…

@nuxtjs/moment の型定義

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

React + Firebase Authentication

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

Python と VSCode の快適な開発環境を考える

最近 Go の開発環境を VSCode で構築したので、Python の開発も IntelliJ から VSCode に移行しよう Go と違って Python は IntelliJ の Community 版でもストレス無く開発してたが、複数 IDE だと面倒なので開発環境を VSCode に統一したい Pipenv Pipenv …

Go と VSCode の快適な開発環境を考える

IntelliJ で Go を書こうと思ったが、Community 版なので Go プラグインが古いのしか無かった なので VSCode で書こうと思って環境構築しました けっこう色々必要かなと思って構築したので、メモっておきます goenv Go のバージョン管理を行うツール Go のバ…

webpack + TypeScript 環境でのバンドル速度改善

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

ロト6 の当選番号を機械学習を使って予測する

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

Vue.js の data と methods と computed の使い分けについて

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

E2E テストを Jest + Puppeteer から Cypress へ移行する

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

CircleCI で Lighthouse を定期的に実行して Slack に通知する

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

React と Vue.js と Angular の比較

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

Digdagのワークフロー実行時に見るテーブル

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

React Hooks について [ Basic Hooks編 ]

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

React の Context API について

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

Spark チューニングメモ

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