<h2 id="%E3%81%AF%E3%81%98%E3%82%81%E3%81%AB">
<a class="header-anchor-link" href="#%E3%81%AF%E3%81%98%E3%82%81%E3%81%AB" aria-hidden="true"></a> はじめに</h2>
<p>はじめまして、いちむらゆうまと申します。<br>
<a href="https://vuejs-meetup.connpass.com/event/318066/" target="_blank" rel="nofollow noopener noreferrer">Vue.js v-tokyo Meetup #20</a> の参加レポートを執筆していきます。<br>
本レポートは各セッションのざっくりとした要約 + 私の感想で構成されています。<br>
当日の雰囲気が少しでも伝われば幸いです。</p>
<h3 id="%E7%B0%A1%E5%8D%98%E3%81%AA%E8%87%AA%E5%B7%B1%E7%B4%B9%E4%BB%8B">
<a class="header-anchor-link" href="#%E7%B0%A1%E5%8D%98%E3%81%AA%E8%87%AA%E5%B7%B1%E7%B4%B9%E4%BB%8B" aria-hidden="true"></a> 簡単な自己紹介</h3>
<p>私のことを少しだけ紹介させて頂きます。</p>
<p>現在大学生で、学生アルバイトとして業務アプリ開発会社でコードを書いています。<br>
Vueはアルバイトで1年ほど扱ったのに加え、自分でWebアプリを開発するときに利用するというような関わり方です。<br>
深いところは全然わからず、とりあえず要件に沿って動くものは作れるかなという感じです。</p>
<h2 id="v-tokyo-meetup-%2320-%E3%81%AB%E3%81%A4%E3%81%84%E3%81%A6">
<a class="header-anchor-link" href="#v-tokyo-meetup-%2320-%E3%81%AB%E3%81%A4%E3%81%84%E3%81%A6" aria-hidden="true"></a> v-tokyo Meetup #20 について</h2>
<p>今回のv-tokyoは「<strong>Developer Experience 開発者体験特集</strong>」がテーマでした。</p>
<blockquote>
<p>Nuxt の開発生産性を支える Nuxt DevTools 、そして Vue.js エコシステムの DX 関連の内容をキャッチアップできるイベントとなります。<br>
<a href="https://vuejs-meetup.connpass.com/event/318066/#:~:text=Nuxt%20%E3%81%AE%E9%96%8B%E7%99%BA%E7%94%9F%E7%94%A3%E6%80%A7%E3%82%92%E6%94%AF%E3%81%88%E3%82%8B%20Nuxt%20DevTools%20%E3%80%81%E3%81%9D%E3%81%97%E3%81%A6%20Vue.js%20%E3%82%A8%E3%82%B3%E3%82%B7%E3%82%B9%E3%83%86%E3%83%A0%E3%81%AE%20DX%20%E9%96%A2%E9%80%A3%E3%81%AE%E5%86%85%E5%AE%B9%E3%82%92%E3%82%AD%E3%83%A3%E3%83%83%E3%83%81%E3%82%A2%E3%83%83%E3%83%97%E3%81%A7%E3%81%8D%E3%82%8B%E3%82%A4%E3%83%99%E3%83%B3%E3%83%88%E3%81%A8%E3%81%AA%E3%82%8A%E3%81%BE%E3%81%99%E3%80%82" target="_blank" rel="nofollow noopener noreferrer">Vue.js v-tokyo Meetup #20 | connpass -イベントの説明</a></p>
</blockquote>
<p>会場スポンサーセッションと4つのLTセッション、メインセッションの後に任意参加の懇親会がありました。</p>
<h3 id="%E4%BC%9A%E5%A0%B4">
<a class="header-anchor-link" href="#%E4%BC%9A%E5%A0%B4" aria-hidden="true"></a> 会場</h3>
<p>GINZA SIX 10F 株式会社プレイドさんのオフィスで開催されました。<br>
オープンスペース！人工芝！<br>
フットサルくらいならできそうな開放感の中、靴を脱いでリラックスしながらセッションを聞いていきます！</p>
<h2 id="%E4%BC%9A%E5%A0%B4%E3%82%B9%E3%83%9D%E3%83%B3%E3%82%B5%E3%83%BC%E3%82%BB%E3%83%83%E3%82%B7%E3%83%A7%E3%83%B3%3A-headless%E3%81%AAui%E3%83%A9%E3%82%A4%E3%83%96%E3%83%A9%E3%83%AA%E3%82%92%E9%81%B8%E6%8A%9E%E3%81%99%E3%82%8B%E4%BE%A1%E5%80%A4">
<a class="header-anchor-link" href="#%E4%BC%9A%E5%A0%B4%E3%82%B9%E3%83%9D%E3%83%B3%E3%82%B5%E3%83%BC%E3%82%BB%E3%83%83%E3%82%B7%E3%83%A7%E3%83%B3%3A-headless%E3%81%AAui%E3%83%A9%E3%82%A4%E3%83%96%E3%83%A9%E3%83%AA%E3%82%92%E9%81%B8%E6%8A%9E%E3%81%99%E3%82%8B%E4%BE%A1%E5%80%A4" aria-hidden="true"></a> 会場スポンサーセッション: headlessなUIライブラリを選択する価値</h2>
<p><span class="embed-block zenn-embedded zenn-embedded-card"><iframe id="zenn-embedded__af0f226d3baf5" src="https://embed.zenn.studio/card#zenn-embedded__af0f226d3baf5" data-content="https%3A%2F%2Fspeakerdeck.com%2Fplaidtech%2Fthe-value-of-using-a-headless-ui-library" frameborder="0" scrolling="no" loading="lazy"></iframe></span><a href="https://speakerdeck.com/plaidtech/the-value-of-using-a-headless-ui-library" style="display:none" target="_blank" rel="nofollow noopener noreferrer">https://speakerdeck.com/plaidtech/the-value-of-using-a-headless-ui-library</a><br style="display:none">
発表者: <a href="https://plaid.co.jp/" target="_blank" rel="nofollow noopener noreferrer">株式会社プレイド</a> yuito kawashimaさん</p>
<ul>
<li>
<a href="https://www.radix-vue.com/" target="_blank" rel="nofollow noopener noreferrer">Radix Vue</a>を利用し、社内でデザインシステムを作成している</li>
<li>headlessなUIライブラリ: スタイルを提供せず、機能のみを提供するUIライブラリ
<ul>
<li>スタイルを自分で書きつつ、アクセシビリティなどの機能はライブラリに頼れるのでうれしい</li>
</ul>
</li>
<li>現状、Vueで利用できるheadlessなUIライブラリは<a href="https://www.radix-vue.com/" target="_blank" rel="nofollow noopener noreferrer">Radix Vue</a>と<a href="https://headlessui.com/" target="_blank" rel="nofollow noopener noreferrer">HeadlessUI</a>
<ul>
<li>そのうえで、提供機能数が多いため<a href="https://www.radix-vue.com/" target="_blank" rel="nofollow noopener noreferrer">Radix Vue</a>を選定した</li>
</ul>
</li>
</ul>
<p>headlessという概念を知らず、有用さに膝を打ちました。<br>
プレイドさんには「デザインエンジニア」という肩書が存在するらしく、デザインに重きを置いて進めていく環境では特に輝きそうです。</p>
<h2 id="lt-%E3%82%BB%E3%83%83%E3%82%B7%E3%83%A7%E3%83%B31%3A-what-is-vue.js%3F-hmm%E2%80%A6-it%E2%80%99s-just-language-lol">
<a class="header-anchor-link" href="#lt-%E3%82%BB%E3%83%83%E3%82%B7%E3%83%A7%E3%83%B31%3A-what-is-vue.js%3F-hmm%E2%80%A6-it%E2%80%99s-just-language-lol" aria-hidden="true"></a> LT セッション1: What is Vue.js? Hmm… It’s just language lol</h2>
<p><span class="embed-block zenn-embedded zenn-embedded-card"><iframe id="zenn-embedded__456aed1d9cac2" src="https://embed.zenn.studio/card#zenn-embedded__456aed1d9cac2" data-content="https%3A%2F%2Fubugeeei.github.io%2Fv-tokyo-20%2F" frameborder="0" scrolling="no" loading="lazy"></iframe></span><a href="https://ubugeeei.github.io/v-tokyo-20/" style="display:none" target="_blank" rel="nofollow noopener noreferrer">https://ubugeeei.github.io/v-tokyo-20/</a><br style="display:none">
発表者: <a href="https://x.com/ubugeeei" target="_blank" rel="nofollow noopener noreferrer">ubugeeei</a>さん</p>
<ul>
<li>言語を開発するモチベーションは「新しい開発者体験」を求めているからである
<ul>
<li>言語を作れば、またよりよい言語が欲しくなる</li>
</ul>
</li>
<li>VueはWebのUIの書きやすさを目指した言語である</li>
<li>ただ、言語を作るのは時間がかかる
<ul>
<li>Vueにも探せばやらなければならないことがたくさんある</li>
</ul>
</li>
</ul>
<p>すごいスピードで情報が降り注ぎ、これぞ"Lightning"という発表でした。<br>
テンポ良く密度の高い情報の雨、とても心地よかったです。<br>
また、プログラミング言語の根本に立ち返るような内容のセッションでした。<br>
言語やフレームワークにコントリビューションしていく中で、根本的なモチベーションを見つめなおすのは大事になってくるのだろうなと感じます。</p>
<h2 id="lt-%E3%82%BB%E3%83%83%E3%82%B7%E3%83%A7%E3%83%B32%3A-%E3%81%A1%E3%82%87%E3%81%A3%E3%81%A8%E3%81%97%E3%81%9F%E3%83%AA%E3%82%A2%E3%82%AF%E3%83%86%E3%82%A3%E3%83%96%E3%83%A6%E3%83%BC%E3%83%86%E3%82%A3%E3%83%AA%E3%83%86%E3%82%A3%E3%81%AE%E3%81%94%E7%B4%B9%E4%BB%8B">
<a class="header-anchor-link" href="#lt-%E3%82%BB%E3%83%83%E3%82%B7%E3%83%A7%E3%83%B32%3A-%E3%81%A1%E3%82%87%E3%81%A3%E3%81%A8%E3%81%97%E3%81%9F%E3%83%AA%E3%82%A2%E3%82%AF%E3%83%86%E3%82%A3%E3%83%96%E3%83%A6%E3%83%BC%E3%83%86%E3%82%A3%E3%83%AA%E3%83%86%E3%82%A3%E3%81%AE%E3%81%94%E7%B4%B9%E4%BB%8B" aria-hidden="true"></a> LT セッション2: ちょっとしたリアクティブユーティリティのご紹介</h2>
<p><span class="embed-block zenn-embedded zenn-embedded-card"><iframe id="zenn-embedded__ab98f283fa91a" src="https://embed.zenn.studio/card#zenn-embedded__ab98f283fa91a" data-content="https%3A%2F%2Fdocs.google.com%2Fpresentation%2Fd%2F1uYjxkjN-aPPMkpTftaM-QUQr0OE9XJv2EOwQniurC0c%2Fedit%23slide%3Did.g2e09d839be3_0_84" frameborder="0" scrolling="no" loading="lazy"></iframe></span><a href="https://docs.google.com/presentation/d/1uYjxkjN-aPPMkpTftaM-QUQr0OE9XJv2EOwQniurC0c/edit#slide=id.g2e09d839be3_0_84" style="display:none" target="_blank" rel="nofollow noopener noreferrer">https://docs.google.com/presentation/d/1uYjxkjN-aPPMkpTftaM-QUQr0OE9XJv2EOwQniurC0c/edit#slide=id.g2e09d839be3_0_84</a><br style="display:none">
発表者: <a href="https://x.com/baseballyama_" target="_blank" rel="nofollow noopener noreferrer">baseballyama</a>さん</p>
<ul>
<li>子コンポーネントで親から受け取ったオブジェクトをリアクティブに扱うにはwatchとrefで分離して実装しなければならない
<ul>
<li>propsをコピーしてrefオブジェクトとして初期化するだけでは親のオブジェクトの変更検知はできない</li>
</ul>
</li>
<li>この2つを処理するUtil関数を用意するとスマートに実装できる</li>
</ul>
<p>個人的にちょうど悩んでいる問題で、関心のあるトピックでした。<br>
Vueのコアな部分でも自分でutil化してもいいのか！という気づきもあり、成長の兆しを感じます。<br>
質問タイムにはコンポーネントの外側でwatchを利用するとメモリリークをしてしまうので、<a href="https://ja.vuejs.org/api/reactivity-advanced#effectscope" target="_blank" rel="nofollow noopener noreferrer">effectScope</a>を利用して対応するのが良いのではという議論がありました。<br>
全く新鮮なメンバーでの議論を目の前で見ることができるのもMeetupイベントの醍醐味だなと感じます。</p>
<h2 id="lt-%E3%82%BB%E3%83%83%E3%82%B7%E3%83%A7%E3%83%B33%3A-vuejs%2Flanguage-tools%E3%82%92%E7%9F%A5%E3%81%A3%E3%81%A6%E3%81%84%E3%81%BE%E3%81%99%E3%81%8B%EF%BC%9F">
<a class="header-anchor-link" href="#lt-%E3%82%BB%E3%83%83%E3%82%B7%E3%83%A7%E3%83%B33%3A-vuejs%2Flanguage-tools%E3%82%92%E7%9F%A5%E3%81%A3%E3%81%A6%E3%81%84%E3%81%BE%E3%81%99%E3%81%8B%EF%BC%9F" aria-hidden="true"></a> LT セッション3: vuejs/language-toolsを知っていますか？</h2>
<p><span class="embed-block zenn-embedded zenn-embedded-card"><iframe id="zenn-embedded__77095b33f667f" src="https://embed.zenn.studio/card#zenn-embedded__77095b33f667f" data-content="https%3A%2F%2Ftsukuha.github.io%2Fv_tokyo20%2F" frameborder="0" scrolling="no" loading="lazy"></iframe></span><a href="https://tsukuha.github.io/v_tokyo20/" style="display:none" target="_blank" rel="nofollow noopener noreferrer">https://tsukuha.github.io/v_tokyo20/</a><br style="display:none">
発表者: <a href="https://x.com/karan_corons" target="_blank" rel="nofollow noopener noreferrer">からころ</a>さん</p>
<ul>
<li>vuejs/language-toolsという言語ツール群がある
<ul>
<li>言語サーバー機能と型チェックに大きく二分される</li>
<li>
<a href="https://volarjs.dev/" target="_blank" rel="nofollow noopener noreferrer">Volar.js</a>をベースとしている</li>
</ul>
</li>
<li>言語サーバーは<a href="https://microsoft.github.io/language-server-protocol/" target="_blank" rel="nofollow noopener noreferrer">LSP</a>というプロトコルに則って実装されている</li>
<li>型チェックの実装を見ると、Volar.jsとvue/language-coreをインポートしているのを確認できる</li>
</ul>
<p>恥ずかしながら、LSPはおろか、言語サーバーの存在自体も理解していませんでした。<br>
実コードを見ながら実装部を確認、解説しており、濃密なセッションでした。<br>
私の実力ではこの知識にたどり着くのはまだまだ先だったと思いますが、セッションの形で情報を得ることでそれをショートカットできた気分です。</p>
<h2 id="lt-%E3%82%BB%E3%83%83%E3%82%B7%E3%83%A7%E3%83%B34%3A-nuxt-server%E3%81%A8%24fetch%E3%82%92%E7%B5%84%E3%81%BF%E5%90%88%E3%82%8F%E3%81%9B%E3%81%9Ftypescript%E9%96%8B%E7%99%BA%E4%BD%93%E9%A8%93">
<a class="header-anchor-link" href="#lt-%E3%82%BB%E3%83%83%E3%82%B7%E3%83%A7%E3%83%B34%3A-nuxt-server%E3%81%A8%24fetch%E3%82%92%E7%B5%84%E3%81%BF%E5%90%88%E3%82%8F%E3%81%9B%E3%81%9Ftypescript%E9%96%8B%E7%99%BA%E4%BD%93%E9%A8%93" aria-hidden="true"></a> LT セッション4: Nuxt Serverと$fetchを組み合わせたTypeScript開発体験</h2>
<p><span class="embed-block zenn-embedded zenn-embedded-card"><iframe id="zenn-embedded__afde6ee69f52" src="https://embed.zenn.studio/card#zenn-embedded__afde6ee69f52" data-content="https%3A%2F%2Fspeakerdeck.com%2Fkspace%2Fnuxt-serverto-fetchwo-zu-mihe-wasetatypescriptkai-fa-ti-yan" frameborder="0" scrolling="no" loading="lazy"></iframe></span><a href="https://speakerdeck.com/kspace/nuxt-serverto-fetchwo-zu-mihe-wasetatypescriptkai-fa-ti-yan" style="display:none" target="_blank" rel="nofollow noopener noreferrer">https://speakerdeck.com/kspace/nuxt-serverto-fetchwo-zu-mihe-wasetatypescriptkai-fa-ti-yan</a><br style="display:none">
発表者: <a href="https://x.com/Kspace_trk" target="_blank" rel="nofollow noopener noreferrer">keigo</a>さん</p>
<ul>
<li>Nuxt ServerでAPIを作成するとき、返却する値に型が付く
<ul>
<li>TypeScriptを用いた開発で良い体験を得られる</li>
</ul>
</li>
<li>openAPIドキュメントを生成することもできる
<ul>
<li>NuxtConfigに設定を追加する</li>
<li>実験的機能なので、現在はAPIエンドポイントが一覧で確認できる程度</li>
</ul>
</li>
</ul>
<p><a href="https://tskaigi.org/" target="_blank" rel="nofollow noopener noreferrer">TSKaigi</a>でもいくつか話題に上がっていたTypeScriptで使いやすいAPIについて、とても強力な解決方法だと感じました。<br>
スライドデザインもリッチで、変数をホバーすると型情報が表示されました。(すごい！)<br>
エディタの挙動と一致しており、型が付く嬉しさをダイレクトに感じる助けになっていたと振り返って感じます。</p>
<h2 id="%E3%83%A1%E3%82%A4%E3%83%B3%E3%82%BB%E3%83%83%E3%82%B7%E3%83%A7%E3%83%B3%3A-nuxt-devtools-101">
<a class="header-anchor-link" href="#%E3%83%A1%E3%82%A4%E3%83%B3%E3%82%BB%E3%83%83%E3%82%B7%E3%83%A7%E3%83%B3%3A-nuxt-devtools-101" aria-hidden="true"></a> メインセッション: Nuxt DevTools 101</h2>
<p><span class="embed-block zenn-embedded zenn-embedded-card"><iframe id="zenn-embedded__24932bf888e4d" src="https://embed.zenn.studio/card#zenn-embedded__24932bf888e4d" data-content="https%3A%2F%2Fspeakerdeck.com%2Fnozomuikuta%2Fnuxt-devtools-101" frameborder="0" scrolling="no" loading="lazy"></iframe></span><a href="https://speakerdeck.com/nozomuikuta/nuxt-devtools-101" style="display:none" target="_blank" rel="nofollow noopener noreferrer">https://speakerdeck.com/nozomuikuta/nuxt-devtools-101</a><br style="display:none">
発表者: <a href="https://x.com/NozomuIkuta" target="_blank" rel="nofollow noopener noreferrer">Nozomu Ikuta</a>さん</p>
<ul>
<li>コードの見通しの良さと学習のしやすさはトレードオフの関係になっている</li>
<li>Nuxtには見通しの良さを確保するための機能が色々含まれている
<ul>
<li>auto imports</li>
<li>NuxtConfig</li>
</ul>
</li>
<li>その中で学習のしやすさをサポートするために<a href="https://devtools.nuxt.com/" target="_blank" rel="nofollow noopener noreferrer">Nuxt DevTools</a>が存在する
<ul>
<li>コンポーネントリスト</li>
<li>ページリスト</li>
<li>インポートの可視化</li>
<li>etc...</li>
</ul>
</li>
</ul>
<p>Nuxtの特徴について見直し、そのメリット、デメリットの提示から入っていたことでその後の説明がスムーズに理解できました。<br>
デモで機能をざっと紹介してくれたので、使い方がいまいちわからなかった機能、そもそも知らなかった機能について理解を深めることができました。<br>
ちょうどNuxtを学習しはじめ、Nuxt DevToolsに頼り切っている私としては共感もあり、新たな知識も得られ、満足感のあるセッションでした。</p>
<h2 id="%E6%87%87%E8%A6%AA%E4%BC%9A">
<a class="header-anchor-link" href="#%E6%87%87%E8%A6%AA%E4%BC%9A" aria-hidden="true"></a> 懇親会</h2>
<p>お寿司とピザが用意され、参加者の方々と交流することができました。<br>
皆さまとてもやさしく、スタッフの方々が話のきっかけを作ってくれたこともあり、楽しく会話できました。<br>
<a href="https://vuefes.jp/2024/" target="_blank" rel="nofollow noopener noreferrer">VueFes</a>のスタッフ業の話や、実務での経験談などをざっくばらんに話すことができ、オフラインイベントの醍醐味を感じることができました。</p>
<h2 id="%E3%81%8A%E3%82%8F%E3%82%8A%E3%81%AB">
<a class="header-anchor-link" href="#%E3%81%8A%E3%82%8F%E3%82%8A%E3%81%AB" aria-hidden="true"></a> おわりに</h2>
<p>あまり深い知識もない学生という立場でしたが、とても楽しめたというのが第一の感想です。<br>
コミュニティに貢献している方々の活動を間近で感じたり、同じ技術を使っているエンジニアの方々と交流できたりと良いこと尽くしでした。<br>
学生だろうと初学者だろうと参加のハードルなんてなく、ただ純粋に楽しめることが伝わっていれば幸いです。<br>
本当に楽しかったので次回もぜひ参加させていただこうかなと思います！</p>


【Report】v-tokyo Meetup #20 に参加してきました

会場スポンサーセッション: headlessなUIライブラリを選択する価値

LT セッション1: What is Vue.js? Hmm… It’s just language lol

LT セッション2: ちょっとしたリアクティブユーティリティのご紹介

LT セッション3: vuejs/language-toolsを知っていますか？

LT セッション4: Nuxt Serverと$fetchを組み合わせたTypeScript開発体験

Discussion