yn2011's blog

技術メモ

エンジニアが業務用 mac の ディスク空き容量を 100GB 増やすためにやったこと

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

img 要素に width と height を指定してもレイアウトシフトする原因は属性値が auto だからかも

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

(Android) Expo Bare workflow に Firebase Crashlytics を導入する

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

(iOS) Expo Bare workflow に Firebase Crashlytics を導入する

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

(Android) Expo bare workflow で 環境別に複数の applicationId を使い分ける

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

2021 年を振り返る

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

Expo のビルドで発生する Unable to find a specification for `UMCore` depended upon by `EX**` について

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

おすすめの .gitconfig 設定

git

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

Android バージョン毎の WebView と Chrome の対応表

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

自分が購読しているテックブログ一覧2021

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

img タグからのリクエストは Origin ヘッダーを持たないのでレスポンスの Access-Control-Allow-Origin を満たしていなくても CORS 違反にならないらしいという話

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

flex item は幅を指定せずに margin: auto で縦横中央揃えできる

CSS

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

モブプログラミングのモブのときに意識していること

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

Storybook を CSS Modules + Next.js プロジェクトに導入する際にハマったこと

環境 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 するだけでは駄目だったのでハマ…

npm error: Cannot destructure property `name` of 'undefined' or 'null'

環境 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 こち…

CSS 中央揃えのフローチャート

CSS

どういうときにどの中央揃えテクニックを適用するかという整理をしたかったのでフローチャートを作成した。多分まだ間違いや改善の余地はあると思うが、とりあえず今の自分はこういう風に考えているということで公開する。(図が汚い&ブログのモーダルで見に…

ツイートで振り返る 2020 年 1~3月

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

AtCoder 茶色になったので振り返りと茶色になるために必要だと思うことを書く

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

React v16 まではイベントハンドラが window.document に登録されていたという話

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

Go の module cache と vendor の違い

Go

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…

総和の剰余(mod) を計算したい

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

TypeScript の演算子を整理する

TypeScript (というか最近のJavaScript)って、よく分からない演算子多くないですか? なんか色々な箇所で! とか ? とか見るので意味が分からないと結構ストレスになります。 自分があんまりキャッチアップしてないのが悪いんですが、馴染みがない/薄い演算子…

(a + b - 1) / b で a / b の切り上げを計算する

整数 a, b に対して、 a / b の切り上げを計算したい場合 (a + b - 1) / b するという小技が競技プログラミングではよく使われる。 なぜこれで切り上げが計算できるのか、良い感じの説明が検索しても出てこなかったので自分なりの理解を書いておく。 以下 / …

TypeScript の共用体型は or ではないのかについて考えた

TypeScript の共用体型(Union Types)は or ではない を読み、確かによく分からん挙動だなーと思って色々調べたり考えたりしたことを書いておく。 タグ無し共用体型 形状A, B に対して、A | B と A & B で定義される型の性質 A | B = A ∪ Bという理解は正…

そもそも reflection とは何なのか

Go 言語を勉強していて reflection って何なんだろ、となったので調べた内容を書いておく。 そもそも reflection とは何なのか 自己書き換えコード reflection はメタプログラミング メタプログラミング なぜメタプログラミングしたいのか 実行時にしか分か…

Go の型システム周りについてのメモ

Go

Go の型システムについて、今理解していることを書く。もしかしたら間違っているかもしれない。 Go の型システム 型同士に階層がない(サブタイプ・スーパタイプのような関係がない) 型は名前によって区別される。階層がないので、ある型が要求された場合に…

シェルスクリプトの任意の箇所で git の branch 名をあいまい検索するエイリアスが便利

環境 mac OS 10.14.6 zsh 5.3 (x86_64-apple-darwin18.0) モチベーション git push や git checkout など、branch 名を タイプしないといけないときに正確に branch 名を入力するのが面倒くさい 結果 B と書かれている箇所にあいまい検索で見つけた branch …

GraphQL と Apollo Client / Server を学ぶためにやったこと

GraphQL と Apollo Client / Server を学んだので何をしたかを書いておく。 GraphQL 読んだ本 実装 感想 Apollo Client / Server 読んだ本 / ドキュメント 実装 感想 GraphQL 読んだ本 初めての GraphQL GraphQL スキーマ設計ガイド 最初に「初めての GraphQ…

AtCoder Beginner Contest に参加し始めた

AtCoder が毎週開催している AtCoder Beginner Contest (以下ABC)に参加するようになって 1ヶ月程度経ったので何かその辺りのことを書いておく。 今の成績 なぜやるか 始める前の実力 ABC 初参加前にやったこと 環境構築 AOJ ITP1 を解いた ABCに初めて参加…