https://fortee.jp/frontend-conf-hokkaido-2024/proposal/341e5c88-b653-481e-8ef9-7a6cf534d90f

やったぜ！！

カンファレンスへのプロポーザル投稿はTSKaigiに続き2度目。

今回は、カンファレンス初登壇枠が用意されていたこともあり、運よく採択されました。

内容はa11yの話で、フロントエンドという枠組みの中で自身も興味深く学習しているのでいいテーマを選んだなと我ながら感心した。

待ってろ北海道〜

フロントエンドカンファレンス北海道2024 LT採択されました

https://tskaigi.org/

自宅から激チカの中野で開催にも関わらずチケット完売によりオンライン参加。泣ける。

### フロントエンドもバックエンドもインフラも… 全てをTypeScriptで統一したらこうなった！
バックエンドをTS使うのはよく聞くが、インフラ周りもTSとは驚いた。

「ガワをつくらない」で全員でプロダクト開発をするという話をよくするが、言語の統一がそれを実現するための一番の近道であり、フロントエンドがTS主流である以上統一される言語は自然にTSとなっていくのだろうなあという気持ち。

困りごと周りをあまり聞けなかったのでもっと知りたい。

### Prettierの未来を考える
Prettierさんいつもお世話になっております。

PrettierはjsのFormatterとして覇権を握ってあぐらをかいていたがBiomeの登場によってパフォーマンス周りを頑張りはじめた(語弊あり)という話が良かった。

パフォーマンス周りがあまり気になったことがなかったがBiomeに負けずに頑張ってほしい。

### Documentation testsの恩恵
フロントエンドのテスト、サボりがちの人生から抜け出したい。

utility的な関数だとJSDocとしてテストが書かれているとシュッと書けて便利そう。

本業のプロダクト開発でもフロントエンドのテストコードが不足しがちで課題感があるので導入してみよう。

### まとめ
何はともあれオフライン参加したかった。次のカンファレンスはすぐチケット申し込もう。

TSKaigi 2024に参加しました

に参加しました。

https://findy.connpass.com/event/312625

Tailwind、個人的に好きではあるもののプロダクトの導入は知識が必要となったりするのでやっぱり難しいよなあという気持ち。

Kuma UIの製作者さんのお話を聞いて、自分も何か作ってみたいと思った。

エンジニアリングも好きだけど、CSSが一番好きなのでこの分野で何かしら影響を与えられるものを作りたい。

もっとCSS学ぼう。

フロントエンド技術選定 ~ゼロランタイムCSS in JSとTailwind CSS編~

初カンファレンスプロポーザル、落選。

内容はvanilla-extractに関する入門的なものだったのでもう少し経験をうまく交えた内容にしたらよかったかなあという所感。

プロポーザルってなぜ落ちたのかのフィードバックがないので、勘所を掴むまでは苦戦しそう。

とはいえ内容が悪いというよりも周りの方がたまたま興味を惹く内容であったり、たまたま同じような内容が重なったりといった要因もあるとは思うので今後も積極的に投稿していこうと思う。

今年の目標、カンファレンス登壇！

TSKaigiのプロポーザル落ちた

https://findy.connpass.com/event/306714

App Routerの活用についての話が気になったので参加。

どこも手探りながらプロダクトに合った活用方法をやっていっているんだなあ。

時代の移り変わりが早いと言われるフロントエンド領域で、こういう新しいものに対してベストプラクティスを探していく作業が好きだったりする。

Remixの話もあったが、まだ触ったことがないので何かつくりたい。

あと、平日のランチタイムのイベントご飯食べながら聴けるのでちょうどよい。

フロントエンドの技術選定 ~2023を振り返る~ Lunch LTに参加しました

https://findy.connpass.com/event/306774/

catnoseさん、開発者としてとても尊敬しています。

やはり個人開発のアイデアは自身の小さな課題から生まれるもので、開発のモチベーションの保ち方など参考になるお話が多かったです。

個人的にはアイデアはあるもののどうしても仕事をしながら個人開発を進める時間を取るのが難しいと感じてしまうことが多く、最近はなかなかなにもできていないですが、これをきっかけにやる気を出していきたいです。

はやくcatnoseになりたい。

「どうやって開発したの？」開発者catnoseさんにきいてみたに参加しました

本年もお世話になりました。

## 今年の抱負を振り返る
https://nacal.io/blog/oNlt6iO7r2ZJN1cMqp0qF

「やりたいと思ったことをやる」が抱負だったらしい。

結局1年を通して何がやりたかったのかは一言だと言い表せないが、それなりにやりたいことはやれていたと思う。

逆にやりたくないことをやらなかったかと言うとそういう訳でもなく、やりたいことに追われてそれはそれで大変だったのでこの辺は来年以降バランス取っていい感じにやっていきたい。

## 仕事
社会人2年目が終了。

新人や新米は自衛のための前置詞になりがちなので自称するのをやめた。

全体としては、色々なことを任されたりチームを牽引していく立場になりつつあり、個人的には得意ではなかったリーダーシップの発揮や主体的な行動をより意識していかないとな1年だった。

インターンシップや新卒パートナーのメンターをする機会も何度かあり、今後のキャリアを考えると誰かを成長させる力は必要なので自信の力を付けるいい経験になった。

その他にもグループの新人賞にノミネートされたり、プロダクトとして大きな新機能の開発に携わったりと、企業でエンジニアとして働いているからこそ経験できる喜びを1年目に比べてより多く感じることができた。

## 日常
特に大きな変わりはなく元気に生きている。

1つ挙げると大好きだったゲームを全くやらなくなった。

これはやりたいことをやっていた結果、ゲームの優先度が下がったというかそもそもやりたいと思うことが減った。

もしかしたらどハマりするようなゲームに出会えなかった1年だったのかもしれないのでなんかやりたい。(オンライン対人はきっとダメ)

あとは、どうやら健康が危ういそうなので気をつけたい。

## まとめ
このブログを開設したのがちょうど1年前で、そう考えるとあっという間だった。

大した内容ではないがこの記事含めて18本記事を書いていたらしい。

来年は、と書こうとしたけど来年のことは別で書く多分。

2023年を振り返る

https://front-okinawa.connpass.com/event/299738/

短めのセッションが次々とあるタイプのカンファレンスでした。

途中で抜けて聞けなかったものもあったのですが、いくつかをピックアップします。

## フロントエンドエンジニアも知っておきたい HTTP/3 で変わること
プロトコルについて詳しくない自分でも理解できるとても分かりやすい内容でした。

自分が参加してきたフロントエンドのカンファレンスではなかなかこういった話を聞く機会がありませんでしたがフロントエンドエンジニアとしては知っておきたい内容であったので今回知ることができて良かったです。

QUICによって、通信環境が悪い人たちの体験が向上する点は時代の変化にうまくマッチしているなと感じました。

## 進化したWeb技術でPWAをネイティブアプリに近づける
まさに最近、PWA今はどれくらいやれるんだろうを調べていたところだったのでとても興味深い内容でした。

自分がPWAを知った頃と比較すると、さまざまなWeb APIによってネイティブアプリに近い体験ができる部分は増えているものの、まだまだ対応ブラウザの状況などは不完全であるということを認識できました。

PWAについてはこれからも動向を追っていきたいです。

## GraphQLクライアントの技術選定
Fragment Colocationの観点からのGraphQLクライアントの選定、めっちゃ参考になりました。

Relay良さそうだなと思いつつ触ってこなかったので、次何か作る時は使ってみようという気持ちになりました。

## なぜコピペで利用するコンポーネント集を採用するのか？
headless UI Component Libraryで止まっていたので、shadcn/uiなどの存在を知らなかったです。

個人のスキルセットに関わらず一定のクオリティを維持したComponentを作成できるという点でHeadlessなライブラリをプロダクトに採用するのはアリだなあと思っていたのでいい参考になりました。

## まとめ
全体的に、これちょっと気になってて〜な話題を詳しく聞くことができてとても良かったです。

配信の音声やスライドが若干見にくかったのが気になったが、ポジティブに捉えるとオフライン参加の機運が高まったので遠方のカンファレンスでも思い切って現地にいきたいと思いました。

フロントエンドカンファレンス沖縄2023に参加しました

https://fukuoka-a11yconf.connpass.com/event/294555/

アクセシビリティカンファレンス！！

オフライン参加しようとしていましたが迷っていたところ参加上限になってしまい泣く泣くオンラインで視聴しました。

いくつかセッションをピックアップします。

## 「伝わる」を拡張するアクセシビリティ
朝イチのセッションということもあって、アクセシビリティの定義についてからとても分かりやすく整理してくれていてスムーズに入れました。

自分の中でも、何をすればいいか分からなかったり、その必要性を言語化レベルに落とし込むことができない葛藤を感じることが多々あるので、改めてなぜやるべきなのか？を認識することができて良かったです。

## 「違う人生を生きる人と一緒に働く」ということ
10人のメンバーがおり、そのうちの7人が聴覚障害者・1人が盲ろう者という環境で「違う人生を生きる人と一緒に働く」ということについてのお話でした。

そういった環境に自分がいないのでなかなか知ることができない意識のことなど、貴重な内容を拝聴することができました。

アクセシビリティを考えるのは必ずしも開発においてのみではなく、チームビルディングや組織づくりにおいても必要なことであると感じることができました。

## デジタル庁でのアクセシビリティへの取り組み ―誰一人取り残されない、人にやさしいデジタル化をの実現に向けて―
デジタル庁がアクセシビリティへの取り組みをガンガンやっていることは知っていましたが、直接聞ける機会はなかなかなかったのでとても面白かったです。

toBや行政のシステムではtoCのプロダクトと比較してよりアクセシビリティをやっていかないといけない立場であると認識しながら、toCでも同様に当たり前に改善をしていけるようになっていかないといけないと感じました。

## まとめ
初めてのアクセシビリティカンファレンス、どれも普段はなかなか聞くことのできない内容でとても満足度の高い1日でした。

来年には名古屋での開催を予定しているようなのでとても楽しみです。


アクセシビリティカンファレンス福岡に参加しました

https://zozotech-inc.connpass.com/event/297226/?utm_campaign=event_participate_to_follower&utm_source=notifications&utm_medium=twitter

前回に続きまたまたWebフロントエンドのMeetupがあったのでオフライン参加してきました。

https://nacal.io/blog/5ZSvrssj6IAfxDR9jZ5Qeh

## ZOZOTOWNにCSS in JS（Emotion）を導入して1年後の状況

以前からZOZOTOWNフロントエンドリアーキテクチャでEmotion導入をしていることは知っていました。結局どんな感じなの？を社内アンケート等交えて発表してくださりました。

自分としてはTailwindを趣味で好んで使っているくらいでほとんどmodulesで開発することが多いので、実際に大規模プロダクトでCSS in JS使った知見などを得られて良かったです。

## React でコンポーネントを利用したテストをゴリゴリ書く
テスト、正直何が正解かわからんなぁ状態だったのでとてもいいお話を聞くことができました。

コンポーネントの肥大化によるテスト対象の不明さは課題を感じることが最近多く、これを
一つの指針として、ディレクトリ構成なども見直したいと思いました。

## ゼロから始めるアクセシビリティ啓蒙活動
a11yを推進していく立場として、何からやっていけばいいのかまさに迷っていたのでとても参考になりました。

前回のMeetupでもリアーキテクチャを進めるためには仲間づくりや上長を納得させるだけの言語化が必要であるというような内容があったように、なぜやらないといけないのかを自分の中で整理して、周囲から巻き込んでいくのが第一歩であると改めて認識することができました。

## 現代のReactivityとSvelteの魔法
Svelteについて、正直ほとんど触ったことがなかったので、知らない事ばかりで単純に面白かったです。

自分は単純にエコシステムの大きさ=正義っぽい視点でReactばかり利用してきましたが、技術そのものの違いについて理解した上で選定するのも大切だよなあとしみじみ感じました。

## まとめ
どれも違った内容でありつつ興味深いものが多く、改めてフロントエンド分野の奥深さを感じることができました。あと珍しく一人でオフライン参加したので不安でしたが、懇親会でも色々な方とお話しすることができてとても楽しかったです。

ZOZO Tech Meetup - Webフロントエンドに参加しました

https://cssnite.doorkeeper.jp/events/163736

21:00-29:00でひたすらマークアップについてワイワイするイベント。

直前に開催を知りましたが、駆け込みで参加し、無事に完走しました。

いくつか面白かったセッションをピックアップします。

## グラフィックソフトから書き出すだけじゃない SVGを用いたグラフィック表現
SVGを使ってグラフィック表現ができること自体初めて知りました。セッション内でもあまりSVGについての記事がなくMDNくらいだと言っていたので自分でも色々試してみてアウトプットしてみたくなりました。

登壇者の方の記事もあるので貼っておきます。

https://qiita.com/xrxoxcxox/items/3dac5d15070bea25b79f

## 実践！ライブコーディングでアクセシビリティ改善
ライブコーディングでa11y改善の過程が見れたのが最高でした。

どうやって改善すればいいの？の部分よりもそもそもこういったことを考慮しないといけない、の視点の部分が特に参考になりました。

結局a11yは知識や経験で、改善の質も比例して上がっていくものだなと感じました。

## レスポンシブウェブデザインだけじゃない、メディアクエリの活用方法
レスポンシブウェブデザインだけじゃないの!?

any-hoverまさに今日から使えるだったので、使っていきたいと思いました。

https://developer.mozilla.org/ja/docs/Web/CSS/@media/any-hover

CSSは奥が深いしどんどん進化していくので楽しいですね。

## 「リンクの中にあるリンク」「ボタンの中にあるボタン」を正しく実装する
わーこれどうやってマークアップしようランキング第一位の「リンクの中にあるリンク」「ボタンの中にあるボタン」について、詳細に聞くことができて良かったです。

堅牢でインクルーシブなUIコンポーネントを自前で実装できる力が欲しい。

ここら辺が参考になりそうとのこと。

https://inclusive-components.design/cards/

## Figma for VS Code で爆速コーディング
なんやかんやFigma for VS Codeを食わず嫌いしていたところがあるので、実際に便利そうな機能をたくさん知れて良かった。

何より2024年から有料とのことなので、今のうちに急いで触っておかないとという気持ちになった。

## まとめ
後半割と記憶が曖昧な部分もあったが、フォローアップの資料もあって親切でした。

いつか朝までシリーズをオフラインで完走してみたい気持ちになりました。

朝までマークアップに参加しました

https://twitter.com/_nacal/status/1673497209961316352?s=20

宣言通りやってきました。

ISUCON自体はほぼ触れたことがない分野だったので、ちょうどいい機会と思い参加しました。
内容としてはISUCONの問題を会社横断で2人1組のチームを組んで1日取り組むというもの。

やったこと
- とりあえずtop。とりあえずMySQLチューニング。
- スロークエリ出してindex貼ったらスコア爆増きもち〜！！
- お、N+1もいっぱいあるやん、これも直してスコア上げまくるぞ〜
- うん、大変な割にあんまりスコア上がらないな、あぁ...あぁ...
- わぁこれも直したいな、あぁ時間が...

こんな感じであっという間に終了の時間になり、ほとんどMySQLのチューニングしかしてませんでした。

反省としてはindexを貼った時点でMySQLが既にボトルネックではなくなっていたのにその後もずっとMySQLしか見えていなかったことです。定期的な計測大事。

あとは普段から触れていない分野なのでスロークエリのログ出力するだけでも手こずったりしたのが悔しい。

ISUCONは方法を知っているか知らないかで大きく違うな、と思うことが多々あったのでとりあえず本買いました。復習しよう。
https://www.amazon.co.jp/gp/product/B0B1Z9ZMY6/ref=ppx_yo_dt_b_d_asin_title_o00?ie=UTF8&psc=1

基礎的な知識もほぼない状態だったので何もできずに終わっちゃったらどうしようなど不安もありましたが、サポートの体制が万全だったので安心して進められたこと、何より「なんかよく分からんISUCONというやつ」が、「なんか楽しいやつ」になったのが良かったです。

次はもっと強くなってISUCONに参戦するぞ！


CTO協会 合同ISUCON研修に参加しました

正式には「ZOZO Tech Meetup〜ZOZOTOWNフロントエンドリプレイスの事例紹介〜」です。(OGPをちゃんとしてない都合上省略しました)

https://zozotech-inc.connpass.com/event/283986/

会場はヤフー株式会社に初訪問でした。デカかった。

https://twitter.com/_nacal/status/1666747775915266048?s=20

内容はZOZOTOWNのフロントエンドリプレイスについてということで、エンジニアとして働きはじめたからこそ興味を持てたテーマだったなぁと思います。

## Next.js を選定した ZOZOTOWN のフロントエンドリプレイス、その全体像
ZOZOTOWN開発本部 ZOZOTOWNWEB部 バックエンドリプレイスブロック[@takewell_](https://twitter.com/takewell_)さんのセッション

ZOZOTOWNがフロントエンドリプレイスに至るまで、なんのためにやるのかなど詳細に知ることができました。

Next.jsを選定した理由は、開発生産性やパフォーマンスの面もそうだけど人材採用のポテンシャルや将来性の面は言語化できていなかったので確かにそうなだぁとなった。

あとは、リプレイス専門のチームが組まれていて、2025年までロードマップが敷かれているのは流石だなぁと思いました。

@[speakerdeck](01fac190712b4a09a1c46961870275b4)

## オンプレミスの運用からクラウドの運用へ 〜SREのフロントエンドリプレイス裏側〜
技術本部 SRE部 ZOZOSREブロック[@takezyo07](https://twitter.com/takezyo07)さんのセッション

新卒未経験からSREで沖縄在住であだ名があきちゃんさん!?(僕が今担当しているサービスのSREを全員融合させたようで驚きました)

SREチームから見るフロントエンドリプレイス、なかなかない内容なので興味深かったです。

特に一気に全ての画面をリプレイスできるわけではないのでインフラも考えること多いよなぁと思いつつ、ほぼインフラ未経験の僕でもちゃんと理解できる分かりやすいセッション内容でとても助かりました。

@[speakerdeck](95bd61f5cb9d4f9390da7340f614e12f)

## フロントエンドリアーキテクト2023
技術顧問[@yosuke_furukawa](https://twitter.com/yosuke_furukawa)さんのセッション

ZOZOTOWNに限らず、さまざまなプロダクトのリアーキテクトについてのお話を聞くことができました。

セッション内で「レガシーソフトウェア改善ガイド」が何度か紹介されており、良さそうだったから絶対買って読みたい。

リアーキテクトアンチパターンは全て思い当たる節がありすぎてグサグサ刺さったのでスライド見てみてください。

特に、リアーキテクトと共に既存機能のエンハンスを止めてはいけないという点は、ビジネスとしてサービスを提供する上では大切な観点だと改めて思うことができました。

@[speakerdeck](33b9c39e796f4a51b9b75eccbca972b0)

## パネルディスカッション
技術的制約なかったらどんな技術使う？とか、Vercelの新機能色々出てるけど、どうなん？とか参加者からの質問を募集しながら、用意してくださった美味しいご飯を食べながらワイワイしていました。

フロントエンド周りは特に意識的に日頃から情報収集をしているので、どの話もわかる〜となり楽しかったです。

印象深かったのは、リアーキテクトを行うために必要なものは「熱意」「環境」「後押し」であるということ。

確かにZOZOTOWNのリアーキテクトからはその全てが揃っていると感じることができたので余計に説得力がありました。

やるぞ！!

## 懇親会
最後は参加者との懇親会でした。

限られた時間で他社のエンジニアの方々と交流しましたが、どの企業もやはりフロントエンドリアーキテクトを試行錯誤しながらやっている模様。

こういうオフラインイベントで交流するの定期的にやって、知見だけでなくリアルな状況も把握していきたい気持ちです。

最後に、地味に嬉しかったのは全てのセッションスライドが公開されたことと、匿名質問サービスを導入していたことで参加者が気軽に質問できていたことはめちゃくちゃいいなと思いました。さすがの一言です。

また次の開催があれば、別の分野でも参加してみたいなーと思いました。


ZOZO Tech Meetupに参加しました

このブログの一覧から個別ページの遷移にView Transitions APIを入れてみた。

https://developer.mozilla.org/en-US/docs/Web/API/View_Transitions_API

![View Transitions APIデモ](//images.ctfassets.net/wbigkalvhmt9/7zFETir7mJuPLXY69Om8nh/d4bcd7c908378d556fa8d8e73ee0e5fe/chrome-capture-2023-5-3.gif)

Nextでの実装もシュッとできていい感じになってくれたので気に入ってる。

機能的には遷移前と後の要素をAnimationでそれっぽく見せているだけなので、遷移後のテキストをinlineにしないと変な感じになるのだけ注意。

早く全ブラウザに対応してほしい。

View Transitions APIがイケてる

5/11-13 長野県松本市で開催されたRubyKaigi2023に参加しました。

https://rubykaigi.org/2023/

## なんで参加したの？
去年のRubyKaigiに行っている同僚を見て楽しそうすぎて来年こそは絶対に行くとずっと思っていました。

この、「楽しそう」とは決して遠くへ行って観光したり美味しいものを食べたりすることではなく　(もちろんそういった側面もありますが)、Rubyコミュニティの一員として最新の技術をキャッチアップしたり、色々な人と関わってワイワイ交流することが「楽しそう」すぎて2023こそは初参加をしてやるという強い気持ちがありました。

Matzもどこかで言っているように、Rubyは楽しむために設計された言語であり、Rubyを愛用する人々は本当に楽しんでいるのか、この目で直接確かめる使命がありました。

## 目的
RubyKaigiに参加しようと思った動機は前述の通りで、会期中の目標をいくつか掲げました。

- Rubyコミュニティを肌で感じる
- 技術的知見をたくさん持って帰る
- 積極的に他社エンジニアと交流する
- Matzと写真を撮る

https://twitter.com/_nacal/status/1651536889239982081?s=20

## 参加してみて
> 「思ってた4倍楽しい」

相当期待を抱いて参加しましたが、余裕で上回ってしまうくらい楽しかったです。

まず、オフラインでのカンファレンスに参加すること自体がほとんど初めての経験でした。

学生時代にも学会などいつくか参加していましたが、コロナ禍だったということもあり、全てオンラインで行っていました。

そんな中で、うわ〜ここにいる人みんなRubyistなのか〜という感覚は奇妙さすら感じてしまい、言葉にできない高揚感をずっと抱いていました。

各セッションも専門性が高く、正直「アーナルホドハイハイ完全理解。」状態になることもちらほらありましたが、どうやらRubyKaigi初参加の洗礼らしく、むしろ次こそはという気持ちでモチベーションが爆上がりしまくっていました。

何より、昼食やDrink　Upでの様々な人との関わりこそ、オフラインの開催でしか味わえない貴重な経験であり、改めて参加することができて本当に良かったという気持ちでいっぱいです。

今年も何かの間違いで参加していなかったらきっと今頃旅立っていたかもしれません。

## 目標達成状況
### Rubyコミュニティを肌で感じる
めちゃくちゃ感じられました。

会場内全員がRubyistなのはもちろん、夜どこを出歩いていてもそこら中にRubyistがたくさんいて休む間もなく肌で感じ続けられました。

生憎、他の言語や領域の特性をまだ深く知らないのでRubyistはこういう人たちというのをうまく形容できませんが、とにかくRuby好きなやつに悪いやつはいないよと孫に語り継ぐことはできます。

### 技術的知見をたくさん持って帰る
これは正直にいうと「△」かなという感じです。

もちろん学んだことはめちゃくちゃあったのですが、Rubyや英語の能力が不足していて、「俺がもっと強ければ...!」になることが多々あったのが悔しいです。

興味はあるけど英語のセッションだからなぁで躊躇してしまうのってすごい勿体無いな〜と思ったので、マジでやるぞ。

### 積極的に他社エンジニアと交流する
大交流祭でした。

各社若手シャッフルランチを開催していただいたり、Drink Upで色々な企業の方とお話ししながらうまい酒と料理を食べてコミュニケーションと体重を貯金することができました。

むしろこういう機会でなくても普段関わらない人たちと交流して刺激を受けることは定期的にやっていきたいのでいつでも誰でも誘ってください。フットワークの軽さには定評があります。

### Matzと写真を撮る
やったぜ

![Matz&nacal](//images.ctfassets.net/wbigkalvhmt9/5XOgkKxFDzl859aeJi9toz/8c8e170d8ff686d83237b6183b00bfe7/DSC00529.jpg)

## これからのこと
RubyKaigi2023を終えて、間違いなくRUby愛やモチベーションは上がりました。

何より、楽しい開発体験は言語の特性のみでなくコミュニティの力も大きいということを改めて知ることができました。

2022年の自分に、来年になったら「やっぱり楽しかった」になっていると教えてあげたいです。

そして、2024年にRubyの理解を深めた自分が、2023年の自分に「もっと楽しかった」と言えるようにこれからもRubyコミュニティの一員として頑張っていきたいです。

https://twitter.com/_nacal/status/1657761931791564800?s=20


RubyKaigi 2023に参加しました

バージョンアップによって利用方法が変更になっていました。

https://github.com/zenn-dev/zenn-editor/pull/420

詳しい修正方法はREADMEに書いてくれている通りですが、zenn.dev と同じ埋め込み要素を使用するためには埋め込みサーバーのOrigin URLを embedOriginで指定してあげないといけなくなったよう。

```js
import markdownToHtml from 'zenn-markdown-html';
const html = markdownToHtml(markdown, {
  embedOrigin: 'https://embed.zenn.studio',
});
```

なお、Zennが提供してくれている埋め込みサーバーを引き続き利用する場合には**非商用**の場合のみ可とのこと。

個人開発の小さいアプリケーションでもちゃんとライブラリアップデート業しろ問題だった、気をつけよう。

zenn-markdown-htmlで埋め込み要素が表示されない場合は

悲しいお知らせですが、先月から始まった「1ヶ月1万円読書生活」をやめました。

## やめた理由
3月に1万円分購入した書籍は半分くらいしか読み終えられませんでした。

要因としては、単純に読書に時間を充てきれなかったこと、そもそも技術書のコスパが良すぎること、ラジオが好きすぎてずっと聞いてることなど様々です。

あとは、読書以外にも日常的な情報収集は意外としているんだなと気付きました。

読書に全振りをするせいでインターネットでの情報収集が疎かになってしまうのも良くないかなと思い、ちょうど良いバランスでできる塩梅を探っていきたいと思います。

## 今後の方針
先述の通り、4月からは読書をやめようというわけではなく気になった本は積極的に購入して読んでいこうと思います。

元々積読をしないために購入した本を公開しておこうという目的ではあったので、毎月購入した本はここで公開する予定です。

また、読書記録としてはブクログを始めたので読了はこちらに記していこうと思います。

何にせよまだ2ヶ月目なのでまた方向転換を視野に入れて緩く進めていきたいと思います。

## 4月の購入本

### ちいさくはじめるデザインシステム
https://www.amazon.co.jp/gp/product/B0BXD2NRHF

今でかめの個人開発をしているので、そこでいい感じのちいさいデザインシステムをやっていきたい気持ち。

あとは単純にmasuPさんのファン。

### AWSで実現するモダンアプリケーション入門 〜サーバーレス、コンテナ、マイクロサービスで何ができるのか
https://www.amazon.co.jp/gp/product/B0BRPRQFMH

AWSはある程度触ったことがある程度で、利用シーンも偏っているのでこれ読んでDVAくらいは取っておきたい気持ち。


読書したい生活【2023.04】

今日はBuySell Technologiesさん主催のリクルート × BASE × バイセル 【第1回フロントエンド勉強会】 React & GraphQLに参加してきました。

https://buysell-technologies.connpass.com/event/276135/

帰って参加レポを書くまでが勉強会！なので書きます。

## Reactのコンポーネント設計
WF to Codeでのコンポーネント設計しっかり手順組んでやっていくというお話。

具体的には、コンポーネント分割→ツリー図→IF設計という流れ。

登壇スライドの中でも例とともにこんな感じというものがあったのでめちゃくちゃ分かりやすかった。

backendだとシーケンス図書いて〜とかで割としっかりと設計していたけど、Reactのコンポーネント設計って頭の中でなんとなく組み立ててぽや〜と進めちゃっていた節があったので、段階的に設計してから手を動かすとカオスを生むこともなくて嬉しい。

早速次機会があればやってみようと思った。

## カートUIのフォーカスを可視化する
BASE株式会社さんのカートUIのa11y改善のお話。

safari...!!のくだりでは現場にいた全frontenderが心の中で頷いていたはず。

自分のチームではデザインエンジニア的なポジションの方が主体的にa11y進めてくれていたりするので、そういったポジションがないとデザイナーエンジニア間でのコミュニケーションは課題になってくるよな〜と改めて認識した。

あとは最近jsx-a11y導入して、hrefのないAnchorタグめちゃくちゃ怒られてたな〜という記憶があるのでa11yやっていかねばという気持ちになった。

ちなみにWebアプリケーションアクセシビリティの書籍買ったもののまだ全然読めていないので読まないと...

## GraphQLでのキャッシュ戦略
GraphQLのキャッシュを種類に分けていい感じに活用しようやというお話。

クライアントサイドでのキャッシュ、うまく活用したいけどなんとなくしか理解できてなくてう〜んという状態だったので、キャッシュ正規化の流れやどういった場面でキャッシュが活用されるのかから知ることができてよかった。

キャッシュを汎用性やデータの大きさで3種類に分類することでスコープを分けてキャッシュを有効活用できるという、なんとなくこうあるべきという形が今の段階で認識できた気がする。

Apollo Clientも触りながらなんとなく使ってる節があるので改めてちゃんと理解しないとな〜という気持ち。

## GraphQL Gatewayを実質無料で手に入れる
「マイクロサービス好きですか？」

frontenderに起こりがちなマイクロサービスにしたものの通信複雑になるのはどうすんのよ問題を実質無料(実装コスト)で手に入れるためのお得情報。

GraphQL Gatewayパターンという考え方だと、各マイクロサービスのschemaをいい感じに合体させていい感じにクライアントサイドに返すことができる。

GraphQL Gateway Framework(schema stitchingとかApollo Federation)正直全然触ったことなかったので個人開発でなんかいい感じのマイクロサービスつくりながら触ってみたい気持ちになった。

また、「そのコードは誰がオーナーシップを持つのか？」辺りの話はチーム開発で確かに重要な論点だな〜と感じた。

## 感想
夏に上京をしてからオフラインで他の企業に行って勉強会に参加すること自体初めてだったけど、どのセッションもめちゃくちゃ勉強になったし、参加者との懇親会でも色々と交流ができて楽しかった〜(お寿司、ピザ美味しすぎて泣いた)。

個人的な反省点としては、他の企業のエンジニアの方に弊社のあれこれについて聞かれた時、「まだチームが変わってそんなに経ってないんですが〜」とか、「最近backendの方が触ってて〜」とか保険かけたマイナスな前置きから曖昧な回答になっちゃいがちだったのがダメだったなーという気持ち。

ただ周囲から学ぶだけでなくお互い良い影響を与えられる存在になれるよう、自分が関わっているプロダクトについては何でも聞いてください！と自信持って言えるくらい完全理解しておかないとなと思った。

書き殴りになりましたが、これにて無事に勉強会を終了です。


リクルート × BASE × バイセル 【第1回フロントエンド勉強会】に参加しました

3月から唐突に1ヶ月1万円分の本を買って読む(仮)生活を始めることにしました。

経緯は、2月のマネフォMEの「教養・教育」の予算が1万円あるのに全く使っていなかったのでちゃんとお金を払ってインプットしないとな〜と思ったからです。

さっき思いついたので何も決めておらず技術書以外にもポチりまくったけどとりあえず購入品を列挙します。

## Webアプリケーションアクセシビリティ──今日から始める現場からの改善 WEB+DB PRESS plus
https://www.amazon.co.jp/gp/product/B0BTLCDDK5

これは絶対に買おうと思っていたので即ポチ。

1ヶ月1万円本買って読み切ると宣言しきれなかったのはこの本の882ページという重みに圧倒されたからという話もある。

少しずつ読み進めていきたい。

> 3960円

## WEB+DB PRESS Vol.133
https://www.amazon.co.jp/gp/product/B0BV6DY5GJ

TypeScript、Ruby、Tailwind、Radix UIと、もしかしてnacalのために特集組んだ？と思えるくらいの内容だったので購入。

これも雑誌感覚で読もうとすると意外とボリュームあるので少しずつ読む。

> 1628円

## 新 科学する麻雀
https://www.amazon.co.jp/dp/B09YLZWXBM

同僚が人生に影響を与えた10冊に選んでいたのでポチ。

僕の麻雀人生を変えてくれることを期待。

> 1602円

## 金色のガッシュ！！ 完全版 1-16
https://www.amazon.co.jp/gp/product/B07H3PWN17

人生で一番好きな漫画。実家に多分コミックスあるけどめっちゃ安かったのでまとめポチ。

1-6巻はPrime Readind(?)で0円、7-16巻はセールで330円だった。

電子書籍(ここまで全部kindleで購入)で漫画を読んだことがないのでどんな感じかも確かめたい。

> 3300円

## 合計金額

> 3960 + 1628 + 1602 + 3300 = 10490円

めっちゃピッタリ。

## さいごに
ここで買ったものを先に紹介しておくことで積読対策になるんじゃないかと思ってます、なので定期的にあの本どうだった？と話を振ってください。

あと、小説とかビジネス本とかもチャレンジしたいのでドシドシおすすめしてください。

1ヶ月1万円読書生活【2023.03】

会社のslackで利用するための簡単なslack botを開発しようとしていたが、完成となった段階で実現できないことが分かった。

内容としてはslack botのスラッシュコマンドを実行すると簡単なscriptを実行する程度のものだが、GASがslack botからのアクセスを受け取るためにはデプロイ時にアプリケーションにアクセスできるユーザーを全員に設定しなければいけないらしく、G Suite設定で自分か企業のユーザーしか選択できないようになっており、slack上でスラッシュコマンド実行時にdispatch_failedのエラーが発生してしまった。

![GASのデプロイ画面](//images.ctfassets.net/wbigkalvhmt9/56nKONoIMG33L93fMNvOy6/e94f73d49a52154087183b7fe7daea0a/____________________________2023-01-30_23.46.14.png)
*個人アカウントでは全員への公開設定がある*

個人アカウントでデプロイすれば実行はできそうだがセキュリティ的な懸念点もあるので一旦他の方法を検討しようと思う。

https://www.kemomimi.dev/googleappsscript/1763/


G Suiteの設定によってはGASでslack APIからのアクセスを受け取れない

ipadのchrome appでのみ新規タブで開いたページの最下部に100vhくらいの余白が生まれてしまう現象を確認した。

自分のページのlayout周りのCSSをイジっていた時に気づいたので、「なんか変なコード書いちゃったか〜」くらいに思っていたけど別のページでも再現することを確認して「chrome側の問題か〜」になり、一旦googleさんに報告しておいた。

スクロールのないサイトでこれになってるとなんかダサいのでなるべく早く直してほしい。


ipadのchromeだけなんかおかしい

あけましておめでとうございます(現在の時刻 1/3 22:15)。

俺たちのお正月はまだまだ終わらないので、書きます。

## 抱負
> やりたいと思ったことをやる

2023年はやりたいと思ったことをやりたいと思います(?)。

そのやりたいことって具体的になんやねんという話ですが、現時点で決まってないというよりは決めないようにしました。

新年に「今年はこれをやるぞ！」と決めてしまうと、何か新しくやりたいことができた時にそれに取り組む足枷になってしまうんじゃないかなぁと感じてしまいます。抱負ってそういうもんだとは思いますが。

なので、今年はやりたいと思ったことをやりたいと思った時に躊躇せずやっていける年にしたいなぁと思います。

仕事においてはキャリアのVSOPにもある「バラエティ」を広めるための期間として色々なことに手を出し、プライベートでも2022年ではやりたいけどなかなか腰が重くてできなかったことももっとカジュアルにやっていきたいです。

https://zenn.dev/nacal/articles/87cec389d726f5

とりあえず、2023年の年末に「今年は色々やりたいことができたなぁ」と思えるように頑張ります。

## 今年の漢字

![書き初め「恣」](//images.ctfassets.net/wbigkalvhmt9/2s4dtFULQFx8zEpQ9sfw0S/3a9c439fd20290cea4ac36d092192726/____________________________2023-01-03_22.25.09.png)
*今年の漢字「恣」*

これで「ほしいまま」って読むらしい。いい漢字ダァ。

[\#書き初めオンライン](https://kakizome.online/)

2023年の抱負

もうとっくに2023年ですがせっかくなので振り返ります。

## 変化
2022年は変化の年でした。

長い学生生活を終えて新卒で働き始めたこと、24年住んだ大阪の実家を出て東京で一人暮らしを始めたこと、人生において割と大きい生活の変化がありました。

環境の変化には割とすぐに適応できるタイプだと勝手に思っていて、色々大変なことはあるけどまぁそういうもんでしょ精神でなんとかやりきりました(別に辛いことがあった訳でもない)。

個人的には一人暮らしを始めたという変化がとても大きく、「なんでも自分でやらないといけない」というプレッシャーよりは「なんでも自分の好きにできるんだ」という希望に溢れていました。

なので、今は特に不安や不満はなく、楽しく暮らせています。

## おもろかった
2022年、おもろかったです（？）。

はてなブログで毎月「今月のおもろかった」をひそひそと書いていました。

https://nacal.hatenablog.com/

毎年何か一年やり切ることを決めていて、2022年はおもろいをインプットしまくろうということになっていたのでおもろそうなことには敏感な一年でした。

ここにまとめているのはメディアのおもろかったですが、私生活でもおもろかったことはたくさんあって、それも一年の中で「変化」がたくさんあったからなんだろうなぁと思います。

## まだまだやれそう
2022年、特に大きな後悔もなくそれなりに良い年になったとは思いましたが、まだまだこんなもんじゃないだろという気持ちもあります。

2022年は、2023年以降に更なる飛躍をするための準備期間だったということで正当化して、学んだことや身につけたことをより磨いていきたいと思います。

思わず抱負的なことまで書きそうになってしまったのでこの辺で一旦やめさせてもらいます。

## まとめ
全体的に見出しが雑すぎてびっくりしました。

でも、何も考えずにゆるく書けることが大型プラットフォーム上のブログではないことのメリットだと思うのでヨシとします。

では、2022年ありがとう。

### おまけ
「変化」の年だった2022年はTwitterのアイコンもたくさん変わっていました。

最新のサンノさんに描いてもらったアイコンはめちゃくちゃ気に入っているので金髪坊主にイメチェンでもしない限りはしばらく変えないと思います。

https://twitter.com/_nacal/status/1389952787849433100?s=20&t=s6TbqicgDKI0HUyzBXOZ_g

https://twitter.com/_nacal/status/1489880231389241344?s=20&t=s6TbqicgDKI0HUyzBXOZ_g

https://twitter.com/_nacal/status/1530633316491153408?s=20&t=s6TbqicgDKI0HUyzBXOZ_g

https://twitter.com/_nacal/status/1584897638914461697?s=20&t=s6TbqicgDKI0HUyzBXOZ_g

2022年を振り返る

あけましておめでとうございます。

2023年の抱負を大晦日にぼやっと考えていたのですが、もっとアウトプットしたいなぁでも気軽にアウトプットできるプラットフォームがないなぁという気持ちになり、暇だしブログでもつくるかになったのでつくりました。

とりあえず見れればいいやクオリティで出しているので、これからちょいちょい良くしていこうと思います。

そんなこんなで2023年、いいスタートダッシュができたのでなんやかんや頑張ります。

2022年の振り返りとか2023年の抱負は、別で書きます。

フロントエンドカンファレンス北海道2024 LT採択されました

TSKaigi 2024に参加しました

フロントエンド技術選定 ~ゼロランタイムCSS in JSとTailwind CSS編~

TSKaigiのプロポーザル落ちた

フロントエンドの技術選定 ~2023を振り返る~ Lunch LTに参加しました

「どうやって開発したの？」開発者catnoseさんにきいてみたに参加しました

2023年を振り返る

フロントエンドカンファレンス沖縄2023に参加しました

アクセシビリティカンファレンス福岡に参加しました

ZOZO Tech Meetup - Webフロントエンドに参加しました

朝までマークアップに参加しました

CTO協会合同ISUCON研修に参加しました

ZOZO Tech Meetupに参加しました

View Transitions APIがイケてる

RubyKaigi 2023に参加しました

zenn-markdown-htmlで埋め込み要素が表示されない場合は

読書したい生活【2023.04】

リクルート × BASE × バイセル【第1回フロントエンド勉強会】に参加しました

1ヶ月1万円読書生活【2023.03】

G Suiteの設定によってはGASでslack APIからのアクセスを受け取れない

ipadのchromeだけなんかおかしい

2023年の抱負

2022年を振り返る

謹賀新年ブログ開設

フロントエンドカンファレンス北海道2024 LT採択されました

TSKaigi 2024に参加しました

フロントエンド技術選定 ~ゼロランタイムCSS in JSとTailwind CSS編~

TSKaigiのプロポーザル落ちた

フロントエンドの技術選定 ~2023を振り返る~ Lunch LTに参加しました

「どうやって開発したの？」開発者catnoseさんにきいてみたに参加しました

2023年を振り返る

フロントエンドカンファレンス沖縄2023に参加しました

アクセシビリティカンファレンス福岡に参加しました

ZOZO Tech Meetup - Webフロントエンドに参加しました

朝までマークアップに参加しました

CTO協会 合同ISUCON研修に参加しました

ZOZO Tech Meetupに参加しました

View Transitions APIがイケてる

RubyKaigi 2023に参加しました

zenn-markdown-htmlで埋め込み要素が表示されない場合は

読書したい生活【2023.04】

リクルート × BASE × バイセル 【第1回フロントエンド勉強会】に参加しました

1ヶ月1万円読書生活【2023.03】

G Suiteの設定によってはGASでslack APIからのアクセスを受け取れない

ipadのchromeだけなんかおかしい

2023年の抱負

2022年を振り返る

謹賀新年ブログ開設

CTO協会合同ISUCON研修に参加しました

リクルート × BASE × バイセル【第1回フロントエンド勉強会】に参加しました