Vue.js/Nuxt勉強会を行いました
フロントエンドエンジニアのハコザキです。
普段の業務は、Webサイトの制作やWebサービスの画面実装などを担当しておりますが、
今回は株式会社コムデ様に所属するエンジニアの方々に対し、
Vue.js/Nuxtの勉強会を開催しました。
自分自身、教える側として勉強会に参加したのは初めてのことだったので
Vue/Nuxtの知識はもちろんのこと、資料の作り方や伝え方など非常に勉強になりました…！
どんな勉強会を開催したのか、流れや工夫したことなどをご紹介します！
参加いただいたコムデ様のWantedllyにも勉強会についての記事がありますので、
あわせてご覧いただければと思います！！
概要
勉強会はVue.js/Nuxtを使ったことがない方々を対象に、月1ペースで全4回行いました。
内容は、
Vue.js/Nuxtについてゼロの知識からWebサイトを実装、 実際にホスティングサービスでのデプロイ→運用までの流れをハンズオン形式で行いました。
最終的な成果物はこのようなものを実装しました！
主な仕様はこちら↓
| フロントエンド | Nuxt（v2.15.8）のSSG |
| ヘッドレスCMS | WordPress（v5.x.x） |
| ホスティングサービス | Netlify |
| コード管理 | GitHub |
今回はWordPressの機能の一つであるWP REST APIを使いました。
WordPressをヘッドレスCMSとして扱い、コンテンツ管理を行っています。
新規サイト制作であれば microCMS や Contentful のような
ヘッドレスCMSのサービスを利用することが多いですが、
案件によってはWPからのサイトリニューアル案件もあります。
→ 記事自体は残したままリニューアルできる
準備について
勉強会開催の2週間前
- 前回開催時のアンケートの集計
- アンケート内の不明点や気になることに対し、回答をまとめ先方に送付
1週間前
- ハンズオンの成果物の実装・資料の作成
- 事前準備の資料作成
→ 前回不参加の方や躓いてしまった人向け
→ 目を通していただきたい記事などの共有
2. 3日前
- 社内で勉強会のデモを行い、レビューをいただく
⇛ 本番と同じ形式で行うため時間配分や説明が足りない（間違っている）などあれば適宜指摘をいただけてよかったです。 - ハンズオン資料については社内の一部の方に共有し
⇛ 誤った表現になっていないか、説明が不十分な箇所がないかなどの確認
当日
タイムスケジュールはこのような感じ
———
会社説明など（5分） —> 竹部さん
スライド形式での講義（15分 ~ 30分）—> 大野さん-- 休憩 --
ハンズオン（50分）—> 箱崎
質疑応答（5分）—> 大野さんと箱崎
終了の挨拶
———
基本的には講義 + ハンズオン形式で行い、
講義で今回学習することの概要を説明したあと、
実際に手を動かして理解を深めていくという流れで行いました。
形式について
講義
このような感じでスライド形式でイラストなどの図を用いて解説しました。
ハンズオン
ハンズオンについても、後々見返せるように資料を作成しました。（Notionは便利）
このような感じで資料+VSCodeスタイルで画面共有して解説しました。
アンケート
Google Formでアンケートを作成しました。
質問や不明点などは次の回の開催までに回答することで、
不明点を解消した状態で次の勉強会を開催できるようにしました。
もう少し具体的な内容
ハンズオンについてですが、
今回はOptions APIをベースに資料の作成を行いました。
Composition APIをNuxt2に入れても良かったのですが、
TypeScriptを導入しないこと/Vueの基本的な構文になれるためOptions APIを採用しました。
いきなり全部導入してしまうと環境構築などで時間がとられてしまうため、
なるべくシンプルな状態で始めることができたのは良かったと思います！
続いて、各回で行った内容についてご紹介します。
第1回：
全4回で扱うことなどの前提について説明し、
Nuxtとはなにか、フロントエンドにおいてどのような位置づけにあるかなどの観点から説明しました。
ハンズオンでは、実際にNuxtプロジェクトの環境構築（Scssの導入など）を行いました。
第2回：
Vueの基本的な構文、Nuxtの動的ルーティングなどについて触れ、
実際にページを作成することでVue.js/Nuxtでのコーディングを行いました。
第3回：
コンポーネントについて説明し、第二回で行ったソースをコンポーネント化（props/emit）することで
メリットなどを体感していただきました。
また、WP REST APIを利用してNuxtで外部データとのやりとりの実装についても行いました。
第4回：nuxt generate での静的ファイル生成、GitHubとNetlifyの連携、
payloadでのAPIコール数削減方法などの実際と同等の運用・保守までの流れを行いました。
4回目が終わったあとに、情報交換などの交流会を行いました。
参加者から頂いた感想
4回目でいただいたアンケートを原文のまま一部ご紹介します..！4回にわたり、内容の濃い勉強会を開催いただきありがとうございます。正直、ついていけないことも多かったのですが、一人ではなかなか取っ掛かりが掴めなかった世界に触れられて、大変貴重な経験になりました。 いただいた資料をまたイチから読み直し、まずは一人で構築できるように勉強していきます。 今後ともご相談させていただくことがあるかもしれませんが、宜しくお願いいたします。
勉強会していただきありがとうございました！Vue.jsを自分で前から少し勉強していたのですが、Nuxt.jsは名前を聞いたことがある程度にしか知らなかったので、基礎から教えていただいてとても勉強になりました。一人で勉強始めていたら分からなすぎて始めることすら難しかっただろうな。。。と思います。。今回教えていただいたことを参考に自分でも勉強していきます。ありがとうございました。
今後も、色々とご質問等させていただくこともあるかと思いますが引き続きよろしくお願い致します。 大変お忙しい中、４回の勉強会ありがとうございました。 正直講義だけでは、自分はVueを使えるようになった！とは言えないですが、まずは基本構文とデータのやり取り、組み立てや考え方を学び実際に何か作ってみたいと思います。 ありがとうございました！
第4回講義ありがとうございました！ かなり実践的で今後にいかせていけると思いました。これから、内容を復習し、自分の中に落とし込み、実践で使っていけるように頑張りたいと思います！ また、機会があればよろしくお願いいたします。
全４回の勉強会でvue.jsとnuxt.jsの全体の雰囲気を知ることができました、普段使わないコマンドも使う機会が多かったので苦手意識を減らすことができたと思います。限られた時間の中でとても濃い体験をさせていただきました。この経験を実際の業務で活かせるように自身で理解を深め続けていきたいと思います。ありがとうございました！
4回にわたり勉強会を開催していただき、ありがとうございました。新しい技術を学ぶ際はどこから手をつければ良いか迷ってしまうので、基本から体系的に教えていただいたことは大変貴重な機会となりました。 自身の知識不足が明確になる部分もあったので、改めていただいた資料も参考にしながら、手を動かしてNuxt.jsの知識を深めていきたいと思います。 改めてありがとうございました。
毎回丁寧に回答していただき、とても嬉しかったです..！
業務時間外にたくさん調べたりして時間をかけてよかったと思いました..！
感想
Vue.js/Nuxtの実務経験は2年ほどありましたが、
ハンズオン資料の作成を進めていくにあたり、まだまだ知らなかったことがあり勉強になりました。
その場で伝えきれないことを予想して、
あとから見返せるように資料については情報量が少し多すぎるくらい記載しました。
→ ハンズオンとは少し脱線する内容（単語の意味など）については
Notionの別ページに分けたりしてます。
参加していただいた方から資料の見やすさで高評価をいただくことができて良かったです。
また、全4回大きなトラブルもなく想定時間ぴったりに収めて発表することができて良かったです。
（もともと人前で話すのに苦手意識があったのでたくさん練習してよかった）