秋のブログ週間: VueFes登壇レポート

Author: ma91n

source/_posts/2025/20251031a_秋のブログ週間2025_.md

@@ -0,0 +1,41 @@
+---
+title: "秋のブログ週間2025 "
+date: 2025/10/31 00:00:00
+postid: a
+tag:
+  - インデックス
+category:
+  - Culture
+thumbnail: /images/2025/20251031a/thumbnail.jpg
+author: admin
+lede: "秋のブログ週間とは2020年から始まったブログリレーの企画です。元ネタは、秋の読書週間（文化の日を中心とした10/27〜11/9の2週間）です。これに合わせて、平日にブログ記事を投稿していこうというブログリレーなイベントです。"
+---
+<img src="/images/2025/20251031a/unnamed.jpg" alt="unnamed.jpg" width="1024" height="1024" loading="lazy">
+
+# 秋のブログ週間とは
+
+2020年から始まったブログリレーの企画です。元ネタは、秋の読書週間（文化の日を中心とした10/27〜11/9の2週間）です。これに合わせて、平日にブログ記事を投稿していこうというブログリレーなイベントです。
+
+「春の入門祭り」「夏の自由研究」「秋のブログ週間」「冬のアドベントカレンダー」と四季の名を冠に持つ、フューチャー技術ブログ4大ブログリレーの1つと言われています。
+
+テーマは秋の読書週間のイメージで、普段のソースコードがでてくる技術記事ではなく、ソファーでゆっくり読めるような、読み物（エッセー）よりの記事を書いていこう、としています。元ネタが読書週間ですし、積読消化を進めるための書評記事もOKとしています。気になるタイトルの記事を読んで読書欲を刺激していきましょう。
+
+12月にはお馴染みQiitaさんのアドベントカレンダーにも参加したいと思いますので、秋のブログ週間はちょうどその中間のまったりとした、秋の夜長を楽しむためにも読み物成分を中心として楽しんでいただければです。
+
+2025年はハロウィンの本日から開始することになりました。
+
+| Date    | Name   | Title                                |
+|---------|--------|--------------------------------------|
+| 1週目     | 🎃 | -                                    |
+| 10/31 木 | 永井 優斗  | [Vue Fes Japan 2025にてライトニングトークに登壇しました](/articles/20251031b/) |
+| 2週目     | 👻     |                                      |
+| 11/4 火  | 内堀 航輝  | 新卒1年目で勉強してた時に感じたこと                   |
+| 11/5 水  | 清水 雄一郎 | TBD                                  |
+| 11/6 木  | 小橋 昌明  | TBD                                  |
+| 11/7 金  | 澁川 喜規  | TBD                                  |
+| 3週目     | 🍬     | -                                    |
+| 11/10 月 | 大前七奈   | TBD                                  |
+
+
+いつもはコードが本文に書かれていることも多いフューチャー技術ブログですが、この連載はスマホ片手で読めるような記事成分を高めたいと思います。約2週間、どうぞお付き合いください。
+

source/_posts/2025/20251031b_Vue_Fes_Japan_2025にてライトニングトークに登壇しました＆フューチャーアーキテクトがスポンサーをしました.md

@@ -0,0 +1,276 @@
+---
+title: "Vue Fes Japan 2025にてライトニングトークに登壇しました＆フューチャーアーキテクトがスポンサーをしました"
+date: 2025/10/31 00:00:01
+postid: b
+tag:
+  - Vue.js
+  - VueFes
+  - 登壇レポート
+category:
+  - Programming
+thumbnail: /images/2025/20251031b/thumbnail.jpeg
+author: 永井優斗
+lede: "![KIMG20251025_170540455.jpeg]写真は私の登壇の様子を参加していた別の社員に撮っていただいたものです。FVGの永井優斗です。"
+---
+
+<img src="/images/2025/20251031b/KIMG20251025_170540455.jpeg" alt="KIMG20251025_170540455.jpeg" width="1200" height="901" loading="lazy">
+
+写真は私の登壇の様子を参加していた別の社員に撮っていただいたものです。
+
+# 1. はじめに
+
+FVGの永井優斗です。[秋のブログ週間](/articles/20251031a/)1本目です。
+
+2025年10月25日に開催された「Vue Fes Japan 2025」のライトニングトーク（LT）に登壇いたしました。昨年のプラチナスポンサーセッション（[昨年の登壇報告記事](/articles/20241128a/)） に続き、2年連続での登壇となります。
+
+今回フューチャーアーキテクト株式会社は、今回ゴールドスポンサーおよびルームネイミングライツスポンサーとして協賛しました。ネーミングライツにより、１つの部屋（トラック）は「経営とITをデザインする フューチャーアーキテクトトラック」として会場内でアナウンスされたほか、`#vuefes_future` のハッシュタグで本トラックの公演内容はX上でポストされました。
+
+『React Nativeならぬ"Vue Native"が実現するかも?  新世代マルチプラットフォーム開発フレームワークの LynxとLynxのVue.js対応を追ってみよう』 というタイトルで、今年3月にOSS化されたばかりのフレームワーク「Lynx」と、そのVue.js対応の動向についてお話ししました。
+
+また、登壇とは別の時間は、私は当日ボランティアスタッフとしても活動しており、ハンズオンの出欠を確認したりしておりました。
+
+# 2. CfP(Call for Proposal)の採択
+
+今回はスポンサーセッションではなく、公募（いわゆる「CfPを通す^[1]」）での登壇です。VueFesでは、CfPのスピーカーの採択は、完全に匿名で応募者の名前を隠したうえで登壇タイトルと詳細をみて判断をしているそうです。その話を聞いて、著名なスピーカーでなくとも、ニッチな話をもっていけば、もしかしたら面白がって採択されるかもな？と思い、ニッチなネタとして3月のLynx公開時からLynxのVue対応のネタを温めていました。
+
+また、私はTSKaigi 2025にも運営スタッフとして参加しています。そのAfter Eventで知り合った[siminoriさん](https://vuefes.jp/2025/speaker/noriyuki-shimizu)と、「（上記のような）Lynxネタを温めており、VueFesのLTに応募をしようと思っている」と話したところ、意気投合し、お互いLTでCfPに応募しようと盛り上がりました。まさか、二人ともLT登壇が決まるとは思わず、スピーカーの紹介がWebサイトに載った時には大変驚きました。
+
+来年はTSKaigiの登壇…かな…！
+
+# 3. 登壇内容と資料
+
+当日の登壇資料はこちらです。
+
+<script defer class="speakerdeck-embed" data-id="2c1a80db76cd4cf291789367a341d9d7" data-ratio="1.7777777777777777" src="//speakerdeck.com/assets/embed.js"></script>
+
+LTなので詳細を語ることを省きつつも、Vueでモバイル開発することへの過去のチャレンジを振り返りつつ、3月発表されたLynxに着目していること、Vue対応の経緯と現状について話しました。
+
+また、VueLynxについては[海外の方によってまとめられた記事](https://www.vuemastery.com/blog/vue-native-vue-lynx/)があるため、自分がこれを発表する意味はなんだろうと考えた結果、自分自身がLynxを触った感想も入れ込みました。それを入れようとおもったがゆえに、9月に[Lynx記事](https://future-architect.github.io/articles/20250902a/)を仕込んだりするわけですが笑
+
+## 4. 当日の様子と反響
+
+昨年に続き、2年連続での登壇、3年連続の参加となりましたが、やはりVue Fes Japanの熱気は格別でした。
+毎回思うことですが、”Fes"という言葉が正しいと思えるくらいにお祭り感のある、たのしいカンファレンスでした。
+
+登壇後の反応としては、Lynxそのものを知らなかったという話や、LynxとLynxのVue対応、あれだけ盛り上がってたのにいまは確かにそうでもないなといったコメントをいただきました。
+
+**＜X上での反応＞**
+
+<blockquote class="twitter-tweet"><p lang="ja" dir="ltr">Lynx 初聞き<br>2025年3月に出たのね<a href="https://t.co/8OD0OQqLyU">https://t.co/8OD0OQqLyU</a><a href="https://twitter.com/hashtag/vuefes_mates?src=hash&amp;ref_src=twsrc%5Etfw">#vuefes_mates</a></p>&mdash; yuki / ほにゃにゃ (@honyanyas) <a href="https://twitter.com/honyanyas/status/1981996315744842055?ref_src=twsrc%5Etfw">October 25, 2025</a></blockquote> <script async src="https://platform.twitter.com/widgets.js" charset="utf-8"></script>
+
+<blockquote class="twitter-tweet"><p lang="ja" dir="ltr">確かにLynx出た直後は話題になってたけど、それ以降あんまり話題になってない感じするな<a href="https://twitter.com/hashtag/vuefes?src=hash&amp;ref_src=twsrc%5Etfw">#vuefes</a> <a href="https://twitter.com/hashtag/vuefes_mates?src=hash&amp;ref_src=twsrc%5Etfw">#vuefes_mates</a></p>&mdash; thirdlf (さどるふ) (@thirdlf1) <a href="https://twitter.com/thirdlf1/status/1981996967162249284?ref_src=twsrc%5Etfw">October 25, 2025</a></blockquote> <script async src="https://platform.twitter.com/widgets.js" charset="utf-8"></script>
+
+また、自己紹介スライドにあった、BBQインストラクターやパエリア検定上級が気になったと声をかけてくださった人もいました笑
+
+## スポンサーブース
+
+フューチャーアーキテクトは、今回ゴールドスポンサーとしてブースも出展していました。
+
+今回は配布物（ノベルティ）を3種類用意し、くじ引きでどれかが当たる企画を実施しました。1等は最近発売された当社の渋川よしきが著者の1人である[「JavaScript/TypeScript実力強化書―⁠―関数・非同期処理・型システム完全攻略」](https://gihyo.jp/book/2025/978-4-297-15194-2)に渋川のサイン入りでお渡ししました。
+
+くじはVueFesだからと、Vue.jsを使ったHTMLファイルで作成しました。（GeminiさんがHTMLファイル1枚で9割方作成してくれました。生成されるまで30秒くらい。ほんとにすごいね。）
+
+実際には一瞬で抽選処理は終わるんですが、ドキドキ感のある「抽選中」の演出をつけたものを作成しました。
+
+<img src="/images/2025/20251031b/vuefes_lot.gif" alt="vuefes_lot.gif" width="802" height="697" loading="lazy">
+
+<details><summary>くじのソースコードはこちら</summary>
+
+```html vuefeslot.html
+<!DOCTYPE html>
+<html lang="ja">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>くじ引き</title>
+    <script src="https://unpkg.com/vue@3"></script>
+    <style>
+        body {
+            font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
+            display: flex;
+            justify-content: center;
+            align-items: center;
+            min-height: 100vh;
+            margin: 0;
+            background-color: #f4f7f9;
+        }
+        #app {
+            text-align: center;
+            background-color: white;
+            padding: 30px 40px;
+            border-radius: 12px;
+            box-shadow: 0 10px 25px rgba(0,0,0,0.1);
+            width: 90%;
+            max-width: 400px;
+        }
+        h1 {
+            color: #333;
+            margin-bottom: 10px;
+        }
+        button {
+            padding: 15px 35px;
+            font-size: 1.2em;
+            font-weight: bold;
+            cursor: pointer;
+            border: none;
+            background: linear-gradient(45deg, #ff8a00, #e52e71);
+            color: white;
+            border-radius: 8px;
+            transition: transform 0.2s, box-shadow 0.2s;
+            margin: 25px 0;
+            box-shadow: 0 4px 15px rgba(229, 46, 113, 0.4);
+        }
+        button:disabled {
+            background: #ccc;
+            cursor: not-allowed;
+            box-shadow: none;
+        }
+        button:hover:not(:disabled) {
+            transform: translateY(-2px);
+            box-shadow: 0 6px 20px rgba(229, 46, 113, 0.5);
+        }
+        #result {
+            margin-top: 20px;
+            font-size: 2em;
+            font-weight: bold;
+            color: #e52e71;
+            height: 60px;
+            display: flex;
+            justify-content: center;
+            align-items: center;
+        }
+        .finished-message {
+            color: #555;
+            font-weight: bold;
+        }
+        .prize-list {
+            list-style: none;
+            padding: 0;
+            margin-top: 25px;
+            text-align: left;
+        }
+        .prize-list li {
+            margin-bottom: 10px;
+            font-size: 1.1em;
+            background-color: #f9f9f9;
+            padding: 10px;
+            border-radius: 5px;
+        }
+
+        /* ドキドキ感を出すためのアニメーション */
+        @keyframes drumroll {
+            0% { transform: scale(1); opacity: 0.7; }
+            25% { transform: scale(1.1); opacity: 1; }
+            50% { transform: scale(1); opacity: 0.7; }
+            75% { transform: scale(1.1); opacity: 1; }
+            100% { transform: scale(1); opacity: 0.7; }
+        }
+
+        .drawing-text {
+            font-size: 1.5em; /* 結果より少し小さく */
+            color: #555;
+            animation: drumroll 1.2s infinite;
+        }
+    </style>
+</head>
+<body>
+
+<div id="app">
+    <h1>🥢Future Architectくじ🥢</h1>
+    <button @click="startDraw" :disabled="isFinished || isLoading">くじを引く</button>
+
+    <div id="result">
+        <p v-if="isLoading" class="drawing-text">抽選中...</p>
+        <p v-else-if="result">{{ result }}</p>
+    </div>
+
+    <div v-if="isFinished" class="finished-message">
+        <p>くじはすべてなくなりました！</p>
+    </div>
+
+    <hr>
+
+    <h2>残り本数</h2>
+    <ul class="prize-list">
+        <li v-for="prize in prizes" :key="prize.name">
+            {{ prize.name }}: 残り <strong>{{ prize.stock }}</strong> 本
+        </li>
+    </ul>
+</div>
+
+<script>
+    const { createApp, ref, computed } = Vue
+
+    createApp({
+        setup() {
+            const prizes = ref([
+                { name: '🥇 1等', stock: 5 },
+                { name: '🥈 2等', stock: 60 },
+                { name: '🥉 3等', stock: 100 },
+            ]);
+
+            const result = ref('');
+            // 抽選中かどうかを管理する状態
+            const isLoading = ref(false);
+
+            const totalStock = computed(() => {
+                return prizes.value.reduce((total, prize) => total + prize.stock, 0);
+            });
+
+            const isFinished = computed(() => totalStock.value === 0);
+
+            // くじを引く処理を2段階に分ける
+            const startDraw = () => {
+                if (isFinished.value || isLoading.value) return;
+
+                isLoading.value = true; // 抽選開始
+                result.value = ''; // 前回の結果をクリア
+
+                // 2500ミリ秒 (2.5秒) 後に結果を出す
+                setTimeout(() => {
+                    drawLottery();
+                    isLoading.value = false; // 抽選終了
+                }, 2500);
+            };
+
+            // 実際の抽選ロジック
+            const drawLottery = () => {
+                const random = Math.floor(Math.random() * totalStock.value) + 1;
+                let accumulated = 0;
+                for (const prize of prizes.value) {
+                    if (prize.stock > 0) {
+                        accumulated += prize.stock;
+                        if (random <= accumulated) {
+                            result.value = `🎉 ${prize.name} 当選！ 🎉`;
+                            prize.stock--;
+                            break;
+                        }
+                    }
+                }
+            };
+
+            return {
+                prizes,
+                result,
+                startDraw,
+                isFinished,
+                isLoading // テンプレートで使えるようにする
+            };
+        }
+    }).mount('#app');
+</script>
+
+</body>
+</html>
+```
+
+</details>
+
+ありがたいことに、昨年を大幅に上回る人数の方がスポンサーブースに立ち寄っていただいたこともあり、ノベルティは13時頃にはすべてはけてしまったようです。
+それ以降に立ち寄ってくださった皆様、申し訳ございません。
+
+# 5. 最後に
+
+今回のセッションでお話しした「VueLynx」は、まだプロトタイプが公開された段階で、正直なところ、この先どうなるかは分かりませんし、Lynxそのものも、まだ日本語での情報が少ない状況です。登壇資料の最後に書いた通り、本登壇を通じて、実現した時のワクワク感が参加者の皆さんに届き、少しでも盛り上がれば幸いです。
+
+最後になりましたが、このような素晴らしい技術コミュニティの「お祭り」を企画・運営をし、LT登壇の機会をいただきました、Vue.js日本ユーザーグループの皆様、そして当日、LTにご参加いただいた皆様、ありがとうございました。