ReactやAngular、VueなどでComponentのスタイリング時に抑えておきたいこと

なんとなく自分の中で言語化しておきたかったので、整理も兼ねて記載しておきます‍♂️ 普段仕事で様々なAngular、またはReactののコンポーネントを作ったりメンバーから出るPRを読む中で、コンポーネントのスタイルはどういうふうに当てるのが破綻しにくいん…

ReactでrequestAnimationFrameを使う

ふと自分で遊んでる時に、ReactでCanvas触るのどうするんだろなーという気持ちになったので調べた。 ここを読めばすべてのことが書いてある。 https://css-tricks.com/using-requestanimationframe-with-react-hooks/ DEMO https://codesandbox.io/s/mystify…

switchかなんかで条件によって異なる値を返す関数の型の書き方

この間やっててハマったので、意外とハマる人多いのでは?ということでメモ 前提⚠️ typescript v4.0.2 ■ 前提となる変数たち type valueOf<T> = T[keyof T]; const KEY = { foo: 'foo', bar: 'bar' } as const; type Key = valueOf<typeof KEY>; const VALUE = { foo: 'foo'</typeof></t>…

TypeScriptで自作している便利型Tips

たまになんかこういうの取り出したいんだけど、なんかないかなーみたいなことになっていくつか作ってみたりしているので、せっかくなので記載しておく🙆🏻♂️ ‍ 命名が微妙なので、命名をどうにかしたいというのがある valueOf<T> keyOfの反対。 与えられたオブジェ</t>…

2019年が終わる

もう後7時間後には2019年が終わる。全くなんの感慨もないし、実感もない。年々実感がなくなっていく。 僕にとって年越しというのは、祖父の家に行って寿司を食って、帰りの車の中でフロントガラスに雪が吸い込まれていく様子を眺めながら除夜の鐘を聞くこと…

まぜそば。油そば。そういう系のやつのレシピ

まぜそばが好きなので自作している。 最近はまぜそばと呼んでいるけど、昔地元で見かけた時は油そばって名前だった気がする。 イメージ 油が絡んでいてしょっぱい、ラーメンというイメージ。というかラーメンのタレをスープで割らずに麺に絡めたらなりそう。…

コンポーネント指向とデザインに対するメモ

知り合いでWebの会社やってる人が、ツイッターでコンポーネント指向について、Vueを始めて初めて実感として理解できたと言ってた。 その人はデザイナーがメインで、フロントエンド周りはある程度というスタックの人だけど、確かにそうかも知れんなーと思った…

ただただ `import ’hoge’;` とか `require('hoge')`とかした場合について

ただただ import ’hoge’; とか require('hoge')とかした場合について確認した 会社で闇のコードを弄っているときにrequire('hoge')みたいなのが無限に出てきた。 こいつってどんな形でimportされるんだ?ときになったので試してみた。 結論から言うと、クロ…

CSSのサイズ指定時の単位について、というか%について詳しく述べる

CSS

CSSのサイズ指定時の単位について、というか%について詳しく述べる モチベーション 今、仕事でフロントエンドエンジニアをやっているけど、案外CSSが苦手な人が多い。CSSはスタイルシート言語なので他のプログラミング言語のパラダイムがまるで当てはまらな…

今更だけどまぁまぁ便利なのでgulp4を使う

今更だけどまぁまぁ便利なのでgulp4を使う はい。 今更gulpって、、、って感じもあるし、webpackだのparcelだの、いやいや、そもそも最近はcliが充実してるので、設定ファイル自体書かないんだよってことがあるのは知ってるけど、gulp4結構便利だったので書…

JavaScriptで素数を求めるなどやった

以前、と言っても相当前のことだけれど、会社をやっている友達と飲んでいて、そこの強いエンジニアの人も来ていた。その人はプログラミングを教えるということも行なっており、生徒に出した問題についての話になった。 それが、ある数までの素数を求める、と…

direnvでプロジェクトごとのnodeのバージョンを切り替える

今更ですが、会社でまとめたのでこっちにも貼っときます。 プロジェクトごとにnodeのバージョンが違って、そのたびに思い出しては切り替えることがあります こっちではv8なのにこっちではv10、、、 そもそも覚えてられないし、切り替えるのが面倒、、、、 そ…

EventTarget.addEventListenerでイベントを登録した時、そのイベントの実体はどこに登録されるのか

モチベーション 要素追加時に、その要素にeventを登録したとする。 その後、その要素が削除され、かつその要素がどこからも参照されていない時、登録されたイベントはどうなるのか気になった。 もし、上記の状態でもイベントが削除されないのであれば、remov…

祖父との思い出2

「おじいちゃあん、おじいちゃあん、行くよう、早く行くよう、って言って、おじいちゃん、妹にミルク飲ませてるのに、バスのガラガラ引っ張るおもちゃもって、行くよ、行くよって何度もいってさ、その話をおじいさんから何辺も何辺も聞かされたいや。 それで…

祖父との思い出。

特に理由があるわけではないけれど、なんとなく書いておこうと思う。 母方の祖父について。 今、祖父の通夜、葬式のために地元に向かっている。 片道6時間の長い旅路。 新しい会社に入ったばかりなのに早速、慶弔休暇を取得することになった。 通夜は明日、2…

背景の中で何種類かのパターンを繰り返して表示する

背景の中で何種類かのパターンを繰り返して表示する 全然書かなくなるということになったので、たまたま業務でやったやつを残しておく。 表題がめちゃくちゃわかりにくいけど、要はこんな感じのやつ。 例えば500 * 1000のパターンを4種類繰り返して表示する…

CSSの `pointer-events: none` が便利

CSS

CSSの pointer-events: none が便利 早速書かなくなっているので、小さいことでも書いていこうという気持ちを見せてる サイト作ったりしてて、ディレクターに確認出したりするとたまーに「ここなんかクリックできないんだけど」みたいなことを言われることあ…

ちょいちょい触って感じたsin/cosの便利なところ

ちょいちょい触って感じたsin/cosの便利なところ canvasとかその辺触るとだいたいsin/cosが出てきて、数学嫌いな僕みたいなのはそれだけでってなりがち。だけどちょっと触ってみると全然複雑なものでもない。 ポイントは2点で sin/cosに同一の値(角度)を与…

source要素のmedia属性について

source要素のmediaについて ウェッブサイトを制作する上で、スマホ用とPC用で画像を切り替えたいみたいなことってかなりあると思う。画像はなんやかんやとファイルサイズ食うものでもあるし、PCの方ではガツンとでかいやつ使いたいけど、それさすがにスマホ…

2Dのメタボール(Metaball)理解した

2Dのメタボール(metaball)について理解した。 メタボールっつーのは何かと言うとこれです。写経したやつだけど。 (PCで見てくれよな!) See the Pen metaball canvas by bom_phage (@bom_phage) on CodePen. メタボールというか、こういう滑らかにくっつく表…

PIXI.jsであそんでる

PIXI.jsであそんでる。 個人プロジェクトで使おうという意図もあるので、別に遊んでるわけではないけど、割と気に入って最近よく試している。何が気に入っているかと言われると、非常に簡単な点と、パフォーマンスがいいことかなー。 canvasでやっていき問題…

CSSであそぼう

CSSであそぼう CSSであんまり使ってないというか、あんまり挙動理解してないのいろいろあったので遊んでみた。 transformとperspective matrix3D とか正直触ってみたけど行列を理解する頭がまだないので、よくわからん。結局translateとかscaleとかrotateみ…

歳をとった。

歳をとった。今まさに年齢が増えるという切り替えの時間には、家で仕事をしていた。非常につらい仕事だったけど、日が変わって少ししたのち、ほぼ終わった。 朝起きてズッキーニを食べた。ひどく苦くて吐き出した。稀にこういうものがあるらしい。二本あって…

何をしたいのか考えている

ここ最近専らの悩みは何をやっていくかということだ。なんか自分の年齢を自覚する機会が増えるにつれて、流石にだらだらしていられない気持ちになってきたので、行動したいと思っている。 そうは言いながら、予定では今頃ポートフォリオサイトだったりある程…

今、Webフロントエンドをはじめるとしたら。

以前知り合いに、Web制作をやってみたいという話を受けたことがあった。結局それ以降話が膨らんだりはしなかったのだけど、なんとなく自分がどうやって覚えたか振り返ってみたくなった。 自分自身、Webサイトの作り方を覚えたのは独学だった。 当時、自分は…

canvasにHTMLの内容を描画したい

かっこいいサイト見てたら、canvasにHTMLの内容を描画して背景なんかに引いてぐにゃぐにゃさせているようなのがあった。僕はそういうぐにゃぐにゃするようなのすごく好きなので、一体これどうやってるんだろうな、みたいな気持ちになって見てた。 たまたま、…

Hello World!!

そういうわけで、レンサバ上にワードプレス入れてどうこうしようと思って領域作ってやってたけど、色々だるくなったのではてなにした。 なにがだるかったのかというと、まずスマホでログインするのが面倒だったし、あとはSNSなどの埋め込みについて考えると…