
【Vue Fes Japan】 ハンズオン企画の裏テーマ!? Nuxt Tutorial を選んだ理由と未来
初めに
ごきげんよう.Vue.js 日本ユーザーグループの ubugeeei です.👋
突然ですが,皆さんはこちらをご存知でしょうか?
こちらは Nuxt Tutorial という Nuxt が公式に提供しているチュートリアルの日本語版です.
本家 (英語版) の方はまだ開発途中で,2024/10 時点ではコンテンツがほとんどありません.(空ッポ!)
先日開催された Vue Fes Japan 2024 のハンズオン企画として,このチュートリアルの作者である Anthony Fu さんとのコラボレーションで日本語版を先行公開し,当日の題材として扱いました.
この企画の説明については前回の note をご覧ください!!
振り返り
せっかくなので当日のことを少し振り返ってみます.
満員御礼
この企画は当日の席数の兼ね合いでこの企画に参加するチケットを入手する必要がありました.
そして有り難いことに,このチケットは開催の 1 ヶ月以上前に全て売り切れ,当日も予定通り埋まりました.🎉
本当にありがとうございました.m(_ _)m
スペシャルゲスト
企画紹介の note でも,
さらに、スペシャルゲストが登場する可能性も!?
と触れたように,スペシャルゲストにお越しいただきました.

はい,作者の Anthony Fu さんにお越しいただきました.
Nuxt Tutorial に関するいくつかの説明や質問対応をやっていただいて,これは大変貴重な機会だったと思います.
出演に関して快諾していただいて,感謝しかありません.
(※ Anthony さんは Vue, Nuxt, Vite のコアチームメンバーで,他にもたくさんの OSS の作者/メンテナをやっているすごい方です. https://antfu.me)
世界初公開!
そして,この日本語版 Nuxt Tutorial はしばらく Vue.js 日本ユーザーグループが非公開な GitHub リポジトリとして開発を進めていたのですが,今回は ハンズオン開催当日に Anthony にこのリポジトリの公開作業もやってもらいました. 同時に,https://learn-nuxt.vuejs-jp.org も公開されました.
そんなこんなでこのハンズオンはこの公開作業から始まり,本編のハンズオンに繋がります.
ハンズオン本編
本編では,メイン講師の aster-mnch さんがハンズオンを主導しました.

私 (ubugeeei) とは違い,大勢を目の前に随分と落ち着いた感じで,丁寧かつ良いペースを守りながらハンズオンを進めていただき,「ああ,彼が講師で本当に良かった」と思いながら後ろの方で見ていました.
GitHub Discussion 上で行われた質疑応答もなかなか賑わっていましたし,特に大きなアクシデントもなく当日は大成功だったと思います.
この企画の裏テーマ
ここまで,当日部分に行った内容を見てもイベントとしては十分成り立つものですが,実はこの企画にはいくつかの裏テーマがありました.
今回はそれについて説明します.
せっかくならイベント後もコミュニティの資産になるものを
私たちハンズオンチーム,いや,Vue.js 日本ユーザーグループ全体として,「イベント後も資産にできると嬉しい」という気持ちが強くあります.
ただ当日やり切るだけではなく,せっかくならイベント後もコミュニティにとって意義のあるものを残していきたいのです.
このハンズオンで扱う題材を選ぶ際に,どうにか資産にできるようなものを扱えないかとチームで多くの議論を重ねました.
以下にいくつか紹介します.
Nuxt の準公式な日本語資料を提供

2024/10 現在,実は Nuxt には公式が提供する日本語の文献がありません.
Nuxt2 ではドキュメントが日本語に対応されていますが,実は Nuxt3 は対応されていないのです.
Vue.js コミュニティのドキュメントの多くは多言語対応が進んでいますが,意外にも Nuxt3 はまだ対応されていないのです.
もちろん,コミュニティベースのブログ等はありますが,公式リソースの翻訳版というものは現時点では存在しません.
そこで,このチュートリアルを日本語対応できれば,少し公式に近い資料を日本語として残すことができるのではないかと考えました.
もちろんこのリポジトリとドキュメントは,イベント後も Nuxt の日本語チュートリアル資料として残り続けますし,メンテナンスも継続されます.
OSS コントリビューションの導線を作る

もう 1 つはコントリビューションの導線を作ることです.
このチュートリアルにはいくつかのコントリビューション方法が考えられます.
1. 日本語コンテンツを英語に翻訳する
冒頭でも話した通り,これは英語で書かれた本家 Nuxt Tutorial の日本語先行公開 ver です.つまりは,日本語版に存在していて英語版に存在しないコンテンツがたくさん存在します.
これらを英語に翻訳して,本家にコントリビュートすることができます.
ちなみにこの企画は Anthony とも了承を得ていて,英語版に逆輸入することを歓迎しています.リソースの都合上,本家のコンテンツをこれ以上早く開発することが困難のようで,お互いに win-win な構造だということでコラボレーションすることになりました.

2. 新しいチャプターを書く
このチュートリアルは実はいくつかの部分においてまだ未完成です.
Vue Fes Japan のハンズオンで扱う 120 分という短い時間に収まるように最低限の内容になっています.今あるチュートリアルに足りない部分があれば是非貢献して欲しいです.
そして,この Nuxt Tutorial には基本的な Nuxt の使い方を説明するチュートリアルに加え,いくつかのケーススタディを搭載する予定です.
これらはまだ何も実装されてませんので,ここもコントリビューションチャンスです.

他にも,細かいタイポや言い回しの修正であったり,様々なコントリビューションを考えることができます.
また,これらのコントリビューションは手軽で,いますぐに始めることができるはずです.
vuejs/core や nuxt/nuxt へのソースコードに関するコントリビューションは少々難易度の高いものかもしれませんが,Nuxt Tutorial はただの Nuxt Content で作られたコンテンツです.
内容はマークダウンで実装されてありますので,気軽に編集を行うことができます.
🤝 私たちは Nuxt Tutorial を一緒に作る仲間を募集しています.
ここまでで説明した通り,私たちはこの Nuxt Tutorial をコミュニティ資産として生かすために,コンテンツの継続的なメンテナンスや,OSS コントリビューションのきっかけにしていきたいと考えています!
是非ともたくさんのコミュニティメンバーと共に作っていきたいと思っていますので,協力者は常にオープンに募集しています.
協力したいという方は,もちろんリポジトリにプルリクエストを作成してもらっても良いですし,「やってみたいけど何からやれば良いかわからない!」と言った方がもしいれば近くにいるメンバーに気軽に声をかけてもらえればと思います.(Twitter でも,Slack でも,Discord でも, GitHub でも)