今後は以下のブログに記事を書いていきます。というか既に書いています。 https://blog.yn2011.com/ はてなブログの記事は残しておきます。既存の記事を更新する場合は新しいブログに記事を書きます。よろしくお願いします。

React Server Components (RSC) について学んでいる中で、Server Component (SC) を SSR した場合に Hydration はどうなるんだろう？と疑問に思ったので調べてみたメモ。間違っていたらすいません。 これまでの Hydration SC の Hydration Next.js における …

フロントエンドのパフォーマンス指標は種類が多くて各指標の定義や関係性を把握するのが難しいと感じる。自分はよく分からなくなるので整理するために図にしてみた。 各指標の定義と関係性 図を作るにあたり以下の URL の内容を参考にした。TTFB と SpeedInd…

仕事 育児 技術 株式投資 読書 ギター 2023 年 仕事 今年は*1 React Native (Expo) を利用したネイティブアプリ開発のプロジェクトで、主に Expo を利用した基盤整備を担当していた。具体的には GitHub Actions で EAS Build / Update をフックする処理を書…

書籍「Clean Agile 基本に立ち戻れ 」を読んだ。 この書籍は、アジャイルソフトウェアマニフェストを策定したスノーバードの会議の主催者でもある Robert C.Martin 氏 が、近年広まっているアジャイルに関する誤解を解くために、アジャイルの歴史やアジャイ…

ざっくり要約 Conifig Plugin とは prebuild フェーズって何？ Config Plugin は SDK 毎に開発 Config Plugin が必要かどうかの判定方法 既に公開されている Config Plugin がないかを探す SDK のドキュメントがある場合 SDK のドキュメントがない場合 Confi…

所属企業で代々引き継がれている(と思う) git のブランチ命名とコミットメッセージのルールを汎用化してみた。 ブランチ 具体例 type scope task-number name コミットメッセージ 具体例 type scope, task-numer message そんなにコミットメッセージって大事…

前提 Expo SDK 45 react-native-startup-time v2.0.0 結論 react-native-startup-time を利用した。 import { getTimeSinceStartup } from 'react-native-startup-time'; // 省略... export const Screen: React.FC = () => { const [launchTime, setLaunchT…

気づいたら業務用 mac のディスク容量の空きが 10GB ぐらいしかなくて困ったので色々やって 100GB 空けたという話。「mac ディスク容量」みたいにググってもゴミ箱を空にするとか全然参考にならないことしか出てこなかったのでこの記事を書いている。 業務用…

環境 Chrome 99 tldr; img 要素に width と height を指定するとレイアウトシフトしないと聞いて試してみたが、レイアウトシフトが改善しないケースがあった。img 要素の width と height に auto を指定していて画像を読み込むまで幅を決定できない場合にレ…

Firebase Crashlytics を使うとアプリがクラッシュした際にエラーレポートを送信することができる。 iOS に導入する手順は(iOS) Expo Bare workflow に Firebase Crashlytics を導入する に以前書いた。今回は Android アプリに Firebase Crashlytics を導入…

Firebase Crashlytics を使うとアプリがクラッシュした際にエラーレポートを送信することができる。Expo Bare workflow のプロジェクトに Firebase Crashlytics を導入する手順について書く。 環境 パッケージインストール firebase.json を作成する テスト…

公式ドキュメントのExample: configuring development and production variants in a bare projectを参考にやってみたのでメモ。 環境 Expo SDK 44 bare workflow applicationId とは アプリの識別子。 すべての Android アプリには、「com.example.myapp」…

技術 引っ越し デスク周り 読書 髪が伸びた 筋トレ ギター 株式投資 総括 技術 2021 年はプロダクトのグロースや新規構築を通じてずっと Next.js に触れ続けていた年だった。 現職で自分が関わるプロダクトは、事業領域の特性的にも機能要件があまり難しくな…

この記事は React Native Advent Calendar 2021 の10 日目の記事です。 Expo 歴 1 ヶ月ぐらいなので記述に間違いがあるかもしれないですが、同じエラーに悩んでいる方向けのヒントになればと思い公開。 環境 expo 42 -> 43 に更新する際に発生 managed work …

おすすめの .gitconfig 設定、といってもそんなにマニアックなものでもないが何も設定してないという方向けに参考になれば。 [alias] co = checkout [push] default = current [core] ignorecase = true [fetch] prune = true [alias] co = checkout 開発業…

自分用に整理していたが、けっこう有用かもしれないので公開する。 バージョン Name WebView更新*1 WebView 依存アプリ*2 Chrome バージョン*3 リリース日 4.1-4.3 KitKat 不可 - Chrome ベースではない 2012年7月9日 4.4 KitKat 不可 - Chrome Android vers…

自分がどうやって技術系のインプットを行っているかについて書く。 いつ 休日。平日はほぼ見ない（週に1~2 時間でインプットが完了するように量を調整している） どうやって Inoreader で RSS を購読。 何を 大まかに分けると3つ 企業のテックブログ 技術(OS…

歴史的経緯により img タグからのリクエストは(crossorigin 属性を付与しない限り）クロスオリジンの場合でも preflight リクエストは飛ばない。これを simple request と呼ぶことは知っていた。 しかし、画像のレスポンスヘッダーに例えばAccess-Control-Al…

margin: auto を使用した縦横中央揃えは要素自体に幅((max-)width, (max-height))の指定が必須と思っていた。 例えば、position: absolute と組み合わせた以下の要素は親（absolute の基準）に対して縦横中央揃えされるが .test { background-color: aqua; p…

前提 モブプログラミングをする前にやっていること モブのときにやっていること 助ける 進行する 質問する 丁寧に会話する 記録する モブのときにやらない方がいいこと 前提 モブプログラミング歴 9 ヶ月程度 参加者は全員リモートワークで、最小2人、最大で…

環境 next 10.0.6 @storybook/react 6.1.21 @storybook/preset-scss 1.0.3 css-loader 3.6.0 sass-loader 10.1.1 (多いな) Storybook を CSS Modules + Next.js プロジェクトに導入したい ドキュメントに従って、npx sb init するだけでは駄目だったのでハマ…

環境 node v15.6.0 npm v7.5.2 npm i -D @storybook/preset-scss $ npm i -D @storybook/preset-scss したら以下のエラーがでた npm ERR! code ERESOLVE npm ERR! Cannot destructure property 'name' of 'node' as it is null. legacy-peer-deps=true こち…

書き直しました: https://blog.yn2011.com/posts/2023-10-24-css-center 以下、過去の内容 どういうときにどの中央揃えテクニックを適用するかという整理をしたかったのでフローチャートを作成した。多分まだ間違いや改善の余地はあると思うが、とりあえず今…

ブログのリハビリということで簡単に書けそうな振り返り系の記事。1年分を1記事にする予定だったが、3月までで力尽きた。そのうち続編を書くかもしれない。 1月 Vim で Go を書こうとしていたらしい。 vim-goのインストール5分ぐらいかかった— メロン食べた…

最初に一言。茶色になるのは想像以上に大変だった。 tl;dr AtCoder をはじめる前の実力とかモチベーション レート遷移 開始 1ヶ月 開始 2ヶ月 開始 3 ~ 4ヶ月 開始 5 ~ 7ヶ月 開始 8ヶ月~ 茶色 やって良かったと思うこと やらなくても良かったと思うこと 茶…

@koba04 さんの React v17 の変更に関するこぼれ話 を読んで、コードを動かしてみたので書く。 v16 でイベントハンドラは document に登録される React v17 の変更に関するこぼれ話 に記載されている通り、React v16 までは React 内のイベントハンドラは do…

Go の module cache と vendor の違いがよく分からなかったので調べた。結論としては、違いというか go.mod に記述されているバージョンによってデフォルトで module cache と vendor のどちらを go run や go build 時に使うかが異なる。 環境 Go 1.15.3 $G…

ABC 132 D 問題 の公式解説で、パスカルの三角形を利用して組み合わせの数を求めていたが、一見して何をしているか理解できなかった。 実装はこんな感じで、nCk を計算できる。 int n, k; cin >> n >> k; int c[105][105] = {}; c[0][0] = 1; for(int i=0; i…

C - Sum of product of pairs で躓いたのでメモ。 総和の剰余(mod) 整数 a1, a2, a3 ... の 総和の剰余(mod) を計算したい。 (a1 + a2 + a3 ... ) % m このとき、上の計算は以下と同値である。 (a1 % m + a2 % m + a3 % m ... ) % m これを剰余演算の分配法…