千葉ポートパークにきたよ!ナッツパーティー🥜

衣以ときたよ🐼

image

image

NakamuraEmi
うたってる

TypescriptでUnionの一部を取り出す方法

最近知った。これは便利!

type Animal = {
    type: 'cat',
    name: string;
} | {
    type: 'dog',
    age: number;
};
type Cat = Extract<Animal, {type: 'cat'}>
type Dog = Extract<Animal, {type: 'dog'}>

この辺の公式の例とかリテラルの場合のみ記載ありで最初気づかず
https://www.typescriptlang.org/docs/handbook/utility-types.html

VSCodeでExtension開発中にCommand 'XXX' resulted in an error (Webview is disposed)のエラーが発生した

vscode.commands.registerCommandの第一引数のコールバックでvscode.window.createWebviewPanelを実行するとこのエラーがなくなった。

vscode.commands.registerCommandの第一引数のコールバックの外でvscode.window.createWebviewPanelを実行し、戻り値を使ったらエラーが発生した。

前回必要と思ったVSCode拡張できた

これであとはPlantUMLで作成したSVGを読み込ませれば、一覧で確認できる。
設定はjsonファイルに持たせたので、gitで管理できるはず。

https://user-images.githubusercontent.com/37785038/183708953-6931fbe5-059e-4094-a28a-414457d50357.mov

PlantUMLとRDRAとVSCode拡張機能

会社で設計スキルがもう少し欲しいなという気持ちになって、色々本を読んだ結果、RDRAに書いてあることが、今の自分が困っていることまさにそのものだった。このへんが特に気になった。

影響力の大きい人が、雑誌や技術プレゼンに触発されてスタートさせたようなプロジェクトにありがちなケースが「コンセプトの不在」です。システムについてのアイディアがあり、ブレーンストーミングによって有望なアイディアがいくつもでてきます。そのアイディアを検証または分析すべく、役割を決めて作業を始めます。そして、その結果を持ち寄り、またブレーンストーミングします。プロトタイプを作成し、実現可能性や機能の有効性を検証します。一ヶ月がたち、アイディアがそこそこ形になり、この業界流行りの魅力的なセールストークがちりばめられています。でも、リーダーは何故か「これでいいのだろうか」という疑問を感じています。「分かってきたことは沢山あるけれども、そのひとつひとつがどうもうまくつながっていかない。細部をみると面白いことや今までになかったものができ上がってくるように思える...でも結局いまひとつ製品の全体像がつかめていない。これで本当にシステムのイメージが固まるのだろうか……」。

神崎善司. モデルベース要件定義テクニック (Japanese Edition) (Kindle の位置No.413-416). Kindle 版.

アイデアはどんどん広がっていくが、イメージが固まらない。
結局その時は、コンセプトに戻って、最小用件を決めた。

しかし、スムーズに決まったとは言えない。もっと快適に作業できるはずと思っていた。
RDRAは全体を図にして、理解しやすくする感じ。
それぞれの境界を明確にし、アクションを一つ一つ検証していく。
例えば、利用者、外部サービス、内部、ブラウザアプリ。
それぞれに接点がある。利用者はブラウザを操作し、結局は内部のDBにデータを保存したり、外部サービスにアクセスしたりする。
それらを完璧にとは言わないが、全体を洗い出す。
こんな感じのことが書いていた。

これは、最近フロントを書いている時にも意識していたあたり。
結局は利用者がブラウザという境界からしか操作できない。その操作ごとに、データや見た目に変化が起こる。それを洗い出し、テストを書けばいい。そういった経緯もあり、何かしっくりくるところがあったので、PlantUMLや、Miro、FigmaでRDRAを書こうとしたが、Miro、Figmaは管理しづらい。やはりGithubのようなもので管理したい。他にも色々検討はしたが、PlantUMLが良さそうという結論に至った。
ただ、ちょっと、ソフトウェアの限界があったので、補助的なものをVSCodeの拡張機能で作成している。Chrome extensionとReact, Nextjs、それとElectorも検討したが、VSCodeの拡張にした。

https://user-images.githubusercontent.com/37785038/183293400-b5a35d4b-cec4-449f-8804-b30ced987e57.mov

必要だと思ったのは一覧性。
SVGを複数読み取り、表示できればよかったのだが、見当たらなかったので作成中。
PlantUMLで作成したSVGをまとめて閲覧するのに使う

RDRAの読み方はラドラです。

RDRA:ラドラと呼びます。
神崎善司. モデルベース要件定義テクニック (Japanese Edition) (Kindle の位置No.259). Kindle 版.

衣以と港の見える丘公園にきたよ

港が見えるよ🐼

image

日傘と衣以🐼

image

アメリカとフランスがあったよ🇫🇷🇺🇸

image

夜は中華食べるよ

githubがおすすめするコミットの書き方、プロジェクトの構築の仕方を読んだ

Write Better Commits, Build Better Projects

最近、コミットを書いていて思っていたことが全て書かれていた。

ソリューションを全部書き出すと

シナリオを作成し、それに合わせてコミットを再編成する。

それぞれのコミットメントを "スモール "と "アトミック "の両方にする。

コミットメッセージには、何をしているのか、なぜそれを行っているのかを記述してください。

こうなっている。元記事を全部ちゃんと読んでください。以降は感想です。

これらは順番に、適応されている。

最初はwipコミットが含まれ、途中でリファクタし、別の関心ごとにふれているように見える。

これではPull Request(以降でPRとする)を投げられた方はたまったものではない。

だけど、最初から、全てのソリューションを適用したコミットを書くのは個人的にはできない。

コードを読み、wipコミットを加え、途中でリファクタし、別のことが気になってしまう。

おそらく最初はそれでいい。

もちろん、最初から完璧なものが書ければそれでいい。

でも、やってみたけど、それはできなかった。

だから、PRを出す前に綺麗にしよう。

リファクタは最初に済ませよう。

途中で気づいたリファクタでも、きっと最初に切り出せるものがあるはず。

それはもう、別のPRに切り出して、リファクタのPRを出せばいい。

とはいえ、難しいこともある。

リファクタだって、意味があるから。

今の流れだと、リファクタをして、その後に本来追加しようとした機能が入るはず。

その文脈があるから、そのリファクタが成り立つと思う。

そういうところが個人的には難しい。

ちなみに、この文章自体が、ごちゃごちゃで、リファクタが必要な文章だけど、走り書きなので許してください。

もし、別の関心ごとに触れたくなったら、それはそれで別のPRにしよう。

大体は、PRの前にレビューがあるから。

レビュワーの時間を大事にしましょう。

そうやって、一つのPRの関心ごとを一つの事柄にすれば、おそらく1 PRは 1コミットになるんじゃないか?と最近思っている。

また、コミットはリバートできるべき、というのも最近思っていること。

戻したら壊れるコミットを本流のブランチ、mainとかmasterに含めれるのはおかしい。

いざというとき、戻すのに時間がかかってはいけないはずだから。

こういったことをやっていけば、mainブランチを見ると、これまでの歴史が分かりやすく積み重なったブランチが完成すると思っている。

ただ、ここまでくると、githubが最適ではないのでは?とも思う。けど、今は置いておきます。

そういえば最近思ったことがもう一つ。

PRを出す前にrebaseして綺麗にしよう。

レビューとレビューの間にrebaseすると、以前のレビューとの差分がわからなくなるらしいです。

だから、レビュー前に綺麗にしよう。

マイナポイント第2弾を受け取ったよ

これですね

施策1は既に受取済みだったので

施策1
マイナンバーカードの新規取得等
最大 5,000円分のポイント
マイナンバーカードを新たに取得し、マイナポイントの申込み後、20,000円までのチャージまたはお買い物をすると、ご利用金額の25%のマイナポイント(上限5,000円分)を受け取ることができます。
マイナポイント第1弾に申し込んでいない方が対象です。
2021年12月末までにマイナポイント第1弾に申し込んだ方で、まだ20,000円のチャージやお買い物を行っていない場合(最大5,000円分までポイント付与を受けていない方)は、上限(5,000円分)までポイントの付与を受けることができます
・マイナポイント申込み期限:2023年2月末
・マイナンバーカードの申込み期限:2022年9月末

施策2と施策3を申し込みました

施策2
6/30スタート!
施策2
マイナンバーカードの健康保険証としての利用申込み
7,500円分のポイント
お持ちのマイナンバーカードを、健康保険証として利用できるよう申込み、マイナポイントの申込みをするとマイナポイントを受け取ることができます。
まだ利用申込みが済んでいない場合、マイナポイントの申込みの際に一緒に申込めます。
6月30日のマイナポイント申込み開始より前に、マイナンバーカードの健康保険としての利用申込みを行っていた方も対象です
・マイナポイント申込み期限:2023年2月末
・マイナンバーカードの申込み期限:2022年9月末

6/30スタート!
施策3
公金受取口座の登録
7,500円分のポイント
ご自身の預貯金口座を国(デジタル庁)に登録し、マイナポイントの申込みをするとマイナポイントを受け取ることができます。
マイナポイントの申込み完了後に、公金受取口座の登録をすることもできます。
・マイナポイント申込み期限:2023年2月末
・マイナンバーカードの申込み期限:2022年9月末

楽天ポイントで受け取り成功しました

通常ポイントでの付与でした

楽天ペイアプリではマイナポイントとして楽天ポイント(通常ポイント)を進呈致します。
楽天ポイントについては楽天ペイアプリをご利用した街でのお買い物のほか、通常の楽天ポイントと同様に様々な用途でお使いいただけます。
マイナポイントは楽天ペイアプリからお申し込みいただけます。
詳しくは以下の特設ホームページをご参照ください。

ポイント運用ができるやつにしようと思い、楽天、ペイペイで迷いましたが、ペイペイは1%手数料で引かれるので、楽天にしました

Raspberry pi をJavaScriptで動かせるらしい

https://paiza.hatenablog.com/entry/2022/02/02/150000

Raspberry pi picoで温度取得

成功しました

スクリーンショット 2022-07-02 21 52 53

Raspberry pi picoを外部電源で起動できない

main.pyというファイルにすれば動くらしい

。。。動かんな

Thonnyで保存した後に、Thonyを終了してから電源を切ったら成功しました。

Raspberry pi picoをm1 macでLチカ

私の横で今チカチカしております

とりあえずはまったところ

ファームウェアのインストール

公式サイトからダウンロードしてインストールした

ドラッグアンドドロップしたらUSBが接続解除された!!

どうやらこれで正常な挙動

その後、公式サイトからエディタをダウンロード

qiitaアメブロを参考にプログラムをコピペ

動きましたー

最終目標はエアコンの制御です

IMG_2878

てかスイッチとかないじゃん

オンオフはパソコンからやりました

温度センサーはついてるらしいけど

そこらへん試してからー

スイッチつけれるならつけたいなーパソコンからオンオフは面倒なのだ

USBから給電だけするから、あとはcronで動いてほしいのだ

赤外線の送受信も欲しい

受信した赤外線情報を保存する容量も欲しい

wifiもつけれるならつけたい、有線でもいいけど

Figmaのautolayoutがめっちゃ便利になってる

ビビった

今日つかったんだけど、直感的に使えた

以前のautolayoutよりいいです

5/10日にリリースされたようだ
https://www.figma.com/community/file/784448220678228461

リリース一覧
https://releases.figma.com/

npm package作った

https://github.com/kajirikajiri/eslint-plugin-mui-path-imports

muiを使ってて、開発環境のhotreloadを早くしたい人におすすめ

import { Box } from '@mui/material';
↓
import Box from "@mui/material/Box";

muiはこうすると、開発環境で読み込みが早くなるのです。

mui公式が言ってるし、実際読み込むモジュー数が10000くらい減るので間違いない

BEFORE

event - compiled successfully in 287 ms (11756 modules)
wait  - compiling...
event - compiled successfully in 384 ms (11756 modules)
wait  - compiling...
event - compiled successfully in 301 ms (11756 modules)
wait  - compiling...
event - compiled successfully in 298 ms (11756 modules)

AFTER

event - compiled successfully in 69 ms (1867 modules)
wait  - compiling...
event - compiled successfully in 72 ms (1867 modules)
wait  - compiling...
event - compiled successfully in 64 ms (1867 modules)
wait  - compiling...
event - compiled successfully in 84 ms (1867 modules)

私の開発環境でテスト済み。

リンク集

mui公式: importサイズを小さくする
https://mui.com/material-ui/guides/minimizing-bundle-size/

eslint公式: ruleの作り方
https://eslint.org/docs/developer-guide/

eslint公式: ruleの詳細
https://eslint.org/docs/developer-guide/working-with-rules

mdn公式: named import
https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/import

awsexplorer: eslintのルール作るときに個人的に必須
https://astexplorer.net/

autofixリポジトリ
https://github.com/aladdin-add/eslint-plugin/tree/master

eslint-plugin-importリポジトリ
https://github.com/import-js/eslint-plugin-import/blob/main/src/rules/no-import-module-exports.js

autofixのリポジトリが紹介されてる
https://qiita.com/the_red/items/2725246044a225174d98

eslintのルールの作り方
https://blog.scottlogic.com/2021/09/06/how-to-write-an-es-lint-rule-for-beginners.html

eslintのルール作成
https://flexport.engineering/writing-custom-lint-rules-for-your-picky-developers-67732afa1803

typescriptでeslintのルールを作る
https://blog.sa2taka.com/post/custom-eslint-rule-with-typescript

zenn: named import
https://zenn.dev/captain_blue/articles/javascript-import-braces-memo

githubでpatchした

面白いコマンドだったよ

merge commitをrebaseしたら差分が消えたので、diffとってpatchしたー

https://beyondjapan.com/blog/2019/08/git-diff/
https://git-scm.com/book/ja/v2/Git-%E3%81%A7%E3%81%AE%E5%88%86%E6%95%A3%E4%BD%9C%E6%A5%AD-%E3%83%97%E3%83%AD%E3%82%B8%E3%82%A7%E3%82%AF%E3%83%88%E3%81%AE%E9%81%8B%E5%96%B6

Reactテストライブラリでよくある間違いの記事を見つけたよ

react-testing-libraryのメンバーに入っているKent C. DoddsReactテストライブラリでよくある間違いの記事を書いてるのを見つけたので読む。

内見した

今日は西馬込に内見🐼

メゾネットというタイプですた📦

部屋の中に階段があればメゾネットなんじゃないですかね?

コンクリート打ちっぱなし、デザイナーズマンションっていうんですかね?

かっこよかった、ウッドデッキもよいかんじ🪵

計算機

適当に作ってみた
https://calculate.app.kajiri.dev/

今日はエラーメッセージを追加した

reduceで早期リターンしたい

これっぽいな
https://stackoverflow.com/a/47441371

第4引数があったのか。

なるほどね、処理対象を直接変更することで処理が完了したように見せるのか。

forEachループで設定された変数が誤った型になるよ

実装してて困ってたんですよねー

letで定義して、forEachで副反応を実装しました。

そしたら、初期値で代入したやつしか出てこない

これ

以下を読むとそういうことになったらしい。トレードオフ。

https://stackoverflow.com/questions/67084305/variable-set-in-foreach-loop-getting-wrong-type

This is one of the trade-offs of the control flow analysis.
By annotating the type string | null you tell the compiler the variable, obviously, expects a value of either type. You then make an assignment to null, which lets the compiler narrow the type to null.
You expect that TypeScript accounts for the assignment inside the callback and forgoes the narrowing, but it does not. This is a trade-off the team made when deciding whether mutations happening in functions passed as parameters to higher-order functions should leak to the outer scope.
See this source repo discussion on the matter.

ちょっと参照先のgithub issueがcomment多すぎて全部読めないが。
どうやら、callbackが確実に呼ばれるかどうかわからないから初期値のままにすることにしたっぽいが?
foreachで言えば配列の要素数が0の可能性があるし。まあ、しょうがないのか。

試してみたけど、どうやら、初期値を代入せずにtypeguardで型を確定させてやれば使えそう

これがいいかなー

recursiveFindを実装したい

っていう気持ちになった

既存のやつがあるんじゃ?と思って探したが、問題を発見した。

よく考えてみたら、特定のobjectの形式で特定のkeyだけを探したいとか要件が色々あるので、既存のやつだと厳しいと思われる。

独自実装するか

Promiseを復習した

そういうことだったのねー
https://developer.mozilla.org/ja/docs/Web/JavaScript/Reference/Global_Objects/Promise/allSettled

axiosの絡みとかも見といた

少々忘れてる箇所とかあったが問題ない。テスト書きまくってるからね

その着せ替え人形は恋をする

アニメ一気に全部見ました!

勝手な思い込みで、雛人形の擬人化アニメだと思い込んでましたが違いましたよ

そのビスクドールはこいをする

吉祥寺にさんぽ🚶‍♀️

えいといくよ🐼

物件みてくるよ🏠

やっと日傘をさせて嬉しいえい⛱

ランチ調査えい🐼

テラス席にすぐにひかれるえい☀️

お昼はサンドイッチになりました🥪

image

コンクリートにわんこ🐶

image

晩御飯は空野豆腐🫘

半年前にえいときたお店🐼

名物の空野豆腐🫘

image
image

豆乳ブルーベリーと豆乳抹茶🫐🍵
image

たまご🥚
image

今度は猛毒豆腐🫘食べてみたいな

特定のrepositoryを定期的に監視したい

以前の記事で書いたやつを参考にgithub actionsで定期的に結果を出力したい

特定repositoryの最新のmain | master | release | ?? をshallow cloneする。

  • ex) react, mui, hook-formとか
  • 対象のrepositoryは増えうる
    qiita

以前の記事を参考にして、コマンドを実行

  • 特定repositoryで、最も深い階層にいたファイルのリンクを出力
  • 特定repositoryで、ファイルサイズが大きいものからtop 10~20のリンクを出力
  • 条件は増えうる

md形式などでファイルを作成し、prを自動作成 or 自動マージ

zenn

派生

おすすめのcommit messageとか欲しい。
できれば、関数の内部に定義した関数の数とかも知りたい。

今日の調査内容

この先、調べようかなって思ってること

OSS
ゲーム
webgl
unity

typescriptのobjectにreadonlyはあるが、privateはまだなかった

https://www.typescriptlang.org/docs/handbook/utility-types.html#readonlytype

4.8くらいで出るかな。

Unityで出力できるプラットフォーム

結構いろいろなプラットフォーム向けに出力できるなー
https://docs.unity3d.com/ja/2018.4/Manual/Standalone.html

最近バグを生み出した書き方

JavaScriptです。関数b, dが実行前に評価されてしまった。
本当は実行時に評価したかった。

失敗

({
    a: b()
    c: d()
})[t]

成功

({
    a: b
    c: d
})[t]()

classの無い言語を調べた

最近発売された、良いコード/悪いコードで学ぶ設計入門 ―保守しやすい 成長し続けるコードの書き方 単行本(ソフトカバー) – 2022/4/30が、いい感じだと思ったが、TypeScriptのclassが個人的に好きじゃないので、classが存在しない言語ではどうしてるんだろうって気になった。

https://detail.chiebukuro.yahoo.co.jp/qa/question_detail/q12239608832

c言語でpolymorphism

https://chris-wood.github.io/2016/02/12/Polymorphism-in-C.html

本を読んだ

TITLE: David Bryant. Sustainable Web Development with Ruby on Rails: Practical Tips for Building Web Applications that Last . David Bryant Copeland. Kindle 版.

To make better technical decisions, you need access to more information than simply what someone wants the software to do. Do you know what economic or behavioral output the software exists to produce? In other words, how does the software make money for the people paying you to write it? What improvements to the business is it expected to make? What is the medium or long-term plan for the business? Does it need to grow significantly? Will there need to be increased traffic? Will there be an influx of engineers? Will they be very senior, very junior, or a mix? When will they be hired and when will they start?

より良い技術的な決定を下すためには、誰かがソフトウェアに何をさせたいかということよりも、もっと多くの情報にアクセスする必要があるのです。そのソフトウェアがどのような経済的、行動的成果を生み出すために存在するのか知っていますか?言い換えれば、そのソフトを書くためにお金を払っている人たちにとって、そのソフトはどのようにお金を生み出すのでしょうか?そのソフトウェアはビジネスにどんな改善をもたらすと期待されていますか?そのビジネスの中長期的な計画は何でしょうか?大きく成長する必要があるのでしょうか?トラフィックを増やす必要がありますか?エンジニアの流入はあるのか?そのエンジニアは、上級なのか、下級なのか、あるいは混合なのか?彼らはいつ採用され、いつ入社するのか?

The average tenure of a software engineer at any given company is pretty low, so I’m assuming that the software will outlive the team, and that the group of people charged with the software’s maintenance and enhancement will change over time. I’m also assuming the experience levels and skill-sets will change over time as well.

ソフトウェア・エンジニアの平均勤続年数はかなり低いので、ソフトウェアはそのチームよりも長持ちし、ソフトウェアの保守や改良を担当する人々のグループも時間とともに変化していくと想定しています。また、経験値やスキルセットも時間とともに変化していくものと考えています。

githubのコミットに#を使いたい

git config --global commit.cleanup whitespace

or

[commit]
    cleanup = whitespace

ディレクトリを深くするかファイル内に書き込むか

調査内容

  1. 階層の深さを見る
  2. ファイルサイズの大きいものを見る

1はこんな感じ
find . -type f -mindepth 10 | grep ".js" | grep -v "node_modules"

2はこれでいいでしょう
find . -type f -size +100k | grep ".js" | grep -v "node_modules"

調査対象

facebook/react
1: max 14
2: 観察中

githubのfast-forwardとは

githubでのfast-forward

git-scmをDeepL翻訳
別の言い方をすれば、あるコミットを最初のコミットの履歴をたどれば到達できるコミットとマージしようとするとき、Git はポインタを先に進めることで物事を単純化します。なぜなら、一緒にマージすべき分岐作業が存在しないからです。

backlog
このbugfixブランチをmasterブランチにマージする時、masterブランチの状態が以前から変更されていなければ、非常に簡単にマージを行うことができます。 bugfixブランチの履歴はmasterブランチの履歴をすべて含んでいるため、masterブランチは単純に移動するだけでbugfixブランチの内容を取り込むことができます。なお、このようなマージをfast-forward(早送り)マージと呼びます 。

qiita
ブランチXと、そこから切ったブランチYがあるとする。
YがXでの変更をすべて含むときに行われるマージをfast-forward(早送り)マージという。
つまり、分岐後に、元ブランチXにおいて変更がないときに行われるマージのこと

git-scmをDeepL翻訳
現在のブランチヘッドは、指定したコミットの先祖であることがよくあります。これは、特に git pull から実行した場合によくあるケースです。上流のリポジトリを追跡していて、ローカルでは何も変更しておらず、より新しい上流リビジョンに更新したい場合です。この場合、結合した履歴を保存するための新しいコミットは必要ありません。代わりに、余計なマージコミットを作成せずに HEAD (とインデックス) を更新し、指定したコミットを指すようにします。
この動作は --no-ff オプションで抑制することができます。

github
your enterprise上のプルリクエストでSquash and merge(squashとマージ)オプションを選択すると、そのプルリクエストのコミットは1つのコミットにsquashされます。 トピックブランチからコントリビュータの個々のコミットをすべて見る代わりに、コミットは1つのコミットにまとめられ、デフォルトブランチにマージされます。 squashされたコミットを持つプルリクエストは、fast-forwardオプションを使ってマージされます。

stackoverflowをDeepL翻訳
あるコミットと、最初のコミットの履歴をたどれば到達できるコミットをマージしようとしたとき、Git は一緒にマージする分岐作業がないため、ポインタを先に進めることで物事を単純化します。これを "早送り" といいます。
詳しくは : http://git-scm.com/book/en/v2/Git-Branching-Basic-Branching-and-Merging
別の言い方をすると
master が分岐していない場合、git は新しいコミットを作成する代わりに master に feature ブランチの最新コミットを指すようにします。これは "早送り" です。
マージの早送りでは、「マージコミット」は発生しません。

fast-forward

早送りという意味

英辞郎
〔テープ・録画映像などを〕早送りする

weblio
(テープ・ビデオなどの早送り

あとがき

mergeのとき、他に取り込む変更がなければ、ポインタを移すだけと理解した。

たまに、ffとかfast-forwardとか聞くけど、そこまで気になってなかった
今日は暇だったので調べてみた。

GitHub進化!!

Note
This is a note

Warning
This is a warning

Note

This is a note

Warning

This is a warning

https://github.com/github/feedback/discussions/16925

jest-previewでintegration-testが楽になった

integration-test

react-testing-libraryなどを用いた、JS-DOMのテストだと思っています。

楽になったポイント

既存のinteration-testが失敗した場合、その時のDOMが表示されるはず。以下のような。

<div>
  <span>hello</span>
</div>

jest-previewを導入すると、失敗した瞬間にその時の画面の状態がブラウザに表示されます。
DOMを確認するより、画面を確認する方が直感的にどこが失敗したのか分かりやすいので、とても助かる。

皇居のアジサイ

image

コナンくん

最近はよく、えいとコナンくんの映画をみてるよ👓🎬

20個くらい見たきがするなー

今日はストリートの亡霊だよ👻

axiosをmockしたが、useSWRの戻り値がmockされない

症状

axiosをfetcherにしてuseSWRを使っていた。

統合テストを書こうと思い、axios-mock-adapterでmockした。
しかし、戻り値がmockされない。

対策

useSWR公式のMiddlewareの説明zennの記事をみて、Middlewareにしたら戻り値をmockできた。

あとがき

jest-previewで確認しても、処理の直前、直後でlogを出力しても解決できなかったのでなかなかてこづった。

症状の詳細として、1つのテストだと成功するが、2つ以上のテストだと失敗した。

stackoverflowに沿って修正してみても効果なしだった。

TypeScriptでelseを書きたくないがthrowもしたくない

例えば、名前を取得する関数があるとする。
犬ならpochi、猫ならtamaだ。

ifで書いて、もう片方をelseにするか。
これは個人的に好きでない。animalが増えると、elseに入ってしまう。
playground

const getName = (animal: 'cat' | "dog") => {
    if (animal === 'cat') {
        return 'tama'
    } else {
        return 'pochi'
    }
}

ifで早期リターンするか。
これも同様にanimalが増えると、elseに入ってしまう。
playground

const getName = (animal: 'cat' | "dog") => {
    if (animal === 'cat') return 'tama'
    return 'pochi'
}

elseにして、throwするか。
これはまあまあ好き。場合によるけど、throwしなくてもいいケースはあるのでそこらへん微妙。
playground

const getName = (animal: 'cat' | "dog") => {
    if (animal === 'cat') return 'tama'
    if (animal === 'dog') return 'pochi'
    throw Error()
}

最近のTypeScriptは賢いので、switchにするとdefaultを書かなくてもundefinedを返さないので、その時のコードは美しい。
が、animalが増えた時にundefinedが戻り値に含まれてしまうのはいただけない。
playground

const getName = (animal: 'cat' | "dog") => {
    switch (animal) {
        case 'cat': return 'tama'
        case 'dog': return 'pochi'
    }
}

これがいいのではと最近思っている。
animalが増えると、TypeScriptが型エラーを吐いてくれるのでとてもわかりやすい。好き。
playground

const getName = (animal: 'cat' | "dog") => {
    return {cat: 'tama', dog: 'pochi'}[animal]
}

ワイフがお呼びです

Solanaのprogramのrent

最近はSolanaに興味がある。

Devnetへのデプロイは成功した。

Solanaはstepnで使われてるのが最近は盛り上がってるようだ。

個人的に気になったのは、うる覚えだが、rentが、デプロイ時に確定。2年分を定額で収める。以降のrentは不要というもの。
後々、定額ではなくなるっぽい記述があったし、まだbetaなので動的になるだろうと思ってる。
というのも、見た感じ初回以降のデプロイではrentが不要である場合、初回のprogramを超軽量でデプロイして、以降のデプロイで容量を増やされると困るだろうと感じたから。
ただ、容量の上限は10mbだったと思うので、そこまで問題ないのかな?

ディズニーランド行く

えいと行くよ🐼

すき家でご飯食べたよ🍚

京葉線に乗ったよ🚃

とても暑いよ🫠

yo-yoチェケyoー by えい🐼

バズライトイヤーはかじ7000点だった、えい10万点だった、えいすごい🐼

スティッチはaiだった機械学習すごい🤖

スターウォーズは怖かった、ジェットコースターではないけどな🤠

スモークチキンレッグうま🍗

ピザうま🍕

イッツアスモールワールド平和🕊

フィルハーマジックは水がかかったよ💦

広場をキャラクターが走ってくよパレード🏳️‍🌈

ティポトルタうま🤤

キノピオ平和🕊

ピーターパンは浮いてた🧚‍♀️

ホーンテッドマンションは暗いよ、クルクルまわるよ💫

白雪姫は平和🕊

クルーズは平和です、船長がハイテンション⚓️

最後にエレクトリカルパレード🧚‍♀️

image

吉野家でネギ塩豚丼食べて終わりー

いい天気だった☀️

「楽天モバイル」から「povo2.0」へのりかえた

「楽天モバイル」から「povo2.0」へのりかえた。

楽天モバイルから新料金プランへ自動移行すると発表がありました。

私のメイン回線はIIJmioの4gb。
IIJmioの容量がなくなった時に予備として楽天モバイルを使用していました。

予備ということもあり、直近の楽天モバイルの利用履歴はほぼ0だった。

image

image

image

新しい楽天モバイルよりpovo2.0 の方が必要な時だけトッピング方式なので、自分の用途にあっていると判断し、移行した。

また、ラッキーなことに、povo2.0 からキャンペーンが来た。

一日データ無制限にできるクーポン10回分。

以下メール内容

■コードの入力期限
2022/08/31
■コードの利用回数
10回
※本コードは上記の回数繰り返し入力できます。
※利用した回数を確認することはできません。別途メモをとるなどしてお忘れなきように願います。

5/31まで新規加入で貰えるよう。
image

画像に電話番号乗ってるけど、もう使ってないやつ!

クーポンは早速、ディズニーランドで使わせていただきました♪

えいと内見

石神井公園あたりに行きます
2つの物件を見てきます
ふふーん!

ふぐ屋さんにいたふぐ🐡
ふぐ

Github discussionsをブログに変換したよ。Gaasと名付けよう

やってること

Github actionsのcronで1日1回webhookをcurlでpostする。
webhookはCloudflareのDeploy Hook。
CloudflareでNext.js のSSGビルドが実行され、静的ファイルホスティングする。

本体は以下のページ

https://github.com/kajirikajiri/jamstack-tech-blog/discussions/categories/scrawl

discussionsをcurlで取得するテスト

curl -H "Authorization: bearer TOKEN" -X POST -d " \
 { \
   \"query\": \"query { viewer { login }}\" \
 } \ " https://api.github.com/graphql

curl -H "Content-Type: application/json" \
  -H "Authorization: bearer TOKEN" \
  -X POST -d '{"query": "query {repository(owner: \"kajirikajiri\", name: \"jamstack-tech-blog\") {description}}"}' https://api.github.com/graphql
  
curl -H "Content-Type: application/json" \
  -H "Authorization: bearer TOKEN" \
  -X POST -d '{"query": "query {repository(owner: \"kajirikajiri\", name: \"jamstack-tech-blog\") {discussions(first: 10) {nodes {id} edges { node {id} }}}}"}' https://api.github.com/graphql

curl -H "Content-Type: application/json" \
  -H "Authorization: bearer TOKEN" \
  -X POST -d '{"query": "query {repository(owner: \"kajirikajiri\", name: \"jamstack-tech-blog\") {discussions(first: 10) { totalCount }}}"}' https://api.github.com/graphql

curl -H "Content-Type: application/json" \
  -H "Authorization: bearer TOKEN" \
  -X POST -d '{"query": "query {repository(owner: \"kajirikajiri\", name: \"jamstack-tech-blog\") {discussions(first: 10) {nodes {title}}}}"}' https://api.github.com/graphql

curl -H "Content-Type: application/json" \
  -H "Authorization: bearer TOKEN" \
  -X POST -d '{"query": "query {repository(owner: \"kajirikajiri\", name: \"jamstack-tech-blog\") {discussions(first: 10) {nodes {title body bodyText}}}}"}' https://api.github.com/graphql
  
curl -H "Content-Type: application/json" \
  -H "Authorization: bearer TOKEN" \
  -X POST -d '{"query": "query {rateLimit { limit cost remaining resetAt } repository(owner: \"kajirikajiri\", name: \"jamstack-tech-blog\") {discussions(first: 100, after: \"CURSOR\", categoryId: \"CATEGORY_ID\", orderBy: {field: CREATED_AT, direction: DESC}) {edges {cursor node {id title body}}}}}"}' https://api.github.com/graphql
  
curl -H "Content-Type: application/json" \
  -H "Authorization: bearer TOKEN" \
  -X POST -d '{"query": "query {repository(owner: \"kajirikajiri\", name: \"jamstack-tech-blog\") {discussionCategories(first: 10) { nodes{id name} }}}"}' https://api.github.com/graphql

作成の参考にしたページ

Github
https://docs.github.com/ja/graphql/overview/resource-limitations
https://docs.github.com/ja/graphql/reference/objects
https://docs.github.com/ja/graphql/reference/objects#discussion
https://docs.github.com/ja/graphql/guides/migrating-from-rest-to-graphql
https://docs.github.com/en/graphql/guides/using-the-graphql-api-for-discussions
https://docs.github.com/ja/graphql/guides/forming-calls-with-graphql#example-query
https://docs.github.com/en/authentication/keeping-your-account-and-data-secure/creating-a-personal-access-token

Cloudflare
https://developers.cloudflare.com/pages/platform/deploy-hooks

GraphQL Variables
https://dgraph.io/docs/graphql/api/variables/

GraphQL APIをfetchメソッドで叩く方法
https://zenn.dev/mayo_dev/articles/fetch-graphql-api

curlでGraphQLの長いqueryを投げる
https://qiita.com/ikemura23/items/ff5af3775006c3f7fb0c

giscus
https://giscus.app/ja

stackoverflow
https://stackoverflow.com/questions/52601436/graphql-how-to-handle-prev-page-next-page-last-page-and-first-page-properly
https://stackoverflow.com/questions/42021113/how-to-use-curl-to-access-the-github-graphql-api

Next.js で Markdown ブログを作る
https://blog.chick-p.work/next-js-blog/

Reactでマークダウンエディタ作成とマークダウンからHTMLに変換(ハイライト付き)
https://qiita.com/t_okkan/items/0a3318f90ee6c4468f82

marked.jsを利用してMarkdownをHTMLに変換
https://www.wakuwakubank.com/posts/699-javascript-markedjs/

Test markdown

This README can be used as a reference for github-flavored-markdown styling (and possibly behavior).


H1

followed by some text

H2

followed by some text

H3

followed by some text

H4

followed by some text

H5

followed by some text

H6

followed by some text

Auto-detected link: http://www.france.com

Some Ignored_multiple_underscore_italics here

A line of normal text with inline code and italics, strong font, and even some μ†ℱ ╋ℯ╳╋. Followed by lots of Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis id sem purus, eu commodo tortor. Donec malesuada ultricies dolor a eleifend. In hac habitasse platea dictumst. Vivamus a faucibus ligula. Nullam molestie tristique arcu, eu elementum metus ultricies sed. Aenean luctus congue lectus, vitae semper erat rhoncus non. Nulla facilisi.

Followed by another line of normal text with inline code and italics, strong font, and even some μ†ℱ ╋ℯ╳╋. Followed by lots of Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis id sem purus, eu commodo tortor. Donec malesuada ultricies dolor a eleifend. In hac habitasse platea dictumst. Vivamus a faucibus ligula. Nullam molestie tristique arcu, eu elementum metus ultricies sed. Aenean luctus congue lectus, vitae semper erat rhoncus non. Nulla facilisi.

Thin horizontal rule:

--

Thick horizontal rule:


Table Header 1 Table Header 2
Content http://example.org
Content http://localhost:\<port>
Text right below table. Follows is a table with an empty cell, and unaligned indenting.
Table Header 1 Table Header 2
Content Cntent
Content

Empty line between table and this text

def this_is
  puts "some #{4-space-indent} code"
end
def this_is puts "some #{code tag} code" end
def this_is
  puts "some #{pre tag} code"
end
def this_is
  puts "some #{fenced} code"
end
class Classy
  def this_is
    puts "some #{colored} ruby code with ruby syntax highlighting"
    @someobj.do_it(1, 2)
  end
end
var test = function this_is(){
  console.log("some" + colored + "javascript code with javascript syntax highlighting really long");
}
(defproject myproject "0.5.0-SNAPSHOT"
  :description "Some clojure code with syntax highlighting."
  :dependencies [[org.clojure/clojure "1.5.1"]]
  :plugins [[lein-tar "3.2.0"]])
var test = function this_is(){
  console.log("language declared as 'js' instead");
}
var test = function this_is(){
  console.log("language declared as bogus_language");
}

here is blockquote

Relative image link

Test from https://github.com/suan/github-flavored-markdown-test