がん検診のはなし
こんにちは。久しぶりのブログ更新です。
本当は技術一色のブログにするはずだったのですが、日常のブログと分けようかと考えていたら半年以上も経っていました…。
分けるほどの内容でもないかなぁと思い、日常のことも更新していこうと思います。
実は先日、がん検診に引っ掛かり、大きめの病院で精密検査を受けることになってしまいました。
今日、精密検査の結果を聞きに病院に行ってきました。結果は特に心配するほどのことでもなく、経過観察ということになったのでひとまずほっとしています。
自分自身25歳なので、まさかがん検診にひっかかるとは夢にも思わずかなり焦りました。
今後似たような境遇に会った人のために検査でやってことなど書いておこうかと思います。ためになるのかは不明ですが…。
1回目の引っ掛かり→異常なし
区や自治体によると思いますが、毎年区のがん検診が安く受けられる案内が届いているかと思います。
いつものように子宮頸がんの検査を受けました。
次に来院した時に（大体1ヶ月後くらい）に結果を教えてもらうのですが、毎年以上もなかったし、なんかヤバイ結果だったら電話とかかかってくるものだと思ってたので何とも思わずに過ごしていました。
しかし、先生の口から驚きの言葉が…
「あー、引っかかってますね！アスカスです！」
あすかす…？
どうやら異形の細胞が見つかったらしいです。しかし、アスカスという診断結果はよくみられるもので、たまたま起こることもあるので、
本当に怪しいかどうかを見るためにはウイルス検査をする必要があるとのこと。
ウイルス検査も、検査台に上がっての検査になるのですが、どうも婦人科の検査は慣れない…。
カーテンの向こう側で何が起こっているのかもよく分からんので、頭の中で別のことを考えながら必死に耐えてました。
とりあえずウイルス検査の結果は１週間後に出て、陰性。問題なしとのことで、また半年後にがん検診をすることになりました。
これが昨年の10月くらいの話です。
半年後、2回目のがん検診→ちょっとヤバめ？
半年後の4月にも同様のがん検診を行いました。今回は区のがん検診ではなく自己負担ですが、そんなに値段は高くないです。
結果は…やはりアスカス。またお前か！
前回の流れをなぞり、そのままウイルス検査をしました。今回も陰性だろうな〜、と呑気に考えながらネイルサロンなんか行って来院すると、
何と、陽性！
大きい病院に行って精密検査を受けてくださいと言われ、招待状を渡されました。
大きめの病院は平日しかやってないので、会社の有給と相談しつつ、とりあえず近所の大きい病院を予約しました。
まさか陽性になると思っていなかったので、動揺がやばかったです。とりあえず両親に電話しました。
実は私の叔母（父の妹）も前に子宮頸がんを患って、手術したけどその後に子供を無事に出産できたという話を聞いたり、保険入ってるからお金のことは心配しなくていいだろうという話をしたりしてました。
大きな病院へ→精密検査はしんどい
お昼から有給をとって、大きい病院へと足を踏み入れました。
大きい病院はとても綺麗で、精算や受付も自動化されていて洗練された雰囲気でした。
予約していたのでスムーズに受付がすみ、いよいよ精密検査へ…。
大嫌いな診察台に上がります。
いつものがん検診は工程が2つくらい（なんか突っ込んでゴリゴリして終わり）だったのですが、精密検査は工程が多い。
覚えている限りでは、
なんか突っ込む→なんかグイグイする（痛い）→しみる液体をかける→グイグイする→組織をパチンと切り取る→止血する→ガーゼ突っ込む→器具抜く
みたいな感じでした。
ここまでの一連の流れを説明なしで受けたので、いつ終わるのか・次は何されるのかがすごく恐怖でした。
webデザイナーとして、会員登録フローを予めユーザに見せることの重要性について考えたりしていました（？）。
ただ、恐怖心がすごいですがそこまで痛くはなかったです。ちょっと軽い生理痛っぽい痛みがするくらい。
本当の地獄はここから…。
組織を切り取ったりいろいろしたので、ガーゼを中に突っ込まれます。
で、そのガーゼを突っ込んだまま翌朝まで過ごさなければならないのです…。
ガーゼの入りどころが悪かったのか分かりませんが、痛くて座るのがかなり辛かったです。
ガーゼが翌日抜ける用にピョンとはみ出てるので、トイレとかもいろいろ大変でした。
私的には検査よりもガーゼのダメージがデカかったです。
有給取っといて良かったと思いました。絶対ガーゼ入ったままじゃ仕事に集中できない！
その後いろいろ虚しくなって、チキンを買って爆食いしてました。
というわけで、子宮頸がんの精密検査を勧められたみなさん、検査は何も予定がない日にした方がいいです。絶対！
結果は心配なし！
そして冒頭に戻るのですが、今日結果を聞いてきました。
精密検査をした日に「ちょっと気になることがる」と先生に言われたのでなんぞやとヒヤヒヤしていたのですが、結果は心配なしでした。
しかし、依然として異形の細胞は生まれているみたいなので、また半年後に精密検査です。
病気や自分の人生について深く考えた数日間でした。健康に過ごさねばと背筋が伸びました。
子宮頸がんのワクチンは高校生の時に接種しているのですが、陽性になってしまったので油断大敵だなと思いました。
みなさんも、区のがん検診ちゃんと行ってくださいね！
コーディングで地味に忘れる仕上げテクニック
n番煎じですが、急いでコーディングすると忘れがちでテストのときにハッと気づくヌケモレを戒めとしてまとめておきます。
もう忘れないぞ〜。
flexboxのカラム崩れ回避
カードを並べるデザインなどで、flexboxでjustify-content: space-betweenにする機会は多いと思います。
カラムが3つの場合、カードが3nまたは3n+1個の時は良いのですが、3n+2この時はこのようにカードが左詰にならずに崩れてしまいます。
崩れを回避するために擬似要素を加える必要があります。
See the Pen flexbox 3columns layout by shake (@mgmgshake) on CodePen.
button要素をクリックすると出る枠
button要素をクリックすると、オレンジの枠が自動で付きます(chromeの場合)。
スタイルと合わない場合は、以下のように指定して消しましょう。
.btn {
outline: none;
}
select要素のアイコンを自作する
selectの三角アイコン「▼」を消し、独自のスタイルを当てる事は多いかと思います。
select要素では擬似要素が使えないので、大体selectをdivで囲んであげて、そのdiv要素の擬似要素としてアイコンを作ります。
その際、アイコンはselectの親が持つ要素なので、タップしてもselectの選択肢が開きません。
hotjarなどでスマホユーザを見てみると、アイコンをタップして選択肢を広げている人を多く見かけますので、タップしてもなにも音沙汰がないとストレスになってしまいます。
See the Pen select box by shake (@mgmgshake) on CodePen.
そんな時は、擬似要素にpointer-events: none;を付け加えます。
そうするとこのアイコン自体はタップしても無視され、下にあるselect要素のタップ判定となります。
昆虫とキ◯タマを食べに行きました
※この記事は虫の画像が出てきますので苦手な方はご注意ください
「昆虫食に興味がある」
突然友だちからLINEがきたので、ノリで昆虫が食べられるお店にいきました。
意外に意外が重なり、色々な人に話したくなる体験となったのでブログにも書いておきます。
行ったところ
9月某日、「米とサーカス 高田馬場店」さんにお邪魔しました。
内容はお肉のコース＋飲み放題で予約し、追加で虫やらなにやらを頼むという流れでいきました。
食べたもの（肉編）
まずはコースのお肉から。
・羊
・鹿
を焼肉にして食べました。
羊は普通にジンギスカン、鹿も実家付近で狩猟が盛んなので普通に食べた事があり、抵抗なく美味しくいただきました。
それにしても鹿肉は黒いですね。
あとは追加注文で兎の唐揚げもいただきました。
こちらもまた美味しくいただきました。特にクセもなく、鶏肉のような感覚です。
見た目のせいかな？
食べたもの（昆虫編）
お酒を飲みながら雑談に花を咲かせていると…
昆虫の６種類盛り合わせ（通称：ムシロク）がきました。
う、うひゃーー。
ノリでここまできてしまったけれど、いざ虫を前にするとゾワゾワします。
一緒にきた友達２人は大喜び。
右上から時計回りに、
・タガメ
・蜂の子
・オケラ
・コガネムシ
・イナゴ
・タイワンツチイナゴ
です。
パッと見一番に「食べれない」と思ったのはタガメでした。
（しかし、このあと衝撃の出来事が！）
まずは、食用としてよく目にする蜂の子からいただきました。
味は、そのまんま佃煮。噛むとちょっとプチッと感がありますが、粒が小さいのでそこまで感じません。余裕余裕。
次にオケラをいただきました。蜂の子と違い、いよいよ「虫」感が出てきて少し抵抗…。友達にビデオを撮られながらの「早よ食え！」コール。
思い切ってパクリと口に入れました。
ん…？うまいぞ！？
あ、ポテチだ…
何かをフライにして塩を振りかけた感じの味がしました。
虫を食べることによるぶちゅっと感みたいなのはなにも感じません。
どうしよう。意外とうまい。悔しい。
お次はイナゴ。
実家近くの魚屋さんでイナゴの佃煮が売っているのを見た事があるので、食べられるものだとはわかっているのですが、これまた足などが虫感全開で口に入れる気が起きません…。
目をつぶって、えいっと口に押し込みました。
もぐもぐ…
あ、
お正月のおせちの田作りだ…
味付けと、イナゴの少し硬めの食感が、田作りそのものでした。
正直、隠しされて口に入れられたら間違えると思います。
- 価格: 522 円
- 楽天で詳細を見る
お次はコガネムシ。
コガネムシは…正直美味しいと思えず、お酒で流し込んでしまいました＞＜
友達と１匹を半分こして、私は下半身を食べたのですが、やはり大きいだけあってお腹の内容物を感じてちょっとウッてなりました。
そしてタイワンツチイナゴ。なかなかのでかさです。草原でこれが腕に乗ってきたらちょっとビビります。
こちらも友達と半分こして、私はお腹の部分をいただきました。
味は…あまり記憶にないです…。コガネムシと同じで、可もなく不可もなくという感じでしょうか？
最後にタガメ。
最初このプレートを見たときは、タガメを丸ごと食べるなんて絶対無理！と思っていましたが、タガメだけは殻は食べず、解体して内臓を食べるタイプでした。
実はプレートと一緒にハサミと小冊子が渡されており、冊子に書いてある手順通りにタガメを解体するという謎イベントが発生しました。
（ちょっと私は触るのに抵抗があったので友達が解体しました）
解体しているときに店員の明るいお姉さんが見守っていてくれました。
「タガメのお腹の匂いかいでみ？いい匂いがするから。」
は？なにを言ってるんだこの人は…？
昆虫のお腹がいい匂い？
猫のお尻の穴を嗅ぎまくる人と同じノリか？
まぁどうせ土のにおい何だろうし嗅ぐだけ嗅いでみるか…と鼻を近づけると
え？
梨のにおい…？
とってもフルーティーな梨のようなにおいが鼻腔に広がりました。
目を閉じて嗅ぐと、綺麗なお姉さんの香水のような匂い…
でも、目を開けるとタガメ！！
どうやら、このタガメはオスで、梨の匂いの正体はフェロモンとのこと。
私たちのタガメが特に梨のにおいが強く、ラッキーだったね⭐️と店員さんが教えてくれました。
お腹を開けて内臓（緑色）を、マグロの中落ちのごとく箸で刮（こそ）いで食べました。
絵面だけ見るとグロテスクですが、風味は完全に梨。
塩茹でなので味はしょっぱいのですが、塩をかけた梨の風味の何かって感じでした。
これからタガメを見かけるときは梨の香りを思い出してしまいそうです…。
昆虫６種類、全て食べきっての感想は、
味部門ではイナゴ
勉強になった部門ではタガメ
ガチで虫部門ではコガネムシ
がそれぞれ優勝という感じでした。
提供される虫は時期によって異なるみたいなので、また行きたいです。
ミルワーム系の奴も食べて見たいんだよなぁ。
おまけ（？）
最後に、豚さんのキ◯タマも食べました。
本当はサオ＋タマを食べて見たかったのですが、サオは売り切れでした。残念！！
味付けが結構濃いめだったので（生姜焼き）、生臭さなどは全然感じず食べられました。食感はレバーに近い感じです。
非常にどうでも良いですが、注文したときに店員さんが「豚タマ一丁〜！！」と言っていて、お好み焼き屋みたいだなと思いました。
虫もキン◯マも、食べる前は少々ビビっておりましたが、意外な発見も多く、行ってよかったと思えるお店でした。
皆さんもぜひお友達と行ってみてくださいね〜。
配列同士の結合操作について
仕事で使って、面白いと思ったので備忘録置いときます。
やりたかったこと
2つの異なる配列を、1つの配列にまとめる。
（apiにpostする配列を作る際に使用しました。）
やり方
やり方を２通り列挙します。spread演算子を最初に使っていたのですが、flatMapの存在を隣の席のエンジニアの先輩に教えてもらいました。
・flatMap
const array1 = ["a", "b", "c"], array2 = ["1", "2", "3"] const mixArray = [array1, array2].flatMap((x) => x) console.log(mixArray) // ["a", "b", "c", "1", "2", "3"]
・spread演算子
const array1 = ["a", "b", "c"], array2 = ["1", "2", "3"] const mixArray = [...array1, ...array2] console.log(mixArray) // ["a", "b", "c", "1", "2", "3"]
objectのプロパティを参照する場合
const userData1 = { name: "nagisa", job: "baker", favoriteFood: [ "bread", "rice", "carry" ] }, userData2 = { name: "tomoya", job: "electrical worker", favoriteFood: [ "ramen", "hamberger", "rice cracker" ] } const mixArray = [userData1, userData2].flatMap((x) => x.favoriteFood) // spread演算子でも同じ結果 // const mixArray = [...userData1.favoriteFood, ...userData2.favoriteFood] console.log(mixArray) // ["bread", "rice", "carry", "ramen", "hamberger", "rice cracker"]
objectのプロパティの配列を参照したい場合でも、このように書けます。
オブジェクトがあるときとないときがある場合
上記のままだと、オブジェクトが空の場合、undefindが入ってしまったり、エラーが起きてしまったりします。
const userData1 = {}, userData2 = { name: "tomoya", job: "electrical worker", favoriteFood: [ "ramen", "hamberger", "rice cracker" ] } const mixArray = [userData1, userData2].flatMap((x) => x.favoriteFood) // spread演算子だと以下のエラーが出る // Uncaught TypeError: userData1.favoriteFood is not iterable // const mixArray = [...userData1.favoriteFood, ...userData2.favoriteFood] console.log(mixArray) // [undefined, "ramen", "hamberger", "rice cracker"]
予期せぬ挙動を防ぐために、オブジェクトが空だった場合は空の配列を指すように指示してあげると幸せになれます。
const userData1 = {}, userData2 = { name: "tomoya", job: "electrical worker", favoriteFood: [ "ramen", "hamberger", "rice cracker" ] } const inputData1 = userData1.favoriteFood || [], inputData2 = userData2.favoriteFood || [] const mixArray = [inputData1, inputData2].flatMap((x) => x) // const mixArray = [...inputData1, ...inputData2] console.log(mixArray) // ["ramen", "hamberger", "rice cracker"]
jsのarray周りのメソッドは知らないの多くて毎回驚きます。
レビューのたびに「こういうのあるよ！」と教えてくれる先輩方に感謝です。
spread演算子はJavaScript Primerで知りました。
１章１章読むのになかなかカロリーを消費します（私が本読むの苦手なだけ）。早く読み進めなくては…。
JavaScript Primer 迷わないための入門書 (アスキードワンゴ)
- 作者:azu,Suguru Inatomi
- 発売日: 2020/06/10
- メディア: Kindle版
㊙︎展 めったに見られないデザイナーたちの原画 に行ってきました
事前予約制とありますが、当日予約も可能なので割と気軽に行けます。
３連休のど真ん中の日曜日に行きましたが、人もまばらで涼しくていい感じでした。
展示は２部に別れており、メインは２部目です。
１部の展示ではデザインフォーラムの歴史を見ることができます。
歴代のポスターやポストカードが展示されていました。 配色など歴史を感じる要素が多かった印象です。
植木鉢が繋がっているイラストが目にとまりました。 （一瞬ランプに見えた。）
1部と2部の間に、展示に参加しているデザイナーさんたちの道具や、制作風景を映したスクリーン展示があります。
部屋の壁、３方向いっぱいに広がる映像は圧巻です。この部屋で映画とか見てみたいなぁ。（写真撮っていいのかわからず、部屋の写真は撮りませんでした。）
2部では、総勢26名のデザイナーの展示がずらりと並んでいます。 デザイナーと一口に言っても、グラフィックデザイナーやテキスタイルデザイナー、照明デザイナーだと多岐にわたる分野の展示を見ることができたのはよかったです。
どの列も、デザイナーさんたちの「巨大なポートフォリオの一部」を見ているような感覚でした。
展示品の一つ一つにつけられた解説のタグ（キャプションというのかな？）も、デザイナーさん自ら書いたもののようで、この作品を捻出していた当時の気苦労など伺い知れました。
博物館や美術館で展示物を解説するタグって、第三者が書くことが多いと思いますが、作った本人が書いているのはなんだか新鮮でした。
また、作品を生み出す過程のメモやスケッチだけでなく、自身の思考整理の過程を展示している方もいました。
私は人が文字を書いているところや、人の手帳を見るのが大好きなので、まさかの手帳の展示に結構興奮してしまいました。
私の好きな本の一つである「センスは知識からはじまる」の著者、佐藤卓さんの展示もありました。アイデアの一つ一つを小さなメモ用紙に貯めているようで、ずらりと並んだそのアイデアの一つ一つに圧倒されました。
小さなサイズのメモ用紙なら、アイデアをカテゴライズしたり組み合わせたりするのに一役買いそうですね。参考になりました。
ロッテのガムのパッケージデザインの展示もありました。 パッケージデザインの申し送りってトレーシングペーパーの上から書くのですね。なんだかかっこいいです。
高輪ゲートウェイ駅をデザインした建築家・隈研吾さんの展示は、模型の下に散りばめられた背景情報の多さに圧巻されました。他の方の展示は、紙に図やスケッチを描いて検討されている方が多かったのですが、この方は文字の量がすごい…。コンセプトを決定するまでの圧倒的なインプット量と、それをいきなり形にするのではなく一回言語化するというプロセスを踏んでいることが伺えます。面白い展示方法でした。
このように、職業の違いによるアウトプットの違いを見られることはもちろん、思考プロセスの参考になるような展示も多く、とても有意義な時間を過ごすことができました。
ちなみに、１時間半の滞在でしたが、運動不足腰痛持ちの私はちょっと腰が限界でした。泣
帰りにおみやげ屋さんで、サインペンを買いました。
このペン、赤いのは学生の頃によく見たことあったのですが、青色って珍しくないですか。
なんだか涼しげでつい手に取っちゃいました。
印刷したデザインを修正とかするときに使おうと思います！
詳細・事前予約は下記サイトからできます
v-date-pickerでinput+カレンダーアイコンを使う
仕事でv-date-pickerを使う機会があったので、苦戦したことなどを備忘録としてまとめます。
v-date-pickerとは？
vue.jsのためのカレンダープラグインです。 インストール方法などはこちらをどうぞ。
今回やりたかったこと
カレンダーを表示させるトリガーとして、inputを使用します。 inputにはカレンダーアイコンを付けて、ユーザに「ここはカレンダーから入力するんだな」と認識してもらいます。
inputをタップするとカレンダーが開く仕組みです。
つまづいた事
カレンダーアイコンを表示するためには、v-date-pickerによって生成されるhtmlにCSSを適応する必要がありました。 しかしinputには擬似要素をつけることはできません。 そこで、v-date-pickerをdivで囲み、そのdivに擬似要素としてアイコンをつける方式をとりました。
こんな感じです。
<div class="datepicker1"> <v-date-picker :mode="'single'" :formats="formats" :popover="{ visibility: 'click' }" class="datepicker__input" v-model="date1"> </v-date-picker> </div>
.datepicker1 { position: relative; &::after { content: ""; display: block; position: absolute; width: 28px; height: 28px; background: url(path/to/icon) center / 100% no-repeat; top: 10px; right: 16px; } }
これで「見かけ上は」カレンダーアイコンを設置することに成功しました。 しかし、カレンダーアイコンはv-date-pickerの親のクラスに付与されたものなので、クリックが効きませんでした。
v-date-pickerによって生成されたinputをクリックするとカレンダーが開きます。しかし、カレンダーアイコンがよそから上に乗っかってきている形になるので、カレンダーアイコンをクリックしてもカレンダーは開かないというユーザビリティが残念な挙動になってしまいました。
解決策
v-date-pickerの中に手動でinputを入れることができました。
<div class="datepicker2"> <v-date-picker :mode="'single'" :formats="formats" :popover="{ visibility: 'click' }" v-model="date2"> <div class="datepicker__input"> <input type="input" :value="date2"> <span class="input-group__date_icon"></span> </div> </v-date-picker> </div>
枠を表示するinputと、アイコンを表示するspanの2つの要素を中に入れたかったのですが、これらを並べるだけだと表示されませんでした。 これらの2つの要素を、divで囲んでひとかたまりにしてあげることが表示されました。コンポーネント的な考えなのだと思います。（多分
ただしこの方法では、v-date-pickerにpropしていたformatsが反映されないため、inputに生の日時情報（Mon Aug 31 2020 00:00:00 GMT+0900 (日本標準時)みたいなやつ）が入ってしまいます。
そこで、v-date-pickerのv-modelにはサーバサイドに渡す形式の変数を置いておき、inputにはその変数をmoment.jsか何かで読みやすくした形式にしてv-on:valueする一手間が必要になります。
例では、サーバサイドに渡す日付をdate2としています。
input内に表示する日付は、computedを用いてdate2をmoment.jsでトリミングしたtrimDate2を使用しています。
これで、見かけ上は読みやすい日時ですが、サーバーサイドに渡す日付はきちんとした形になります。
<div class="datepicker2"> <v-date-picker :mode="'single'" :formats="formats" :popover="{ visibility: 'click' }" v-model="date2"> <div class="datepicker__input"> <input type="input" :value="trimDate2"> <span class="input-group__date_icon"></span> </div> </v-date-picker> </div>
new Vue({ el: '#app', data: { date1: "", date2: "" }, computed: { trimDate2() { if(this.date2 === "") return "" return moment(this.date2).format("YYYY年MM月DD日") } } });
