https://speakerdeck.com/mizdra 2018-11-10 23:45:30 -0500 2026/06/02 に「フロントエンド開発はどこまで速くなるのか？〜Oxcで考えるツールチェーン〜」というイベントで話した資料です。 https://findy.connpass.com/event/391160/ 2026/06/02 に「フロントエンド開発はどこまで速くなるのか？〜Oxcで考えるツールチェーン〜」というイベントで話した資料です。 https://findy.connpass.com/event/391160/ Mon, 01 Jun 2026 00:00:00 -0400 https://speakerdeck.com/mizdra/voidzero-tools https://speakerdeck.com/mizdra/voidzero-tools 2026/04/16 に「技育CAMPアカデミア」で話したスライドです。2025 年のはてなインターンの講義資料 (https://speakerdeck.com/hatena/internship-2025-frontend) に手を加えたものになってます。 https://talent.supporterz.jp/events/b4d7e64d-d315-4e61-b6cc-319e5a541ae9/ 2026/04/16 に「技育CAMPアカデミア」で話したスライドです。2025 年のはてなインターンの講義資料 (https://speakerdeck.com/hatena/internship-2025-frontend) に手を加えたものになってます。 https://talent.supporterz.jp/events/b4d7e64d-d315-4e61-b6cc-319e5a541ae9/ Fri, 17 Apr 2026 00:00:00 -0400 https://speakerdeck.com/mizdra/geek-camp-2026-frontend https://speakerdeck.com/mizdra/geek-camp-2026-frontend YAPC::Fukuoka 2025 で発表した資料です。 https://fortee.jp/yapc-fukuoka-2025/proposal/c705086e-8849-4419-8dce-423f82f41327 YAPC::Fukuoka 2025 で発表した資料です。 https://fortee.jp/yapc-fukuoka-2025/proposal/c705086e-8849-4419-8dce-423f82f41327 Sat, 15 Nov 2025 00:00:00 -0500 https://speakerdeck.com/mizdra/web-frontend-secret-leak https://speakerdeck.com/mizdra/web-frontend-secret-leak 作ったもの: https://github.com/mizdra/css-modules-kit --- コンポーネントに CSS を当てる手法の1つに、CSS Modules があります。広く使われている手法ですが、エディタ上の開発体験が悪いという欠点がありました。*.tsx と *.module.css の Language Server が分かれているために、*.tsx と *.module.css を横断する言語機能 (Rename,Find All References ) の挙動に問題があるのです。 長らくこの問題は解決困難と思われてました。しかし TypeScript Language Service Plugin を使うと、実は解決できるのです。この発表では、TypeScript Language Service Plugin とは何か、そしてそれを使って作ったツールについて紹介します。 - TypeScript Language Service Plugin とは - CSS Modules Kit の紹介 - Volar.js を使って .module.css を TypeScript コードに偽装する - Navigation 機能の実装 (Go to Definition, Rename, Find All References) - 開発体験を改善するその他の工夫 - tsc による型検査のサポート - 壊れかけのファイルのサポート - linter-plugin の提供 - ts-plugin の課題 作ったもの: https://github.com/mizdra/css-modules-kit --- コンポーネントに CSS を当てる手法の1つに、CSS Modules があります。広く使われている手法ですが、エディタ上の開発体験が悪いという欠点がありました。*.tsx と *.module.css の Language Server が分かれているために、*.tsx と *.module.css を横断する言語機能 (Rename,Find All References ) の挙動に問題があるのです。 長らくこの問題は解決困難と思われてました。しかし TypeScript Language Service Plugin を使うと、実は解決できるのです。この発表では、TypeScript Language Service Plugin とは何か、そしてそれを使って作ったツールについて紹介します。 - TypeScript Language Service Plugin とは - CSS Modules Kit の紹介 - Volar.js を使って .module.css を TypeScript コードに偽装する - Navigation 機能の実装 (Go to Definition, Rename, Find All References) - 開発体験を改善するその他の工夫 - tsc による型検査のサポート - 壊れかけのファイルのサポート - linter-plugin の提供 - ts-plugin の課題 Fri, 23 May 2025 00:00:00 -0400 https://speakerdeck.com/mizdra/css-modules-kit https://speakerdeck.com/mizdra/css-modules-kit JSConf JP 2024 の発表資料です。 --- JavaScript には Function.prototype.toString() という API があります。この API を使うと、関数本体のソースコードを文字列として取得できます。 一見すると何の使い道があるか分からないかもしれません。しかし、関数本体のソースコードを取得できるということは、実行時に関数のソースコードを静的解析できることを意味します。また、関数をシリアライズしてどこかに転送した後、デシリアライズして実行するといったことも可能です。この特徴は、JavaScript に大きな力をもたらします。 このトークでは、 Function.prototype.toString() はどんな API なのか、どういう使い道があるのか、世の中のライブラリで利用されている実用的なものから、狂った使い方まで紹介します。 - リモート関数 (puppeteer の page.evaluate()) - ネイティブコード判定 - tempalte literal を使わない複数行文字列リテラル - etc... JSConf JP 2024 の発表資料です。 --- JavaScript には Function.prototype.toString() という API があります。この API を使うと、関数本体のソースコードを文字列として取得できます。 一見すると何の使い道があるか分からないかもしれません。しかし、関数本体のソースコードを取得できるということは、実行時に関数のソースコードを静的解析できることを意味します。また、関数をシリアライズしてどこかに転送した後、デシリアライズして実行するといったことも可能です。この特徴は、JavaScript に大きな力をもたらします。 このトークでは、 Function.prototype.toString() はどんな API なのか、どういう使い道があるのか、世の中のライブラリで利用されている実用的なものから、狂った使い方まで紹介します。 - リモート関数 (puppeteer の page.evaluate()) - ネイティブコード判定 - tempalte literal を使わない複数行文字列リテラル - etc... Fri, 22 Nov 2024 00:00:00 -0500 https://speakerdeck.com/mizdra/the-world-of-function-prototype-tostring-you-dont-know https://speakerdeck.com/mizdra/the-world-of-function-prototype-tostring-you-dont-know builderscon 2024 で発表した資料です。 動画はこちら: https://www.youtube.com/watch?v=_Prly-RAF7A&list=PLZjwpOgJkJXteFpwAbcVoQXfd2f5q-OPp --- React Server Component は、サーバーサイド上でレンダリングされる React コンポーネントです。React Server Component を用いると、コンポーネントの中から DB にアクセスしたり、ファイルシステムにアクセスしたりできます。 一方で、今までにも erb や pug といったテンプレートエンジンのように、サーバーサイド上でテンプレートをレンダリングする技術というのは存在しました。また、React でも SSR を用いれば、(Client) Component をサーバー上でレンダリングできました。そのためこれらの技術とどう違うのか、疑問を抱いている方も多いでしょう。 しかし、React Server Component は従来の技術への単なる回帰ではありません。今まで存在していたいくつもの問題を解決し、優れた開発体験をもたらす技術なのです。 このトークでは、React Server Compomnent とは何か、どんなことができるのか、そして従来の技術とどう違うのか、どう開発スタイルが変わるのかについて話します。このトークが、React Server Component に関する様々な疑問を解消する手助けになるはずです。 builderscon 2024 で発表した資料です。 動画はこちら: https://www.youtube.com/watch?v=_Prly-RAF7A&list=PLZjwpOgJkJXteFpwAbcVoQXfd2f5q-OPp --- React Server Component は、サーバーサイド上でレンダリングされる React コンポーネントです。React Server Component を用いると、コンポーネントの中から DB にアクセスしたり、ファイルシステムにアクセスしたりできます。 一方で、今までにも erb や pug といったテンプレートエンジンのように、サーバーサイド上でテンプレートをレンダリングする技術というのは存在しました。また、React でも SSR を用いれば、(Client) Component をサーバー上でレンダリングできました。そのためこれらの技術とどう違うのか、疑問を抱いている方も多いでしょう。 しかし、React Server Component は従来の技術への単なる回帰ではありません。今まで存在していたいくつもの問題を解決し、優れた開発体験をもたらす技術なのです。 このトークでは、React Server Compomnent とは何か、どんなことができるのか、そして従来の技術とどう違うのか、どう開発スタイルが変わるのかについて話します。このトークが、React Server Component に関する様々な疑問を解消する手助けになるはずです。 Fri, 09 Aug 2024 00:00:00 -0400 https://speakerdeck.com/mizdra/react-server-components-noyi-wen-wojie-kiming-kasu https://speakerdeck.com/mizdra/react-server-components-noyi-wen-wojie-kiming-kasu BARフロントえんどう #2 「CSS Library / Framework」で発表した資料です。 BARフロントえんどう #2 「CSS Library / Framework」で発表した資料です。 Fri, 19 Apr 2024 00:00:00 -0400 https://speakerdeck.com/mizdra/css-modules-in-hatena-and-css-modules-missing-parts https://speakerdeck.com/mizdra/css-modules-in-hatena-and-css-modules-missing-parts 2024/01/12 の ToKyoto.js #2 で話した発表資料です。 2024/01/12 の ToKyoto.js #2 で話した発表資料です。 Fri, 12 Jan 2024 00:00:00 -0500 https://speakerdeck.com/mizdra/the-technology-to-fight-with-many-eslints-errors https://speakerdeck.com/mizdra/the-technology-to-fight-with-many-eslints-errors Vue Fes Japan 2023 で発表したスライドです。 発表概要: .vue でエディタの補完機能などを効かせるために、Vue Language Server というツールがあります。実はこのコアは Volar.js という OSS に切り出されています。Volar.js は "あらゆる組み込み言語" のためのフレームワークであり、Vue.js 以外にも利用できる汎用性を備えています。このセッションでは Volar.js が一体どういうものなのか、そしてその汎用性がどのような可能性を秘めているのかについてお話します。 Vue Fes Japan 2023 で発表したスライドです。 発表概要: .vue でエディタの補完機能などを効かせるために、Vue Language Server というツールがあります。実はこのコアは Volar.js という OSS に切り出されています。Volar.js は "あらゆる組み込み言語" のためのフレームワークであり、Vue.js 以外にも利用できる汎用性を備えています。このセッションでは Volar.js が一体どういうものなのか、そしてその汎用性がどのような可能性を秘めているのかについてお話します。 Sat, 28 Oct 2023 00:00:00 -0400 https://speakerdeck.com/mizdra/vue-language-server-karasheng-mareta-volar-dot-js-to-soregami-meruke-neng-xing https://speakerdeck.com/mizdra/vue-language-server-karasheng-mareta-volar-dot-js-to-soregami-meruke-neng-xing 2022/09/07 の Hatena Engineer Seminar #21 で発表した資料です。 動画もあります: https://youtu.be/N6iUlz4buTc?t=1636 この発表とは別に、30 分のクロストーク枠で、@hasFeature 実装の経緯の詳細や、他に検討したことについて話していますので、ぜひそちらもご覧ください: https://youtu.be/N6iUlz4buTc?t=3326 2022/09/07 の Hatena Engineer Seminar #21 で発表した資料です。 動画もあります: https://youtu.be/N6iUlz4buTc?t=1636 この発表とは別に、30 分のクロストーク枠で、@hasFeature 実装の経緯の詳細や、他に検討したことについて話していますので、ぜひそちらもご覧ください: https://youtu.be/N6iUlz4buTc?t=3326 Thu, 08 Sep 2022 00:00:00 -0400 https://speakerdeck.com/mizdra/marutitenantote-graphql-woshi-uji-nogong-fu https://speakerdeck.com/mizdra/marutitenantote-graphql-woshi-uji-nogong-fu Hatena Engineer Seminar #15 (2020/12/23) での発表資料です。 https://hatena.connpass.com/event/198892/ 動画もあります: https://youtu.be/Xb5bPaTO7fs?t=376 Hatena Engineer Seminar #15 (2020/12/23) での発表資料です。 https://hatena.connpass.com/event/198892/ 動画もあります: https://youtu.be/Xb5bPaTO7fs?t=376 Wed, 23 Dec 2020 00:00:00 -0500 https://speakerdeck.com/mizdra/webhurontoendofalsezhi-xu-wowei-chi-suruti-zhi-wozuo-ru https://speakerdeck.com/mizdra/webhurontoendofalsezhi-xu-wowei-chi-suruti-zhi-wozuo-ru MCCMMANCC2018 (https://uecmma.github.io/MCCMMANCC2018/) の登壇資料です. MCCMMANCC2018 (https://uecmma.github.io/MCCMMANCC2018/) の登壇資料です. Sun, 23 Dec 2018 00:00:00 -0500 https://speakerdeck.com/mizdra/ge-ren-kai-fa-falseli-ce https://speakerdeck.com/mizdra/ge-ren-kai-fa-falseli-ce Dentoo.LT #21で発表したスライドです. Dentoo.LT #21で発表したスライドです. Sun, 11 Nov 2018 00:00:00 -0500 https://speakerdeck.com/mizdra/zhu-u2 https://speakerdeck.com/mizdra/zhu-u2