Visual Studio CodeにJest拡張を入れてみた

フロントもバックもJavaScriptに統一して、PHPを使う事がなくなったので、PhpStormからVSCodeへ移行中です。 しばらく、テスト(Jest)はコマンドラインとCIに任せていましたが、ちょっと辛くなってきたので、拡張機能を導入する事にしました。 目次 導入した…

Storybook 6 で Console アドオンが動作しないときの対処法

StorybookのConsoleアドオンを使おうと思ったら、ちょっとひっかかったので、以下、備忘録として簡単にまとめたいと思います。 目次 Consoleアドオンページをチェック ドキュメント通りにセットアップ => 動作せず リサーチ リポジトリページをチェック conf…

【TypeScript】interfaceをオーバライドするには?

以下のような、オーバーライドをしようとすると interface A { x: string y: number } interface B extends A { x: number } 以下のようなエラーメッセージが表示されました。 TS2430: Interface 'B' incorrectly extends interface 'A'. Types of property …

【TypeScript】Union Types から特定の型を取り除くには?

Union Types から特定の型を取り除く => Exclude type Sample1 = Exclude<string | number | boolean, string | boolean>; // number 逆に、Union Types から特定の型を抽出する場合は => Extract type Sample2 = Extract<string | number | boolean, string | boolean>; // string | boolean 参考ページ</string></string>

Docker使い始めてもうすぐ5年目なので、使用感などの感想をまとめてみました!

TwitterでDockerがトレンドになってるみたいなので、Twilogで自分のツイートを検索したら、使い始めてもうすぐ5年目突入と判明。 今更ながらredmineを試してみようとvagrant+ansibleで苦闘。3時間ほど右往左往したころ「ツール利用だけならdockerでもいいの…

【Storybook】「TypeError: (tag.text || "").trim is not a function」エラーの対処法まとめ

Storybookで以下のようなエラーが出たので、以下、対処法を備忘録としてメモ。 TypeError: (tag.text || "").trim is not a function なにはともあれ、まずはグーグル先生に質問。 TypeError: (tag.text || "").trim is not a functionで入力した所、storybo…

npm-check-updates(ncu)でワイルドカードを使ったパッケージ指定をいろいろ試してみた

最近、npm-check-updates(ncu)でパッケージの指定にワイルドカードが使える事を知ったので、いろいろ試してみました。 以下、簡単に試した内容をまとめてみました。 目次 使用したパッケージ スコープなしの場合 ncu lo* ncu lodash* ncu l*d* スコープあり…

6/8 大規模障害まとめ - Fastly、AWS、GitHubなど 21/06/08 19:00ごろ~

GitHubダウンしたので、障害情報を調べてみたら、どうもAWSなどでも障害が出ている模様 目次 障害状況 19:29ごろ 障害状況 19:49ごろ 障害状況 20:16ごろ 障害状況 20:34ごろ 障害状況 20:50ごろ 障害状況 21:46ごろ

Lerna(もしくはモノレポ)+ncuで使用パッケージのバージョンを一括更新(サブディレクトリ含む)

誤解がないように最初にひとこと Lerna 最高!! Lerna 便利です。 Lerna で monorepo 管理するようになって、各パッケージで使っているパッケージのバージョンを更新するのが、少し面倒に (後述しますが、自分の無知からくる面倒さであって、Lerna のせいで…

Firebase で The default Firebase app already exists みたいなエラーが出たときの対処法

Firebaseを使っていて、 The default Firebase app already exists. This means you called initializeApp() more than once みたいなエラーが出たときの対処法。 エラーの内容の通り、initializeApp()を複数回呼び出しているとダメという事なので、initiali…

firebase-functions-test で Module '"firebase-functions"' has no exported member 'crashlytics' と怒られたときの対処法

firebase-functions-test を使っていたら、以下のようなエラーが出たので、対処法などを簡単にメモ Module '"firebase-functions"' has no exported member 'crashlytics' Googleで検索したところ、同様のエラー情報があったのでチェック It seems this is c…

eslint-config-prettier v8.0.0 の変更についてのメモ

eslint-config-prettierのバージョン8.0.0 (2021-02-21) で All configs have been merged into one! という事らしいです。 具体的には { "extends": [ "some-other-config-you-use", "prettier", "prettier/@typescript-eslint", "prettier/babel", "pretti…

Immer.js トライアル まとめ (サンプルコード置き場)

Immer.js のトライアルとして、公式ドキュメントのサンプルコードをトレースしてみました。 トレースしたコードは、以下の公式ドキュメント、Basicsパートのサンプルコードです。 ※ 一部、飛ばしている部分や、動作しない部分を調整している所があります。 ※…

Ramda.js 入門まとめ (サンプルコード付き)

関数型プログラミング入門の一環として、Ramda.js を試してみました。 Ramda.js の入門記事をいくつかトレースしてサンプルコードにまとめてみたので、簡単に紹介したいと思います。 目次 参考ページ トレースコード 感想とか、諸々 まとめ

Lerna を2週間使ってみての感想 (Pros/Cons)

Lerna を使い始めて2週間たったので、簡単に Pros/Cons メモ。 ちなみに、Lerna の入門記事まとめは以下より 目次 【Pros】 パッケージ整理が楽 monorepo内パッケージの相互利用が自動更新 リアルタイム更新 【Cons】 開いてるファイルが散らかる まとめ

Lerna 入門 まとめ

ここ2日ほど、Lerna に入門してみたので簡単にまとめ 目次 サンプルパッケージの作成 Github Packagesを使う場合 TypeScript を使う場合 まとめ

Cloud FunctionsのFirestoreトリガーのテストをやってみた with エミュレータ

以下の記事を参考に、Cloud FunctionsのFirestoreトリガーのテストをやってみました。 具体的なテストは、ほぼ上記ページのトレースなので省略します。 上記ページのトレースとは別に、エミュレータが使えるかどうかを試してみたので、簡単にまとめてみたい…

Firestore コレクショングループクエリのトライ&エラー / 複数階層指定、複数指定など

Firestoreのコレクショングループクエリ(Collection Group Queries)がどんな感じで動作するか知りたかったので、簡単に確認してみました。 目次 はじめに 確認項目 確認コード全体 テストデータの作成 テスト結果 1階層指定でテスト その1 1階層指定でテ…

Resource Hints (dns-prefetch、preconnectなど) について調べてみた

dns-prefetch、preconnectについて調べたので、簡単にまとめ 目次 少ない手間でそのWebページに適した手法で表示高速化ができるResource Hintsがすごい WebPageTest DNSプリフェッチでWebサイト高速化 はてなブログで使う場合は? 少ない手間でそのWebページ…

VSCode拡張「Apollo GraphQL」が動かないときの対処法

Visual Studio Code のapollo拡張機能「Apollo GraphQL」の引っかかりメモ 「Apollo GraphQL」の拡張機能ページは以下より 基本的な手順は上記ページの通りなので、ここでは引っかかった部分について、簡単にメモを残したいと思います。 apollo.config.jsで…

Apolloチュートリアルでクライアント完成コードが動かない場合の対処法

Apollo tutorialでapolloを試していたら、final/clientで、以下のようなビルドエラーが出て動かず(´・ω・`) Failed to compile. [path_to_root]/final/client/src/components/login-form.tsx TypeScript error in [path_to_root]/final/client/src/component…

「standard_init_linux.go:211: exec user process caused "no such file or directory"」みたいなエラーが出て、firebase コミュニティ ビルダーでのデプロイがうまく行かなかったら

以下のリンクによると、Windows環境でビルダーをデプロイするとまずい模様。 Cloud Buildでビルダーを構築、submitするとうまく行きました。 Cloud Buildを使わずとも、GCPで提供されているCloud Shellをつかってもうまく行くかもしれません。 Firebaseへの…