odan’s diary

Vue Fes Japan 2024 に参加してきました

タイトルの通り Vue Fes Japan 2024 に参加してきました

vuefes.jp

今回はLTのスピーカー参加でした

vuefes.jp

以下はスライドです。

speakerdeck.com

LT を出した背景

今年はカンファレンスへの登壇をできたらいいなと考えていて、TSKaigi や JSConf JP に CfP を出していました。

ただ春先に TSKaigi はセッションの CfP を出して落選していたので、競争率が低いであろう LT の CfP を出す戦略に切り替えていました。

odan3240.hatenablog.com

LT のネタをどうするかは少し悩みました。なぜなら普段仕事では Vue.js を書く機会はあるものの、頻度も量も多くはないため CfP として書けるほどのネタを持ち合わせていなかったからです。
唯一ネタになりそうな今年の年始に行った Vue2 => Vue3 のマイグレーションは、昨年末で Vue2 は EOL になったので旬が過ぎている気がして諦めました。1

公式サイトの CfP の募集要項をよく読むと Vite や unjs 関係のパッケージやコミュニティに関するトークでも OK と書いていました。そのため当時 Vitest Browser Mode についてサーベイしていたのもあって、このネタで LT に応募しました。

カンファレンスの感想

昨年の会場よりも広く気になるセッションが満席で中に入れない、ということがなく快適でした。

また、Evan をはじめとする Vue.js や Vite や unjs のコミッターが実際に日本に来て会えるのはいい機会だと思いました。実際に懇親会で pi0 と少し話すことに成功しました。

LT はほどよく緊張感を持って挑めたので、個人的にはうまく発表できた気がしています。テスト戦略の Testing Trophy や Vitest Browser Mode に関する知識を聞いている方に持ち帰ってもらえるといいなと考えていました。LT の中で「これらのことを知っている人〜?」問いかけたところ、大体半分の人が手を挙げていました。なのでレベル感としても程よかったのかなと感じています。

自分の LT の順番待ちやスポンサーブース巡りの影響で、昼過ぎのセッションをあまり聞けなかったのが少し心残りでした。カンファレンスの時間配分は難しいですね。

来年の意気込み

今年は縁があり LT で登壇することができました。ただ当日の参加者の熱量的に通常のトークでの登壇のほうが注目度は高いので、来年はトークでの登壇を目指したいです。そのために CfP は複数出して当選率を上げる戦略が大事なのかなと思いました。

あと海外の方も参加されるカンファレンスなので資料は英語で作ったほうが良かった、と資料が完成してから後悔しました。特にトークだと海外の方が来る可能性が高まるので、来年はなおさら英語での準備をしたいと考えています。

そのためにも来年までに Vite や unjs 周りについて見識を深めて、可能ならコントリビュートしていこうかなと考えています。

終わりに

楽しいカンファレンスでした。スタッフ及びスポンサーの方々、ありがとうございました!


  1. ただ今回の会場で聞いた話だと Vue2 のまま Never-Ending Support を受けている企業がいくつかありました

TSKaigi 2024にプロポーザルを提出して落ちてました

tskaigi.org

TSKaigi 2024のトーク枠のセッションにプロポーザルを提出してましたが、今日当落発表があり落ちていました。

落ちてしまったので、ここにプロポーザルの内容を公開して供養します。

プロポーザルの内容

背景

ECMAScript の Decorator は長い標準化の道のりの末、2022年3月に Stage 3 に昇格しまし、この進展を受けて TypeScript 5.0 ではこの仕様が実装されました。 更に、Decorator をさらに強化する Decorator Metadata も2023年6月に Stage 3 に昇格して、TypeScript 5.2 で実装されました。 Decorator Metadata は Lit などの Decorator を活用するライブラリに必要な仕様です。Lit の ES Decorator 対応は Decorator Metadata が Stage 3 に昇格するのを待ってから、2023年10月に対応版の Lit 3.0 がリリースされました。

問題提起

しかし、ECMAScript の Decorator が TypeScript の tsc に実装されたことで、すべての TypeScript ユーザーが直ちにこれらの機能を利用できるようになったわけではありません。現在、babel、esbuild、swc など複数の TypeScript 処理系が存在し、これらのツール全てが新しい Decorator 仕様をサポートしているわけではないため、追加の設定なしに利用することができません。

本発表の目的

トークでは、まず TypeScript の各処理系における Decorator と Decorator Metadata のサポート状況を解説します。次になぜ処理系によっては Decorator の実装が進んでいないかを解説します。そして ECMAScript の Decorator を今すぐにでも利用したい開発者のための具体的な workaround を紹介します。

反省

TypeScript の Decorator に関する発表だけだとアピールする文章になっているのが良くないかなと提出後に思いました。この話の面白さは「現代の TypeScript は新しい構文が tsc に実装されても他の処理系でも実装されていなければ実際には使えない」というギャップの部分だと思っています。なのでこれを主題にして Decorator はその話を裏付ける一例として使うほうが、Decorator に興味がない層にもリーチができるのでもっと良いプロポーザルにできたのかなと反省してました。

今後

最近は大きめなイベントが復活しているので、またプロポーザルを出して登壇のチャンスを掴みたいです。そのためにも今後も継続的に知識を学習していつでもプロポーザルを出せる状態を維持していけたらなと考えてます。

2023年 ふりかえり

去年のやつ

odan3240.hatenablog.com

OSS 関係

作ったプルリク

https://github.com/issues?q=author%3Aodanado+archived%3Afalse+-user%3Aodanado+-user%3Aodan-sandbox を眺めて思い出深いやつをピックアップ

yhatt/jsx-slack

今年の2月頃は Slack Bot を作成する機会がありました。その中で色々なライブラリを試しているときに TypeScript の moduleResolution が node16 の場合にエラーになることを見つけたので、修正するパッチを作成しました。

github.com

nodejs/docker-node

普段から Node.js を使っているけど nodejs の org にコントリビュートしたことがないことに気付いたので、何か自分でもできそうな issue がないか探しました。その中でも docker-node リポジトリは Node.js 自体の知識が不要で Docker の知識があれば自分にも対応できる issue がありだと考えました。探したところ、GitHub Actions に関する help wanted な issue があったので、これに挑戦しました。

レビューが爆速で返ってきて感心した記憶があります。

github.com

Open Collective

今年から普段使用している OSS に寄付することを意識しました。

opencollective.com

ESLint、typescript-eslint、Prettier、core-js に毎月10ドルずつ寄付しています。

また cpprefjp に50ドルの投げ銭を6月に行いました。

仕事

転職して丸1年が過ぎました。

仕事での目に見えるアウトプットとしては UIT Meetup の幹事の担当やアドベントカレンダーに参加しました。

engineering.linecorp.com

techblog.lycorp.co.jp

会社にもだいぶ慣れてきたのもあってプロジェクトの状況や会社での立ち位置を把握して、自分の興味のある範囲とやる必要があることを認識して仕事を進められるようになってきました。

副業

今年は知り合い経由で色々副業に挑戦しました。

Testing Library など触ったことのないライブラリを触りつつ開発ができてて楽しいです。

ただ副業をすると趣味や OSS へのコントリビュートする時間が減るのが悩みのタネでもあるなと感じた一年でした。

まとめ

転職して仕事にも慣れてきた1年でした。

ただアウトプットの数は減ってしまったので、来年は仕事で成果出しつつその結果をアウトプットに繋げられたらな〜と考えてます。

情報オリンピックの思い出

はじめに

この記事は次の記事にインスパイアされて書かれました。

blue-jam.hatenablog.com

たしかに記憶はどんどん薄くなっていくので自分も今のうちに記録しておくことにします。

情報オリンピックとの出会い

情報オリンピックと出会ったのは高校1年生の夏頃でした。高校向けに配布された情報オリンピックの案内ポスターの存在をクラスの担任に教えてもらったことがきっかけでした。自分が通っていた高校は少し特殊で、いわゆる工業高校と呼ばれるものでした。数学や国語の授業と同じようにC言語を学ぶ授業がありました。C言語に対する理解が他の生徒よりも早かった自分は特に担任に情報オリンピックに参加することを特に推されました。

元々数学オリンピックの存在は知っていたのでとても興味を持ち参加することに決めました。情報オリンピックのサイトに行くとそこには例題としてお釣りの枚数を計算する問題がありました。これを見たとき「情報オリンピック、簡単では??」と思い込んでしまいました。この思い込みとそもそもアルゴリズムやデータ構造という概念を持ち合わせていなかったので、特に勉強せずに予選に参加しました。結果は6問中最初の1問か2問しか解けずに終わりました。

競技プログラミングとの出会い

予選のあとの冬頃に Twitter で「情報オリンピックで優勝するなんて無理だよな〜」的なツイートをしました。このツイートが当時FF外だった @qnighy さんにリツイートされました。何だこの人〜って思いながらツイートを遡ったり周辺の人を観察した結果、情報オリンピック競技プログラミングの大会であることや、蟻本と呼ばれる教材や AOJ/AtCoder などのオンラインジャッジのことを知りました。

そこからは同年代の競プロ勢のツイッターをフォローして、蟻本を購入し AOJ や POJ や AtCoder で問題を解くことを始めました。

自分にとっては蟻本がかなり難しく、授業中に同じページを何度も読み返していたのを覚えています。あと間違えて第二版ではなく第一版を購入したのも思い出です。

2回目の予選

2回目の予選では、競技プログラミング周辺に関する知識も増えていたので予選通過のボーダーラインを把握できていました。当時の予選は1問100点の問題が6問出題されていました。例年350点程度を取ると予選通過して本選に招待されることが知られていました。問題は基本的に難易度順に並んでいて、最初の3問はアルゴリズム的な要素はなく、プログラムを書けると解ける問題で構成されていました。ボーダーとなる4問目は毎年DPに関する問題が出題されていました。

当時の自分はDPという概念は蟻本を読んでいたのでなんとなく知っていたものの、コンテスト本番で解けたことがないジャンルでした。このままだと予選を通過できない絶望感に包まれていました。

しかし、情報オリンピックの予選の直前の AtCoder のコンテストで初めて本番で DP の問題を解くことができました。

これは当時の提出です。予選が12月16日で、このコンテストが12月8日に行われたので本当に直前でした。

atcoder.jp

このことが自信に繋がり、本番の予選でも4問目に出題された DP の問題を無事解くことができました。予選後通過を確信したときはあまりの嬉しさに自転車で近所の図書館に自転車を飛ばして読みたかった本を借りに行くぐらいテンションが上っていました。

本選

当時は見ていたアニメの影響もあって東京への強い憧れがありました。そのため早めに家を出て秋葉原観光をしてから会場に向かっていました。

本戦の対策はいまいちでした。簡単な DP の問題は解けるようになったけどちょっと難しい問題は解けないし、本戦は厳しいだろうなと感じていました。あわよくば本戦でAランクを取って情報オリンピックの推薦枠で大学に進学できれば、とも考えていましたが厳しいことを自覚していました。

本戦の結果は散々なものでした。500点か600点が満点なのに対して10点しか取れませんでした。1問目はちょっと考察すれば貪欲で解ける問題なのに、考察や実験をしないでひたすら実装をいじくり回していた記憶があります。2問目はいいところまで実装はできていて、1行変えれば100点が取れたのに冷静さを失っていてバグに気付くことができませんでした。配布されたCCレモンが美味しくてガブガブ飲んだ結果、トイレに何度も往復しました。

情報オリンピックで得たもの

これまでに情報オリンピックに参加した人がおらず、一般的に見ても頭の良くない高校から情報オリンピックの本戦まで進めたことは一定の自信に繋がりました。それと同時に自分が逆立ちしても解けない問題をスラスラ解いていく同年代の生徒の存在を知り大きな劣等感に包まれたこともありました。

情報オリンピックとの出会いは間違いなく自分の人生を大きく変えた出来事です。プログラミングの基礎能力の向上はもちろん影響がありますが、それよりも競プロ勢との出会いの方が大きな要素だったと思います。競プロ勢とツイッターで繋がり、その先のエンジニアコミュニティに出会い、世間の大きさと自分を比べられるようになったからこそ、向上心が芽生えて今の自分があります。

最後に

エモくなって自分語りが楽しくなりました。情報オリンピックは間違いなく青春の一部でした。ありがとう。

ISUCON13 参加記

ISUCON13 に参加してきました。

チーム名は「ぽよ〜」でメンバーは自分ひとりでした。毎年チームを組んで参加しているので試しにソロで参加したくなったのが背景です。

あと今年は個人スポンサー枠で参加しました。

結果

スコアは6,381で、順位は上から370番目?付近でした

isucon.net

やったこと

  • kataribe, pt-query-digest, OpenTelemetry + Cloud Trace を導入
  • kataribe の集計結果から重たいエンドポイントのボトルネックを順番につぶしていく
  • GET /api/user/:userId/statistics の一部改善
    • 処理が複雑だったので一旦目についた簡単そうな N+1 を解決した
  • GET /api/user/:userId/icon の304実装
    • アプリ側にハッシュ値を比較する実装を入れた
    • あとで Nginx から返そうと config を触ったけど、ベンチマークがパスしなくて Nginx は諦めた...
  • GET /api/livestream/search の改善
    • utils 以下にある関数に N+1 がたくさんあったのでいくつか解決した
  • POST /api/livestream/*/moderate の改善
    • for 文の中で DELETE 文を実行している and 不要な NG ワードに対しても DELETE 文を実行していたのでどっちも直した
  • アイコンを Nginx で返す
    • ベンチマークを回すと整合性チェックで アイコン未設定の場合は、NoImage.jpgを返さなければなりません と怒られて、これを解消できずに諦めた
  • 複数台構成化に挑戦
    • とりあえず app と mysql を別のサーバにしようとしたけど時間がなくて諦めた
      • Host 'ip-192-168-0-11.ap-northeast-1.compute.internal' is not allowed to connect to this MySQL server というエラーが出て直す時間がないな〜となってた

反省

  • 終了直後の配信でインデックス張るだけで1万点超えるって言われてメンタルにきた
    • kataribe を使ったトップダウンな改善の前に自明なインデックスに手を付けるべきだった
    • N+1 の解決に伴って不要になる index もあるからって理由でトップダウンな改善を進めたけど、index 作るぐらいなら簡単だしやっちゃえばよかった
  • Nginx の config を書くのに時間かかりすぎたし結局できないので、もっと理解を深めておく必要があった
  • そもそもだけどやっぱりチームを組んで参加しないと手が回らない...
    • 複数台構成にする時間がなかった
    • N+1 の解決にだいぶ時間を取られた

感想

  • こんいす〜良すぎ、問題設定が神
  • 今年は予選決勝形式じゃなくて一発勝負になった影響か例年の予選よりボリュームが多い気がした
  • スコアがさばいたリクエストの数じゃなくてスパチャの合計額なのはより実サービスに近い設定で良かった
  • DNS がテーマに含まれているのはさくらインターネットぽくてよかった
  • TS 実装は hono が使われていてお〜となった
    • 同時に @opentelemetry/instrumentation-express が使えないなとなった
      • @opentelemetry/instrumentation-http は動いていたっぽいので、エンドポイントなどの情報は追えた
  • TS の実行には tsx が使われていた
    • esbuild 化しようとしたけど、bcrypt がバンドルできなくて諦めた
    • bcryptjs に置き換えれば build 通る可能性はあったけど、レギュレーションの bcrypt のアルゴリズムを変更しない、というルールに違反しないか自信がなかった
      • 極論 bcrypt って名前を含む何もしないパッケージをその場で公開すれば色々処理性能は上がるので...
      • あと bcrypt のアルゴリズムを変更しない、ってルールは数年前の ISUCON のアンサーソングぽいなと思った

今年の ISUCON も楽しむことができました。 特に今年は一人参加だったのでいつもより集中して挑めたと思います。

関係者の方々ありがとうございました。 来年も参加します。

Vue Fes Japan 2023 参加記

vuefes.jp

参加のきっかけ

最近仕事で Vue2 + Vue CLI から Vue3 + Vite への移行を検討するタスクを担当していて、Vue について思いを馳せることが多くなっていました。その中で Twitter で Vue Fes Japan 2023 の告知ツイートを見て参加しようかなという気持ちになりました。

自分にとってのオフラインの Vue Fes Japan は、2019年にスタッフ参加する予定だったのが台風で中止になったときから時計の針が止まっていたので、それを解消したいという思いもありました。

感想

  • Vue3 に移行完了している人が多かった
    • Vue3 に移行した人は挙手して〜みたいな質問に対して手を挙げている人が多く、事前に持っていた印象を上回っていた
  • Volar.js 面白そうだし、何か自分もツール作ってみたい
  • スポンサーブースにスタンプラリー要素を用意するのは賢いと思った
    • 参加者がちゃんとブースを周回する動機になって、スポンサー視点嬉しい
  • 海外スピーカーのセッションを聞きに行けばよかった
    • 何も考えずにセッション選んだり、ブースを回ったりしていたら海外スピーカーのセッションが0になってしまった
    • 通訳はあるしせっかく有名人が来日しているしもったいないことをした
    • 来年も参加するならここを意識する
  • 来年のセッションは Vue3 のその先の話が中心になりそう
  • 名札はとても良かった
    • プラスチック製で丈夫なのが嬉しい

久々のオフラインのカンファレンスを楽しめました。オンラインと違ってオフラインだと廊下で立ち話が発生したりして楽しかったです。あと眠くならない。

イベントスタッフ、スポンサー、スピーカーの皆さんありがとうございました。

Vue Fes Japan 2023 参加記

vuefes.jp

参加のきっかけ

最近仕事で Vue2 + Vue CLI から Vue3 + Vite への移行を検討するタスクを担当していて、Vue について思いを馳せることが多くなっていました。その中で Twitter で Vue Fes Japan 2023 の告知ツイートを見て参加しようかなという気持ちになりました。

自分にとってのオフラインの Vue Fes Japan は、2019年にスタッフ参加する予定だったのが台風で中止になったときから時計の針が止まっていたので、それを解消したいという思いもありました。

感想

  • Vue3 に移行完了している人が多かった
    • Vue3 に移行した人は挙手して〜みたいな質問に対して手を挙げている人が多く、事前に持っていた印象を上回っていた
  • Volar.js 面白そうだし、何か自分もツール作ってみたい
  • スポンサーブースにスタンプラリー要素を用意するのは賢いと思った
    • 参加者がちゃんとブースを周回する動機になって、スポンサー視点嬉しい
  • 海外スピーカーのセッションを聞きに行けばよかった
    • 何も考えずにセッション選んだり、ブースを回ったりしていたら海外スピーカーのセッションが0になってしまった
    • 通訳はあるしせっかく有名人が来日しているしもったいないことをした
    • 来年も参加するならここを意識する
  • 来年のセッションは Vue3 のその先の話が中心になりそう

久々のオフラインのカンファレンスを楽しめました。オンラインと違ってオフラインだと廊下で立ち話が発生したりして楽しかったです。あと眠くならない。

イベントスタッフ、スポンサー、スピーカーの皆さんありがとうございました。